Les 4: Javascript

October 13, 2019

Javascript is de programmeertaal voor het web. Het is een vrij bijzondere taal, die net iets anders is dan de meeste programmeertalen. Veel concepten die in javascript voorkomen, vind je ook terug in andere talen. Daardoor kun je, als je javascript eenmaal kan, heel makkelijk ook andere programmeertalen leren, zoals Python, java, C++ etc.

Javascript als taal wordt beschreven als High level, Procedureel, Gestructureerd, Object-Oriented, Functioneel, Event-Driven en Geinterpreteerd. Net als HTML en CSS is Javascript doorontwikkeld. Javascript heet ook wel ECMAscript (ofwel ES), naar het bedrijf dat javascript standaardiseert en ontwikkelt. 2019 was het jaar van ES10.

Javascript is ontwikkeld om naadloos samen te werken met HTML en CSS. Het is gebaseerd op java en C++ en lijkt wat betreft syntax dus erg op die talen. Een belangrijk verschil is dat javascript niet compiled wordt, maar door de browser (of een andere omgeving) geïnterpreteerd wordt. We noemen Javascript high-level, omdat het erg gebruiksvriendelijk is voor mensen: wij krijgen niet te maken met computertaal of -processen die voor ons lastig zijn.

Wat javascript bijzonder en krachtig maakt, is dat het met prototypes van objecten (classes) werkt. Objecten kunnen dynamisch veranderd worden en functies zijn objecten die weer als variabelen aan andere functies kunnen worden doorgegeven. Hierdoor kan javascript soms wel erg complex worden, maar je kunt er zo wel ontzettend veel mee.

Wat dit allemaal betekent ga je hieronder ontdekken als je javascript in de praktijk gaat brengen.

Hoe leer je javascript?

Zoals bij alle andere dingen die je mogelijk kunt leren, leer je javascript het beste door je eerst te verdiepen in de basics en het geleerde daarna zo snel mogelijk zelf in de praktijk te brengen. We hebben 4 paden geselecteerd die je kunt volgen om javascript te leren. We adviseren dat je minstens twee van de vier paden doorloopt:

Lees onderstaande beschrijving (Javascript in het kort) en maak de opgaves die je tussendoor tegenkomt.
Lees dezelfde informatie in het Engels op W3schools en bekijk de interactieve voorbeelden. Volg hiervoor de ↗ pijltjes in de inhoudsopgave en tekst.
Lees de informatie van Learn-JS.org en voer de opdrachten uit. (Links naar pagina’s van Learn-JS zijn aangegeven met ►)
Volg een gratis Udemy cursus die dezelfde onderwerpen behandelt. Volg bijvoorbeeld deze javascript cursus op Udemy tot en met Sectie 8, Lecture 43 (Onclick hands on). In totaal is dat 2 uur aan video om te bekijken.

Als je een basis hebt in javascript, probeer dan de opdrachten uit te voeren en eigen projecten te bedenken.

Javascript in het kort

Om Javascript te leren doorlopen we een aantal pagina’s van W3schools. We gaan daarna oefenen met javascript op Learn-JS.org. We gebruiken die site om te oefenen, omdat die minder pagina’s bevat en zich dus tot de belangrijkste onderdelen beperkt. Daarna is het tijd om Javascript in je eigen site te implementeren, en je site dus interactief en responsive te maken!

In de les gebruikten we de volgende Powerpoint, welke grofweg W3schools volgt.

Inhoud

Essentials: ↗

Waar plaats je Javascript? In de HTML, of als een extern script. (W3schools: ↗)
Output – Hoe zie je het resultaat van je script? ↗ (Learn-JS.org: ►)
Wat doet Javascript? inhoud, attributen en stijl veranderen ↗
Aanhaken op HTML events ↗

Basics: statements & data opslag:

Javascript statements, keywords en //comments ↗ ↗
Variabelen ↗ ►
Arrays ↗ ►
Objecten (Classes) ↗ ►
Json ↗

Algoritmes

Functies ↗ ►
Loops ↗ ►
Vergelijken en voorwaardes ↗ ↗ ►

Opdrachten

