Terug

JavaScript 1 – De eerste stapjes


De eerste stapjes in een nieuwe taal zijn altijd moeilijk. Deze pagina introduceert een aantal van de belangrijkste concepten die horen bij JavaScript, maar die ook van toepassing zijn op elke moderne programmeertaal.

Waarom JavaScript?

JavaScript bestaat al een tijdje, zelfs langer dan CSS. De taal bestaat vooral om interactiviteit toe te voegen aan je webpagina: HTML is voor inhoud, CSS voor opmaak, en JS voor vrijwel al het andere.

JavaScript hoort bij CSS en HTML. Je zult zien dat een aantal concepten die we al kennen, zoals id’s, stijl en elementen, ook weer terug komen.

  1. Je volgt deze les door de video te bekijken, daarna volg je het stappenplan dat staat uitgewerkt op deze pagina. Onderaan deze pagina vind je nog twee zelfstudieopdrachten. Nadat je beide opdrachten hebt gedaan kun je door naar les 2.

Hello World!

Bij deze lessen horen voorbeeldbestanden.
Download javascript1.zip en pak ze uit op een plek waar je ze later weer terug kunt vinden.

  1. Open helloworld\ en bekijk de bestanden. Het eerste wat je misschien opvalt is dat het HTML bestand aan het JS bestand gekoppeld is, net zoals we dat met CSS doen. Het grootste verschil is dat we het JS bestand altijd onderaan de <body> koppelen, en het CSS bestand altijd in de <head>.
    <script src="script.js"></script>
    

    Wat je verder kunt zien:

    • Je ziet in HTML een div-element met ‘Hoi’ er in.
    • Je ziet ook dat met CSS die div rood en 100 px breed wordt gemaakt.
    • Maar als je het HTML bestand opent in de browser, zie dat de div geel is en dat er ‘Hello World!’ in staat.
      JavaScript is hier gebruikt om de eigenschappen van het div element te veranderen.

    index.html

    <div id="blokje">
      Hoi
    </div>
    
    <script src="script.js"></script>
    

    style.css

    #blokje {
      background-color: red;
      height: 100px;
      width: 10px;
    }
    

    script.js

    var blokje = document.querySelector("#blokje");
    blokje.style.width = "150px";
    blokje.style.backgroundColor = "blue";
    blokje.innerHTML = "Hello World!"
    

    Laten we het JavaScript-bestand regel voor regel bekijken.

Wie is het?

Omdat we een bestaand HTML element op de pagina willen gaan aanpassen, moeten we JavaScript eerst vertellen welk element we willen aanpassen. De code die hiervoor gebruikt wordt is document.querySelector( ). Query betekent vraag: we vragen aan het document om een selectie te doen op basis van wat we tussen de haakjes ( ) zetten.

