Web Scripting

# Week 3

Mappen & bestanden

  • artevelde/
    • pgm-code/
      • pgm-1/
        • week-1
        • week-2
        • week-3/
          • return_item.js
          • …
      • web-1/

# Calculate dog years

De leeftijd van een hond ken je in mensenjaren. Hoe oud is een hond in hondenjaren? Eén mensenjaar komt overeen met zeven hondenjaren.

  • Maak een bestand calculate_dog_years.js aan in de reeds aangemaakt folder week-3.
  • Schrijf een functie genaamd calculateDogYears dat:
    • 1 argument bevat: de leeftijd van de hond in de tijd
    • bereken de leeftijd van de hond in hondenjaren (1 mensenjaar = 7 hondenjaren)
    • de functie geeft de leeftijd in hondenjaren terug
  • output de geretourneerde waarde van calculateDogYears naar de console zoals: “Your dog is 35 years old in dog years!”
  • Roep deze functie 2 keer aan, steeds met een andere waarde voor het argument
  • Uitbreiding:
    • voeg een extra argument toe om de conversiefactor van mens- naar hondenjaren te bepalen tijdens de aanroep van de functie
Mogelijke oplossing:

./artevelde/pgm-code/pgm-1/week-3/calculate_dog_years.js

function convertHumanYearsToDogYears(humanYears) {
  const dogYears = humanYears * 7;
  return dogYears;
}

console.log(`Your dog is ${convertHumanYearsToDogYears(7)} years old`);
console.log(`Your dog is ${convertHumanYearsToDogYears(10)} years old`);
1
2
3
4
5
6
7

# Return item

  • Maak een bestand return_item.js aan in de reeds aangemaakt folder week-3.
  • Schrijf een functie genaamd getItem dat:
    • 2 argumenten bevat:
      • een array
      • een index (number)
    • Zorg dat deze functie het item uit de array op de gekozen index terug geeft
  • Roep deze functie enkele keren op
Mogelijke oplossing:

./artevelde/pgm-code/pgm-1/week-3/return_item.js

function getItem(array, index) {
  return array[index];
}

console.log(getItem(["a", "b", "c"], 2)); // c
console.log(getItem(["a", "b", "c"], 1)); // b
1
2
3
4
5
6

# Matcher

Met deze applicatie combineren we een bepaalde leeftijdsgroep met een bepaald product die we verkopen via een webshop.

Stappenplan:

  • Maak een bestand matcher.js aan in de reeds aangemaakt folder week-3.
  • Variabele (array) met de volgende elementen: ‘7 tot 11’, ‘11 tot 15’, ‘15 - 18’, ‘18 - 23’, ‘23 - 28’, ‘28 - 36’, ‘36 - 50’, ‘50 - 64’, ‘64 - 80’
  • Variabele (array) met de volgende elementen: ‘pruiken’, ‘nagels’, ‘aquariums’, ‘mondmaskers’, ‘sneakers’, ‘gepersonaliseerd wc-papier’
  • Schrijf een functie genaamd generateMatch dat:
    • de combinatie van een willekeurige leeftijdsgroep uit de leeftijdsgroep-array en een willekeurig product uit de producten-array terggeeft.
  • Roep de functie enkele keren aan en log de geretourneerde waarde (string) naar de console

Voorbeeld resultaat

Maak een webshop voor 64 - 80 jarigen waar ze gepersonaliseerd wc-papier verkopen.
Maak een webshop voor 23 - 28 jarigen waar ze nagels verkopen.
Maak een webshop voor 18 - 23 jarigen waar ze aquariums verkopen.
Mogelijke oplossing:

./artevelde/pgm-code/pgm-1/week-4/matcher.js

const ageRanges = [
  "7 tot 11",
  "11 tot 15",
  "15 - 18",
  "18 - 23",
  "23 - 28",
  "28 - 36",
  "36 - 50",
  "50 - 64",
  "64 - 80",
];
const subjects = ["pruiken", "nagels", "aquariums", "mondmaskers", "sneakers", "gepersonaliseerd wc-papier"];

