Programming 2: Advanced

# Week 2

Maak een folder week-2 aan binnen de reeds aangemaakte folder tijdens de workshop “Start-to-ICT” in de module “Informatie en data geletterdheid (opens new window)”. Maak vervolgens de folders college (voorbeelden uit het hoorcollege) en exercises aan binnen de week-2 folder.

Mappen & bestanden

  • artevelde/
    • pgm-code/
      • pgm-2/
        • week-2/
          • exercises/
            • advanced_arrays.js
            • error_handling.js
            • laptops.js
            • rectangles.js
            • concerts.js
            • student.js
            • ghent_realtime_parking_garages/
            • random_user_me/

macOS

Het volledige pad naar de map (Eng. folder) ziet zo uit. («username» is jouw gebruikersmap.)

/Users/«username»/artevelde/pgm-code/pgm-2/week-2/exercises

Open de map week-2 in VS Code (opens new window).

Windows

Het volledige pad naar de map (Eng. folder) ziet zo uit. («username» is jouw gebruikersmap.)

C:\Users\«username»\artevelde\pgm-code\pgm-2\week-2\exercises

Open de map week-2 in VS Code (opens new window).

Tip

Schrijf zelf bij elke oefening voldoende commentaar, zodat je achteraf zelf nog weet wat de code doet.

# Laptops

Maak een bestand laptops.js aan.

Beschrijf een computer via een constructor function Laptop. De constructor bevat de volgende parameters:

  • naam (string)
  • resolution (string)
  • storage (string)
  • processor (string)

De waarde van deze parameters worden toegekend aan de corresponderende eigenschappen. De Laptop klasse bevat de methoden:

  • toString(): geeft een stringrepresentatie terug van een laptop, in dit geval de naam van de laptop
  • toCLIString(): geeft een string terug die als output kan dienen in de console

Maak twee instanties aan van de Laptop klasse via het new keyword. Spreek voor iedere instantie de toCLIString() methode aan en log het resultaat ervan in de commandline.

# Rectangles

Maak een bestand rectangles.js aan.

Beschrijf een rechthoek via een constructor function Rectangle. De constructor bevat de volgende parameters:

  • width (number)
  • height (number)

De waarde van deze parameters worden toegekend aan de corresponderende eigenschappen. De Rectangle klasse bevat de methoden:

  • calcPerimeter() berekent en geeft de omtrek of perimeter terug van de rechthoek
  • calcArea() berekent en geeft de oppervlakte terug van de rechthoek
  • toString(): geeft een stringrepresentatie terug van een rechthoek, in dit geval de breedte en hoogte van de rechthoek
  • toCLIString(): geeft een string terug die als output kan dienen in de console. Deze string is opgebouwd uit width, height, het resultaat uit calcPerimeter() en calcArea().

Maak twee instanties aan van de Rectangle klasse via het new keyword. Voeg deze instanties toe aan een array rectangles. Doorloop deze array en spreek voor ieder element de toCLIString() methode aan en log het resultaat ervan in de commandline.

# Concerts

Maak een bestand concerts.js aan.

Beschrijf socialmedia via een constructor function Social. De constructor bevat een parameter, namelijk een object bestaande uit de parameters {website, facebook, twitter, instagram}. De waarde van deze parameters ken je toe aan de corresponderende eigenschappen in de klasse.

Beschrijf een afbeelding via een constructor function Picture. De constructor bevat een parameter, namelijk een object bestaande uit de parameters {small, large = small}. De large parameter bevat een standaardwaarde, namelijk de waarde van de parameter small. De waarde van deze parameters ken je toe aan de corresponderende eigenschappen in de klasse.

Beschrijf een artiest via een constructor function Artist. De constructor bevat een parameter, namelijk een object bestaande uit de parameters {name, picture = null, social = null}. De waarde van deze parameters ken je toe aan de corresponderende eigenschappen in de klasse.

Beschrijf een plaats via een constructor function Place. De constructor bevat een parameter, namelijk een name. De waarde van deze parameters ken je toe aan de corresponderende eigenschappen in de klasse.

