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-11-02 14:13:12 +01:00
parent 3e77bd3f49
commit 5c5e64aac9
9 changed files with 116 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
07_js-debug/uebungen/u01_bibverwaltung/index.html
+16 -2
View File
@@ -1,12 +1,26 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.css" />
<title>Exercise: Nested If-Statements</title> <title>Exercise: Nested If-Statements</title>
</head> </head>
<body> <body>
<h1>Exercise: Nested If-Statements</h1> <main>
<div class="container py-5">
<h1>Exercise: Nested If-Statements</h1>
<hr />
<div class="alert alert-primary">
<h2>Übung 1: Bibliotheksverwaltung</h2>
<p>
In dieser Übung besteht deine Aufgabe darin, die verschachtelten if-Anweisungen mit Hilfe der Inversion zu
vereinfachen. In der nächsten Übung, in der du auch die Extraktion verwendest, wird deine Lösung verwendet.
Verwende für diese Übung also nur die Inversion.
</p>
</div>
</div>
</main>
<script> <script>
'use strict'; 'use strict';
07_js-debug/uebungen/u02_extraction/index.html
+19 -2
View File
@@ -1,12 +1,29 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.css" />
<title>Exercise: Nested If-Statements</title> <title>Exercise: Nested If-Statements</title>
</head> </head>
<body> <body>
<h1>Exercise: Nested If-Statements</h1> <main>
<div class="container py-5">
<h1>Exercise: Nested If-Statements</h1>
<hr />
<div class="alert alert-primary">
<h2>Übung 2: Bibliotheksverwaltung – Extraktion</h2>
<p>
Diese Übung setzt voraus, dass du die Übung Bibliotheksverwaltung abgeschlossen hast. Du kannst deine eigene
Lösung oder eine Musterlösung für die Übung verwenden.
</p>
<p>
Diesmal machst du den Code lesbarer und übersichtlicher, indem du die Kernlogik in separate Funktionen
extrahierst. Erstelle eine neue Datei, kopiere den Code hinein und wende das Extraktionskonzept an.
</p>
</div>
</div>
</main>
<script> <script>
'use strict'; 'use strict';
07_js-debug/uebungen/u03_dry/index.html
+25 -6
View File
@@ -1,12 +1,31 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Exercise: Don't Repeat Yourself (DRY)</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.css" />
<title>Übung 3: DRY</title>
</head> </head>
<body> <body>
<h1>Exercise: Don't Repeat Yourself (DRY)</h1> <main>
<div class="container py-5">
<h1>Exercise: Don't Repeat Yourself (DRY)</h1>
<hr />
<div class="alert alert-primary">
<h2>Übung 3: DRY</h2>
<p>
In dieser Übung überarbeitest du einen Teil des Codes nach dem DRY-Prinzip (Don't Repeat Yourself). Du
arbeitest mit einem Skript, das Wetterberichte für mehrere Städte protokolliert, einschließlich zusätzlicher
Wetterdaten wie der Windgeschwindigkeit. Deine Aufgabe ist es, Code-Wiederholungen zu vermeiden, indem du
Arrays, Schleifen und Funktionen verwendest.
</p>
<p>
Erstelle eine zusätzliche <code>formatWeatherReport(report)</code> Funktion, die ein Wetterberichtsobjekt
als Parameter annimmt. Sie sollte einen formatierten Wetterberichtstring zurückgeben.
</p>
</div>
</div>
</main>
<script> <script>
'use strict'; 'use strict';
@@ -19,7 +38,7 @@
const description1 = 'Sunny'; const description1 = 'Sunny';
const windSpeed1 = 10; const windSpeed1 = 10;
console.log( console.log(
`Weather in ${city1}: ${temperature1}°F, ${humidity1}% humidity, ${description1}, Wind Speed: ${windSpeed1} mph` `Weather in ${city1}: ${temperature1}°F, ${humidity1}% humidity, ${description1}, Wind Speed: ${windSpeed1} mph`,
); );
// Weather Report 2 // Weather Report 2
@@ -29,7 +48,7 @@
const description2 = 'Partly Cloudy'; const description2 = 'Partly Cloudy';
const windSpeed2 = 7; const windSpeed2 = 7;
console.log( console.log(
`Weather in ${city2}: ${temperature2}°F, ${humidity2}% humidity, ${description2}, Wind Speed: ${windSpeed2} mph` `Weather in ${city2}: ${temperature2}°F, ${humidity2}% humidity, ${description2}, Wind Speed: ${windSpeed2} mph`,
); );
// Weather Report 3 // Weather Report 3
@@ -39,7 +58,7 @@
const description3 = 'Rainy'; const description3 = 'Rainy';
const windSpeed3 = 12; const windSpeed3 = 12;
console.log( console.log(
`Weather in ${city3}: ${temperature3}°F, ${humidity3}% humidity, ${description3}, Wind Speed: ${windSpeed3} mph` `Weather in ${city3}: ${temperature3}°F, ${humidity3}% humidity, ${description3}, Wind Speed: ${windSpeed3} mph`,
); );
} }
07_js-debug/uebungen/u04_dry-benutzerzugang/index.html
+19 -4
View File
@@ -1,13 +1,28 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Advanced If-Else Statements (Enhanced Nesting)</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.css" />
<title>Übung 4: Benutzerzugang verwalten</title>
</head> </head>
<body> <body>
<h1>Advanced If-Else Statements (Enhanced Nesting)</h1> <main>
<div class="container py-5">
<h1>Advanced If-Else Statements (Enhanced Nesting)</h1>
<hr />
<div class="alert alert-primary">
<h2>Übung 4: Benutzerzugang verwalten</h2>
<p>
In dieser Übung ist es deine Aufgabe, den folgenden Code zu vereinfachen und dabei alle Techniken und
Prinzipien anzuwenden, die du bisher gelernt hast. Der vorgegebene Code simuliert ein
Benutzerverwaltungssystem mit verschiedenen Berechtigungen und Zuständen. Dein Ziel ist es, die Funktion
<code>manageUserAccess</code> zu überarbeiten, um die Logik sauberer und lesbarer zu machen, indem du die
Komplexität der verschachtelten Bedingungen reduzierst.
</p>
</div>
</div>
</main>
<script> <script>
'use strict'; 'use strict';
07_js-debug/uebungen/u05_error-format-date/index.html
+7 -4
View File
@@ -1,15 +1,18 @@
<!DOCTYPE html> <!doctype html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 05: FormatDate Fehler</title> <title>Übung 05: formatDate Fehler</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head> </head>
<body> <body>
<main> <main>
<div class="container py-5"> <div class="container py-5">
<h1>Übung 05: FormatDate Fehler</h1> <div class="alert alert-primary">
<h2>Übung 05: formatDate Fehler</h2>
<p>Die Kommentare zeigen das erwartete Ergebnis.</p>
</div>
</div> </div>
</main> </main>
<script> <script>
07_js-debug/uebungen/u06_error-benutzer/index.html
+10 -3
View File
@@ -1,15 +1,22 @@
<!DOCTYPE html> <!doctype html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 6: Benutzer erstellen</title> <title>Übung 6: Benutzer erstellen</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head> </head>
<body> <body>
<main> <main>
<div class="container py-5"> <div class="container py-5">
<h1>Übung 6: Benutzer erstellen</h1> <div class="alert alert-primary">
<h2>Übung 6: Benutzer erstellen</h2>
<p>
Nehmen wir eine anspruchsvollere Syntaxfehlerübung in Angriff. Diese Übung enthält mehrere Syntaxfehler, die
über den gesamten Code verteilt sind. Dein Ziel ist es, alle Syntaxfehler zu identifizieren und zu beheben,
damit der Code korrekt ausgeführt werden kann.
</p>
</div>
</div> </div>
</main> </main>
<script> <script>
07_js-debug/uebungen/u07_check-temperature/index.html
+6 -5
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" />
@@ -9,14 +9,15 @@
<body> <body>
<main> <main>
<div class="container py-5"> <div class="container py-5">
<h1>Übung 7: checkTemperature Fehler</h1> <div class="alert alert-primary">
<p>Versuche, den Code auszuführen, den Fehler zu identifizieren und ihn zu beheben.</p> <h2>Übung 7: checkTemperature Fehler</h2>
<p>Versuche, den Code auszuführen, den Fehler zu identifizieren und ihn zu beheben.</p>
</div>
</div> </div>
</main> </main>
<script> <script>
'use strict'; 'use strict';
function checkTemperature(temperature) { function checkTemperature(temperature) {
const threshold = 30; const threshold = 30;
const message; const message;
@@ -24,7 +25,7 @@
if (temperature > threshold) { if (temperature > threshold) {
message = "It's too hot outside!"; message = "It's too hot outside!";
} else { } else {
message = "The temperature is just right."; message = 'The temperature is just right.';
} }
console.log(message); console.log(message);
07_js-debug/uebungen/u08_benutzer-anzeigen/index.html
+9 -7
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" />
@@ -9,12 +9,14 @@
<body> <body>
<main> <main>
<div class="container py-5"> <div class="container py-5">
<h1>Übung 8: Benutzer anzeigen</h1> <div class="alert alert-primary">
<p> <h2>Übung 8: Benutzer anzeigen</h2>
Der folgende Code enthält mehrere Referenzfehler, die über verschiedene Teile des Codes verteilt sind. Deine <p>
Aufgabe ist es, alle Referenzfehler zu identifizieren und zu beheben, um sicherzustellen, dass der Code Der folgende Code enthält mehrere Referenzfehler, die über verschiedene Teile des Codes verteilt sind. Deine
korrekt läuft. Aufgabe ist es, alle Referenzfehler zu identifizieren und zu beheben, um sicherzustellen, dass der Code
</p> korrekt läuft.
</p>
</div>
</div> </div>
</main> </main>
<script> <script>
07_js-debug/uebungen/u09_parse-user-data/index.html
+5 -3
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" />
@@ -9,8 +9,10 @@
<body> <body>
<main> <main>
<div class="container py-5"> <div class="container py-5">
<h1>Übung 9: parseUserData Fehler</h1> <div class="alert alert-primary">
<p>Die Kommentare zeigen das erwartete Ergebnis.</p> <h2>Übung 9: parseUserData Fehler</h2>
<p>Die Kommentare zeigen das erwartete Ergebnis.</p>
</div>
</div> </div>
</main> </main>
<script> <script>