From dc6811bb65a4a912318ffc25d04f6cb5b9e57fc6 Mon Sep 17 00:00:00 2001
From: Philippe Torrel <webmaster@gkontra.de>
Date: Wed, 9 Sep 2026 12:05:46 +0200
Subject: [PATCH]

---
 .../unterricht/tag03/01_numbers.html          | 58 ++++++++++++++
 .../tag03/02_variablendeklaration.html        | 77 +++++++++++++++++++
 01_grundlagen/unterricht/tag03/03_prompt.html | 29 +++++++
 .../tag03/04_konstante-magic-number.html      | 19 +++++
 4 files changed, 183 insertions(+)
 create mode 100644 01_grundlagen/unterricht/tag03/01_numbers.html
 create mode 100644 01_grundlagen/unterricht/tag03/02_variablendeklaration.html
 create mode 100644 01_grundlagen/unterricht/tag03/03_prompt.html
 create mode 100644 01_grundlagen/unterricht/tag03/04_konstante-magic-number.html
diff --git a/01_grundlagen/unterricht/tag03/01_numbers.html b/01_grundlagen/unterricht/tag03/01_numbers.html
new file mode 100644
index 0000000..fa4cf60
--- /dev/null
+++ b/01_grundlagen/unterricht/tag03/01_numbers.html
@@ -0,0 +1,58 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Numbers</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>Numbers</h1>
+
+        <video src="https://i.imgur.com/FKwTYak.mp4" controls></video>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      // Binär (0b = Binary)
+      let binaryExample = 0b1101;
+      console.log(binaryExample); // => 13
+
+      // Oktal (0o = Octal)
+      let octalExample = 0o17; // 7 * (8^0) + 1 * (8^1) = 15
+      console.log(octalExample); // => 15
+
+      let octalExample2 = 0o223; // = 147, da (3 * 1) + (2 * 8) + (2 * 64)
+      console.log(octalExample); // => 147
+
+      // Hexadezimal (0x = Hex)
+      let hexExample = 0xff; //=> 255, da 15 * (16^0) + 15 * (16^1)
+      // 15 + 240
+      // 0 - 9 A - F
+
+      document.querySelector('h1').style.color = 'rgb(255, 153, 0)'; //'#ff9900'; //'#f90';
+
+      // Exponential (z.B. 123e5 = 12300000)
+      let exponentialExample = 123e5; // 12300000
+      console.log(exponentialExample);
+
+      console.log('Binär:', binaryExample, typeof binaryExample); // 13 , 'number'
+      console.log('Oktal:', octalExample, typeof octalExample); // 15 , 'number'
+      console.log('Hexadezimal:', hexExample, typeof hexExample); // 255 , 'number'
+      console.log('Exponential:', exponentialExample, typeof exponentialExample); // 123000 , 'number'
+
+      // BigInt (2020) vs. Number
+      let bigNumber = 1234567890123456n;
+
+      let normalNumber = Number.MAX_SAFE_INTEGER; // => 9007199254740991 - Maximale sichere Zahl (Number): 2^53
+      console.log('Max Number: ', normalNumber);
+      console.log(typeof bigNumber); // 'bigint'
+
+      // Gleitkommazahlen-Präzision
+      console.log('0.1 + 0.2 =', 0.1 + 0.2); // 0.30000000000000004
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag03/02_variablendeklaration.html b/01_grundlagen/unterricht/tag03/02_variablendeklaration.html
new file mode 100644
index 0000000..3d84a21
--- /dev/null
+++ b/01_grundlagen/unterricht/tag03/02_variablendeklaration.html
@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Variablen 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>Variablen in JS</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      // Variablendeklaration
+      let username;
+
+      console.log('username: ', username); // => undefined
+
+      username = 'Oswine';
+
+      console.log('username: ', username); // => 'Oswine'
+
+      // Variablendefinition
+      let firstName = 'Max';
+
+      console.log('firstName: ', firstName); // => 'Max'
+
+      // let firstName  = 'Max2' // Cannot redeclare block-scoped variable 'firstName'.
+      let firstname = 'Max2';
+
+      console.log('firstname: ', firstname); // => 'Max2'
+
+      // Variablendefinitionen
+      let age = 40;
+      let toggle = true;
+
+      // lowerCamelCase - Schreibweise
+      let myAddress = 'Entenhausenstr. 1';
+      let myCounter = 1;
+      let questionOne = 'Wie alt bist Du?';
+      let question2 = 'Wie groß bist Du?';
+
+      myCounter = myCounter + 1;
+
+      console.log('myCounter: ', myCounter); // => 2
+
+      toggle = !toggle; // => false | true
+
+      console.log('toggle: ', toggle);
+
+      myCounter = 'Guter Counter';
+
+      console.log('myCounter: ', myCounter); // => 'Guter Counter' <- eigentlich wird eine Zahl (number) erwartet.
+
+      // prefer-const
+      // https://github.com/airbnb/javascript#references
+
+      const myRole = 'admin';
+
+      // myRole = 'guest'; // Uncaught TypeError: Assignment to constant variable.
+
+      const myUrl = 'https://gfn.de';
+      // const myURL = 'https://gfn.de';
+      const html = '<strong>HTML</strong>';
+
+      // Konfigurationsvariable (SCREAMING_SNAKE_CASE - Schreibweise)
+      const HOST = 'http://127.0.0.1';
+      const DEFAULT_LANG = 'de-DE';
+      const PORT = 3000;
+      const DEBUG_MODE = true;
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag03/03_prompt.html b/01_grundlagen/unterricht/tag03/03_prompt.html
new file mode 100644
index 0000000..cb37bae
--- /dev/null
+++ b/01_grundlagen/unterricht/tag03/03_prompt.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>Prompt - Dialogfenster mit Eingabetextfeld 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>Prompt - Dialogfenster mit Eingabetextfeld in JS</h1>
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const outputEl = document.querySelector('.output');
+
+      // prefer-const
+      const username = prompt('Please let me know your name!');
+
+      console.log('username: ', username);
+
+      outputEl.textContent = username;
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag03/04_konstante-magic-number.html b/01_grundlagen/unterricht/tag03/04_konstante-magic-number.html
new file mode 100644
index 0000000..d9413f1
--- /dev/null
+++ b/01_grundlagen/unterricht/tag03/04_konstante-magic-number.html
@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Konstante als Konfigurationsvariable (const)</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>Konstante als Konfigurationsvariable (const)</h1>
+      </div>
+    </main>
+    <script>
+      'use strict';
+    </script>
+  </body>
+</html>
