This commit is contained in:
Philippe Torrel
Binary file not shown.
@@ -0,0 +1,37 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung 13: Fehler im Detail</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">
|
||||
<div class="alert alert-primary my-3">
|
||||
<h2>Übung 13: Fehler im Detail</h2>
|
||||
|
||||
<p>Im folgenden Code haben sich einige Fehler und auch Regelwidrigkeiten eingeschlichen.</p>
|
||||
</div>
|
||||
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
// let TALE = 'Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversations?'
|
||||
|
||||
// So she was considering in her own mind, as well as she could, for the hot day made her feel very sleepy and stupid, whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a white rabbit with pink eyes ran close by her.
|
||||
|
||||
// There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the rabbit say to itself, 'Oh dear! Oh dear! I shall be too late!' (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural);
|
||||
|
||||
// But when the rabbit actually took a watch out of its waistcoat-pocket, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and fortunately was just in time to see it pop down a large rabbit-hole under the hedge.
|
||||
|
||||
// Console.log(tale);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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>
|
||||
@@ -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.3.8/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>
|
||||
@@ -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.3.8/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>
|
||||
@@ -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">
|
||||
<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>
|
||||
Binary file not shown.
@@ -0,0 +1,100 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Relationale Operatoren & Vergleichoperator</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>Relationale Operatoren & Vergleichoperator</h1>
|
||||
<!-- ul.list.list-group>li.list-group-item*6 -->
|
||||
<ul class="list list-group">
|
||||
<li class="list-group-item"><strong><</strong> kleiner</li>
|
||||
<li class="list-group-item"><strong>></strong> größer</li>
|
||||
<li class="list-group-item"><strong><=</strong> kleiner gleich</li>
|
||||
<li class="list-group-item"><strong>>=</strong> größer gleich</li>
|
||||
<li class="list-group-item"><strong>===</strong> identisch (strikt)</li>
|
||||
<li class="list-group-item"><strong>!==</strong> nicht identisch (strikt)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// Relationale Operatoren
|
||||
console.log(3 < 5); // => true
|
||||
console.log(3 > 5); // => false
|
||||
|
||||
console.log(325 > 12); // => true
|
||||
console.log(325 < 12); // => false
|
||||
|
||||
console.log(325 <= 325); // => true
|
||||
console.log(325 >= 325); // => true
|
||||
|
||||
// Strikter Vergleich (Datentyp wird mit überprüft)
|
||||
console.log(365 === 365); // => true
|
||||
console.log(365 === '365'); // => false
|
||||
|
||||
console.log('Ladislaus' === 'Ladislaus'); //=> true
|
||||
console.log('Ladislaus' === 'ladislaus'); //=> false
|
||||
|
||||
// kein strikter Vergleich
|
||||
console.log(365 == 365); // => true
|
||||
console.log(365 == '365'); // => true
|
||||
|
||||
// nicht identisch (Datentype wir mit überprüft)
|
||||
console.log(365 !== 365); // => false
|
||||
console.log(365 !== '365'); // => true
|
||||
console.log(2 !== 5); // => true
|
||||
|
||||
// keine strikten Vergleich (VERWENDUNG VERMEIDEN)
|
||||
console.log(5 == '5'); // => true
|
||||
console.log(0 == false); // => true
|
||||
console.log('0' == false); // => true
|
||||
console.log('0' == ''); // => false
|
||||
console.log(0 == ''); // => true
|
||||
console.log(0 == '0'); // => true
|
||||
|
||||
// Only null, undefined, 0, false, NaN and "" are falsy in JavaScript. Everything else is truthy.
|
||||
|
||||
// Lexikographischer Vergleich
|
||||
// https://asciitable.xyz/
|
||||
console.log('5' < 'a'); // => true
|
||||
console.log('A' < 'a'); // => true
|
||||
console.log('abcd' < 'abce'); // => true
|
||||
console.log('abC' < 'abc'); // => true
|
||||
console.log('ab' < 'abc'); // => true
|
||||
console.log('300' < '4'); // => true
|
||||
|
||||
console.log('[' < '{'); // => true
|
||||
|
||||
console.log('|' < ']'); // => false
|
||||
console.log('|'.charCodeAt() < ']'.charCodeAt()); // => false
|
||||
console.log(124 < 93); // => false
|
||||
|
||||
console.log('|'.charCodeAt()); // => 124
|
||||
console.log(']'.charCodeAt()); // => 93
|
||||
|
||||
// implizite Typkonvertierung
|
||||
// Wenn ein Operand "Number" ist, dann wird der gegenüberliegende Operand in "Number" konvertiert
|
||||
console.log('300' < 4); // => 300 < 4 -> false
|
||||
console.log(300 <= '300'); // => 300 <= 300 -> true
|
||||
|
||||
// Bei NaN in einem Vergleich ist das Ergebnis IMMER ---> false
|
||||
console.log(5 < '3m'); // => 5 < NaN -> false
|
||||
console.log(300 < NaN); // => false
|
||||
|
||||
console.log(NaN === NaN); // => false
|
||||
console.log(3 > 'Hallo'); // => 3 > NaN -> false <- Bei NaN ist das Ergebnis immer -> false
|
||||
|
||||
console.log(NaN === !NaN); // => false
|
||||
console.log(NaN === NaN); // => false
|
||||
|
||||
console.log(false === false); // => true
|
||||
console.log((NaN === !NaN) === (NaN === NaN)); // => true
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,66 @@
|
||||
<!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 <code>NaN</code> 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 Number('Hallo') -> NaN
|
||||
|
||||
console.log(isNaN(NaN)); // => true
|
||||
|
||||
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
|
||||
|
||||
// Verneinung über ! - unärer Operator
|
||||
console.log(!isNaN('17.7')); // => true
|
||||
|
||||
// Die statische Methode Number.isNaN() bestimmt, ob der übergebene Wert der Zahlenwert NaN ist, und gibt false zurück, wenn die Eingabe nicht vom Typ Number ist. Sie ist eine robustere Version der ursprünglichen globalen Funktion isNaN().
|
||||
|
||||
//
|
||||
console.log(Number.isNaN('a')); // => false
|
||||
console.log(Number.isNaN('3' + '3')); // => false
|
||||
console.log(Number.isNaN([])); // => false
|
||||
console.log(Number.isNaN({})); // => false
|
||||
console.log(Number.isNaN(false)); // => false
|
||||
console.log(Number.isNaN(true)); // => false
|
||||
console.log(Number.isNaN('33')); // => false
|
||||
|
||||
console.log(Number.isNaN(33)); // => false
|
||||
console.log(Number.isNaN(NaN)); // => true
|
||||
|
||||
// typeof value === 'number' && isNaN(value);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user