ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
Philippe Torrel
2026-07-07 10:29:34 +02:00
parent f3ca79e09b
commit f583bf92a3
14 changed files with 201 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
02_advanced/agenda.md
View File

@@ -243,9 +243,7 @@ Abschlussquiz - JS Grundlagen
**Inhalt:** **Inhalt:**
- **Exkurs: Statische Webseite mit Sass und HTML Part II** - **Exkurs: Statische Webseite mit Sass und HTML Part II**
- **Exkurs: Versionierung mit Github Part I**
- Mehrdimensionale Arrays - Mehrdimensionale Arrays
- Chess-Beispiel
**Übungen:** **Übungen:**
@@ -258,10 +256,11 @@ Projektarbeiten
**Inhalt:** **Inhalt:**
- Fetch API - Chess-Beispiel
- fetch mit Promise und async...await
- Arbeiten mit Fetch API - Arbeiten mit Fetch API
- fetch mit Promise und async...await
- Joke API auslesen - Joke API auslesen
- **Exkurs: Versionierung mit Github Part I**
**Übungen:** **Übungen:**
@@ -274,7 +273,7 @@ Projektarbeiten
**Inhalt:** **Inhalt:**
- XML-HttpRequest und AJAX mit jQuery - XML-HttpRequest und AJAX mit jQuery
- Node Installation - Node Installation (Wiederholung)
- CSV to HTML - CSV to HTML
- Node Standardbib - Node Standardbib
- fs - fs
@@ -283,4 +282,33 @@ Projektarbeiten
**Übungen:** **Übungen:**
Übungen 20 - 24 Übungen 21 - 26
---
#### Tag 19
**Inhalt:**
- NPM Befehle
- Abschluss von JS für Fortgeschrittene
- Projektvorstellung 1 + 2
- **Einrichtung von Git**
**Übungen:**
Übungen 27 - 30
---
#### Tag 20
**Inhalt:**
- **Einrichtung von Git**
- **Exkurs: Webseite mit Gulp, SASS, HTML/CSS, JS**
**Übungen:**
Projektarbeit
Übungen 31 - 32

80
02_advanced/uebungen/#u14_avg-scores/index.html Normal file
View File

@@ -0,0 +1,80 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 14: Durchschnittsnoten berechnen</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<div class="alert alert-primary">
<h2>Übung 14: Durchschnittsnoten berechnen</h2>
<p>
Durchschnitt pro Schüler (<strong>calculateAvgGrades</strong>): Schreibe eine Funktion, die die
Durchschnittsnote jedes Schülers (zeilenweise) berechnet. Das Ergebnis soll ein Array mit den
Durchschnittswerten der Schüler (Anna, Ben, Clara, David) sein.
</p>
<p>
Durchschnitt pro Fach (<strong>calculateAvgSubjects</strong>): Schreibe eine Funktion, die die
Durchschnittsnote jedes Fachs (spaltenweise) berechnet. Das Ergebnis soll ein Array mit den
Durchschnittswerten der Fächer (Mathematics, English, Biology, History) sein.
</p>
<div class="output alert alert-secondary my-3"></div>
</div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const gradesTable = [
['Name', 'Mathematics', 'English', 'Biology', 'History'],
['Anna', 85, 92, 78, 88],
['Ben', 90, 88, 84, 79],
['Clara', 76, 95, 89, 91],
['David', 82, 79, 91, 85],
];
const calculateAverageGrades = (ar = []) => {
return ar.slice(1).map((row) => {
const grades = row.slice(1); // => [85, 92, 78, 88]
const avgGrades = grades.reduce((a, b) => a + b, 0) / grades.length;
return Number(avgGrades.toFixed(2));
});
};
// [].reduce((INDEX_A, INDEX_B) => {}, INITIAL_VALUE)
console.log(
[85, 92, 78, 88].reduce((sum, n) => {
return Number(sum) + Number(n);
}, 0),
); // => 343
const calculateAvgSubjects = (ar = []) => {
const entries = ar.slice(1);
const grades = entries.map((ar) => ar.slice(1));
console.log(grades);
// [
// []
// [85, 92, 78, 88]
// [90, 88, 84, 79]
// [76, 95, 89, 91]
// [82, 79, 91, 85]
// ]
const results = grades.reduce((resAr, nAr) => {
resAr.push(nAr[0]);
return resAr;
}, []);
console.log(results);
};
console.log(calculateAvgSubjects(gradesTable));
console.log(calculateAverageGrades(gradesTable));
outputEl.textContent = `Average grades of students are: ${calculateAverageGrades().join(' - ')}`;
</script>
</body>
</html>

39
02_advanced/uebungen/u14_avg-scores/index.html
View File

@@ -1,39 +0,0 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 14: Durchschnittsnoten berechnen</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<div class="alert alert-primary">
<h2>Übung 14: Durchschnittsnoten berechnen</h2>
<p>
Schreibe eine Funktion <code>calculateAverageGrades</code>, die die Durchschnittsnote jedes Schülers (ohne
den Namen) berechnet und als neues Array zurückgibt.
</p>
<p>
Die Funktion <code>calculateAverageGrades</code> soll die Durchschnittsnoten jedes Schülers berechnen, indem
sie die Noten in den Fächern zusammenzählt und durch die Anzahl der Fächer teilt. Runde die
Durchschnittswerte auf zwei Dezimalstellen.
</p>
</div>
</div>
</main>
<script>
'use strict';
const gradesTable = [
['Name', 'Mathematics', 'English', 'Biology', 'History'],
['Anna', 85, 92, 78, 88],
['Ben', 90, 88, 84, 79],
['Clara', 76, 95, 89, 91],
['David', 82, 79, 91, 85],
];
</script>
</body>
</html>

