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-18 14:12:13 +02:00
parent 28c0a44ead
commit 99c26159ea
13 changed files with 531 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
01_grundlagen/linksammlung.md
View File

@@ -19,6 +19,7 @@
- [ASCII Table](https://asciitable.xyz/) - [ASCII Table](https://asciitable.xyz/)
- [HTML Entities Liste (W3c)](https://dev.w3.org/html5/html-author/charref) - [HTML Entities Liste (W3c)](https://dev.w3.org/html5/html-author/charref)
- [HTML Entities & Tastaturkürzel](https://www.key-shortcut.com/html-entities/alle-entitaeten) - [HTML Entities & Tastaturkürzel](https://www.key-shortcut.com/html-entities/alle-entitaeten)
- [What the f\*ck JS?](https://github.com/denysdovhan/wtfjs)
## Tools/ Software ## Tools/ Software

97
01_grundlagen/uebungen/#u14_rechnen-ausdruecke.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>Übung 14: Also, was sind das denn nur für Ausdrücke?</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 14: Also, was sind das denn nur für Ausdrücke?</h1>
<!-- Übung 14 -->
<table class="table table-striped my-5">
<thead class="table-dark">
<tr>
<th>Ausdruck</th>
<th>Rückgabewert</th>
<th>Datentyp</th>
</tr>
</thead>
<tbody>
<tr>
<td>'1.5' * 2</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>'1,5' * 2</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>'1.5' + 2</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>Number('1.5') * 2</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>Number('1,5') * 2</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>Number('3 Tage') * 7</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>Number('Seite 20') + 5</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>'9,2' + Number('11.7')</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>(NaN - 2) * (4 / 2)</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>alert(Number(17 / 2 + 1.3))</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>console.log(Number(17 / 2 + 1.3))</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>typeof 12.25</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>typeof typeof 12.25</td>
<td>-</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
</main>
<script>
'use strict';
</script>
</body>
</html>

50
01_grundlagen/uebungen/#u15-u17_reichweite-verbrauch.html Normal file
View File

@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 15 17: Reichweite & Verbrauch</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<div class="alert alert-primary">
<h1>Übung 15: Reichweite & Verbrauch</h1>
<ol>
<li>
Schreiben Sie ein Programm zur Kraftstoffverbrauchsberechnung für Pkws. Der Benutzer soll die gefahrenen
Kilometer (Strecke) und die verbrauchte Benzinmenge angeben. Das Programm ermittelt daraufhin den
Kraftstoffverbrauch auf 100 km und gibt ihn aus.
<blockquote>
<strong>Hinweis:</strong> Verwenden Sie folgende Formel:<br />
<code>Verbrauch [l/100km] = Benzinmenge [l] / Strecke [km] × 100</code>
</blockquote>
</li>
<li>
Erweitern Sie das Programm derart, dass das Programm den Benutzer außerdem nach seiner Tankgröße fragt und
ergänzend die maximale Reichweite in Kilometern berechnet.
<blockquote>
<strong>Hinweis:</strong> Verwenden Sie folgende Formel:<br />
<code> Reichweite [km] = Tankgröße [l] × Strecke [km] / Benzinmenge [l] </code>
</blockquote>
</li>
</ol>
</div>
<div class="alert alert-primary">
<h2>Übung 17: Reichweite & Verbrauch, Teil 2</h2>
<p>Runde die Ausgaben von Übung 15 (Teil 1 der Übung) kaufmännisch (d. h. ab 0.5 aufrunden).</p>
</div>
<div class="output-a alert alert-secondary"></div>
<div class="output-b alert alert-secondary"></div>
</div>
</main>
<script>
'use strict';
const outputAEl = document.querySelector('.output-a');
const outputBEl = document.querySelector('.output-b');
</script>
</body>
</html>

27
01_grundlagen/uebungen/#u16_rest-sekunden-2.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 16: Sekunden, Teil 2</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>
<div class="container py-5">
<div class="alert alert-primary">
<h2>Übung 16: Sekunden, Teil 2</h2>
Gib die Ergebnisse des Zeitrechners (Übung 3) abgerundet (ohne Nachkommastellen) in folgender Form aus:
<strong>mm:ss</strong>
</div>
<div class="output alert alert-secondary"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
</script>
</body>
</html>

63
01_grundlagen/uebungen/#u18_lottozahl.html Normal file
View File

@@ -0,0 +1,63 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 18: Lotto oder der »49-Seiten Würfel«</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet" />
<style>
*,
html {
box-sizing: border-box;
}
.output {
overflow: hidden;
}
.lotto-number {
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid #f8f8f8;
display: flex;
justify-content: center;
align-items: center;
background: #f2f2f2;
background: radial-gradient(circle, rgba(242, 242, 242, 1) 0%, rgba(130, 130, 130, 1) 93%);
box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
}
.lotto-number span {
font-weight: bolder;
}
</style>
</head>
<body>
<main>
<div class="container py-5">
<div class="alert alert-primary animate__animated animate__shakeY animate__infinite">
<h2>Übung 18: Lotto oder der »49-Seiten Würfel«</h2>
<p>
Für Zufallszahlen von eins bis sechs ist ein Würfel wirklich praktisch — und sinnvoll. Für alle anderen
Fälle ist ein Zufallsgenerator natürlich unumgänglich und Pflichtprogramm. Zum Beispiel, wenn du Hilfe für
deine nächsten Lottozahlen benötigst …
</p>
<p>
Schreibe ein Programm, das genau eine Zufallszahl zwischen 1 und 49 ausgibt. Die Grenzwerte 1 und 49 sollen
dabei inklusive sein und Nachkommastellen sind nicht erwünscht.
</p>
</div>
<div class="output alert alert-secondary my-3">
<div class="lotto-ball"><span class="lotto-number">00</span></div>
</div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const lottoNumberEl = document.querySelector('.lotto-number');
</script>
</body>
</html>

BIN
01_grundlagen/uebungen/uebungen-14-18.zip Normal file
View File

Binary file not shown.

BIN
01_grundlagen/uebungen/uebungen-7-13.zip
View File

Binary file not shown.

54
01_grundlagen/unterricht/tag04/01_escape-notation.html Normal file
View File

@@ -0,0 +1,54 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>All Escape Characters</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
<style>
.list-check {
list-style: none;
padding: 0 0 0 20px;
margin: 0;
}
.list-check li::before {
content: '\f058';
font-family: 'Font Awesome 7 Free';
font-weight: 900;
margin-right: 10px;
}
</style>
</head>
<body>
<main>
<div class="container py-5">
<h1><i class="fa-solid fa-book-bookmark"></i> All Escape Characters</h1>
<!-- ul.list.list-check>li*2>a[href="#"]{Link} -->
<ul class="list list-check">
<li>
<a
href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Regular_expressions/Character_escape">
All Escape Characters
</a>
</li>
<li><a href="../../docs/escape-notation.pdf">Escape Notation PDF</a></li>
</ul>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const text =
'Please enter the number of files for the following directory:\nC:\\important_folder\\next_important_folder';
console.log(text);
outputEl.innerHTML = text.replaceAll('\n', '<br/>');
</script>
</body>
</html>

53
01_grundlagen/unterricht/tag04/02_implizite-typkonvertierung.html Normal file
View File

@@ -0,0 +1,53 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Implizite Typkonvertierung</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>Implizite Typkonvertierung</h1>
</div>
</main>
<script>
'use strict';
console.log('5' * '4'); // => 20 <- 'number'
console.log('5' * 4); // => 20 <- 'number'
console.log(5 * '4'); // => 20 <- 'number'
console.log('5' - '4'); // => 1 (Typ: number)
console.log('5' - 4); // => 1 (Typ: number)
console.log(5 - '4'); // => 1 (Typ: number)
console.log('5' / '4'); // => 1.25 (Typ: number)
console.log('5' / 4); // => 1.25 (Typ: number)
console.log(5 / '4'); // => 1.25 (Typ: number)
console.log(5 % '4'); // => 1 (Typ: number)
console.log('5' ** '2'); // => 25 (Typ: number)
// Aufpassen bei + (Verkettung oder Addition)
console.log(3 + 4); // => 7 <- 'number'
console.log('3' + '4'); // => '34' <- 'string'
console.log('3' + 4); // => '34' <- 'string'
console.log(3 + '4'); // => '34' <- 'string'
console.log('5€' - 4); //=> NaN - Not a Number <- (Typ: number)
console.log('16px' * 2); //=> NaN - Not a Number <- (Typ: number)
console.log('16 weitere Zeichen außer Ziffern' * 2); //=> NaN - Not a Number <- (Typ: number)
console.log(' 45 ' * 2); //=> 90 <- (Typ: number)
console.log(typeof NaN); //=> 'number'
// =======
console.log(typeof 'hello' * 4); // => 'string' * 4 -> NaN <- (Typ: Number)
console.log(typeof 'hello' + 4); // => 'string' + 4 -> 'string4' <- (Typ: string)
console.log('b' + 'a' + +'a' + 'a'); // => 'baNaNa'
</script>
</body>
</html>

53
01_grundlagen/unterricht/tag04/03_explizite-typkonvertierung.html Normal file
View File

@@ -0,0 +1,53 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Explizite Typkonvertierung</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>Explizite Typkonvertierung</h1>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
// explizite Typkonvertierung Number('string');
const price1 = Number(prompt('Price of article 1?'));
const price2 = Number(prompt('Price of article 2?'));
const price3 = Number(prompt('Price of article 3?'));
const result = `total: $${price1 + price2 + price3}`;
console.log(result);
outputEl.textContent = result;
// ======
console.log(Number(' 300 ')); //=> 300 <- number
console.log(Number('hello')); //=> NaN <- number
console.log(Number('3px')); //=> NaN <- number
console.log(parseInt('3px')); //=> 3 <- number
console.log(parseFloat('3.5rem')); //=> 3.5 <- number
console.log(String(1)); //=> '1' <- string
console.log((1).toString()); //=> '1' <- string
console.log(String(3.5)); //=> '3.5' <- string
console.log(Boolean(1)); //=> true <- boolean
console.log(Boolean(0)); //=> false <- boolean
console.log(Boolean(undefined)); //=> false <- boolean
console.log(Boolean('')); //=> false <- boolean
console.log(Boolean('Befüllter String')); //=> true <- boolean
</script>
</body>
</html>

29
01_grundlagen/unterricht/tag04/04_nan-paradoxon.html Normal file
View File

@@ -0,0 +1,29 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NaN - Paradoxon</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>NaN - Paradoxon</h1>
<p>Die <code>NaN</code> globale Eigenschaft ist ein Wert, der „Nicht eine Zahl“ (Not-a-Number) darstellt.</p>
</div>
</main>
<script>
'use strict';
console.log(Number('NerdWorld')); // => NaN
console.log(Number('NerdWorld 2')); // => NaN
console.log('Drei' * 3); // => NaN
console.log(Number('NerdWorld') * 3); // NaN * 3 => NaN
console.log(NaN * 3); // => NaN
console.log(12 / '3Produkte'); // => NaN
console.log(12 / '3'); // => 4
console.log(12 / Number('3Produkte')); // => NaN
</script>
</body>
</html>

60
01_grundlagen/unterricht/tag04/05_math-api.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>Math Object in JS</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>Math Object in JS</h1>
<p>
Math ist ein Standardobjekt, das Eigenschaften und Methoden für mathematische Konstanten und Funktionen
besitzt.
</p>
<ul class="list">
<li>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Math">
Das Math Objekt
</a>
</li>
</ul>
</div>
</main>
<script>
'use strict';
console.log(Math.sqrt(9)); // => 3 Quadratwurzel
console.log(Math.pow(2, 5)); // => 2^5 -> 2 * 2 * 2 * 2 * 2 => 32
console.log(2 ** 5); // => 2^5 -> 2 * 2 * 2 * 2 * 2 => 32
console.log(Math.cos(0)); //=> 1;
console.log(Math.sin(1)); //=> 0.8414709848078965
console.log(Math.PI); //=> 3.141592653589793
console.log(Math.max(3, 7, 20, 1)); // => 20
console.log(Math.min(3, 7, 20, 1)); // => 1
console.log(Math.abs(-3)); //=> 3
console.log(Math.round(3.1)); //=> 3
console.log(Math.round(3.5)); //=> 4
console.log(Math.round(3.49999999)); //=> 3
console.log(Math.floor(3.49999999)); //=> 3
console.log(Math.floor(3.99)); //=> 3
console.log(Math.ceil(3.49999999)); //=> 4
console.log(Math.ceil(3.99)); //=> 4
console.log(Math.ceil(3.01)); //=> 4
//======
console.log(Math.random()); //=> Zufallszahl zwischen 0 und 1
console.log(Math.floor(Math.random() * 6) + 1); // Würfelwurf
</script>
</body>
</html>

44
01_grundlagen/unterricht/tag04/06_number-to-fixed.html Normal file
View File

@@ -0,0 +1,44 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Number.toFixed()</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>Number.toFixed()</h1>
<p>Die <strong>toFixed()</strong> - Methode formatiert eine Zahl inf Festkommadarstellung</p>
<div class="alert alert-danger">
<p><strong>Achtung:</strong> Rückgabewert ist ein String-Objekt der gegebenen Zahl in Festkommadarstellung</p>
</div>
<ul class="list">
<li>
<a
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed?retiredLocale=de">
Number.toFixed()
</a>
</li>
</ul>
</div>
</main>
<script>
'use strict';
const zahl = 3.4576321;
const zahl2 = 10;
console.log(zahl.toFixed(3)); //=> '3.458' <- 'string'
console.log(zahl.toFixed(2) + 10); //=> '3.4610' <- 'string' VORSICHT
console.log(Number(zahl.toFixed(2)) + 10); //=> 13.46 <- 'number'
console.log(zahl2.toFixed(2)); // => '10.00';
console.log((10).toFixed(2)); // => '10.00';
</script>
</body>
</html>