(III) Variablen und Berechnungen in JavaScript

Cookielet 1: Rechenoperationen 🧮

Ein immer wiederkehrender Bedarf sind Umrechnungen in Beruf und Alltag. Mit JavaScript lassen sich kleine schicke Tools mit Leichtigkeit erstellen.

<html>

<head>
  <title>Umrechnungen</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    function berechneLaenge() {
      var m = $("#m").val();
      var cm = $("#cm").val();
      var m2 = $("#m2").val();
      var mm = $("#mm").val();

      if (m != 0) {
        $("#cm").val(m * 100);
      } else if (cm != 0) {
        $("#m").val(cm / 100);
      }

      if (m2 != 0) {
        $("#mm").val(m * 1000);
      } else if (mm != 0) {
        $("#m2").val(mm / 1000);
      }
    }

    function berechneMasse() {
      var kg = $("#kg").val();
      var g = $("#g").val();
      var t = $("#t").val();
      var kg2 = $("#kg2").val();

      if (kg != 0) {
        $("#g").val(kg * 1000);
      } else if (g != 0) {
        $("#kg").val(g / 1000);
      }

      if (t != 0) {
        $("#kg2").val(t * 1000);
      } else if (kg2 != 0) {
        $("#t").val(kg2 / 1000);
      }
    }
  </script>
  <style>
    h1 {
      text-align: center;
    }

    label {
      width: 80px;
      display: inline-block;
      margin-left: 10px;
    }

    #ergebnis {
      font-family: verdana;
      font-size: 20px;
      padding: 10px;
    }
  </style>
</head>

<body>

  <h1>Übung: Umrechnungen</h1>

  <form>
    <h2>Länge</h2>
    <label for="m">Meter:</label>
    <input type="text" id="m">
    <label for="cm">Zentimeter:</label>
    <input type="text" id="cm"><br><br>
    <label for="m2">Meter:</label>
    <input type="text" id="m2">
    <label for="mm">Milimeter:</label>
    <input type="text" id="mm"><br><br>
    <button type="button" onclick="berechneLaenge()">Umrechnung durchführen!</button>
  </form>

  <form>
    <h2>Masse</h2>
    <label for="kg">Kilogramm:</label>
    <input type="text" id="kg">
    <label for="g">Gramm:</label>
    <input type="text" id="g"><br><br>
    <label for="t">Tonne:</label>
    <input type="text" id="t">
    <label for="kg2">Kilogramm:</label>
    <input type="text" id="kg2"><br><br>
    <button type="button" onclick="berechneMasse()">Umrechnung durchführen!</button>
  </form>

  <div id="ergebnis">Bitte geben Sie ihre Daten ein. Vielen Dank!</div>

</body>

</html>

Merker

  • CSS
    • margin-left: Außenabstand links festlegen

Cookielet 2: Datum & Uhrzeit ⌚

In dem folgendem Beispiel üben wir den Einsatz von Datumsfunktionen von JavaScript. Datum und Zeit machen mehr Spaß wenn diese nicht stehen bleiben. Deshalb lernen wir eine weitere Funktion kennen, die für jegliche Animation hilfreich sein kann. Als Dritten und letzten Bonus binden wir eine Schriftart von Google Fonts dynamisch ein.

<html>

<head>
  <title>Digitale Uhr</title>
  <link href='https://fonts.googleapis.com/css?family=Quantico' rel='stylesheet'>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    function Sleep(milliseconds) {
      return new Promise(resolve => setTimeout(resolve, milliseconds));
    }

    async function meineUhr() {
      while (true) {
        d = new Date();
        h = d.getHours();
        m = d.getMinutes();
        s = d.getSeconds();
        if (h < 10) {
          h = '0' + h;
        }
        if (m < 10) {
          m = '0' + m;
        }
        if (s < 10) {
          s = '0' + s;
        }
        zeit = h + ':' + m + ':' + s;
        $("#uhr").text(zeit);
        await Sleep(1000);
      }
    }
  </script>
  <style>
    h1 {
      text-align: center;
    }

    #uhr {
      margin: auto;
      width: 150px;
      background: black;
      color: red;
      text-align: center;
      font-weight: bold;
      font-family: 'Quantico';
      border: 3px solid black;
    }
  </style>
</head>

<body onload="meineUhr()">

  <h1>Übung: Digitale Uhr</h1>
  <br><br>
  <h1 id="uhr"></h1>

</body>

</html>

