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-09 10:51:04 +02:00
parent 627096ba41
commit 84fc2efe6f
9 changed files with 212 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
01_grundlagen/linksammlung.md
View File

@@ -14,6 +14,9 @@
- [State Of JS 2025](https://2025.stateofjs.com/en-US) - [State Of JS 2025](https://2025.stateofjs.com/en-US)
- [JavaScript Wiki Historie](https://de.wikipedia.org/wiki/JavaScript) - [JavaScript Wiki Historie](https://de.wikipedia.org/wiki/JavaScript)
- [What the f\*ck JS?](https://github.com/denysdovhan/wtfjs) - [What the f\*ck JS?](https://github.com/denysdovhan/wtfjs)
- [W3C HTML Validator](https://validator.w3.org/nu/#file)
- [Can I use](https://caniuse.com/)
- [HTMLReference.io](https://htmlreference.io/) - [HTMLReference.io](https://htmlreference.io/)
- [CSSReference.io](https://cssreference.io/) - [CSSReference.io](https://cssreference.io/)

31
01_grundlagen/uebungen/u03_sekunden.html Normal file
View File

@@ -0,0 +1,31 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 3: Sekunden</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">
<div class="alert alert-primary">
<h2>Übung 3: Sekunden</h2>
<p>Wie viele Minuten und Restsekunden haben 2000 Sekunden? Verwende console.log für die Ausgabe.</p>
<p>
<strong>Hinweise:</strong> Am einfachsten ist die Aufgabe mithilfe des Modulo-Operators zu lösen.
Nachkommastellen kannst du im Moment noch nicht entfernen. Darauf kommen wir später zurück.
</p>
</div>
</div>
</main>
<script>
'use strict';
console.log(2000 / 60); // => 33 Sekunden
console.log(2000 % 60); // => 20 Restsekunden
console.log(2000 / 60, 2000 % 60); //=> 33, 20
</script>
</body>
</html>

28
01_grundlagen/uebungen/u04_clueck-codes.html Normal file
View File

@@ -0,0 +1,28 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 2: Alarm!</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">
<div class="alert alert-primary">
<h2>Übung 4: Die Länge von Strings</h2>
<p>
Multipliziere die Länge deines Vornamens mit der Länge deines Nachnamens und lass dir das Ergebnis in der
Konsole ausgeben.
</p>
</div>
</div>
</main>
<script>
'use strict';
console.log('Florian'.length * 'Hölzel'.length); // => 42
console.log('Philippe'.length * 'Torrel'.length); // => 48
</script>
</body>
</html>

28
01_grundlagen/uebungen/u05_datentyp.html Normal file
View File

@@ -0,0 +1,28 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 5: Na? Was bist denn du?</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">
<div class="alert alert-primary">
<h2>Übung 5: Na? Was bist denn du?</h2>
<p>Welchen Datentyp hat das folgende Literal?<br /><code>'42'</code></p>
</div>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
let outputEl = document.querySelector('.output');
console.log(typeof '42'); // => string
outputEl.textContent = typeof '42';
</script>
</body>
</html>

76
01_grundlagen/uebungen/u06-rechnen.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>Nur ein bisschen rechnen …</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>Nur ein bisschen rechnen …</h1>
<table id="calcIt" class="table table-striped">
<thead class="table-dark">
<tr>
<th>Ausdruck</th>
<th>Rückgabewert</th>
</tr>
</thead>
<tbody>
<tr>
<td>3 + 4</td>
<td></td>
</tr>
<tr>
<td>3 * 12</td>
<td></td>
</tr>
<tr>
<td>25 + 12</td>
<td></td>
</tr>
<tr>
<td>(12 - 3) / 3</td>
<td></td>
</tr>
<tr>
<td>12 % 3</td>
<td></td>
</tr>
<tr>
<td>12 * (44 / 11) / 3 + 67</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</main>
<script>
'use strict';
// document
// .getElementById('calcIt')
// .querySelectorAll('tbody tr')
// .forEach((oRow) => {
// oRow.children[1].innerText = eval(oRow.children[0].innerText);
// });
const aCalc = [
3 + 4, //
3 * 12,
25 + 12,
(12 - 3) / 3,
12 % 3,
(12 * (44 / 11)) / 3 + 67,
];
const tableEl = document.getElementById('calcIt');
const oRows = tableEl.querySelectorAll('tbody > tr');
aCalc.forEach((nResult, idx) => {
oRows[idx].children[1].textContent = nResult;
});
</script>
</body>
</html>

6
01_grundlagen/unterricht/tag02/01_alert-prompt-confirm.html
View File

@@ -68,11 +68,11 @@
'use strict'; 'use strict';
// window.alert('Hello World'); // window muss als äußerstes Objekt nicht explizit angegeben werden. (Angabe ist optional) // window.alert('Hello World'); // window muss als äußerstes Objekt nicht explizit angegeben werden. (Angabe ist optional)
alert('Hello World'); // alert('Hello World');
// let result = window.prompt('Die Anwort auf alles?'); // let result = window.prompt('Die Anwort auf alles?');
// let result = prompt('Die Anwort auf alles?'); let result = prompt('Die Anwort auf alles?');
// console.log(result); // => string | null console.log(result); // => string | null
let answer = confirm('Lust auf eine Pause?'); let answer = confirm('Lust auf eine Pause?');
console.log(answer); // => boolean (true | false) console.log(answer); // => boolean (true | false)

3
01_grundlagen/unterricht/tag02/05_strings.html
View File

@@ -16,6 +16,7 @@
</a> </a>
- Das globale String-Objekt ist ein Konstruktor für Strings, auch Zeichenketten genannt. - Das globale String-Objekt ist ein Konstruktor für Strings, auch Zeichenketten genannt.
</p> </p>
<div class="output alert alert-secondary my-3"></div> <div class="output alert alert-secondary my-3"></div>
</div> </div>
</main> </main>
@@ -25,7 +26,7 @@
let outputEl = document.querySelector('.output'); let outputEl = document.querySelector('.output');
let firstName = 'John'; let firstName = 'John';
let lastName = "Wick"; // prettier-ignore let lastName = 'Wick'; // prettier-ignore
let fullName = firstName + ' ' + lastName; let fullName = firstName + ' ' + lastName;

5
01_grundlagen/unterricht/tag02/08_typeof.html
View File

@@ -36,7 +36,11 @@
console.log(typeof function () {}); // => 'function' console.log(typeof function () {}); // => 'function'
console.log(typeof 0b1001); //=> 'number' console.log(typeof 0b1001); //=> 'number'
console.log(typeof 0xfff); //=> 'number'
console.log(typeof 0o17); //=> 'number'
console.log(typeof 123e5); //=> 'number'
console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991
console.log(typeof 123n); // => 'bigint' (2020) console.log(typeof 123n); // => 'bigint' (2020)
// ======================= // =======================
@@ -45,6 +49,7 @@
console.log(typeof undefined); // => 'undefined' console.log(typeof undefined); // => 'undefined'
console.log(typeof var2); // => 'undefined' console.log(typeof var2); // => 'undefined'
console.log(typeof var2 === 'undefined'); // => true
console.log(typeof [1, 2, 3]); //=> 'object' vom Typ Array console.log(typeof [1, 2, 3]); //=> 'object' vom Typ Array
console.log(typeof { firstName: 'John', age: 30 }); //=> 'object' vom Typ Object console.log(typeof { firstName: 'John', age: 30 }); //=> 'object' vom Typ Object

37
01_grundlagen/unterricht/tag02/09_prioritaetsreihenfolge.html
View File

@@ -10,7 +10,42 @@
<main> <main>
<div class="container py-5"> <div class="container py-5">
<h1>Prioritäten-Tabelle</h1> <h1>Prioritäten-Tabelle</h1>
<!-- TODO: Tabelle in HTML aus Lektion (3.7.2) erstellen --> <table class="table table-striped">
<thead class="table-dark">
<tr>
<th>Priorität / Präzedenz</th>
<th>Name</th>
<th>Operator</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Gruppierungsoperator</td>
<td>Klammern ()</td>
</tr>
<tr>
<td>2</td>
<td>typeof-Operator</td>
<td>typeof</td>
</tr>
<tr>
<td>3</td>
<td>Multiplikation, Division, Modulo</td>
<td>* / %</td>
</tr>
<tr>
<td>4</td>
<td>Addition, Subtraktion</td>
<td>+ -</td>
</tr>
<tr>
<td>5</td>
<td>Zuweisungsoperator</td>
<td>=</td>
</tr>
</tbody>
</table>
</div> </div>
</main> </main>
<script> <script>