Clientside-scripting Hoofdstuk 4 Controlestructuren PDF

CLIENTSIDE-SCRIPTING | HOOFDSTUK 4 CONTROLESTRUCTUREN W. VAN BEECK OPLEIDING WEBONTWIKKELAAR LEERKRACHT WIDO VAN BEECK MODULE CLIENTSIDE-SCRIPTING 1 Leerstofoverzicht Heb je een vraag of opmerkinge...

CLIENTSIDE-SCRIPTING | HOOFDSTUK 4 CONTROLESTRUCTUREN W. VAN BEECK OPLEIDING WEBONTWIKKELAAR LEERKRACHT WIDO VAN BEECK MODULE CLIENTSIDE-SCRIPTING 1 Leerstofoverzicht Heb je een vraag of opmerkingen over de leerstof die in deze leerstofbundel aan bod komt? Aarzel dan niet om contact met de leerkracht op te nemen via de rubriek ‘hulp nodig’ op Moodle. WAT MOET JE KENNEN? Herhaald? 1 De cursist kan het nut van een controlestructuur in eigen woorden toelichten. 2 De cursist kent de verschillende soorten controlestructuren. 3 De cursist is er zich bewust van het belang van de volgorde waarin een if/else- if/else structuur wordt uitgewerkt. 4 De cursist kent het volledige aanbod aan vergelijkingsoperatoren (==, ===, !=, !==, >, =, = 99 false 14 is niet groter of gelijk aan 99. 3 >= 2 true 3 is groter dan 2. VERGELIJKINGSOPERATOREN OEFENING 7 Niveau 5 min Afgewerkt? 1. Maak de online oefening ‘vergelijkingsoperatoren’ via Moodle. Deze oefening verbetert zichzelf. 16 CLIENTSIDE-SCRIPTING CVO VOLT © 2024  OPLEIDING WEBONTWIKKELAAR LEERKRACHT WIDO VAN BEECK MODULE CLIENTSIDE-SCRIPTING PRETPARKATTRACTIE [DEEL 1] OEFENING 8 Niveau 5 min Afgewerkt? 1. Open het bestand ‘theme_park_ride.html’ in de webeditor. 2. Werk in dit bestand een controlestructuur uit die nagaat of de grootte van de pretparkbezoeker groter is dan de maximaal toegestane grootte van de attractie. Indien dit het geval is, dan moet de variabele access de waarde false toegewezen krijgen en moet de melding “U voldoet niet aan de hoogtevereisten van deze attractie.” in de browser verschijnen. 3. Test het script door de waarde van visitorHeight te wijzigen. Bewaar het script. Bekijk de verbetering van deze oefening. 5.2 Logische operatoren Logische operatoren maken het mogelijk om meerdere vergelijkingen in één if-voorwaarde op te nemen. ALGEMEEN OVERZICHT LOGISCHE OPERATOREN OPERATOR GEBRUIK && en (beide vergelijkingen moeten waar zijn) || of (één van de twee vergelijkingen moet waar zijn) ! niet (keert de waarheidswaarde van de expressie om) VOORBEELD EN (&&) UITKOMST TOELICHTING 85 6 && 4 == 2 false De tweede vergelijking is onwaar. VOORBEELD OF (||) UITKOMST TOELICHTING 85 6 || 4 == 2 true De eerste vergelijking is waar. 44 === 48 || "Anita" != "Anita" false Beide voorwaarden zijn onwaar. 17 CLIENTSIDE-SCRIPTING CVO VOLT © 2024 OPLEIDING WEBONTWIKKELAAR LEERKRACHT WIDO VAN BEECK MODULE CLIENTSIDE-SCRIPTING VOORBEELD NIET (!) UITKOMST TOELICHTING let age = 43; Door het uitroepteken voor de isNaN() if(!isNaN(age)){ functie wordt er gecontroleerd of de true variabele age een numerieke waarde bevat } i.p.v. geen numerieke waarde. LOGISCHE OPERATOREN OEFENING 9 Niveau 5 min Afgewerkt? 1. Maak de online oefening ‘logische operatoren’ via Moodle. Deze oefening verbetert zichzelf. PRETPARKATTRACTIE [DEEL 2] OEFENING 9 Niveau 10 min Afgewerkt? 1. Open opnieuw het bestand ‘theme_park_ride.html’ in de webeditor. 2. Breid de reeds aanwezige controlestructuur, meer bepaald de reeds uitgewerkte voorwaarde, uit door in de ook te controleren of de grootte van de bezoeker lager ligt dan de minimaal toegestane grootte. Indien dit het geval is moet dezelfde foutmelding verschijnen als wanneer de attractiebezoeker te groot zou zijn. 3. Test en bewaar het script. Bekijk de verbetering van deze oefening. MILITAIRE SCHOOL [DEEL 1] OEFENING 10 Niveau 10 min Afgewerkt? 1. Werk een nieuw HTML-bestand uit onder de naam ‘military_school.html’. Deze applicatie zal moeten nagaan of een kandidaat militair toegang mag krijgen tot de militaire school. 2. Werk een variabele uit waarin een random getal tussen 12 en 80 wordt gegenereerd (zie hoofdstuk 3). Dit random getal representeert de leeftijd van een kandidaat militair. 3. Toon de gegenereerde leeftijd in de console zodat je zelf kan nagaan welke random leeftijd er gegenereerd werd. 18 CLIENTSIDE-SCRIPTING CVO VOLT © 2024  OPLEIDING WEBONTWIKKELAAR LEERKRACHT WIDO VAN BEECK MODULE CLIENTSIDE-SCRIPTING 4. Werk nog een variabele uit onder de naam “compulsory_education_completed” (leerplicht voltooid) en geef deze variabele een booleanwaarde naar keuze. 5. Werk een if-structuur uit die nagaat of de militair, die zich kandidaat stelt, tussen de 17 (incl.) en 33 (incl.) jaar oud is én aan de leerplicht voldaan heeft. Indien dit het geval is, moet de melding “Je kan je kandidaat stellen voor de opleiding ‘officier’” in de browser verschijnen. 6. Test en bewaar het script. Bekijk de verbetering van deze oefening. 6 Else Een if-structuur kan worden uitgebreid met een else blok. De codeblok wordt enkel uitgevoerd wanneer de if-voorwaarde onwaar (false) is. SYNTAX IF-STRUCTUUR 1 if(voorwaarde){ 2 // code die moet worden uitgevoerd wanneer de voorwaarde waar (true) is 3 } else { 4 // code die moet worden uitgevoerd wanneer de voorwaarde onwaar (false) is 5 } VOORBEELD IF-STRUCTUUR MET BOOLEAN TOELICHTING 1 let married = false; // boolean De if-structuur controleert of de variabele married de waarde true 2 if(married){ bevat. Deze voorwaarde is in dit voorbeeld onwaar. De if-codeblok 3 document.write("Proficiat met jullie huwelijk!"); wordt genegeerd en de else- 4 } else { codeblok wordt uitgevoerd. 5 document.write("Hebben jullie trouwplannen?"); 6 } 19 CLIENTSIDE-SCRIPTING CVO VOLT © 2024 OPLEIDING WEBONTWIKKELAAR LEERKRACHT WIDO VAN BEECK MODULE CLIENTSIDE-SCRIPTING TOEGANG TOT DE WEBSITE [DEEL 2] OEFENING 11 Niveau 5 min Afgewerkt? 1. Open opnieuw het bestand ‘permission.html’ in de webeditor. 2. Werk de if-structuur verder uit met een else-structuur zodat ook de melding “U beschikt niet over voldoende rechten om toegang tot deze pagina te krijgen.” in de browser kan verschijnen wanneer dit nodig zou zijn. 3. Test het script uit bewaar het bestand. Bekijk de verbetering van deze oefening. PRETPARKATTRACTIE [DEEL 3] OEFENING 12 Niveau 5 min Afgewerkt? 1. Open opnieuw het bestand ‘theme_park_ride.html’. 2. Indien de bezoeker wel aan de hoogtevereisten voldoet, moet de variabele access de waarde true krijgen en moet de melding “Gelieve plaats te nemen.” In de browser verschijnen. 3. Test en bewaar het script. Bekijk de verbetering van deze oefening. MILITAIRE SCHOOL [DEEL 2] OEFENING 13 Niveau 5 min Afgewerkt? 1. Open opnieuw het bestand ‘military_school.html’. 2. Werk de controlestructuur verder uit zodat ook de melding “Je voldoet niet aan de eisen om een opleiding op onze school te volgen.” in de browser kan verschijnen. 3. Test en bewaar het script. Bekijk de verbetering van deze oefening. 20 CLIENTSIDE-SCRIPTING CVO VOLT © 2024  OPLEIDING WEBONTWIKKELAAR LEERKRACHT WIDO VAN BEECK MODULE CLIENTSIDE-SCRIPTING 7 Else if Via een else if kunnen er meerdere voorwaarden binnen een if-structuur worden getoetst. SYNTAX ELSE IF 1 if(voorwaarde){ 2 // code die moet worden uitgevoerd wanneer de voorwaarde waar (true) is 3 } else if (voorwaarde) { 4 // code die moet worden uitgevoerd wanneer de eerste voorwaarde onwaar (false) is en deze voorwaarde waar is 5 } else { 6 // code die moet worden uitgevoerd wanneer er geen van de bovenstaande voorwaarden waar is 7 } VOORBEELD ELSE IF 1 let age = 16; // number 2 if(age == 17){ 3 document.write("Je kan een theoretisch rijbewijs behalen"); 4 } else if(age > 17) { 5 document.write("Je mag je theoretisch en praktisch rijbewijs behalen."); 6 } else { 7 document.write("Je bent nog te jong voor een rijbewijs."); 8 } Er staat geen limiet op het aantal else-if voorwaarden die in een if-structuur kunnen worden opgenomen. 21 CLIENTSIDE-SCRIPTING CVO VOLT © 2024 OPLEIDING WEBONTWIKKELAAR LEERKRACHT WIDO VAN BEECK MODULE CLIENTSIDE-SCRIPTING SYNTAX MEERDERE ELSE IF VOORWAARDEN 1 if(voorwaarde){ 2 // code die moet worden uitgevoerd wanneer de voorwaarde waar (true) is 3 } else if (voorwaarde) { 4 // code die moet worden uitgevoerd wanneer de eerste voorwaarde onwaar (false) is en deze voorwaarde waar is 5 } else if (voorwaarde) { 6 // code die moet worden uitgevoerd wanneer de eerste en tweede voorwaarde onwaar (false) is en deze voorwaarde waar is 7 } else { 8 // code die moet worden uitgevoerd wanneer er geen van de bovenstaande voorwaarden waar is 9 } VOORBEELD MEERDERE ELSE IF VOORWAARDEN 1 let number = 10; // number 2 if(number < 5){ 3 document.write("Het getal is kleiner dan 5."); 4 } else if(number < 10) { 5 document.write("Het getal is groter dan 4, maar kleiner dan 10."); 6 } else if(number < 15) { 7 document.write("Het getal is groter dan 9, maar kleiner dan 15."); 8 } else { 9 document.write("Het getal is groter dan 14"); 10 } Houd er rekening mee dat de volgorde waarin de voorwaarden worden getoetst van groot belang kan zijn. If-structuren kunnen zeer complex worden. Maak gebruik van tabulaties om het script overzichtelijk te houden. 22 CLIENTSIDE-SCRIPTING CVO VOLT © 2024 OPLEIDING WEBONTWIKKELAAR LEERKRACHT WIDO VAN BEECK MODULE CLIENTSIDE-SCRIPTING DE OVERSCHRIJVING OEFENING 14 Niveau 20 min Afgewerkt? 1. Werk een nieuw HTML-bestand uit onder de naam ‘money_transfer.html’. 2. Werk een variabele uit met daarin een munteenheidsymbool. Kies uit ‘€’ (euro), ‘$’ (dollar) of ‘£’ (Britse pond). 3. Werk nog een variabele uit onder de naam ‘saldo’ met daarin een integer getal naar keuze. 4. Werk een controlestructuur uit die controleert of de variabele met het munteenheidsymbool slechts 1 teken bevat (Tip: maak voor deze controle gebruik van de.length eigenschap) én controleert of het geldbedrag numeriek is. Indien dit niet het geval is, moet de melding “Gelieve alle waarden correct op te geven.” in de browser verschijnen. 5. Indien alle waarden correct opgegeven werden moet de volgende zin in de browser worden getoond: Structuur Het bedrag van [geldbedrag] [volledige naam munteenheid] werd overgeschreven. Voorbeeld Het bedrag van 143 dollar werd overgeschreven. Maak gebruik van een geneste switch (een switch die in de if/else structuur wordt verwerkt) om het munteenheidsymbool om te zetten naar de volledige naam van de munteenheid (bv. $ -> dollar). Indien de munteenheid niet herkend wordt, moet er standaard ‘euro’ in de resultaatzin verschijnen. 6. Test en bewaar het script. Bekijk de verbetering van deze oefening. SCHRIKKELJAREN OEFENING 15 Niveau 20 min Afgewerkt? 1. Werk een nieuwe HTML-bestand uit onder de naam ‘leap_years.html’. 2. Werk een variabele uit waarin je het huidige jaar opvraagt. Tip. 23 CLIENTSIDE-SCRIPTING CVO VOLT © 2024 OPLEIDING WEBONTWIKKELAAR LEERKRACHT WIDO VAN BEECK MODULE CLIENTSIDE-SCRIPTING 3. Werk een if-structuur uit die nagaat of het huidige jaar een schrikkeljaar is. Een jaar wordt als schrikkeljaar beschouwd wanneer deze deelbaar is door 4, maar niet door 100, maar wel door 400. Tip: werk met een modulus. 4. Toon in de browser het bericht “[huidig jaar] is [een/geen] schrikkeljaar.”. 5. Zie er op toe dat het script zo efficiënt mogelijk wordt uitgewerkt. 6. Test en bewaar het script. Bekijk de verbetering van deze oefening. 8 Inleveren 1. Zip de map met de uitgewerkte oefeningen (hoofdstuk_4) en lever deze in onder de daarvoor voorziene opdracht op Moodle. 2. De leerkracht ontvang automatisch een bericht van je inzending en tracht je oefeningen binnen de 5 werkdagen na te kijken. 3. Nadat je oefeningen werden nagekeken, krijg je toegang tot het volgende hoofdstuk. De leerkracht breng jou hier via mail van de op de hoogte. 24 CLIENTSIDE-SCRIPTING CVO VOLT © 2024