function generateMatch() {
  const ageRange = ageRanges[Math.floor(Math.random() * ageRanges.length)];
  const subject = subjects[Math.floor(Math.random() * subjects.length)];
  return `Maak een webshop voor ${ageRange} jarigen waar ze ${subject} verkopen.`;
}

console.log(generateMatch());
console.log(generateMatch());
console.log(generateMatch());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# Loop through arrays

Maak een bestand array_loops.js aan in de reeds aangemaakt folder week-3. In deze applicatie itereren we doorheen een array:

  • Definieer een array met de volgende elementen: Eden Hazard, Kevin De Bruyne, Romelu Lukaku, Thibault Courtois, Dries Mertens.
  • Log de elementen van de array.
  • Definieer een variabele tempStr met als waarde een lege string.
  • Doorlop de array met een forEach-lus en nieuwe content (tekst) toe aan de variabele tempStr. Log de variabele tempStr naar het output scherm.
  • Doe nu hetzelfde met een for...of-lus

Deze oefening heeft als doel om te oefenen met het doorlopen van arrays met verschillende soorten lussen.

Mogelijke oplossing:

./artevelde/pgm-code/pgm-1/week-3/array_loops.js

const redDevils = ["Eden Hazard", "Kevin De Bruyne", "Romelu Lukaku", "Thibault Courtois", "Dries Mertens"];
let tempStr = "";
for (let i = 0; i < redDevils.length; i++) {
  tempStr += `Player ${i + 1} : ${redDevils[i]}\n`;
}
console.log(tempStr);
tempStr = "";
redDevils.forEach(function (player, index) {
  tempStr += `Player ${index + 1} : ${player}\n`;
});
console.log(tempStr);
tempStr = "";
let p = 1;
for (let player of redDevils) {
  tempStr += `Player ${p} : ${player}\n`;
  p++;
}
console.log(tempStr);
tempStr = "";
p = 1;
for (let property in redDevils) {
  tempStr += `Player ${p} : ${redDevils[property]}\n`;
  p++;
}
console.log(tempStr);
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

# Curriculum Vitae (CV)

Maak een bestand curriculum_vitae.js aan in de reeds aangemaakt folder week-2. Schrijf een JavaScript programma waarin een curriculum vitae (Afk.: CV) wordt beschreven d.m.v. een object initalizer (opens new window). Een CV bevat:

Eigenschap Datatype Opmerkingen
familienaam string
voornaam string
geslacht string
leeftijd number
getrouwd boolean
avatar string (unicode character)
lijfspreuk string
talenkennis string 100 % betekent 10 $times; *

Print de eigenschappen (en waarde) naar de console via een lus.

Opmerking

Mogelijke oplossing:

./artevelde/pgm-code/pgm-1/week-3/curriculum_vitae.js

const cv = {
  firstName: "Philippe",
  surName: "De Pauw - Waterschoot",
  sex: "Male",
  age: 36,
  unicodeAvatar: "\u{1F344}",
  married: false,
  quote: "I'm a future talent in front-end development",
  langDutchLevel: "*********",
  langEnglishLevel: "*******",
  langFrenchLevel: "*****",
};

/*
 * Loop through the properties via the for...in loop
 * for each property prop in the list of properties we will log the property and its value
 */
