Labo 16
Zorg dat je de volgende folder structuur volgt:
webtechnologie/
├─ labo-x/
│ ├─ oefening-01/
│ │ ├─ index.html
│ │ ├─ assets/
│ │ │ ├─ image-1.jpg
│ │ │ ├─ data.json
│ │ ├─ css/
│ │ │ ├─ reset.css
│ │ │ ├─ style.css
│ │ ├─ js/
│ │ │ ├─ script.js
│ ├─ oefening-02/
│ ├─ oefening-n/
├─ labo-y/
├─ labo-z/ Gebruik steeds JS modules om globale variabelen te vermijden (
<script type="module" src="./path/to/script.js" defer></script>)Zet je Javascript file steeds in strict mode (
"use strict");Volg de Coding Guidelines
oefening 1: recept
leerdoelen
objecten aanmaken
dot notatie gebruiken
lussen
functionele analyse
Het programma berekent de totaalprijs van een gegeven recept.
technische analyse
Je maakt een object. Dit bevat een
naam
beschrijving
personen
ingredienten
de ingredienten bevatten een:
naam
hoeveelheid (bv "1 stuk", "1 kg")
prijs
Maak het object aan met zelfgekozen values en ken deze toe aan aan variabele spaghetti.
Print de naam van dit gerecht af (via de dot-notatie) gevolgd door de totaalprijs van alle ingredienten.
voorbeeldinteractie
oefening 2: persoon
leerdoelen
objecten aanmaken
dot-notatie gebruiken
gebruik/uitlezen van JSON
schrijven van functies
functionele analyse
Lees een json-bestand in en print daar enkele waardes van op het scherm
technische analyse
Maak een person.json bestand aan met volgende data:
{
"firstname": "Jurgen",
"lastname": "Vervoort",
"age": 27,
"city": "Heist-op-den-Berg",
"street": "Bergstraat",
"number": "17c",
"postal": 2220,
"hobbies": ["voetbal", "tafeltennis", "vissen"]
}Lees het person.json bestand in
Maak een eerste functie printFullName() dat het ingelezen object als parameter ontvangt en de volledige naam van de persoon uitprint.
Maak een tweede functie printHobbies() dat het ingelezen object als parameter ontvangt en de hobby's van de persoon oplijst.
voorbeeldinteractie
oefening 3: todo's
leerdoelen
objecten aanmaken
dot-notatie gebruiken
gebruik/uitlezen van JSON
schrijven van functies
werken met arrays van objecten
voorbereiding
functionele analyse
Lees todos.json uit en haal er enkel de reeds voltooide todo's uit.
technische analyse
Maak een array van Todos door het bestand todos.json uit te lezen.
Schrijf een functie getCompleted() dat als parameter je array ontvangt. Zorg ervoor dat de functie een array teruggeeft met enkel de voltooide todo's.
Toon de voltooide todo's op de website in een lijst.
voorbeeldinteractie
oefening 4: dieren
leerdoelen
objecten aanmaken
dot-notatie gebruiken
gebruik/uitlezen van JSON
werken met gebruikersinteractie
werken met arrays van objecten
voorbereiding
functionele analyse
Toon de gebruiker een lijst van dieren. Nadat de gebruiker een dier kiest wordt wat info betreffende dat gekozen dier weergegeven.
technische analyse
Maak een array van dieren animalData door het bestand dieren.json in te lezen d.m.v. import.
Maak een functie getAnimalsList() dat de animal[] als parameter ontvangt en een string[] van alle dierennamen teruggeeft.
Nu kan je de gebruiker laten kiezen uit 1 van de dieren. Gebruik de arraypositie om de info op te vragen van het gekozen dier.
voorbeeldinteractie
Last updated