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-09-21 12:10:33 +02:00
parent 6650b361c3
commit f11bf06d0a
14 changed files with 959 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
02_advanced/unterricht/tag11/01_schleifen/01_for-statement.html
+67
View File
@@ -0,0 +1,67 @@
<!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 = [
'Christian', //
'Florian',
'Stefan',
'Benjamin',
'Philippe',
];
// deklarativen Stil (was...)
names.forEach((name, idx) => {
console.log(`Index: ${idx}, Name: ${name}`);
});
console.log('==============');
// imperativen Stil (wie...)
// Schleife - for([Initialisierung]; [Bedingung]; [Inkrementierung]) Anweisung
for (let i = 0; i < names.length; i++) {
console.log(`Index: ${i}, Name: ${names[i]}`);
}
console.log('weiter im code...');
let nums = [];
for (let i = 0; i <= 20; i += 2) {
i += 3;
nums.push(i++);
i += 2;
}
console.log(nums); //=> [3, 11, 19]
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>
02_advanced/unterricht/tag11/01_schleifen/02_for-of-statement.html
+55
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>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 = [
'Christian', //
'Florian',
'Stefan',
'Benjamin',
'Philippe',
];
// deklarativen Stil (was...)
names.forEach((name, idx) => {
console.log(`Index: ${idx}, Name: ${name}`);
});
console.log('==============');
// imperativen Stil (wie...)
for (const name of names) {
console.log(`Index: ${names.indexOf(name)}, Name: ${name}`);
}
// Arrayähnliche Objekte
const nodes = document.querySelectorAll('div'); // => NodeList(1) [div.container.py-5]
const classes = nodes[0].classList; // => DOMTokenList(3) ['container', 'py-5', value: 'container py-5']
console.log(nodes, Array.from(nodes));
console.log(classes, Array.from(classes));
</script>
</body>
</html>
02_advanced/unterricht/tag11/01_schleifen/03_for-in-statement.html
+51
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>JS for...in 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: ['shooting', 'driving', 'fighting'],
};
personObj.weight = 90;
const prop = 'age';
console.table(personObj);
console.log(personObj.firstName); // => John
console.log(personObj.age); // => 38
console.log(personObj['firstName']); // => John
console.log(personObj[prop]); // => 38
console.log('==============');
for (const prop in personObj) {
console.log(`Key: ${prop}, Value: ${personObj[prop]}`);
}
</script>
</body>
</html>
02_advanced/unterricht/tag11/01_schleifen/04_while-statement.html
+48
View File
@@ -0,0 +1,48 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JS while - (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 = [
'Christian', //
'Florian',
'Stefan',
'Benjamin',
'Philippe',
];
// deklarativen Stil (was...)
names.forEach((name, idx) => {
console.log(`Index: ${idx}, Name: ${name}`);
});
console.log('==============');
// imperativen Stil (wie...)
let i = 0;
while (i < names.length) {
console.log(`Index: ${i}, Name: ${names[i]}`);
i++;
}
</script>
</body>
</html>
02_advanced/unterricht/tag11/01_schleifen/05_do-while-statement.html
+51
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>JS do...while - (do...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 = [
'Christian', //
'Florian',
'Stefan',
'Benjamin',
'Philippe',
];
// deklarativen Stil (was...)
names.forEach((name, idx) => {
console.log(`Index: ${idx}, Name: ${name}`);
});
console.log('==============');
// imperativen Stil (wie...)
let i = 0;
do {
console.log(`Index: ${i}, Name: ${names[i]}`);
i++;
} while (i < names.length);
</script>
</body>
</html>
02_advanced/unterricht/tag11/01_schleifen/schleifen-in-js.pdf
BIN
View File
Binary file not shown.