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-06-22 14:40:35 +02:00
parent 781b2c357b
commit a7461f3573
29 changed files with 1376 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
01_grundlagen/unterricht/tag06/01_if-bsp.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>if - Verzweigung</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>if - Verzweigung</h1>
<p>
<code>if (BEDINGUNG) { /* ANWEISUNGEN */ }</code>
</p>
</div>
</main>
<script>
'use strict';
const SOLUTION = 42;
// prefer-const
const answer = Number(prompt("What's the result of 6 * 7"));
if (answer === SOLUTION) {
console.log('42 is correct.');
console.log('Congratulations, You are a genius!');
}
// Bei nur einer Anweisung können die {}- Klammern weggelassen werden.
if (answer === SOLUTION) console.log('42 is correct.');
console.log('weiter im code...');
</script>
</body>
</html>

35
01_grundlagen/unterricht/tag06/02_if-discount-bsp.html Normal file
View File

@@ -0,0 +1,35 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>if - Verzweigung</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>if - Verzweigung</h1>
<p>
<code>if (BEDINGUNG) { /* ANWEISUNGEN */ }</code>
</p>
</div>
</main>
<script>
'use strict';
const DISCOUNT = 0.05;
const quantityOfCartItem = Number(prompt('Quantity of the item?'));
const pricePerItem = 20; // just to simulate the real price here
let totalPrice = quantityOfCartItem * pricePerItem;
if (quantityOfCartItem >= 3) {
totalPrice = totalPrice * (1 - DISCOUNT);
}
console.log(`total Price: ${totalPrice}`);
</script>
</body>
</html>

36
01_grundlagen/unterricht/tag06/03_if-else-bsp.html Normal file
View File

@@ -0,0 +1,36 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>if - Verzweigung</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>if - Verzweigung</h1>
<p>
<code> if (BEDINGUNG) { /* ANWEISUNGEN */ } else { /* ANSONSTEN ANWEISUNGEN */ } </code>
</p>
</div>
</main>
<script>
'use strict';
const SOLUTION = 42;
// prefer-const
const answer = Number(prompt("What's the result of 6 * 7"));
if (answer === SOLUTION) {
console.log('42 is correct.');
console.log('Congratulations, You are a genius!');
} else {
console.log("Wrong. Math isn't exactly your strong point, is it?");
}
console.log('weiter im code...');
</script>
</body>
</html>

40
01_grundlagen/unterricht/tag06/04_ternaerer-operator.html Normal file
View File

@@ -0,0 +1,40 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Ternärer Operator | Tertiärer Operator</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>Ternärer Operator | Tertiärer Operator</h1>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const ouputEl = document.querySelector('.output');
const productCategory = 'books';
const netPrice = 10;
// let taxRate;
// if (productCategory === 'books') {
// taxRate = 1.07;
// } else {
// taxRate = 1.19;
// }
// Ternärer Operator
const taxRate = (productCategory === 'books') ? 1.07 : 1.19; // prettier-ignore
const totalPrice = netPrice * taxRate;
console.log(totalPrice.toFixed(2)); // => 10.70
</script>
</body>
</html>

38
01_grundlagen/unterricht/tag06/05_logischer-oder-operator.html Normal file
View File

@@ -0,0 +1,38 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Logischer Operator | oder (||)</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>Logischer Operator | oder (||)</h1>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const productAgeInDays = Number(prompt('Product age in days?'));
const quantityOfCartItem = Number(prompt('Quantity of the item?'));
// let discountPercentage = 0;
// if (quantityOfCartItem >= 3 || productAgeInDays <= 30) {
// discountPercentage = 5;
// }
// prettier-ignore
const discounrPercentage = (quantityOfCartItem >= 3 || productAgeInDays <= 30) ? 5 : 0;
const text = `Current discount: ${discountPercentage}%`;
console.log(text);
outputEl.textContent = text;
</script>
</body>
</html>

41
01_grundlagen/unterricht/tag06/06_logischer-operator-oder-short-breakout.html Normal file
View File

@@ -0,0 +1,41 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Logischer Operator - oder (||) - short breakout</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>Logischer Operator - oder (||) - short breakout</h1>
<div class="alert alert-success">
Only null, undefined, 0, false, NaN and "" are falsy in JavaScript. Everything else is truthy.
</div>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const zahl = 4 || 2; // JS interpretiert nicht die "rechte" Seite, da die Gleichung bereits mit "4" erfüllt ist. Interpreter bricht nach dem "oder" (||) die Befehlzeile ab. (short circuit breakout)
console.log(zahl); // => 4
const zahl2 = false || 2;
console.log(zahl2); // => 2
const zahl3 = '' || 4;
console.log(zahl3); // => 4
const zahl4 = '10.5' || null;
console.log(zahl4); // => '10.5'
const outputEl = document.querySelector('.output') || alert('Element exisitiert nicht');
</script>
</body>
</html>

39
01_grundlagen/unterricht/tag06/07_logischer-und-operator.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>Logischer Operator - und (&&)</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>Logischer Operator - und (&&)</h1>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const numberOfOrders = Number(prompt('How many orders has the customer placed so far?'));
const cartTotal = Number(prompt("What is the cart's total?"));
// let discountPercentage = 0;
// if (cartTotal >= 100 && numberOfOrders === 0) {
// discountPercentage = 7;
// }
// prettier-ignore
const discountPercentage = (cartTotal >= 100 && numberOfOrders === 0) ? 7 : 0;
const text = `Current discount: ${discountPercentage}%`;
console.log(text);
outputEl.textContent = text;
</script>
</body>
</html>

41
01_grundlagen/unterricht/tag06/08_logischer-operator-und-short-breakout.html Normal file
View File

@@ -0,0 +1,41 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Logischer Operator - und (&&) - short breakout</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>Logischer Operator - und (&&) - short breakout</h1>
<div class="alert alert-success">
Only null, undefined, 0, false, NaN and "" are falsy in JavaScript. Everything else is truthy.
</div>
</div>
</main>
<script>
'use strict';
const zahl = 4 && 2;
console.log(zahl); // => 2
const zahl2 = false && 2; // JS interpretiert nicht die "rechte" Seite, da die Gleichung bereits mit "false" nicht erfüllt ist. Interpreter bricht nach dem "und" (&&) die Befehlzeile ab. (short circuit breakout)
console.log(zahl2); // => false
const zahl3 = '' && 4;
console.log(zahl3); // => ''
const zahl4 = '10.5' && null;
console.log(zahl4); // => null
const outputEl =
document.querySelector('.output') && (document.querySelector('.output').style.border = '2px solid red');
</script>
</body>
</html>

77
01_grundlagen/unterricht/tag06/09_unaerer-operator.html Normal file
View File

@@ -0,0 +1,77 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Unärer Operator - not (!)</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>Unärer Operator - not (!)</h1>
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Logical_NOT">
The logical NOT
</a>
Der logische NICHT (!) (logische Komplementierung, Negation) Operator wandelt Wahrheit in Falschheit und
umgekehrt. Er wird typischerweise mit booleschen (logischen) Werten verwendet. Wenn er mit nicht-booleschen
Werten verwendet wird, gibt er <code>false</code> zurück, wenn sein einzelner Operand in
<code>true</code> umgewandelt werden kann; andernfalls wird <code>true</code> zurückgegeben.
</p>
<!-- button.btn.btn-dark.button-click{Schalter status: }>span -->
<button class="btn btn-dark button-click mb-3">Schalter status: <span></span></button>
<div class="mb-3">
<input
type="text"
name="number"
id="input-number"
class="form-control input-number"
placeholder="Insert a number... " />
</div>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const btnClickEl = document.querySelector('.button-click');
const statusEl = document.querySelector('.button-click span');
const inputNumberEl = document.querySelector('.input-number');
let toggle = false;
btnClickEl.addEventListener('click', (e) => {
// wenn toggle nicht erfüllt (false)
// if (!toggle) {
// toggle = true;
// } else { // ansonsten
// toggle = false;
// }
// toggle = !toggle ? true : false;
toggle = !toggle; // !(false) -> !(true) -> !(false)....
statusEl.textContent = toggle ? 'on' : 'off';
});
inputNumberEl.addEventListener('input', (e) => {
const val = inputNumberEl.value;
console.log('val: ', val, typeof val);
// if (!isNaN(val)) {
// outputEl.textContent = `${val} is a number`;
// } else {
// outputEl.textContent = `${val} is a not a number`;
// }
// Ternäre Schreibweise
outputEl.textContent = !isNaN(val) ? `${val} is a number` : `${val} is a not a number`;
});
</script>
</body>
</html>

