JavaScript 7 - Valideren, variabelen, geldigheid, indexOf

• Informatica
• WO
• Studiejaar 4,5

                      JavaScript

Fundament

Kerndomein D. Programmeren

Ontwikkelen met JavaScript (JS)

Hoofdstuk 5.7 tot en met 5.9

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

Leerdoelen:

Je kunt na deze les (in JS):

• beschrijven wat valideren is
• op papier een variabele valideren
• uitleggen wat er gebeurt als je eigen functie dezelfde naam heeft als een standaard functie
• uitleggen wat er gebeurt als je eigen functie dezelfde naam heeft als een variabele in dezelfde code

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.

Schrijf een JS functie "optellen"
met 2 parameters die
deze optelt en teruggeeft

Valideren

Het controleren van gegevens op correctheid noemen we (net als bij Python) valideren

Voorbeelden van valideren zijn:

• is de variabele een getal? of juist een string?
• heeft de gebruiker een geldige e-mail ingevoerd?
• voldoet het gegeven aan de eisen? (bv tussen 1 en 10)

Valideren via if statement

Valideren kun je doen met diverse manieren, vaak een
if statement in combinatie met een functie of vergelijking:

• if ( a == NaN )
• if ( a > 10 && a < 20 )
• if ( !a )
• etc.

Valideren via typeof

Om het type te controleren gebruikt JS de typeof operator

let a = prompt("Geef antwoord!");

console.log(typeof a); // je krijgt string terug met het type

De mogelijke uitkomsten zijn ondermeer:

"undefined", "object", "boolean", "number", "string"

Valideren met while-loop

Door een while-loop te combineren met een prompt kun je de invoer herhaaldelijk valideren:

Try / Catch

In Python gebruikten we try/except

In JavaScript is dat (natuurlijk) iets anders: try / catch!

Schrijf JS waar gebruiker
leeftijd moet ingeven.
Valideer op ouder dan 18!

Valideren via .indexOf() 1/6

Via de methode .indexOf() kun je controleren of "iets" een bepaalde waarde bevat:

let haystack = "Hello world, welcome to the universe.";

let needle = "l";

let resultaat = haystack.indexOf(needle); // uitkomst: 2

De grote tekst noemen ze haystack, de zoekterm needle

Valideren via .indexOf() 2/6

Je kunt ook vanaf een bepaalde positie zoeken:

let tekst = "Hello world, welcome to the universe.";

let resultaat = tekst.indexOf("l", 5); // uitkomst: 9

Als de needle gevonden wordt, krijg je een positief getal terug met de index in de haystack

Belangrijk: niet gevonden? dan krijg je -1 terug!

Valideren via .indexOf() 3/6

Je kunt met .indexOf() dus ook kijken of iets een bepaald teken heeft (bijvoorbeeld een "@")

Dat kan handig zijn als je een e-mail wil valideren

Maar een e-mail moet aan meer eisen voldoen... toch?

Wat zijn eisen voor
een geldige e-mail?

Valideren via .indexOf() 4/6

links van de @ heet "lokaal" en rechts "domain"

• het e-mail bevat precies 1 "@"
• het e-mail bevat geen spaties
• lokaal heeft letters of nummers
• domain heeft minimaal 1 "."
• er mogen niet meerdere "." direct naast elkaar staan
• lokaal mag niet beginnen met een "."

Valideren via .indexOf() 5/6

Je merkt dat er meer eisen zijn en dat deze lastiger te beschrijven zijn dan je in eerste instantie zou denken

Een Nederlands telefoonnummer is beter te valideren... als je maar rekening houdt met spaties en koppeltekens ("-") is het niet meer dan 10 cijfers... 

hoe houden we rekening met spaties en koppeltekens?

Valideren via .indexOf() 6/6

via de methode .replace() vervangen we één karakter met een ander karakter... dus beter in dit geval is .replaceAll()

let nummer = "075-612 74 74";

nummer = nummer.replace("-", "").replace(" ","");

console.log(nummer) // "07561274 74"

Maak een JS functie om een
Nederlands telefoonnr te valideren
(hint: .length is een attribuut!)

function checktel(nummer) {

    nummer = nummer.replaceAll("-","").replaceAll(" ","");

    if (nummer.length != 10) {

        console.log(nummer + " : is NIET valide!");

    } else {

        console.log(nummer + " : is valide!");

    }

}

checktel("075-612 74 74"); // valide

checktel("075612 74745"); // niet valide

Code conventions? 1/2

Eerder hebben we het gehad over code conventions 

Als je een eigen functie maakt met de benaming van een standaard functie, dan wordt de standaard functie overschreven

Het gaat ook mis als je een eigen functie maakt met de benaming van een eerder gemaakte variabele!

Code conventions? 2/2

Je krijgt een foutmelding als je een eigen functie maakt met de benaming van een eerder gemaakte variabele: 

Deze code geeft dus een foutmelding:

Schrijf JS while loop
leeftijd van een gebruiker
Antwoord moet groter zijn dan 18

Leerdoelen:

Je kunt nu:

• beschrijven wat valideren is
  
• op papier een variabele valideren
  
• uitleggen wat er gebeurt als je eigen functie dezelfde naam heeft als een standaard functie
  
• uitleggen wat er gebeurt als je eigen functie dezelfde naam heeft als een variabele in dezelfde code

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