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