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-08-18 14:27:34 +02:00
parent c7d26e1cd9
commit c6d9611e81
35 changed files with 1852 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
06_js-debug/faq/divide-example.html Normal file
View File

@@ -0,0 +1,25 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Divide</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">
<h1>Divide</h1>
</div>
</main>
<script>
'use strict';
function divide(a) {
return a / b;
}
console.log(divide(10));
</script>
</body>
</html>

5
06_js-debug/faq/divide.ts Normal file
View File

@@ -0,0 +1,5 @@
function divide(a, b) {
return a / b;
}
console.log(divide(10));

33
06_js-debug/faq/extraction-bsp.html Normal file
View File

@@ -0,0 +1,33 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Extraction sum</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">
<h1>Extraction sum</h1>
</div>
</main>
<script>
'use strict';
const products = [
{ name: 'Product1', price: 10.5 },
{ name: 'Product1', price: 10.5 },
];
// Extraction
const sum = (a, b) => {
return Number(a) + Number(b);
};
const totals = products.map((product) => Number(product.price));
const totalPrice = totals.reduce(sum, 0);
console.log(`total: ${totalPrice}`);
</script>
</body>
</html>

73
06_js-debug/uebungen/u01_bibverwaltung/solution.html Normal file
View File

@@ -0,0 +1,73 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Exercise: Nested If-Statements</title>
</head>
<body>
<h1>Exercise: Nested If-Statements</h1>
<script>
'use strict';
const isLibraryUpdating = false;
const isUserLoggedIn = true;
const hasLibrarianPermissions = true;
const hasBookEditCapability = false;
const hasBookAccess = false;
const bookCollection = [
{
title: 'Book A',
price: 150,
quantity: 5,
},
{
title: 'Book B',
price: 250,
quantity: 0,
},
{
title: 'Book C',
price: 350,
quantity: 10,
},
];
function handleLibraryOperations() {
if (isLibraryUpdating) {
console.log('Library system is currently updating.');
return;
}
if (!isUserLoggedIn) {
console.log('Please log in to manage books.');
return;
}
if (!(hasLibrarianPermissions || (hasBookEditCapability && hasBookAccess))) {
console.log('Insufficient rights to manage books.');
return;
}
bookCollection.forEach((book) => {
console.log(`Book Title: ${book.title}`);
if (book.price > 200) {
console.log('Book price is greater than 200.');
} else {
console.log('Book price is less than or equal to 200.');
}
if (book.quantity > 0) {
console.log('Book is available.');
} else {
console.log('Book is unavailable.');
}
console.log('---');
});
}
handleLibraryOperations();
</script>
</body>
</html>

86
06_js-debug/uebungen/u02_extraction/solution.html Normal file
View File

@@ -0,0 +1,86 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Exercise: Extracted Library Operations</title>
</head>
<body>
<h1>Exercise: Extracted Library Operations</h1>
<script>
'use strict';
const isLibraryUpdating = false;
const isUserLoggedIn = true;
const hasLibrarianPermissions = true;
const hasBookEditCapability = false;
const hasBookAccess = false;
const bookCollection = [
{
title: 'Book A',
price: 150,
quantity: 5,
},
{
title: 'Book B',
price: 250,
quantity: 0,
},
{
title: 'Book C',
price: 350,
quantity: 10,
},
];
function hasManagePermissions() {
return hasLibrarianPermissions || (hasBookEditCapability && hasBookAccess);
}
function printBookDetails(book) {
console.log(`Book Title: ${book.title}`);
if (book.price > 200) {
console.log('Book price is greater than 200.');
} else {
console.log('Book price is less than or equal to 200.');
}
if (book.quantity > 0) {
console.log('Book is available.');
} else {
console.log('Book is unavailable.');
}
console.log('---');
}
function processBookCollection(books) {
books.forEach(printBookDetails);
}
function handleLibraryOperations() {
if (isLibraryUpdating) {
console.log('Library system is currently updating.');
return;
}
if (!isUserLoggedIn) {
console.log('Please log in to manage books.');
return;
}
if (!hasManagePermissions()) {
console.log('Insufficient rights to manage books.');
return;
}
processBookCollection(bookCollection);
}
handleLibraryOperations();
</script>
</body>
</html>

66
06_js-debug/uebungen/u03_dry/solution.html Normal file
View File

@@ -0,0 +1,66 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Exercise: Don't Repeat Yourself (DRY)</title>
</head>
<body>
<h1>Exercise: Don't Repeat Yourself (DRY)</h1>
<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. Erstelle eine zusätzliche formatWeatherReport(report) Funktion, die ein
Wetterberichtsobjekt als Parameter annimmt. Sie sollte einen formatierten Wetterberichtstring zurückgeben.
</p>
<script>
'use strict';
// Declarations ==================
// Wetterdaten als Array von Objekten
const weatherReports = [
{
city: 'New York',
temperature: 85,
humidity: 70,
description: 'Sunny',
windSpeed: 10,
},
{
city: 'Los Angeles',
temperature: 75,
humidity: 60,
description: 'Partly Cloudy',
windSpeed: 7,
},
{
city: 'Chicago',
temperature: 70,
humidity: 65,
description: 'Rainy',
windSpeed: 12,
},
];
// Init =================
const init = () => {
logWeatherReports();
};
// Functions ============
const formatWeatherReport = (report) => {
const { city, temperature: temp, humidity, description: text, windSpeed } = report;
return `Weather in ${city}: ${temp}°F, ${humidity}% humidity, ${text}, Wind Speed: ${windSpeed} mph`;
};
const logWeatherReports = () => {
weatherReports.forEach((report) => {
console.log(formatWeatherReport(report));
});
};
</script>
</body>
</html>

