This commit is contained in:
Philippe Torrel
48
01_grundlagen/unterricht/tag07/10_function-hoisting.html
Normal file
48
01_grundlagen/unterricht/tag07/10_function-hoisting.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>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.');
|
||||
};
|
||||
|
||||
nichtHochgezogen(); // => '"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>
|
||||
@@ -0,0 +1,54 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Funktionsausdruck mit Paramtern</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>Funktionsausdruck mit Paramtern</h1>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// eslint: prefer-const, arrow-parens
|
||||
// https://github.com/airbnb/javascript#arrows--one-arg-parens
|
||||
const showNewsLetterFor = (username) => {
|
||||
console.log(`Hello ${username},\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.\n",
|
||||
);
|
||||
console.log('Happy nerding,\nYour NerdWorld-Team\n\n');
|
||||
};
|
||||
|
||||
const showsABrilliantExample = (firstDirection, secondDirection) => {
|
||||
console.log('First brilliant direction: ' + firstDirection);
|
||||
console.log('Second brilliant direction: ' + secondDirection);
|
||||
};
|
||||
|
||||
const add = (a, b) => {
|
||||
console.log(Number(a) + Number(b));
|
||||
};
|
||||
|
||||
// Funktionsaufrufe
|
||||
showNewsLetterFor('Adel');
|
||||
console.log('======');
|
||||
showNewsLetterFor('Andreas');
|
||||
console.log('======');
|
||||
showNewsLetterFor('Kahleel');
|
||||
console.log('======');
|
||||
showNewsLetterFor('Ersin');
|
||||
|
||||
showsABrilliantExample('left', 'right');
|
||||
showsABrilliantExample('left'); // zweites Argument nicht übergeben, paremter "secondDirection" ist undefined.
|
||||
showsABrilliantExample('left', 'right', 'top', 'bottom'); // zu viele Argumente werden ignoriert.
|
||||
|
||||
add(1, 2); //=> 3
|
||||
add(10, 25); //=> 35
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user