‹Terug naar zoeken

P1 Week 2

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

In deze les zitten 50 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

H5 Week 2 Les 2

Slide 14 - Tekstslide

Startklaar zitten.
STARTKLAAR!
Tellie in zakkie

Slide 15 - Tekstslide

Startklaar zitten.
Voorkennis activeren

Slide 16 - Tekstslide

Deze slide heeft geen instructies

Hoe print je hallo, wereld in JavaScript?
A
print("hallo, wereld");
B
console.log(hallo, wereld);
C
"hallo, wereld";
D
console.log("hallo, wereld");

Slide 17 - Quizvraag

Deze slide heeft geen instructies

Welke escape character gebruik je voor een nieuwe regel (ENTER)?
A
\ENTER
B
\newline
C
\n
D
\t

Slide 18 - Quizvraag

Deze slide heeft geen instructies

Bij welke opdracht ben jij op CodeHS?

Slide 19 - Open vraag

Deze slide heeft geen instructies

Uitzoekwerk
Zoek uit hoe je document.getElementById() in jouw lingo.js bestand kunt gebruiken om het lingo blokjes uit team 2, rij 3, blok 1 uit te lezen welke letter er in het blokje is.



HINT Gebruik ChatGPT




Slide 20 - Tekstslide

Deze slide heeft geen instructies

Uitzoekwerk
Zoek uit hoe je document.getElementById() in jouw lingo.js bestand kunt gebruiken om de letter c te veranderen naar letter K



HINT Gebruik ChatGPT



Slide 21 - Tekstslide

Deze slide heeft geen instructies

Uitzoekwerk
Zoek uit hoe je document.getElementById() in jouw lingo.js bestand kunt gebruiken om het lingo blokjes uit team 2, rij 3, blok 1 de kleur van blauw naar rood kan veranderen


HINT Gebruik ChatGPT




Slide 22 - Tekstslide

Deze slide heeft geen instructies

Aan de slag!
Zoek uit hoe je document.getElementById() in jouw lingo.js bestand kunt gebruiken om het blokje uit Team 2, Rij 3, Kolom 1 te selecteren en
  1. Print de letter in het blokje met alert(letter);
  2. Verander de letter van C naar K.
  3. Verander de kleur van blauw naar rood

HINT gebruik blokje.style.backgroundColor = 'red';

Slide 23 - Tekstslide

Deze slide heeft geen instructies

En nu zelf!
Opdracht
  1. Geef alle blokjes van Team 1 een ID.
  2. Maak dit Lingo bord na in Team 1 met alleen
    JavaScript code.*

Klaar?
  • Ga verder op CodeHS.


* Gele hokjes hoeft niet perse een rondje.

Slide 24 - Tekstslide

Deze slide heeft geen instructies

Ik weet nu hoe ik door DOM manipulatie mijn HTML-pagina kan aanpassen
Ja
Deels
Nee

Slide 25 - Poll

Deze slide heeft geen instructies

Schrijf de js code die ervoor zorgt dat de kleur van hoofdtitel en
bericht veranderd in de kleur green tussen <script> ...... </script>

Slide 26 - Open vraag

Deze slide heeft geen instructies

Wat gebeurt er als er meerdere HTML-elementen hetzelfde id-attribuut hebben?
A
document.getElementById() zal een foutmelding genereren.
B
document.getElementById() zal het eerste overeenkomende element selecteren.

Slide 27 - Quizvraag

Deze slide heeft geen instructies

Hoe kan document.getElementById() gebruikt worden om de tekst van een element te veranderen?
A
Door de classList van het geselecteerde element aan te passen.
B
Door de innerHTML-eigenschap van het geselecteerde element te wijzigen.

Slide 28 - Quizvraag

Deze slide heeft geen instructies

Wat is de functie van document.getElementById()?
A
Het selecteren van meerdere HTML-elementen tegelijk.
B
Het selecteren van een HTML-element op basis van de id-attribuut.

Slide 29 - Quizvraag

Deze slide heeft geen instructies

Datatypes

Slide 30 - Tekstslide

Deze slide heeft geen instructies

Leerdoelen
De student leert een willekeurige index uit een array in JavaScript te selecteren en deze in een variabele op te slaan.

Slide 31 - Tekstslide

Deze slide heeft geen instructies

LET OP!
Het werk dat je vandaag gaat maken dient vandaag ingeleverd te worden. Het telt 10% van jouw eind beoordeling deze periode!