295
06_js-debug/uebungen/u04_dry-benutzerzugang/solution.html Normal file
View File

@@ -0,0 +1,295 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Advanced If-Else Statements (Enhanced Nesting)</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">
<h1>Advanced If-Else Statements (Enhanced Nesting)</h1>
</div>
</main>
<script>
'use strict';
const AVAILABLE_USER_ROLES = ['admin', 'editor', 'viewer'];
const AVAILABLE_USER_DEPARTMENTS = ['engineering', 'marketing', 'sales'];
// IIIFE
(() => {
let isSystemUnderMaintenance = false;
let isUserAuthenticated = true;
let userRole = 'editor'; // Possible roles: 'admin', 'editor', 'viewer'
let hasPremiumAccess = false;
let hasTwoFactorAuth = true;
let accountStatus = 'active'; // Possible statuses: 'active', 'suspended', 'closed'
let userDepartment = 'marketing'; // Possible departments: 'engineering', 'marketing', 'sales'
const userActions = [
{
action: 'viewDashboard',
requiresAdmin: false,
requiresPremium: false,
allowedDepartments: ['engineering', 'marketing', 'sales'],
},
{
action: 'editContent',
requiresAdmin: false,
requiresPremium: true,
allowedDepartments: ['marketing'],
},
{
action: 'manageUsers',
requiresAdmin: true,
requiresPremium: false,
allowedDepartments: ['engineering'],
},
{
action: 'accessAnalytics',
requiresAdmin: true,
requiresPremium: true,
allowedDepartments: ['sales', 'marketing'],
},
{
action: 'deployCode',
requiresAdmin: true,
requiresPremium: true,
allowedDepartments: ['engineering'],
},
];
const fulfillsRequirements = () => {
if (isSystemUnderMaintenance) {
console.log('System is under maintenance. Please try again later.');
return false;
}
if (!isUserAuthenticated) {
console.log('User is not authenticated. Redirecting to login page.');
return false;
}
return true;
};
const accountIsActive = (status) => {
switch (status) {
case 'active':
return true;
case 'closed':
console.log('Account is closed. Access denied.');
return false;
case 'suspended':
console.log('Account is suspended. Contact support.');
return false;
default:
console.log('Unknown account status.');
return false;
}
};
const isAvailableUserRole = (userRole) => {
return AVAILABLE_USER_ROLES.includes(userRole);
};
const isAvailableUserDepartment = (userDepartment) => {
return AVAILABLE_USER_DEPARTMENTS.includes(userDepartment);
};
const processAdminRole = () => {
if (!isAvailableUserDepartment(userDepartment)) {
console.log('Unknown department. Access denied.');
return;
}
userActions.forEach((action) => {
if (action.allowedDepartments.includes(userDepartment)) {
console.log(`Admin (${userDepartment}) accessing: ${action.action}`);
}
});
};
const processEditorRole = () => {
if (!hasPremiumAccess) {
console.log('Premium access required to edit content.');
return;
}
if (userDepartment !== 'marketing') {
console.log('Editors are only allowed in the Marketing department.');
return;
}
userActions.forEach((action) => {
if (action.requiresPremium && action.allowedDepartments.includes(userDepartment)) {
console.log(`Editor (${userDepartment}) accessing: ${action.action}`);
}
});
};
const processViewerRole = () => {
if (userDepartment !== 'sales') {
console.log('Viewers are only allowed in the Sales department.');
return;
}
userActions.forEach((action) => {
if (
!action.requiresAdmin &&
!action.requiresPremium &&
action.allowedDepartments.includes(userDepartment)
) {
console.log(`Viewer (${userDepartment}) accessing: ${action.action}`);
}
});
};
const manageUserAccess = () => {
if (!fulfillsRequirements()) {
return;
}
if (!accountIsActive(accountStatus)) {
return;
}
if (!hasTwoFactorAuth) {
console.log('Two-Factor Authentication is required for access.');
return;
}
if (!isAvailableUserRole(userRole)) {
console.log('Unknown user role. Access denied.');
return;
}
switch (userRole) {
case 'admin':
processAdminRole();
return;
case 'editor':
processEditorRole();
return;
case 'viewer':
processViewerRole();
return;
}
};
// ===== TEST CASES =====
// Test Case 1: System Under Maintenance
console.warn('Test Case 1: System Under Maintenance');
isSystemUnderMaintenance = true;
manageUserAccess(); // => "System is under maintenance. Please try again later."
resetVariables();
// Test Case 2: User Not Authenticated
console.warn('Test Case 2: User Not Authenticated');
isSystemUnderMaintenance = false;
isUserAuthenticated = false;
manageUserAccess(); // => "User is not authenticated. Redirecting to login page."
resetVariables();
// Test Case 3: Account Suspended
console.warn('Test Case 3: Account Suspended');
hasTwoFactorAuth = false;
accountStatus = 'suspended';
manageUserAccess(); // => "Account is suspended. Contact support."
resetVariables();
// Test Case 4: Missing Two-Factor Authentication
console.warn('Test Case 4: Missing Two-Factor Authentication');
hasTwoFactorAuth = false;
accountStatus = 'active';
manageUserAccess(); // => "Two-Factor Authentication is required for access."
resetVariables();
// Test Case 5: Admin Access in Marketing Department
console.warn('Test Case 5: Admin Access in Marketing Department');
userRole = 'admin';
userDepartment = 'marketing';
manageUserAccess();
// Expected Output:
// "Admin (marketing) accessing: viewDashboard"
// "Admin (marketing) accessing: editContent"
// "Admin (marketing) accessing: accessAnalytics"
resetVariables();
// Test Case 6: Editor Without Premium Access
console.warn('Test Case 6: Editor Without Premium Access');
userRole = 'editor';
hasPremiumAccess = false;
manageUserAccess(); // => "Premium access required to edit content."
resetVariables();
// Test Case 7: Editor With Premium Access in Marketing Department
console.warn('Test Case 7: Editor With Premium Access in Marketing Department');
hasPremiumAccess = true;
manageUserAccess();
// Expected Output:
// "Editor (marketing) accessing: editContent"
// "Editor (marketing) accessing: accessAnalytics"
resetVariables();
// Test Case 8: Viewer Access in Sales Department
console.warn('Test Case 8: Viewer Access in Sales Department');
userRole = 'viewer';
userDepartment = 'sales';
manageUserAccess(); // => "Viewer (sales) accessing: viewDashboard"
resetVariables();
// Test Case 9: Unknown User Role
console.warn('Test Case 9: Unknown User Role');
userRole = 'guest';
manageUserAccess(); // => "Unknown user role. Access denied."
resetVariables();
// Test Case 10: Viewer Access in Marketing Department
console.warn('Test Case 10: Viewer Access in Marketing Department');
userRole = 'viewer';
userDepartment = 'marketing';
manageUserAccess(); // => "Viewers are only allowed in the Sales department."
resetVariables();
// Test Case 11: Admin Access in Engineering Department
console.warn('Test Case 11: Admin Access in Engineering Department');
userRole = 'admin';
userDepartment = 'engineering';
manageUserAccess();
// Expected Output:
// "Admin (engineering) accessing: viewDashboard"
// "Admin (engineering) accessing: manageUsers"
// "Admin (engineering) accessing: deployCode"
resetVariables();
// Test Case 12: Editor With Premium Access in Engineering Department
console.warn('Test Case 12: Editor With Premium Access in Engineering Department');
userRole = 'editor';
hasPremiumAccess = true;
userDepartment = 'engineering';
manageUserAccess(); // => "Editors are only allowed in the Marketing department."
resetVariables();
// ===== HELPER FUNCTION =====
function resetVariables() {
isSystemUnderMaintenance = false;
isUserAuthenticated = true;
userRole = 'editor';
hasPremiumAccess = false;
hasTwoFactorAuth = true;
accountStatus = 'active';
userDepartment = 'marketing';
}
})();
</script>
</body>
</html>

