Intro JS

1 Wat is JavaScript?

In deze les leer je wat JavaScript is, waarom we het gebruiken en hoe je jouw eerste stukje code uitvoert in de browser.

🎯 Leerdoelen

Je weet wat JavaScript is en waarvoor het wordt gebruikt
Je kunt een script uitvoeren in de browserconsole
Je kunt een script toevoegen aan een HTML-pagina met <script>

💡 Wat is JavaScript?

HTML zorgt voor de inhoud (tekst, koppen, knoppen...)
CSS zorgt voor de opmaak (kleuren, marges, lettertypes...)
JavaScript zorgt voor de interactie (reageren op klikken, invullen, bewegen...)

Wat kun je met JavaScript doen?

Een knop laten reageren als je erop klikt
Een rekenmachine bouwen
Invoer van een formulier controleren
Spelletjes maken in de browser

🔧 Oefenen in de browserconsole

Open je browser (bijv. Chrome of Firefox)
Rechtermuisklik op een lege plek op een website > Kies Inspecteren > Ga naar het tabblad Console
Typ daar:
```
console.log("Hallo wereld!");
```
en druk op Enter
Je ziet in de console de tekst Hallo wereld!

📄 JavaScript in een HTML-bestand gebruiken

Open Phoenix Code
Maak een nieuw HTML-bestand aan, noem het script.html
Typ of plak deze code in het bestand:

<!DOCTYPE html>
<html>
<head>
  <title>Eerste script</title>
</head>
<body>

  <h1>Welkom op mijn site</h1>
  <p>Open de console om het bericht te zien.</p>

  <script>
    console.log("Dit bericht komt uit de HTML!");
  </script>

</body>
</html>

Sla op en open het bestand in de browser
Open opnieuw de console en zie het bericht verschijnen
Zie je meer berichten of fouten?
Verwijder alle bestanden uit je project zodat je alleen script.html overhoud.

🛠️ Opdracht – Jouw eerste script

Maak een HTML-bestand in Phoenix Code met een eigen titel en één paragraaf
Voeg onderaan het bestand een script toe met minstens `console.log()`-regels
Laat in de console bijvoorbeeld jouw naam en je favoriete dier zien

Voorbeeld:

console.log("Ik heet Yasmin");
console.log("Mijn lievelingsdier is een rode panda");

🧠 Reflectie

Wat is het verschil tussen wat je in de browser ziet en wat je in de console ziet?
Waarom gebruiken programmeurs de console?

📤 Inleveren

Maak een screenshot van jouw HTML-bestand én de console-output.

2 Variabelen en de console

In deze les leer je hoe je informatie kunt opslaan in een variabele, hoe je dat zichtbaar maakt in de console, en waarom de console zo belangrijk is bij het programmeren.

🎯 Leerdoelen

Je begrijpt wat een variabele is
Je kunt een variabele maken met let of const
Je gebruikt console.log() om informatie weer te geven
Je weet wat debuggen is en waarom de console daarbij helpt

💡 Wat is een variabele?

Een variabele is een soort doosje waarin je iets bewaart, zoals tekst of een getal.

let naam = "Jasper";
const leeftijd = 17;

let = variabele die later nog mag veranderen
const = variabele die niet meer mag veranderen

Je gebruikt console.log() om de inhoud van een variabele te bekijken:

console.log(naam);

🔎 Wat is debuggen?

Debuggen betekent: je code controleren op fouten (bugs) en begrijpen wat er gebeurt.

De console is een soort gereedschapskist voor programmeurs.
Je kunt er controleren of variabelen kloppen, of een functie wordt uitgevoerd, of ergens een fout zit.
Een programmeur kijkt vaak in de console tijdens het schrijven van code.

Als je in de console iets ziet wat je niet verwacht – dan kun je makkelijker de fout vinden. Daarom gebruiken we console.log() vaak tijdens het debuggen.

🛠️ Opdracht – Variabelen gebruiken en debuggen

Maak een nieuw HTML-bestand in Phoenix Code: variabelen.html
Typ de volgende basiscode in je bestand:

<!DOCTYPE html>
<html>
<head>
  <title>Variabelen oefenen</title>
