This commit is contained in:
Philippe Torrel
@@ -24,3 +24,10 @@
|
||||
## Tools/ Software
|
||||
|
||||
- [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
58
01_grundlagen/unterricht/tag05/01_is-nan.html
Normal 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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user