(IV) For- und While-Schleifen in JavaScript

Das ist der vierte Beitrag zu der Serie Programmieren lernen mit JavaScript. Wünsche viel Spaß beim Erkunden und Ausprobieren der Programmierbeispiele.

Cookielet 1: X-Mal Würfeln 🎲

Schleifen sind unverzichtbare Programmierkonstrukte, wenn es darum geht Funktionen in eine sinnvolle Abfolge zu bringen. Hier in diesem Beispiel setzen wir die For-Schleife gleich doppelt, nämlich verschachtelt ein.

Du möchtest Wissen ob Glück oder Pech zu deiner Seite steht. Du darfst bestimmen wie oft gewürfelt werden soll. Wenn nach einem Komplettdurchgang mindestens eine Sechs mitdabei war, kannst du dich beruhigt zu den Glückspilzen zählen.

Die Coding-Beispiele haben mit den Aufgaben an Umfang und Komplexität gewonnen haben. So werden wir ab jetzt wo sinnvoll HTML, CSS und JavaScript der Übersichtlichkeit wegen trennen.

For-Schleifen werden immer dann eingesetzt, wenn im Voraus antizipiert werden kann, wie häufig ein Code-Abschnitt durchlaufen werden muss.

wuerfel.html

<html>

<head>
  <title>Übung: For-Schleife</title>
  <link rel="stylesheet" href="wuerfel_style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="wuerfel_script.js"></script>
</head>

<body>
  <h1>X-Mal Würfeln</h1>

  <form>
    <h2>Wie oft soll gewürfelt werden?</h2>
    <label for="anzahl">Anzahl:</label>
    <input type="number" id="anzahl">
    <button type="button" onclick="wuerfeln()">Los gehts!</button>
  </form>

  <div id="wuerfel">6</div>
  <div id="ergebnis">Viel Glück!</div>

</body>

</html>

wuerfel_style.css

h1 {
  text-align: center;
}

#wuerfel {
  background: black;
  color: white;
  padding: 25px;
  width: 50px;
  height: 50px;
  margin: auto;
  font-size: 40px;
  text-align: center;
}

wuerfel_script.js

function einmalWuerfeln() {
  r = Math.random();
  eins_bis_sechs = parseInt(r * 6 + 1);
  return eins_bis_sechs;
}

async function wuerfeln() {
  $("#ergebnis").html("");

  var anzahl = $("#anzahl").val();
  var ergebnis = new Array();

  for (var i = 0; i < anzahl; i++) {
    var zufallszahl;
    $("#wuerfel").css("background-color", "black");
    for (var j = 0; j < 10; j++) {
      zufallszahl = einmalWuerfeln();
      $("#wuerfel").html(zufallszahl);
      await Sleep(200);
    }
    $("#wuerfel").css("background-color", "green");
    await Sleep(500);
    ergebnis.push(zufallszahl);
    $("#ergebnis").html(ergebnis.toString());
  }

  sechsdabei = ergebnis.find(element => element == 6);
  if (sechsdabei == 6) {
    $("#wuerfel").html(":-)");
    $("#wuerfel").css("background-color", "green");
  } else {
    $("#wuerfel").html(":-(");
    $("#wuerfel").css("background-color", "red");
  }
}

function Sleep(milliseconds) {
  return new Promise(resolve => setTimeout(resolve, milliseconds));
}

Merker

  • Vanilla-JavaScript:
    • ArrayObjekt.find(); Durchsuchen eines Arrays nach bestimmten Kriterien

Cookielet 2: Raten und Wahrsagen🔮

Eins sagte ein kluger Kopf: “Vom Wahrsagen lässt sich wohl leben, aber nicht vom Wahrheit sagen.” So handelt die folgende Aufgabe ein Mini-App zu entwickeln, welche deinen siebten Sinn ähm Intuition misst.

While-Schleifen werden immer dann eingesetzt wenn zuvor völlig unklar ist, wie viele Durchgänge benötigt werden.

wahrsagen.html

<html>

<head>
  <title>Übung: While-Schleife</title>
  <link rel="stylesheet" href="wahrsagen_style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="wahrsagen_script.js"></script>
</head>

<body>
  <h1>Glück oder Intuition</h1>

  <form>
    <h2>Schritt 1: Es wird eine Zufallszahl (0-9) generiert</h2>
    <label for="zufallszahl">Schritt 1: Drehe das Glücksrad.</label>
    <input type="number" id="zufallszahl" readonly>
    <button type="button" onclick="drehen()">Jetzt drehen!</button>
    <br><br>
    <div id="gluecksrad"></div>
    <div id="zeit"></div>
    <br><br>
    <h2>Schritt 2: Wie gut bist du im Raten?</h2>
    <label for="raten">Gebe eine Zahl von 0 bis 9 ein.</label>
    <input type="number" id="raten">
    <button type="button" onclick="geraten()">Eingabe prüfen</button>
  </form>


  <div id="ergebnis">Viel Glück!</div>

