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.
<!DOCTYPE html><html>
<head>
<title></title>
<script>
//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>
<script>
window.onload = function() {
// variabelen in dit voorbeeld
var tContainer, span, br, i;
// plek waar de tags komen
tContainer = document.getElementById("tagContainer");
// loop door de array
for (i = 0; i < arrTags.length; i++) {
// maak een nieuwe span en zet deze in de tContainer
span = document.createElement("SPAN");
tContainer.appendChild(span);
// geef de span een tekst en een style
span.innerText = arrTags[i][0];
span.style = "color: red; font-weight: bold;";
// eventueel <br> als het onder elkaar moet
br = document.createElement("BR");
span.appendChild(br);
}
}
</script>
<div id="tagContainer"></div>
</body>
</html>
<!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(){
var tContainer, span, br, i;
tContainer = document.getElementById("tagContainer");
for (var i=0; i <arrTags.length; i++) {
span = document.createElement("SPAN");
tContainer.appendChild(span);
span.innerText = arrTags[i][0];
var x=span.Math.random();
var y=span.Math.random();
span.style = "position: absolute; top:=y; left:=x; color:red; font-weight: bold;";
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
}
}
</script> </ul>
<div id="tagContainer"><img src="Tagcloud.png" alt="wereldbevolking per land"></div>
</body>
</html>
<script>
window.onload = function() {
var tContainer = document.getElementById("tagContainer");
var span = document.createElement("SPAN");
tContainer.appendChild(span);
span.innerText = "Hallo daar";
// in <style> staat dat het span.tag moet zijn
span.classList.add("tag");
// Math.random() is getal 0.0 tot 0.9999...
var randomTop = Math.random() * 350;
// heel getal van maken
randomTop = Math.floor(randomTop);
// style aanpassen van de span
span.style = "color:red; font-weight:bold; top:" + randomTop + "px;";
}
</script>
<div id="tagContainer"></div>
<div id="tagContainer"></div>
<script>
// [i][0] is de naam; [i][1] is huidig aantal; [i][2] is vorig aantal
var divtekst = '';
for (var i = 0; i < arrTags.length; i++) {
// kleiner dan 1 is daler, hoger dan 1 is steiger
var lettergrootte = arrTags[i][1] / arrTags[i][2];
// doe keer 25 om een normale lettergrootte te krijgen
lettergrootte = 25 * lettergrootte;
// een te kleine of te grote letters moet tussen 11px en 32px
if (lettergrootte < 11) {
lettergrootte = 11;
}
if (lettergrootte > 32) {
lettergrootte = 32;
}
if (arrTags[i][1] >= arrTags[i][2]) {
// het is een steiger
divtekst = divtekst + '<br>';
divtekst = divtekst + '<span style="font-size:' + lettergrootte + 'px;">' + arrTags[i][0] + '</span>';
} else {
// het is een daler
divtekst = divtekst + '<br>';
divtekst = divtekst + '<span style="font-size:' + lettergrootte + 'px;">' + arrTags[i][0] + '</span>';
}
}
// zet alle span's op het scherm
var tContainer = document.getElementById("tagContainer");
tContainer.innerHTML = divtekst;
</script>
Je hebt de juiste aanpassing gedaan. Top!!span.style.fontSize=lettergrootte+”px “;
We gebruiken essentiële cookies om deze site te laten werken, en optionele cookies om de ervaring te verbeteren.