From fa05e2f2d498abb3041f43e5ced830f2555062df Mon Sep 17 00:00:00 2001
From: Philippe Torrel <webmaster@gkontra.de>
Date: Thu, 18 Jun 2026 14:34:01 +0200
Subject: [PATCH]

---
 .../tag04/07_relationale-operatoren.html      | 83 +++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 01_grundlagen/unterricht/tag04/07_relationale-operatoren.html
diff --git a/01_grundlagen/unterricht/tag04/07_relationale-operatoren.html b/01_grundlagen/unterricht/tag04/07_relationale-operatoren.html
new file mode 100644
index 0000000..6f9c925
--- /dev/null
+++ b/01_grundlagen/unterricht/tag04/07_relationale-operatoren.html
@@ -0,0 +1,83 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Relationale Operatoren & Vergleichoperator</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>Relationale Operatoren & Vergleichoperator</h1>
+        <!-- ul.list.list-group>li.list-group-item*6 -->
+        <ul class="list list-group">
+          <li class="list-group-item"><strong>&lt;</strong> kleiner</li>
+          <li class="list-group-item"><strong>&gt;</strong> größer</li>
+          <li class="list-group-item"><strong>&lt;=</strong> kleiner gleich</li>
+          <li class="list-group-item"><strong>&gt;=</strong> größer gleich</li>
+          <li class="list-group-item"><strong>===</strong> identisch (strikt)</li>
+          <li class="list-group-item"><strong>!==</strong> nicht identisch (strikt)</li>
+        </ul>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      // Relationale Operatoren
+
+      console.log(3 < 5); // => true
+      console.log(3 > 5); // => false
+
+      console.log(325 > 12); // => true
+      console.log(325 < 12); // => false
+
+      console.log(325 <= 325); // => true
+      console.log(325 >= 325); // => true
+
+      // Strikter Vergleich (Datentyp wir mit überprüft)
+      console.log(365 === 365); // => true
+      console.log(365 === '365'); // => false
+
+      console.log('Ladislaus' === 'Ladislaus'); // => true
+      console.log('Ladislaus' === 'ladislaus'); // => false
+
+      // kein Strikter Vergleich
+      console.log(365 == 365); // => true
+      console.log(365 == '365'); // => true
+
+      // nicht identisch (Datentyp wir mit überprüft)
+      console.log(365 !== 365); // => false
+      console.log(365 !== '365'); // => true
+      console.log(2 !== 5); // => true
+
+      // keine Strikten Verlgleiche (VERWENDUNG VERMEIDEN!)
+      console.log(5 == '5'); // => true
+      console.log(0 == false); // => true
+      console.log('0' == false); // => true
+      console.log(0 == ''); //=> true
+      console.log(0 == '0'); //=> true
+      console.log('' == '0'); //=> false
+
+      // Lexikographischer Vergleich
+      // https://asciitable.xyz/
+      console.log('5' < 'a'); // => true
+      console.log('A' < 'a'); // => true
+      console.log('abcd' < 'abce'); // => true
+      console.log('abC' < 'abc'); // => true
+      console.log('300' < '4'); // => true
+
+      console.log('[' < '('); // => false
+
+      // implizite Typkonvertierung
+      // Wenn ein Operand "Number" ist, dann wird gegenüberliegender Operand in "Number" konvertiert
+      console.log('300' < 4); // => false (300 < 4)
+      console.log(300 <= '300'); // => true (300 <= 300)
+
+      // Bei NaN im Vergleich IMMER --> false
+      console.log(5 < '3m'); // => false (5 < NaN) <- Bei NaN ist das Ergebnis immer -> false
+      console.log(NaN === NaN); // => false
+      console.log(3 > 'Hello'); //=> false <- Bei NaN ist das Ergebnis immer -> false
+    </script>
+  </body>
+</html>
