H5 P1 Les 2.1

H5 Week 2 Les 1
1 / 14
suivant
Slide 1: Diapositive
InformaticaMiddelbare schoolhavoLeerjaar 4

Cette leçon contient 14 diapositives, avec quiz interactifs, diapositives de texte et 1 vidéo.

time-iconLa durée de la leçon est: 90 min

Éléments de cette leçon

H5 Week 2 Les 1

Slide 1 - Diapositive

Startklaar zitten.
STARTKLAAR!
Tellie in zakkie

Slide 2 - Diapositive

Startklaar zitten.
Voorkennis activeren

Slide 3 - Diapositive

Cet élément n'a pas d'instructions

Slide 4 - Vidéo

Cet élément n'a pas d'instructions

Zijn er id's gebruikt in html en waar is dat gedaan in html

Slide 5 - Question ouverte

Cet élément n'a pas d'instructions

LEERDOELEN
De leerling kan id gebruiken om specifieke elementen aan te spreken en te manipuleren met JavaScript

Slide 6 - Diapositive

Cet élément n'a pas d'instructions

Javascript
  • JavaScript Basic (3.1 t/m 3.8)
  • Control Structures (6.1 t/m 6.11)

Slide 7 - Diapositive

Cet élément n'a pas d'instructions

Document Object Model (DOM)

Slide 8 - Diapositive

Cet élément n'a pas d'instructions

DOM - Window
  • Het hoogste niveau 
    van DOM is window
  • Via javascript kan je
    deze manipuleren: 

Bijvoorbeeld:


window.screen

Voor de grootte van het 
browserscherm

  • Biedt javascript toegang tot
    de browser zelf.

Slide 9 - Diapositive

Cet élément n'a pas d'instructions

DOM - Document
  • Het niveau na window
  • Via javascript kan je
    deze ook manipuleren 

Bijvoorbeeld:

document.getElementById('mijnID')

In het spel lingo gaan wij voornamelijk dit 
gebruiken.

Slide 10 - Diapositive

Cet élément n'a pas d'instructions

Een javascript bestand aanmaken
  1. Open jouw Lingo project in de online omgeving van Visual Code 
  2. Ga naar het mapje assets maak je een nieuwe map genaamd js
  3. Maak in dat mapje een bestand genaamd lingo.js
  4. Typ in het bestand lingo.js het volgende:


Klaar? Voeg deze regel toe aan lingo.html en open het in je browser


Wil je weten waar? Vraag aan Google of ChatGPT.


<script src="assets/js/lingo.js"></script>

window.alert("lingo.js heeft verbinding met HTML")

Slide 11 - Diapositive

Cet élément n'a pas d'instructions

lingo.js koppelen aan HTML

Slide 12 - Diapositive

Cet élément n'a pas d'instructions

Ga daarna naar jouw map lingo op jouw laptop (niet in de code editor omgeving) en open lingo.html.

Wat zie jij nu gebeuren?

Slide 13 - Question ouverte

Cet élément n'a pas d'instructions

Afsluiting

Slide 14 - Diapositive

Cet élément n'a pas d'instructions