43
06_js-debug/uebungen/u05_error-format-date/solution.html Normal file
View File

@@ -0,0 +1,43 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 05: FormatDate Fehler</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<h1>Übung 05: FormatDate Fehler</h1>
</div>
</main>
<script>
'use strict';
function formatDate(date) {
const options = { year: 'numeric', month: 'long', day: 'numeric' };
const formatedDate = date.toLocaleDateString('en-EN', options); // statt undefined 'en-EN'
return formatedDate;
}
// use moment or luxon instead: https://momentjs.com/
const date = new Date();
const days = ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnertag', 'Freitag', 'Samstag'];
const month = date.getMonth() + 1;
const day = date.getDate();
const weekDay = date.getDay();
const year = date.getFullYear();
const hh = date.getHours() < 10 ? `0${date.getHours()}` : date.getHours();
const mm = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes();
const ss = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds();
console.log(`${day}.${month < 10 ? `0${month}` : month}.${year} ${hh}:${mm}:${ss}`);
console.log(formatDate(new Date('2023-05-31'))); // => 'May 31, 2023'
console.log(formatDate(new Date('2024-01-01'))); // => 'January 1, 2024'
</script>
</body>
</html>

2
06_js-debug/uebungen/u06_error-benutzer/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" />

57
06_js-debug/uebungen/u06_error-benutzer/solution.html Normal file
View File

@@ -0,0 +1,57 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 6: Benutzer erstellen</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<h1>Übung 6: Benutzer erstellen</h1>
</div>
</main>
<script>
'use strict';
// Klammer zu hinzugefügt
function createUser(name, email, age) {
return {
name,
email,
age,
greet() {
console.log(`Hello, ${this.name}!`);
},
updateEmail(newEmail) {
this.email = newEmail;
console.log(`Email updated to ${this.email}`);
},
displayAge() {
console.log(`Age is ${this.age}`);
},
}; //geschweifte Klammer zu hinzugefügt
}
const users = [
createUser('Alice', 'alice@example.com', 30),
createUser('Bob', 'bob@example.com', 25),
createUser('Charlie', 'charlie@example.com', 35),
];
users.forEach((user) => {
user.greet();
user.updateEmail(`new_${user.email}`);
});
console.log(users);
function calculateTotal(...numbers) {
return numbers.reduce((a, b) => Number(a) + Number(b), 0);
}
console.log('Total:', calculateTotal(10, 20, 30)); //Komma hinzugefügt
console.log('Total:', calculateTotal()); //=> 0
</script>
</body>
</html>