</head>
<body>

  <h1>Bekijk de console!</h1>

  <script>
    let voornaam = "Ali";
    const leeftijd = 18;

    console.log("Naam: " + voornaam);
    console.log("Leeftijd: " + leeftijd);
  </script>

</body>
</html>

Open je bestand in de browser en bekijk de console (rechtermuisklik → Inspecteren → Console)
Verander de naam en leeftijd naar jouw eigen gegevens
Voeg een derde variabele toe: favorietDier en toon die ook met console.log()

Voorbeeld:

let favorietDier = "koala";
console.log("Mijn favoriete dier is: " + favorietDier);

🧠 Reflectie

Wat gebeurt er als je de const probeert te veranderen?
Waarom is het handig om even iets te loggen in de console?
Heb je fouten gezien? Wat hielp je om ze op te lossen?

📤 Inleveren

Beantwoord de vragen uit de reflectie en lever die in (.txt. of .pdf bestand).

3 Functies

In deze les leer je wat een functie is, waarom functies handig zijn en hoe je zelf een functie maakt in JavaScript. Je oefent met functies die tekst tonen of berekeningen uitvoeren.

🎯 Leerdoelen

Je weet wat een functie is en wat het doel ervan is
Je kunt een functie schrijven met function
Je kunt een functie aanroepen (laten uitvoeren)
Je begrijpt wat een parameter is en hoe je die meegeeft

💡 Wat is een functie?

Een functie is een blokje code dat je een naam geeft, zodat je het later makkelijk opnieuw kunt gebruiken.

Stel, je wilt iets drie keer doen, zoals een bericht tonen. Dan is het dus handig om dat in een functie te stoppen.

function zegHallo() {
  console.log("Hallo!");
}

Om de functie uit te voeren (aan te roepen), typ je:

zegHallo();

📦 Functies met parameters

Je kunt een functie ook informatie meegeven. Bijvoorbeeld een naam:

function begroet(naam) {
  console.log("Hoi " + naam + "!");
}

begroet("Fatima"); // toont: Hoi Fatima!
begroet("Jesse");  // toont: Hoi Jesse!

🛠️ Opdracht – Bouw je eigen functies

Maak een nieuw HTML-bestand in Phoenix Code: functies.html
Typ deze code als basis:

<!DOCTYPE html>
<html>
<head>
  <title>Functies oefenen</title>
</head>
<body>

  <h1>Bekijk de console</h1>

  <script>

    function begroet(naam) {
      console.log("Hallo " + naam + "!");
    }

    begroet("Maya");
    begroet("Koen");

  </script>

</body>
</html>

Maak nog een functie die een getal verdubbelt:

function verdubbel(getal) {
  console.log(getal * 2);
}

Roep die functie minstens twee keer aan met verschillende getallen
Voeg daarna zelf een nieuwe functie toe met een eigen idee, bijvoorbeeld:
- Een functie die een leeftijd in hondenjaren berekent (× 7)
- Een functie die een bericht toont in jouw stijl.

🧠 Reflectie

Waarom is het handig om herhaalbare code in een functie te zetten?
Wat gebeurt er als je een functie oproept zonder de juiste parameter?

📤 Inleveren

Maak een screenshot van je code én de console-output

4 Voorwaardes met `if` en `else`

In deze les leer je hoe je met JavaScript keuzes kunt maken. Je gebruikt if en else om bepaalde code alleen uit te voeren als aan een voorwaarde is voldaan.

🎯 Leerdoelen

Je begrijpt wat een voorwaarde is
Je kunt werken met if, else if en else
Je kunt eenvoudige beslissingen laten uitvoeren op basis van een getal

💡 Wat is een voorwaarde?

Met een voorwaarde bepaal je of een stukje code wél of niet uitgevoerd moet worden. Je gebruikt een if-statement:

let leeftijd = 17;

if (leeftijd >= 18) {
  console.log("Je bent volwassen");
} else {
  console.log("Je bent nog geen 18");
}

Je kunt meerdere keuzes maken met else if:

let punt = 6;

if (punt >= 8) {
  console.log("Super goed!");
} else if (punt >= 5.5) {
  console.log("Voldoende");
} else {
  console.log("Onvoldoende");
}

🛠️ Opdracht – Leeftijdscontrole met voorwaarden

Maak een nieuw HTML-bestand in Phoenix Code: ifelse.html
Gebruik deze code als basis:

<!DOCTYPE html>
<html>
<head>
  <title>If-statement oefenen</title>
</head>
<body>

  <h1>Bekijk de console</h1>

  <script>

    let leeftijd = 15;

    if (leeftijd >= 18) {
      console.log("Je mag stemmen.");
    } else {
      console.log("Je bent nog te jong om te stemmen.");
    }

  </script>

</body>
</html>

Pas de variabele leeftijd aan naar jouw eigen leeftijd en test het resultaat
Voeg een else if-blok toe dat controleert of iemand precies 17 is
Maak daarna zelf een voorbeeld met een punt (bijvoorbeeld een toetscijfer) en geef een boodschap: onvoldoende / voldoende / goed

📤 Inleveren

Maak een screenshot van je code én de console-output bij jouw leeftijd en punt
Lever dit screenshot in via Teams of Canvas

🧠 Reflectie

Wat gebeurt er als je geen else gebruikt?
Wanneer gebruik je else if in plaats van meerdere if-regels?

5 Gebeurtenissen (events)

In deze les leer je hoe je iets kunt laten gebeuren als een gebruiker op een knop klikt. Je leert werken met onclick en een functie aanroepen bij een gebeurtenis.

🎯 Leerdoelen

Je weet wat een event is in JavaScript
Je kunt een knop laten reageren op een klik met onclick
Je kunt een functie aanroepen wanneer een event plaatsvindt

💡 Wat is een event?

Een event is een gebeurtenis, zoals:

een klik op een knop (click)
iets typen in een tekstvak (input)
de muis bewegen over een element (mouseover)

Met JavaScript kun je ervoor zorgen dat er iets gebeurt als zo'n event plaatsvindt. Het meest gebruikte event is onclick.

Voorbeeld: klik op een knop

<button onclick="groet()">Klik hier</button>

<script>
  function groet() {
    console.log("Hoi! Je hebt op de knop geklikt.");
  }
</script>

🛠️ Opdracht – Laat een knop iets doen

Maak een nieuw HTML-bestand in Phoenix Code: knop.html
Typ deze code als basis:

<!DOCTYPE html>
<html>
<head>
  <title>Gebeurtenis oefenen</title>
</head>
<body>

  <h1>Druk op de knop!</h1>

  <button onclick="toonBericht()">Klik hier</button>

  <script>
    function toonBericht() {
      console.log("Je hebt geklikt!");
    }
  </script>

</body>
</html>

Verander de tekst in de functie naar je eigen boodschap
Maak daarna nog een tweede knop met een andere functie, bijvoorbeeld: toonLeeftijd()
Laat die tweede functie een leeftijd of getal tonen in de console

Voorbeeld:

function toonLeeftijd() {
  console.log("Ik ben 16 jaar");
}

🧠 Reflectie

Wat is er nodig om een knop iets te laten doen?
Wat gebeurt er als je een functie aanroept zonder dat die bestaat?

📤 Inleveren

Maak een screenshot van je HTML én console na het klikken op de knoppen

6 Formulieren en `getElementById`

In deze les leer je hoe je met JavaScript een waarde uit een formulier kunt ophalen. Zo kun je reageren op wat de gebruiker invoert, zoals een naam of leeftijd.

🎯 Leerdoelen

Je weet hoe je een formulier maakt met een invoerveld en knop
Je kunt met getElementById() de waarde van een input ophalen
Je kunt met JavaScript iets doen met de ingevoerde waarde

💡 Wat is `getElementById`?

Met document.getElementById("...") zoek je een element op in je HTML via zijn id. Daarna kun je de waarde ophalen met .value.

let naam = document.getElementById("naamInput").value;
console.log("Welkom, " + naam);

Belangrijk:

Zorg dat het HTML-element een id heeft
Roep de functie pas aan na een klik of andere actie

🛠️ Opdracht – Begroet de gebruiker met zijn naam

