From 1647e6cac7096d191f130764ab9ace7d907ee2d8 Mon Sep 17 00:00:00 2001
From: Philippe Torrel <webmaster@gkontra.de>
Date: Tue, 16 Jun 2026 15:42:48 +0200
Subject: [PATCH]

---
 01_grundlagen/docs/programmierrichtlinien.md  |  1 +
 01_grundlagen/linksammlung.md                 |  2 +
 .../unterricht/tag02/03_use-strict.html       | 38 ++++++++++++
 .../unterricht/tag02/04_kommentare.html       | 44 ++++++++++++++
 .../unterricht/tag02/05_rechnen-in-js.html    | 42 +++++++++++++
 .../unterricht/tag02/06_strings.html          | 57 ++++++++++++++++++
 .../unterricht/tag02/07_strings-length.html   | 59 +++++++++++++++++++
 .../unterricht/tag02/08_literale.html         | 36 +++++++++++
 01_grundlagen/unterricht/tag02/09_typeof.html | 59 +++++++++++++++++++
 .../unterricht/tag02/10_prioritaeten.html     | 57 ++++++++++++++++++
 10 files changed, 395 insertions(+)
 create mode 100644 01_grundlagen/unterricht/tag02/03_use-strict.html
 create mode 100644 01_grundlagen/unterricht/tag02/04_kommentare.html
 create mode 100644 01_grundlagen/unterricht/tag02/05_rechnen-in-js.html
 create mode 100644 01_grundlagen/unterricht/tag02/06_strings.html
 create mode 100644 01_grundlagen/unterricht/tag02/07_strings-length.html
 create mode 100644 01_grundlagen/unterricht/tag02/08_literale.html
 create mode 100644 01_grundlagen/unterricht/tag02/09_typeof.html
 create mode 100644 01_grundlagen/unterricht/tag02/10_prioritaeten.html
diff --git a/01_grundlagen/docs/programmierrichtlinien.md b/01_grundlagen/docs/programmierrichtlinien.md
index d10f933..43e750f 100644
--- a/01_grundlagen/docs/programmierrichtlinien.md
+++ b/01_grundlagen/docs/programmierrichtlinien.md
@@ -2,3 +2,4 @@
 
 - Schreibe immer genau eine Anweisung in genau eine Zeile.
 - Setze beim Beenden einer Anweisung das Semikolon.