39
06_js-debug/uebungen/u07_check-temperature/solution.html Normal file
View File

@@ -0,0 +1,39 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 7: checkTemperature Fehler</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">
<h1>Übung 7: checkTemperature Fehler</h1>
<p>Versuche, den Code auszuführen, den Fehler zu identifizieren und ihn zu beheben.</p>
</div>
</main>
<script>
'use strict';
function checkTemperature(temperature) {
const threshold = 30;
// let message = '';
// if (temperature > threshold) {
// message = "It's too hot outside!";
// } else {
// message = 'The temperature is just right.';
// }
const message = temperature > threshold ? "It's too hot outside!" : 'The temperature is just right.';
return message;
// console.log(message);
}
console.log(checkTemperature(25)); // => "The temperature is just right."
console.log(checkTemperature(35)); // => "It's too hot outside!"
</script>
</body>
</html>

56
06_js-debug/uebungen/u08_benutzer-anzeigen/solution.html Normal file
View File

@@ -0,0 +1,56 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 8: Benutzer anzeigen</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">
<h1>Übung 8: Benutzer anzeigen</h1>
<p>
Der folgende Code enthält mehrere Referenzfehler, die über verschiedene Teile des Codes verteilt sind. Deine
Aufgabe ist es, alle Referenzfehler zu identifizieren und zu beheben, um sicherzustellen, dass der Code
korrekt läuft.
</p>
</div>
</main>
<script>
'use strict';
const userName = 'Emily';
const age = 67; // Alter hinzugefügt
function displayUserInfo() {
console.log(`User Name: ${userName}`); //user => userName
console.log(`User Age: ${age}`);
}
displayUserInfo();
function updateEmail(newEmail) {
const userEmail = newEmail; //const hinzugefügt, da neu
console.log('Email updated to ' + userEmail);
}
updateEmail('emily@example.com');
const calculateBmi = (weight, height) => weight / height ** 2;
const bmi = calculateBmi(70, 1.75);
console.log('BMI:', bmi);
function greetUser(name) {
if (name === 'Emily') {
console.log(`Welcome back, ${name}!`);
} else {
console.log(`Hello, ${name}!`); //Name -> name
}
}
greetUser('Michael'); //greetuser -> greetUser
</script>
</body>
</html>

55
06_js-debug/uebungen/u09_parse-user-data/solution.html Normal file
View File

@@ -0,0 +1,55 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 9: parseUserData Fehler</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">
<h1>Übung 9: parseUserData Fehler</h1>
<p>Die Kommentare zeigen das erwartete Ergebnis.</p>
</div>
</main>
<script>
'use strict';
function parseUserData(jsonString) {
try {
const userData = JSON.parse(jsonString);
// hinzugefügt
if (typeof userData.name === 'undefined') {
return 'Error: name ist nicht vorhanden!';
}
if (typeof userData.age === 'undefined') {
return 'Error: age ist nicht angegeben';
}
if (typeof userData.name !== 'string') {
return 'Error: name ist nicht vom Typ string!';
}
if (typeof userData.age !== 'number') {
return 'Error: age ist nicht vom Typ number';
}
// end
return `User: ${userData.name}, Age: ${userData.age}`;
} catch (error) {
if (error instanceof Error) {
return `Error: ${error.message}`;
}
return error;
}
}
console.log(parseUserData('{"name": "Alice", "age": 30}')); // => 'User: Alice, Age: 30'
console.log(parseUserData('{"name": "Bob", "age": "thirty"}')); // => 'Error: Invalid data types'
console.log(parseUserData('{"age": "thirty"}')); // => 'Error: Invalid data types'
console.log(parseUserData('{"name": "Bob"}')); // => 'Error: Invalid data types'
</script>
</body>
</html>

40
06_js-debug/uebungen/u10_einkaufspreis/solution.js Normal file
View File

@@ -0,0 +1,40 @@
function calculateTotalPrice(items) {
let total = 0;
items.forEach((item) => {
total += Number(item.price); // Number parsen
});
return Number(total.toFixed(2));
}
const shoppingCart = [
{ name: 'Laptop', price: 999.99 },
{ name: 'Smartphone', price: 599.99 }, // string zu zahl
{ name: 'Headphones', price: 199.99 }, // cost -> price
];
const totalPrice = calculateTotalPrice(shoppingCart);
console.log('Total Price:', Number(totalPrice).toFixed(2));
function displayUserProfile(user) {
console.log(`Name: ${user.name}`);
console.log(`Age: ${user.age}`);
console.log(`Email: ${user.email.toLowerCase()}`);
}
const userProfile = {
name: 'Sarah',
age: 'twenty-five',
email: 'SARAH@EXAMPLE.COM',
};
displayUserProfile(userProfile);
function getFirstItemName(items) {
return items[0].name.toUpperCase();
}
console.log('First Item:', getFirstItemName(shoppingCart)); // => LAPTOP
const numberList = '1,2,3,4,5';
const sum = numberList.split(',').reduce((acc, num) => acc + Number(num), 0); //mit split zu einem arr
console.log('Sum:', sum); // => 15

8
06_js-debug/uebungen/u11_calculate-avg-error/index.js Normal file
View File

@@ -0,0 +1,8 @@
function calculateAverage(numbers) {
const total = numbers.reduce((sum, num) => sum + num, 10);
const average = total / numbers;
return average;
}
console.log(calculateAverage([10, 20, 30])); // => 20
console.log(calculateAverage([5, 15, 25, 35])); // => 20

0
webseite-simple/assets/css/main.css → 06_js-debug/uebungen/u11_calculate-avg-error/solution.js
View File

14
06_js-debug/uebungen/u12_find-maximum-error/index.js Normal file
View File

@@ -0,0 +1,14 @@
// logical error
function findMaximum(a, b, c) {
if (a > b && a > c) {
return a;
} else if (b > a && b > c) {
return b;
} else {
return c;
}
}
console.log(findMaximum(1, 2, 3)); // => 3
console.log(findMaximum(102, 59, 18)); // => 102
console.log(findMaximum(532, 532, 345)); // => 532

0
webseite-simple/assets/js/main.js → 06_js-debug/uebungen/u12_find-maximum-error/solution.js
View File

17
06_js-debug/uebungen/u13_temp-converter/assets/js/main.js Normal file
View File

@@ -0,0 +1,17 @@
'use strict';
(() => {
// === DOM & VARS =======
const DOM = {};
// === INIT =============
const init = () => {};
// === EVENTHANDLER =====
// === XHR/FETCH ========
// === FUNCTIONS ========
init();
})();

45
06_js-debug/uebungen/u13_temp-converter/assets/js/preset.js Normal file
View File

@@ -0,0 +1,45 @@
'use strict';
(() => {
// ===== DOM =====
const DOM = {
temperatureForm: document.querySelector('#temperatureForm'),
celsiusInput: document.querySelector('#celsius'),
result: document.querySelector('#result'),
};
// ===== INIT =====
const init = () => {
DOM.temperatureForm.addEventListener('submit', handleFormSubmit);
};
// ===== EVENT HANDLERS =====
function handleFormSubmit(e) {
const celsius = DOM.celsiusInput.value;
if (!isNaN(celsius)) {
alert('Please enter a valid number');
return;
}
const fahrenheit = convertToFahrenheit(celsius);
displayResult(fahrenheit);
DOM.temperatureForm.reset();
}
// ===== FUNCTIONS =====
function convertToFahrenheit(celsius) {
if (typeof celsius === 'string') return 0;
return (celsius * 9) / 5 + 32;
}
function displayResult(result) {
DOM.result.textContent = result.toFixed(2);
}
// ===== CALL INIT =====
init();
})();

32
06_js-debug/uebungen/u13_temp-converter/index.html Normal file
View File

@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Temperature Converter</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="assets/js/main.js" defer></script>
</head>
<body>
<div class="container py-5">
<h1>Temperature Converter</h1>
<form id="temperatureForm" class="mt-4">
<div class="col col-12 col-sm-10 col-lg-6">
<div class="row mb-3 align-items-center">
<label for="celsius" class="col-md-3 col-form-label">Celsius:</label>
<div class="col-sm-8">
<input type="text" id="celsius" name="celsius" class="form-control" required />
</div>
</div>
</div>
<div class="mt-4 w-100">
<button type="submit" id="convertBtn" class="btn btn-primary">Convert to Fahrenheit</button>
</div>
</form>
<div class="alert alert-light mt-4"><strong>Result</strong>: <span id="result"></span> °F</div>
</div>
</body>
</html>

51
06_js-debug/uebungen/u14_counter-error/index.html Normal file
View File

@@ -0,0 +1,51 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Counter Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container py-5">
<h1>Counter</h1>
<div class="row mt-4">
<div class="col col-12 col-sm-10 col-lg-6">
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">Count:</span>
<input type="text" id="count" class="form-control" value="0" readonly />
</div>
<button id="incrementButton" class="btn btn-primary w-100">Increment</button>
</div>
</div>
</div>
<script>
'use strict';
(() => {
// ===== DOM & VARS =====
const countEl = document.querySelector('#count');
const btnEl = document.querySelector('#incrementButton');
let counter = { count: 0 };
// ===== INIT =====
const init = () => {
btnEl.addEventListener('click', onClickIncrement);
};
// ===== EVENT HANDLER =====
function onClickIncrement() {
let count = counter.count;
count++;
countEl.value = counter.count;
}
// ===== CALL INIT =====
init();
})();
</script>
</body>
</html>

44
06_js-debug/uebungen/u14_counter-error/solution.html Normal file
View File

@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Counter Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container py-5">
<h1>Counter</h1>
<div class="row mt-4">
<div class="col col-12 col-sm-10 col-lg-6">
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">Count:</span>
<input type="text" id="count" class="form-control" value="0" readonly />
</div>
<button id="incrementButton" class="btn btn-primary w-100">Increment</button>
</div>
</div>
</div>
<script>
'use strict';
(() => {
// === DOM & VARS =======
const DOM = {};
// === INIT =============
const init = () => {};
// === EVENTHANDLER =====
// === XHR/FETCH ========
// === FUNCTIONS ========
init();
})();
</script>
</body>
</html>

BIN
06_js-debug/uebungen/uebungen-11-14-js-debug.zip Normal file
View File

Binary file not shown.

4
06_js-debug/unterricht/tag46/03_dry/03_range-helper.js
View File

@@ -91,3 +91,7 @@ function range(startOrEnd, end, step) {
return rangeFromStartToEnd(0, startOrEnd); return rangeFromStartToEnd(0, startOrEnd);
} }
} }
// range(5); // => [0, 1, 2, 3, 4]
// range(1, 5); // => [1, 2, 3, 4]
// range(0, 20, 5); // => [0, 5, 10, 15]