Navigatie met JSON
Navigatie, Header en Footer met extern JSON

Essentials

Het kortste overzicht van Javascript essentials vind je op W3schools ↗

1. Waar plaats je Javascript? ↗

Net als CSS kan javascript zowel direct in HTML-documenten geschreven worden, als in externe scripts worden opgeslagen die door de HTML-pagina worden aangeroepen.

Javascript in een HTML-pagina kan zowel in de <head> als in de <body> voorkomen en wordt direct uitgevoerd daar waar de browser het script tegenkomt. Functies worden wel geïnterpreteerd (in het geheugen opgeslagen), maar worden pas uitgevoerd op het moment dat ze worden aangeroepen. Dit kan dus op een hele andere plek in het document zijn.

Javascript schrijf je tussen <script> tags.
Een extern javascript wordt ook aangeroepen door een <script>-tag, maar dan met src-attribuut.

1. <script> document.getElementById("demo").innerHTML = "My First JavaScript"; </script>  
2. <script src="myScript1.js"></script>

Opdracht 1: <script>

Bekijk de voorbeelden op W3schools ↗
Probeer het uit in je eigen website: plaats onderstaande javascripts in <script> tags in de head en body van je document.
Sla vervolgens het script op als apart document (extensie .js) en zorg dat het geladen en uitgevoerd wordt in je html-document (gebruik src).

 console.log("javascript werkt");
 window.alert("jij kunt javascript!");

▲ naar boven

2. Output – Hoe zie je het resultaat van je script?

Javascript wordt door de browser geinterpreteerd. Dit gebeurt vooral virtueel en is dus niet zichtbaar. We gebruiken echter javascript om een zichtbaar resultaat te behalen: een verandering op de site, of het uitvoeren van een opdracht. We kunnen het resultaat van ons script op verschillende manieren zichtbaar maken:

Verander deinnerHTML van een HTML object, de attributen, of stijl.
Roep een pop-up schermpje met o.a. window.alert().
Overschrijf je html-pagina met document.write() (handig bij het debuggen)
Schrijf naar de browser console met console.log() (handig bij het debuggen)

1.  document.getElementById("demo").innerHTML = "overschrijft de oude HTML";
2.  window.alert("Klik op OK");
3.  document.write("overschrijft de hele pagina")
4.  console.log("schrijft output naar de console");

Optie 1, document.getElementById zul je het meest gebruiken, aangezien ons doel is een interactieve website te maken en dus de website aan te passen als reactie op wat de bezoeker doet. Niet voor niets is er JQuery ontwikkeld, die de getElement-constructie makkelijker maakt.

Opties 3 en 4 zijn vooral handig bij het debuggen, maar met optie 3, window.write zou je ook een complete webpagina virtueel kunnen opbouwen en serveren.

Console.log wordt tenslotte vooral gebruikt voor debugging, omdat het voor de gewone internetgebruiker niet zichtbaar is.

Debuggen is het zoeken naar fouten in je code. In de meeste programmeertalen stopt je script met werken zodra je een typefout, of andere fout maakt. Ook kan het gebeuren dat je een onverwacht resultaat krijgt, wat betekent dat er iets niet goed gaat in je script. Je moet de fout dan opsporen en oplossen. Dit doe je door stap voor stap je script te doorlopen en te zoeken naar: tot waar gaat het goed, en vanaf waar gaat het fout? Vaak wil je daarbij goed volgen welke waardes variabelen hebben, om te controleren of je script nog klopt. Console.log is dan heel handig. Je vindt de Console output door in Chrome Inspecteren te kiezen en dan het tabblad console te kiezen.

Opdracht 2: Output

Bekijk nu de voorbeelden op W3schools ↗ en Learn-JS ►.
Gebruik de vier output-methodes in je eigen html-document (1 voor 1). Observeer wat er gebeurt.

▲ naar boven

3. Wat doet Javascript?

inhoud, attributen en stijl veranderen:

1. document.getElementById("demo").innerHTML = "Nieuwe tekst"; 
2. document.getElementById('myImage').src='ander-plaatje.gif';
3. document.getElementById("demo").style.border = "solid 2px blue";

Opdracht 3: Verandering

