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 1/2

Na deze les kun je (voor JS):

• uitleggen waarom weakly typed lastig kan zijn
• een string omzetten naar een integer met een functie
• een integer omzetten naar een string met een methode
• 5 verschillende reken-operatoren gebruiken en uitleggen 
• met form en input en JS een berekening uitvoeren

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.

Leerdoelen 2/2

• 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) - JS dat type soms aanpast afhankelijk van wat je ermee doet... dat het type dus verandert zonder 

Tekst of getal?

Number() is een functie waarmee een variabele wordt omgezet naar een getal

.toString() is een methode waarmee de string van een variabele wordt gegeven

Let op: de hoofdletters zijn 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 letter 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?
   

wat er nu gebeurt is dat JS probeert de string van "Je bent ...." op te tellen bij 2024 - leeftijd

controleer met:

alert(2024 - leeftijd);

Opdracht # 3

1. maak een kopie van de vorige opdracht en vervang de alert regel door deze drie regels: 
   
   
   
2. sla het op als:
   index3_3.htm
3. wie ziet de logica van JS?

wat er nu gebeurt is dat JS probeert de string van "Je bent ...." op te tellen bij 2024 - leeftijd

controleer met:

alert(2024 - leeftijd);

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

1. Kopieer de code rechts
2. Sla het op als:
   index3_4.htm
   
3. Open het bestand met
   je browser en druk op de knop
4. Kloppen de uitkomsten van de alerts? Waarom (niet)?

Opdracht # 4

1. Kopieer de code rechts
2. Sla het op als:
   index3_4.htm
   
3. Open het bestand met
   je browser en druk op de knop
4. Kloppen de uitkomsten van de alerts? Waarom (niet)?
   de eerste niet: die plakt ze aan elkaar. Het zijn strings!

Variabelen: operators

Omdat JS weakly typed is, moet je erg opletten! 

Je code doet namelijk wel iets, maar de uitkomst is niet altijd wat je zou verwachten

Het is dus belangrijk dat je goed en vaak testen uitvoert!

Variabelen: input element

Voor input hebben we tot nu gewerkt met prompt()

Maar een HTML form is bij JS vaak handiger ! 

Hiervoor gebruiken we een combinatie van:
<form>, <input> en <button>

Opdracht # 5

1. Neem de code rechts
   over als index3_5.htm
2. Vul op de ______ in de alert
   regel de berekening in
   Er wordt daar dus de nieuwe
   totaalprijs teruggegeven via een alert()
   Met t=200 en k=10 moet uitkomst 190 zijn

Opdracht # 6

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 k=10, de korting 10% is... hoe bereken je dat? Welke operator?
3. Geef de nieuwe totaalprijs terug via een alert()
   Met t=200 en k=10 moet uitkomst 180 zijn

Antwoord opdracht 6

De berekening is

( tot * (
    ( 100 - kort ) / 100
   ) )

=200 * ((100-10)/100)
=200 * (90/100)

=200 * 0,9

Variabelen: datum en tijd

Met new Date() kennen we de huidige datumwaarde 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 methodes om een specifiek datum/tijd element te krijgen:

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

Leerdoelen 1/2

Nu kun je:

• uitleggen waarom weakly typed lastig kan zijn
  
• een string omzetten naar een integer met een functie
  
• een integer omzetten naar een string met een methode
  
• 5 verschillende reken-operatoren gebruiken en uitleggen
  
• met form en input en JS een berekening uitvoeren

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.

Leerdoelen 2/2

• 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.

Exit ticket

https://forms.gle/7J97NiRs9nqWjk5V6

En nu?

Uitdagingen:

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