2
06_js-debug/unterricht/tag46/04_error-types/03_type-error.html
View File

@@ -33,6 +33,8 @@
console.log('Hello, ' + name); // => 'Hello, 42' <- implizite Typkonvertierung console.log('Hello, ' + name); // => 'Hello, 42' <- implizite Typkonvertierung
} }
console.log(3 <= '3px'); // <- implizite Typkonvertierung -> 3 <= NaN -> false
greet(42); greet(42);
} }
</script> </script>

10
06_js-debug/unterricht/tag46/05_logical-error/logical-error.html
View File

@@ -19,11 +19,11 @@
{ {
const n = 10; const n = 10;
// if (n % 2 === 0) { if (n % 2 === 0) {
// console.log('odd'); // Annahme vertauscht console.log('odd'); // Annahme vertauscht
// } else { } else {
// console.log('even'); console.log('even');
// } }
// const evenNumbers = _.range(11).filter((n) => n % 2); // const evenNumbers = _.range(11).filter((n) => n % 2);
const evenNumbers = _.range(11).filter((n) => n % 2 === 0); const evenNumbers = _.range(11).filter((n) => n % 2 === 0);

57
06_js-debug/unterricht/tag47/01_demo-form-bug/assets/js/main.js Normal file
View File

@@ -0,0 +1,57 @@
'use strict';
(() => {
// ===== DOM =====
const DOM = {
calculateForm: document.querySelector('#calculateForm'),
firstNumberInput: document.querySelector('#firstNumber'),
secondNumberInput: document.querySelector('#secondNumber'),
result: document.querySelector('#result'),
};
// console.log(DOM);
// ===== INIT =====
const init = () => {
DOM.calculateForm.noValidate = true; // DOM.calculateForm.setAttribute('novalidate','');
DOM.calculateForm.addEventListener('submit', handleFormSubmit);
};
// ===== EVENT HANDLERS =====
function handleFormSubmit(e) {
e.preventDefault();
if (hasInputsEmptyValues(DOM.firstNumberInput, DOM.secondNumberInput)) {
alert('Please enter a number in both fields');
return;
}
const num1 = getNumberValue(DOM.firstNumberInput);
const num2 = getNumberValue(DOM.secondNumberInput);
const sum = add(num1, num2);
displayResult(sum);
DOM.calculateForm.reset();
}
// ===== FUNCTIONS =====
const hasInputsEmptyValues = (inputOne, inputTwo) => {
// if (inputOne.value === '' || inputTwo.value === '') {
// return true;
// } else {
// return false;
// }
return inputOne.value === '' || inputTwo.value === '';
};
const getNumberValue = (input) => Number(input.value);
const add = (a, b) => Number(a) + Number(b);
const displayResult = (result) => {
DOM.result.textContent = result;
};
// ===== CALL INIT =====
init();
})();

41
06_js-debug/unterricht/tag47/01_demo-form-bug/index.html Normal file
View File

@@ -0,0 +1,41 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Debugging Demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="assets/js/main.js" defer></script>
</head>
<body>
<div class="container py-5">
<h1>Debugging Demo</h1>
<form id="calculateForm" class="mt-4">
<div class="col col-12 col-sm-10 col-lg-6">
<div class="row mb-3 align-items-center">
<label for="firstNumber" class="col-md-3 col-form-label">Number #1:</label>
<div class="col-sm-8">
<input type="number" id="firstNumber" name="firstNumber" class="form-control" required />
</div>
</div>
</div>
<div class="col col-12 col-sm-10 col-lg-6">
<div class="row mb-3 align-items-center">
<label for="secondNumber" class="col-md-3 col-form-label">Number #2:</label>
<div class="col-sm-8">
<input type="number" id="secondNumber" name="secondNumber" class="form-control" required />
</div>
</div>
</div>
<div class="mt-4 w-100">
<button type="submit" id="calculateBtn" class="btn btn-primary">Add Numbers</button>
</div>
</form>
<div class="alert alert-light mt-4"><strong>Result</strong>: <span id="result"></span></div>
</div>
</body>
</html>

644
06_js-debug/unterricht/tag47/01_demo-form-bug/package-lock.json generated Normal file
View File

@@ -0,0 +1,644 @@
{
"name": "01_demo-form-bug",
"version": "1.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "01_demo-form-bug",
"version": "1.0.0",
"devDependencies": {
"http-server": "^14.1.1"
}
},
"node_modules/ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"license": "MIT",
"dependencies": {
"color-convert": "^2.0.1"
},
"engines": {
"node": ">=8"
},
"funding": {
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
}
},
"node_modules/async": {
"version": "3.2.6",
"resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
"integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
"dev": true,
"license": "MIT"
},
"node_modules/basic-auth": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
"integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==",
"dev": true,
"license": "MIT",
"dependencies": {
"safe-buffer": "5.1.2"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/call-bind-apply-helpers": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
"integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"es-errors": "^1.3.0",
"function-bind": "^1.1.2"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/call-bound": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
"integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
"dev": true,
"license": "MIT",
"dependencies": {
"call-bind-apply-helpers": "^1.0.2",
"get-intrinsic": "^1.3.0"
},
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dev": true,
"license": "MIT",
"dependencies": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
},
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/chalk/chalk?sponsor=1"
}
},
"node_modules/color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"color-name": "~1.1.4"
},
"engines": {
"node": ">=7.0.0"
}
},
"node_modules/color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"license": "MIT"
},
"node_modules/corser": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz",
"integrity": "sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4.0"
}
},
"node_modules/debug": {
"version": "4.4.3",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
"integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
"dev": true,
"license": "MIT",
"dependencies": {
"ms": "^2.1.3"
},
"engines": {
"node": ">=6.0"
},
"peerDependenciesMeta": {
"supports-color": {
"optional": true
}
}
},
"node_modules/dunder-proto": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
"integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
"dev": true,
"license": "MIT",
"dependencies": {
"call-bind-apply-helpers": "^1.0.1",
"es-errors": "^1.3.0",
"gopd": "^1.2.0"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/es-define-property": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
"integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4"
}
},
"node_modules/es-errors": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4"
}
},
"node_modules/es-object-atoms": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz",
"integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==",
"dev": true,
"license": "MIT",
"dependencies": {
"es-errors": "^1.3.0"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/eventemitter3": {
"version": "4.0.7",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
"integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
"dev": true,
"license": "MIT"
},
"node_modules/follow-redirects": {
"version": "1.16.0",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
"integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
"dev": true,
"funding": [
{
"type": "individual",
"url": "https://github.com/sponsors/RubenVerborgh"
}
],
"license": "MIT",
"engines": {
"node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
}
},
"node_modules/function-bind": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
"dev": true,
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/get-intrinsic": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
"integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"call-bind-apply-helpers": "^1.0.2",
"es-define-property": "^1.0.1",
"es-errors": "^1.3.0",
"es-object-atoms": "^1.1.1",
"function-bind": "^1.1.2",
"get-proto": "^1.0.1",
"gopd": "^1.2.0",
"has-symbols": "^1.1.0",
"hasown": "^2.0.2",
"math-intrinsics": "^1.1.0"
},
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/get-proto": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
"integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
"dev": true,
"license": "MIT",
"dependencies": {
"dunder-proto": "^1.0.1",
"es-object-atoms": "^1.0.0"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/gopd": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
"integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=8"
}
},
"node_modules/has-symbols": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
"integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/hasown": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz",
"integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==",
"dev": true,
"license": "MIT",
"dependencies": {
"function-bind": "^1.1.2"
},
"engines": {
"node": ">= 0.4"
}
},
"node_modules/he": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
"dev": true,
"license": "MIT",
"bin": {
"he": "bin/he"
}
},
"node_modules/html-encoding-sniffer": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz",
"integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==",
"dev": true,
"license": "MIT",
"dependencies": {
"whatwg-encoding": "^2.0.0"
},
"engines": {
"node": ">=12"
}
},
"node_modules/http-proxy": {
"version": "1.18.1",
"resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
"integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"eventemitter3": "^4.0.0",
"follow-redirects": "^1.0.0",
"requires-port": "^1.0.0"
},
"engines": {
"node": ">=8.0.0"
}
},
"node_modules/http-server": {
"version": "14.1.1",
"resolved": "https://registry.npmjs.org/http-server/-/http-server-14.1.1.tgz",
"integrity": "sha512-+cbxadF40UXd9T01zUHgA+rlo2Bg1Srer4+B4NwIHdaGxAGGv59nYRnGGDJ9LBk7alpS0US+J+bLLdQOOkJq4A==",
"dev": true,
"license": "MIT",
"dependencies": {
"basic-auth": "^2.0.1",
"chalk": "^4.1.2",
"corser": "^2.0.1",
"he": "^1.2.0",
"html-encoding-sniffer": "^3.0.0",
"http-proxy": "^1.18.1",
"mime": "^1.6.0",
"minimist": "^1.2.6",
"opener": "^1.5.1",
"portfinder": "^1.0.28",
"secure-compare": "3.0.1",
"union": "~0.5.0",
"url-join": "^4.0.1"
},
"bin": {
"http-server": "bin/http-server"
},
"engines": {
"node": ">=12"
}
},
"node_modules/iconv-lite": {
"version": "0.6.3",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
"dev": true,
"license": "MIT",
"dependencies": {
"safer-buffer": ">= 2.1.2 < 3.0.0"
},
"engines": {
"node": ">=0.10.0"
}
},
"node_modules/math-intrinsics": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
"integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4"
}
},
"node_modules/mime": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
"dev": true,
"license": "MIT",
"bin": {
"mime": "cli.js"
},
"engines": {
"node": ">=4"
}
},
"node_modules/minimist": {
"version": "1.2.8",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
"integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
"dev": true,
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/ms": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
"dev": true,
"license": "MIT"
},
"node_modules/object-inspect": {
"version": "1.13.4",
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
"integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/opener": {
"version": "1.5.2",
"resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz",
"integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==",
"dev": true,
"license": "(WTFPL OR MIT)",
"bin": {
"opener": "bin/opener-bin.js"
}
},
"node_modules/portfinder": {
"version": "1.0.38",
"resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.38.tgz",
"integrity": "sha512-rEwq/ZHlJIKw++XtLAO8PPuOQA/zaPJOZJ37BVuN97nLpMJeuDVLVGRwbFoBgLudgdTMP2hdRJP++H+8QOA3vg==",
"dev": true,
"license": "MIT",
"dependencies": {
"async": "^3.2.6",
"debug": "^4.3.6"
},
"engines": {
"node": ">= 10.12"
}
},
"node_modules/qs": {
"version": "6.15.3",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.15.3.tgz",
"integrity": "sha512-O9gl3zCl5h5blw1KGUzQKhA5oUXSl8rwUIM5o0S3nCXMliSvy5Dzx7/DJcI+SwgICv+IneSZwhBh1oSyEHA71A==",
"dev": true,
"license": "BSD-3-Clause",
"dependencies": {
"es-define-property": "^1.0.1",
"side-channel": "^1.1.1"
},
"engines": {
"node": ">=0.6"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/requires-port": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
"integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
"dev": true,
"license": "MIT"
},
"node_modules/safe-buffer": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
"integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
"dev": true,
"license": "MIT"
},
"node_modules/safer-buffer": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
"dev": true,
"license": "MIT"
},
"node_modules/secure-compare": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz",
"integrity": "sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw==",
"dev": true,
"license": "MIT"
},
"node_modules/side-channel": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.1.tgz",
"integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"es-errors": "^1.3.0",
"object-inspect": "^1.13.4",
"side-channel-list": "^1.0.1",
"side-channel-map": "^1.0.1",
"side-channel-weakmap": "^1.0.2"
},
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/side-channel-list": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz",
"integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
"dev": true,
"license": "MIT",
"dependencies": {
"es-errors": "^1.3.0",
"object-inspect": "^1.13.4"
},
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/side-channel-map": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
"integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
"dev": true,
"license": "MIT",
"dependencies": {
"call-bound": "^1.0.2",
"es-errors": "^1.3.0",
"get-intrinsic": "^1.2.5",
"object-inspect": "^1.13.3"
},
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/side-channel-weakmap": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
"integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
"dev": true,
"license": "MIT",
"dependencies": {
"call-bound": "^1.0.2",
"es-errors": "^1.3.0",
"get-intrinsic": "^1.2.5",
"object-inspect": "^1.13.3",
"side-channel-map": "^1.0.1"
},
"engines": {
"node": ">= 0.4"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"license": "MIT",
"dependencies": {
"has-flag": "^4.0.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/union": {
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz",
"integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==",
"dev": true,
"dependencies": {
"qs": "^6.4.0"
},
"engines": {
"node": ">= 0.8.0"
}
},
"node_modules/url-join": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz",
"integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==",
"dev": true,
"license": "MIT"
},
"node_modules/whatwg-encoding": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
"integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==",
"deprecated": "Use @exodus/bytes instead for a more spec-conformant and faster implementation",
"dev": true,
"license": "MIT",
"dependencies": {
"iconv-lite": "0.6.3"
},
"engines": {
"node": ">=12"
}
}
}
}

