Programming 2: Advanced

# Week 3

Maak een folder week-3 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-3 folder.

Mappen & bestanden

  • artevelde/
    • pgm-code/ - pgm-2/ - week-3/ - exercises/ - cats_as_a_service/ - countries/ - emojis/ - gdm_gent_cases/ - harry_potter/ - youtube_search/ :::

macOS

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

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

Open de map week-3 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-3\exercises

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

Tip

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

# Spreading

  • Gegeven een array let fruits = ['Apple', 'Orange', 'Banana']. Maak een kopie van de fruits array m.b.v. de spread operator. Bewaar deze kopie in de variabele copiedFruits. Vergelijk tenslotte of de fruits en copiedFruits gelijk zijn aan elkaar.

  • Gegeven de volgende code:

let arr1 = ["A", "B", "C"];
let arr2 = ["X", "Y", "Z"];
1
2

Combineer arr1 en arr2 tot één array m.b.v. van de spread operator. Log het resultaat hiervan naar de console.

  • Gegeven de volgende code:
let fruits = ["Apple", "Orange", "Banana"];
let newFruits = ["Cherry", "Melon"];
1
2

Voeg de inhoud van de newFruits array toe als inhoud van de fruits array. Gebruik vervolgens een for lus om alle elementen uit de fruits array op te lijsten.

  • Gegeven de volgende code:
const obj1 = { id: 101, name: "John Doe" };
const obj2 = { age: 28, city: "Ghent" };
1
2

Combineer beide objecten obj1 en obj2 tot één object bewaard in een variabele employee. Log het resultaat hiervan naar de console.

  • Gegeven de volgende code:
let obj1 = { id: 101, name: "John Doe" };
const obj2 = { age: 28, city: "Ghent" };
1
2

Combineer beide objecten obj1 en obj2 tot één object bewaard in een variabele obj1. Log het resultaat hiervan naar de console.

  • Maak een functie genaamd combineTwoArrays(), die twee arrays als argumenten verwacht. In de functie met twee parameters maak je gebruik van de spread operator om er 1 array van te maken.

  • Maak een functie onlyUniques(), deze functie kan een ongelimiteerd aantal argumenten ontvangen, zowel strings als nummers. Log een array met enkel unieke waardes. Gebruik hiervoor een keyed collection die we net geleerd hebben.

  • Maak een functie genaamd combineAllArrays(), deze functie kan een ongelimiteerd aantal arrays ontvangen. Return éen array met de waardes van de doorgegeven arrays.
  • Schrijf een functie genaamd add(), deze functie kan een niet-gespecifieerd aantal argumenten ontvangen, bv. add(1,5,6). In de functie log je de hoeveelheid argumenten.
  • Schrijf een functie genaamd: addOnlyNumbers(), deze functie kan een ongelimiteerd aantal argumenten ontvangen, zowel strings als nummers, bv. addOnlyNumbers(1,5,6, 'cat', 'dog', 3). Log de volgende zin Er waren ... argumenten, de som van de getallen is ... wanneer je de functie uitvoert.

Tip

reduce()

# Destructuring

  • Herschrijf onderstaande code met destructering zodat je niet lijn-per-lijn iedere variabele moet aanmaken.
let item = ["Egg", 0.25, 12];

const name = item[0];
const price = item[1];
const quantity = item[3];

console.log(`Item: ${name}, Quantity: ${quantity}, Price: ${price}`);
1
2
3
4
5
6
7
  • Herschrijf onderstaande code zodat elk nummer overeenkomt met de correcte variabele.
let numbers = [3, 5, 4, 2, 6, 1];
const [one, two, three, four, five, six] = numbers;

console.log(
  `One: ${one}, Two: ${two}, Three: ${three}, Four: ${four}, Five: ${five}, Six: ${six}`
);
1
2
3
4
5
6
  • Herschrijf onderstaande code met destructering zodat je niet lijn-per-lijn iedere variabele moet aanmaken.
let person = [12, "Chris", "Owen"];

let firstName = person[1];
let lastName = person[2];
let age = person[10];

