This commit is contained in:
Philippe Torrel
45
01_grundlagen/uebungen/#o01_palindrom.html
Normal file
45
01_grundlagen/uebungen/#o01_palindrom.html
Normal file
@@ -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>Optionale Übung optional 01: Palindrom Checker</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>Optionale Übung 01: Palindrom Checker</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Ein Palindrom ist ein Wort, das vorwärts und rückwärts gelesen dasselbe ist. Ein guter Weg, um das zu
|
||||||
|
überprüfen, ist, das Wort umzukehren und zu sehen, ob es dem Original entspricht. Allerdings sollte man
|
||||||
|
dabei die Groß- und Kleinschreibung sowie Leerzeichen oder Sonderzeichen berücksichtigen.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Schreibe eine JavaScript-Funktion namens <code>isPalindrom</code>, die eine Zeichenkette (string) als
|
||||||
|
Eingabe akzeptiert. Die Funktion soll <code>true</code> zurückgeben, wenn es sich bei der Zeichenkette um
|
||||||
|
ein Palindrom handelt, und <code>false</code> andernfalls.
|
||||||
|
</p>
|
||||||
|
<h3>Beispiele:</h3>
|
||||||
|
<ul>
|
||||||
|
<li>"anna"</li>
|
||||||
|
<li>"Lagerregal"</li>
|
||||||
|
<li>"Ein Esel lese nie"</li>
|
||||||
|
</ul>
|
||||||
|
<h3>Anforderungen:</h3>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
Die Funktion soll nicht zwischen Groß- und Kleinschreibung unterscheiden (z. B. 'Anna' ist ein Palindrom).
|
||||||
|
</li>
|
||||||
|
<li>Leerzeichen und Satzzeichen sollen ignoriert werden.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -1,50 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="de">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>Übung 30: Die dunkle Seite von JavaScript — der Kampf geht weiter</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 30: Die dunkle Seite von JavaScript — der Kampf geht weiter</h1>
|
|
||||||
|
|
||||||
<p>
|
|
||||||
Es wird Zeit, das Spiel weiter zu optimieren. Nimm dir eine der Fragen vor, die schon implementiert ist:
|
|
||||||
</p>
|
|
||||||
<p>»Was heißt if auf Deutsch?« (Mehrere Lösungsmöglichkeiten: wenn, falls).</p>
|
|
||||||
<p>
|
|
||||||
Der Code deckt schon drei verschiedene Lösungsmöglichkeiten ab. Aber was ist, wenn jemand statt
|
|
||||||
<code>wenn</code> <code>Wenn</code> oder <code>WENN</code> schreibt?
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Das Thema Groß- und Kleinschreibung wird dir bei Benutzereingaben öfter begegnen. Für das Spiel würde es zum
|
|
||||||
Beispiel helfen, wenn der Spieler die Eingabe immer komplett kleinschreibt. Sicher ist der Spieler verwirrt,
|
|
||||||
wenn das Spiel seine Antwort Wenn als falsch quittiert.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
Optimiere die betreffende Stelle im Spiel, indem du die Benutzereingabe in Kleinbuchstaben umwandelst — vor
|
|
||||||
Prüfung der if-Bedingung.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<script>
|
|
||||||
'use strict';
|
|
||||||
|
|
||||||
// const QUESTION_1 = 'es geht los! Sag mir mal, welcher Operator die höhere Priorität hat: * oder + ?';
|
|
||||||
// const SOLUTION_1 = '*';
|
|
||||||
|
|
||||||
// const QUESTION_2 = 'Was ist das deutsche Wort für if?';
|
|
||||||
// const SOLUTION_2A = 'falls';
|
|
||||||
// const SOLUTION_2B = 'wenn';
|
|
||||||
|
|
||||||
// const QUESTION_3 = 'Jetzt gib bitte einen String mit einer Länge von 8 bis 15 Zeichen ein';
|
|
||||||
// const SOLUTION_3A = 8;
|
|
||||||
// const SOLUTION_3B = 15;
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
88
01_grundlagen/uebungen/#u36_kekse-array.html
Normal file
88
01_grundlagen/uebungen/#u36_kekse-array.html
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Übung 36: Kekse backen mit Arrays</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 36: Kekse backen mit Arrays</h2>
|
||||||
|
<img
|
||||||
|
src="https://trainers.atp.wpicert.org/system/wpi_curriculum/file/images/files/000/006/526/800-534/53f6cb7feb9e9a7580d88ce5fa5a6d5c.jpg?1739200429"
|
||||||
|
alt=""
|
||||||
|
width="300"
|
||||||
|
class="img-thumbnail" />
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Du möchtest ein digitales Rezeptbuch schreiben. Die Zutaten für das jeweilige Rezept stellst du in einem
|
||||||
|
Array zur Verfügung.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<ol>
|
||||||
|
<li>
|
||||||
|
Lege für das erste Rezept — Haferflocken-Kekse — ein Array mit den folgenden Zutaten an:
|
||||||
|
|
||||||
|
<code>
|
||||||
|
<pre>
|
||||||
|
1/4 cup vegetable oil
|
||||||
|
1 separated egg
|
||||||
|
1/2 cup sugar
|
||||||
|
1 tsp baking powder
|
||||||
|
</pre>
|
||||||
|
</code>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>Da in der Liste das Mehl fehlt, musst du 1 EL Mehl (1 tsp flour) noch nachträglich ergänzen.</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
Beim Durchlesen der Liste fällt auf, dass die wohl wichtigste Zutat ebenfalls fehlt. Füge noch 100 g
|
||||||
|
Haferflocken (1 cup rolled oats) an die erste Position in die Zutatenliste ein.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Für Kekse ist es eigentlich besser, Butter statt Öl zu verwenden. Tausche das Öl in der Liste
|
||||||
|
dementsprechend gegen 75 g Butter (1/3 cup butter) aus.
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
Wandle das Array nun in einen String um und speichere diesen in einer Variablen. Dabei sollen die Zutaten
|
||||||
|
als Liste ausgegeben werden.
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
Und damit die Rezeptspielerei nicht total sinnlos war, bekommst du natürlich noch die Anleitung von uns
|
||||||
|
dazu. Speichere auch diese in einer Variable und gib das komplette Rezept in der Konsole aus.
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
|
||||||
|
<p>Anleitung:</p>
|
||||||
|
<blockquote>
|
||||||
|
Melt the butter in a pan, add the rolled oats and mix everything well. Remove the mixture from heat and let
|
||||||
|
it cool. Add the sugar to the egg white and beat until stiff. Mix in the yolk, baking powder and flour. Now
|
||||||
|
mix in the cooled oat mixture. Shape small mounds of batter onto a baking sheet. These mounds should not be
|
||||||
|
too large, since the batter will spread out a little as it is baked. Bake for 15 minutes at 350 °F in a
|
||||||
|
pre-heated oven.
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
<div class="output alert alert-secondary my-3"></div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const outputEl = document.querySelector('.output');
|
||||||
|
|
||||||
|
const introduction = `Melt the butter in a pan, add the rolled oats and mix everything well. Remove the mixture from heat and let it cool. Add the sugar to the egg white and beat until stiff. Mix in the yolk, baking powder and flour. Now mix in the cooled oat mixture. Shape small mounds of batter onto a baking sheet. These mounds should not be too large, since the batter will spread out a little as it is baked. Bake for 15 minutes at 350 °F in a pre-heated oven.`;
|
||||||
|
|
||||||
|
const receipeAr = [
|
||||||
|
'1/4 cup vegetable oil', //
|
||||||
|
'1 separated egg',
|
||||||
|
'1/2 cup sugar',
|
||||||
|
'1 tsp baking powder',
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
81
01_grundlagen/uebungen/#u37-bus-stations.html
Normal file
81
01_grundlagen/uebungen/#u37-bus-stations.html
Normal file
@@ -0,0 +1,81 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Übung 37: Die Kurzstreckenfahrt</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 37: Die Kurzstreckenfahrt</h2>
|
||||||
|
<p>
|
||||||
|
Nach dem Backen möchtest du ein bisschen Zug fahren. Du selbst befindest dich in New York in der Nähe der
|
||||||
|
Haltestelle Astoria-Ditmars Blvd. Deine Freunde, die dich und deine Kekse schon freudig erwarten, wohnen bei
|
||||||
|
der Haltestelle Queensboro Plaza. Da du aber nur ein Kurzstrecken-Ticket lösen möchtest, musst du den Rest
|
||||||
|
der Strecke laufen. Deswegen benötigst du die Haltestellen-Liste (siehe Grafik) nur bis zur Haltestelle
|
||||||
|
Broadway.
|
||||||
|
</p>
|
||||||
|
<p><strong>Hinweis:</strong> Für diese Übung bietet es sich an, mit `slice` und `indexOf` zu arbeiten.</p>
|
||||||
|
|
||||||
|
<img
|
||||||
|
src="https://trainers.atp.wpicert.org/system/wpi_curriculum/file/images/files/000/006/527/800-590/3b5ac28c38d961b21846b5adfe676dc1.png?1739200430"
|
||||||
|
width="400"
|
||||||
|
alt=""
|
||||||
|
class="img-thumbnail" />
|
||||||
|
|
||||||
|
<ol>
|
||||||
|
<li>
|
||||||
|
Erstelle ein Array mit den Haltestellen der Linie W:
|
||||||
|
|
||||||
|
<code>
|
||||||
|
<pre>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const LINE_W = [
|
||||||
|
'Astoria-Ditmars Blvd',
|
||||||
|
'Astoria Blvd',
|
||||||
|
'30 Av',
|
||||||
|
'Broadway',
|
||||||
|
'36 Av',
|
||||||
|
'39 Av',
|
||||||
|
'Queensboro Plaza',
|
||||||
|
];
|
||||||
|
</pre>
|
||||||
|
</code>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>Finde die Position der gewünschten Zielhaltestelle Broadway heraus.</li>
|
||||||
|
|
||||||
|
<li>Entferne alle Haltestellen nach Broadway aus dem Array.</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
Schreibe eine Funktion, die dir nach Übergabe einer beliebigen Zielhaltestelle ein Array mit allen
|
||||||
|
Haltestellen ab Astoria-Ditmars Blvd bis zur Zielhaltestelle zurückgibt.
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>Erweitere die Funktion, sodass du auch die Starthaltestelle übergeben kannst.</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<div class="output alert alert-secondary my-3"></div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const outputEl = document.querySelector('.output');
|
||||||
|
|
||||||
|
const LINE_W = [
|
||||||
|
'Astoria-Ditmars Blvd',
|
||||||
|
'Astoria Blvd',
|
||||||
|
'30 Av',
|
||||||
|
'Broadway',
|
||||||
|
'36 Av',
|
||||||
|
'39 Av',
|
||||||
|
'Queensboro Plaza',
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
34
01_grundlagen/uebungen/#u38_alte-listen.html
Normal file
34
01_grundlagen/uebungen/#u38_alte-listen.html
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Übung 38: Alte Listen</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 38: Alte Listen</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
NerdWorld stellt dir eine neue Aufgabe: Die Mitarbeiter haben Produkte früher in Excel-Listen verwaltet. Zu
|
||||||
|
Migrationszwecken haben die Mitarbeiter sie nun als CSV-Dateien (comma separated values) exportiert. Damit
|
||||||
|
sind dann alle Elemente in einer Liste durch Kommas getrennt.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Schreibe eine Funktion handleCsv, die einen übergebenen CSV-String in ein Array splittet und alphabetisch
|
||||||
|
sortiert. Logge das fertig verarbeitete Array als Liste (pro Produkt eine Zeile) in die Konsole.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const productList =
|
||||||
|
'3Doodler 3D Printing Pen, Game of Thrones Wax Seal Coasters, 10th Doctor Sonic Screwdriver Exclusive Programmable TV Remote, Electronic Butterfly in a Jar, Aquafarm: Aquaponics Fish Garden, Cassette Adapter Bluetooth, Marvel Comics Lightweight Infinity Scarf, Ollie - The App Controlled Robot, Sound Splash Bluetooth Waterproof Shower Speaker, PowerCube, Backpack of Holding, Retro Duo Portable NES/SNES Game System, Universal Gadget Wrist Charger, USB Squirming Tentacle, USB Fishquarium, Space Bar Keyboard Organizer & USB Hub Pop, USB Pet Rock, Powerstation 5- E. Maximus Chargus, Dual Heated Travel Mug, Crosley Collegiate Portable USB Turntable, Meh Hoodie, Magnetic Accelerator Cannon, 8-Bit Heat-Change Mug';
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
@@ -25,6 +25,13 @@
|
|||||||
const outputElement = document.querySelector('.output');
|
const outputElement = document.querySelector('.output');
|
||||||
|
|
||||||
const name = 'Heribert Gold '.trim();
|
const name = 'Heribert Gold '.trim();
|
||||||
|
|
||||||
|
const spacePosition = name.indexOf(' ');
|
||||||
|
const firstName = name.substring(0, spacePosition);
|
||||||
|
const lastName = name.substring(spacePosition + 1).trim();
|
||||||
|
|
||||||
|
console.log(firstName);
|
||||||
|
console.log(lastName);
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
@@ -27,6 +27,16 @@
|
|||||||
const outputEl = document.querySelector('.output');
|
const outputEl = document.querySelector('.output');
|
||||||
|
|
||||||
const name = 'Ladislaus Jones'.trim();
|
const name = 'Ladislaus Jones'.trim();
|
||||||
|
|
||||||
|
const firstSpacePos = name.indexOf(' ');
|
||||||
|
const lastSpacePos = name.lastIndexOf(' ');
|
||||||
|
|
||||||
|
const firstName = name.substr(0, firstSpacePos);
|
||||||
|
const secondName = name.substr(lastSpacePos);
|
||||||
|
|
||||||
|
const firstNamefirstLetter = firstName.substr(0, 1).toUpperCase();
|
||||||
|
|
||||||
|
outputEl.textContent = `${secondName}, ${firstNamefirstLetter}.`;
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -26,12 +26,20 @@
|
|||||||
<li>007 => 007</li>
|
<li>007 => 007</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="output alert alert-secondary my-3"></div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<script>
|
<script>
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
let itemNumber = '123';
|
const outputEl = document.querySelector('.output');
|
||||||
|
|
||||||
|
const itemNumber = '123';
|
||||||
|
|
||||||
|
// const correctedItemNr = (itemNumber.charAt(0) !== '0' ? '0' : '') + itemNumber;
|
||||||
|
const correctedItemNr = (itemNumber.startsWith('0') ? '' : '0') + itemNumber;
|
||||||
|
|
||||||
|
outputEl.textContent = `ItemNr: ${itemNumber}, CorrectedItemNr: ${correctedItemNr}.`;
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
88
01_grundlagen/uebungen/u30_quiz-dark-side.html
Normal file
88
01_grundlagen/uebungen/u30_quiz-dark-side.html
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Übung 30: Die dunkle Seite von JavaScript — der Kampf geht weiter</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 30: Die dunkle Seite von JavaScript — der Kampf geht weiter</h1>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Es wird Zeit, das Spiel weiter zu optimieren. Nimm dir eine der Fragen vor, die schon implementiert ist:
|
||||||
|
</p>
|
||||||
|
<p>»Was heißt if auf Deutsch?« (Mehrere Lösungsmöglichkeiten: wenn, falls).</p>
|
||||||
|
<p>
|
||||||
|
Der Code deckt schon drei verschiedene Lösungsmöglichkeiten ab. Aber was ist, wenn jemand statt
|
||||||
|
<code>wenn</code> <code>Wenn</code> oder <code>WENN</code> schreibt?
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Das Thema Groß- und Kleinschreibung wird dir bei Benutzereingaben öfter begegnen. Für das Spiel würde es zum
|
||||||
|
Beispiel helfen, wenn der Spieler die Eingabe immer komplett kleinschreibt. Sicher ist der Spieler verwirrt,
|
||||||
|
wenn das Spiel seine Antwort Wenn als falsch quittiert.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Optimiere die betreffende Stelle im Spiel, indem du die Benutzereingabe in Kleinbuchstaben umwandelst — vor
|
||||||
|
Prüfung der if-Bedingung.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const QUESTION_1 = 'Welcher Operator hat eine höhere Priorität: * oder + ?';
|
||||||
|
const SOLUTION_1 = '*';
|
||||||
|
|
||||||
|
const QUESTION_2 = 'Was ist das deutsche Wort für if?';
|
||||||
|
const SOLUTION_2_1 = 'wenn';
|
||||||
|
const SOLUTION_2_2 = 'falls';
|
||||||
|
|
||||||
|
const QUESTION_3 = 'Geben Sie bitte einen String mit einer Länge von 8 bis 15 Zeichen ein';
|
||||||
|
const SOLUTION_3_1 = 8;
|
||||||
|
const SOLUTION_3_2 = 15;
|
||||||
|
|
||||||
|
const outputEl = document.querySelector('.output');
|
||||||
|
|
||||||
|
const username = prompt('Bitte geben Sie ihren Vornamen ein: ');
|
||||||
|
alert(`Willkommen beim Spiel, die dunkle Seite von JS, ${username}!`);
|
||||||
|
|
||||||
|
const playerFitness = prompt(
|
||||||
|
`${username}, fühlen Sie sich bereit gegen die dunkle Seite von JS anzutreten? Bitte antworten Sie mit ja oder nein (y/n)`,
|
||||||
|
)
|
||||||
|
.trim()
|
||||||
|
.toLowerCase();
|
||||||
|
|
||||||
|
if (playerFitness === 'ja' || playerFitness === 'y') {
|
||||||
|
alert('Okay, mögen die Spiele beginnen');
|
||||||
|
|
||||||
|
const answer1 = prompt(QUESTION_1).trim().toLowerCase();
|
||||||
|
if (answer1 === SOLUTION_1) {
|
||||||
|
alert(`Richtige Antwort, ${username}! Die helle Seite ist stark in dir!`);
|
||||||
|
} else {
|
||||||
|
alert(`${username}, leider lagst du falsch. Die dunkle Seite von JS hat gewonnen!`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const answer2 = prompt(QUESTION_2).trim().toLowerCase();
|
||||||
|
if (answer2 === SOLUTION_2_1 || answer2 === SOLUTION_2_2) {
|
||||||
|
alert(`Richtige Antwort, ${username}! Die helle Seite ist weiterhin stark in dir!`);
|
||||||
|
} else {
|
||||||
|
alert(`${username}, leider lagst du falsch. Die dunkle Seite wächst in dir!`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const answer3 = Number(prompt(`${username}! ${QUESTION_3}`));
|
||||||
|
if (answer3.length >= SOLUTION_3_1 && answer3.length <= SOLUTION_3_2) {
|
||||||
|
alert(`Richtige Antwort, ${username}! Die helle Seite ist stark in dir!`);
|
||||||
|
} else {
|
||||||
|
alert(`${username}, leider lagst du falsch. Die dunkle Seite ist stark in dir!`);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
alert(`${username}, die dunkle Seite ist stark in dir!`);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
@@ -19,9 +19,22 @@
|
|||||||
|
|
||||||
const outputEl = document.querySelector('.output');
|
const outputEl = document.querySelector('.output');
|
||||||
|
|
||||||
/*
|
const outputName = (name) => {
|
||||||
TODO: Schreibe eine Funktion, die deinen Namen in der Konsole ausgibt.
|
console.log(name);
|
||||||
*/
|
alert(name);
|
||||||
|
};
|
||||||
|
|
||||||
|
outputName('Max Power');
|
||||||
|
|
||||||
|
// =====
|
||||||
|
|
||||||
|
const getName = (name) => {
|
||||||
|
return name[0].toUpperCase() + name.substring(1).toLowerCase();
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log(getName('philippe'));
|
||||||
|
alert(getName('adel'));
|
||||||
|
outputEl.textContent = getName('KaHlEeL');
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -24,6 +24,16 @@
|
|||||||
</main>
|
</main>
|
||||||
<script>
|
<script>
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
|
const logTransformedName = (firstName, secondName) => {
|
||||||
|
const tName = `${secondName.charAt(0).toUpperCase() + secondName.substr(1).toLowerCase()}, ${firstName.charAt(0).toUpperCase()}.`;
|
||||||
|
console.log(tName);
|
||||||
|
};
|
||||||
|
|
||||||
|
logTransformedName('Max', 'Power');
|
||||||
|
logTransformedName('adEL', 'jabaRkHel');
|
||||||
|
logTransformedName('kAHlEel', 'johNson');
|
||||||
|
logTransformedName('andreAs', 'rohLedEr');
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
@@ -99,15 +99,38 @@ showInvitationFor('Ladislaus', 'Music Festival', 'September 10', true);
|
|||||||
</li>
|
</li>
|
||||||
</ol>
|
</ol>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="output alert alert-secondary my-3"></div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<script>
|
<script>
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
/*
|
const outputEl = document.querySelector('.output');
|
||||||
|
|
||||||
TODO: showInvitationFor Function
|
const showInventationFor = (name, event, date, VIP) => {
|
||||||
*/
|
return `Dear ${name},
|
||||||
|
|
||||||
|
${VIP ? 'You have registered as a VIP! Enjoy exclusive benefits and access to VIP areas.' : 'Thank you for your registration.'}
|
||||||
|
|
||||||
|
Event Details:
|
||||||
|
- Event: ${event}
|
||||||
|
- Date: ${date}
|
||||||
|
- Venue: Main Hall, Conference Center
|
||||||
|
|
||||||
|
We look forward to seeing you at the event!
|
||||||
|
|
||||||
|
Best regards,
|
||||||
|
The Event Team`;
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log(showInventationFor('Heribert', 'Tech Conference', 'July 24', true));
|
||||||
|
console.log('==============================');
|
||||||
|
console.log(showInventationFor('Goldy', 'Art Workshop', 'August 15', false));
|
||||||
|
console.log('==============================');
|
||||||
|
showInventationFor('Ladislaus', 'Music Festival', 'September 10', true);
|
||||||
|
console.log(console.log('=============================='));
|
||||||
|
|
||||||
|
outputEl.innerHTML = showInventationFor('Andreas', 'JS Conference', 'June 24', true).replaceAll('\n', '<br />');
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
@@ -69,12 +69,24 @@
|
|||||||
const inputLastnameEl = document.querySelector('input[name="lastname"]');
|
const inputLastnameEl = document.querySelector('input[name="lastname"]');
|
||||||
|
|
||||||
// Funktionsdefinition
|
// Funktionsdefinition
|
||||||
|
const transformName = (firstName, secondName) => {
|
||||||
|
const tName = `${secondName.charAt(0).toUpperCase() + secondName.substr(1).toLowerCase()}, ${firstName.charAt(0).toUpperCase()}.`;
|
||||||
|
return tName;
|
||||||
|
};
|
||||||
|
|
||||||
formTransformEl.addEventListener('submit', (e) => {
|
formTransformEl.addEventListener('submit', (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
|
const name = transformName(inputFirstnameEl.value, inputLastnameEl.value);
|
||||||
|
outputEl.textContent = name;
|
||||||
});
|
});
|
||||||
|
|
||||||
// console.log(transformName('Max', 'Mustermann')); //=> 'Mustermann, M.'
|
// =====
|
||||||
|
console.log(transformName('Max', 'Mustermann')); //=> 'Mustermann, M.'
|
||||||
|
console.log(transformName('Max', 'Power'));
|
||||||
|
console.log(transformName('adEL', 'jabaRkHel'));
|
||||||
|
console.log(transformName('kAHlEel', 'johNson'));
|
||||||
|
console.log(transformName('andreAs', 'rohLedEr'));
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -62,7 +62,7 @@
|
|||||||
<script>
|
<script>
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
// DOM & Variabendeklaration ==
|
// DOM & Variabendeklaration ========
|
||||||
const formCalculatorEl = document.querySelector('.form-calculator');
|
const formCalculatorEl = document.querySelector('.form-calculator');
|
||||||
const outputAEl = document.querySelector('#output');
|
const outputAEl = document.querySelector('#output');
|
||||||
const outputBEl = document.querySelector('#output2');
|
const outputBEl = document.querySelector('#output2');
|
||||||
@@ -72,19 +72,27 @@
|
|||||||
const tankGroesseEL = document.querySelector('input[name="tangroesse"]');
|
const tankGroesseEL = document.querySelector('input[name="tangroesse"]');
|
||||||
|
|
||||||
// 1. Schreiben Sie ein Programm zur Kraftstoffverbrauchsberechnung für Pkws.
|
// 1. Schreiben Sie ein Programm zur Kraftstoffverbrauchsberechnung für Pkws.
|
||||||
//const benzinMenge = prompt('Geben Sie die verbrauchte Benzinmenge an!');
|
// const benzinMenge = prompt('Geben Sie die verbrauchte Benzinmenge an!');
|
||||||
//const strecke = prompt('Geben Sie die Strecke an!');
|
// const strecke = prompt('Geben Sie die Strecke an!');
|
||||||
|
|
||||||
// Funktionen =========
|
// Funktionen =========================
|
||||||
|
|
||||||
//
|
const berechneBenzinVerbrauch = (benzinMenge, strecke) => {
|
||||||
|
const verbrauch = (benzinMenge / strecke) * 100;
|
||||||
|
return Number(verbrauch.toFixed(1));
|
||||||
|
};
|
||||||
|
|
||||||
// EventHandler =======
|
// EventHandler =======
|
||||||
const onSubmit = (e) => {
|
const onSubmit = (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
|
console.log(berechneBenzinVerbrauch(benzinMengeEl.value, streckeEl.value));
|
||||||
|
outputAEl.textContent = berechneBenzinVerbrauch(benzinMengeEl.value, streckeEl.value);
|
||||||
};
|
};
|
||||||
|
|
||||||
formCalculatorEl.addEventListener('submit', onSubmit); // onSumbit = funktionsreferenz
|
formCalculatorEl.addEventListener('submit', onSubmit); // onSumbit = funktionsreferenz
|
||||||
|
|
||||||
|
// berechneBenzinVerbrauch(benzinMenge, strecke);
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
112
01_grundlagen/uebungen/u35_reichweite-verbrauch-2.html
Normal file
112
01_grundlagen/uebungen/u35_reichweite-verbrauch-2.html
Normal file
@@ -0,0 +1,112 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Übung 35: Reichweite & Verbrauch, Teil 3</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 35: Reichweite & Verbrauch, Teil 3</h1>
|
||||||
|
<p>
|
||||||
|
Überarbeiten Sie Reichweite & Verbrauch, Teil 2 (Übung 18). Erstellen Sie passende Funktionen, die die
|
||||||
|
Benutzereingaben zurückgeben.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="section-calculator">
|
||||||
|
<div class="container">
|
||||||
|
<form class="form-calculator" method="get">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 col-sm-6">
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="input-strecke" class="form-label">Strecke</label>
|
||||||
|
<input type="number" class="form-control" name="strecke" id="input-strecke" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-12 col-sm-6">
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="input-benzinmenge" class="form-label">verbrauchte Benzinmenge</label>
|
||||||
|
<input type="number" class="form-control" name="benzinmenge" id="input-benzinmenge" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- ▲ /.row ▲ -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="input-tankgroesse" class="form-label">Tankgröße</label>
|
||||||
|
<input type="number" class="form-control" name="tangroesse" id="input-tankgroesse" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- ▲ /.row ▲ -->
|
||||||
|
<div class="row">
|
||||||
|
<div class="col">
|
||||||
|
<!-- <input type="submit" value="Rechnen" class="btn btn-dark button-calculate" /> -->
|
||||||
|
|
||||||
|
<button type="submit" class="btn btn-dark button-calculate">Rechnen</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="alert alert-secondary my-3" id="output"></div>
|
||||||
|
<div class="alert alert-secondary my-3" id="output2"></div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// DOM & Variabendeklaration ========
|
||||||
|
const formCalculatorEl = document.querySelector('.form-calculator');
|
||||||
|
const outputAEl = document.querySelector('#output');
|
||||||
|
const outputBEl = document.querySelector('#output2');
|
||||||
|
|
||||||
|
const streckeEl = document.querySelector('input[name="strecke"]');
|
||||||
|
const benzinMengeEl = document.querySelector('input[name="benzinmenge"]');
|
||||||
|
const tankGroesseEL = document.querySelector('input[name="tangroesse"]');
|
||||||
|
|
||||||
|
// 1. Schreiben Sie ein Programm zur Kraftstoffverbrauchsberechnung für Pkws.
|
||||||
|
// const benzinMenge = prompt('Geben Sie die verbrauchte Benzinmenge an!');
|
||||||
|
// const strecke = prompt('Geben Sie die Strecke an!');
|
||||||
|
|
||||||
|
// Funktionen =========
|
||||||
|
const askFuelConsumption = () => {
|
||||||
|
return benzinMengeEl.value;
|
||||||
|
};
|
||||||
|
//
|
||||||
|
const askDistance = () => {
|
||||||
|
return streckeEl.value;
|
||||||
|
};
|
||||||
|
|
||||||
|
const askTankSize = () => {
|
||||||
|
return tankGroesseEL.value;
|
||||||
|
};
|
||||||
|
|
||||||
|
const calcConsumptionKm = (fuelConsumption, distance) => (fuelConsumption / distance) * 100;
|
||||||
|
const calcMaxDistance = (tankSize, distance, fuelConsumption) => (tankSize * distance) / fuelConsumption;
|
||||||
|
|
||||||
|
// EventHandler =======
|
||||||
|
const onSubmit = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
const fuelConsumption = askFuelConsumption();
|
||||||
|
const distance = askDistance();
|
||||||
|
const tankSize = askTankSize();
|
||||||
|
|
||||||
|
const resultConsumption = calcConsumptionKm(fuelConsumption, distance);
|
||||||
|
const resultDistance = calcMaxDistance(tankSize, distance, fuelConsumption);
|
||||||
|
|
||||||
|
outputAEl.textContent = `Ihr Verbrauch liegt bei ${resultConsumption.toFixed(2)} l/100km`;
|
||||||
|
outputBEl.textContent = `Die maximale Reichweite beträgt ${Math.round(resultDistance)}km`;
|
||||||
|
};
|
||||||
|
|
||||||
|
formCalculatorEl.addEventListener('submit', onSubmit); // onSumbit = funktionsreferenz
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
01_grundlagen/uebungen/uebungen-35-38-o1.zip
Normal file
BIN
01_grundlagen/uebungen/uebungen-35-38-o1.zip
Normal file
Binary file not shown.
@@ -53,6 +53,12 @@
|
|||||||
console.log('lorem ipsum'.substring(999)); // => ''
|
console.log('lorem ipsum'.substring(999)); // => ''
|
||||||
console.log('lorem ipsum'.substring(-999)); // => 'lorem ipsum'
|
console.log('lorem ipsum'.substring(-999)); // => 'lorem ipsum'
|
||||||
console.log('lorem ipsum'.substring(999, -999)); // => 'lorem ipsum'
|
console.log('lorem ipsum'.substring(999, -999)); // => 'lorem ipsum'
|
||||||
|
|
||||||
|
console.log('Philippe'.substring(0, 4)); //=> 'Phil'
|
||||||
|
console.log('Philippe'.substr(0, 4)); // => 'Phil'
|
||||||
|
|
||||||
|
console.log('Philippe'.substring(4, 2)); //=> 'il'
|
||||||
|
console.log('Philippe'.substr(4, 2)); //=> 'ip'
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -44,6 +44,8 @@
|
|||||||
|
|
||||||
// String Methode - str.replace('searchValue', 'replaceValue')
|
// String Methode - str.replace('searchValue', 'replaceValue')
|
||||||
|
|
||||||
|
const regex = new RegExp(newProductName);
|
||||||
|
|
||||||
console.log('I love JS. JS is the best language'.replace('JS', 'TS'));
|
console.log('I love JS. JS is the best language'.replace('JS', 'TS'));
|
||||||
// => 'I love TS. JS is the best language'
|
// => 'I love TS. JS is the best language'
|
||||||
|
|
||||||
|
|||||||
@@ -42,11 +42,21 @@
|
|||||||
console.log(String(12345).padStart(10, '0')); //=> '0000012345'
|
console.log(String(12345).padStart(10, '0')); //=> '0000012345'
|
||||||
console.log((12345).toString().padStart(10, '0')); //=> '0000012345'
|
console.log((12345).toString().padStart(10, '0')); //=> '0000012345'
|
||||||
|
|
||||||
|
const creditNumber = '1234 5678 4332 12';
|
||||||
|
|
||||||
console.log('1234 5678 4332 12'.replaceAll(' ', '').substr(-4).padStart(14, '#')); // => '##########3212'
|
console.log('1234 5678 4332 12'.replaceAll(' ', '').substr(-4).padStart(14, '#')); // => '##########3212'
|
||||||
|
console.log(
|
||||||
|
creditNumber
|
||||||
|
.replaceAll(' ', '') // => '12345678433212'
|
||||||
|
.substring(creditNumber.length - 4) // => substring(10) -> '3212'
|
||||||
|
.padStart(14, '#'),
|
||||||
|
); // => '##########3212'
|
||||||
|
|
||||||
// String Methode - str.padEnd(targetLength[, fillValue])
|
// String Methode - str.padEnd(targetLength[, fillValue])
|
||||||
console.log('lorem'.padEnd(10)); //=> 'lorem ';
|
console.log('lorem'.padEnd(10)); //=> 'lorem ';
|
||||||
console.log('12345'.padEnd(10, '0')); //=> '1234500000'
|
console.log('12345'.padEnd(10, '0')); //=> '1234500000'
|
||||||
|
|
||||||
|
console.log('1234'.padEnd(1)); //=> '1234'
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
32
01_grundlagen/unterricht/tag08/01_volume-tube.html
Normal file
32
01_grundlagen/unterricht/tag08/01_volume-tube.html
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Zylindervolumen berechnen (tube)</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>Zylindervolumen berechnen (tube)</h1>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const BASE_COST_PER_UNIT = 0.7;
|
||||||
|
const COST_PER_CC = 0.001;
|
||||||
|
|
||||||
|
const height = 80;
|
||||||
|
const diameter = 10;
|
||||||
|
|
||||||
|
// cylindricalVolume = π × radius² × height
|
||||||
|
const mailingTubeVolume = Math.PI * Math.pow(diameter / 2, 2) * height;
|
||||||
|
// shippingCost = volume × costPerCC + costPerUnit
|
||||||
|
const shippingCost = mailingTubeVolume * COST_PER_CC + BASE_COST_PER_UNIT;
|
||||||
|
|
||||||
|
console.log(shippingCost); // => 6.983185307179587
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
58
01_grundlagen/unterricht/tag08/02_function-volume-tube.html
Normal file
58
01_grundlagen/unterricht/tag08/02_function-volume-tube.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>Zylindervolumen berechnen (tube) mit Funktion</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>Zylindervolumen berechnen (tube) mit Funktion</h1>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const BASE_COST_PER_UNIT = 0.7;
|
||||||
|
const COST_PER_CC = 0.001;
|
||||||
|
|
||||||
|
const height = 80;
|
||||||
|
const diameter = 10;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Funktion zum Berechnen vom Zylindervolumen
|
||||||
|
*/
|
||||||
|
const calcTubeVolume = (diameter, height) => {
|
||||||
|
const radius = diameter / 2;
|
||||||
|
// cylindricalVolume = π × radius² × height
|
||||||
|
const volume = Math.PI * Math.pow(radius, 2) * height;
|
||||||
|
return volume;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Funktion zum Berechnen vom Zylindervolumen (Kurzschreibweise)
|
||||||
|
*/
|
||||||
|
const calcTubeVolumeShort = (diameter, height) => Math.PI * Math.pow(diameter / 2, 2) * height;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Funktion zum Berechnen der Versandkosten
|
||||||
|
*/
|
||||||
|
const calcShippingCost = (volume) => {
|
||||||
|
// shippingCost = volume × costPerCC + costPerUnit
|
||||||
|
const cost = volume * COST_PER_CC + BASE_COST_PER_UNIT;
|
||||||
|
return cost;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Funktion zum Berechnen der Versandkosten (Kurzschreibweise)
|
||||||
|
*/
|
||||||
|
const calcShippingCostShort = (volume) => volume * COST_PER_CC + BASE_COST_PER_UNIT;
|
||||||
|
|
||||||
|
console.log(calcShippingCost(calcTubeVolume(diameter, height))); // => 6.983185307179587
|
||||||
|
|
||||||
|
console.log(calcShippingCost(calcTubeVolume(8, 120))); // => 6.731857894892403
|
||||||
|
</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>Zylindervolumen berechnen (tube) mit Funktion und Guard</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>Zylindervolumen berechnen (tube) mit Funktion und Guard</h1>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const BASE_COST_PER_UNIT = 0.7;
|
||||||
|
const COST_PER_CC = 0.001;
|
||||||
|
|
||||||
|
const height = 80;
|
||||||
|
const diameter = 10;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Funktion zum Berechnen vom Zylindervolumen mit Guard
|
||||||
|
*/
|
||||||
|
const calcTubeVolume = (diameter = 10, height = 80) => {
|
||||||
|
// Guard
|
||||||
|
if (isNaN(diameter) || isNaN(height) || diameter < 0 || height < 0) return NaN;
|
||||||
|
|
||||||
|
const radius = diameter / 2;
|
||||||
|
// cylindricalVolume = π × radius² × height
|
||||||
|
const volume = Math.PI * Math.pow(radius, 2) * height;
|
||||||
|
return volume;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Funktion zum Berechnen vom Zylindervolumen (Kurzschreibweise) mit Guard
|
||||||
|
*/
|
||||||
|
const calcTubeVolumeShort = (diameter, height) =>
|
||||||
|
isNaN(diameter) || isNaN(height) || diameter < 0 || height < 0
|
||||||
|
? NaN
|
||||||
|
: Math.PI * Math.pow(diameter / 2, 2) * height;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Funktion zum Berechnen der Versandkosten
|
||||||
|
*/
|
||||||
|
const calcShippingCost = (volume) => {
|
||||||
|
// Guard
|
||||||
|
if (isNaN(volume)) {
|
||||||
|
console.error('wrong data type');
|
||||||
|
return NaN;
|
||||||
|
}
|
||||||
|
// shippingCost = volume × costPerCC + costPerUnit
|
||||||
|
const cost = volume * COST_PER_CC + BASE_COST_PER_UNIT;
|
||||||
|
return cost;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Funktion zum Berechnen der Versandkosten (Kurzschreibweise)
|
||||||
|
*/
|
||||||
|
const calcShippingCostShort = (volume) => volume * COST_PER_CC + BASE_COST_PER_UNIT;
|
||||||
|
|
||||||
|
console.log(calcShippingCost(calcTubeVolume(diameter, height))); // => 6.983185307179587
|
||||||
|
|
||||||
|
console.log(calcShippingCost(calcTubeVolume(8, 120))); // => 6.731857894892403
|
||||||
|
|
||||||
|
console.log(calcShippingCost('ja')); //=> NaN
|
||||||
|
console.log(calcShippingCost(10)); //=> 0.71
|
||||||
|
|
||||||
|
console.log(calcTubeVolume(10, 80)); //=> 6283.185307179587
|
||||||
|
console.log(calcTubeVolume(10)); //=> 6283.185307179587
|
||||||
|
console.log(calcTubeVolume()); //=> 6283.185307179587
|
||||||
|
console.log(calcTubeVolume(5)); //=> 1570.7963267948967
|
||||||
|
console.log(calcTubeVolume(5, 2)); //=> 39.269908169872416
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -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>Rest- und Defaultparameter</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>Rest- und Defaultparameter</h1>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// Defaultparameter
|
||||||
|
const add = (n1 = 0, n2 = 0) => {
|
||||||
|
return Number(n1) + Number(n2);
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log(add(1, 2)); //=> 3
|
||||||
|
console.log(add(5, '12')); //=> 17
|
||||||
|
console.log(add(1)); //=> 1
|
||||||
|
console.log(add()); //=> 0
|
||||||
|
|
||||||
|
// Restparameter (...)
|
||||||
|
const sum = (...numbers) => {
|
||||||
|
console.log(numbers); // Argumentenliste wird als Array Menge aufgefangen
|
||||||
|
return numbers.reduce((a, b) => Number(a) + Number(b), 0);
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log(sum(1, 2, 10, 23, 105)); // => 141
|
||||||
|
|
||||||
|
// Restparameter (...names)
|
||||||
|
const greetWith = (greeting, ...names) => {
|
||||||
|
console.log(names); // => ['Adel', 'Ersin', 'Andreas', 'Kahleel']
|
||||||
|
|
||||||
|
names.forEach((name) => {
|
||||||
|
console.log(`${greeting}, ${name}!`);
|
||||||
|
});
|
||||||
|
|
||||||
|
// return `${greeting}, ${names}!`;
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log(greetWith('Hey', 'Goldy'));
|
||||||
|
console.log(greetWith('Hi', 'Adel', 'Ersin', 'Andreas', 'Kahleel'));
|
||||||
|
|
||||||
|
// reduce kurz erklärt
|
||||||
|
console.log(
|
||||||
|
[1, 2, 3, 4].reduce((sum, n) => {
|
||||||
|
return Number(sum) + Number(n);
|
||||||
|
}, 0),
|
||||||
|
); //=> 10
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
79
01_grundlagen/unterricht/tag08/05_array-object.html
Normal file
79
01_grundlagen/unterricht/tag08/05_array-object.html
Normal file
@@ -0,0 +1,79 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Array Object</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>Array - Object</h1>
|
||||||
|
<p>
|
||||||
|
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array">Array Object</a>
|
||||||
|
- Das JavaScript-Array ist ein globales Objekt und Konstruktor für das Erstellen von Arrays, welche
|
||||||
|
listenähnliche Objekte sind.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
|
||||||
|
|
||||||
|
const names = [
|
||||||
|
'Ersin', //
|
||||||
|
'Andreas',
|
||||||
|
'Adel',
|
||||||
|
'Kahleel',
|
||||||
|
];
|
||||||
|
|
||||||
|
// names = 'Wert'; // Uncaught TypeError: Assignment to constant variable.
|
||||||
|
|
||||||
|
const mixedArray = [
|
||||||
|
'Max', //
|
||||||
|
33,
|
||||||
|
true,
|
||||||
|
['Tennis', 'Netflix'],
|
||||||
|
'Jane',
|
||||||
|
24,
|
||||||
|
false,
|
||||||
|
['Zeichnen', 'Boxen'],
|
||||||
|
];
|
||||||
|
|
||||||
|
// Indexoperator []
|
||||||
|
console.log(mixedArray[0]); // => 'Max'
|
||||||
|
console.log(mixedArray[1]); // => 33
|
||||||
|
console.log(mixedArray[3]); // => ['Tennis', 'Netflix']
|
||||||
|
|
||||||
|
console.log(['Tennis', 'Netflix'][1]); // => 'Netflix'
|
||||||
|
console.log(mixedArray[3][1]); // => 'Netflix'
|
||||||
|
|
||||||
|
const trainerArray = []; // leeres Array
|
||||||
|
trainerArray[0] = 'Elmar';
|
||||||
|
trainerArray[1] = 'Oliver';
|
||||||
|
trainerArray[2] = 'Sonja';
|
||||||
|
trainerArray[3] = 'Kaumon';
|
||||||
|
|
||||||
|
trainerArray[7] = 'Philippe';
|
||||||
|
|
||||||
|
console.log(trainerArray); // => ['Elmar', 'Oliver', 'Sonja', 'Kaumon', empty × 3, 'Philippe']
|
||||||
|
|
||||||
|
// Sonderfall: Array über Konstruktor-Objekt erstellen
|
||||||
|
const lottoNumbers = new Array(6); //=> [empty,empty,empty,empty,empty,empty ]
|
||||||
|
lottoNumbers.fill(); //=> [0,0,0,0,0,0]
|
||||||
|
|
||||||
|
// Array -- Eigenschaft ar.length
|
||||||
|
|
||||||
|
console.log(lottoNumbers.length); //=> 6
|
||||||
|
console.log(names.length); //=> 4
|
||||||
|
|
||||||
|
console.log(typeof names); //=> 'object' vom Typ Array
|
||||||
|
|
||||||
|
console.log(Array.isArray([1, 2, 3])); //=> true
|
||||||
|
console.log(Array.isArray(names)); //=> true
|
||||||
|
console.log(Array.isArray(123)); //=> false
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
48
01_grundlagen/unterricht/tag08/06_ar-push.html
Normal file
48
01_grundlagen/unterricht/tag08/06_ar-push.html
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Array - ar.push()</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>Array - ar.push()</h1>
|
||||||
|
<p>
|
||||||
|
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/push">
|
||||||
|
ar.push()
|
||||||
|
</a>
|
||||||
|
- Die <strong>push()</strong> Methode fügt ein oder mehrere Elemente am Ende eines Arrays hinzu und gibt die
|
||||||
|
neue Länge des Arrays zurück.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
|
||||||
|
|
||||||
|
const names = [
|
||||||
|
'Ersin', //
|
||||||
|
'Andreas',
|
||||||
|
'Adel',
|
||||||
|
'Kahleel',
|
||||||
|
];
|
||||||
|
|
||||||
|
// Array Methode - ar.push(entry[, ...entries])
|
||||||
|
|
||||||
|
names.push('Philippe');
|
||||||
|
|
||||||
|
console.log(names); // => ['Ersin', 'Andreas', 'Adel', 'Kahleel', 'Philippe']
|
||||||
|
|
||||||
|
const namesAmount = names.push('Tick', 'Trick', 'Track');
|
||||||
|
|
||||||
|
console.log(names); // => ['Ersin', 'Andreas', 'Adel', 'Kahleel', 'Philippe', 'Tick', 'Trick', 'Track']
|
||||||
|
|
||||||
|
console.log(names.length); // => 8
|
||||||
|
console.log(namesAmount); // => 8
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
41
01_grundlagen/unterricht/tag08/07_ar-pop.html
Normal file
41
01_grundlagen/unterricht/tag08/07_ar-pop.html
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Array - ar.pop()</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>Array - ar.pop()</h1>
|
||||||
|
<p>
|
||||||
|
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/pop">
|
||||||
|
ar.pop()
|
||||||
|
</a>
|
||||||
|
- Die <strong>pop()</strong> Methode entfernt das <strong>letzte</strong> Element eines Arrays und gibt dieses
|
||||||
|
zurück. Diese Methode ändert die Länge des Arrays.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
|
||||||
|
|
||||||
|
const names = [
|
||||||
|
'Ersin', //
|
||||||
|
'Andreas',
|
||||||
|
'Adel',
|
||||||
|
'Kahleel',
|
||||||
|
];
|
||||||
|
|
||||||
|
// Array Methode - ar.pop()
|
||||||
|
const lastEntry = names.pop();
|
||||||
|
|
||||||
|
console.log(names); // => ['Ersin', 'Andreas', 'Adel']
|
||||||
|
console.log(lastEntry); // => 'Kahleel'
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
48
01_grundlagen/unterricht/tag08/08_ar-unshift.html
Normal file
48
01_grundlagen/unterricht/tag08/08_ar-unshift.html
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Array - ar.unshift()</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>Array - ar.unshift()</h1>
|
||||||
|
<p>
|
||||||
|
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift">
|
||||||
|
ar.unshift()
|
||||||
|
</a>
|
||||||
|
- Die <strong>unshift()</strong> Methode fügt ein oder mehrere Elemente am Anfang eines Arrays hinzu und gibt
|
||||||
|
die neue Länge des Arrays zurück.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
|
||||||
|
|
||||||
|
const names = [
|
||||||
|
'Ersin', //
|
||||||
|
'Andreas',
|
||||||
|
'Adel',
|
||||||
|
'Kahleel',
|
||||||
|
];
|
||||||
|
|
||||||
|
// Array Methode - ar.unshift(entry[, ...entries])
|
||||||
|
|
||||||
|
names.unshift('Philippe');
|
||||||
|
|
||||||
|
console.log(names); // => ['Philippe', 'Ersin', 'Andreas', 'Adel', 'Kahleel']
|
||||||
|
|
||||||
|
const namesAmount = names.unshift('Tick', 'Trick', 'Track');
|
||||||
|
|
||||||
|
console.log(names); // => ['Tick', 'Trick', 'Track', 'Philippe', 'Ersin', 'Andreas', 'Adel', 'Kahleel']
|
||||||
|
|
||||||
|
console.log(namesAmount); // => 8
|
||||||
|
console.log(names.length); // => 8
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
41
01_grundlagen/unterricht/tag08/09_ar-shift.html
Normal file
41
01_grundlagen/unterricht/tag08/09_ar-shift.html
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Array - ar.shift()</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>Array - ar.shift()</h1>
|
||||||
|
<p>
|
||||||
|
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/shift">
|
||||||
|
ar.shift()
|
||||||
|
</a>
|
||||||
|
- Die <strong>shift()</strong> Methode entfernt das <strong>erste</strong> Element eines Arrays und gibt
|
||||||
|
dieses zurück. Diese Methode ändert die Länge des Arrays.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
|
||||||
|
|
||||||
|
const names = [
|
||||||
|
'Ersin', //
|
||||||
|
'Andreas',
|
||||||
|
'Adel',
|
||||||
|
'Kahleel',
|
||||||
|
];
|
||||||
|
|
||||||
|
// Array Methode - ar.shift()
|
||||||
|
const firstEntry = names.shift();
|
||||||
|
|
||||||
|
console.log(names); // => ['Andreas', 'Adel', 'Kahleel']
|
||||||
|
console.log(firstEntry); // => 'Ersin'
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
93
01_grundlagen/unterricht/tag08/10_ar-splice.html
Normal file
93
01_grundlagen/unterricht/tag08/10_ar-splice.html
Normal file
@@ -0,0 +1,93 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Array.splice()</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>Array - ar.splice()</h1>
|
||||||
|
<p>
|
||||||
|
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/splice">
|
||||||
|
ar.splice()
|
||||||
|
</a>
|
||||||
|
- Die <strong>splice()</strong> Methode ändert den Inhalt eines Arrays durch das Entfernen vorhandener
|
||||||
|
Elemente und/oder Hinzufügen neuer Elemente.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
|
||||||
|
|
||||||
|
const names = [
|
||||||
|
'Ersin', //
|
||||||
|
'Andreas',
|
||||||
|
'Adel',
|
||||||
|
'Kahleel',
|
||||||
|
'Philippe',
|
||||||
|
];
|
||||||
|
|
||||||
|
// Array Methode - ar.splice(startIndex [,deleteCount [, toAddValue, toAddValue...]])
|
||||||
|
|
||||||
|
let cuttedNames;
|
||||||
|
let namesCopy;
|
||||||
|
|
||||||
|
// Mehrere Werte gezielt löschen =====================
|
||||||
|
console.log('Mehrere Werte gezielt löschen ===========');
|
||||||
|
|
||||||
|
// Kopie eines Arrays
|
||||||
|
namesCopy = [...names]; // alternativ names.slice()
|
||||||
|
|
||||||
|
// ar.splice(startIndex, deleteCount)
|
||||||
|
cuttedNames = namesCopy.splice(2, 2);
|
||||||
|
|
||||||
|
console.log(cuttedNames); //=> ['Adel', 'Kahleel'];
|
||||||
|
console.log(namesCopy); //=> ['Ersin', 'Andreas', 'Philippe'];
|
||||||
|
|
||||||
|
// Mehrere Werte gezielt ersetzen =====================
|
||||||
|
console.log('Mehrere Werte gezielt ersetzen ===========');
|
||||||
|
|
||||||
|
// Kopie eines Arrays
|
||||||
|
namesCopy = [...names]; // alternativ names.slice()
|
||||||
|
|
||||||
|
// [
|
||||||
|
// 'Ersin', //
|
||||||
|
// 'Andreas',
|
||||||
|
// 'Adel',
|
||||||
|
// 'Kahleel',
|
||||||
|
// 'Philippe',
|
||||||
|
// ];
|
||||||
|
|
||||||
|
// ar.splice(startIndex, deleteCount, ...addValueN)
|
||||||
|
cuttedNames = namesCopy.splice(1, 2, 'Jane', 'John');
|
||||||
|
|
||||||
|
console.log(cuttedNames); //=> ['Andreas', 'Adel'];
|
||||||
|
console.log(namesCopy); //=> ['Ersin', 'Jane', 'John', 'Kahleel', 'Philippe']
|
||||||
|
|
||||||
|
// Mehrere Werte gezielt am Ende hinzufügen =====================
|
||||||
|
console.log('Mehrere Werte am Ende hinzufügen ===========');
|
||||||
|
|
||||||
|
// Kopie eines Arrays
|
||||||
|
namesCopy = [...names]; // alternativ names.slice()
|
||||||
|
|
||||||
|
// [
|
||||||
|
// 'Ersin', //
|
||||||
|
// 'Andreas',
|
||||||
|
// 'Adel',
|
||||||
|
// 'Kahleel',
|
||||||
|
// 'Philippe',
|
||||||
|
// ];
|
||||||
|
|
||||||
|
// ar.splice(startIndex, deleteCount, ...addValueN)
|
||||||
|
cuttedNames = namesCopy.splice(namesCopy.length, 0, 'Tick', 'Trick', 'Track');
|
||||||
|
|
||||||
|
console.log(cuttedNames); //=> []
|
||||||
|
console.log(namesCopy); // => ['Ersin', 'Andreas', 'Adel', 'Kahleel', 'Philippe', 'Tick', 'Trick', 'Track']
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
51
01_grundlagen/unterricht/tag08/11_ar-slice.html
Normal file
51
01_grundlagen/unterricht/tag08/11_ar-slice.html
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Array.slice()</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>Array - ar.slice()</h1>
|
||||||
|
<p>
|
||||||
|
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/slice">
|
||||||
|
ar.slice()
|
||||||
|
</a>
|
||||||
|
- Die <strong>slice()</strong> Methode schreibt eine flache Kopie von einem Teil des Arrays in ein neues
|
||||||
|
Array-Objekt von <code>begin</code> bis <code>end</code> (end nicht enthalten). Das originale Array wird nicht
|
||||||
|
verändert. (<strong>side-effect-free</strong>)
|
||||||
|
</p>
|
||||||
|
<div class="alert alert-danger">side-effect-free</div>
|
||||||
|
<div class="output alert alert-secondary my-3"></div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const outputEl = document.querySelector('.output');
|
||||||
|
|
||||||
|
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
|
||||||
|
|
||||||
|
const names = [
|
||||||
|
'Ersin', //
|
||||||
|
'Andreas',
|
||||||
|
'Adel',
|
||||||
|
'Kahleel',
|
||||||
|
'Philippe',
|
||||||
|
];
|
||||||
|
|
||||||
|
// Array Methode - ar.slice(startIndex [, endIndex])
|
||||||
|
// SIDE-EFFECT-FREE
|
||||||
|
|
||||||
|
const cuttedNames = names.slice(3, 5);
|
||||||
|
|
||||||
|
console.log(cuttedNames); //=> ['Kahleel', 'Philippe']
|
||||||
|
console.log(names); // => ['Ersin', 'Andreas', 'Adel', 'Kahleel', 'Philippe']
|
||||||
|
|
||||||
|
outputEl.textContent = names.join(', ');
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
57
01_grundlagen/unterricht/tag08/12_ar-sort.html
Normal file
57
01_grundlagen/unterricht/tag08/12_ar-sort.html
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Array.sort()</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>Array - ar.sort()</h1>
|
||||||
|
<p>
|
||||||
|
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">
|
||||||
|
ar.sort()
|
||||||
|
</a>
|
||||||
|
- Die <strong>sort()</strong> Methode sortiert die Elemente eines Arrays <code>in-place</code> und gibt das
|
||||||
|
Array zurück. Standardmäßig werden alle Elemente in Strings umgewandelt und dann anhand ihrer UTF-16
|
||||||
|
Codepoints miteinander verglichen.
|
||||||
|
</p>
|
||||||
|
<div class="alert alert-warning">
|
||||||
|
Das angesprochene Array wird durch <code>in-place-mutation</code> ebenfalls sortiert.
|
||||||
|
</div>
|
||||||
|
<div class="output alert alert-secondary my-3"></div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const outputEl = document.querySelector('.output');
|
||||||
|
|
||||||
|
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
|
||||||
|
|
||||||
|
const names = [
|
||||||
|
'Ersin', //
|
||||||
|
'Andreas',
|
||||||
|
'Adel',
|
||||||
|
'Kahleel',
|
||||||
|
'Philippe',
|
||||||
|
];
|
||||||
|
|
||||||
|
const numbers = [1, 29, 44, 3, 8, 38];
|
||||||
|
|
||||||
|
// Array Methode - ar.sort()
|
||||||
|
|
||||||
|
const namesCopy = [...names];
|
||||||
|
|
||||||
|
const namesSorted = namesCopy.sort();
|
||||||
|
|
||||||
|
console.log(namesSorted); // => ['Adel', 'Andreas', 'Ersin', 'Kahleel', 'Philippe']
|
||||||
|
console.log(namesCopy); // => ['Adel', 'Andreas', 'Ersin', 'Kahleel', 'Philippe']
|
||||||
|
|
||||||
|
// Lexikographische Sortierung
|
||||||
|
console.log(numbers.sort()); //=> [1, 29, 3, 38, 44, 8]
|
||||||
|
</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>Array - ar.indexOf()</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>Array - ar.indexOf()</h1>
|
||||||
|
<p>
|
||||||
|
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf">
|
||||||
|
ar.indexOf()
|
||||||
|
</a>
|
||||||
|
- Die Methode <strong>indexOf()</strong> gibt den Index zurück, an dem ein bestimmtes Element im Array zum
|
||||||
|
ersten Mal auftritt oder <code>-1</code> wenn es nicht vorhanden ist.
|
||||||
|
</p>
|
||||||
|
<div class="output alert alert-secondary my-3"></div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const outputEl = document.querySelector('.output');
|
||||||
|
|
||||||
|
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
|
||||||
|
|
||||||
|
const names = [
|
||||||
|
'Ersin', //
|
||||||
|
'Andreas',
|
||||||
|
'Adel',
|
||||||
|
'Kahleel',
|
||||||
|
'Philippe',
|
||||||
|
];
|
||||||
|
|
||||||
|
// Array Methode - ar.indexOf('searchValue')
|
||||||
|
console.log(names.indexOf('Adel')); //=> 2
|
||||||
|
|
||||||
|
console.log(names.indexOf('Boris')); //=> -1
|
||||||
|
console.log(names.indexOf('adel')); //=> -1
|
||||||
|
|
||||||
|
// Array Methode - ar.lastIndexOf('searchValue')
|
||||||
|
|
||||||
|
console.log(names.lastIndexOf('Philippe')); //=> 4
|
||||||
|
console.log(names.indexOf('Philippe')); //=> 4
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
49
01_grundlagen/unterricht/tag08/14_ar-join.html
Normal file
49
01_grundlagen/unterricht/tag08/14_ar-join.html
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Array - ar.join()</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>Array - ar.join()</h1>
|
||||||
|
<p>
|
||||||
|
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/join">
|
||||||
|
ar.join()
|
||||||
|
</a>
|
||||||
|
- Die <code>join()</code> Methode von Array Instanzen erstellt und gibt einen neuen String zurück, indem alle
|
||||||
|
Elemente in diesem Array verkettet werden, getrennt durch Kommas oder einem angegebenen Trennzeichen-String.
|
||||||
|
Wenn das Array nur ein Element hat, wird dieses Element ohne Verwendung des Trennzeichens zurückgegeben.
|
||||||
|
</p>
|
||||||
|
<div class="output alert alert-secondary my-3"></div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const outputEl = document.querySelector('.output');
|
||||||
|
|
||||||
|
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
|
||||||
|
|
||||||
|
const names = [
|
||||||
|
'Ersin', //
|
||||||
|
'Andreas',
|
||||||
|
'Adel',
|
||||||
|
'Kahleel',
|
||||||
|
'Philippe',
|
||||||
|
];
|
||||||
|
|
||||||
|
// Array Methode - ar.join()
|
||||||
|
console.log(names.join()); //=> 'Ersin,Andreas,Adel,Kahleel,Philippe'
|
||||||
|
console.log(names.toString()); //=> 'Ersin,Andreas,Adel,Kahleel,Philippe'
|
||||||
|
|
||||||
|
console.log(names.join(' - ')); //=> 'Ersin - Andreas - Adel - Kahleel - Philippe'
|
||||||
|
console.log(names.join(', ')); //=> 'Ersin, Andreas, Adel, Kahleel, Philippe'
|
||||||
|
|
||||||
|
outputEl.innerHTML = `<ol><li>${names.join('</li><li>')}</li></ol>`;
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user