# 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...)
Bijvoorbeeld, een **knop**
- **HTML**: een **kale knop** zonder opmaak
- **CSS**: dezelfde knop, maar nu **blauw** met **afgeronde hoeken**
- **JavaScript**: als je op de knop klikt, **verschijnt er een melding** ("popup")
#### 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
### π¬Video
In deze video wordt goed uitgelegd waarom je asl Web Developer, JavaScript moet leren.
Niet alles wat hier in de voorbeelden wordt getoond wordt niet allemaal in deze lessen behandeld. In[ blok 5](https://www.roc.ovh/books/software-development-2025/page/js-2-dom1) waarneer we het over DOM gaan hebben zal dit allemaal uitvoerig worden behandeld. We houden het voor nu even bij de basics.
[https://www.youtube.com/watch?v=zofMnllkVfI](https://www.youtube.com/watch?v=zofMnllkVfI)
### π§ 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.
```
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
```
### π‘ Uitleg
(lees goed door!)
Op regel **14** wordt een leeftijd gevraagd.
Op regel **15** staat een knop. Deze doet nog niets maar die moet via het `onlclick `event gekoppeld worden aan de JS functie `checkLeeftijd()` .
Op regel **17** staat een legel paragraaf. Deze paragraaf wordt (later) gevuld door de JS functie.
Op regel **21** wordt de waarde van het input veld met het id leeftijdInput gevraagd. De waarde wordt in de JS variabele leeftijd bewaard.
Op regel **30** wordt`document.getElementById("id").value` gebuikt om de waarde uit een inputveld op te halen. Het HTML element dat waarvan de tekst wordt opgehaald heeft als id `output`.
### π οΈ Opdracht β Leeftijd analyseren en tonen
1. Zorg ervoor dat de knop wordt gekoppeld aan de JavaScript functie checkLeeftijd().
2. Bereid de if-then-else structuur uit: als je ouder dat 65 bent dan ben je senior, ben je jonger dan 2 dan ben je een baby, jonger dan 6 een peuter, jonger dan 12 een jong kind, en jonger dan 18 een kind.
3. Test op een leeftijd <0 en laat dan een boodscahp zien dat de onvoer niet geldig is.
### π§ Reflectie
- Wat gebeurt er als je niets invult of een negatieve waarde gebruikt?
- Waarom is `Number(...)` nodig?
### π€ Inleveren
- Lever de geteste en werkende code als html bestand met daarin de JS code in.
## 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;
```
### Code
```html
Korting berekenen