JavaScript 3 - variabelen: tekst samenvoegen, rekenen

• Informatica
• WO
• Studiejaar 4,5

                      JavaScript

Fundament

Kerndomein D. Programmeren

Ontwikkelen met JavaScript (JS)

Hoofdstuk 2.7 tot en met 2.9

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

Leerdoelen:

• Je kunt uitleggen waarom weakly typed lastig kan zijn
• Je weet met welke functie je in JS een String kunt omzetten naar een getal
• Je kunt 5 verschillende reken-operatoren voor JS gebruiken en uitleggen wat ze doen
• Je kunt uitleggen hoe je de huidige datum en tijd in een variabele opslaat en hoe je het jaar, dag, en maand krijgt

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.

Tekst of getal?

Vorige les hebben we geleerd dat JS "weakly typed" is

Dat betekent dat - hoewel je met prompt() in JS standaard een string terugkrijgt (tekst dus), dat JS dat type soms aanpast afhankelijk van wat je ermee doet

Tekst of getal?

Number() geeft aan dat een variabele een getal is

Let op: de hoofdletter is hier erg belangrijk!

Opdracht # 1

1. Kopieer de code
   rechts
2. sla het op als:
   index3_1.htm
3. open het bestand met je browser
4. wat gebeurt er als je een getal invult?
5. wat gebeurt er bij number met een kleine letter?

Opdracht # 2

1. de code rechts
   is ongewijzigd
2. wat gebeurt er
   als je de blauwe
   ( ) weghaalt in de alert regel?
   

Opdracht # 2

1. de code rechts
   is ongewijzigd
2. wat gebeurt er
   als je de blauwe
   ( ) weghaalt in de alert regel?
   >> dan krijg je zoiets als "20232006"... een String! Waarom? Omdat "Je bent of wordt " + ervoor staat!

Opdracht # 2

1. de code rechts
   is ongewijzigd
2. wat gebeurt er
   als je de blauwe
   ( ) weghaalt in de alert regel?
3. wat gebeurt er als je in de prompt "abc" invult?
   
   

Opdracht # 2

1. de code rechts
   is ongewijzigd
2. wat gebeurt er
   als je de blauwe
   ( ) weghaalt in de alert regel?
3. wat gebeurt er als je in de prompt "abc" invult?
   >> dan komt er NAN te staan: Not A Number

Wat leren we hiervan?

Hiervan leren we dat wanneer we een nieuwe programmeertaal gaan leren we dat we:

• vaak onze code moeten testen, omdat sommige programmeertalen (zoals JS) niet alles even logisch doen
• ons moeten verdiepen in de eigenaardigheden van die programmeertaal

Variabelen: operators

Om te rekenen in JS gebruiken we - net als bij Python - operatoren (in het Engels: operators):

• + optellen
• - verminderen
• * vermenigvuldigen
• / delen
• % modulo (hiermee bereken je het restgetal)

Opdracht # 3

1. Kopieer de code
   rechts
2. sla het op als:
   index3_2.htm
3. open het bestand met je browser
4. Kloppen de uitkomsten van de alerts?

Variabelen: operators

Oplossing: Number() om de prompt() heen bij 3.2!

Omdat JS weakly typed is, moet je dus erg opletten! 

Het programma lijkt namelijk wel iets te doen, maar de uitkomst is niet wat je zou verwachten

Het is dus erg belangrijk dat je heel goed test!

Variabelen: input

We hebben tot nu gewerkt met prompt()

Maar een HTML form is eigenlijk handiger in veel gevallen! 

Hiervoor gebruiken we <form>, <input> en <button>

Opdracht # 4

1. Neem de code rechts
   over in een nieuw bestand
2. Op de ______ in de alert regel
   zorg je dat totaal - korting
3. Er wordt dus de nieuwe
   totaalprijs teruggegeven via een alert()
   Met totaal 200 en korting 10 moet uitkomst 190 zijn

Opdracht # 5

1. Maak een kopie van de vorige opdracht en verander het script gedeelte zodat de korting in de inputbox een percentage is geworden! 
   
2. Dat wil dus eigenlijk zeggen dat bij invoer van 10, de korting 10% is... hoe bereken je dat?
3. Geef de nieuwe totaalprijs terug via een alert()
   Met totaal 200 en korting 10 moet uitkomst 180 zijn

Variabelen: input

De code rechts
heeft twee knoppen
1 met de tag
<button
en de ander met 
<input type="submit"

Variabelen: datum en tijd

Met new Date() voegen we de datum en tijd van nu toe aan een variabele:

door code gelijk in <script> te zetten start het direct!

Variabelen: datum en tijd

Je kunt ook een specifieke dag en tijd opgeven, dat doe je via new Date("2000-01-31") (dus jjjj-mm-dd)

Ook kun je het met komma's
scheiden, zie w3schools:

Variabelen: datum en tijd

Er zijn ook een aantal standaard functies om een specifiek datum/tijd element te krijgen:

• .getFullYear()
• .getMonth()
• .getDay()
• .getDate()
• etcetera...

Leerdoelen:

• Je kunt uitleggen waarom weakly typed lastig kan zijn
• Je weet met welke functie je in JS een String kunt omzetten naar een getal
• Je kunt 5 verschillende reken-operatoren voor JS gebruiken en uitleggen wat ze doen
• Je kunt uitleggen hoe je de huidige datum en tijd in een variabele opslaat en hoe je het jaar, dag, en maand krijgt

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.

En nu?

Uitdagingen:

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