Maak een nieuw HTML-bestand in Phoenix Code: formulier.html
Typ deze code als basis:

<!DOCTYPE html>
<html>
<head>
  <title>Formulier oefenen</title>
</head>
<body>

  <h1>Wie ben jij?</h1>

  <input type="text" id="naamInput" placeholder="Typ je naam">
  <button onclick="begroet()">Klik op mij</button>

  <script>
    function begroet() {
      let naam = document.getElementById("naamInput").value;
      console.log("Hallo " + naam + "!");
    }
  </script>

</body>
</html>

Probeer het formulier uit in je browser: typ een naam, klik op de knop en bekijk de console
Pas de tekst aan zodat de begroeting anders klinkt ("Welkom terug", "Hey", ...)
Voeg daarna een tweede invoerveld toe voor leeftijd, en toon ook die in de console

Voorbeeld uitbreiding:

<input type="number" id="leeftijdInput" placeholder="Typ je leeftijd">

let leeftijd = document.getElementById("leeftijdInput").value;
console.log("Je bent " + leeftijd + " jaar oud.");

🧠 Reflectie

Wat gebeurt er als je geen id geeft aan je input?
Waarom is .value nodig bij een inputveld?

📤 Inleveren

Maak een screenshot van je code en console-uitvoer na invoer van naam en leeftijd

7 If-statements op formulierinput

In deze les leer je hoe je met JavaScript beslissingen kunt maken op basis van wat de gebruiker invoert. Bijvoorbeeld: als de gebruiker 18 jaar of ouder is, toon dan een andere boodschap dan wanneer de gebruiker jonger is.

🎯 Leerdoelen

Je kunt input van een formulier gebruiken in een if-statement
Je weet hoe je numerieke invoer vergelijkt
Je laat de console een andere boodschap tonen bij verschillende leeftijden

💡 If op invoer

We halen eerst de leeftijd op uit een inputveld met .value en gebruiken daarna if om een beslissing te maken:

let leeftijd = document.getElementById("leeftijdInput").value;

if (leeftijd >= 18) {
  console.log("Je bent volwassen");
} else {
  console.log("Je bent nog minderjarig");
}

🛠️ Opdracht – Leeftijd controleren

Maak een nieuw HTML-bestand in Phoenix Code: leeftijdcheck.html
Typ deze code als basis:

<!DOCTYPE html>
<html>
<head>
  <title>Leeftijd controleren</title>
</head>
<body>

  <h1>Voer je leeftijd in</h1>

  <input type="number" id="leeftijdInput" placeholder="Typ je leeftijd">
  <button onclick="checkLeeftijd()">Check</button>

  <script>
    function checkLeeftijd() {
      let leeftijd = document.getElementById("leeftijdInput").value;
      leeftijd = Number(leeftijd); // omzetten naar getal

      if (leeftijd >= 18) {
        console.log("Je bent volwassen.");
      } else if (leeftijd >= 13) {
        console.log("Je bent een tiener.");
      } else {
        console.log("Je bent een kind.");
      }
    }
  </script>

</body>
</html>

Probeer verschillende leeftijden in te voeren en bekijk de console
Pas de boodschappen aan zodat ze iets meer over jou zeggen
Maak daarna nog één extra else if-regel, bijvoorbeeld voor 65+: console.log("Je bent een senior");

🧠 Reflectie

Wat gebeurt er als je tekst invoert in plaats van een getal?
Waarom is het handig om Number() te gebruiken bij getallen?

📤 Inleveren

Maak een screenshot van je HTML-code en van de console-uitvoer voor minstens 3 leeftijden

8 Bereken een prijs met korting

In deze les gebruik je JavaScript om een prijs te berekenen na korting. Je gebruikt een formulier met invoervelden voor het bedrag en de korting in procenten. Daarna laat je in de console zien wat de nieuwe prijs is.

🎯 Leerdoelen

Je kunt meerdere waarden ophalen uit een formulier
Je gebruikt JavaScript om een berekening te maken met die waarden
Je toont het resultaat in de console

💡 Formule: prijs met korting

Als je een korting in procenten hebt, dan gebruik je de volgende formule:

