P1 WEEK 2 H5S - INFORMATICA

• Informatica
• Middelbare school
• havo
• Leerjaar 4

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

We gaan een stukje refresh doen

https://codehs.com/go/A222C

Maak hier  javascript Basic en control structure 

DOM

DOM - Windows

Het hoogste niveau 

van dom is window

Via javascript kan je 

deze manipuleren 

bijvoorbeeld:

window.screen

browserscherm groter, kleiner

enz.

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

Open jouw lingo project in de online omgeving van visaul code 

Ga naar het mapje assets maak je een nieuwe map genaamd js

in mapje js maak je een bestand genaamd lingo.js

typ in het bestand lingo.js het volgende

window.alert("lingo.js heeft verbinding met HTML")

lingo.js koppelen aan HTML

Ga naar lingo.html zoek uit op het internet waar je de volgende regelcode moet plaatsen in jouw html code. 

HINT gebruik chatgpt. Hij kan jou kapot goed helpen

<script src="assets/js/lingo.js"></script>

ga daarna naar jouw map lingo op jouw laptop (niet in de code editor omgeving) en klik 2x lingo.html.

Wat zie jij nu gebeuren?

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

maximaal 15 minuten voor deze opdracht

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

maximaal 10 minuten voor deze opdracht

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

maximaal 15 minuten voor deze opdracht

Ik weet nu hoe ik d.m.v. DOM manipulatie html elementen kan beinvloeden

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>

Samenvatting

- Klassikaal doornemen

Week 2 les 2

Startklaar zitten.

STARTKLAAR!

Tellie in zakkie

Startklaar zitten.

Voorkennis activeren

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.

Variable & datatype

var 1a = "bomen" is deze variable goed geschreven?; 

var = "bomen" is deze variable goed geschreven?; 

var a = "bomen" is deze variable goed geschreven?; 

wat is een string; wat is een int; 

wat is een boolean; 

const a = "bomen" wat houdt const in?;

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

- kan een reeks aan data opslaan

- heeft indexen

- je kan de data toevoegen, wijzigen, verwijderen

- je kan de data ophalen

Array met woordjes

Download het bestand woordjes.js via teams en sla dit bestand op in de map assets/js

Zorg ervoor dat het bestand wordt ingeladen net boven lingo.js in html

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 voeg je een element toe aan het einde van een array in JavaScript?

1. array.push('element');
2. array.add('element');
3. array.insert('element');
4. array.append('element');

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

Klasikaal doornemen