Webpagina's maken met JavaScript

Met HTML en CSS maak je in principe statische webpagina's. Met JavaScript maak je dynamische webpagina's. Dat zijn webpagina's die veranderen als de gebruiker op een knop klikt of iets intoetst. JavaScript is een complete programmeertaal die in elke webbrowser zit.

We veronderstellen dat je voldoende weet over het coderen van HTML en CSS, want in JavaScript gaan we dat ook doen, maar dan indirect. Een webpagina is in HTML en CSS gecodeerd. De JavaScript die jij gaat schrijven, manipuleert de HTML- en CSS-code van die webpagina.

Demonstratie van JavaScript in Chrome

Zoals gezegd zit JavaScript in elke webbrowser. Vanuit Chrome kan je via de DOM inspector direct JavaScript intoetsen.

Ten eerste kan je JavaScript gebruiken om 12345 x 567890 of de tweedemachts wortel van 2 te berekenen.

Je kunt hier experimenteren met berekeningen met haakjes ( ), / (delen), * (vermenigvuldigen), ** (machtsverheffen), + (optellen) en - (aftrekken). Probeer het maar.

Ten tweede kan je JavaScript gebruiken om direct de webpagina te veranderen. Knip het volgende commando van deze webpagina, plak die in de Console regel en druk op Enter.

document.body.style.backgroundColor="Yellow"
    

Dit commando bestaat uit de volgende delen:

En dit is het resultaat.

Voor een statische webpagina kan je hetzelfde effect coderen in CSS met: body { background: yellow; } of in de HTML als inline style by de body-tag. Om een dynamische webpagina te maken kan je zo'n JavaScript-commando aan een knop hangen.

De demonstratie was op www.aaappp.nl/luzac, maar je kunt dit ook uitproberen op andere webpagina's! Het effect van de gele achtergrond kan je weer ongedaan maken door op Refresh te klikken.

JS voorbeeld 1 met een knop

Bij de demonstratie moest je zelf een JavaScript commando intoetsen. Je kunt dat automatiseren door het commando te koppelen aan een knop in de code van een webpagina.

<!DOCTYPE html> 
<html lang="nl">
    <head>
        <meta charset="utf-8">
        <title>JS voorbeeld 1</title>
        <link rel="stylesheet" type="text/css" href="voorbeeld.css">
    </head>
    <body>
        <h1>Voorbeeld van een knop met JavaScript</h1>
        <p>Hieronder staat een knop om de achtergrond te veranderen.</p>
        <p>Indien je op refresh klikt wordt alles weer zoals het was.</p>
        <input type="button" value="geel" onClick="document.body.style.backgroundColor='Yellow'">
    </body>
</html>  
    

Merk op dat Yellow hier tussen enkele quotes staat. Dat is om onderscheid te maken met de dubbele quotes van onClick=. Andersom mag ook: dubbele quotes tussen enkele quotes.

Opdracht

Maak nu zelf nog een aantal knoppen voor andere kleuren en test of dat werkt.

JS voorbeeld 2 met een function

Als het goed is heb je bij de vorige opdracht veel code geschreven, want je hebt soortgelijke code bij elke knop herhaald. Een professionele programmeur doet dat liever niet. Die werken volgens het DRY principe. DRY staat voor Don't Repeat Yourself. Het idee is dat je een stukje code een keer schrijft en daarom maar een keer goed hoeft te testen. Daarna kan je dat stukje code op allerlei plaatsen steeds opnieuw hergebruiken.

Met een function is het niet meer nodig om de code op meer plaatsen te herhalen. Je schrijft de code van de function op een plaats en je roept de function aan op verschillende plaatsen. In dit eenvoudige voorbeeld gaat het maar over een regel JavaScript, die voor elke knop wordt herhaald. Maar in andere gevallen kan het gaan over vele regels JavaScript en dat wordt de code echt korter.

De function noemen we achtergrond en de parameter noemen we kleur. Op deze manier hebben we meteen de function gedocumenteerd.


<!DOCTYPE html> 
<html lang="nl">
    <head>
        <meta charset="utf-8">
        <title>JS voorbeeld 2</title>
        <link rel="stylesheet" type="text/css" href="voorbeeld.css">
        <script>
            function achtergrond(kleur) {
                document.body.style.backgroundColor=kleur;
            }
        </script>
    </head>
    <body>
        <h1>Voorbeeld van een function in JavaScript</h1>
        <p>Hieronder staan knoppen om de achtergrond te veranderen.</p>
        <p>
            Bij elke knop staat een aanroep van de function <b>achtergrond</b>
            steeds met een andere <b>kleur</b> als parameter.
        </p>
        <p>Indien je op refresh klikt wordt alles weer zoals het was.</p>
        <input type="button" value="blauw" onClick="achtergrond('Cyan')">
        <input type="button" value="bruin" onClick="achtergrond('Khaki')">
        <input type="button" value="geel" onClick="achtergrond('Yellow')/">
        <input type="button" value="groen" onClick="achtergrond('SpringGreen')">
        <input type="button" value="oranje" onClick="achtergrond('Orange')">
        <input type="button" value="roze" onClick="achtergrond('Pink')">
    </body>
</html>
    

JS voorbeeld 3 met invulvelden en berekening

De gebruiker kan de lengtes van de twee korte zijdes van een rechthoekige driehoek invullen met waarden tussen 1 en 99. Bij de knop staat een aanroep van de function langeZijde om de langeZijde van de rechthoekige driehoek te berekenen met de stelling van Pythagoras: a2 + b2 = c2

De korte zijde a is
De korte zijde b is

De lange zijde c is ???


<!DOCTYPE html> 
<html lang="nl">
    <head>
        <meta charset="utf-8">
        <title>JS voorbeeld 3</title>
        <link rel="stylesheet" type="text/css" href="voorbeeld.css">
        <script>
            // bereken de langeZijde met a**2 + b**2 = c**2
            function langeZijde() {
                var a = document.getElementById("a").value
                var b = document.getElementById("b").value
                document.getElementById("c").innerHTML = Math.sqrt(a**2 +b**2)
            }
        </script>
    </head>
    <body>
        <h1>JS voorbeeld 3 met invulvelden en berekening</h1>
        <p>
            De gebruiker kan de lengtes van de twee korte zijdes 
            van een rechthoekige driehoek invullen met waarden tussen 1 en 99.
            Bij de knop staat een aanroep van de function <b>langeZijde</b>
            om de langeZijde van de rechthoekige driehoek te berekenen
            met de stelling van Pythagoras: 
            a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup>
        </p>
        <p>
            De korte zijde a is <input type="number" id="a" min="1" max="99">
        <br>
            De korte zijde b is <input type="number" id="b" min="1" max="99">
        </p>
        <input type="button" value="Pythagoras" onClick="langeZijde()">
        <p>
            De lange zijde c is <span id="c">???</span>
        </p>
    </body>
</html>      
    

De programmeur heeft geprobeerd om het zo eenvoudig mogelijk te maken, maar toch gebeuren hier veel complexe dingen. Er zijn twee variabelen: a en b in de function. Er zijn drie tags met een id in de HTML: "a", "b" en "c". Gelukkig helpt Brackets proactief bij het programmeren. In onderstaande afbeelding laat Brackets zien wat Math is. Als je op de groene i klikt, zie je automatisch de documentatie van Math. Op dezelfde manier kan je de documentatie van document en getElementByID oproepen. Gebruik deze mogelijkheid van Brackets, want zo leer je nog wat!

Samenvatting

Dit is een lijst van wat je nu moet kunnen en kennen, nadat je deze webpagina hebt doorgewerkt.