Beschrijf een schedule (tijdstip van en tot) via een constructor function Schedule. De constructor bevat de parameters from en to. De waarde van deze parameters ken je toe aan de corresponderende eigenschappen in de klasse.

Beschrijf een concert via een constructor function Concert. De constructor bevat een parameter, namelijk een object bestaande uit de parameters {id, artist, place, schedule}. De waarde van deze parameters ken je toe aan de corresponderende eigenschappen in de klasse.

Maak instanties aan van een Place klasse en bewaar deze instanties in een array places:

const places = [
  new Place({name: 'Main stage'}),
  ...
];
1
2
3
4

Maak een instantie aan van een Artist klasse:

let artist = new Artist({ name: 'Pearl Jam'});
1

Ken vervolgens een nieuwe instantie van de Social klasse toe aan de eigenschap social. Ken vervolgens een nieuwe instantie van de Picture klasse toe aan de eigenschap picture.

Maak een nieuwe instantie aan van de Concert klasse en geef waarden aan de argumenten id, artist, place en schedule. Log vervolgens het concert object naar de console.

# student.js JSON-stuff

Maak een bestand student.js aan.

Beschrijf studenten in een JSON String met de volgende eigenschappen voor een student:

  • voornaam (string)
  • familienaam (string)
  • studentenNummer (string)
  • cursussen (array)
    • cursusnaam (string)
    • studiepunten (number)
    • contacturen (number)

Valideer deze JSON String via JSONLint (opens new window).

Converteer deze JSON String naar een JavaScript object via de JSON.parse() methode. Log de output van dit object naar de console.

# advanced_arrays.js Advanced Array Methods

  • Maak een nieuwe Set met deze data: ['Jan', 'Piet', 'Joris', 'Corneel'], converteer de Set naar een array op twee manieren:

    • ingebouwde methode
    • destructuring

  • Loop over volgende array: ['Hamilton', 'Verstappen', 'Bottas'], gebruik array destructuring om niet alleen de waarde maar ook de index op te halen van ieder element. Je zal dus moeten loopen over een array iterator. Log voor ieder item de volgende booschap: Naam: ... Podiumplaats: ... met de naam en podiumplaatsingevuld.

  • Schrijf een functie die steeds de ‘n’-eerste elementen van de array zal teruggeven. Je hebt dus twee argumenten/parameters nodig, een array en ‘n’. Extra: Doe dit op twee verschillende manieren (met dus een andere methode)!

    Voorbeeld: getFirstElements([7, 9, 0, -2],3) geeft dit terug: [7, 9, 0].

  • Schrijf een functie genaamd renderArray die een array van ‘n’ aantal elementen kan maken met een statische waarde.

    Voorbeeld: renderArray(4, 11) geeft dit terug: [11,11,11,11]

  • Controleer met een functie genaamd allVaxxed() of iedere persoon wel gevaccineerd is. Log ‘Het feest kan doorgaan’ wanneer iedereen gevaccineerd is. Wanneer 1 iemand niet geprikt is log je ‘Iedereen moet thuisblijven’.

    Hier is een voorbeeld van het volk die je op je feestje hebt gevraagd:

    const people = [
  {
    name: 'Adriaan',
    vaxxed: true
  },
    {
    name: 'Kenneth',
    vaxxed: true
  }
]
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

  • Controleer met een functie of er minstens 1 iemand besmet is met het coronavirus.

    const people = [
  {
    name: 'Jan',
    covid: false
  },
    {
    name: 'Piet',
    covid: false
  },
    {
    name: 'Joris',
    covid: true
  },
    {
    name: 'Corneel',
    covid: false
  }
]
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18

  • In een applicatie krijg je als resultaat van een functie de volgende dataset terug:

    const cars = [
  {
    model: 'C2',
    brand: 'Citroën',
    availableColors: ['blue', 'gray', 'black']
  },
  {
    model: 'La Familia',
    brand: 'Ferrari',
    availableColors: ['red', 'yellow']
  },
  {
    model: 'Senna',
    brand: 'McLaren',
    availableColors: ['orange', 'black']
  },
]
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17

    Maak een functie die alle kleuren in een array zal opslaan. Verander nu je functie zodat enkel unieke waarden zullen worden opgeslagen.

  • Bereken het gemiddelde van de waardes in de array [1,2,3,4,5].

