H5 P1 Les 2.2

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

Cette leçon contient 25 diapositives, avec quiz interactifs et diapositives de texte.

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

Éléments de cette leçon

H5 Week 2 Les 2

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

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 4 - Quiz

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

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

Slide 5 - Quiz

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

Bij welke opdracht ben jij op CodeHS?

Slide 6 - Question ouverte

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

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

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

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 8 - Diapositive

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

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

Slide 9 - Sondage

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

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 10 - Quiz

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

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 11 - Quiz

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

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 12 - Quiz

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

Datatypes

Slide 13 - Diapositive

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

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

Slide 14 - Diapositive

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

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

Slide 15 - Diapositive

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

Array

Slide 16 - Diapositive

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

Array

Slide 17 - Diapositive

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

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 18 - Diapositive

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

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 19 - Diapositive

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

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

Slide 20 - Sondage

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

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

Slide 21 - Quiz

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

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

Slide 22 - Quiz

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

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 23 - Quiz

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

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 24 - Diapositive

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

Samenvatting

Slide 25 - Diapositive

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