57
01_grundlagen/unterricht/tag06/10_str-index-of.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>String.indexOf() | String.lastIndexOf()</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>String.indexOf() | String.lastIndexOf()</h1>
<hr />
<h2>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf"
>String.indexOf()</a
>
</h2>
<p>
Die <strong>indexOf()</strong> Methode gibt den Index der Zeichenkette innerhalb des aufrufenden String
Objekts des ersten Vorkommnis des angegebenen Wertes beginnend bei fromIndex zurück. Gibt
<strong>-1</strong> zurück, wenn der Wert nicht gefunden wurde.
</p>
</div>
</main>
<script>
'use strict';
const name = 'Ladislaus Jones';
// String - Eigenschaft str.length
console.log(name.length); // => 15
// String - Methode str.indexOf('searchValue')
console.log(name.indexOf(' ')); // => 9
console.log(name.indexOf('L')); // => 0
console.log(name.indexOf('laus')); // => 5
console.log(name.indexOf('a')); // => 1
console.log(name.indexOf('A')); // => -1 <- Zeichenkettenabfolge wurde nicht gefunden
console.log(name.indexOf('Y')); // => -1 <- Zeichenkettenabfolge wurde nicht gefunden
// ===========
// String - Methode str.indexOf('searchValue'[, position]) - optionaler Parameter (position)
console.log('name.indexOf("a", 2): ', name.indexOf('a', 2)); // => 6
// String - Methode str.lasIndexOf('searchValue')
console.log(name.lastIndexOf('a')); // => 6
console.log(name.lastIndexOf('s')); // => 14
</script>
</body>
</html>

58
01_grundlagen/unterricht/tag06/11_str-substring.html Normal file
View File

@@ -0,0 +1,58 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>String.substring(startIndex, endIndex)</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>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/substring"
>String.substring(startIndex, endIndex)</a
>
</h1>
<p>
Die <strong>substring()</strong> Methode gibt einen Teilstring eines Strings zwischen einem Index und einem
anderen (EndIndex), oder dem Ende der Zeichenkette zurück...
</p>
</div>
</main>
<script>
'use strict';
const name = 'Ladislaus Jones';
const spacePosition = name.indexOf(' '); // => 9
const firstName = name.substring(0, spacePosition);
const lastName = name.substring(spacePosition + 1);
console.log(firstName); // => 'Laduslaus'
console.log(lastName); // => 'Jones'
// String - Methode str.substring(startIndex, endIndex);
const str = 'Mozilla';
console.log(str.substring(1, 2)); // => 'o'
console.log(str.substring(3)); // => 'illa'
console.log(str.substring(2, 5)); // => 'zil'
console.log('lorem ipsum'.substring(2, 5)); // => 'rem'
console.log('lorem ipsum'.substring(2, 5)); // => 'rem'
console.log('lorem ipsum'.substring(6, 2)); // => 'rem '
// Bei negativer Zahl wird mit 0 gerechnet
console.log('lorem ipsum'.substring(-4)); // => 'lorem ipsum'
//
console.log('lorem ipsum'.substring(999)); // => ''
console.log('lorem ipsum'.substring(-999)); // => 'lorem ipsum'
console.log('lorem ipsum'.substring(999, -999)); // => 'lorem ipsum'
</script>
</body>
</html>

64
01_grundlagen/unterricht/tag06/12_str-substr.html Normal file
View File

@@ -0,0 +1,64 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>String.substr(startIndex, length) DEPREACATED</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>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/substr"
>String.substr(startIndex, length) DEPREACATED</a
>
</h1>
<p>
Die <code>substr()</code>-Methode von String-Werten gibt einen Teil dieses Strings zurück, beginnend am
angegebenen Index und wird um eine bestimmte Anzahl von Zeichen verlängert.
</p>
</div>
</main>
<script>
'use strict';
const name = 'Ladislaus Jones';
const spacePosition = name.indexOf(' '); // => 9
const firstName = name.substr(0, spacePosition);
const lastName = name.substr(spacePosition + 1);
console.log(firstName); // => 'Laduslaus'
console.log(lastName); // => 'Jones'
// String - Methode str.substr(startIndex, length);
const str = 'Mozilla';
console.log(str.substr(1, 2)); // => 'oz'
console.log(str.substring(3)); // => 'illa'
console.log(str.substr(3)); // => 'illa'
console.log(str.substr(2, 5)); // => 'zilla'
console.log('lorem ipsum'.substr(2, 5)); // => 'rem i'
console.log('lorem ipsum'.substring(2, 5)); // => 'rem'
console.log('lorem ipsum'.substring(6, 2)); // => 'rem '
console.log('lorem ipsum'.substr(6, 2)); // => 'ip'
// Bei negativer Zahl wird mit (str.length - WERT) gerechnet
console.log('lorem ipsum'.substr(-4)); // => 'psum'
console.log('https://dummyimage.com/400x300.jpg'.substr(-4)); //=> '.jpg'
console.log('https://dummyimage.com/400x300.jpg'.substring(-4)); //=> 'https://dummyimage.com/400x300.jpg'
//
console.log('lorem ipsum'.substr(999)); // => ''
console.log('lorem ipsum'.substr(-999)); // => 'lorem ipsum'
console.log('lorem ipsum'.substr(999, -999)); // => 'lorem ipsum'
</script>
</body>
</html>