Merker

  • CDN
    • <link href=”‘https://fonts.googleapis.com…” rel=’stylesheet’> Einbinden einer Schriftart die von Google bereitgestellt wird.
  • CSS
    • margin: auto; Horizontale Zentrierung
  • Vanilla-JS
    • setTimeout(function, milliseconds) Pausieren bevor eine Funktion ausgeführt werden soll.
    • => Mit dem Pfeil kann die Definition einer Funktion abgekürzt werden.
    • Promise, await, async; Mit diesen Sprachkonstrukten wird das asynchrone Warten realisiert.
    • new Date(); Mit dem Date-Objekt lassen sich beliebige Datums- und Zeitoperationen durchführen.
      • getHours()
      • getMinutes()
      • getSeconds()

Cookielet 3: Countdown 🎆

Das Jahr neigt sich dem Ende zu. Also wollen wir einen Countdown programmieren, das uns verrät wie viele Tage, Stunden, Minuten und gar Sekunden verbleiben.

<html>

<head>
  <title>Countdown</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    function Sleep(milliseconds) {
      return new Promise(resolve => setTimeout(resolve, milliseconds));
    }

    function dhms(time) {
      let diff = Math.round(time / 1000);

      let d = Math.floor(diff / (24 * 60 * 60));
      diff = diff - (d * 24 * 60 * 60);
      let h = Math.floor(diff / (60 * 60));
      diff = diff - (h * 60 * 60);
      let m = Math.floor(diff / (60));
      diff = diff - (m * 60);
      let s = diff;

      return d + " Tage<br>" + h + " Stunden<br>" + m + " Minuten<br>" + s + " Sekunden";

    }

    async function countdown() {
      zieldatum = $("#date").val();
      zieldatum = new Date(zieldatum);

      while (true) {
        var jetzt = new Date();
        var differenz = zieldatum - jetzt;
        var ausgabe = dhms(differenz);
        $("#uhr").html(ausgabe);
        await Sleep(1000);
      }
    }
  </script>
  <style>
    body {
      background-color: lightgray;
    }

    h1 {
      text-align: center;
    }

    #uhr {
      margin: auto;
      width: 200px;
      color: darkblue;
      background: dimgray;
      text-align: center;
      font-weight: bold;
    }
  </style>
</head>

<body>

  <h1>Übung: Countdown</h1>
  <br><br>
  <h1 id="uhr"></h1>

  <form>
    <h2>Countdown</h2>
    <label for="date">Datum:</label>
    <input type="date" id="date">
    <button type="button" onclick="countdown()">Countdown starten!</button>
  </form>

  <div>Bitte das gewünschte Zieldatum eingeben. Vielen Dank!</div>

</body>

</html>

Merker:

  • HTML
    • <input type=”date”> Datumswähler
  • JavaScript
    • Für die Ermittlung des Abstands zwischen zwei Daten, ist lediglich die Differenz zwischen zwei Date-Objekten zu bilden.

Cookielet 4: Mathematik 📐

Mit dem Standardobjekt Math können wir keine höhere Mathematik betreiben. Davon abgesehen sind wesentliche elementare Berechnungen möglich:

  • Elementare Rechenoperationen: Wurzel, Potenz, Logarithmus
  • Elementare Funktionen: Betrag, Vorzeichen, Runden
  • Trigonometrische Funktionen: Sinus, Cosinus, Tangens etc.
  • Sonstiges: Min, Max, Zufallszahlen

Darüber hinaus, stellen wir weitere nützliche Funktionen in diesem Kontext vor:

  • Konvertieren von Zeichenketten in Zahlen
  • Überprüfung ob ein Wert eine Zahl ist
  • Verwendung eines Array-Objekts
<html>

<head>
  <title>Mein Taschenrechner</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    function berechneGrund() {
      var ergebnisa = parseFloat($("#zahl1a").val()) + parseFloat($("#zahl2a").val());
      var ergebnisb = parseFloat($("#zahl1b").val()) - parseFloat($("#zahl2b").val());

      $("#ergebnisa").val(ergebnisa);
      $("#ergebnisb").val(ergebnisb);
    }

    function berechneRundungen() {
      var runden_erg = Math.round($("#runden").val());
      var auf_erg = Math.ceil($("#aufrunden").val());
      $("#runden_erg").val(runden_erg);
      $("#auf_erg").val(auf_erg);
    }

    function berechneTrig() {
      var sin_erg = Math.sin($("#sinus").val());
      var cos_erg = Math.cos($("#cosinus").val());
      $("#sin_erg").val(sin_erg);
      $("#cos_erg").val(cos_erg);
    }

    function berechneZufall() {
      var zahlen_array = new Array();
      var anzahl = $("#anzahl").val();

      if (isNaN(anzahl)) {
        $("#zufall_erg").val("Fehler: Bitte geben Sie eine Zahl ein!");
      } else {
        for (var i = 0; i < anzahl; i++) {
          var zufallszahl = parseInt(Math.random() * 10);
          zahlen_array.push(zufallszahl);
        }
        $("#zufall_erg").val(zahlen_array);
      }
    }
  </script>
  <style>
    body {
      background-color: lightgreen;
    }

    h1 {
      text-align: center;
      color: darkblue;
    }

    h2 {
      color: red;
    }

    input {
      width: 70px;
    }

    label {
      width: 100px;
      display: inline-block;
      margin-left: 20px;
    }

    #zufall_erg {
      width: 200;
    }
  </style>
