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

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>