JavaScript 2 - variabelen

• Informatica
• WO
• Studiejaar 4,5

                      JavaScript

Fundament

Kerndomein D. Programmeren

Ontwikkelen met JavaScript (JS)

Hoofdstuk 2.3 tot en met 2.6

https://fundament-online.nl/leeromgeving/hoofdstuk.php?id=10560

Leerdoelen:

• 2 voorbeelden geven van code conventions
• beschrijven wat er gebeurt als je een user defined function maakt met de naam van een standaard functie 
• het doel uitleggen van commentaar in code
• beschrijven welke functie je gebruikt om een string om te zetten naar hoofdletters en welke naar kleine letters
• uitleggen hoe je variabelen combineert

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.

Code conventions

Bij programmeren moet je o.a. letten op:

• naamgeving functies en variabelen
• logische indeling functies
• gebruik commentaar

Opdracht # 1

1. Kopieer de code
   rechts
2. sla het op als:
   index2_1.htm
3. open het bestand met je browser
4. wat gebeurt er?

Opdracht # 2

1. Kopieer de code
   rechts
2. sla het op als:
   index2_2.htm
3. open het bestand met je browser
4. wat gebeurt er?

Variabelen: naamgeving

Een goede naam van een variabele en functie:

• overschrijft geen standaard functie
• beschrijft duidelijk voor een andere programmeur wat de variabele betekent of functie doet

Variabelen: logische indeling

Met logische indeling functies wordt bedoeld dat:

• je niet meerdere functies maakt die exact hetzelfde doen
• functies die bij elkaar horen, niet heel ver uit elkaar in de code staan

Variabelen: commentaar

Met goed commentaar geef je aan:

• wat een bepaalde functie doet
• waarom je bepaalde keuzes hebt gemaakt voor bepaalde code / variabele / functie -> je geeft context

Type variabelen

Een verschil tussen Python en JS is dat iets uitvoeren op een variabele het type van de variabele kan veranderen

Dit wordt wel "weakly typed" genoemd

Je kunt in JS variabelen achter elkaar zetten met +

Type variabelen

Bekijk de code

rechts ... 




wat denk je dat er gebeurt?

Type variabelen

Bij Python zou

je een fout

krijgen

...

maar niet bij

JavaScript!

Het is belangrijk dat je ziet wat JS doet met de variabele

Opdracht # 3

Dacht je dat dat raar was?

1. Kopieer de code 
2. sla het op als:
   index2_3.htm
3. open het bestand 
   met je browser
4. wat zie je?

Tekst aanpassen en camelCase

Waar we bij Python .upper() en .lower() hadden, heeft JS de functies .toUpperCase() en .toLowerCase()

(zoals de functies hier
zijn gespeld wordt
camelCase genoemd)

Welke functie van de code uit de vorige slide wordt gebruikt voor debuggen?

1. textContent
2. Console.log
3. Prompt

Beschrijf wat de
functie rechts
"doet"

Leerdoelen:

1. 2 voorbeelden geven van code conventions
   
2. beschrijven wat er gebeurt als je een user defined function maakt met de naam van een standaard functie
   
3. het doel uitleggen van commentaar in code
   
4. beschrijven welke functie je gebruikt om een string om te zetten naar hoofdletters en welke naar kleine letters
   
5. uitleggen hoe je variabelen combineert

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.

Over welk onderwerp
van deze les wil je
meer info?

En nu?

Uitdagingen:

a) met 1 knop tussen blauw
en rood toggelen
b) een dark-modus maakt
van deze code: