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-17 14:24:43 +02:00
parent 2f8cd0b61e
commit c7d26e1cd9
17 changed files with 1255 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
06_js-debug/uebungen/u01_bibverwaltung/index.html Normal file
View File

@@ -0,0 +1,70 @@
<!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) {
if (isUserLoggedIn) {
if (hasLibrarianPermissions || (hasBookEditCapability && hasBookAccess)) {
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('---');
});
} else {
console.log('Insufficient rights to manage books.');
}
} else {
console.log('Please log in to manage books.');
}
} else {
console.log('Library system is currently updating.');
}
}
handleLibraryOperations();
</script>
</body>
</html>

70
06_js-debug/uebungen/u02_extraction/index.html Normal file
View File

@@ -0,0 +1,70 @@
<!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) {
if (isUserLoggedIn) {
if (hasLibrarianPermissions || (hasBookEditCapability && hasBookAccess)) {
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('---');
});
} else {
console.log('Insufficient rights to manage books.');
}
} else {
console.log('Please log in to manage books.');
}
} else {
console.log('Library system is currently updating.');
}
}
handleLibraryOperations();
</script>
</body>
</html>

49
06_js-debug/uebungen/u03_dry/index.html Normal file
View File

@@ -0,0 +1,49 @@
<!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>
<script>
'use strict';
function logWeatherReports() {
// Weather Report 1
const city1 = 'New York';
const temperature1 = 85;
const humidity1 = 70;
const description1 = 'Sunny';
const windSpeed1 = 10;
console.log(
`Weather in ${city1}: ${temperature1}°F, ${humidity1}% humidity, ${description1}, Wind Speed: ${windSpeed1} mph`
);
// Weather Report 2
const city2 = 'Los Angeles';
const temperature2 = 75;
const humidity2 = 60;
const description2 = 'Partly Cloudy';
const windSpeed2 = 7;
console.log(
`Weather in ${city2}: ${temperature2}°F, ${humidity2}% humidity, ${description2}, Wind Speed: ${windSpeed2} mph`
);
// Weather Report 3
const city3 = 'Chicago';
const temperature3 = 70;
const humidity3 = 65;
const description3 = 'Rainy';
const windSpeed3 = 12;
console.log(
`Weather in ${city3}: ${temperature3}°F, ${humidity3}% humidity, ${description3}, Wind Speed: ${windSpeed3} mph`
);
}
logWeatherReports();
</script>
</body>
</html>

246
06_js-debug/uebungen/u04_dry-benutzerzugang/index.html Normal file
View File

@@ -0,0 +1,246 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Advanced If-Else Statements (Enhanced Nesting)</title>
</head>
<body>
<h1>Advanced If-Else Statements (Enhanced Nesting)</h1>
<script>
'use strict';
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'],
},
];
function manageUserAccess() {
if (isSystemUnderMaintenance) {
console.log('System is under maintenance. Please try again later.');
return;
}
if (!isUserAuthenticated) {
console.log('User is not authenticated. Redirecting to login page.');
return;
}
if (accountStatus !== 'active') {
if (accountStatus === 'suspended') {
console.log('Account is suspended. Contact support.');
} else if (accountStatus === 'closed') {
console.log('Account is closed. Access denied.');
} else {
console.log('Unknown account status.');
}
return;
}
if (!hasTwoFactorAuth) {
console.log('Two-Factor Authentication is required for access.');
return;
}
if (userRole === 'admin') {
if (userDepartment === 'engineering') {
userActions.forEach((action) => {
if (action.allowedDepartments.includes(userDepartment)) {
console.log(`Admin (${userDepartment}) accessing: ${action.action}`);
}
});
} else if (userDepartment === 'marketing') {
userActions.forEach((action) => {
if (action.allowedDepartments.includes(userDepartment)) {
console.log(`Admin (${userDepartment}) accessing: ${action.action}`);
}
});
} else if (userDepartment === 'sales') {
userActions.forEach((action) => {
if (action.allowedDepartments.includes(userDepartment)) {
console.log(`Admin (${userDepartment}) accessing: ${action.action}`);
}
});
} else {
console.log('Unknown department. Access denied.');
}
} else if (userRole === 'editor') {
if (!hasPremiumAccess) {
console.log('Premium access required to edit content.');
return;
}
if (userDepartment === 'marketing') {
userActions.forEach((action) => {
if (action.requiresPremium && action.allowedDepartments.includes(userDepartment)) {
console.log(`Editor (${userDepartment}) accessing: ${action.action}`);
}
});
} else {
console.log('Editors are only allowed in the Marketing department.');
return;
}
} else if (userRole === 'viewer') {
if (userDepartment === 'sales') {
userActions.forEach((action) => {
if (
!action.requiresAdmin &&
!action.requiresPremium &&
action.allowedDepartments.includes(userDepartment)
) {
console.log(`Viewer (${userDepartment}) accessing: ${action.action}`);
}
});
} else {
console.log('Viewers are only allowed in the Sales department.');
return;
}
} else {
console.log('Unknown user role. Access denied.');
}
}
// ===== 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>

27
06_js-debug/uebungen/u05_error-format-date/index.html Normal file
View File

@@ -0,0 +1,27 @@
<!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' };
formatedDate = date.toLocaleDateString(undefined, options);
return formattedDate;
}
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>

51
06_js-debug/uebungen/u06_error-benutzer/index.html Normal file
View File

@@ -0,0 +1,51 @@
<!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';
function createUser(name, email, age {
return {
name: name,
email: email,
age: age,
greet: () => {
console.log("Hello, " + name + "!");
},
updateEmail(newEmail) {
email = newEmail;
console.log("Email updated to " + newEmail);
}
;
}
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);
});
function calculateTotal(a, b, c) {
return a + b + c;
}
console.log("Total:", calculateTotal(10, 20 30));
</script>
</body>
</html>

37
06_js-debug/uebungen/u07_check-temperature/index.html Normal file
View File

@@ -0,0 +1,37 @@
<!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;
const message;
if (temperature > threshold) {
message = "It's too hot outside!";
} else {
message = "The temperature is just right.";
}
console.log(message);
}
checkTemperature(25); // => "The temperature is just right."
checkTemperature(35); // => "It's too hot outside!"
</script>
</body>
</html>

57
06_js-debug/uebungen/u08_benutzer-anzeigen/index.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 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';
function displayUserInfo() {
console.log('User Name: ' + user);
console.log('User Age: ' + age);
}
displayUserInfo();
function updateEmail(newEmail) {
userEmail = newEmail;
console.log('Email updated to ' + userEmail);
}
updateEmail('emily@example.com');
function calculateBMI(weight, height) {
return weight / (height * height);
}
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 + '!');
}
}
greetuser('Michael');
</script>
</body>
</html>

32
06_js-debug/uebungen/u09_parse-user-data/index.html Normal file
View File

@@ -0,0 +1,32 @@
<!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);
return `User: ${userData.name}, Age: ${userData.age}`;
} catch (error) {
return `Error: ${error.message}`;
}
}
console.log(parseUserData('{"name": "Alice", "age": 30}')); // => 'User: Alice, Age: 30'
console.log(parseUserData('{"name": "Bob", "age": "thirty"}')); // => 'Error: Invalid data types'
</script>
</body>
</html>

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

@@ -0,0 +1,40 @@
function calculateTotalPrice(items) {
let total = 0;
items.forEach((item) => {
total += item.price;
});
return total.toFixed(2);
}
const shoppingCart = [
{ name: 'Laptop', price: 999.99 },
{ name: 'Smartphone', price: '599.99' },
{ name: 'Headphones', cost: 199.99 },
];
const totalPrice = calculateTotalPrice(shoppingCart);
console.log('Total Price:', totalPrice);
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.reduce((acc, num) => acc + Number(num), 0);
console.log('Sum:', sum); // => 15

BIN
06_js-debug/uebungen/uebungen-01-10-js-debug.zip Normal file
View File

Binary file not shown.