P1 Week 2

• Informatica
• Middelbare school
• havo
• Leerjaar 4

H5 Week 2 Les 1

Startklaar zitten.

STARTKLAAR!

Tellie in zakkie

Startklaar zitten.

Voorkennis activeren

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

LEERDOELEN

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

Javascript

Maak op codehs.com/go/A222C

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

Document Object Model (DOM)

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.

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.

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")

lingo.js koppelen aan HTML

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

Wat zie jij nu gebeuren?

H5 Week 2 Les 2

Startklaar zitten.

STARTKLAAR!

Tellie in zakkie

Startklaar zitten.

Voorkennis activeren

Hoe print je hallo, wereld in JavaScript?

1. print("hallo, wereld");
2. console.log(hallo, wereld);
3. "hallo, wereld";
4. console.log("hallo, wereld");

Welke escape character gebruik je voor een nieuwe regel (ENTER)?

1. \ENTER
2. \newline
3. \n
4. \t

Bij welke opdracht ben jij op CodeHS?

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

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

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

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';

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.

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

Ja

Deels

Nee

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

Wat gebeurt er als er meerdere HTML-elementen hetzelfde id-attribuut hebben?

1. document.getElementById() zal een foutmelding genereren.
2. document.getElementById() zal het eerste overeenkomende element selecteren.

Hoe kan document.getElementById() gebruikt worden om de tekst van een element te veranderen?

1. Door de classList van het geselecteerde element aan te passen.
2. Door de innerHTML-eigenschap van het geselecteerde element te wijzigen.

Wat is de functie van document.getElementById()?

1. Het selecteren van meerdere HTML-elementen tegelijk.
2. Het selecteren van een HTML-element op basis van de id-attribuut.

Datatypes

Leerdoelen

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

LET OP!

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

Array

Array

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);

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
   

Ik weet nu hoe ik een array kan gebruiken

Ja

Deels

Nee

Hoe krijg je het aantal elementen in een array in JavaScript?

1. array.length;
2. array.size();
3. array.length();
4. array.count();

Hoe krijg ik het 5e element uit een array

1. array.get(5)
2. array[5]
3. array.4
4. array[4]

Hoe maak je een lege array in JavaScript?

1. var array = [];
2. var array = {};
3. var array = new Array();
4. var array = [1, 2, 3];

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 

Samenvatting

M4s Week 2 Les 2

Startklaar zitten.

STARTKLAAR!

Tellie in zakkie

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. 

Startklaar zitten.

Gestaltwetten

De wet van voor- en achtergrond

Startklaar zitten.

Gestaltwetten

De wet van eenvoud

Startklaar zitten.

Gestaltwetten

De wet van geslotenheid / ingevulde hiaat

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.

Startklaar zitten.

Afsluiting

Startklaar zitten.