This commit is contained in:
@@ -0,0 +1,43 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Übung 22: Die dunkle Seite schlägt zurück …</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 22: Die dunkle Seite schlägt zurück …</h1>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Endlich setzt du deinen Kampf gegen die dunkle Seite von JS fort (siehe Übung 20) und erstellst zwei neue
|
||||||
|
»Kampf-Sequenzen«:
|
||||||
|
</p>
|
||||||
|
<p>»What's the German word for if« (Mehrere Lösungsmöglichkeiten: wenn, falls).</p>
|
||||||
|
<p>»Now, please enter a string with a length between 8 and 15 characters …«</p>
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-primary">
|
||||||
|
<h2>Übung 23: Die dunkle Seite schlägt zurück…</h2>
|
||||||
|
<p>
|
||||||
|
Endlich setzen Sie Ihren Kampf gegen die dunkle Seite von JS fort (siehe Übung 20) und erstellen zwei neue
|
||||||
|
»Kampf-Sequenzen«:
|
||||||
|
</p>
|
||||||
|
<ul class="list">
|
||||||
|
<li>»What's the German word for if« (Mehrere Lösungsmöglichkeiten: wenn, falls).</li>
|
||||||
|
<li>»Now, please enter a string with a length between 8 and 15 characters…«</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// const username = prompt('Wilkommen. Wie heißen Sie?');
|
||||||
|
|
||||||
|
/*
|
||||||
|
TODO: Your Code
|
||||||
|
*/
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Übung 23: Von guten und bösen Eingaben</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 23: Von guten und bösen Eingaben</h2>
|
||||||
|
<ol class="list">
|
||||||
|
<li>
|
||||||
|
Nimm Angaben zu Vorname, Nachname, Alter und dem liebsten Heißgetränk eines Anwenders entgegen und
|
||||||
|
speichere diese in Variablen.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
Diese Eingaben sollst du nun folgendermaßen validieren:
|
||||||
|
<ul class="list">
|
||||||
|
<li>Vorname und Nachname müssen zwischen 2 und 100 Zeichen lang sein.</li>
|
||||||
|
<li>Das Alter muss eine Zahl unter 150 sein.</li>
|
||||||
|
<li>Die Eingabe für das Getränk muss c (coffee) oder t (tea) sein.</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// Aufgabe
|
||||||
|
const firstName = prompt('Wilkommen. Wie heißen Sie mit Vornamen?');
|
||||||
|
const lastName = prompt('Und mit Nachnamen?');
|
||||||
|
|
||||||
|
const age = Number('Wie alt sind Sie?');
|
||||||
|
|
||||||
|
const favoriteHotDrink = prompt('Und was ist ihr liebstes Heißgetränk? (tee | kaffee)');
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Übung 24: Die Sache mit dem Schaltjahr — 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 24: Die Sache mit dem Schaltjahr — Teil 2</h2>
|
||||||
|
<p>
|
||||||
|
Verschaffe deinem Schaltjahr-Tool aus Lektion 10 ein Facelifting. Mithilfe der logischen Operatoren kannst
|
||||||
|
du einige <code>else</code> einsparen und den Code einfacher, kürzer und übersichtlicher gestalten.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h4>Ein Jahr ist ein Schaltjahr, wenn das betreffende Jahr</h4>
|
||||||
|
<ul>
|
||||||
|
<li>ganzzahlig durch 400 teilbar ist.</li>
|
||||||
|
<li>nicht ganzzahlig durch 100, aber ganzzahlig durch 4 teilbar ist.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-warning">
|
||||||
|
Die Berechnung ist übrigens nicht zu 100 Prozent genau, aber für die nächsten 2000 Jahre passt es noch.
|
||||||
|
</div>
|
||||||
|
<div class="mb-3">
|
||||||
|
<label for="input-year" class="form-label">Jahr</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
min="0"
|
||||||
|
step="1"
|
||||||
|
name="year"
|
||||||
|
class="form-control input-year"
|
||||||
|
id="input-year"
|
||||||
|
placeholder="insert year..." />
|
||||||
|
</div>
|
||||||
|
<div class="output alert alert-secondary my-3"></div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const inputEl = document.querySelector('.input-year');
|
||||||
|
const outputEl = document.querySelector('.output');
|
||||||
|
|
||||||
|
inputEl.addEventListener('input', (e) => {
|
||||||
|
const val = e.currentTarget.value;
|
||||||
|
|
||||||
|
// TODO: check if it is a leap year or not.
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Übung 25: Wenn sie doch endlich mal jemand finden könnte… die Nadel im Heuhaufen…</title>
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<div class="container py-5">
|
||||||
|
<div class="alert alert-primary">
|
||||||
|
<h1>Übung 25: Wenn sie doch endlich mal jemand finden könnte… die Nadel im Heuhaufen…</h1>
|
||||||
|
<p>
|
||||||
|
Die meisten Menschen verwenden die Redewendung nur symbolisch. Sie heute aber nicht, denn Sie erhalten von
|
||||||
|
uns den Auftrag, die Nadel wirklich zu finden!
|
||||||
|
</p>
|
||||||
|
<img
|
||||||
|
src="https://de.webmasters-europe.org/system/course_management/file/images/files/000/014/031/640-426/251d5925f63d895854646ece67dc3de4.jpg?1617534590"
|
||||||
|
alt=""
|
||||||
|
style="width: 300px"
|
||||||
|
class="img-thumbnail" />
|
||||||
|
<p>
|
||||||
|
Natürlich wollen wir Sie nicht wirklich im Heu wühlen lassen. Stattdessen erhalten Sie von uns einen
|
||||||
|
sauberen heulosen String. Das ist vermutlich auch angenehmer, falls Sie an Heuschnupfen leiden
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Finden Sie nun heraus, an welcher Position sich die Nadel befindet, und loggen Sie diese Position in die
|
||||||
|
Konsole.
|
||||||
|
</p>
|
||||||
|
<blockquote class="blockquote">Übrigens: Zählen gilt nicht!</blockquote>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="output alert alert-secondary"></div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const outputEl = document.querySelector('.output');
|
||||||
|
|
||||||
|
const text =
|
||||||
|
'Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen Nadel Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen Heuhaufen';
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -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>Übung 26: Wenn ein Vorname nicht reicht…</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 26: Wenn ein Vorname nicht reicht…</h1>
|
||||||
|
<p>
|
||||||
|
Vielleicht ist Ihnen aufgefallen, dass die Zerlegung nur richtig funktioniert, wenn der Name in der Form
|
||||||
|
'Vorname Nachname' vorliegt.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Sollte ein Nutzer einen zweiten Vornamen angeben, ordnet das Programm den zweiten Vorname dem Nachnamen zu.
|
||||||
|
Sie würden für den Namen Ladislaus Coolio Jones fälschlicherweise Folgendes erhalten:
|
||||||
|
</p>
|
||||||
|
<p>Korrigieren Sie die Ausgabe des folgenden Codes mithilfe von lastIndexOf</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const name = ' Ladislaus Coolio Jones '.trim();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,30 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Übung 27: Der zerlegte Heribert</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">
|
||||||
|
<h1>Übung 27: Der zerlegte Heribert</h1>
|
||||||
|
<ol>
|
||||||
|
<li>Entfernen Sie die überflüssigen Leerzeichen.</li>
|
||||||
|
<li>Zerlegen Sie den Namen in Vor- und Nachnamen.</li>
|
||||||
|
</ol>
|
||||||
|
<div class="alert alert-secondary my-3 output"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const outputElement = document.querySelector('.output');
|
||||||
|
|
||||||
|
const name = 'Heribert Gold '.trim();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -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>Übung 28: Der transformierte Ladislaus</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">
|
||||||
|
<h1>Übung 28: Der transformierte Ladislaus</h1>
|
||||||
|
<p>Und weil es so viel Freude macht:</p>
|
||||||
|
<p>
|
||||||
|
Speichern Sie den Namen »Ladislaus Jones« in einer Variable und kreieren Sie eine Ausgabe nach dem Schema
|
||||||
|
'<code><Nachname></code>, <code><Anfangsbuchstabe des Vornamens></code>.', also
|
||||||
|
<code>'Jones, L.'</code>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="alert alert-secondary output"></div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
const outputEl = document.querySelector('.output');
|
||||||
|
|
||||||
|
const name = 'Ladislaus Jones'.trim();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -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 29: Führende Nullen, Teil 1</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-5">
|
||||||
|
<h1>Übung 29: Führende Nullen, Teil 1</h1>
|
||||||
|
<p>
|
||||||
|
NerdWorld hat vor einiger Zeit sein Artikelnummer-Konzept geändert. Die neuen Artikelnummern beginnen stets
|
||||||
|
mit einer 0 — z.B. 0123. Leider gibt es bei den alten Nummern viele, die nicht über eine führenden 0
|
||||||
|
verfügen. Sie können aber auch nicht einfach pauschal eine 0 ergänzen, da manche der alten Nummern bereits
|
||||||
|
mit einer 0 beginnen. In dem Fall soll keine weitere 0 vorangestellt werden. Ergänzen Sie das folgende
|
||||||
|
Programmfragment, so dass es für jede Belegung der Variable itemNumber (Artikelnummer) die richtige Nummer
|
||||||
|
im neuen Konzept ausgibt. Verwenden Sie dazu den ternären Operator!
|
||||||
|
</p>
|
||||||
|
<ul class="list">
|
||||||
|
<li>123 => 0123</li>
|
||||||
|
<li>7 => 07</li>
|
||||||
|
<li>07 => 07</li>
|
||||||
|
<li>007 => 007</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
let itemNumber = '123';
|
||||||
|
</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 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>
|
||||||
@@ -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 31: In die Konsole geloggt, 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">
|
||||||
|
<h1>Übung 31: In die Konsole geloggt, Teil 2</h1>
|
||||||
|
<p>Schreiben Sie eine Funktion, die Ihren Namen in der Konsole ausgibt.</p>
|
||||||
|
<div class="output alert alert-secondary my-3"></div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const outputEl = document.querySelector('.output');
|
||||||
|
|
||||||
|
/*
|
||||||
|
TODO: Schreibe eine Funktion, die deinen Namen in der Konsole ausgibt.
|
||||||
|
*/
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Übung 32: Der transformierte Ladislaus, 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">
|
||||||
|
<h1>Übung 32: Der transformierte Ladislaus, Teil 2</h1>
|
||||||
|
<p>
|
||||||
|
Schreiben Sie eine Funktion <code>logTransformedName</code>, die Vor- und Nachname als Parameter
|
||||||
|
entgegennimmt und einen String der Form
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<code><Nachname>, <Anfangsbuchstabe des Vornamens>.</code>
|
||||||
|
</p>
|
||||||
|
<p>ausgibt.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,53 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>JS - Funktionsdefinition</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>JS - Funktionsdefinition</h1>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// Funktionsdefinition mit "function" statement
|
||||||
|
function showNewsLetter() {
|
||||||
|
console.log('Dear Customer,\n');
|
||||||
|
console.log(
|
||||||
|
`We're pleased to inform you that NerdWorld is making a number of new discounts available to you. Please visit http://www.nerdworld.example/discounts for detailed information.`,
|
||||||
|
);
|
||||||
|
console.log('Happy nerding,\nYour NerdWorld Team');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Funktionsausdruck - (function expression) vor ES6 (ECMAScript 2015)
|
||||||
|
var showNewsLetter2 = function () {
|
||||||
|
console.log('Dear Customer,\n');
|
||||||
|
console.log(
|
||||||
|
`We're pleased to inform you that NerdWorld is making a number of new discounts available to you. Please visit http://www.nerdworld.example/discounts for detailed information.`,
|
||||||
|
);
|
||||||
|
console.log('Happy nerding,\nYour NerdWorld Team');
|
||||||
|
};
|
||||||
|
|
||||||
|
// Seit ES6 (2015) Funktionsausdruck mit arrow - (arrow function expression)
|
||||||
|
const showNewsLetter3 = () => {
|
||||||
|
console.log('Dear Customer,\n');
|
||||||
|
console.log(
|
||||||
|
`We're pleased to inform you that NerdWorld is making a number of new discounts available to you. Please visit http://www.nerdworld.example/discounts for detailed information.`,
|
||||||
|
);
|
||||||
|
console.log('Happy nerding,\nYour NerdWorld Team');
|
||||||
|
};
|
||||||
|
|
||||||
|
// Funktionsaufruf
|
||||||
|
showNewsLetter();
|
||||||
|
console.log('=========');
|
||||||
|
showNewsLetter2();
|
||||||
|
console.log('=========');
|
||||||
|
showNewsLetter3();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
@@ -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>JS - Funktionsausdruck (function expression) ohne hochziehen</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>JS - Funktionsausdruck (function expression) ohne hochziehen</h1>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
// nichtHochgezogen(); // Uncaught ReferenceError: Cannot access 'nichtHochgezogen' before initialization
|
||||||
|
|
||||||
|
// Funktionsausdruck mit arrow (ES6) ========================
|
||||||
|
const nichtHochgezogen = () => {
|
||||||
|
console.log('"Function expression" wird nicht hochgezogen.');
|
||||||
|
};
|
||||||
|
|
||||||
|
nichtHochgezogen(); // => "Function expression" wird nicht hochgezogen.
|
||||||
|
|
||||||
|
// Funktionsausdruck vor ES6 ================================
|
||||||
|
|
||||||
|
// nichtHochgezogen2(); // => Uncaught ReferenceError: Cannot access 'nichtHochgezogen' before initialization
|
||||||
|
|
||||||
|
var nichtHochgezogen2 = function () {
|
||||||
|
console.log('"Function expression" wird nicht hochgezogen.');
|
||||||
|
};
|
||||||
|
|
||||||
|
nichtHochgezogen2(); // => '"Function expression" wird nicht hochgezogen.'
|
||||||
|
|
||||||
|
// Funktiondefinition mit "function" - statement ============
|
||||||
|
|
||||||
|
hochgezogen(); // <---- FUNKTIONIERT - Funktion mit "function" wird vo dem Ausführen hochgezogen
|
||||||
|
|
||||||
|
function hochgezogen() {
|
||||||
|
console.log('"Functiondefinition" mit "function" eingeleitet bezitzt hochziehen (hoisting).');
|
||||||
|
}
|
||||||
|
|
||||||
|
hochgezogen();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -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>Arrow expression (=>) vs. function expression (function)</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>Arrow expression (=>) vs. function expression (function)</h1>
|
||||||
|
<!-- button.btn.btn-dark.button-click{Click me} -->
|
||||||
|
<button class="btn btn-dark button-click">Click me</button>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const btn = document.querySelector('.button-click');
|
||||||
|
|
||||||
|
console.log(this); // => window
|
||||||
|
|
||||||
|
// Function expression "classic" -> "this" new reference to main Object
|
||||||
|
btn.addEventListener('click', function (e) {
|
||||||
|
console.log('event: ', e);
|
||||||
|
|
||||||
|
console.log('this: ', this); // => <button class="btn...">Click Me</button>
|
||||||
|
});
|
||||||
|
|
||||||
|
// Function expression with arrow -> "this" without new reference
|
||||||
|
btn.addEventListener('click', (e) => {
|
||||||
|
console.log('event: ', e);
|
||||||
|
console.log('e.currentTarget: ', e.currentTarget); // => <button class="btn...">Click Me</button>
|
||||||
|
|
||||||
|
console.log('this: ', this); // => window
|
||||||
|
});
|
||||||
|
|
||||||
|
//============================
|
||||||
|
|
||||||
|
const onMouseLeave = (e) => {
|
||||||
|
console.log('event: ', e);
|
||||||
|
console.log('e.currentTarget: ', e.currentTarget); // => <button class="btn...">Click Me</button>
|
||||||
|
|
||||||
|
const btn = e.currentTarget;
|
||||||
|
|
||||||
|
btn.textContent = 'Button (mouse left)';
|
||||||
|
|
||||||
|
console.log('this: ', this); // => window
|
||||||
|
};
|
||||||
|
|
||||||
|
// ... viel code dazwischen (oder verschiedene JS Dateien)....
|
||||||
|
|
||||||
|
btn.addEventListener('mouseleave', onMouseLeave); // => Funktionsreferenz
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user