console.log(`Person - Age: ${age}, Name: ${firstName} ${lastName}`);
1
2
3
4
5
6
7
  • Herschrijf onderstaande code met destructering zodat je niet lijn-per-lijn iedere variabele moet aanmaken. Zorg dat je geen ongebruikte variabelen hebt.
let person = ["Chris", 12, "Owen"];

let firstName = person[0];
let lastName = person[2];

console.log(`Person - Name: ${firstName} ${lastName}`);
1
2
3
4
5
6
  • Maak een functie displayName() die een persoon object als argument verwacht. In de functie log je de voor- en achternaam van de persoon. Gebruik object destructuring om de variabelen te maken in de functie.

Dit is de persoon:

const person = {
  first: "Elon",
  last: "Musk",
  twitter: "@elonmusk",
  company: "Space X",
};
1
2
3
4
5
6
  • Maak een functie genaamd calculateSalesTotals(), die functie returned informatie over alle verkopen samen. Je krijgt namelijk de totaal betaalde geldsom én de volledige korting wanneer je deze functie uitvoert.

Dit zijn je sales:

const sales = [
  { item: "PS4 Pro", sold: 3, original: 399.99 },
  { item: "Xbox One X", sold: 1, original: 499.99, discount: 0.1 },
  { item: "Nintendo Switch", sold: 4, original: 299.99 },
  { item: "PS2 Console", sold: 1, original: 299.99, discount: 0.8 },
  { item: "Nintendo 64", sold: 2, original: 199.99, discount: 0.65 },
];
1
2
3
4
5
6
7

In je functie gebruik je object destructuring om de keys uit objecten te halen. Geef ook een standaard korting van 0.

Tip

Sale: originele prijs - (orginele prijs _ korting) Totaal: originele prijs _ verkochte units

# Books

Maak een bestand books.js aan.

Beschrijf een boek via een object literal (Book) met de volgende eigenschappen voor een boek:

  • title (string)
  • author (string)
  • isbnNummer (string)
  • tags (array van strings)

Een boek object bevat daarnaast ook de getInfo() en listTags() functies.

  • De getInfo() functie zal de naam van het boek teruggeven en de auteur. Als we dit loggen krijgen we bijvoorbeeld:
De Steen der Wijzen - J.K. Rowling
1
  • De listTags() functie zal de tags genummerd weergeven op een nieuwe lijn. Als we dit loggen krijgen we bijvoorbeeld:
1. Fantasy
2. Harry Potter
3. Bestseller
1
2
3

Maak nu een instantie van een boek en log nu de info én de tags.

# Colors

Maak een bestand colors.js aan.

Maak een array met verschillende kleuren aan, elke kleur heeft de volgende eigenschappen:

  • naam (string)
  • code (object)
    • rgba (string)
    • hsla (string)
    • hex (string)

Maak een object literal Color die deze eigenschappen ontvangt. Dit Color object heeft een functie genaamd getInfo(), deze functie zal een overzicht van de kleurcodes tonen.

Name: Donkerblauw
------------------------------
RGBA: rgba(0,0,0)
HSLA: hsla(100, 100%, 50%, 1)
HEX: #152648
1
2
3
4
5

Een color object bevat daarnaast ook een toString() functie die de naam en enkel de hex-value van het kleur teruggeeft.

Maak enkele instanties van Color met de colors array. Log de output van dit object naar de console.

# Promises maken

  • Refactor volgende onderstaande code. De functie ‘job’ zal een promise object moeten returnen en zichzelf resolven na 5 seconden. Zorg ervoor dat de data van je promise ‘hello world’ is.
function job() {
  return "hello world";
}
1
2
3
  • Refactor volgende onderstaande code. De functie moet een promise returnen maar je zal je ‘number’ moeten valideren.
    • Indien ‘number’ geen nummer is reject je de promise. En zal je de data ‘Het is geen getal’ meegeven.
    • Indien ‘number’ een even getal is reject je na 1 seconde de promise en geef je als data ‘Het is een even getal’ mee.
    • Indien ‘number’ een oneven getal is resolve je na 2 seconden de promise en geef je als data ‘Yes, het getal is oneven!’ mee.