Bekijk nu de voorbeelden op W3schools ↗
Gebruik de drie bovenstaande regels code in je eigen html-document. Voeg de ID’s demo of myImage toe aan je eigen HTML-objecten. Observeer wat er gebeurt.

▲ naar boven

4. Aanhaken op HTML events

Events zijn gebeurtenissen die plaatsvinden in de browser of doordat de bezoeker iets doet. Met Javascript kun je op deze gebeurtenissen aanhaken en een javascript laten oproepen als reactie op de gebeurtenis.

Dee meestvoorkomende events zijn:

Event	beschrijving
onchange	Een HTML-element is gewijzigd (je selecteert bijvoorbeeld een andere optie in een formulier)
onclick	De bezoeker klikt ergens op
onmouseover	De gebruiker beweegt met de muis over een element (hover)
onmouseout	De gebruiker beweegt met de muis van een element ‘af’
onkeydown	De gebruiker typt iets in op het toetsenbord
onload	De browser is klaar met het laden van de pagina. (javascript kan pas elementen vinden als deze in de DOM geladen zijn. Javascript die de pagina moet aanpassen kan dus het beste geladen worden nadat de pagina volledig geladen is).

Er zijn nog veel meer events. Je vindt ze op W3schools ↗ .

Opdracht 4: tekst vervangen en schaduw toevoegen

Bekijk nu de voorbeelden op W3schools ↗
Plaats onderstaand script in je html-pagina.
Hover met je muis over de titel. Wat gebeurt er?

<H1 id="myID" onmouseover="verander">De Titel heeft geen schaduw</h1>
<script>
function verander() {
   document.getElementById("myID").innerHTML =  document.getElementById("myID").innerHTML.replace("geen","nu wel een") ; 
   document.getElementById("myID").style.textShadow = "1px 1px 1px grey";
}
</script>

▲ naar boven

Basics

Om met javascript te kunnen werken moet je weten hoe je het schrijft, hoe je commentaren schrijft en hoe je data kan opslaan en lezen.

5. Statements, keywords en //comments

Je hebt nu al aardig wat voorbeelden van javascript gezien. Elke regel noemen we een statement. Meerdere statements kunnen op 1 regel geschreven worden als ze door een ; gescheiden worden. ↗

Commentaar schrijf je na twee slashes: // ↗
Of tussen Slashes en sterren. /* in dit geval mag commentaar over meerdere regels lopen */
Om je script leesbaar te houden is het wijs om voor elke functie of blok code commentaar te plaatsen met een beschrijving van wat het volgende blok code doet.

Veel statements beginnen met een keyword, een sleutelwoord dat Javascript verteld welke actie moet worden uitgevoerd. Omdat deze woorden al een betekenis hebben mag je ze niet als variabele-naam gebruiken. De belangrijkste keywords vind je hieronder:

Keyword	Beschrijving
var	Declareert een variabele
function	Declareert een functie
return	Beëindigt een functie
do … while	Voert een blok code uit en herhaalt dit zolang de voorwaarde waar is.
for	Voert een blok code uit als de voorwaarde waar is.
if … else	Voert een blok code uit, afhankelijk van een voorwaarde.
continue	Spring uit de loop en begin vanaf het begin.
debugger	Stopt het uitvoeren van javascript en roept de debugging functie
switch	Voert een blok code uit, afhankelijk van verschillende opties.
try … catch	Probeert of een blok code kan worden uitgevoerd. Zo niet, dan wordt de foutmelding ‘gevangen’ door een extra blok code.
break	Eindigt een switch of loop.

Er zijn nog meer keywords. Je vindt ze allemaal op W3schools ↗

Opdracht 5: Commentaar

