01_grundlagen/unterricht/tag07/17_funktionsdefinition.html

@@ -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>

01_grundlagen/unterricht/tag07/18_function-hoisting.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>

01_grundlagen/unterricht/tag07/19_arrow-vs-classic-function-expression.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>