(II) Bedingte Anweisungen in JavaScript

Motivation

Das ist der zweite Beitrag zu der Serie Programmieren lernen mit JavaScript. Auch hier lasse ich mich von den Trainingsvideos von Thomas Rose inspirieren, und wende das Wissen in eigenen Beispielen an.

Cookielet 1: Bedingte Anweisungen

Bedingte Anweisungen sind in JavaScript nicht wirklich spektakulär. Es kommen die üblichen Schlüsselwörter if, else if und else zum Einsatz. Ferner, haben wir in dieser Übung auf jQuery verzichtet, und die DOM-Manipulationen mit Vanilla-JS durchgeführt.

<html>

<head>
  <title>Bedingte Anweisungen</title>
  <script>
    function myFunction() {
      var gebJahr = document.getElementById("gebJahr").value;
      var diesesJahr = new Date().getFullYear();
      var alter = diesesJahr - gebJahr;
      if (alter >= 150) {
        document.getElementById("ergebnis").innerHTML = "Bist du wirklich " + alter + " Jahre alt?";
      }
      else if (alter >= 18) {
        document.getElementById("ergebnis").innerHTML = "Du bist " + alter + " Jahre alt. Du bist volljährig.";
      } else {
        document.getElementById("ergebnis").innerHTML = "Du bist " + alter + " Jahre alt. Du bist nicht volljährig.";
      }
      document.getElementById("log1").innerHTML = "new Date().getYear(): " + new Date().getYear();
      document.getElementById("log2").innerHTML = "new Date().getFullYear(): " + new Date().getFullYear();
    }
  </script>
</head>

<body>
  <h1>Überprüfung der Volljährigkeit</h1>
  <h2>Bitte geben Sie ihr Geburtsjahr ein.</h2>
  <label>Geburtsjahr</label>
  <input type="text" name="" value="" id="gebJahr">
  <br>
  <button type="button" name="button" onclick="myFunction()">Jetzt überprüfen!</button>
  <p id="ergebnis"></p>
  <br>
  <p id="log1"></p>
  <p id="log2"></p>
</body>

</html>

Merker:

  • Vanilla-JS
    • document.getElementById(id).value; HTML-Element auslesen
    • document.getElementById(id).innerHTML; HTML-Text ändern

Cookielet 2: Wochentag ermitteln

Eine übliche Alternative in vielen Programmiersprachen und selbstverständlich auch in JavaScript ist die switch-Anweisung.

<html>

<head>
  <title>Wochentag ermitteln</title>
  <script>
    function myFunction() {
      var day;
      switch (new Date().getDay()) {
        case 0:
          day = "Sonntag";
          break;
        case 1:
          day = "Montag";
          break;
        case 2:
          day = "Dienstag";
          break;
        case 3:
          day = "Mittwoch";
          break;
        case 4:
          day = "Donnerstag";
          break;
        case 5:
          day = "Freitag";
          break;
        case 6:
          day = "Samstag";
      }
      document.getElementById("ergebnis").innerHTML = "Heute ist " + day;
    }
  </script>
</head>

<body>
  <button type="button" name="button" onclick="myFunction()">Welcher Tag ist heute?</button>
  <p id="ergebnis"></p>
</body>

</html>

Cookielet 3: Vergleichsoperatoren etc.

Neben den gängigen Vergleichsoperatoren stehen auch zwei exotische zur Verfügung. Der ternäre Auswahloperator ? gehört ebenfalls zum Sprachumfang von Plain JavaScript.

VergleichsoperatorenBeschreibung
==gleich
!=ungleich
<kleiner
<=kleiner als
>größer
>=größer gleich
===Wert und Datentyp gleich
!==nicht vom gleichen Typ bzw. ungleich
Logische OperatorenBeschreibung
&&Und
||Oder
!Nicht
var ergebnis = (zahl >= 0) ? "Größer oder gleich Null" : "Negativ";

Cookielet 3: Online-Banking

Bei dieser Übungsaufgabe werden wir eine sehr rudimentäre Passwortabfrage implementieren. Ist die Pin richtig erfährst Du dein Bankguthaben. Ist Sie falsch darfst Du nochmals probieren.

<html>

<head>
  <title>Online Banking</title>
  <script>
    function myFunction() {
      const pin = 1234;
      var eingabe = document.getElementById("eingabe").value;
      var guthaben = Math.floor(Math.random() * 11000);
      if (pin == eingabe) {
        document.getElementById("ergebnis").innerHTML = "Ihr Guthaben beträgt " + guthaben + " €.";
      } else {
        document.getElementById("ergebnis").innerHTML = "Falsche PIN. Bitte versuchen Sie es noch einmal!";
      }
    }
  </script>
</head>

<body>
  <h1>Deutsche Bank</h1>
  <h2>Online Banking</h2>
  <h3>Bitte geben Sie ihr Passwort ein!</h3>
  <label>PIN</label>
  <input type="text" name="" value="" id="eingabe">
  <br>
  <button type="button" name="button" onclick="myFunction()">Kontostatus prüfen!</button>
  <p id="ergebnis"></p>
</body>

</html>

Merker:

  • Vanilla-JS
    • const; Mit diesem Sprachkonstrukt lassen sich konstanten definieren
    • Math.random(); Liefert eine zufällige Zahl zwischen 0 (inklusive) und 1 (exklusive).
    • Math.floor(); Abrunden auf eine ganze Zahl.

Schreibe einen Kommentar