Tag cloud uit array tonen in veld. Javascript

Status
Niet open voor verdere reacties.
S

Steven01567644335

Gebruiker
Lid geworden
14 mei 2022
Berichten
52
Ik heb een uitgebreide code gemaakt om zaken uit een array weer te geven. Alleen kan dit simpeler, met de juiste lus en aflezingsopties. Nochtans slaag ik hier niet in.
 

Bijlagen

  • MathRandom.txt
    5,7 KB · Weergaven: 28
arrTags is een 2-dimensionale array. Met for(...) doorloop je de hoofd-array.
In de function maak je code voor de naam/huidig aantal/vorig aantal.
Dit is de basis waarmee je verder kan
Code: 
// 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);
}
 
Arrays

Ik heb een for lus gemaakt en daarna een functie, toch lijkt het mij moeilijk om in 1 en dezelfde lus de <span> elementen aan te maken. In tegenstelling tot Basic is er bij de for lus geen NEXT die eraan te pas komt…
 

Bijlagen

  • MathRandom.txt
    6,3 KB · Weergaven: 25
Kan je de code hier ook delen in een codeblok?
 
Neen

Neen, dit is niet mogelijk! Informaticus is een knelpunt beroep, en ik zet alles op alles om dit beroep ook uit te oefenen…
 
Huh? WTF?

Tuurlijk kan dat gewoon.
Druk op de <> knop in de menubalk van de editor.
 
Plaatsen van bericht

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(){}

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>
 
Laatst bewerkt door een moderator:
Lekkere spaghetti-code.
 
Probeer ook eens Tagliatelle, het hoeft niet steeds standaard spaghetti te zijn. Probeer wel de ui voldoende aan te stoven, vooraleer je het vlees eraan toevoegt.
 
Je snapt vast wel waar ik naar hint. ;)
Zorg voor leesbare code. Laat het anders door een html-beautifier of een editor netjes uitlijnen. Hier kijkt niemand naar.
 
In tegenstelling tot Basic is er bij de for lus geen NEXT die eraan te pas komt
Klik om te vergroten...
Het concept is in alle talen gelijk, je schrijft het alleen anders.
Stel je maakt een lus 0 2 4 6 8 10

in Basic
Code: 
for x = 0 to 10 step 2
    .....
next x

in Javascript (en ook in C++ , PHP en een aantal andere talen)
Code: 
for (x = 0; x <= 10; x = x + 2) {
    .....
}

De { opent een codeblok en de } sluit een codeblock. Ook bij een function , if else, for , for in , enzovoort, enzovoort. Daarom moet je altijd goed controleren of de { en } goed bij elkaar horen.


Ga even wat stappen terug in je cursus en lees wat er tussen de haakjes moet bij een if (.......) en bij een for (........)
Je mag woorden niet aan elkaar plakken. math.randomif { .... } mag niet. Zet achter math.random een puntkomma en begin if op de volgende regel.
Controleer overal de spelling, bijvoorbeeld Math.random() heeft een hoofdletter M
 
Laatst bewerkt:
De bedoeling moet zijn dat er grafisch wordt weergegeven wat de steigers en dalers zijn. Hiervoor moet het algoritme zelf berekend worden. Het lukt mij echter niet om output te krijgen in het daartoe voorziene kader. Steigers moeten in groen, dalers in het rood. Het gaat om de interesse in programmeertalen en bureautica-programma's. Het kan zijn dat ik in CSS dingen moet veranderen. Maar de basis gaat hier toch vooral om JavaScript...
 
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.
 
Aar zei:
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.
Klik om te vergroten...

Het klopt niet dat je hele opdrachten voor mij moet uitvoeren. Help Mij betekent Help mij en niet: ga vissen…
 
Steven01567644335 zei:
Het klopt niet dat je hele opdrachten voor mij moet uitvoeren. Help Mij betekent Help mij en niet: ga vissen…
Klik om te vergroten...

Ik heb niet gezegd dat het letterlijk om vissen gaat. Het is een uitdrukking. :)
 
Na mijn antwoorden op je vorige vragen en mijn antwoord #4 in deze vraag ben ik het met Aar eens. De opdrachten horen niet bij de kennis die je tot nu toe hebt opgebouwd. Een paar keer heb ik aangegeven dat je beter een paar hoofdstukken terug kan gaan om de basis van JavaScript goed door te nemen.

Hulp bij de huidige opdracht(en) werkt niet als de basiskennis ontbreekt.

Als je het volgende nog een keer goed doorneemt zal het makkelijker gaan.
Gebruik van de console ; Variabelen en waarden toewijzen ; Type variabelen ; Expressies en operatoren ; Syntax van if else
 
Bericht

Ik heb toch besloten de cursus te laten liggen tot september. Ik ben een persoon die zeer goed leert zolang het hem interesseert. In plaats van terug te kijken op de voorbije kennis, ben ik gaan kijken bij wat nog te leren valt. En dit zijn enkel saaie formulier opdrachten, waarvoor ik geen interesse ‘kan’ tonen. Deze cursus bevat in zijn geheel de basis van JavaScript, maar ik denk niet dat het een job voor mij zou zijn om alleen allerlei wiskundige opdrachten uit te voeren. Het zou voor mij tergend zijn dat ik mijn creativiteit niet kan benutten.

Dit in tegenstelling tot css en html.

De bedoeling van JavaScript is inderdaad om de website dynamisch te maken. Men kan dan dmv enkele berekeningen, bepalen wat de bezoeker te zien krijgt.

Versta me niet verkeerd alsof ik het niet wil, maar de materie is te saai, om er mij te lang op te moeten concentreren.
 
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(){
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>

De bedoeling is duidelijk: Met mathRandom en JavaScript moeten er een aantal dingen gestyled worden, alleen voorziet de cursus niet in hoe dit moet. De bedoeling is steigers en dalers in aparte kleuren weer te geven, met hun grootte, naargelang hun cijfers.

De cursus voorziet echter niet in hoe je css toestanden moet verwerken in JavaScript.

De cursus voorziet niet in dit gegeven. Ik heb geprobeerd er het beste van te maken…
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan