# 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 1. Open je browser (bijv. Chrome of Firefox) 2. Rechtermuisklik op een lege plek op een website > Kies **Inspecteren** > Ga naar het tabblad **Console** 3. Typ daar: ```js console.log("Hallo wereld!"); ``` en druk op Enter 4. Je ziet in de console de tekst `Hallo wereld!` ### 📄 JavaScript in een HTML-bestand gebruiken 1. Open Phoenix Code 2. Maak een nieuw HTML-bestand aan, noem het `script.html` 3. Typ of plak deze code in het bestand: ```html Eerste script

Welkom op mijn site

Open de console om het bericht te zien.

``` 4. Sla op en open het bestand in de browser 5. 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 1. Maak een HTML-bestand in Phoenix Code met een eigen titel en ÊÊn paragraaf 2. Voeg onderaan het bestand een script toe met minstens `console.log()`-regels 3. Laat in de console bijvoorbeeld jouw naam en je favoriete dier zien #### Voorbeeld: ```js 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 1. 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. ```js 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: ```js 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 1. Maak een nieuw HTML-bestand in Phoenix Code: `variabelen.html` 2. Typ de volgende basiscode in je bestand: ```html Variabelen oefenen

Bekijk de console!

``` 3. Open je bestand in de browser en bekijk de console (rechtermuisklik → Inspecteren → Console) 4. Verander de naam en leeftijd naar jouw eigen gegevens 5. Voeg een derde variabele toe: `favorietDier` en toon die ook met `console.log()` #### Voorbeeld: ```js 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 1. 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. ```js function zegHallo() { console.log("Hallo!"); } ``` Om de functie uit te voeren (aan te roepen), typ je: ```js zegHallo(); ``` ### đŸ“Ļ Functies met parameters Je kunt een functie ook informatie meegeven. Bijvoorbeeld een naam: ```js function begroet(naam) { console.log("Hoi " + naam + "!"); } begroet("Fatima"); // toont: Hoi Fatima! begroet("Jesse"); // toont: Hoi Jesse! ``` ### 🛠ī¸ Opdracht – Bouw je eigen functies 1. Maak een nieuw HTML-bestand in Phoenix Code: `functies.html` 2. Typ deze code als basis: ```html Functies oefenen

Bekijk de console

``` 3. Maak nog een functie die een getal verdubbelt: ```js function verdubbel(getal) { console.log(getal * 2); } ``` 4. Roep die functie minstens twee keer aan met verschillende getallen 5. 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 1. 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: ```js 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`: ```js 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 1. Maak een nieuw HTML-bestand in Phoenix Code: `ifelse.html` 2. Gebruik deze code als basis: ```html If-statement oefenen

Bekijk de console

``` 3. Pas de variabele `leeftijd` aan naar jouw eigen leeftijd en test het resultaat 4. Voeg een `else if`-blok toe dat controleert of iemand precies 17 is 5. Maak daarna zelf een voorbeeld met een `punt` (bijvoorbeeld een toetscijfer) en geef een boodschap: onvoldoende / voldoende / goed ### 📤 Inleveren 1. Maak een screenshot van je code Ên de console-output bij jouw leeftijd en punt 2. 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 ```html ``` ### 🛠ī¸ Opdracht – Laat een knop iets doen 1. Maak een nieuw HTML-bestand in Phoenix Code: `knop.html` 2. Typ deze code als basis: ```html Gebeurtenis oefenen

Druk op de knop!

``` 3. Verander de tekst in de functie naar je eigen boodschap 4. Maak daarna nog een tweede knop met een andere functie, bijvoorbeeld: `toonLeeftijd()` 5. Laat die tweede functie een leeftijd of getal tonen in de console #### Voorbeeld: ```js 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 1. 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`. ```js 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 1. Maak een nieuw HTML-bestand in Phoenix Code: `formulier.html` 2. Typ deze code als basis: ```html Formulier oefenen

Wie ben jij?

``` 3. Probeer het formulier uit in je browser: typ een naam, klik op de knop en bekijk de console 4. Pas de tekst aan zodat de begroeting anders klinkt ("Welkom terug", "Hey", ...) 5. Voeg daarna een tweede invoerveld toe voor leeftijd, en toon ook die in de console #### Voorbeeld uitbreiding: ```html ``` ```js 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 1. 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: ```js let leeftijd = document.getElementById("leeftijdInput").value; if (leeftijd >= 18) { console.log("Je bent volwassen"); } else { console.log("Je bent nog minderjarig"); } ``` ### 🛠ī¸ Opdracht – Leeftijd controleren 1. Maak een nieuw HTML-bestand in Phoenix Code: `leeftijdcheck.html` 2. Typ deze code als basis: ```html Leeftijd controleren

Voer je leeftijd in

``` 3. Probeer verschillende leeftijden in te voeren en bekijk de console 4. Pas de boodschappen aan zodat ze iets meer over jou zeggen 5. 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 1. 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: ```js kortingsbedrag = bedrag * (korting / 100); nieuwePrijs = bedrag - kortingsbedrag; ``` ### 🛠ī¸ Opdracht – Reken de prijs met korting uit 1. Maak een nieuw HTML-bestand in Phoenix Code: `korting.html` 2. Typ deze code als basis: ```html Korting berekenen

Bereken de korting

Vul een bedrag en een kortingspercentage in:

``` 3. Test het formulier met verschillende bedragen en percentages 4. Controleer of het resultaat klopt in de console 5. 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 1. Voer minstens twee voorbeeldberekeningen uit en maak een screenshot van de console \--