Slide 32 - Tekstslide

Deze slide heeft geen instructies

Array

Slide 33 - Tekstslide

Deze slide heeft geen instructies

Array

Slide 34 - Tekstslide

Deze slide heeft geen instructies

Random getal in JavaScript tussen 0 en 9
  • Op CodeHS


  • In normale JavaScript 



  • Kijken in de documentatie van Math




Randomizer.nextInt(0, 9);
Math.floor(Math.random() * 10);

Slide 35 - Tekstslide

Deze slide heeft geen instructies

Array met woordjes
  1. Download het bestand woordjes.js via Teams en sla dit bestand op in de map assets/js.
  2. Zorg ervoor dat het bestand wordt ingeladen net boven lingo.js in HTML.
  3. Download de opdrachten en ga aan de slag in lingo.js met de array




Slide 36 - Tekstslide

Deze slide heeft geen instructies

Ik weet nu hoe ik een array kan gebruiken
Ja
Deels
Nee

Slide 37 - Poll

Deze slide heeft geen instructies

Hoe krijg je het aantal elementen in een array in JavaScript?
A
array.length;
B
array.size();
C
array.length();
D
array.count();

Slide 38 - Quizvraag

Deze slide heeft geen instructies

Hoe krijg ik het 5e element uit een array
A
array.get(5)
B
array[5]
C
array.4
D
array[4]

Slide 39 - Quizvraag

Deze slide heeft geen instructies

Hoe maak je een lege array in JavaScript?
A
var array = [];
B
var array = {};
C
var array = new Array();
D
var array = [1, 2, 3];

Slide 40 - Quizvraag

Deze slide heeft geen instructies

Lever jouw werk in
Jou lingo html pagina dien je via teams in te leveren
Deze telt mee voor de beoordeling 10% van de totale beoordeling 



Slide 41 - Tekstslide

Deze slide heeft geen instructies

Samenvatting

Slide 42 - Tekstslide

Deze slide heeft geen instructies

M4s Week 2 Les 2

Slide 43 - Tekstslide

Startklaar zitten.
STARTKLAAR!
Tellie in zakkie

Slide 44 - Tekstslide

Startklaar zitten.
Gestaltwetten
  • De Gestaltprincipes beschrijven hoe je hersenen omgaan met visuele informatie.

  • In een aantal principes leggen zij uit hoe je hersenen snel, automatisch en onbewust dingen waarnemen.

  • Wanneer je goed gebruik maakt van deze wetten op je poster, zorg je ervoor dat gebruikers beter je poster begrijpen. 

Slide 45 - Tekstslide

Startklaar zitten.
Gestaltwetten
De wet van voor- en achtergrond

Slide 46 - Tekstslide

Startklaar zitten.
Gestaltwetten
De wet van eenvoud

Slide 47 - Tekstslide

Startklaar zitten.
Gestaltwetten
De wet van geslotenheid / ingevulde hiaat

Slide 48 - Tekstslide

Startklaar zitten.
Meer Gestaltwetten
Opdracht
  • Maak twee of drietallen en kies een nog niet besproken Gestaltwet.
  • Kies een plaatje als voorbeeld en leg uit wat de wet betekent.
  • Plak dit allemaal in een document en lever dit in, dan hebben we een samenvatting van alle wetten.

Meer voorbeelden op InfoNu en FrankWatching.

Klaar?
Maak je poster beter te begrijpen voor je doelgroep met Gestaltwetten.

Slide 49 - Tekstslide

Startklaar zitten.
Afsluiting

Slide 50 - Tekstslide

Startklaar zitten.

Meer lessen zoals deze

P1 WEEK 2 H5S - INFORMATICA

- Les met 36 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

P1 WEEK 6 M4 - INFORMATIE TECHNOLOGIE

- Les met 36 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

P1 WEEK 5 M4 - INFORMATIE TECHNOLOGIE

- Les met 36 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

H5 P1 Les 2.2

- Les met 25 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

H5 P1 Les 2.2

- Les met 25 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

H5 P1 Les 2.1

- Les met 14 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

H5 P1 Les 2.1

- Les met 14 slides
InformaticaMiddelbare schoolhavoLeerjaar 4

P1 WEEK 1 M4S - INFORMATIE TECHNOLOGIE

- Les met 36 slides
InformaticaMiddelbare schoolhavoLeerjaar 4