Steven01567644335
Gebruiker
- Lid geworden
- 14 mei 2022
- Berichten
- 52
Bekijk de onderstaande video om te zien hoe je onze site als een web app op je startscherm installeert.
Opmerking: Deze functie is mogelijk niet beschikbaar in sommige browsers.
// het array met de tags
var arrTags = [
["Javascript", 1634, 987],
["jQuery", 1111, 34],
["PHP", 1024,1122],
["Asp.Net", 977, 1005],
["Photoshop", 594, 789],
["XML", 40, 666],
["Access", 55, 77],
["Java", 278, 277],
["MySQL", 155, 122]
]
function verwerkCloudTags (tag) {
// laat voorbeeld zien van array tag[ ]
console.log( tag[0] ); // naam
console.log( tag[1] ); // huidig aantal
console.log( tag[2] ); // oud aantal
// controleer dalend of stijgend
if (tag[2] > tag[1]) {
console.log("Het is een daler");
} else {
console.log("Het is een steiger");
}
// verwijder deze regel en maak hier jouw code.
}
// doorloop de hoofd array arrTags[0] t/m arrTags.length
// het zijn 9 items, van 0 t/m 8
var i, arrItem;
for (i = 0; i < arrTags.length; i++) {
// arrItem is array met: naam, huidig aantal, oud aantal
arrItem = arrTags[i];
// roep de functie aan
verwerkCloudTags (arrItem);
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>JS PF taak: TagCloud</title>
<style media="screen" type="text/css">
<!--
em {
font-style:normal;
font-weight:bold;
color:#906;
}
img {
float:left
}
h3 {
clear:both;
}
#tagContainer {
position:absolute;
background-color:#CFF;
margin:1em;
padding:0;
width: 500px;
height:400px;
overflow:hidden;
border:2px solid silver;
}
span.tag {
position:absolute;
top:0;
left:0;
}
-->
</style>
<script type="text/javascript">
//het array met de tags//elk item is zelf een Array met de naam, het huidig aantal stemmen en het vorig aantal stemmen die het kreeg
var arrTags = [
["Javascript", 1634, 987],
["jQuery", 1111, 34],
["PHP", 1024,1122],
["Asp.Net", 977, 1005],
["Photoshop", 594, 789],
["XML", 40, 666],
["Access", 55, 77],
["Java", 278, 277],
["MySQL", 155, 122]
]
</script>
</head>
<body>
<h1>Javascript PF taak: eenvoudige Tag cloud</h1>
<p>Een <em>tag cloud</em> of <em>data cloud</em>, is een visuele voorstelling van het belang van een term, meestal in een website.
<br>Het aantal keren dat die term voorkomt wordt dan voorgesteld door de lettergrootte en/of de kleur van het woord. Hiernaast zie je bijvoorbeeld een tag cloud die het aantal inwoners per land weergeeft</p>
<h3>Opdracht: </h3>
<ul>
<li>Bekijk de broncode. Dit bestand bevat een Array <code>arrTags</code>. Maak er gebruik van om een eenvoudige <em>tag cloud</em> te produceren in het element <code>#tagContainer</code></li>
<li>maak voor elke term in het array een <code>span</code> element aan en positioneer dat <code>absolute</code> in de container.</li>
<li>Maak gebruik van <code>Math.random()</code> om een willekeurige plaats, zowel vertikaal als horizontaal, te genereren binnen de container.</li>
<li>bedenk zelf een algoritme die de lettergrootte berekend afhankelijk van het aantal stemmen die een term kreeg</li>
<li>kan je ook de kleur toekennen? groen voor stijgers, rood voor dalers</li>
</ul>
<h3>Geteste topics</h3>
<ul>
<li>Arrays</li>
<li>style properties</li>
<li><code>Math.random()</code> object</li>
<script>
window.onload = function(){}
for(x<10){
function verwerkCloudTags (tag) {
console.log( tag[0] ); // naam
console.log( tag[1] ); // huidig aantal
console.log( tag[2] ); // oud aantal
if (tag[2] > tag[1]) {
console.log("Het is een daler");
} else {
console.log("Het is een steiger");
}
function Maketag{
var xa=span.insertBefore('span', 'script');
if (x=1){
var xb=document.createElement('span');
document.getElementByTagName('span').setAttribute('width', 'height');
innerHTML="Javascript"
}
createTextNode('Javascript');
if (x=2){
var xc=document.createElement('span');
document.getElementByTagname('span').setAttribute('width', 'height');
createTextNode('jQuery');
}
if (x=3){
var xd=document.createElement('span');
document.getElementByTagName('span').setAttribute('width', 'height');
createTextNode('PHP');
}
if (x=4){
var xe=document.createElement('span');
document.getElementByTagName('span').setAttribute('width', 'height');
createTextNode('ASP.NET');
}
if (x=5){
var xf=document.createElement('span');
document.getElementByTagName('span').setAttribute('width', 'height');
createTextNode('Photoshop');
}
if (x=6){
var xg=document.createElement('span');
document.getElementByTagname('span').setAttribute('width', 'height');
createTextNode('XML');
}
if (x=7){
var xh=document.createElement('span');
document.getElementByTagname('span').setAttribute('width', 'height');
createTextNode('Access');
}
if (x=8){
var xi=document.createElement('span');
document.getElementByTagname('span').setAttribute('width', 'height');
createTextNode('Java');
}
if (x=9){
var xj=document.createElement('span');
createTextNode('MySql');
document.getElementByTagname('span').setAttribute('width', 'height');
}
var newtext = document.createTextNode(text),
}
var i, arrItem;
for (i = 0; i < arrTags.length; i++) {
arrItem = arrTags[i];
verwerkCloudTags (arrItem);
var eButton GetElementsByTagName('button')eButton.addEventListener("click", xarray);
function xarray{}
console.log( key + ": " + obj[key])
arrTags.lenght p1 = document.getElementByTagName('Javascript')[0];
p1.appendChild();
p2 = document.getElementByTagName('jQuery')[1];
p2.appendChild();
p3 = document.getElementByTagName('PHP')[2];
p3.appendChild();
p4 = document.getElementByTagName('ASP.net')[3];
p4.appendChild();
p5 = document.getElementByTagName('Photoshop')[4];
p5.appendChild();
p6 = document.getElementByTagName('XML')[5];
p6.appendChild();
p4 = document.getElementByTagName('Access')[6];
p4.appendChild();
p5 = document.getElementByTagName('Java')[7];
p5.appendChild();
p6 = document.getElementByTagName('MySql')[8];
p6.appendChild();
}
var aoPersoneel = [
{ id: 4678, naam: "Javascript", width: 1634, height:: 987, },
{ naam: "jQuery", width: 1111, height 34,
],
},
{ naam: "PHP", width: 1024, height: 1122, },
{ naam:"ASP.NET", width: 799, height: 1005; },
{ naam:"Photoshop", width: 594, height: 789, },
{ naam:"xml", width: 40, height: 666, },
{ naam:"Access", width: 55, Height:77, },
{ naam:"Java", width: 278, Height: 277, },
{ naam:"MySql" width: 155, Height: 122, },
]
var vb = math.random
if{
math.random=1;
innerHTML = vb + "Javascript"
}
if{
math.random=2;
innerHTML = vb + "jQuery"
}
if{
math.random=3;
innerHTML = vb + "PHP"
}
if{
math.random=4;
innerHTML = vb + "ASP.NET"
}
if{
math.random=5;
innerHTML = vb + "Photoshop"
}
if{
math.random=6;
innerHTML = vb + "XML"
}
if{
math.random=7;
innerHTML = vb + "Access"
}
if{
math.random=8;
innerHTML = vb + "Java"
}
if{
math.random=9;
innerHTML = vb + "MySql"
}
}
</script>
</ul>
<div id="tagContainer">
<img src="JS_taak_TagCloud_bestanden/350px-World_Population.htm"
alt="wereldbevolking per land">
</div>
</body>
</html>
Het concept is in alle talen gelijk, je schrijft het alleen anders.In tegenstelling tot Basic is er bij de for lus geen NEXT die eraan te pas komt
for x = 0 to 10 step 2
.....
next x
for (x = 0; x <= 10; x = x + 2) {
.....
}
Als ik eerlijk mag zeggen begint dit een complete opdracht te worden die we stuk voor stuk moeten voorkauwen. Ook het feit dat je ongecontroleerd een hele lap HTML en JS gaf laat mij het gevoel bekruipen dat wij jouw opdracht moeten uitvoeren.
Een beetje hulp vind ik niet erg, maar ken je deze uitdrukking?
Give a man a fish and you feed him for a day; teach a man to fish and you feed him for a lifetime
Maar ik kan een tip geven. Als je een grafische weergave moet maken? Maak eerst een statische mock-up in HTML en CSS. Als je dit hebt, dan kan je met JavaScript de stylen en waardes aanpassen.
Eventueel kan je gebruik maken van kant-en-klare oplossingen, zoals ChartJS.
Het klopt niet dat je hele opdrachten voor mij moet uitvoeren. Help Mij betekent Help mij en niet: ga vissen…
<!DOCTYPE html><html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>JS PF taak: TagCloud</title>
<style media="screen" type="text/css">
<!--
em {
font-style:normal;
font-weight:bold;
color:#906;
}
img {
float:left
}
h3 {
clear:both;
}
#tagContainer {
position:absolute;
background-color:#CFF;
margin:1em;
padding:0;
width: 500px;
height:400px;
overflow:hidden;
border:2px solid silver;
}
span.tag {
position:absolute;
top:0;
left:0;
}
-->
</style> <script type="text/javascript">
//het array met de tags
//elk item is zelf een Array met de naam, het huidig aantal stemmen en het vorig aantal stemmen die het kreeg
var arrTags = [
["Javascript", 1634, 987],
["jQuery", 1111, 34],
["PHP", 1024,1122],
["Asp.Net", 977, 1005],
["Photoshop", 594, 789],
["XML", 40, 666],
["Access", 55, 77],
["Java", 278, 277],
["MySQL", 155, 122]
]
</script>
</head>
<body>
<h1>Javascript PF taak: eenvoudige Tag cloud</h1>
<p>Een <em>tag cloud</em> of <em>data cloud</em>, is een visuele
voorstelling van het belang van een term, meestal in een website. <br>
Het aantal keren dat die term voorkomt wordt dan voorgesteld door de
lettergrootte en/of de kleur van het woord. Hiernaast zie je bijvoorbeeld
een tag cloud die het aantal inwoners per land weergeeft</p>
<h3>Opdracht: </h3>
<ul>
<li>Bekijk de broncode. Dit bestand bevat een Array <code>arrTags</code>
. Maak er gebruik van om een eenvoudige <em>tag cloud</em> te
produceren in het element <code>#tagContainer</code></li>
<li>maak voor elke term in het array een <code>span</code> element aan en
positioneer dat <code>absolute</code> in de container.</li>
<li>Maak gebruik van <code>Math.random()</code> om een willekeurige
plaats, zowel vertikaal als horizontaal, te genereren binnen de
container.</li>
<li>bedenk zelf een algoritme die de lettergrootte berekend afhankelijk
van het aantal stemmen die een term kreeg</li>
<li>kan je ook de kleur toekennen? groen voor stijgers, rood voor dalers</li>
</ul>
<h3>Geteste topics</h3>
<ul>
<li>Arrays</li>
<li>style properties</li>
<li><code>Math.random()</code> object</li>
<script>
window.onload = function(){
for (var i=0; i <arrTags.length; i++) {
console.log(arrTags[i]);
console.table(arrTags);
console.log(arrTags[0][1]);
console.log(arrTags[1][1]); // naam
console.log(arrTags[2][1]); // huidig aantal
console.log(arrTags[3][1]); // oud aantal
}
if (arrTags[2] > arrTags[1]) {
document.createElement("span");
document.createTextNode("Het is een daler");
let app = document.querySelector("#tagContainer");
app.append("Het is een daler");
} else {
document.createElement("span");
document.createTextNode("Het is een steiger");
let app = document.querySelector("#tagContainer");
app.append("Het is een steiger");
}
}
const e = document.createElement('span');
e.mathRandom(span.innerHTML = (arrTags[0][1]));
e.mathRandom(span.innerHTML= (arrTags[1][1]));
e.mathRandom(span.innerHTML= (arrTags[2][1]));
e.mathRandom(span.innerHTML = (arrTags[3][1]));
for (var i=0; i <arrTags.length; i++) {
var f=document.createElement('style');
mathRandom.setAttribute('top: mathRandom', 'left: mathRandom');
span.innerHTML= (arrTags[0][1]));
span.innerHTML = (arrTags[1][1]));
span.innerHTML = (arrTags[2][1]));
span.innerHTML = (arrTags[3][1]));
}
</script> </ul>
<div id="tagContainer"><img src="Tagcloud.png" alt="wereldbevolking per land"></div>
</body>
</html>
We gebruiken essentiële cookies om deze site te laten werken, en optionele cookies om de ervaring te verbeteren.