24
02_advanced/uebungen/u15_shopping-list/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@@ -33,6 +33,28 @@
]; ];
// Your code here // Your code here
shoppingList[0][2] = 'Grapes';
shoppingList[1][2] = 'Tomatoes';
shoppingList[2][2] = 'Butter';
// Your code here
const changeShoppingList = (arr, changeList = ['Grapes', 'Tomatoes', 'Butter']) => {
return arr.map((elems, idx) => {
elems[2] = changeList[idx];
return elems;
});
};
const newItems = ['Grapes', 'Tomatoes', 'Butter'];
shoppingList.forEach((categories, index) => {
categories.splice(2, 1, newItems[index]);
});
console.log(shoppingList);
console.log(changeShoppingList(shoppingList));
console.log(shoppingList);
</script> </script>
</body> </body>
</html> </html>

10
02_advanced/uebungen/u16_geoquiz/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@@ -36,7 +36,13 @@
['Russia', 'Moscow'], ['Russia', 'Moscow'],
]; ];
const getCapitalOf = () => {}; const getCapitalOf = (country) => {
return countriesWithCapital.find((elemArr) => {
return elemArr[0] === country;
})[1];
};
console.log(getCapitalOf('Switzerland')); // => 'Bern'
</script> </script>
</body> </body>
</html> </html>

9
02_advanced/uebungen/u17_inventory-modification/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@@ -40,7 +40,10 @@
]; ];
// Your code here // Your code here
inventory.push([
['Shelf 1', 'Novels', 40],
['Shelf 2', 'Non-fiction', 35],
]);
console.log(inventory); console.log(inventory);
/* Expected outcome: /* Expected outcome:
[ [
@@ -62,8 +65,6 @@
], ],
] ]
*/ */
// Your code here
</script> </script>
</body> </body>
</html> </html>

5
02_advanced/uebungen/u18_3d-array-selection/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@@ -45,7 +45,8 @@
]; ];
// Your code here // Your code here
inventory[1][1][2] -= 5;
inventory[1][1][2] = 25;
console.log(inventory); console.log(inventory);
/* /*
Expected outcome: Expected outcome:

42
02_advanced/uebungen/u19_brightness-increase/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@@ -27,7 +27,9 @@
<script> <script>
'use strict'; 'use strict';
const image = [ 'use strict';
const imageAr = [
[ [
// Row 1 // Row 1
[100, 150, 200], // Pixel 1 [100, 150, 200], // Pixel 1
@@ -40,12 +42,44 @@
], ],
]; ];
const increaseBrightness = (image, value) => { const increaseBrightness = (imageAr = [], value) => {
// Your code here // Your code here
return imageAr.map((row) => {
return row.map((rgbValue) => {
return rgbValue.map((elem) => {
const result = elem + value;
if (result > 255) {
return 255;
}
return result;
});
});
});
}; };
const newImage = increaseBrightness(image, 30); const increaseBrightness2 = (image, value) => {
const imageAr = image.map((row) => {
const rows = row.map((pixel) => {
const pixels = pixel.map((color) => {
return Math.min(255, color + value);
});
return pixels;
});
return rows;
});
return imageAr;
};
console.time('guard');
const newImage = increaseBrightness(imageAr, 30);
console.log(newImage); console.log(newImage);
console.timeEnd('guard');
console.time('Math');
const newImage2 = increaseBrightness2(imageAr, 30);
console.log(newImage2);
console.timeEnd('Math');
/* /*
Expected outcome: Expected outcome:
[ [

10
02_advanced/uebungen/u20_geoquiz-2/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@@ -35,7 +35,13 @@
['Russia', 'Moscow'], ['Russia', 'Moscow'],
]; ];
const getCountryForCapital = () => {}; const getCountryFor = (capital) => {
return countriesWithCapital.find((elemArr) => {
return elemArr[1] === capital;
})[0];
};
console.log(getCountryFor('Paris')); // => 'France'
</script> </script>
</body> </body>
</html> </html>

3
02_advanced/unterricht/tag16/02_mehrdim-array/index.html
View File

@@ -39,7 +39,7 @@
// Add a new row for another student // Add a new row for another student
gradesTable.push(['David', 82, 79, 91]); gradesTable.push(['David', 82, 79, 91]);
// TODO: optionale Übung: gradeTable in gradesObject über eigene Funktion parseToObj() umwandeln. Tipp: // TODO: optionale Übung: gradeTable in gradesObject über eigene Funktion parseToObj() umwandeln. Tipp: map. Beispiel 01_csv-to-obj.html aus Tag 12
const gradesTableObj = [ const gradesTableObj = [
{ {
@@ -107,6 +107,7 @@
// Access to the second type of vegetable // Access to the second type of vegetable
const secondVegetable = shoppingList[1][2]; // => 'Broccoli' const secondVegetable = shoppingList[1][2]; // => 'Broccoli'
console.log(shoppingList[1][3]); // => 'Spinach'
// =============== // ===============

BIN
webseite-sass-js/MATERIAL/images/openart-02178336133629100000000000000000000ffffc0a86ffd50d283_1783361566237_bdc2e1e2.mp4 Normal file
View File

Binary file not shown.

BIN
webseite-sass-js/MATERIAL/images/openart-gpt-image-2-1_1783357616463_ccd4856a.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 MiB

BIN
webseite-sass-js/MATERIAL/images/openart-gpt-image-2-1_1783357824850_fc91d73d.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 MiB

BIN
webseite-sass-js/MATERIAL/images/openart-image_1783358423666_c0966053_1783358424240_b1f043ff.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 MiB