Bekijk de informatie over statements ↗ en commentaar ↗ op W3schools.
Plaats een commentaar van 1 regel in je script (gebruik //)
Plaats een commentaar dat over meerdere regels loopt in je script. (gebruik /*…*/)

▲ naar boven

6. Variabelen

Variabelen zijn containers die waardes kunnen bevatten. Je kunt dus data opslaan door het aan variabelen toe te wijzen. Zie het als je werkgeheugen. Er bestaan verschillende data types, bijvoorbeeld: tekst, datum, hele getallen en decimale getallen. Variabelen hoor je te declareren met sleutelwoord var. Daarmee vertel je de computer/browser om alvast werkgeheugen vrij te maken waar een variabele in kan worden opgeslgen.

Javascript is niet een stricte taal. Dat betekent dat fouten je vergeven worden en je script niet meteen ophoudt te werken. Je mag dus punt-komma’s vergeten aan het eind van een statement, je mag vergeten een variabele te declareren, data-type hoeft niet te worden vastgelegd en variabelen mogen dynamisch van type veranderen. In andere talen die wel strict zijn, gaat al het bovenstaande je problemen opleveren. Van error-meldingen tot dat er gewoon niks gebeurt.

var x = 1
var y = 2
var z = x + y
var txt = "een tekst string"

▲ naar boven

7. Arrays

Een Array kun je zien als een lijst die meerdere variabelen bevat:

 var cars = ["Saab", "Volvo", "BMW", 12];

De elementen van de array zijn onafhankelijk van elkaar. Daarom kan een array variabelen met verschillende data-types tegelijk bevatten.

▲ naar boven

8. Objecten

Javascript is een (soort van) object-georienteerde programmeertaal (OOP). De variabelen en Arrays die je tot nu toe hebt gezien waren ook objecten, maar deze waren nog simpel. Objecten kunnen ook complex zijn en veel meer data bevatten. In dat geval wordt de object-data met { } omgeven. De data wordt bovendien opgeslagen met een naam. je krijgt dus een {naam:waarde} combinatie.

Naast waardes hebben objecten ook methodes: ze kunnen dingen. Die methodes kun je aanroepen zoals je functies kunt aanroepen. De syntax is: var.methode()

Javascript werkt met instanties en prototypes van objecten. Dit betekent dat je de objecten oneindig vaak kunt copieren om mee te werken, en je kunt ze gaandeweg je script oneindig aanpassen.

 var auto = {
  naam: "Fiat",
  model : 500,
  gewicht: "850kg",
  kleur: "wit",
  gestart: 0,
  start : function() { return this.gestart = 1; },
  stop: function(){return this.gestart = 0;}
}; 

console.log(auto)
console.log(auto.naam)
console.log("de auto staat uit: " + auto.gestart)
auto.start()
console.log("de auto is gestart: " + auto.gestart)
auto.stop()
console.log("de auto is gestopt: " + auto.gestart)

▲ naar boven

9. JSON

JSON is data die is opgeslagen in javascript data-format. Als javascript objecten, Arrays en variabelen dus. JSON staat voor JavaScript Object Notation.

Javascript is leesbaar voor mensen en machines. De opmaak is simpel, waardoor het weinig opslagruimte kost. Bovendien is JSON zelf-beschrijvend. Om deze en de voorgaande redenen kan JSON makkelijk in combinatie met verschillende programmeertalen gebruikt worden.

JSON kun je converteren in javascript objecten door het te parsen:

<html>
<head>
 <script> 
     var text = '{ "employees" : [' +
     '{ "firstName":"John" , "lastName":"Doe" },' +
     '{ "firstName":"Anna" , "lastName":"Smith" },' +
     '{ "firstName":"Peter" , "lastName":"Jones" } ]}'; 

     var obj = JSON.parse(text); 
</script
</head>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script> 

</body></html>

▲ naar boven

Algoritmes

Algoritmes bestaan uit vaststaande sets code. Een <script> blok kan dus een algoritme bevatten, maar ook een javascript-document, een javascript functie, of een loop. In Javascript worden meerdere regels code die bij elkaar horen omgeven met { }.

10. Functies

Met functies kun je een blok code apart zetten en aanroepbaar maken: je kunt de code uitvoeren op het moment dat jij het wil. Functies hebben parameters – input data die ze nodig hebben om te kunnen lopen. Als je een functie aanroept, moet je daarom argumenten meegeven: de waardes die de parameters in dat geval moeten hebben.

 function naam(parameter1, parameter2) {
  // code om uit te voeren
  return parameter1 + " "+ parameter2
}

Functies moet je aanroepen (invoke/call). Functies kunnen worden aangeroepen als er iets op de website gebeurt (bijvoorbeeld als het is ingesteld om op een klik-event te reageren), als javascript de functie aanroept, of automatisch.

mijnnaam = naam("waarde1",2);

Een functie wordt beëindigd als het de return statement tegenkomt. De waarde die achter de return-regel staat wordt teruggeven aan de code die de functie heeft aangeroepen. Je kunt die waarde dus direct gebruiken, of weer in een variabele opslaan. Het uitvoeren van de code gaat vervolgens verder vanaf de plek vanwaar de code was aangeroepen.

console.log("direct","aangeroepen");

mijnnaam = naam("Kees","Jansen"); 
console.log(mijnnaam)

▲ naar boven

11. Loops

Iteratie is in alle programmeertalen belangrijk. Het stelt je in staat eenzelfde blok code meerdere keren uit te voeren, maar steeds met andere input. Dit komt vaak voor. Je wil bijvoorbeeld iets een x aantal keer uitvoeren, of je wil iets uitvoeren voor elk element in een lijst.

de belangrijkste loops zijn:

for – itereert over een blok code
for/in – itereert over de eigenschappen in een object (voor elk element in…)
for/of – itereert over de waarden van een object (voor elk element in…)
while – itereert over een blok code zolang er aan de voorwaarde wordt voldaan.
do/while – itereert over een blok code zolang er aan de voorwaarde wordt voldaan.

Opdracht 6a: Doe 10 keer…

Bekijk nu de voorbeelden op W3schools↗ en learn-js ↗
Schrijf een loop die van i=1 tot i=10 telt. Schrijf de output naar de console

Oplossing

for (var i = 1; i < 11; i++) { console.log(i); }

tip: plak bovenstaande code in de console van je browser om te zien dat het werkt.

Opdracht 6b: Voor elk...

Hieronder staat een Array met teksten. Schrijf elk element naar de console.

 var teksten = ["Dit is een JS Array", "Dat is een soort lijst", "in andere talen zijn lijsten 1D",  "terwijl Arrays 2D kunnen zijn", "je kan arrays wel nesten" ];

Oplossing

var teksten = ["Dit is een JS Array", "Dat is een soort lijst", "in andere talen zijn lijsten 1D",  "terwijl Arrays 2D kunnen zijn", "je kan arrays wel nesten" ]; 

for (x of teksten) {
  console.log(x);
}

▲ naar boven

12. Vergelijken en voorwaardes

Voorbeelden:

is 6 < 12?
is zijn naam Bart?
is 'zeven' een getal?

In javascript moeten we weleens testen of een variabele een bepaalde waarde heeft, of van een bepaald type data is. Het resultaat is een Boolean: Waar of Niet Waar

Je kunt variabelen vergelijken met de bekende operatoren:

De volgende zijn minder bekend:

==	is gelijk aan (gebruik er dus twee ipv 1)
===	waarde en type moeten gelijk zijn. (dus beiden tekst, of beiden een getal)
!=	is niet gelijk aan
!==	is niet gelijk of niet van hetzelfde type

Vergelijken doe je in ALS-statements (IF)

leeftijd = 5
if (leeftijd < 18) {conclusie = "minderjarig";}

Je kan meerdere vergelijkingen tegelijk evalueren, of testen of iets niet waar is:

stel x=6 en y=3

&&	EN	(x < 10 && y > 1) is waar
\|\|	OF	(x == 5 \|\| y == 5) is niet waar
!	NIET	!(x == y) is true

Toewijzen op basis van een vergelijking

Het resultaat van een vergelijking is vaak bepalend voor het vervolg van je script. Het resultaat kan bijvoorbeeld bepalen dat je een blok code wel of niet uitvoert, of de waarde van een variabele moet worden aangepast.

Stel: x = 3;

x=3

if (x < 6){var uitslag = "kleiner"}
else {var uitslag = "groter"}

console.log(uitslag)

Omdat dat best omslachtig is, is er een kortere schrijfwijze ontwikkeld:

x=3
var uitslag = (x < 6) ? "kleiner" : "groter";
console.log(uitslag)

Opdracht 7

Bekijk nu de voorbeelden op W3schools ↗ ↗ Learn-JS ►
Je hebt x=15, maar je ontwikkelt een script waarin x straks andere waardes kan aannemen. Schrijf een script die test of de waarde van x tussen de 10 en 20 ligt. De uitslag sla je op als boolean in de variabele uitslag.

Oplossing

x = 15;
var uitslag = ( x > 10 && x < 20)
console.log(uitslag)

Doe nogmaals hetzelfde, maar sla nu het resultaat op als tekst.

Oplossing

x = 15
var uitslag = ( x > 10 && x < 20) ? "klopt" : "klopt niet"
console.log(uitslag)

▲ naar boven

Opdrachten

Als je al het bovenstaande hebt gelezen, de voorbeelden in de console en in html-pagina's hebt uitgeprobeerd, en je hebt ook nog eens wat voorbeelden op W3schools bekeken en misschien zelfs de opdrachten van Learn-JS gedaan, dan heb je als het goed is genoeg kennis in huis om zelf kleine javascript projectjes uit te werken. Hieronder enkele uitdagingen die de belangrijkste onderdelen van javascript dekken.

Opdr. 1: Navigatie met javascript

Maak een HTML-pagina met een navigatie-menu dat met javascript wordt aangemaakt. In deze opdracht schrijven we de javascript nog in het document zelf. Een volgende stap is om de javascript in een extern bestand op te slaan en te laden. Als je dat doet, dan lost dit een veelvoorkomend probleem op, namelijk dat als je wijzigingen in het menu aanbrengt, je dit op alle pagina's moet aanpassen. Elementen die op alle pagina's getoond moeten worden wil je het liefst maar op 1 plek opslaan. Alle pagina's maken dan gebruik van dezelfde code en tonen hetzelfde.

Oplossing

<html>
<head>

<script>
 var nav= [{name:"value", url:"urlvalue"},
         {name:"value2", url:"urlvalue2"},
         {name:"value3", url:"urlvalue3"},
         {name:"value4", url:"urlvalue4"},
         ];
 </script>
     
</head>
<body>

    <ul id="menu-item"></ul>
    <h1>Titel</h1>

<script>  // voor elk element in nav: print <li><a href=url>name</a></li>     
    for (x of nav)  
    {    var bestaandmenu = document.getElementById("menu-item").innerHTML;
         document.getElementById("menu-item").innerHTML= bestaandmenu + "<li><a href='"+x.url+"'>"+ x.name+"</a></li>"; 
    }  
</script> 

</body>
</html>

Opdr. 2: Navigatie, Header en Footer met JSON

Als je een menu uit javascript kan laden, dan kan dat ook met de header en footer van je pagina's. Ook dit zijn elementen die meestal hetzelfde zijn op alle pagina's van je website. Je wil ze daarom het liefst niet op elke pagina afzonderlijk plaatsen, maar door de pagina's laten laden uit een gemeenschappelijke bron.

De uitwerking komt nog.

Cheryl Van Kempen

Les 4: Javascript

Hoe leer je javascript?

Javascript in het kort

Inhoud

Essentials

1. Waar plaats je Javascript? ↗

Opdracht 1: <script>

2. Output – Hoe zie je het resultaat van je script?

Opdracht 2: Output

3. Wat doet Javascript?

Opdracht 3: Verandering

4. Aanhaken op HTML events

Opdracht 4: tekst vervangen en schaduw toevoegen

Basics

5. Statements, keywords en //comments

Opdracht 5: Commentaar

6. Variabelen

7. Arrays

8. Objecten

9. JSON

Algoritmes

10. Functies

11. Loops

Opdracht 6a: Doe 10 keer…

Oplossing

Opdracht 6b: Voor elk...

Oplossing

12. Vergelijken en voorwaardes

Vergelijken doe je in ALS-statements (IF)

Toewijzen op basis van een vergelijking

Opdracht 7

Oplossing

Oplossing

Opdrachten

Opdr. 1: Navigatie met javascript

Oplossing

Opdr. 2: Navigatie, Header en Footer met JSON

Sprint 2