2026-09-10 15:39:56 +02:00
parent e27428268e
commit 43b2421cf7
9 changed files with 440 additions and 0 deletions
@@ -0,0 +1,100 @@
+<!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 wird 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 (Datentype wir mit überprüft)
+      console.log(365 !== 365); // => false
+      console.log(365 !== '365'); // => true
+      console.log(2 !== 5); // => true
+
+      // keine strikten Vergleich (VERWENDUNG VERMEIDEN)
+      console.log(5 == '5'); // => true
+      console.log(0 == false); // => true
+      console.log('0' == false); // => true
+      console.log('0' == ''); // => false
+      console.log(0 == ''); // => true
+      console.log(0 == '0'); // => true
+
+      // Only null, undefined, 0, false, NaN and "" are falsy in JavaScript. Everything else is truthy.
+
+      // 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('ab' < 'abc'); // => true
+      console.log('300' < '4'); // => true
+
+      console.log('[' < '{'); // => true
+
+      console.log('|' < ']'); // => false
+      console.log('|'.charCodeAt() < ']'.charCodeAt()); // => false
+      console.log(124 < 93); // => false
+
+      console.log('|'.charCodeAt()); // => 124
+      console.log(']'.charCodeAt()); // => 93
+
+      // implizite Typkonvertierung
+      // Wenn ein Operand "Number" ist, dann wird der gegenüberliegende Operand in "Number" konvertiert
+      console.log('300' < 4); // => 300 < 4 -> false
+      console.log(300 <= '300'); // => 300 <= 300 -> true
+
+      // Bei NaN in einem Vergleich ist das Ergebnis IMMER ---> false
+      console.log(5 < '3m'); // => 5 < NaN -> false
+      console.log(300 < NaN); // => false
+
+      console.log(NaN === NaN); // => false
+      console.log(3 > 'Hallo'); // => 3 > NaN -> false <- Bei NaN ist das Ergebnis immer -> false
+
+      console.log(NaN === !NaN); // => false
+      console.log(NaN === NaN); // => false
+
+      console.log(false === false); // => true
+      console.log((NaN === !NaN) === (NaN === NaN)); // => true
+    </script>
+  </body>
+</html>
@@ -0,0 +1,66 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>isNaN()</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>isNaN()</h1>
+        <p>
+          Die <code>isNaN()</code> Methode prüft, ob ein Wert <code>NaN</code> ist. Bemerkung: Aufgrund innerer Zwänge
+          weist die isNaN Methode interessante Regeln auf. Alternativ kann die in ECMAScript 2015 definierte Methode
+          <code>Number.isNaN()</code> genutzt werden.
+        </p>
+        <ul class="list">
+          <li>
+            <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/isNaN">isNaN()</a>
+          </li>
+        </ul>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      console.log(isNaN(3)); //=> false
+      console.log(isNaN('Hallo')); //=> true Number('Hallo') -> NaN
+
+      console.log(isNaN(NaN)); // => true
+
+      console.log(isNaN(-42));
+      console.log(isNaN(27));
+      console.log(isNaN(25.342)); // =>  false, denn die Argumente sind Zahlen.
+
+      console.log(isNaN('17.7')); // => false
+      console.log(isNaN('dreiundzwanzig')); // => true
+      console.log(isNaN('3Autos')); // => true
+
+      console.log(isNaN('3.5'));
+      // => false - Eselsbrücke mit 2 multiplizieren -> '3.5' * 2 -> 7
+      console.log(isNaN('3,5'));
+      // => true - Eselsbrücke mit 2 multiplizieren -> '3,5' * 2 -> NaN
+
+      // Verneinung über ! - unärer Operator
+      console.log(!isNaN('17.7')); // => true
+
+      // Die statische Methode Number.isNaN() bestimmt, ob der übergebene Wert der Zahlenwert NaN ist, und gibt false zurück, wenn die Eingabe nicht vom Typ Number ist. Sie ist eine robustere Version der ursprünglichen globalen Funktion isNaN().
+
+      //
+      console.log(Number.isNaN('a')); // => false
+      console.log(Number.isNaN('3' + '3')); // => false
+      console.log(Number.isNaN([])); // => false
+      console.log(Number.isNaN({})); // => false
+      console.log(Number.isNaN(false)); // => false
+      console.log(Number.isNaN(true)); // => false
+      console.log(Number.isNaN('33')); // => false
+
+      console.log(Number.isNaN(33)); // => false
+      console.log(Number.isNaN(NaN)); // => true
+
+      // typeof value === 'number' && isNaN(value);
+    </script>
+  </body>
+</html>