H5 P1 Les 2.1

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

This lesson contains 14 slides, with interactive quizzes, text slides and 1 video.

time-iconLesson duration is: 90 min

Items in this lesson

H5 Week 2 Les 1

Slide 1 - Slide

Startklaar zitten.
STARTKLAAR!
Tellie in zakkie

Slide 2 - Slide

Startklaar zitten.
Voorkennis activeren

Slide 3 - Slide

This item has no instructions

Slide 4 - Video

This item has no instructions

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

Slide 5 - Open question

This item has no instructions

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

Slide 6 - Slide

This item has no instructions

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

Slide 7 - Slide

This item has no instructions

Document Object Model (DOM)

Slide 8 - Slide

This item has no 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 - Slide

This item has no 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 - Slide

This item has no 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 - Slide

This item has no instructions

lingo.js koppelen aan HTML

Slide 12 - Slide

This item has no 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 - Open question

This item has no instructions

Afsluiting

Slide 14 - Slide

This item has no instructions