Javascript - Alma college
Raymond Asbreuk
JavaScript
1 / 21
suivant
Slide 1: Diapositive
ICTMiddelbare schoolvmboLeerjaar 4
Cette leçon contient 21 diapositives, avec diapositives de texte.
La durée de la leçon est: 120 minÉléments de cette leçon
Raymond Asbreuk
JavaScript
Slide 1 - Diapositive
Raymond Asbreuk
Verbinding Eduroam
Starten Visual studio code
Slide 2 - Diapositive
Planning
Raymond Asbreuk
Wat gaan we doen:
- Simpele voorbeelden bekijken van JavaScript
- Simpel voorbeeld van JavaScript maken
- Wat is een variabel
- Kleine opdracht
- Logica en beslissingen
- Wat is het document en wat kan je ermee
Slide 3 - Diapositive
Raymond Asbreuk
Javascript: wat is het?
JavaScript is een taal waarmee je websites "levend" maakt. Het zorgt ervoor dat dingen op een website bewegen, veranderen of reageren als je bijvoorbeeld
op een knop drukt. Zonder JavaScript zijn websites
vaak simpel en statisch, maar met JavaScript kun je
ze interactief en leuk maken.
Slide 4 - Diapositive
Raymond Asbreuk
Voorbeeld
alert('Hallo Wereld')
Slide 5 - Diapositive
Raymond Asbreuk
Hallo wereld
<!DOCTYPE html>
<html>
<body>
<html>
<body>
<button onclick='alert('Hello World')'>
knop
</button>
</body>
</body>
</html>
- Neem de code rechts over
- Sla het op als:
index-js-01.html - Open het bestand
in je browser
Wat gebeurt er?
Zie je een JS functie?
Kan je twee buttons maken die
elk een andere zin tonen?
Kan je twee buttons maken die
elk een andere zin tonen?
Slide 6 - Diapositive
Raymond Asbreuk
Wat zijn variabelen
Variabelen zijn namen die we gebruiken om informatie in een programma te bewaren en
te veranderen.
Maar wat betekent dat nu?
Slide 7 - Diapositive
Raymond Asbreuk
Variabel
Naam
Waarde
Lade
Label
Voorwerp
Wat zijn variabelen
Slide 8 - Diapositive
Raymond Asbreuk
Hallo wereld
<!DOCTYPE html>
<html>
<body>
<body>
<button
onclick='let naam='piet'; alert(naam);'>
knop
</button>
</body>
</body>
</html>
- Verander je bestaande code naar wat hier rechts staat
- Sla het opnieuw op
- Open het bestand in je browser
Wat gebeurt er?
Kan je ook een andere naam tonen?
Kan je ook 2 variabelen gebruiken
Slide 9 - Diapositive
Raymond Asbreuk
Wat is een functie?
Wat is een functie?
Een functie in code is als een handig hulpmiddel dat iets voor je doet. Denk aan een keukenmachine: je stopt er ingrediënten in, drukt op de knop, en hij maakt iets voor je klaar.
Vergelijking:
Stel, je wilt een pannenkoek maken. Je hebt een recept dat precies vertelt wat je moet doen. Elke keer dat je een pannenkoek wilt maken, volg je gewoon dat recept.
In code:
Een functie werkt net zo. Je schrijft een stukje code dat een taak uitvoert (zoals een recept), en daarna kun je die taak makkelijk herhalen door de functie op te roepen (net zoals op een knop drukken).
Simpel voorbeeld:
Als je een functie maakt om pannenkoeken te bakken, hoef je daarna alleen maar te zeggen: "Bak een pannenkoek!", en de code weet wat hij moet doen.
Slide 10 - Diapositive
Raymond Asbreuk
Hallo wereld
<!DOCTYPE html>
<html>
<body>
<html>
<body>
<button onclick="hallo()">knop</button>
<script>
<script>
function hallo() {
let naam = 'Piet';
alert(naam);
}
</script>
</body>
</html>
- Verander je bestaande code naar wat hier rechts staat
- Sla het op.
- Open het bestand
in je browser
Wat gebeurt er?
Kan je twee buttons maken die
elk een andere functie aanroepen?
Slide 11 - Diapositive
Raymond Asbreuk
Opdracht
1) Maak een klein programmaatje wat om een naam vraagt (functie: prompt) en deze toont aan de gebruiker via een alert functie.
2) Maak een programma dat twee getallen
vraagt en die ze opgeteld laat zien.
Slide 12 - Diapositive
Raymond Asbreuk
Logica en beslissingen
Een if-else statement is een manier waarop een computer beslissingen kan nemen op basis van een voorwaarde.
Het werkt als een vraag: "Als dit waar is, doe dan dit, anders doe dat."
Voorbeeld:
Als het kouder is dan 18 graden, dan doe een jas aan, anders heb je geen jas nodig.
Slide 13 - Diapositive
Raymond Asbreuk
Logica en beslissingen
let temperatuur = 15; // De temperatuur is 15 graden
if (temperatuur < 18) {
console.log("Doe een jas aan!");
// Als de temperatuur onder 18 is, laat dit zien
} else {
console.log("Je hebt geen jas nodig!"); // Anders laat dit zien
}
Slide 14 - Diapositive
Raymond Asbreuk
Opdracht
Maak een quiz met drie vragen.
Gebruik prompt() om de vragen te stellen
Gebruik alert() om feedback te geven.
Slide 15 - Diapositive
Raymond Asbreuk
Document
Het document is een manier waarop JavaScript de webpagina begrijpt en ermee kan werken. Je kunt het zien als een plattegrond van de hele webpagina. Alles wat je op de pagina ziet (tekst, plaatjes, knoppen) staat in dat document.
Met JavaScript kun je tegen het document zeggen:
- "Verander de tekst daar."
- "Maak die knop rood."
- "Voeg een nieuw plaatje toe."
Slide 16 - Diapositive
Raymond Asbreuk
Document
Vergelijking:
Stel je voor dat een webpagina een huis is. Het document is de bouwtekening van dat huis. Als je iets aan het huis wilt veranderen, gebruik je de bouwtekening om te zeggen:
- "Verf die muur blauw."
- "Zet een raam daar."
In JavaScript gebruik je het document om de webpagina "te bouwen" of aan te passen.
Slide 17 - Diapositive
Raymond Asbreuk
Document
Een voorbeeld geven van aanpassen document
Slide 18 - Diapositive
Raymond Asbreuk
Opdracht
Opdracht: Breid je contactformulier uit met e-mailcontrole
Controleer met JavaScript of het ingevulde e-mailadres:
- Een "@" bevat.
- Een "." bevat.
Wat moet je doen?
Toon een foutmelding als het e-mailadres ongeldig is, bijv. "Ongeldig e-mailadres, controleer je invoer."
Toon een bevestiging als het e-mailadres geldig is, bijv. "Bedankt voor je invoer!"
Bonus:
Controleer of het veld niet leeg is.
Laat de foutmelding verdwijnen zodra de invoer correct is.
Slide 19 - Diapositive
Raymond Asbreuk
Wat is behandeld
- Simpele voorbeelden van JavaScript
- Hallo wereld
- Variabele
- Kleine opdracht
- Logica en beslissingen
- Document
Slide 20 - Diapositive
Raymond Asbreuk
https://forms.office.com/e/Ycz6iaQZUG