In CSS heb je geleerd dat een id wordt aangeduid met een `#“. Ditzelfde geldt ook in JS. Het document gaat dus op zoek naar het element met id “blokje”. Als dat element gevonden wordt, kunnen we opmaak etc. gaan aanpassen. Maar als we voor elke aanpassing steeds opnieuw een querySelector uit moesten voeren, zou de code nogal herhalend worden. Daarom slaan we het gevonden element op in een variabele.

Variabele

Je kunt een variabele zien als een schoenendoos. Je kunt er iets in stoppen, je kunt later bekijken wat er in zit, en als je het niet meer nodig hebt kun je het er uit halen en er iets anders in stoppen. Voor alles wat in het programma onthouden moet worden, gebruik je een variabele.

// Een variabele maken
var blokje;

// Het element met id blokje opslaan in de variabele
blokje = document.querySelector("#blokje");

In het bovenstaande voorbeeld zie je dat we een variabele maken, genaamd ‘blokje’. Dat betekent dat JS nu weet dat er een plekje moet zijn voor jou om dingen op te slaan, en dat we dat plekje ‘blokje’ noemen. Vervolgens zeggen we tegen JS dat we op zoek gaan naar een element met id blokje, en dat die opgeslagen moet worden in de variabele.

Een variabele met een naam en een element met dezelfde naam als id zijn dus twee verschillende dingen, totdat jij zegt dat de één naar de ander moet verwijzen.

In het eerste voorbeeld zie je dat het bovenstaande ook in één zin gedaan kan worden, als volgt:

var blokje = document.querySelector("#blokje");

We willen de breedte ook variabel (veranderbaar) maken, daar hebben we een variabele voor nodig. Hier zie je dat we nog een variabele maken, en die een waarde van 350 geven.

var breedte = 350;
blokje.style.width = breedte + "px";

Prompt

Een prompt zul je op een goede website niet zo snel tegenkomen, maar het is wel de makkelijkste manier om interactiviteit te testen. Probeer het maar eens.

var blokje = document.querySelector("#blokje");
var breedte = prompt("wat moet de breedte worden?");
blokje.style.width = breedte + "px";

if

Programmeren wil vaak zeggen dat je bezig bent met het schrijven van if-this-then-that: ‘als dit waar is, dan moet dat gebeuren’. In JavaScript doe je dat met een if.

Elke if heeft een conditie (wat moet er waar zijn?) en een codeblok (wat moet er dan gebeuren?). De conditie staat tussen haakjes en het codeblok tussen accolades. In dit voorbeeld wordt het blokje groen gekleurd als de variabele breedte kleiner is dan 300.

var breedte = prompt("wat moet de breedte worden?");

if (breedte < 300) {
  blokje.style.backgroundColor = "green";   
}

Je kunt ook een else statement toevoegen, voor als de conditie niet waar is.

var breedte = prompt("wat moet de breedte worden?");

if (breedte < 300) {
  blokje.style.backgroundColor = "green";
} else {
  blokje.style.backgroundColor = "red";
}

Quizje

Open het mapje quiz\ en bekijk de bestanden. Als je het script bekijkt, snap je dan wat er gebeurt?

index.html

<img src="vraag.jpg" id="plaatje">

script.js

var plaatje = document.querySelector("#plaatje");
var naam = prompt("Wie is deze pokemon?");

if (naam == "pikachu") {
  plaatje.src = "goed.jpg";
}

Let op: Als je in een if-statement wilt vergelijken of twee dingen gelijk aan elkaar zijn, dan doe je dat met dubbele is-tekens:
if (naam == "pikachu")
Niet vergeten!

Het nadeel aan deze code is dat het gelijk wordt uitgevoerd. Je krijgt de prompt al voordat “vraag.jpg” geladen is, en ziet dus alleen “goed.jpg”. Eigenlijk willen we dat JavaScript dus even wacht met het uitvoeren van de code. Hiervoor hebben we een function nodig.

function

Een functie heeft ook een codeblok (een stuk code tussen accolades). Je kunt een functie zien als een verzameling opdrachten die samen op een bepaald moment worden uitgevoerd. In onderstaand voorbeeld maken we een functie genaamd ‘quiz’, en zetten daar de meeste code van de quiz in. Daarna zeggen we door middel van een onclick eigenschap dat bij een muisklik die functie gestart moet worden.

var plaatje = document.querySelector("#plaatje");

function quiz() {
  var naam = prompt("Wie is deze pokemon?");

  if (naam == "pikachu") {
    plaatje.src = "goed.jpg";
  }
}

plaatje.onclick = quiz;

Je herkent een functie altijd aan de haakjes () achter de naam.

Zelfstudieopdracht 1

  1. De code hierboven laat een plaatje van Pikachu zien op het moment dat het antwoord goed is. Kun je de code zo aanpassen dat er een ander plaatje getoond wordt op het moment dat het antwoord fout is?

Zelfstudieopdracht 2

We gaan een eenvoudig spelletje maken, waarbij je op plaatjes van koeien moet klikken.

  1. Open het mapje game\. Maak een .js bestand in deze map en koppel je HTML aan dit bestand. Dit doe je altijd onderaan de body!
  2. Maak in JavaScript een variabele genaamd score en geef die de waarde 0.
    Maak voor elk plaatje een variabele, waar je door middel van document.querySelector ze koppelt aan elke id.
    Maak ook een variabele genaamd scorevakje en sla daar het HTML-element met id ‘scorevakje’ in op.
  3. Maak ook twee functies, function goed() en function fout()
  4. Voeg in JS een onclick attribuut toe aan elk plaatje. Het plaatje van een koe moeten de goed() functie starten en alle andere plaatjes starten de functie fout()
  5. In de functie goed() tel je 1 punt op bij de score:
    score = score + 1;
    scorevakje.innerHTML = score; // laat de score zien in het vakje
    

    In de functie fout() doe je natuurlijk het tegenovergestelde:

    score = score - 1;
    scorevakje.innerHTML = score; // laat de score zien in het vakje
    
  6. Sla het bestand op en test in de browser of het werkt.
  7. Voeg ook nog een if-statement toe aan de functie goed():
    if (score == 4) {
      scorevakje.innerHTML = "Je bent koe-goed!";
    }