# Oefeningen

# ChatApplicatie

Gebruik hiervoor de documentatie van Socket.io (opens new window)

Opdracht: Chatapplicatie met Socket.IO

Ontwikkel een eenvoudige chatapplicatie met behulp van Socket.IO.

Server-script (server.js):

// Jouw server-script hier
// De server moet luisteren op poort 3000
// De server moet berichten ontvangen van clients en deze berichten doorsturen naar alle andere clients

1
2
3

Client-script (client.js):

// Jouw client-script hier
// De client moet verbinding maken met de server
// De client moet berichten kunnen verzenden naar de server
// De client moet berichten kunnen ontvangen van de server

1
2
3
4

Om dit voorbeeld uit te voeren, dien je Node.js en Socket.IO geïnstalleerd te hebben. Gebruik het commando npm install socket.io om Socket.IO te installeren.

Start de server met node server.js in één console-venster en de client met node client.js in een ander console-venster. Je kunt extra clients openen in afzonderlijke console-vensters om tussen de clients te chatten.

Let op: Dit voorbeeld is basis en bevat geen foutafhandeling of gebruikersauthenticatie. In een real-world applicatie dien je deze functies toe te voegen voor veiligheid en robuustheid.

# MinifyMe

Maak een JavaScript-bestand genaamd index.js aan in de map src met de volgende inhoud:

console.log("This is a very long script without any dependencies.");

function fibonacci(n) {
  if (n <= 1) {
    return n;
  } else {
    return fibonacci(n - 1) + fibonacci(n - 2);
  }
}

const result = fibonacci(10);
console.log("The 10th Fibonacci number is:", result);

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log("The sum of the numbers is:", sum);

const message = "Hello, world!";
console.log(message);

const square = (x) => x * x;
console.log("The square of 5 is:", square(5));

const person = {
  name: "John Doe",
  age: 30,
  profession: "Software Developer",
};

console.log("Person:", person);

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

const dog = new Animal("Dog");
dog.speak();

const cat = new Animal("Cat");
cat.speak();

// Additional lines:

console.log("This is line 1");
console.log("This is line 2");
console.log("This is line 3");
console.log("This is line 4");
console.log("This is line 5");
console.log("This is line 6");
console.log("This is line 7");
console.log("This is line 8");
console.log("This is line 9");
console.log("This is line 10");
console.log("This is line 11");
console.log("This is line 12");
console.log("This is line 13");
console.log("This is line 14");
console.log("This is line 15");
console.log("This is line 16");
console.log("This is line 17");
console.log("This is line 18");
console.log("This is line 19");
console.log("This is line 20");
console.log("This is line 21");
console.log("This is line 22");
console.log("This is line 23");
console.log("This is line 24");
console.log("This is line 25");
console.log("This is line 26");
console.log("This is line 27");
console.log("This is line 28");
console.log("This is line 29");
console.log("This is line 30");
console.log("This is line 31");
console.log("This is line 32");
console.log("This is line 33");
console.log("This is line 34");
console.log("This is line 35");
console.log("This is line 36");
console.log("This is line 37");
console.log("This is line 38");
console.log("This is line 39");
console.log("This is line 40");
console.log("This is line 41");
console.log("This is line 42");
console.log("This is line 43");
console.log("This is line 44");
console.log("This is line 45");
console.log("This is line 46");
console.log("This is line 47");
console.log("This is line 48");
console.log("This is line 49");
console.log("This is line 50");
console.log("This is line 51");
console.log("This is line 52");
console.log("This is line 53");
console.log("This is line 54");
console.log("This is line 55");
console.log("This is line 56");
console.log("This is line 57");
console.log("This is line 58");
console.log("This is line 59");
console.log("This is line 60");
console.log("This is line 61");
console.log("This is line 62");
console.log("This is line 63");
console.log("This is line 64");
console.log("This is line 65");
console.log("This is line 66");
console.log("This is line 67");
console.log("This is line 68");
console.log("This is line 69");
console.log("This is line 70");
console.log("This is line 71");
console.log("This is line 72");
console.log("This is line 73");
console.log("This is line 74");
console.log("This is line 75");
console.log("This is line 76");
console.log("This is line 77");
console.log("This is line 78");
console.log("This is line 79");
console.log("This is line 80");
console.log("This is line 81");
console.log("This is line 82");
console.log("This is line 83");
console.log("This is line 84");
console.log("This is line 85");
console.log("This is line 86");
console.log("This is line 87");
console.log("This is line 88");
console.log("This is line 89");
console.log("This is line 90");
console.log("This is line 91");
console.log("This is line 92");
console.log("This is line 93");
console.log("This is line 94");
console.log("This is line 95");
console.log("This is line 96");
console.log("This is line 97");
console.log("This is line 98");
console.log("This is line 99");
console.log("This is line 100");

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149

Installeer Terser als dev-dependency met het volgende npm-commando:

npm install terser --save-dev

Voer Terser uit om het JavaScript-bestand te minificeren met het volgende commando:

terser --compress --mangle --output dist/bundle.js -- src/index.js

Maak een Terser-configuratiebestand genaamd terser.config.js:

module.exports = {
  mangle: true, // false om de namen van variabelen en functies niet te wijzigen
  compress: true // false om de code niet te verkleinen
};

1
2
3
4

Maak een npm-script (bijvoorbeeld "build": "terser --compress --mangle --output dist/bundle.js -- src/index.js") om Terser uit te voeren en je JavaScript-bestand te minificeren, doe dit in het package.json-bestand.

Voer het script uit met het volgende commando:

npm run build

Bekijk het geminificeerde JavaScript-bestand (oefening.min.js) en vergelijk het met het origineel om de verkleining van de code te zien.

Opmerking: Zorg ervoor dat je de Terser-documentatie (opens new window) raadpleegt voor gedetailleerde informatie over configuratieopties: Terser Documentation.

# testMetJest

Maak een JavaScript-bestand genaamd calculator.js met de volgende functie:

// calculator.js
function add(a, b) {
  return a + b;
}

1
2
3
4

Maak calculator.test.js aan voor Jest-tests.
Exporteer de add-functie in calculator.js.
Schrijf Jest-tests voor add met diverse invoerwaarden.
Implementeer indien nodig bijbehorende functies in calculator.js.
Voeg een npm-script toe met de naam test om Jest-tests uit te voeren.
Voeg tests toe voor andere bewerkingen (zoals aftrekken, vermenigvuldigen, delen) in calculator.js.

Tip

Je kan de testen uitvoeren met het commando npm run test, maar je kan ook de testen automatisch laten uitvoeren bij elke wijziging in de code met het commando npm run test:watch.

Opmerking

Gebruik Jest’s assertions zoals expect om de uitvoer van de functies te controleren. Denk na over edge cases en randvoorwaarden bij het schrijven van tests. Zorg ervoor dat je de Jest-documentatie raadpleegt voor informatie over het schrijven van tests en het gebruik van Jest: Jest Documentation (opens new window).

Oefeningen Bestandsarchitectuur