for (let prop in cv) {
  if (cv.hasOwnProperty(prop)) {
    console.log(`The property ${prop} has the value ${cv[prop]}`);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# Curriculum Vitae (CV) - Uitbreiding

Maak een bestand curriculum_vitae_extended.js aan in de reeds aangemaakt folder week-3.

Kopieer het object uit de vorige oefening.

Declareer nu een nieuwe variabele template en vul deze met een template string. Gebruik de variabelen uit het object om de template string in te vullen. Log naar de console.

Output

Name: Philippe De Pauw - Waterschoot
Sex: Male
Age: 36
Avatar: 🍄
Married: false
=======================================
"I'm a future talent in front-end development"
=======================================
Languages
---------------------------------------
Dutch: *********
English: *******
French: *****
Mogelijke oplossing:

./artevelde/pgm-code/pgm-1/week-3/curriculum_vitae_extended.js

const cv = {
  firstName: "Philippe",
  surName: "De Pauw - Waterschoot",
  sex: "Male",
  age: 36,
  unicodeAvatar: "\u{1F344}",
  married: false,
  quote: "I'm a future talent in front-end development",
  langDutchLevel: "*********",
  langEnglishLevel: "*******",
  langFrenchLevel: "*****",
};

const template = `
  Name: ${cv.firstName} ${cv.surName}
  Sex: ${cv.sex}
  Age: ${cv.age}
  Avatar: ${cv.unicodeAvatar}
  Married: ${cv.married}
  =======================================
  "${cv.quote}"
  =======================================
  Languages
  ---------------------------------------
  Dutch: ${cv.langDutchLevel}
  English: ${cv.langEnglishLevel}
  French: ${cv.langFrenchLevel}
`;

console.log(template);
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

# Book

Maak een bestand book.js aan in de reeds aangemaakt folder week-3.

Declareer een variabele book. Dit is een object en bevat volgende velden:

  • title (string)
  • author
    • firstName (string)
    • lastName (string)
  • pages (number)

De waarden van de variabelen kies je zelf.

Declareer nu een nieuwe variabele template en vul deze met een template string. Gebruik de variabelen uit het object om de template string in te vullen. Log naar de console.

Output

JavaScript for Dummies (399 pages) 
by John Doe
Mogelijke oplossing:

./artevelde/pgm-code/pgm-1/week-3/book.js

const book = {
  title: "The Hunger Games",
  author: {
    firstName: "Suzanne",
    lastName: "Collins",
  },
  pages: 374,
};

const template = `
  ${book.title} (${book.pages} pages) 
  by ${book.author.firstName} ${book.author.lastName}
`;

console.log(template);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Student information

Schrijf een JavaScript programma waarin student informatie wordt beschreven d.m.v. een object initalizer (opens new window). Een student bevat:

  • familienaam (string)
  • voornaam (string)
  • geslachtscode (number)
  • geboortedatum (number t.o.v. 1970)
  • cursussen (array van objecten)
    • cursus (object)
      • naam (string)
      • docenten (array van strings)

Print alle eigenschappen naar de console om het volgende resultaat te genereren:

======================================================
|                STUDENT INFORMATION                 |
======================================================
PERSONAL
======================================================
Name: Olivier Pieters
Gender: Male
Day of birth: Fri Dec 12 1975
======================================================
COURSES
======================================================
Course: Data Management
Lecturers: Dieter De Weirdt
------------------------------------------------
Course: Web-1
Lecturers: Evelien Rutsaert
------------------------------------------------
Course: Programming-1
Lecturers: Niels Minne, Michael Vanderpoorten
------------------------------------------------
Course: IT Professional
Lecturers: Isabelle Volckaert, Claire Geeraerts
======================================================
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Stappenplan:

  • Maak een bestand student_information.js aan in de reeds aangemaakt folder week-3.
  • Schrijf een functie genaamd generateStringForGender dat:
    • 1 argument bevat: de genderCode (number)
    • geeft leesbare formaat terug op basis van genderCode, bijv. 2 geeft Gender: Female
  • Schrijf een functie genaamd generateStringForLecturers dat:
    • 1 argument bevat: de lecturers (array)
    • geeft leesbare formaat terug van de docenten
  • Schrijf een functie genaamd generateStringForCourses dat:
    • 1 argument bevat: de courses (array)
    • geeft leesbare formaat terug van de cursussen. Deze zal dus ook de functie generateStringForLecturers moeten aanroepen.
  • Schrijf een functie genaamd generateStringForStudent dat:
    • 1 argument bevat: het student object
    • geeft de student informatie terug als string. Deze zal dus heel de student informatie bevatten en zal de functies generateStringForGender, generateStringForCourses aanroepen.
Mogelijke oplossing:

./artevelde/pgm-code/pgm-1/week-3/student_information.js

const student = {
  name: "Vanderpoorten",
  firstName: "Michael",
  genderCode: 0,
  dateOfBirth: 705535200000,
  courses: [
    {
      name: "Data Management",
      lecturers: ["Adriaan Glibert"],
    },
    {
      name: "Web 1",
      lecturers: ["Evelien Rutsaert", "Sjouwke Van Parys"],
    },
    {
      name: "Programming 1",
      lecturers: ["Niels Minne", "Michael Vanderpoorten"],
    },
    {
      name: "IT Professional",
      lecturers: ["Claire Geeraerts", "Isabelle Volckaert"],
    },
  ],
};

function generateStringForLecturers(lecturers) {
  return lecturers.join(", ");
}

function generateStringForCourses(courses) {
  let text = "";
  for (const course of courses) {
    text += `
Course: ${course.name}
Lecturers: ${generateStringForLecturers(course.lecturers)}
------------------------------------------------
    `;
  }
  return text;
}

function generateStringForGender(gender) {
  if (gender === 0) {
    return "Male";
  } else if (gender === 1) {
    return "Female";
  } else {
    return "Onbekend";
  }
}

function generateStringForStudent(student) {
  return `
======================================================
|                STUDENT INFORMATION                 |
======================================================
PERSONAL
======================================================
Name: ${student.firstName} ${student.name}
Gender: "${generateStringForGender(student.genderCode)}"
Day of birth: ${new Date(student.dateOfBirth)}
======================================================
COURSES
======================================================
${generateStringForCourses(student.courses)}
======================================================`;
}

console.log(generateStringForStudent(student));
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

# The reading list

Maak een bestand the_reading_list.js aan in de reeds aangemaakt folder week-3.

Maak een array van objecten aan, waarin een object een boek beschrijft met de volgende eigenschappen:

  • title (string)
  • author (string)
  • alreadyRead (boolean om aan te duiden of je al dan niet het boek hebt gelezen)

Itereer doorheen de array van boeken. Als je het boek al hebt gelezen dan log je You already read "The Hobbit" by J.R.R. Tolkien. Heb je het boek niet gelezen dan log je You still need to read "To Kill a Mockingbird" by Harper Lee.

Voorbeeld

=============================================================================
|                               READING LIST                                |
=============================================================================
You already read "The Hobbit" by J.R.R. Tolkien
You still need to read "To Kill a Mockingbird" by Harper Lee
You still need to read "The Great Gatsby" by F. Scott Fitzgerald
=============================================================================
Mogelijke oplossing:

./artevelde/pgm-code/pgm-1/week-4/the_reading_list.js

const readingList = [
  {
    title: "The Hobbit",
    author: "J.R.R. Tolkien",
    alreadyRead: true,
  },
  {
    title: "To Kill a Mockingbird",
    author: "Harper Lee",
    alreadyRead: false,
  },
  {
    title: "The Great Gatsby",
    author: "F. Scott Fitzgerald",
    alreadyRead: false,
  },
];

let tempStr = `
  =============================================================================
  |                               READING LIST                                |
  =============================================================================`;
for (const book of readingList) {
  tempStr += "";

  if (book.alreadyRead) {
    tempStr += "You already read ";
  } else {
    tempStr += "You still need to read ";
  }
  tempStr += `"${book.title}" by ${book.author}`;
}
tempStr += "\n=============================================================================";
console.log(tempStr);
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

# The recipe card

Maak een bestand the_recipe_card.js aan in de reeds aangemaakt folder week-3.

Maak een object om informatie te beschrijven van jouw favoriet gerecht. Het object bevat de eigenschappen:

  • title (a string)
  • servings (a number)
  • ingredients (an array of objects).
    • name
    • amount

Voorbeeld

============================================
|             FAVORITE RECIPE              |
============================================
Name:           Oosterse wortelgazpacho
--------------------------------------------
Servings:       4
--------------------------------------------
Ingredients
--------------------------------------------
550 gr  wortels
250 ml  kokosmelk
2 el    rode wijnazijn
1 tl    rode currypasta
1 stengel       limoengras (het witte stukje)
1 teentje       look
1 scheutje      water
                peper - zout
============================================
Mogelijke oplossing:

./artevelde/pgm-code/pgm-1/week-4/the_recipe_card.js

const favoriteRecipe = {
  title: "Oosterse wortelgazpacho",
  servings: 4,
  ingredients: [
    {
      name: "wortels",
      amount: "550 gr",
    },
    {
      name: "kokosmelk",
      amount: "250 ml",
    },
    {
      name: "rode wijnazijn",
      amount: "2 el",
    },
    {
      name: "rode currypasta",
      amount: "1 tl",
    },
    {
      name: "limoengras (het witte stukje)",
      amount: "1 stengel",
    },
    {
      name: "look",
      amount: "1 teentje",
    },
    {
      name: "water",
      amount: "1 scheutje",
    },
    {
      name: "peper - zout",
    },
  ],
};
function convertIngredientsToString(ingredients) {
  let tempStr = "";
  for (const ingredient of ingredients) {
    tempStr += `${ingredient.amount ? ingredient.amount : "\t"}\t${ingredient.name}\n`;
  }
  return tempStr;
}
const msg = `
  ============================================
  |             FAVORITE RECIPE              |
  ============================================
  Name:\t\t${favoriteRecipe.title}
  --------------------------------------------
  Servings:\t${favoriteRecipe.servings}
  --------------------------------------------
  Ingedients
  --------------------------------------------
  ${convertIngredientsToString(favoriteRecipe.ingredients)}
  ============================================
  `;
console.log(msg);
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

# Count a specified character

Met deze applicatie tellen we hoeveel keer een specifiek teken aanwezig is in een string, bijv. het teken a komt 2x voor in JavaScript.

Stappenplan:

  • Maak een bestand count_specified_character.js aan in de reeds aangemaakt folder week-3.
  • Schrijf een functie genaamd countSpecifiedCharacter dat:
    • 1 argument bevat: de tekst waarin we een specifiek teken moeten tellen
    • 2 argument: het teken dat we zullen tellen in de string
    • geeft het aantal
Mogelijke oplossing:

./artevelde/pgm-code/pgm-1/week-3/count_specified_character.js

function countSpecifiedCharacter(text, character) {
  const characters = text.split(""); // alle characters in een array
  let count = 0;
  for (const char of characters) {
    if (char.toLowerCase() === character.toLowerCase()) {
      count++;
    }
  }
  return count;
}

const sentence = "JavaScript is amazing";
console.log(countSpecifiedCharacter(sentence, "a"));
console.log(countSpecifiedCharacter(sentence, "v"));
console.log(countSpecifiedCharacter(sentence, "x"));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# Search within an array

Maak een bestand array_search.js aan in de reeds aangemaakt folder week-3. In deze applicatie zoeken we naar elementen in een array die beantwoorden aan een bepaalde criteria:

  • Definieer een array met de volgende elementen: ant, bison, camel, duck, bison.
  • Zoek de eerste index van het element waarvan de waarde gelijk is aan bison met de indexOf() methode. Bewaar de returnwaarde in een variabele foundIndex.
  • Log de variabele foundIndex.
  • Zoek vanaf een bepaalde index de eerste index van het element waarvan de waarde gelijk is aan bison met de indexOf() methode. Bewaar de returnwaarde in een variabele foundIndex.
  • Log de variabele foundIndex.
  • Zoek de eerste index van het element waarvan de waarde gelijk is aan capibara met de indexOf() methode. Bewaar de returnwaarde in een variabele foundIndex.
  • Log de variabele foundIndex.
  • Zoek de laatste index van het element waarvan de waarde gelijk is aan bison met de lastIndexOf() methode. Bewaar de returnwaarde in een variabele foundIndex.
  • Log de variabele foundIndex.
  • Zoek vanaf een bepaalde index de laatste index van het element waarvan de waarde gelijk is aan bison met de lastIndexOf() methode. Bewaar de returnwaarde in een variabele foundIndex.
  • Log de variabele foundIndex.
  • Definieer een array met de volgende elementen: 5, 12, 8, 130, 44.
  • Zoek de eerste index van het element waarvan de waarde groter is dan 13 met de findIndex() methode. Bewaar de returnwaarde in een variabele foundIndex.
  • Log de variabele foundIndex.
  • Zoek de eerste element waarvan de waarde groter is dan 10 met de find() methode. Bewaar de returnwaarde in een variabele foundElement.
  • Log de variabele foundElement.
  • Definieer een array met de volgende elementen: spray, limit, elite, exuberant, destruction, present.
  • Zoek alle elementen waarvan de lengte van de waarde groter is dan 6 met de filter() methode. Bewaar de returnwaarde in een variabele filteredWords.
  • Log de variabele filteredWords.
Mogelijke oplossing:

./artevelde/pgm-code/pgm-1/week-4/array_search.js

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
let foundIndex = beasts.indexOf('bison');
console.log(`The index found of an element with value bison: ${foundIndex}.`);
foundIndex = beasts.indexOf('bison', 2);
console.log(`The index found of an element with value bison: ${foundIndex}.`);
foundIndex = beasts.indexOf('capibara');
console.log(`The index found of an element with value capibara: ${foundIndex}.`);
foundIndex = beasts.lastIndexOf('bison');
console.log(`The index found of an element with value bison: ${foundIndex}.`);
foundIndex = beasts.lastIndexOf('bison', 2);
console.log(`The index found of an element with value bison: ${foundIndex}.`);
const numbers = [5, 12, 8, 130, 44];
foundIndex = numbers.findIndex(function (num) {
  return num > 13;
});
console.log(`The index found of an element with value > 13: ${foundIndex}.`);
let foundElement;
foundElement = numbers.find(function (num) {
  return num > 10;
});
console.log(`The element found with value > 10: ${foundElement}.`);
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const filteredWords = words.filter(function (w) {
  return w.length > 6
});
console.log(`The elements filtered with string length > 6: ${filteredWords}.`);
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

# Omgekeerde volgorde

Maak een bestand array_reversed.js aan in de reeds aangemaakt folder week-3.

Maak een array aan en zorg dan dat je de array afdrukt in de omgekeerde volgorde.

const arr = [43, "what", 9, true, "cannot", false, "be", 3, true];
// Example output:
// true 3 be false cannot true 9 what 43
1
2
3
Mogelijke oplossing:

./artevelde/pgm-code/pgm-1/week-2/array_reversed.js

const arr = [43, "what", 9, true, "cannot", false, "be", 3, true];

arr.reverse();

console.log(arr);
1
2
3
4
5

# Nested arrays

Schrijf een JavaScript programma die de elementen uit een array (met nested array (opens new window)) print in de console.

Voorbeeld array:

const a = [
  [1, 2, 1, 24],
  [8, 11, 9, 4],
  [7, 0, 7, 27],
  [7, 4, 28, 14],
  [3, 10, 26, 7],
];
1
2
3
4
5
6
7

Voorbeeld output

"------------------------------------------------------";
"row 0";
"------------------------------------------------------";
"1";
"2";
"1";
"24";
"------------------------------------------------------";
"row 1";
"------------------------------------------------------";
1
2
3
4
5
6
7
8
9
10

Tip

Mogelijke oplossing:

./artevelde/pgm-code/pgm-1/week-4/nested_arrays.js

/*
 * Nested arrays
 * ===================================================================
 * Course: Programming 1: Front-End Essentials
 * Week: 4
 * Developed by: Philippe De Pauw - Waterschoot
 * Last updated: 27/09/2020
 * ===================================================================
 */

const a = [
  [1, 2, 1, 24],
  [8, 11, 9, 4],
  [7, 0, 7, 27],
  [7, 4, 28, 14],
  [3, 10, 26, 7],
];
let tempStr = "";

/*
 * Optie 1
 */
let i = 0;
for (const row of a) {
  tempStr += "------------------------------------------------------\n";
  tempStr += `row ${i}`;
  tempStr += "\n------------------------------------------------------\n";
  for (const column of row) {
    tempStr += column + "\n";
  }
  i++;
}
console.log(tempStr); // Log the value of the temporary string (tempStr) to the console

/*
 * Optie 2
 */
tempStr = ""; // terug leeg maken voor optie 2
for (let i = 0; i < a.length; i++) {
  tempStr += "------------------------------------------------------\n";
  tempStr += `row ${i}`;
  tempStr += "\n------------------------------------------------------";
  const nestedArray = a[i];
  for (let j = 0; j < nestedArray.length; j++) {
    tempStr += `\n ${nestedArray[j]}`;
  }
  tempStr += "\n";
}

console.log(tempStr); // Log the value of the temporary string (tempStr) to the console
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

# Filter within an array of objects

Maak een bestand array_search_objects.js aan in de reeds aangemaakt folder week-3. In deze applicatie zoeken we naar elementen in een array die beantwoorden aan een bepaalde criteria:

  • Definieer een array met de volgende elementen: { name: 'apples', quantity: 2 }, { name: 'bananas', quantity: 0 }, { name: 'cherries', quantity: 5 }.
  • Definieer een variabele tempStr met als waarde een lege string.
  • Doorlop de array filteredInventory met een for...of methode en ken bij iedere iteratie nieuwe content (tekst) toe aan de variabele tempStr. Voeg enkel deze toe waarvan de quantity groter is dan 0.
  • Log de variabele tempStr naar het output scherm (dezelfde output dan in het voorbeeld).

Tip

Voorbeeld

Product 1: apples
Product 2: cherries
Mogelijke oplossing:

./artevelde/pgm-code/pgm-1/week-4/array_search_objects.js

const inventory = [
  { name: "apples", quantity: 2 },
  { name: "bananas", quantity: 0 },
  { name: "cherries", quantity: 5 },
];
let tempStr = "";
let i = 0;
for (const product of inventory) {
  if (product.quantity > 0) {
    tempStr += `Product ${i + 1} : ${product.name}\n`;
  }
  i++;
}
console.log(tempStr);
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Reverse number

Deze applicatie keert een numerieke waarde om, bijv.: 12345 wordt 54321.

  • Maak een bestand reverse_number.js aan in de reeds aangemaakt folder week-3.
  • Schrijf een functie genaamd reverse dat:
    • 1 argument bevat: het getal die we willen omkeren
    • de functie geeft het omgekeerde getal terug
  • Roep deze functie 2 keer aan, steeds met een andere waarde voor het argument.
  • Log het resultaat van elke aanroep naar de console.

Tip

Mogelijke oplossing:

./artevelde/pgm-code/pgm-1/week-3/reverse_number.js

/*
 * optie 1
 */
function reverse(number) {
  const nums = number.toString().split(""); // string naar array
  let tempStr = "";
  for (const num of nums) {
    tempStr = num + tempStr; // plak het nummer voor de al bestaande string
  }
  return parseInt(tempStr);
}

/*
 * optie 2
 */
function reverseAlt(num) {
  let numStr = num.toString();
  let tempStr = "";
  for (let i = numStr.length - 1; i >= 0; i--) {
    tempStr += numStr.charAt(i);
  }
  return parseInt(tempStr);
}

let num = 12345;
console.log(`The reversed number of ${num} is ${reverse(num)}.`);
num = 987654321;
console.log(`The reversed number of ${num} is ${reverse(num)}.`);
num = 1010101011;
console.log(`The reversed number of ${num} is ${reverseAlt(num)}.`);
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
Week 2 Week 4
© 2025 Arteveldehogeschool Laatst bijgewerkt: 13/1/2025, 10:02:14