Javascript - Alma college
Raymond Asbreuk
JavaScript
1 / 21
next
Slide 1: Slide
ICTMiddelbare schoolvmboLeerjaar 4
This lesson contains 21 slides, with text slides.
Lesson duration is: 120 minItems in this lesson
Raymond Asbreuk
JavaScript
Slide 1 - Slide
Raymond Asbreuk
Verbinding Eduroam
Starten Visual studio code
Slide 2 - Slide
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 - Slide
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 - Slide
Raymond Asbreuk
Voorbeeld
alert('Hallo Wereld')
Slide 5 - Slide
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 - Slide
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 - Slide
Raymond Asbreuk
Variabel
Naam
Waarde
Lade
Label
Voorwerp
Wat zijn variabelen
Slide 8 - Slide
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 - Slide
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 - Slide
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 - Slide
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 - Slide
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 - Slide
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 - Slide
Raymond Asbreuk
Opdracht
Maak een quiz met drie vragen.
Gebruik prompt() om de vragen te stellen
Gebruik alert() om feedback te geven.
Slide 15 - Slide
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 - Slide
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 - Slide
Raymond Asbreuk
Document
Een voorbeeld geven van aanpassen document
Slide 18 - Slide
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 - Slide
Raymond Asbreuk
Wat is behandeld
- Simpele voorbeelden van JavaScript
- Hallo wereld
- Variabele
- Kleine opdracht
- Logica en beslissingen
- Document
Slide 20 - Slide
Raymond Asbreuk
https://forms.office.com/e/Ycz6iaQZUG