14
06_js-debug/unterricht/tag47/01_demo-form-bug/package.json Normal file
View File

@@ -0,0 +1,14 @@
{
"name": "01_demo-form-bug",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "npx http-server -c-1 -p 3000"
},
"keywords": [],
"type": "module",
"devDependencies": {
"http-server": "^14.1.1"
}
}

31
webseite-simple/about.html
View File

@@ -1,31 +0,0 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Webseite</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="/assets/css/main.css" />
<script src="/assets/js/main.js" defer></script>
</head>
<body>
<nav class="menu-main">
<ul>
<li><a href="/">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="imprint.html">Imprint</a></li>
</ul>
</nav>
<main>
<div class="container py-5">
<h1>About</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis ullam obcaecati iure quisquam odio qui
minima aspernatur tenetur praesentium rerum, tempore in veritatis quibusdam eum reprehenderit necessitatibus
corrupti facere dolor!
</p>
</div>
</main>
</body>
</html>

31
webseite-simple/contact.html
View File

@@ -1,31 +0,0 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Webseite</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="/assets/css/main.css" />
<script src="/assets/js/main.js" defer></script>
</head>
<body>
<nav class="menu-main">
<ul>
<li><a href="/">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="imprint.html">Imprint</a></li>
</ul>
</nav>
<main>
<div class="container py-5">
<h1>Home</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis ullam obcaecati iure quisquam odio qui
minima aspernatur tenetur praesentium rerum, tempore in veritatis quibusdam eum reprehenderit necessitatibus
corrupti facere dolor!
</p>
</div>
</main>
</body>
</html>

31
webseite-simple/imprint.html
View File

@@ -1,31 +0,0 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Webseite</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="/assets/css/main.css" />
<script src="/assets/js/main.js" defer></script>
</head>
<body>
<nav class="menu-main">
<ul>
<li><a href="/">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="imprint.html">Imprint</a></li>
</ul>
</nav>
<main>
<div class="container py-5">
<h1>Home</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis ullam obcaecati iure quisquam odio qui
minima aspernatur tenetur praesentium rerum, tempore in veritatis quibusdam eum reprehenderit necessitatibus
corrupti facere dolor!
</p>
</div>
</main>
</body>
</html>

31
webseite-simple/index.html
View File

@@ -1,31 +0,0 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Webseite</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="/assets/css/main.css" />
<script src="/assets/js/main.js" defer></script>
</head>
<body>
<nav class="menu-main">
<ul>
<li><a href="/">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="imprint.html">Imprint</a></li>
</ul>
</nav>
<main>
<div class="container py-5">
<h1>Home</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis ullam obcaecati iure quisquam odio qui
minima aspernatur tenetur praesentium rerum, tempore in veritatis quibusdam eum reprehenderit necessitatibus
corrupti facere dolor!
</p>
</div>
</main>
</body>
</html>