+- Verwende im Normalfall einfache Anführungszeichen zur Begrenzung von Strings. (prefer: Single Quote)
diff --git a/01_grundlagen/linksammlung.md b/01_grundlagen/linksammlung.md
index 788b370..c9121a1 100644
--- a/01_grundlagen/linksammlung.md
+++ b/01_grundlagen/linksammlung.md
@@ -14,6 +14,8 @@
 - [State Of JS 2025](https://2025.stateofjs.com/en-US)
 - [Bootstrap 5](https://getbootstrap.com/)
 - [MDN - Mozilla Developer Network](https://developer.mozilla.org/)
+- [JavaScript Historie](https://de.wikipedia.org/wiki/JavaScript)
+- [Can I Use](https://caniuse.com/)
 
 ## Tools/ Software
 
diff --git a/01_grundlagen/unterricht/tag02/03_use-strict.html b/01_grundlagen/unterricht/tag02/03_use-strict.html
new file mode 100644
index 0000000..50faefb
--- /dev/null
+++ b/01_grundlagen/unterricht/tag02/03_use-strict.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>use strict - JS in den strikten Modus setzen</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 in den strikten Modus setzen</h1>
+        <p>Viele veraltete Sprachkonstrukte werden nicht mehr akzeptiert</p>
+      </div>
+    </main>
+    <script>
+      text = 'Ich bin ein Text.';
+
+      console.log(text, window.text); // OHNE 'use strict' ->  Variable wird global (auf window) angelegt.
+    </script>
+
+    <script>
+      'use strict'; // setzt JS in einen strikten Modus
+
+      // vor ES6 (ECMAScript 2015)
+      var text = 'Ich bin ein Text.';
+
+      // seit ES6
+      let text2 = 'Ich bin ein Text.';
+      const text3 = 'Ich bin ein Text.';
+
+      text4 = 'Ich bin ein Text.';
+
+      // OHNE 'use strict' -> Variable wird global (auf window) angelegt.
+      // MIT 'use strict' -> Uncaught ReferenceError: text4 is not defined
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag02/04_kommentare.html b/01_grundlagen/unterricht/tag02/04_kommentare.html
new file mode 100644
index 0000000..5eeca25
--- /dev/null
+++ b/01_grundlagen/unterricht/tag02/04_kommentare.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Kommentare in JS</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+
+    <style>
+      *,
+      html {
+        box-sizing: border-box;
+      }
+
+      /* Mehrzeiliger Kommentar */
+
+      .box {
+        border: 1rem solid #f90;
+        background-color: #333;
+        width: 100px;
+        height: 100px;
+        padding: 2rem;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>Kommentare in JS</h1>
+        <!-- Kommentar in HTML -->
+        <div class="box"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      // einzeiliger Kommentar (Tastenkürzel: STRG + # | CMD + SHIFT + 7)
+
+      /*
+        Mehrzeiliger Kommentar (SHIFT + ALT + A | OPTION + SHIFT + A)
+      */
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag02/05_rechnen-in-js.html b/01_grundlagen/unterricht/tag02/05_rechnen-in-js.html
new file mode 100644
index 0000000..12fc79d
--- /dev/null
+++ b/01_grundlagen/unterricht/tag02/05_rechnen-in-js.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>Rechnen in JS</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>Rechnen in JS</h1>
+        <h2>arithmetischen Operatoren</h2>
+        <ul class="list list-group">
+          <li class="list-group-item"><code>+</code> Addition</li>
+          <li class="list-group-item"><code>-</code> Subtraktion</li>
+          <li class="list-group-item"><code>*</code> Multiplikation</li>
+          <li class="list-group-item"><code>/</code> Division</li>
+          <li class="list-group-item"><code>%</code> Modulo - Rest einer ganzzahligen Division</li>
+          <li class="list-group-item"><code>**</code> Potenz (erst ab ECMAScript 2016)</li>
+        </ul>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      console.log(3 + 4 * 2); // => 11
+      console.log(3 + 4 * 2); // => 11
+
+      // prettier-ignore
+      console.log(3 + (4 * 2)); // => 11
+      console.log((3 + 4) * 2); // => 14
+
+      console.log(5 + 4); // => 9
+      console.log(5 - 4); // => 1
+      console.log(5 * 4); // => 20
+      console.log(5 / 4); // => 1.25
+      console.log(10 % 3); // => 1 , da 10 - 3 * 3 = 1.
+      console.log(5 ** 4); // => 625 , da 5 * 5 * 5 * 5 = 625.
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag02/06_strings.html b/01_grundlagen/unterricht/tag02/06_strings.html
new file mode 100644
index 0000000..da718ab
--- /dev/null
+++ b/01_grundlagen/unterricht/tag02/06_strings.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>Datentyp - String</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>Datentyp - String</h1>
+        <p>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String">
+            String Objekt
+          </a>
+          - Das globale String-Objekt ist ein Konstruktor für Strings, auch Zeichenketten genannt.
+        </p>
+        <!-- Emmet: .output.alert.alert-secondary.my-3 -->
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      let outputEl = document.querySelector('.output');
+
+      let firstName = 'John';
+      let lastName = "Wick"; // prettier-ignore
+
+      let fullName = firstName + ' ' + lastName;
+
+      console.log(fullName); // => "John Wick";
+
+      let name = 'Max' + ' ' + 'Mustermann'; // => + Verkettungsoperator
+
+      console.log(name); // => 'Max Mustermann'
+
+      let link = "<a href=\"https://www.gfn.de\">GFN</a>"; // prettier-ignore
+      let link2 = '<a href="https://www.gfn.de">GFN</a>';
+
+      let text = "Wie geht's?";
+      let message = '"Chrome ist ein toller Browser" sagt ein Entwickler.';
+
+      let welcomeMessage = "Hallo! Wie geht's " + fullName + '? Was macht der Hund?';
+
+      // seit ES6 (ECMAScript 2015) Template String Substitution - Backtick Schreibweise
+      let welcomeMessage2 = `Hallo! Wie geht's ${fullName}? Was macht der Hund?`;
+
+      console.log(outputEl);
+      console.log(welcomeMessage);
+      console.log(welcomeMessage2);
+
+      outputEl.textContent = welcomeMessage2;
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag02/07_strings-length.html b/01_grundlagen/unterricht/tag02/07_strings-length.html
new file mode 100644
index 0000000..c6fe12e
--- /dev/null
+++ b/01_grundlagen/unterricht/tag02/07_strings-length.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Datentyp - String</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>Datentyp - String</h1>
+        <p>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String">
+            String Objekt
+          </a>
+          - Das globale String-Objekt ist ein Konstruktor für Strings, auch Zeichenketten genannt.
+        </p>
+        <!-- Emmet: .output.alert.alert-secondary.my-3 -->
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      let outputEl = document.querySelector('.output');
+
+      let firstName = 'John';
+      let lastName = "Wick"; // prettier-ignore
+
+      let fullName = firstName + ' ' + lastName;
+
+      console.log(fullName); // => "John Wick";
+
+      let name = 'Max' + ' ' + 'Mustermann'; // => + Verkettungsoperator
+
+      console.log(name); // => 'Max Mustermann'
+
+      let link = "<a href=\"https://www.gfn.de\">GFN</a>"; // prettier-ignore
+      let link2 = '<a href="https://www.gfn.de">GFN</a>';
+
+      let text = "Wie geht's?";
+      let message = '"Chrome ist ein toller Browser" sagt ein Entwickler.';
+
+      // String - Eigenschaft str.length
+      console.log(firstName.length); //=> 4
+      console.log(lastName.length); //=> 4
+      console.log(fullName.length); //=> 9
+
+      console.log('this string has a length of:'.length); //=> 28
+
+      // String - Methoden - str.toUpperCase() | str.toLowerCase()
+
+      console.log('Hallo'.toUpperCase()); // => 'HALLO'
+      console.log(fullName.toLowerCase()); // => 'john wick';
+      // outputEl.textContent = fullName.toLowerCase().toUpperCase().substring(0, 4);
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag02/08_literale.html b/01_grundlagen/unterricht/tag02/08_literale.html
new file mode 100644
index 0000000..7a8da93
--- /dev/null
+++ b/01_grundlagen/unterricht/tag02/08_literale.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Literale</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>Literale</h1>
+        <p>
+          Grundsätzlich gilt, dass jeder Wert — egal ob String oder Zahl — der direkt wörtlich (engl.: literally) im
+          Code steht, als <strong>Literal</strong> bezeichnet wird. Literale haben immer einen festen Wert.
+        </p>
+
+        <h2>Beispiele für Literale</h2>
+        <ul class="list">
+          <li>42</li>
+          <li>'Haus'</li>
+          <li>'grün'</li>
+          <li>5.47</li>
+          <li>1998</li>
+          <li>'Bitte geben Sie Ihren Namen ein'</li>
+          <li>'use strict'</li>
+          <li>true</li>
+          <li>'1 + 4'</li>
+        </ul>
+      </div>
+    </main>
+    <script>
+      'use strict';
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag02/09_typeof.html b/01_grundlagen/unterricht/tag02/09_typeof.html
new file mode 100644
index 0000000..bf39acc
--- /dev/null
+++ b/01_grundlagen/unterricht/tag02/09_typeof.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Datentypen und der Befehl "typeof" in JS</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>Datentypen und der Befehl "typeof" in JS</h1>
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      let outputEl = document.querySelector('.output');
+      let zahl = 123 + 123;
+
+      console.log(typeof 3764); // => 'number'
+      console.log(typeof 'beautiful JS'); // => 'string'
+      console.log(typeof 27.31); // => 'number'
+
+      console.log(typeof zahl); // => 'number'
+      console.log(typeof -3.14); // => 'number'
+
+      console.log(typeof '-3.14'); // => 'string'
+      console.log(typeof '3.14'); // => 'string'
+      // prettier-ignore
+      console.log(typeof "123"); // => 'string'
+      // prettier-ignore
+      console.log(typeof `123 + 1`); // => 'string'
+
+      console.log(typeof true); // => 'boolean'
+      console.log(typeof false); // => 'boolean'
+
+      console.log(typeof function () {}); // => 'function'
+      console.log(typeof 0b0110101); //=> 'number'
+
+      console.log(typeof 123n); // => 'bigint' (2020)
+
+      //=============
+      console.log(typeof 4 + 4); // => 'number' + 'number4'
+      console.log(typeof (4 + 4)); // => 'number'
+
+      console.log(typeof undefined); // => 'undefined'
+      console.log(typeof var2); // => 'undefined'
+
+      console.log(typeof [1, 2, 3]); //=> 'object' vom Typ Array
+      console.log(typeof null); //=> 'object' vom Typ null
+      console.log(typeof { firstName: 'Jane', lastName: 'Doe' }); //=> 'object' vom Typ Object
+      console.log(typeof outputEl); //=> 'object' vom Tys
+
+      console.log('b' + 'a' + +'a' + 'a'); //=> 'baNaNa'
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag02/10_prioritaeten.html b/01_grundlagen/unterricht/tag02/10_prioritaeten.html
new file mode 100644
index 0000000..4b08f4d
--- /dev/null
+++ b/01_grundlagen/unterricht/tag02/10_prioritaeten.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>Prioritäten-Tabelle</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>Prioritäten-Tabelle</h1>
+
+        <!-- Emmet: table.table.table-striped>(thead.table-dark>tr>th*3)+tbody>tr*5>(td{$}+td+td) -->
+        <table class="table table-striped">
+          <thead class="table-dark">
+            <tr>
+              <th>Priorität / Präzedenz</th>
+              <th>Name</th>
+              <th>Operator</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>1</td>
+              <td>Gruppierungsoperator</td>
+              <td>Klammern <code>()</code></td>
+            </tr>
+            <tr>
+              <td>2</td>
+              <td>typeof-Operator</td>
+              <td><code>typeof</code></td>
+            </tr>
+            <tr>
+              <td>3</td>
+              <td>Multiplikation, Division, Modulo</td>
+              <td><code>* / %</code></td>
+            </tr>
+            <tr>
+              <td>4</td>
+              <td>Addition, Subtraktion</td>
+              <td><code>+ -</code></td>
+            </tr>
+            <tr>
+              <td>5</td>
+              <td>Zuweisungsoperator</td>
+              <td><code>=</code></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </main>
+    <script>
+      'use strict';
+    </script>
+  </body>
+</html>

Priorität / Präzedenz	Name	Operator
1	Gruppierungsoperator	Klammern `()`
2	typeof-Operator	`typeof`
3	Multiplikation, Division, Modulo	`* / %`
4	Addition, Subtraktion	`+ -`
5	Zuweisungsoperator	`=`