01 - Javascript - introductie

Javascipt - Introductie

1 / 11

Slide 1: Tekstslide

ICTMBOStudiejaar 3,4

In deze les zitten 11 slides, met interactieve quiz en tekstslides.

Lesduur is: 60 min

Onderdelen in deze les

Javascipt - Introductie

Slide 1 - Tekstslide

Deze slide heeft geen instructies

Leerdoelen

Na deze les kun je:

De student begrijpt wat JavaScript
De student kan benoemen hoe het JavaScript kan integreren in HTML
De student kan Javascript toepassen binnen HTML

Slide 2 - Tekstslide

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.

JavaScript: wat is het?

JavaScript is een programmeertaal die:

Interactieve elementen op websites creëert
De gebruikerservaring verbetert
Dynamische en interactieve functionaliteiten toevoegt, zoals formulieren en games.

Slide 3 - Tekstslide

Deze slide heeft geen instructies

JavaScript: waar is het voor?

JS wordt vooral gebruikt in webomgevingen (HTML/CSS)

Met JS kun je dingen maken zoals: mobiele applicaties,

web applicaties, AR, VR, reserveringssystemen, spellen, animaties, datavisualisatie, en meer

Slide 4 - Tekstslide

Deze slide heeft geen instructies

Interne JavaScript toevoegen

Je kunt ook JavaScript-code rechtstreeks in de <script> tag in de HTML-pagina plaatsen om interne scripts toe te voegen.

document.write('JavaScript geschreven.');

</script>

Slide 5 - Tekstslide

Deze slide heeft geen instructies

Opdracht 1

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?

timer

5:00

<!DOCTYPE html>
<html>
<body>

alert("Hello World");

</script>

</body>

</html>

Slide 6 - Tekstslide

Deze slide heeft geen instructies

Opdracht 2

Neem de code
rechts over
Sla het op als:
index-js-02.html
Open het bestand
in je browser
Wat gebeurt er?
Waarom?

timer

3:00

<html>

<body>

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

<script>

function vraagNaam() {

let naam = prompt("Wat is jouw naam?");

// Controleert of de gebruiker iets heeft ingevuld

if (naam) {

alert("Hallo " + naam + "! Leuk je te ontmoeten!");

} else {

alert("Je hebt niets ingevuld!");

}

</script>

</body>

</html>

Slide 7 - Tekstslide

Deze slide heeft geen instructies

Externe JavaScript toevoegen

Met het <script> element en het src attribuut kun je externe Javascript bestand(en) toevoegen aan je HTML-pagina

function hallo() {

alert("Hello World");

}

Slide 8 - Tekstslide

Deze slide heeft geen instructies

Opdracht

Slide 9 - Tekstslide

Deze slide heeft geen instructies

Samenvatting

De student begrijpt wat JavaScript
De student kan benoemen hoe het JavaScript kan integreren in HTML
De student kan Javascript toepassen binnen HTML

Slide 10 - Tekstslide

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.

Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.

Slide 11 - Open vraag

De leerlingen geven hier (in vraagvorm) aan met welk onderdeel van de stof ze nog moeite. Voor de docent biedt dit niet alleen inzicht in de mate waarin de stof de leerlingen begrijpen/beheersen, maar ook een goed startpunt voor een volgende les.

01 - Javascript - introductie

Onderdelen in deze les

Slide 1 - Tekstslide

Slide 2 - Tekstslide

Slide 3 - Tekstslide

Slide 4 - Tekstslide

Slide 5 - Tekstslide

Slide 6 - Tekstslide

Slide 7 - Tekstslide

Slide 8 - Tekstslide

Slide 9 - Tekstslide

Slide 10 - Tekstslide

Slide 11 - Open vraag

Meer lessen zoals deze

Javascript - Alma college

01 - Javascript - wat is javascript

01 - Javascript - wat is javascript

01 - Javascript - wat is javascript

8. Interactief JavaScript-element

JavaScript 3 - variabelen: tekst samenvoegen, rekenen

JavaScript 0 - introductie

JavaScript 3 - variabelen: tekst samenvoegen, rekenen