Javascript

Vandaag Samenvatting vorige les PSD's Random Array's Herhalingen – For-loop – While-loop

Hoorcolleges Reacties/Opmerkingen/Vragen?

Boodschappenlijstje

Boodschappenlijstje 2

DOM opdrachten Minder typen Door eerst hele object in variabele op te slaan: var divje = document.getElementById('divNaam'); divje.innerHTML = "Hello world";

DOM opdrachten Styling aanpassen Eerst hele object in variabele opslaan: var invoerveld = document.getElementById('invoerveld'); invoerveld.style.border= "2px solid #FF0000"; invoerveld.style.border= "none"; Of nog nog beter: een class koppelen invoerveld.className = "active"; Invoerveld.className = "";.active { border: 2x solid #F00; }

Het nemen van beslissingen in een script. Geven true of false als evaluatie. Als true dan wordt de bijbehorende code uitgevoerd. var soortgebak = "Worteltjestaart"; if (soortgebak == "Worteltjestaart"){ alert(soortgebak + " is vies!!!!"); } Conditional statements

conditional operators: == Is equal to != Is not equal to < Is less than > Is greater than >= Is greater than or equal to <= Is less than or equal to Conditional statements Caution Be sure not to confuse the equality operator (==) with the assignment operator (=),

var soortgebak = "Appeltaart"; if(soortgebak == "Worteltjestaart”"){ alert(soortgebak + " is vies"); } else { alert(soortgebak + " is lekker"); } Conditional statements – ELSE

if (hours < 10) { document.write("Good morning."); } else if (hours >= 10 && hours <= 17) { document.write("Good afternoon."); } else { document.write("Good evening."); } Testing Multiple Conditions with if and else

Logical Operators &&AND ||OR !=NOT

Testing Multiple Conditions with if and else var cash = prompt('Hoeveel geld zit er in je portomonee?'); if (cash >= 50) { alert('Ga lekker uit eten en pak daarna een filmpje.'); } else if (cash >= 35) { alert('Ga lekker uit eten.'); } else if (cash >= 12) { alert('Ga een filmpje pakken.'); } else { alert('Ai, dat wordt tv kijken.'); }

De basisstructuren van het PSD OpeenvolgingKeuzeHerhaling Eerst dit... Dan dat...Voorwaarde Nee Ja Zolang voorwaarde

Opeenvolging / sequentie Eerst dit... Dan dat... Vervolgens dat...

Keuze / selectie Voorwaarde Nee Ja

Keuze / selectie Voorwaarde NeeJa Schrijf: Hoe heet je? Anne Lees: voornaam Schrijf: Hallo voornaam. Aantal websites per dag? Anne 9 aantal < 10 Schrijf : “Houden zo!” Schrijf : “Dat is veel!” Schrijf: “Tot ziens”. Lees: aantal 9 Intern geheugen Anne 9 9

Registreren

Voorbeeld var dag = new Date().getDay(); alert(dag); …. ? … document.write(“Vandaag is het...?...”); 20

Switch var dag=new Date().getDay(); switch (dag) { case 0: x="Vandaag is het zondag"; break; case 1: x="Vandaag is het maandag"; break; case 2: x="Vandaag is het dinsdag"; break; case 3: x="Vandaag is het woensdag"; break; case 4: x="Vandaag is het donderdag"; break; case 5: x="Vandaag is het vrijdag"; break; case 6: x="Vandaag is het zaterdag"; break; } alert(x);

Arrays var boodschappen = ['boter', 'kaas', 'eieren']; alert(boodschappen[0]); alert(boodschappen[1]); alert(boodschappen[2]); alert(boodschappen.length);

Alternatief voor gegeven voorbeeld: array gebruiken var dagen = [‘zondag’, ‘maandag', ‘dinsdag', ‘woensdag', ‘donderdag', ‘vrijdag', ‘zaterdag’]; var dag=new Date().getDay(); document.write(“Vandaag is het ” + dagen[dag]); 23

Herhaling / repetitie / iteratie Zolang voorwaarde

Het PSD Intern geheugen Zolang voorwaarde getal = getal >= 0 Schrijf: getal getal = getal - 1 Schrijf: We have a liftoff

Loops for-loop while-loop do/while –loop

Loops 3 statements  Start  Voorwaarde  Stapgrootte

For-loop for (start;voorwaarde;stapgrootte){ //doe iets }

Voorbeeld for-loop for(var i = 1; i < 5;i = i +1){ document.write("nummer" + i); }

Afkortingen i = i +1;  i++; i = i - 1;  i--; i = i + 5;  i+=5; i = i - 5;  i-=5; i = i * 8;  i*=8; I = i / 8:  i/=8;

Voorbeeld break in for-loop for(var i = 1; i < 5;i++){ document.write("nummer" + i); if(i == 4){ document.write("ik weet genoeg"); break; }

While-loop start while (voorwaarde){ //doe iets stapgrootte }

Voorbeeld while-loop var i = 1; while (i < 5){ document.write("Nummer" + i); i++; } !vergeet de stapgrootte niet  infinite loop

Arrays var boodschappen = ['boter', 'kaas', 'eieren']; alert(boodschappen[0]); alert(boodschappen[1]); alert(boodschappen[2]); alert(boodschappen.length); 0 1 2

Voorbeeld array+loop var boodschappen = ['boter', 'kaas', 'eieren']; document.write('Ik heb nodig: '); for (var i=0; i '); }

Huiswerk Puzzels week 4 Codecademy oefeningen maken (zie SHL) Functionaliteiten realiseren (zie SHL) Github synchroniseren