# error_handling.js Foutafhandeling

Proficiat! Je bent aangenomen als developer bij SpaceX! De persoon die je vervangt was een geheime spion van Blue Origin en heeft allemaal bugs in de code geschreven.

Jouw taak is om de code te debuggen en de shuttle met succes af te vuren. Het leven van de astronauten ligt in jouw handen. Veel succes!

  1. Voer de onderstaande code uit, lees de foutmelding en los de syntax error vervolgens op.. 
let readyToLaunch = false;
let fuel = 17000;

if (fuel >= 20000 {
   console.log('Fuel level cleared.');
   readyToLaunch = true;
} else {
   console.log('WARNING: Insufficient fuel!');
   readyToLaunch = false;
}
1
2
3
4
5
6
7
8
9
10
  1. Voer de onderstaande code uit, lees de foutmelding en los de syntax errors vervolgens op..
let launchReady = false;
let crewStatus = true;
let computerStatus = 'green';

if (crewStatus &&& computerStatus === 'green') {
   console.log('Crew & computer cleared.');
   launchReady = true;
} else {
   console.log('WARNING: Crew or computer not ready!');
   launchReady = false;
}

if (launchReady) {
   console.log(("10, 9, 8, 7, 6, 5, 4, 3, 2, 1...");
   console.log("Fed parrot...");
   console.log("Ignition...");
   console.log("Liftoff!");
} else {
   console.log("Launch scrubbed.");
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Tip

Er wordt slechts één fout tegelijk getoond.Los dat ene probleem op en voer de code opnieuw uit om de code te controleren. Vermijd meerdere problemen tegelijk op te lossen.

  1. Voer de onderstaande code uit, lees de foutmelding en los de runtime errors vervolgens op.. 
let launchReady = false;
let fuelLevel = 17000;

if (fuellevel >= 20000) {
   console.log('Fuel level cleared.');
   launchReady = true;
} else {
   console.log('WARNING: Insufficient fuel!');
   launchReady = false;
}
1
2
3
4
5
6
7
8
9
10
  1. Voer de onderstaande code uit, lees de foutmelding en los de runtime errors vervolgens op..
let launchReady = false;
let fuelLevel = 27000;

if (fuelLevel >= 20000) {
   console.log('Fuel level cleared.');
   launchReady = true;
} else {
   console.log('WARNING: Insufficient fuel!');
   launchReady = false;
}

if (launchReady) {
   console.log("10, 9, 8...");
   console.log("Fed parrot...");
   console.log("6, 5, 4...");
   console.log("Ignition...");
   consoul.log("3, 2, 1...");
   console.log("Liftoff!");
} else {
   console.log("Launch scrubbed.");
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  1. De syntax en runtime errors lijken opgelost. Maar er zitten nog heel moeilijke bugs in, namelijk logische bugs. De code lijkt te werken maar je krijgt niet het gewenste resultaat.

5.1. Voer de onderstaande code eerst uit:

let launchReady = false;
let fuelLevel = 17000;
let crewStatus = true;
let computerStatus = 'green';

if (fuelLevel >= 20000) {
  console.log('Fuel level cleared.');
  launchReady = true;
} else {
  console.log('WARNING: Insufficient fuel!');
  launchReady = false;
}

if (crewStatus && computerStatus === 'green'){
  console.log('Crew & computer cleared.');
  launchReady = true;
} else {
  console.log('WARNING: Crew or computer not ready!');
  launchReady = false;
}

if (launchReady) {
  console.log('10, 9, 8, 7, 6, 5, 4, 3, 2, 1...');
  console.log('Liftoff!');
} else {
  console.log('Launch scrubbed.');
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Zal de shuttle gelanceerd worden? En was dit de bedoeling? Waarom wel of waarom niet?

Wat gebeurt er als er niet genoeg brandstof is maar de crew wel klaar staat? Los de code op zodat je een veilige rit kan verzekeren!

# Open Data Portaal Stad Gent

Ontdek de dataportaal van Stad Gent (opens new window) door 5 datasets (end-points) toe te voegen in een collection binnen postman.

JSONPlaceholder

# JSONPlaceholder: fun with an API

Ontdek de JSONPlaceholder (opens new window) service door alle end-points toe te voegen in een collection binnen postman.

JSONPlaceholder

Tip

# Real time bezetting parkeergarages Gent API

API-endpoint

Maak een map (Eng. folder) aan met een naam die een indicatie geeft aan de webapplicatie, bijv.: ghent_realtime_parking_garages. De map bevat de volgende structuur:

Mappen & bestanden

  • ghent_realtime_parking_garages/ # hoofdmap (folder)
    • js/ # map (folder)
      • main.js # bestand (file)
    • css/ # map (folder)
      • main.css # bestand (file)
    • index.html # bestand (file)

De HTML pagina ziet er als volgt uit:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Real time bezetting parkeergarages Gent | Programming 2: Front-End Advanced | Associate Degree in Computer Programming</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <section class="parkings">
        <ul class="parking-list">
        </ul>
    </section>
    <script src="js/main.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

1. Maap een app object met de methoden initialize(), cacheElements(), getDataFromGhentRealtimePargingStatesAPIEndpoint(), updateGhentRealtimePargingStatesUI().

2. Cache het element met klassenaam parking-list in de variabele $parkingList via de methode cacheElements().

3. Laad de externe data (JSON) API-endpoint https://data.stad.gent/api/records/1.0/search/?dataset=bezetting-parkeergarages-real-time&q=&facet=description via de methode getDataFromGhentRealtimePargingStatesAPIEndpoint().

4. Update de gebruikersinterface op basis van de ingeladen data via de methode updateGhentRealtimePargingStatesUI().

Kleuren

  • Als het aantal vrije plaatsen t.o.v. het totaal aantal beschikbare plaatsen kleiner is dan 15% dan is het status danger weergegeven met rode kleurcode.
  • Als het aantal vrije plaatsen t.o.v. het totaal aantal beschikbare plaatsen grooter of gelijk aan 15% is en kleiner dan 60% dan is het status warning weergegeven met oranje kleurcode.
  • Als het aantal vrije plaatsen t.o.v. het totaal aantal beschikbare plaatsen grooter of gelijk aan 60% dan is het status success weergegeven met groene kleurcode.

Mogelijke output in webpagina:

Output Real time bezetting parkeergarages

Uitbreidingen:

  • Laad om de minuut opnieuw de data.
  • Vergelijk de nieuwe toestand van de parkeergarages met de oude toestand.
  • Stijgt het aantal vrije plaatsen, toon dat een up-arrow sign.
  • Blijft het aantal vrije plaatsen gelijk, toon dan een equal sign.
  • Daalt het aantal vrije plaatsen, toon dan een down-arrow sign.

# RandomUserMe API

API-endpoint

Maak een map (Eng. folder) aan met een naam die een indicatie geeft aan de webapplicatie, bijv.: random_user_me. De map bevat de volgende structuur:

Mappen & bestanden

  • random_user_me/ # hoofdmap (folder)
    • js/ # map (folder)
      • main.js # bestand (file)
    • css/ # map (folder)
      • main.css # bestand (file)
    • index.html # bestand (file)

De HTML pagina ziet er als volgt uit:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Real time bezetting parkeergarages Gent | Programming 2: Front-End Advanced | Associate Degree in Computer Programming</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <section class="users">
        <ul class="user-list">
        </ul>
    </section>
    <script src="js/main.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

1. Maap een app object met de methoden initialize(), cacheElements(), getDataFromRandomUserMeAPIEndpoint(), updateRandomUserMeUI().

2. Cache het element met klassenaam user-list in de variabele $userList via de methode cacheElements().

3. Laad de externe data (JSON) API-endpoint https://randomuser.me/api/?results=100 via de methode getDataFromRandomUserMeAPIEndpoint().

4. Update de gebruikersinterface op basis van de ingeladen data via de methode updateRandomUserMeUI().

Mogelijke output in webpagina: Vrije creatieve interpretatie.

Week 1 Week 3
© 2025 Arteveldehogeschool Laatst bijgewerkt: 27/11/2022 14:39:05