function isOddNumber(number) {
  return something;
}
1
2
3

# Chaining Promises

  • Maak 3 functies genaamd signIn(), getData(), renderDashboard().

    Zorg er voor dat je getData() pas zal uitvoeren nadat je succesvol bent aangemeld. Eenmaal je succesvol de data hebt ‘opgehaald’ kan je pas het Dashboard renderen.

    Wanneer er bij signIn() of getData() iets mis zou lopen alert je de gebruiker.

    Gebruik in deze oefening nog globale variabelen zoals userId en data om te controlleren of je ‘API’ call is gelukt. (net zoals const isDadHappy = false; in de cursus).

    Je moet dus nog geen parameters meegeven/data overdragen van de ene functie naar de andere.

    Tip

    Je moet nog geen API’s aanspreken maar gebruik timeouts om de API call na te bootsen.

  • Refactor de vorige oefening zodat je aan de signIn() functie een authToken-parameter kan meegeven. In deze functie zal bij succesvolle API-call een user object worden teruggeven met een id, firstName en lastName.

    In je getData() functie zal je dit user object ontvangen en samenvoegen met de data die je van je ‘API-call’ terugkreeg. De ‘data’ van de API zal een object zijn met keys: orders en total. Je nieuwe object (met keys: firstName, lastName, orders en total) zal worden doorgegeven aan de renderDashboard() functie.

    In de renderDashboard() functie zal je volgende boodschap loggen: Je hebt het dashboard opgehaald van ... ..., hij heeft ... orders geplaatst voor een totale waarde van ...

  • Refactor je code door gebruik te maken van async await. Maak hier voor een asynchrone functie genaamd auth() die je logica zal uitvoeren;

# Emojis

`emojis.json`

JSON-file emojis

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

Mappen & bestanden

  • emojis/ # hoofdmap (folder)
    • js/ # map (folder)
      • fetch.js # bestand (file)
      • main.js # bestand (file)
    • data/ # map (folder)
      • emojis.json # bestand (file)
    • css/ # map (folder)
      • main.css # bestand (file)
    • index.html # bestand (file) :::

Het fetch.js bestand bevat de volgende inhoud:

function loadJsonByPromise(url) {
  return new Promise((resolve, reject) => {
    // eslint-disable-next-line no-undef
    const xhr = new XMLHttpRequest();
    xhr.responseType = "json";
    xhr.open("GET", url, true);
    xhr.onload = () => {
      if (xhr.status === 200) {
        const data = !xhr.responseType
          ? JSON.parse(xhr.response)
          : xhr.response;
        resolve(data);
      } else {
        reject(xhr.status);
      }
    };
    xhr.onerror = () => {
      reject(Error("Network Error!"));
    };
    xhr.send(null);
  });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>
      Emojis | Programming 2: Intermediate | Associate Degree in Computer
      Programming
    </title>
    <link rel="stylesheet" href="css/main.css" />
  </head>
  <body>
    <section class="emojis">
      <ul class="emojis-list"></ul>
    </section>
    <section class="tooltip"></section>
    <script src="js/fetch.js"></script>
    <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
18
19
20
21

1. Maak een app object met bij voorkeur de methoden initialize(), cacheElements(), getDataFromEmojisFile(), updateEmojisUI(), getHTMLForEmojis, getHTMLForEmoji.

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

3. Laad de externe data (JSON) via de methode getDataFromEmojisFile(). Gebruik hier de methode loadJsonByPromise uit het extern bestand fetch.js.

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

Mogelijke output in webpagina:

Eindresultaat Emojis in de webbrowser

# Countries API

API-endpoint

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

Mappen & bestanden

  • countries/ # 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>
      Countries | 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 href="css/main.css" rel="stylesheet" />
  </head>
  <body>
    <div class="container">
      <div class="row countries-list"></div>
    </div>
    <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
18
19
20
21
22
23
24

1. Maak een app object met bij voorkeur de methoden initialize(), cacheElements(), getDataFromCountriesAPIEndpoint(), updateCountriesUI(), getHTMLForLanguages.

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

3. Laad de externe data (JSON) URL https://restcountries.com/v2/all via de methode getDataFromCountriesAPIEndpoint(). Gebruik fetch en Promises om externe data in te laden.

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

Mogelijke output in webpagina:

Eindresultaat Countries in de webbrowser

# GDM.GENT

API-endpoint

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

Mappen & bestanden

  • gdm*gent_cases/ *# 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>
      GDM.GENT cases | 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="cases">
      <ul class="case-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
18
19
20
21
22
23
24

1. Maak een app object met bij voorkeur de methoden initialize(), cacheElements(), getDataFromGDMGentCasesAPIEndpoint(), updateGDMGentCasesUI(), getHTMLForProjectTechnologies().

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

3. Laad de externe data (JSON) URL https://www.gdm.gent/static/data/cases.json via de methode getDataFromGDMGentCasesAPIEndpoint(). Gebruik de fetch en promises om externe data in te laden.

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

Mogelijke output in webpagina:

Eindresultaat GDM.gent cases in de webbrowser

Uitbreidingen:

  • Filter de data op afstudeerrichtingen of vakken.
  • Laad niet alle cases tegelijkertijd. Door te scrollen worden extra cases geladen. Deze techniek noemt progressive loading.

# Cats as a service

API-endpoint

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

Mappen & bestanden

  • cats*as_a_service/ *# 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" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>
      Cats as a service | Programming 2: Intermediate | Associate Degree in
      Computer Programming
    </title>
    <link rel="stylesheet" href="css/main.css" />
  </head>
  <body>
    <section class="cas-random-cat"></section>
    <section class="cas-cats">
      <ul class="cas-cats-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
18
19
20

1. Maak een app object met bij voorkeur de volgende methoden initialize(), cacheElements(), getDataFromCatsAsAServiceAPIEndpoint(), updateCatsUI(), getHTMLForCats(), getHTMLForCat().

2. Cache het element met klassenaam cas-cats-list in de variabele $casCatsList via de methode cacheElements().

3. Laad de externe data (JSON) URL https://cataas.com/api/cats?tags=cute via de methode getDataFromCatsAsAServiceAPIEndpoint(). Gebruik fetch met async + await om externe data in te laden.

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

Mogelijke output in webpagina:

Eindresultaat Cats as a service in the webbrowser

# Harry Potter

API-endpoint

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

Mappen & bestanden

  • harry*potter/ *# 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" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>
      Harry Potter | Programming 2: Intermediate | Associate Degree in Computer
      Programming
    </title>
    <link rel="stylesheet" href="css/main.css" />
  </head>
  <body>
    <section class="hp-filters">
      <ul class="hp-types-list"></ul>
      <ul class="hp-houses-list"></ul>
      <ul class="hp-ancestries-list"></ul>
    </section>
    <section class="hp-characters">
      <ul class="hp-characters-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
18
19
20
21
22
23
24

De HTML pagina ziet er als volgt uit:

Mogelijke output in webpagina:

Eindresultaat Harry Potter API in de webbrowser

API-endpoint

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

Mappen & bestanden

  • youtube*search/ *# hoofdmap (folder)_
    • js/ # map (folder)
      • main.js # bestand (file)
    • css/ # map (folder)
      • main.css # bestand (file)
    • index.html # bestand (file) :::
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>
      YouTube Search API | Programming 2: Intermediate | Associate Degree in
      Computer Programming
    </title>
    <link
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="css/main.css" />
  </head>
  <body>
    <div class="container-fluid">
      <section class="row youtube-search-form">
        <form class="col-12 col-md-6" id="frmSearch" action="" method="post">
          <div class="form-group">
            <label for="txtSearch">search</label>
            <input type="text" className="form-control" id="txtSearch" />
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </section>
      <section class="row youtube-search-results align-items-center"></section>
    </div>
    <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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

Mogelijke output in webpagina:

Eindresultaat YouTube Search API in de webbrowser
Week 2 Week 4
© 2025 Arteveldehogeschool Laatst bijgewerkt: 18/11/2023 15:07:08