# Oefeningen functies
# Eenvoudige functie
Schrijf een eenvoudige JavaScript-functie genaamd greetings die “Hallo daar!” teruggeeft. Roep de functie aan en toon het resultaat in de console.
console.log(greetings()); // Hallo daar!
# Functie met parameters
Breid de functie uit zodat deze een begroeting specifiek voor die naam teruggeeft. Roep de functie aan met de naam “Anna” en toon het resultaat in de console.
console.log(greetings("Anna")); // Hallo Anna!
# Standaard parameters
Zorg ervoor dat als je geen argument meegeeft er toch “Hallo daar!” kan getoond worden.
console.log(greetings()); // Hallo daar!
# Functie met parameters en interne logica
Schrijf een functie genaamd controlAge die een leeftijd als parameter accepteert. Als de leeftijd 18 of ouder is, geef dan “Volwassen” terug, anders geef je “Nog niet volwassen” terug. Roep de functie aan met verschillende leeftijden en toon de resultaten in de console.
console.log(controlAge(16)); // Nog niet volwassen
console.log(controlAge(21)); // Volwassen
2
# Return
Onderstaande functie zal true teruggeven wanneer age groter is dan 18.
function checkAge(age) {
if (age > 18) {
return true;
} else {
return confirm("Did parents allow you?");
}
}
2
3
4
5
6
7
Werkt de functie nog wanneer we else zouden verwijderen?
function checkAge(age) {
if (age > 18) {
return true;
}
// Werkt deze functie nog zoals verwacht?
return confirm("Did parents allow you?");
}
2
3
4
5
6
7
# Callback
Schrijf een functie die een andere functie als argument gebruikt.
Roep de hoofdfunctie aan en geef het een callback-functie. In deze callback-functie log je volgend bericht in de console “Dit is de callback-functie”.
mainLogic(myCallback); // Dit is de callback-functie.
# Pass by …
Maak een functie die een getal kan vermeerderen met ‘10’. Wat zal er gelogd worden?
let myNumber = 20;
increaseByTen(myNumber);
console.log("Number:", myNumber);
2
3
Verbeter jouw functie zodat console.log("Number:", myNumber); de waarde 30 zal tonen.
# Scope
Creëer een variabele global buiten een functie en wijs er een waarde aan toe. Maak vervolgens binnen een functie een variabele met dezelfde naam maar een andere waarde. Toon zowel de globale als de lokale variabele in de console. Wat gebeurt er?
# Todo list
const todoList = [
{
task: "Complete Project",
subtasks: [
{
task: "Write Code",
subtasks: [
{ task: "Implement Feature A" },
{ task: "Test Feature A" },
{ task: "Refactor Code" },
],
},
{
task: "Document Project",
subtasks: [{ task: "Write Readme" }, { task: "Create Documentation" }],
},
],
},
{
task: "Prepare Presentation",
subtasks: [{ task: "Create Slides" }, { task: "Practice Delivery" }],
},
];
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Toon alle taken van deze todo-list.
# Efficient JS gebruiken
Maak twee varianten van de functie checkAge.
- Gebruik de
?-operator in plaats vanif-else. - Gebruik de OR-operator
||.
function checkAge(age) {
if (age > 18) {
return true;
} else {
return confirm("Did parents allow you?");
}
}
2
3
4
5
6
7
# Dropdown
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Recursive Dropdown</title>
<style>
/* Add some basic styling for better visibility */
ul {
list-style: none;
padding: 0;
}
li {
margin-left: 20px;
}
</style>
</head>
<body>
<div id="dropdown-container"></div>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const dropdownMenu = {
label: "Dropdown",
items: [
"Item 1",
"Item 2",
{
label: "Submenu 1",
items: [
"Subitem 1.1",
"Subitem 1.2",
{
label: "Sub-submenu 1",
items: ["Sub-subitem 1.1", "Sub-subitem 1.2", "Sub-subitem 1.3"],
},
],
},
"Item 3",
{
label: "Submenu 2",
items: ["Subitem 2.1", "Subitem 2.2"],
},
],
};
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const dropdownContainer = document.getElementById("dropdown-container");
dropdownContainer.appendChild(generateDropdownHTML(dropdownMenu));
2
Schrijf een functie generateDropdownHTML zodat de juiste HTML-code wordt gegenereerd.