H5 P1 Les 2.1

H5 Week 2 Les 1
1 / 14
volgende
Slide 1: Tekstslide
InformaticaMiddelbare schoolhavoLeerjaar 4

In deze les zitten 14 slides, met interactieve quizzen, tekstslides en 1 video.

time-iconLesduur is: 90 min

Onderdelen in deze les

H5 Week 2 Les 1

Slide 1 - Tekstslide

Startklaar zitten.
STARTKLAAR!
Tellie in zakkie

Slide 2 - Tekstslide

Startklaar zitten.
Voorkennis activeren

Slide 3 - Tekstslide

Deze slide heeft geen instructies

Slide 4 - Video

Deze slide heeft geen instructies

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

Slide 5 - Open vraag

Deze slide heeft geen instructies

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

Slide 6 - Tekstslide

Deze slide heeft geen instructies

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

Slide 7 - Tekstslide

Deze slide heeft geen instructies

Document Object Model (DOM)

Slide 8 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

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 - Tekstslide

Deze slide heeft geen instructies

lingo.js koppelen aan HTML

Slide 12 - Tekstslide

Deze slide heeft geen instructies

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 - Open vraag

Deze slide heeft geen instructies

Afsluiting

Slide 14 - Tekstslide

Deze slide heeft geen instructies