</head>

<body>

  <h1>Übung: Mein Taschenrechner</h1>

  <form>
    <h2>Grundrechenarten</h2>
    <label for="zahl1a">Addition:</label>
    <input type="number" id="zahl1a">
    <label for="zahl2a">+</label>
    <input type="number" id="zahl2a">
    <label for="ergebnisa">=</label>
    <input type="number" id="ergebnisa" readonly><br><br>
    <label for="zahl1b">Subtraktion:</label>
    <input type="number" id="zahl1b">
    <label for="zahl2b">-</label>
    <input type="number" id="zahl2b">
    <label for="ergebnisb">=</label>
    <input type="number" id="ergebnisb" readonly><br><br>

    <button type="button" onclick="berechneGrund()">Berechnung durchführen!</button>
  </form>

  <form>
    <h2>Runden</h2>
    <label for="runden">Kaufmännisches Runden:</label>
    <input type="number" id="runden">
    <label for="runden_erg">Ergebnis:</label>
    <input type="number" id="runden_erg" readonly><br><br>
    <label for="aufrunden">Aufrunden:</label>
    <input type="number" id="aufrunden">
    <label for="auf_erg">Ergebnis:</label>
    <input type="number" id="auf_erg" readonly><br><br>
    <button type="button" onclick="berechneRundungen()">Berechnung durchführen!</button>
  </form>

  <form>
    <h2>Trigonometrie</h2>
    <label for="sinus">Sinus von:</label>
    <input type="number" id="sinus">
    <label for="sin_erg">Ergebnis:</label>
    <input type="number" id="sin_erg" readonly><br><br>
    <label for="cosinus">Cosinus von:</label>
    <input type="number" id="cosinus">
    <label for="cos_erg">Ergebnis:</label>
    <input type="number" id="cos_erg" readonly><br><br>
    <button type="button" onclick="berechneTrig()">Berechnung durchführen!</button>
  </form>

  <form>
    <h2>Zufallszahlengenerator</h2>
    <label for="anzahl">Anzahl:</label>
    <input type="text" id="anzahl">
    <label for="zufall_erg">Ergebnis:</label>
    <input type="text" id="zufall_erg" readonly><br><br>
    <button type="button" onclick="berechneZufall()">Generator starten!</button>
  </form>

</body>

</html>

Merker:

  • HTML
    • <input type=”number”> Eingabefeld das nur Zahlen akzeptiert
  • Vanilla JavaScript
    • Math.round(); Kaufmännisches Runden
    • Math.ceil(); Aufrunden
    • Math.sin(); Sinus
    • Math.cos(); Kosinus
    • Math.random(); Zufallszahl
    • new Array(); Array-Objekt
    • Array_Objekt.push(); Arrayelement hinzufügen
    • parseInt(); Konvertieren zu Integer
    • parseFloat(); Konvertieren zu Fließkommazahl

Cookielet 5: Analoge Uhr 🕰

Mit dem Trio HTML, CSS und JavaScript lässt sich mit rund 100 Zeilen Quellcode eine rudimentäre Analoguhr basteln. Als Neuigkeit kamen in dieser Übung lediglich einige wenige CSS Eigenschaften hinzu. Nämlich das Rotieren und das Nachbilden eines Kreises. Das Übrige ist ein bisschen Geometrie, und bekannte Funktionen aus den vorherigen Übungen.

<html>

