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-26 15:01:56 +02:00
parent 0e70223ff6
commit d24e33bfd2
13 changed files with 1024 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
01_grundlagen/unterricht/tag10/01_ar-optionale-parameter.html Normal file
View File

@@ -0,0 +1,93 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Array Methoden - optionale Parameter</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>Array Methoden - optionale Parameter</h1>
<!-- table.table.table-striped>(thead.table-dark>tr>th{Name}+th{Parameter der Callback-Funktion})+tbody>tr*3>td*2 -->
<table class="table table-striped my-5">
<thead class="table-dark">
<tr>
<th>Name</th>
<th>Parameter der Callback-Funktion</th>
</tr>
</thead>
<tbody>
<tr>
<td>map, filter, every, some, find, findIndex, forEach</td>
<td>
<ol>
<li><strong>Value:</strong> Der Wert des aktuell betrachteten Elements aus dem Array.</li>
<li><strong>Index:</strong> Ein laufender Index-Wert beginnend bei 0.</li>
<li><strong>Array:</strong> Das komplette Array, auf dem map aufgerufen wird.</li>
</ol>
</td>
</tr>
<tr>
<td>reduce, reduceRight</td>
<td>
<ol>
<li>
<strong>previousValue:</strong> Ergebnis der letzten Ausführung des Callbacks. Beim ersten Aufruf
ist es der Initialwert von reduce. Falls es keinen Initialwert gibt, verwendet reduce stattdessen
den ersten Wert des Arrays.
</li>
<li><strong>Value:</strong> Der Wert des aktuell betrachteten Elements aus dem Array.</li>
<li><strong>Index:</strong> Ein laufender Index-Wert beginnend bei 0.</li>
<li><strong>Array:</strong> Das komplette Array, auf dem reduce aufgerufen wird.</li>
</ol>
</td>
</tr>
<tr>
<td>sort</td>
<td>1. & 2. <strong>element</strong>: Elemente, die miteinander zu vergleichen sind.</td>
</tr>
</tbody>
</table>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const winners = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
const names = [
'Ersin', //
'Andreas',
'Adel',
'Kahleel',
'Philippe',
];
names.unshift(names.pop()); // WICHTIG
// Array Methode - ar.map((currentValue, index, array) => {})
const results = names.map((name, idx) => {
// let result = '';
// if (idx < 3) {
// result = `${idx + 1} Place: ${name}`;
// } else {
// result = name;
// }
// return result;
return idx < 3 ? `${idx + 1} Place: ${name}` : name;
});
console.log(results);
outputEl.innerHTML = `<ul><li>${results.join('</li><li>')}</li></ul>`;
</script>
</body>
</html>

97
01_grundlagen/unterricht/tag10/02_ar-find.html Normal file
View File

@@ -0,0 +1,97 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Array - ar.find()</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>Array - ar.find()</h1>
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/find"
>ar.find()
</a>
- Die Methode <strong>find()</strong> gibt den Wert des Elements eines Arrays zurück, welches
<strong>als erstes</strong> die Bedingung einer bereitgestellten Testfunktion erfüllt. Andernfalls wird
<strong>undefined</strong> zurückgegeben.
</p>
<div class="alert alert-warning">Side-effect-free</div>
<div class="alert alert-secondary output"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const lottoNumbers = [16, 10, 2, 12, 1, 33];
const names = [
'Ersin', //
'Andreas',
'Adel',
'Kahleel',
'Philippe',
];
const products = [
'Game of Thrones Wax Seal Coasters',
'Electronic Butterfly in a Jar',
'Aquafarm: Aquaponics Fish Garden',
'Cassette Adapter Bluetooth',
'Marvel Comics Lightweight Infinity Scarf',
'Ollie - The App Controlled Robot',
'Sound Splash Bluetooth Waterproof Shower Speaker',
'PowerCube',
'Backpack of Holding',
'Retro Duo Portable NES/SNES Game System',
'Universal Gadget Wrist Charger',
'USB Squirming Tentacle',
'USB Fishquarium',
'Space Bar Keyboard Organizer & USB Hub Pop',
'USB Pet Rock',
'Powerstation 5- E. Maximus Chargus',
'Dual Heated Travel Mug',
'Crosley Collegiate Portable USB Turntable',
'Meh Hoodie',
'Magnetic Accelerator Cannon',
];
const cartItemPrices = [9.99, 19.99, 5.99];
// Array Methode - ar.find((currentValue, idx, arr) => {})
console.log(
names.find((name) => {
return name.length > 6;
}),
); // => Andreas
console.log(names.includes('Andreas')); // => true
console.log(names.includes(' andreas ')); // => false
console.log(
names.find((name) => {
return name.trim().toLowerCase() === 'andreas';
})
? true
: false,
); // => true
console.log(
names.find((name) => {
return name.trim().toLowerCase() === 'boris';
}),
); // => undefined <- bei keinem Treffer
// Optionale Parameter von Find ===================
// Array Methode - ar.find((currentValue, idx, arr) => {})
names.find((name, idx, ar) => {
console.log(`Name: ${name}, Index: ${idx}, Array: ${ar.join(', ')}`);
});
</script>
</body>
</html>

105
01_grundlagen/unterricht/tag10/03_ar-find-index.html Normal file
View File

@@ -0,0 +1,105 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Array - ar.findIndex()</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>Array - ar.findIndex()</h1>
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/findindex">
ar.findIndex()
</a>
</p>
<p>
- Die Methode <strong>findIndex()</strong> gibt den Index des Elements eines Arrays zurück, welches
<strong>als erstes</strong> die Bedingung einer bereitgestellten Testfunktion erfüllt. Andernfalls wird
<strong>-1</strong> zurückgegeben.
</p>
<div class="alert alert-warning">Side-effect-free</div>
<div class="alert alert-secondary output"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const lottoNumbers = [16, 10, 2, 12, 1, 33];
const names = [
'Ersin', //
'Andreas',
'Adel',
'Kahleel',
'Philippe',
];
const products = [
'Game of Thrones Wax Seal Coasters',
'Electronic Butterfly in a Jar',
'Aquafarm: Aquaponics Fish Garden',
'Cassette Adapter Bluetooth',
'Marvel Comics Lightweight Infinity Scarf',
'Ollie - The App Controlled Robot',
'Sound Splash Bluetooth Waterproof Shower Speaker',
'PowerCube',
'Backpack of Holding',
'Retro Duo Portable NES/SNES Game System',
'Universal Gadget Wrist Charger',
'USB Squirming Tentacle',
'USB Fishquarium',
'Space Bar Keyboard Organizer & USB Hub Pop',
'USB Pet Rock',
'Powerstation 5- E. Maximus Chargus',
'Dual Heated Travel Mug',
'Crosley Collegiate Portable USB Turntable',
'Meh Hoodie',
'Magnetic Accelerator Cannon',
];
const cartItemPrices = [9.99, 19.99, 5.99];
// Array Methode - ar.find((currentValue, idx, arr) => {})
console.log(
names.find((name) => {
return name.length > 6;
}),
); // => Andreas
console.log(names.includes('Andreas')); // => true
console.log(names.includes(' andreas ')); // => false
console.log(
names.findIndex((name) => {
return name.trim().toLowerCase() === 'andreas';
}) !== -1,
); // => true
console.log(
names.findIndex((name) => {
return name.trim().toLowerCase() === 'adel';
}),
); // => 2 <- index vom Treffer
console.log(
names.findIndex((name) => {
return name.trim().toLowerCase() === 'boris';
}),
); // => -1 <- bei keinem Treffer
// Optionale Parameter von FindIndex ===================
// Array Methode - ar.findIndex((currentValue, idx, arr) => {})
names.find((name, idx, ar) => {
console.log(`Name: ${name}, Index: ${idx}, Array: ${ar.join(', ')}`);
});
</script>
</body>
</html>

71
01_grundlagen/unterricht/tag10/04_local-scoping-mit-let-const.html Normal file
View File

@@ -0,0 +1,71 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>"Local Scoping" (Gültigkeitsbereiche) von let & const</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>"Local Scoping" (Gültigkeitsbereiche) von let & const</h1>
<p>
Variablen deklariert mit <strong>let</strong> & <strong>const</strong> haben ihren eingegrenzten
Gültigkeitsbereich innerhalb von Codeblöcken ({})
</p>
</div>
</main>
<script>
'use strict';
// Variablendefinition
let b = 1;
b = 2;
// "{...}" - wird als Code-Block bezeichnet
if (true) {
let a = 1; // Variablendefinition
const c = 4; // Variablendefinition
console.log('b:', b); // => 2
b = 3;
console.log('a:', a); // => 1
console.log('b:', b); // => 3
console.log('c:', c); // => 4
}
// console.log('a:', a); // => Uncaught ReferenceError: a is not defined
console.log('b:', b); // => 3
// console.log('c:', c); // => Uncaught ReferenceError: c is not defined
const fnName = () => {
let d = 'text';
let a = 2;
b = 4; // globale Variable wird angesprochen und auf 4 gesetzt
d = d + b;
console.log('a:', a); // => 2
console.log('b:', b); // => 4
console.log('d:', d); // => 'text4'
return d;
};
console.log('b:', b); // => 3
const e = fnName();
console.log('b:', b); // => 4
// console.log('d:', d); // => // => Uncaught ReferenceError: d is not defined
console.log('e:', e); // => 'text4'
// console.log('a:', a); // => Uncaught ReferenceError: a is not defined
</script>
</body>
</html>

76
01_grundlagen/unterricht/tag10/05_local-scoping-mit-var.html Normal file
View File

@@ -0,0 +1,76 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>"Local Scoping" (Gültigkeitsbereiche) von var</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>"Local Scoping" (Gültigkeitsbereiche) von var</h1>
<p>
Variablen deklariert mit <strong>var</strong> haben ihren eingegrenzten Gültigkeitsbereich nur innerhalb von
Funktionsblöcken ({}) - "functio scope"
</p>
</div>
</main>
<script>
'use strict';
// Variablendefinition
var b = 1;
b = 2;
// "{...}" - wird als Code-Block bezeichnet
if (true) {
var a = 1; // Variablendefinition mit "var" haben KEINEN eingeschränkten Gültigkeitsbereich in Code-Blöcken ({...})
const c = 4; // Variablendefinition
console.log('b:', b); // => 2
b = 3;
console.log('a:', a); // => 1
console.log('b:', b); // => 3
console.log('c:', c); // => 4
}
console.log('a:', a); // => 1
console.log('b:', b); // => 3
// console.log('c:', c); // => Uncaught ReferenceError: c is not defined
const fnName = () => {
var d = 'text'; // eigener Gültigkeitsbereich innerhalb von Funktion (Function-Scope)
var a = 2; // eigener Gültigkeitsbereich innerhalb von Funktion (Function-Scope)
b = 4; // globale Variable wird angesprochen und auf 4 gesetzt
d = d + b;
console.log('a:', a); // => 2
console.log('b:', b); // => 4
console.log('d:', d); // => 'text4'
return d;
};
for (var i = 0; i < 10; i++) {
// console.log(i);
}
console.log('i:', i); //=> 10
console.log('b:', b); // => 3
const e = fnName();
console.log('b:', b); // => 4
// console.log('d:', d); // => // => Uncaught ReferenceError: d is not defined
console.log('e:', e); // => 'text4'
// console.log('a:', a); // => 1
</script>
</body>
</html>

89
01_grundlagen/unterricht/tag10/06_local-scoping-code-bloecken.html Normal file
View File

@@ -0,0 +1,89 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>"local scoping" von Codeblöcken</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
<!-- NOTE: prior to v2.2.1 tiny-slider.js need to be in <body> -->
</head>
<body>
<main>
<div class="container py-5">
<h1>"local scoping" von Codeblöcken</h1>
<div class="my-slider">
<div></div>
<div></div>
<div></div>
</div>
<!-- or ul.my-slider > li -->
</div>
</main>
<!-- Globale Settings (für alle Entwickler)-->
<script>
'use strict';
// Konfigurationsvariablen (config.js)
const DEFAULT_LANG = 'en-EN';
const TAX_RATE = 1.19;
const BASE_URL = 'http://localhost:8080';
const DB_NAME = 'todos_db';
const DEBUG_MODE = false;
</script>
<!-- Entwickler 01 (counterStats) -->
<script>
'use strict';
// Einschränkung vom Gültigkeitsbereich über Codeblöcke ({...})
{
let numbers = [1, 2, 3, 4, 5];
let name = 'Counter Stat Module';
const lang = DEFAULT_LANG || 'de-DE';
const greeting = lang === 'de-DE' ? 'Hallo' : 'Hello';
// code logic....
}
// console.log(numbers); // => Uncaught ReferenceError: numbers is not defined
</script>
<!-- Entwickler 02 (slider | carousel)-->
<script>
'use strict';
// Einschränkung vom Gültigkeitsbereich über Codeblöcke ({...})
{
const numbers = [1, 2, 3, 4, 5];
let slides = ['slide01', 'slide02'];
let name = 'Slider';
const lang = DEFAULT_LANG || 'de-DE';
// code logic....
}
// console.log(numbers); // => Uncaught ReferenceError: numbers is not defined
</script>
<!-- Entwickler 03 (userbereich)-->
<script>
'use strict';
// Einschränkung vom Gültigkeitsbereich über Codeblöcke ({...})
{
var numbers = [1, 2, 3, 4, 5];
let userRoles = ['admin', 'guest', 'editor'];
let name = 'User Dashboard';
const lang = DEFAULT_LANG || 'de-DE';
var slider = tns({
container: '.my-slider',
items: 3,
slideBy: 'page',
autoplay: true,
});
// code logic....
}
console.log(numbers); //=> [1, 2, 3, 4, 5]
console.log(slider); //=> ZUGRIFF MÖGLICH
</script>
</body>
</html>

91
01_grundlagen/unterricht/tag10/07_local-scoping-iife.html Normal file
View File

@@ -0,0 +1,91 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>"local scoping" mit IIFE (Immediately invoked function expression)</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- NOTE: prior to v2.2.1 tiny-slider.js need to be in <body> -->
</head>
<body>
<main>
<div class="container py-5">
<h1>"local scoping" mit IIFE (Immediately invoked function expression)</h1>
<div class="my-slider">
<div></div>
<div></div>
<div></div>
</div>
<!-- or ul.my-slider > li -->
</div>
</main>
<!-- Globale Settings (für alle Entwickler)-->
<script>
'use strict';
// Konfigurationsvariablen (config.js)
const DEFAULT_LANG = 'en-EN';
const TAX_RATE = 1.19;
const BASE_URL = 'http://localhost:8080';
const DB_NAME = 'todos_db';
const DEBUG_MODE = false;
</script>
<!-- Entwickler 01 (counterStats) -->
<script>
'use strict';
// Einschränkung vom Gültigkeitsbereich mit IIFE (() => {})()
(() => {
let numbers = [1, 2, 3, 4, 5];
let name = 'Counter Stat Module';
const lang = DEFAULT_LANG || 'de-DE';
const greeting = lang === 'de-DE' ? 'Hallo' : 'Hello';
// code logic....
})();
// console.log(numbers); // => Uncaught ReferenceError: numbers is not defined
</script>
<!-- Entwickler 02 (slider | carousel)-->
<script>
'use strict';
// Einschränkung vom Gültigkeitsbereich mit IIFE (() => {})()
(() => {
const numbers = [1, 2, 3, 4, 5];
let slides = ['slide01', 'slide02'];
let name = 'Slider';
const lang = DEFAULT_LANG || 'de-DE';
// code logic....
})();
// console.log(numbers); // => Uncaught ReferenceError: numbers is not defined
</script>
<!-- Entwickler 03 (userbereich)-->
<script>
'use strict';
// Einschränkung vom Gültigkeitsbereich mit IIFE (() => {})()
(() => {
var numbers = [1, 2, 3, 4, 5];
let userRoles = ['admin', 'guest', 'editor'];
let name = 'User Dashboard';
const lang = DEFAULT_LANG || 'de-DE';
var slider = tns({
container: '.my-slider',
items: 3,
slideBy: 'page',
autoplay: true,
});
// code logic....
$('.container').css({ backgroundColor: '#eee' });
})();
console.log(numbers); //=> ZUGRIFF NICHT MÖGLICH
console.log(slider); //=> ZUGRIFF NICHT MÖGLICH
</script>
</body>
</html>

34
01_grundlagen/unterricht/tag10/08_prefer-const.html Normal file
View File

@@ -0,0 +1,34 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>"Prefer-const" Programmierrichtlinie (AirBnb | Google)</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>"Prefer-const" Programmierrichtlinie (AirBnb | Google)</h1>
</div>
</main>
<script>
'use strict';
// prefer-const
const transform = (fullName) => {
const nameParts = fullName.split(' '); // => ['Ladislaus', 'Coolio', 'Barry', 'Crazy', 'Jones'];
const lastName = nameParts.slice(nameParts.length - 1); // => 'Jones'
const firstNames = nameParts.slice(0, nameParts.length - 1); // => ['Ladislaus', 'Coolio', 'Barry', 'Crazy']
return firstNames.map((firstName) => firstName.charAt(0) + '.').join(' ') + ' ' + lastName;
};
console.log(transform(aLongName));
// transform = 'text'; // Uncaught TypeError: Assignment to constant variable
const aLongName = 'Ladislaus Coolio Barry Crazy Jones';
console.log(transform(aLongName));
</script>
</body>
</html>

73
01_grundlagen/unterricht/tag10/09_schleifen/01_for-statement.html Normal file
View File

@@ -0,0 +1,73 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JS for-statement (for...Schleife)</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>JS for-statement (for...Schleife)</h1>
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/for">for-statement</a> -
Die <strong>for Anweisung</strong> beschreibt eine Schleife mit drei optionalen Ausdrücken und einer oder
mehreren Anweisungen.
</p>
</div>
</main>
<script>
'use strict';
const names = [
'Ersin', //
'Andreas',
'Adel',
'Kahleel',
'Philippe',
];
// deklarativen Stil (was...)
names.forEach((name, idx) => {
console.log(`Index: ${idx}, Name: ${name}`);
});
console.log('=============');
// imperativen Stil (wie...)
// Schleife - for ([Initializiation]; [Condition]; [Final-Expression]) {...}
for (let i = 0; i < names.length; i++) {
console.log(`Index: ${i}, Name: ${names[i]}`);
}
console.log('weiter im code...');
console.log('=============');
let nums = [];
for (let i = 0; i <= 20; i += 2) {
i += 3;
nums.push(i++);
i += 2;
}
console.log(nums); //=> [3,11,19]
console.log('==============');
nums = [];
for (let i = 8; i <= 29; i += 3) {
i += 3;
nums.push(i++);
i += 4;
nums.push(++i);
}
console.log(nums); //=> [11, 17, 23, 29 ]
</script>
</body>
</html>

59
01_grundlagen/unterricht/tag10/09_schleifen/02_for-of-statement.html Normal file
View File

@@ -0,0 +1,59 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JS for- of statement (for... of Schleife)</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>JS - For of Statement (for ... of Schleife)</h1>
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/for...of"
>for...of statement</a
>
- Mit dem <strong>for...of</strong> statement können sogenannte iterable objects durchlaufen werden (Array,
Map, Set, das "arguments" Objekt und weitere eingeschlossen), wobei auf jeden gefundenen Wert eigene
Statements ausgeführt werden können.
</p>
</div>
</main>
<script>
'use strict';
const names = [
'Ersin', //
'Andreas',
'Adel',
'Kahleel',
'Philippe',
];
// deklarativen Stil (was...)
names.forEach((name, idx) => {
console.log(`Index: ${idx}, Name: ${name}`);
});
console.log('=============');
// imperativen Stil (wie...)
// Schleife - for (entry of array) {...}
for (const name of names) {
console.log(`Index: ${names.indexOf(name)}, Name: ${name}`);
}
const nodes = document.querySelectorAll('strong');
const classes = document.querySelector('div').classList;
// Arrrayähnliche Objekte
console.log(nodes, Array.from(nodes)); // => NodeList;
console.log(classes, Array.from(classes)); // => DOMTokenList;
console.log('weiter im code...');
</script>
</body>
</html>

60
01_grundlagen/unterricht/tag10/09_schleifen/03_for-in-statement.html Normal file
View File

@@ -0,0 +1,60 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JS for- of statement (for... in Schleife)</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>JS - For in Statement (for ... in Schleife)</h1>
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/for...in">
for...in statement
</a>
- iteriert über alle zählbaren String-Eigenschaften eines Objekts (ignoriert Eigenschaften, die durch Symbole
gekennzeichnet sind), einschließlich geerbter zählbarer Eigenschaften.
</p>
</div>
</main>
<script>
'use strict';
const personObj = {
firstName: 'John',
lastName: 'Wick',
age: 38,
hobbies: ['Gassi gehen', 'Ballern'],
};
personObj.weight = 90;
const prop = 'age';
console.table(personObj);
console.log(personObj.firstName); // => 'John'
console.log(personObj.age); // => 38
console.log(personObj['age']); // => 38
console.log(personObj[prop]); // => 38
console.log(personObj.hobbies[0]); // => 'Gassi gehen'
console.log(personObj['hobbies'][0]); // => 'Gassi gehen'
console.log('=============');
// imperativen Stil (wie...)
// Schleife - for (property in object) {...}
for (const prop in personObj) {
console.log(`Eigenschaft: ${prop}, Wert: ${personObj[prop]}`);
}
console.log('weiter im code...');
</script>
</body>
</html>

87
01_grundlagen/unterricht/tag10/09_schleifen/04_while-statement.html Normal file
View File

@@ -0,0 +1,87 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JS while-statement (while...Schleife)</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>JS while - (while - Schleife)</h1>
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/while">while - Schleife</a>
- Die <strong>while-Anweisung</strong> (Engl. statement) beschreibt eine Schleife, die solange durchlaufen
wird wie die Schleifenbedingung wahr (Engl. true) ergibt. Die Schleifenbedingung (Engl. condition) wird am
Anfang der Schleife ausgewertet.
</p>
</div>
</main>
<script>
'use strict';
const names = [
'Ersin', //
'Andreas',
'Adel',
'Kahleel',
'Philippe',
];
// deklarativen Stil (was...)
names.forEach((name, idx) => {
console.log(`Index: ${idx}, Name: ${name}`);
});
console.log('=============');
// imperativen Stil (wie...)
// Schleife - while (condition) {...}
let i = 0;
while (i < names.length) {
console.log(`Index: ${i}, Name: ${names[i]}`);
i++;
}
console.log('weiter im code...');
i = -1;
while (++i < names.length) {
console.log(`Index: ${i}, Name: ${names[i]}`);
}
console.log('weiter im code...');
console.log('=============');
let nums = [];
i = 0;
while (i <= 20) {
i += 3;
nums.push(i++);
i += 2;
i += 2;
}
console.log(nums); //=> [3,11,19]
console.log('==============');
nums = [];
i = 8;
while (i <= 29) {
i += 3;
nums.push(i++);
i += 4;
nums.push(++i);
i += 3;
}
console.log(nums); //=> [11, 17, 23, 29 ]
</script>
</body>
</html>

89
01_grundlagen/unterricht/tag10/09_schleifen/05_do-while-statement.html Normal file
View File

@@ -0,0 +1,89 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JS while-statement (while...Schleife)</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>JS do...while - (do...while - Schleife)</h1>
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/do...while"
>do...while - Schleife
</a>
- Die <strong>do...while-Anweisung</strong> (Engl. statement) beschreibt eine Schleife, die solange
durchlaufen wird wie die Schleifenbedingung wahr (Engl. true) ergibt. Die Schleifenbedingung (Engl. condition)
wird am Ende der Schleife ausgewertet.
</p>
</div>
</main>
<script>
'use strict';
const names = [
'Ersin', //
'Andreas',
'Adel',
'Kahleel',
'Philippe',
];
// deklarativen Stil (was...)
names.forEach((name, idx) => {
console.log(`Index: ${idx}, Name: ${name}`);
});
console.log('=============');
// imperativen Stil (wie...)
// Schleife - while (condition) {...}
let i = 0;
do {
console.log(`Index: ${i}, Name: ${names[i]}`);
i++;
} while (i < names.length);
console.log('weiter im code...');
i = 0;
do {
console.log(`Index: ${i}, Name: ${names[i]}`);
} while (++i < names.length);
console.log('weiter im code...');
console.log('=============');
let nums = [];
i = 0;
do {
i += 3;
nums.push(i++);
i += 2;
i += 2;
} while (i <= 20);
console.log(nums); //=> [3,11,19]
console.log('==============');
nums = [];
i = 8;
while (i <= 29) {
i += 3;
nums.push(i++);
i += 4;
nums.push(++i);
i += 3;
}
console.log(nums); //=> [11, 17, 23, 29 ]
</script>
</body>
</html>