</body>

</html>

wahrsagen_style.css

#gluecksrad {
  background: linear-gradient(to right, orange 50% , red 50%);
  border-radius: 50%;
  width: 75px;
  height: 75px;
  margin: auto;
}

#zeit {
  text-align: center;
  margin: auto;
}

#zufallszahl {
  background: white;
  color: black;
}

wahrsagen_script.js

function Sleep(milliseconds) {
  return new Promise(resolve => setTimeout(resolve, milliseconds));
}

async function drehen() {

  var degree = 0;
  for (var i = 0; i < 10; i++) {
    degree = degree + 45;
    $("#gluecksrad").css("transform", "rotate(" + degree + "deg)");
    await Sleep(200);
  }

  var zufallszahl = parseInt(Math.random() * 10);
  $("#zufallszahl").css("background-color", "black");
  $("#zufallszahl").val(zufallszahl);

  var farbe = "rgb(0, 0, 0)";
  var sekunde = 0;
  while (farbe == "rgb(0, 0, 0)") {
    $("#gluecksrad").css("transform", "rotate(" + degree + "deg)");
    $("#zeit").html(sekunde);
    await Sleep(1000);
    farbe = $("#zufallszahl").css("background-color");
    sekunde++;
  }
}

function geraten() {
  var eingabe = $("#raten").val();
  var kriterium = $("#zufallszahl").val();
  if (eingabe == kriterium) {
    $("#zufallszahl").css("background-color", "green");
    $("#ergebnis").html("Glückwunsch du hast richtig geraten!");
    $("#ergebnis").css("background-color", "green");
  } else {
    $("#ergebnis").css("background-color", "red");
    $("#ergebnis").html("Die Eingabe ist falsch. Probiere es noch ein Mal!");
  }
}

Merker

  • Vanilla-JavaScript
    • while( condition ) { do something }; Wird solange ausgeführt bis die Bedingung nicht mehr erfüllt also false ist.

Cookielet 3: Primzahlen 🔢

Was ist eine Primzahl? Eine Primzahl ist eine natürliche Zahl, die größer als Eins und ausschließlich durch sich selbst und durch Eins teilbar ist. Schon sehr früh gab es in der Wissenschaftsgeschichte einen Wetteifer große Primzahlen zu bestimmen. Der italienische Mathematiker Pietro Cataldi identifizierte 131.071 als Primzahl lange Zeit bevor (1588) es Computer gab. Wir begnügen uns in dieser Übungsaufgabe mit den Primzahlen kleiner Eintausend.

Ausgabe

Alle Primzahlen bis 1000: 2,3,5,7,11,13,17,19,23,29,31,37,41,43,47,53,59,61,67,71,73,79,83,89,97,101,103,107,109,113,127,131,137,139,149,151,157,163,167,173,179,181,191,193,197,199,211,223,227,229,233,239,241,251,257,263,269,271,277,281,283,293,307,311,313,317,331,337,347,349,353,359,367,373,379,383,389,397,401,409,419,421,431,433,439,443,449,457,461,463,467,479,487,491,499,503,509,521,523,541,547,557,563,569,571,577,587,593,599,601,607,613,617,619,631,641,643,647,653,659,661,673,677,683,691,701,709,719,727,733,739,743,751,757,761,769,773,787,797,809,811,821,823,827,829,839,853,857,859,863,877,881,883,887,907,911,919,929,937,941,947,953,967,971,977,983,991,997

primzahlen.html

<html>
<head>
  <title>Übung: Primzahlen</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="primzahlen_script.js"></script>
</head>
<body onload="berechnen()">
<div id="ergebnis" style="word-wrap: break-word;"></div>
</body>
</html>

primzahlen_script.js

var alle_primzahlen = new Array();

function berechnen() {
  for (var i = 2; i < 1000; i++) {
    if (istPrimzahl(i) == true) {
      alle_primzahlen.push(i);
    }
  }
  $("#ergebnis").html("Alle Primzahlen bis 1000: " + alle_primzahlen);
}

function istPrimzahl(number) {
  for (var i = 2; i < number; i++) {
    if (number % i == 0) {
      return false;
    }
  }
  return true;
}

Merker:

  • Vanilla-JavaScript
    • % Der Modulo-Operator gibt den Restwert nach einer Division zurück.
  • CSS
    • word-wrap: break-word; Zeilenumbrüche innerhalb von Wörtern

Schreibe einen Kommentar