01_grundlagen/unterricht/tag10/10_prefer-const.html

@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>"Prefer-const" Programmierrichtlinie (AirBnb | Google)</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>"Prefer-const" Programmierrichtlinie (AirBnb | Google)</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      // prefer-const
+      let transform = (fullName) => {
+        const nameParts = fullName.split(' '); // =>  ['Ladislaus', 'Coolio', 'Barry', 'Crazy', 'Jones'];
+        const lastName = nameParts.slice(nameParts.length - 1); // => 'Jones'
+
+        // nameParts = nameParts.slice(0, nameParts.length - 1); // =>  ['Ladislaus', 'Coolio', 'Barry', 'Crazy']
+        // Wenn Variable mit "let" deklarariert wäre, könnten wir die Variable neu befüllen. Bezeichner wäre aber dann nicht mehr sinnvoll.
+
+        const firstNames = nameParts.slice(0, nameParts.length - 1); // =>  ['Ladislaus', 'Coolio', 'Barry', 'Crazy']
+
+        return firstNames.map((firstName) => firstName.charAt(0) + '.').join(' ') + ' ' + lastName;
+      };
+
+      console.log(transform(aLongName));
+      // transform = 'text'; // Uncaught TypeError: Assignment to constant variable
+
+      const aLongName = 'Ladislaus Coolio Barry Crazy Jones';
+      console.log(transform(aLongName));
+    </script>
+  </body>
+</html>

01_grundlagen/unterricht/tag10/11_use-strict.html

@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>'use strict' - JS wird in einen strikten Modus gesetzt</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>'use strict' - JS wird in einen strikten Modus gesetzt</h1>
+      </div>
+    </main>
+    <script>
+      const fn1 = () => (a = 3);
+      const fn2 = () => (a = 5);
+      const fn3 = () => console.log(a);
+
+      fn1();
+      fn2();
+      fn3();
+
+      // globale setting
+      window.lang = 'de-DE';
+
+      console.log('a:', a, 'window.a', window.a);
+      console.log('lang:', lang); // => 'de-DE'
+    </script>
+    <script>
+      'use strict';
+
+      const x = () => (a = 3); // => Uncaught ReferenceError: a is not defined
+      const y = () => (a = 5);
+      const z = () => console.log(a);
+
+      x();
+      y();
+      z();
+    </script>
+  </body>
+</html>