Tag cloud uit array tonen in veld. Javascript

Status
Niet open voor verdere reacties.
Controleer altijd eerst je console.
Als je fout(en) ziet staan heb je een grote kans dat er dingen niet werken.

console-error.jpg
 
Als je 4 foutjes (slordigheid haakjes) hebt opgelost kom je deze fout tegen.

console-error2.jpg

De code is vreemd vanaf regel const e = document.createElement('span');

Tip: JavaScript is hoofdlettergevoelig, het is Math.random()
 
Het is moeilijk om alle steigers in het groen, zetten de dalers in het rood, css elementen top en left te gebruiken, deze tegelijk metMath.random op een willekeurige plaats te zetten en dan nog toe te voegen in een Span-tag tegelijk… :shocked:
 
Tip: maak kleine scriptjes in een apart bestand, dat is makkelijker testen. Voorbeeld:
Code: 
<!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>
 
Ja, maar dan heb nog niet met top en left en Math.random een willekeurige plaats gemaakt waar de zaken uit de array moeten komen… Maar ik zal er in ieder geval eens naar kijken…:thumb:
 
Hallo,

Is mijn gebruik van Math.random hier correct?

Code: 
<!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>
 
Een random getal ook in een apart bestandje testen :rolleyes:
En google eerst eens, bijvoorbeeld op: javascript random

Nogmaals, je kan niet allerlei scriptjes van internet door elkaar heen zetten, dat gaat nooit werken.
Code: 
<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>
 
Hallo,

ik vind dit bijzonder ingewikkeld. Ik heb mij recentelijk enkele informatica boeken aangeschaft.

ik neem zeker geen internet snippets ten volle over.

Het gebruik van Math.random lijkt mij moeilijk.

Voor te slagen voor de screening van de Vlaamse Dienst voor Arbeidsbemiddeling en beroepsopleiding zijn slechts getuigschriften van html en css nodig.

Volgens de Nederlandse schrijver van deze boeken, zijn er veel meer mensen met een html en css achtergrond, dan diegene met kennis van JavaScript.

laat ons deze taal zo eenvoudig mogelijk maken, zodanig dat cursisten van JavaScript geen vak moeten maken waarvan zij een vrijstelling hopen te bekomen…
 
Iedereen die begint met programmeren loopt tegen (deel)problemen aan. De ervaring mist nog om een vraag "even" om te zetten in een oplossing. Probeer een vraag in stukjes te knippen en zoek bij elk stukje een oplossing, dit doen professionals ook.

Iedereen die webpagina's wilt maken begint met html & css (pagina vormgeving). Niet iedereen gaat daarna verder met een programmeertaal (JavaScript, PHP of C#), het is een logische redenering :)

Een random waarde is onderdeel van de taak/opdracht heb ik gelezen.

De VDAB bedoelt met screening (volgens hun website) screening op talent.
Ik weet niet welke criteria ze hiervoor gebruiken.

Het tempo waarin de moeilijkheidsgraad van de taken omhoog gaat en de verwachting dat de cursist zelf naar oplossingen zoekt die niet zijn behandeld in de cursus horen in Nederland bij het HBO (Hoger Beroepsonderwijs). Tenzij je taken overslaat waardoor je een goede opbouw van kennis mist.
 
Laatst bewerkt:
Oefening

Ik ben nu enkele weken verder met de oefening en ze is ten dele gelukt. Ik kan nu met Math.random inderdaad de verschillende webtalen/programma’s in een kleur op een willekeurige plaats in de tagcontainer plaatsen. Nu nog afhankelijk van de grootte van het cijfer de lettergrootte berekenen en en de stijgers en de dalers…:p
 
Oefening

Ik ben er nu ook in geslaagd de steigers groen en de dalers van een rode kleur te voorzien. Voor het percentage van de lettergrootte moet ik de tweede kolom van de array arrtags[1] in een variabele moeten kunnen omzetten. Dus die [1] moet bv een k worden. Weet iemand hoe dit moet?:confused:
 
Deze code is een voorbeeld, maak hier een apart bestand van en kijk wat het doet.

Je kan het niet in jouw code plakken!!
Belangrijk is dat je de code hieronder wijzigt zodat het in jouw code (op de juiste plek) goed werkt.

Code: 
<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>
 
Oefening

Had maar 3 regels aan te passen en het werkt al. Ik heb de volledige oplossing voor de oefening dankzij jouw gevonden.

bedankt daarvoor…:thumb:

Mijn code is eenvoudiger en kent eenzelfde doel…

je kan die tags vervangen door span.style.fontSize=lettergrootte+”px “;
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan