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-19 12:55:46 +02:00
parent 7cbd3bef3b
commit fd77df4e3b
3 changed files with 143 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
01_grundlagen/linksammlung.md
View File

@@ -24,3 +24,10 @@
## Tools/ Software ## Tools/ Software
- [Microsoft Powertoys](https://learn.microsoft.com/de-de/windows/powertoys/) - [Microsoft Powertoys](https://learn.microsoft.com/de-de/windows/powertoys/)
## CSS/SCSS Tuts
- [CSS Reference](https://cssreference.io/)
- [CSS Tricks - Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [CSS Flexboxfroggy](https://flexboxfroggy.com/#de)
- [CSS Gridgarden](https://cssgridgarden.com/#de)

58
01_grundlagen/unterricht/tag05/01_is-nan.html Normal file
View File

@@ -0,0 +1,58 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>isNaN()</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>isNaN()</h1>
<p>
Die <code>isNaN()</code> Methode prüft, ob ein Wert NaN ist. Bemerkung: Aufgrund innerer Zwänge weist die
isNaN Methode interessante Regeln auf. Alternativ kann die in ECMAScript 2015 definierte Methode
<code>Number.isNaN()</code> genutzt werden.
</p>
<ul class="list">
<li>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/isNaN">isNaN()</a>
</li>
</ul>
</div>
</main>
<script>
'use strict';
console.log(isNaN(3)); // => false
console.log(isNaN('Hallo')); // => true
// seit ES6 (2015)
console.log(Number.isNaN('Hallo')); // => true
console.log(isNaN(NaN)); // => true, denn NaN bedeutet Not a Number
console.log(isNaN(-42));
console.log(isNaN(27));
console.log(isNaN(25.342)); // => false, denn die Argumente sind Zahlen.
console.log(isNaN('17.7')); // => false
console.log(isNaN('dreiundzwanzig')); // => true
console.log(isNaN('3Autos')); // => true
console.log(isNaN('3.5')); //=> false - Eselsbrücke mit 2 multiplizieren -> '3.5' * 2 => 7
console.log(isNaN('3,5')); //=> true - Eselsbrücke mit 2 multiplizieren -> '3,5' * 2 => NaN
console.log(isNaN('3m')); //=> '3m' * 2 -> NaN --> true
// Verneinung über ! - unärer Operator (NOT)
console.log(!isNaN('17.7')); // => true
// Helferfunktion isNumber()
const isNumber = (n) => !isNaN(n);
console.log(isNumber(123)); // => true
console.log(isNumber('hello')); // => false
</script>
</body>
</html>

78
01_grundlagen/unterricht/tag05/02_reichweite-verbrauch-formular.html Normal file
View File

@@ -0,0 +1,78 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Formularbeispiel: Reichweite & Verbrauch</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>Formularbeispiel: Reichweite & Verbrauch</h1>
<p>Berechne deinen PKW-Kraftstoffverbrauch, indem du folgende Felder ausfüllst:</p>
<form class="form-calculator">
<div class="row">
<div class="col">
<div class="mb-3">
<label for="input-distance" class="form-label">Gefahrene Strecke in km</label>
<input
type="number"
min="0"
step="0.1"
placeholder="0,0"
id="input-distance"
name="distance"
class="form-control input-distance" />
</div>
</div>
</div>
<!-- ▲ /row ▲ -->
<!-- .row>.col>.mb-3>label.form-label+input:number.form-control -->
<div class="row">
<div class="col">
<div class="mb-3">
<label for="input-fuel-used" class="form-label"> Verbrauchte Benzinmenge </label>
<input
type="number"
placeholder="0,0"
name="fuel-used"
id="input-fuel-used"
class="form-control input-fuel-used" />
</div>
</div>
</div>
<!-- ▲ /row ▲ -->
<div class="row">
<div class="col">
<div class="mb-3">
<label for="input-tank-size" class="form-label">Tankgröße </label>
<input
type="number"
placeholder="0,0"
name="tank-size"
id="input-tank-size"
class="form-control input-tank-size" />
</div>
</div>
</div>
<!-- ▲ /row ▲ -->
<!-- .row>.col>.mb-3>button:submit.btn.btn-dark.button-calculate -->
<div class="row">
<div class="col">
<div class="mb-3">
<button type="submit" class="btn btn-dark button-calculate">Rechnen</button>
</div>
</div>
</div>
</form>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
</script>
</body>
</html>