<head>
  <title>Analoge Uhr</title>
  <style>
    div.zeiger {
      position: absolute;
      left: 200px;
      top: 200px;
      width: 200px;
      height: 5px;
    }

    #stunden {
      background: linear-gradient(to right, blue 55%, gray 45%);
    }

    #minuten {
      background: linear-gradient(to right, green 55%, gray 45%);
    }

    #sekunden {
      background: linear-gradient(to right, orange 55%, gray 45%);
    }

    #uhr {
      position: absolute;
      left: 190px;
      top: 90px;
      height: 220px;
      width: 220px;
      background-color: gray;
      border-radius: 50%;
      display: inline-block;
    }

    .ziffer {
      font-weight: bold;
      font-size: 20;
      color: red;
    }

    #z3 {
      position: absolute;
      left: 400px;
      top: 200px;
    }

    #z6 {
      position: absolute;
      left: 300px;
      top: 290px;
    }

    #z9 {
      position: absolute;
      left: 200px;
      top: 200px;
    }

    #z12 {
      position: absolute;
      left: 300px;
      top: 90px;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    function Sleep(milliseconds) {
      return new Promise(resolve => setTimeout(resolve, milliseconds));
    }

    async function starteUhr() {
      while (true) {
        var jetzt = new Date();
        var h = jetzt.getHours();
        if (h > 12) {
          h = h - 21;
        }
        var min = jetzt.getMinutes();
        var s = jetzt.getSeconds();
        var degree_h = h * 15;
        var degree_m = min * 6 + 90;
        var degree_s = s * 6 + 90;
        $("#stunden").css("transform", "rotate(" + degree_h + "deg)");
        $("#minuten").css("transform", "rotate(" + degree_m + "deg)");
        $("#sekunden").css("transform", "rotate(" + degree_s + "deg)");
        await Sleep(1000);
      }
    }
  </script>
</head>

<body onload="starteUhr()">

  <h1>Analoge Uhr</h1>
  <br><br><br><br><br>
  <div id="uhr"></div>
  <div class="zeiger" id="stunden"></div>
  <div class="zeiger" id="minuten"></div>
  <div class="zeiger" id="sekunden"></div>
  <div class="ziffer" id="z12">12</div>
  <div class="ziffer" id="z3">3</div>
  <div class="ziffer" id="z6">6</div>
  <div class="ziffer" id="z9">9</div>

</body>

</html>

Merker

  • CSS
    • border-radius: ;Rahmen mit abgerundeten Ecken
    • transform: rotate(angel); HTML Element rotieren

Cookielet 6: Wochentag 📆

Weihnachten und Neujahr sind zum Greifen nahe. Gleich Anfang Januar gibt es wieder einen gesetzlichen Feiertag: Heilige Drei Könige. Dieser Tag zählt zu den sogenannten nicht-beweglichen Feiertagen und ist auf den 06.01. festgelegt. Der eine oder andere aus den Ländern Baden-Württemberg, Bayern und Sachsen-Anhalt fragen sich alljährlich ob es zugleich ein Werktag ist. Diese letzte Übung hilft genau das für ein beliebiges Datum herauszufinden.

<html>

<head>
  <title>Welcher Wochentag</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    function ermittleWochentag() {
      var wochentage = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag");
      var datum = new Date($("#datum").val());
      var wochentag = datum.getDay();
      wochentag = wochentage[wochentag];
      $("#ergebnis").html(wochentag);

      var datum_v = new Date(datum);
      datum_v.setFullYear(datum.getFullYear() - 1);
      var wochentag_v = datum_v.getDay();
      wochentag_v = wochentage[wochentag_v];
      $("#jahrvorher").html("Vorheriges Jahr: " + wochentag_v);

      var datum_n = new Date(datum);
      datum_n.setFullYear(datum.getFullYear() + 1);
      var wochentag_n = datum_n.getDay();
      wochentag_n = wochentage[wochentag_n];
      $("#jahrdanach").html("Nächstes Jahr: " + wochentag_n);
    }
  </script>
  <style>
    h1 {
      text-align: center;
    }

    label {
      width: 80px;
      display: inline-block;
      margin-left: 10px;
    }

    #ergebnis {
      font-family: verdana;
      font-size: 20px;
      padding: 10px;
    }
  </style>
</head>

<body>

  <h1>Übung: Wochentag</h1>

  <form>
    <h2>Mein Kalender</h2>
    <label for="datum">Datum:</label>
    <input type="date" id="datum">
    <button type="button" onclick="ermittleWochentag()">Wochentag ermitteln?</button>
  </form>

  <div id="jahrvorher"></div>
  <div id="ergebnis">Bitte wählen Sie ein Datum aus?. Vielen Dank!</div>
  <div id="jahrdanach"></div>
</body>

</html>

Merker

  • Vanilla JavaScript
    • DateObjekt.setFullYear(yearValue); Das Jahr wird angepasst. Monat, Tag etc. bleiben erhalten.

Schreibe einen Kommentar