This commit is contained in:
Philippe Torrel
@@ -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.3.1/css/all.min.css" />
|
||||
|
||||
<style>
|
||||
.list-check {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0 0 0 20px; /* top right bottom left*/
|
||||
}
|
||||
|
||||
.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-bookmark"></i> All Escape Characters</h1>
|
||||
<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>
|
||||
@@ -0,0 +1,52 @@
|
||||
<!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
|
||||
console.log('5' * 4); // => 20
|
||||
console.log(5 * '4'); // => 20
|
||||
|
||||
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' ** '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 auf Ziffern' * 2); // => NaN - Not a Number <- (Typ: number)
|
||||
|
||||
console.log(' 45 ' * 2); // => 90 <- (Type: number)
|
||||
|
||||
console.log(typeof NaN); // => 'number'
|
||||
|
||||
// ==========
|
||||
console.log(typeof 'hello' * 4); // => 'string' * 4 -> NaN
|
||||
console.log(typeof 'hello' + 4); // => 'string' + 4 -> 'string4'
|
||||
|
||||
console.log('b' + 'a' + +'a' + 'a'); // => 'baNaNa';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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>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 Typekonvertierung 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(parseInt('3.5rem')); // => 3 <- 'number'
|
||||
console.log(parseFloat('3.5rem')); // => 3.5 <- 'number'
|
||||
console.log(parseFloat('$3.5rem')); // => NaN <- 'number'
|
||||
|
||||
console.log(String(10)); // => '10' <- 'string'
|
||||
console.log((10).toString()); // => '10' <- 'string'
|
||||
|
||||
console.log(Boolean(1)); // => true <- 'boolean'
|
||||
console.log(Boolean(0)); // => false <- 'boolean'
|
||||
console.log(Boolean('')); // => false <- 'boolean'
|
||||
console.log(Boolean('a')); // => true <- 'boolean'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,176 @@
|
||||
<!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>
|
||||
<!-- table.table.table-striped.my-3>thead.table-dark>tr>th{Methode oder Konstante}+th{Zweck}+th{Beispiel} -->
|
||||
<table class="table table-striped my-3">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th>Methode oder Konstante</th>
|
||||
<th>Zweck</th>
|
||||
<th>Beispiel</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<!-- tbody>tr*11>td*3 -->
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt">
|
||||
sqrt
|
||||
</a>
|
||||
</td>
|
||||
<td>Quadratwurzel</td>
|
||||
<td>Math.sqrt(9) ergibt 3/td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Math/pow">
|
||||
pow
|
||||
</a>
|
||||
</td>
|
||||
<td>Potenzieren</td>
|
||||
<td>Math.pow(2, 5) ergibt 32</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Math/cos">
|
||||
cos
|
||||
</a>
|
||||
</td>
|
||||
<td>Kosinus</td>
|
||||
<td>Math.cos(0) ergibt 1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Math/pi">PI</a>
|
||||
</td>
|
||||
<td>π</td>
|
||||
<td>Math.PI ergibt 3.141592653589793</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Math/round">
|
||||
round
|
||||
</a>
|
||||
</td>
|
||||
<td>kaufmännisches Runden</td>
|
||||
<td>Math.round(3.678) ergibt 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">
|
||||
floor
|
||||
</a>
|
||||
</td>
|
||||
<td>Abrunden</td>
|
||||
<td>Math.floor(3.678) ergibt 3</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil">
|
||||
ceil
|
||||
</a>
|
||||
</td>
|
||||
<td>Aufrunden</td>
|
||||
<td>Math.ceil(3.678) ergibt 4</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Math/max">
|
||||
max
|
||||
</a>
|
||||
</td>
|
||||
<td>Maximalwert aus beliebig vielen Argumenten</td>
|
||||
<td>Math.max(3, 7, 2) ergibt 7</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Math/min">
|
||||
min
|
||||
</a>
|
||||
</td>
|
||||
<td>Minimalwert aus beliebig vielen Argumenten</td>
|
||||
<td>Math.min(3, 7, 2) ergibt 2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Math/abs">
|
||||
abs
|
||||
</a>
|
||||
</td>
|
||||
<td>Betrag einer Zahl (ohne Vorzeichen)</td>
|
||||
<td>Math.abs(-3.678) ergibt 3.678</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Math/random">
|
||||
random
|
||||
</a>
|
||||
</td>
|
||||
<td>Eine zufällige Zahl</td>
|
||||
<td>Math.random() gibt eine zufällige Zahl zwischen 0 und 1 zurück, wobei die 1 nie erreicht wird</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</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.max(3, 7, 20, 1)); //=> 20
|
||||
|
||||
const numbers = [3, 7, 20, 1];
|
||||
console.log(numbers[0]); // => 3
|
||||
console.log(numbers[1]); // => 7
|
||||
|
||||
console.log(Math.max(...numbers)); // => 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.4999999999)); // => 3
|
||||
|
||||
console.log(Math.floor(3.9)); // => 3
|
||||
console.log(Math.floor(3.1)); // => 3
|
||||
|
||||
console.log(Math.ceil(3.9)); // => 4
|
||||
console.log(Math.ceil(3.1)); // => 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>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!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'
|
||||
// ACHTUNG
|
||||
console.log(zahl.toFixed(2) + 10); // => '3.4610' <- 'string' // ACHTUNG VERKETTUNG FINDET STATT
|
||||
|
||||
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>
|
||||
Reference in New Issue
Block a user