kortingsbedrag = bedrag * (korting / 100);
nieuwePrijs = bedrag - kortingsbedrag;

🛠️ Opdracht – Reken de prijs met korting uit

Maak een nieuw HTML-bestand in Phoenix Code: korting.html
Typ deze code als basis:

<!DOCTYPE html>
<html>
<head>
  <title>Korting berekenen</title>
</head>
<body>

  <h1>Bereken de korting</h1>

  <p>Vul een bedrag en een kortingspercentage in:</p>

  <input type="number" id="bedragInput" placeholder="Bedrag in euro's">
  <input type="number" id="kortingInput" placeholder="Korting in %">
  <button onclick="berekenKorting()">Bereken</button>

  <script>
    function berekenKorting() {
      let bedrag = Number(document.getElementById("bedragInput").value);
      let korting = Number(document.getElementById("kortingInput").value);

      let kortingBedrag = bedrag * (korting / 100);
      let nieuwePrijs = bedrag - kortingBedrag;

      console.log("Origineel bedrag: €" + bedrag.toFixed(2));
      console.log("Korting: " + korting + "%");
      console.log("Nieuwe prijs: €" + nieuwePrijs.toFixed(2));
    }
  </script>

</body>
</html>

Test het formulier met verschillende bedragen en percentages
Controleer of het resultaat klopt in de console
Pas eventueel de tekst aan naar jouw stijl

🧠 Reflectie

Wat gebeurt er als je niks invult? Wat kun je daaraan doen?
Wat gebeurt er als je een korting invult die hoger is dan 100%?

📤 Inleveren

Voer minstens twee voorbeeldberekeningen uit en maak een screenshot van de console

Scratch 1

Scratch 2

Van Scratch naar Python

Pak de Kaas

Vallende stenen

Snake

Introductie AI

Snake Challenge

HTML - Phoenix

CSS - Phoenix

Intro JS

Portfolio Challenge

PHP Intro

Prompt Engineering 1

PHP-1

PHP Challenge

Intro JS

1 Wat is JavaScript?

🎯 Leerdoelen

💡 Wat is JavaScript?

Wat kun je met JavaScript doen?

🔧 Oefenen in de browserconsole

📄 JavaScript in een HTML-bestand gebruiken

🛠️ Opdracht – Jouw eerste script

Voorbeeld:

🧠 Reflectie

📤 Inleveren

2 Variabelen en de console

🎯 Leerdoelen

💡 Wat is een variabele?

🔎 Wat is debuggen?

🛠️ Opdracht – Variabelen gebruiken en debuggen

Voorbeeld:

🧠 Reflectie

📤 Inleveren

3 Functies

🎯 Leerdoelen

💡 Wat is een functie?

📦 Functies met parameters

🛠️ Opdracht – Bouw je eigen functies

🧠 Reflectie

📤 Inleveren

4 Voorwaardes met if en else

🎯 Leerdoelen

💡 Wat is een voorwaarde?

🛠️ Opdracht – Leeftijdscontrole met voorwaarden

📤 Inleveren

🧠 Reflectie

5 Gebeurtenissen (events)

🎯 Leerdoelen

💡 Wat is een event?

Voorbeeld: klik op een knop

🛠️ Opdracht – Laat een knop iets doen

Voorbeeld:

🧠 Reflectie

📤 Inleveren

6 Formulieren en getElementById

🎯 Leerdoelen

💡 Wat is getElementById?

Belangrijk:

🛠️ Opdracht – Begroet de gebruiker met zijn naam

Voorbeeld uitbreiding:

🧠 Reflectie

📤 Inleveren

7 If-statements op formulierinput

🎯 Leerdoelen

💡 If op invoer

🛠️ Opdracht – Leeftijd controleren

🧠 Reflectie

📤 Inleveren

8 Bereken een prijs met korting

🎯 Leerdoelen

💡 Formule: prijs met korting

🛠️ Opdracht – Reken de prijs met korting uit

🧠 Reflectie

📤 Inleveren

4 Voorwaardes met `if` en `else`

6 Formulieren en `getElementById`

💡 Wat is `getElementById`?