JavaScript 3 - variabelen: tekst samenvoegen, rekenen

                      JavaScript
1 / 23
next
Slide 1: Slide
InformaticaWOStudiejaar 4,5

This lesson contains 23 slides, with text slides.

time-iconLesson duration is: 45 min

Items in this lesson

                      JavaScript

Slide 1 - Slide

This item has no instructions

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


Slide 2 - Slide

This item has no instructions

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

Slide 3 - Slide

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

Slide 4 - Slide

This item has no instructions

Tekst of getal?
Number() geeft aan dat een variabele een getal is

Let op: de hoofdletter is hier erg belangrijk!

Slide 5 - Slide

This item has no instructions

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?

Slide 6 - Slide

This item has no instructions

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

Slide 7 - Slide

This item has no instructions

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!

Slide 8 - Slide

This item has no instructions

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?

Slide 9 - Slide

This item has no instructions

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

Slide 10 - Slide

This item has no instructions

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

Slide 11 - Slide

This item has no instructions

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)

Slide 12 - Slide

This item has no instructions

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?

Slide 13 - Slide

This item has no instructions

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!

Slide 14 - Slide

This item has no instructions

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>

Slide 15 - Slide

This item has no instructions

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

Slide 16 - Slide

This item has no instructions

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

Slide 17 - Slide

This item has no instructions

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

Slide 18 - Slide

This item has no instructions

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!

Slide 19 - Slide

This item has no instructions

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:

Slide 20 - Slide

This item has no instructions

Variabelen: datum en tijd
Er zijn ook een aantal standaard functies om een specifiek datum/tijd element te krijgen:
  • .getFullYear()
  • .getMonth()
  • .getDay()
  • .getDate()
  • etcetera...




Slide 21 - Slide

This item has no instructions

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

Slide 22 - Slide

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:

Slide 23 - Slide

This item has no instructions