Schleifen

01 - Aufgabe 1 04 - Aufgabe 4
02 - Aufgabe 2 05 - Aufgabe 5
03 - Aufgabe 3

 

Erstelle die praktischen Aufgaben in den Ordner "CLISS1\Aufgaben\05\" und erstelle für jede Aufgabe einen neuen Unterordner. Antworte auf die Fragen in einer neuen Webseite die du in den Ordner "CLISS1\Fragen\05\" speicherst.

01

Aufgabe 1

  1. Praktische Aufgabe: Erstelle eine Webseite mit einer Schaltfläche. Beim Klicken auf die Schaltfläche sollen in der Konsole alle Zahlen von 1 bis 100 ausgegeben werden.
  2. Praktische Aufgabe: Erstelle eine Webseite mit einer Schaltfläche. Beim Klicken auf die Schaltfläche soll der Benutzer mittels Eingabefenster nach einer Zahl X gefragt werden. Dann sollen in der Konsole alle Zahlen von 1 bis X ausgegeben werden.
  3. Praktische Aufgabe: Erstelle eine Webseite mit einer Schaltfläche. Beim Klicken auf die Schaltfläche soll der Benutzer mittels Eingabefenster nach zwei Zahlen X und Y gefragt werden. Dann sollen in der Konsole alle Zahlen von X bis Y ausgegeben werden.
  4. Theoretische Aufgabe: Was geschieht bei Aufgabe 3 wenn die zweite Zahl Y kleiner ist als die erste Zahl X?
  5. Praktische Aufgabe: Erweitere deine Webseite aus Aufgabe 3 um die notwendigen Kontrollen: die Eingabewerte X und Y müssen eine Zahl sein und X muss kleiner oder gleich Y sein.
  6. Praktische Aufgabe: Erstelle eine Webseite anhand des unten aufgeführten Quelltextes. Klicke auf den Knopf und beobachte was passiert. Erkläre deinem Banknachbarn wie das Script funktioniert und die Bedeutung der folgenden Begriffe: length, options, options[i], options[i].selected, options[i].text, options[i].value
Aufgabe 1.6
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Aufgabe 1.6</title>
    <style>
    </style>
    <script>
      function test() {
        var liste = document.getElementById('auswahl');
        for (var i = 0; i < liste.length; i++) {
          if (liste.options[i].selected) {
            alert('Text: ' + liste.options[i].text + ', Wert: ' + liste.options[i].value);
          }
        }
      }
    </script>
  </head>
  <body>
    <select id="auswahl" size="4" multiple>
      <option value="1">Eins</option>
      <option value="2">Zwei</option>
      <option value="3">Drei</option>
      <option value="4">Vier</option>
      <option value="5">Fünf</option>
    </select>
    <button onClick="test()">GO</button>
  </body>
</html>
  1. Praktische Aufgabe: Erstelle eine Webseite anhand des unten aufgeführten Quelltextes. Klicke auf den Knopf und beobachte was passiert.
Aufgabe 1.7
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Aufgabe 1.7</title>
    <style>
    </style>
    <script>
      function generateYears() {
        var yearSelect = document.getElementById('year');
        var options = '';
        for (var i = 1900; i <= 2012; i++) {
          options = options + '<option value="' + i + '">' + i + '</option>';
        }
        yearSelect.innerHTML = options;
      }
    </script>
  </head>
  <body>
    <select id="year"></select>
    <button onClick="generateYears()">Jahre generieren</button>
  </body>
</html>
  1. Praktische Aufgabe: Erstelle eine Webseite anhand des Beispiels aus Aufgabe 1.7. Verändere das Script so, dass beim Laden der Seite (also ohne auf eine Schaltfläche klicken zu müssen) in der Auswahlliste immer die 100 letzten Jahre stehen und dass das Script richtig funktioniert, unabhängig davon, in welchem Jahr man es ausführt. Du darfst also nicht das aktuelle Jahr fix vordefinieren. (Als Erinnerung: wie man das aktuelle Jahr ausliest stand in Aufgabe 6.4 im Kapitel "Grundlegende Sprachelemente")
  2. Praktische Aufgabe: Erstelle eine Webseite anhand des unten aufgeführten Quelltextes. Klicke auf den Knopf und beobachte was passiert. Erkläre deinem Banknachbarn, wie das Script funktioniert.
Aufgabe 1.9
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Aufgabe 1.9</title>
    <style>
    </style>
    <script>
      function bestellen() {
        var summe = 0;
        var anzahl = 0;
        var auswahlliste = document.getElementById('auswahl');
        for (var i = 0; i < auswahlliste.length; i++) {
          if (auswahlliste.options[i].selected) {
            alert('Der Benutzer möchte ' + auswahlliste.options[i].text + ' auf seine Pizza.');
            anzahl = anzahl + 1;
            summe = summe + parseFloat(auswahlliste.options[i].value);
          }
        }
        alert('Mit ' + anzahl + ' Zutaten kostet die Pizza ' + summe + ' Euro.');
      }
    </script>
  </head>
  <body>
    <select id="auswahl" size="4" multiple>
      <option value="0.80">Salami</option>
      <option value="0.75">Paprika</option>
      <option value="1.10">Ananas</option>
      <option value="0.80">Mozzarella</option>
      <option value="1.20">Schinken</option>
    </select>
    <button onClick="bestellen()">Bestellen</button>
  </body>
</html>
  1. Praktische Aufgabe: Erstelle eine Webseite anhand des Beispiels aus Aufgabe 1.9. Verändere das Script so, dass eine Fehlermeldung angezeigt wird wenn der Benutzer keine Zutaten ausgewählt hat. Ausserdem ist im Moment die Anzeige etwas komisch, weil mit nur einer Zutat wird der Text "Mit 1 Zutaten kostet die Pizza..." angezeigt wird. Verändere deshalb die Anzeige so, dass mit nur einer Zutat der Text "Mit 1 Zutat kostet die Pizza..." angezeigt wird.

02

Aufgabe 2

  1. Zählergesteuerte Schleifen kann man nur dann einsetzen, wenn die Anzahl an Wiederholungen bekannt ist. Es gibt allerdings auch Situationen, in denen die Anzahl an Wiederholungen nicht bekannt ist und von einer Bedingung abhängt. Ein Beispiel wäre, wenn man den Benutzer so lange bittet einen Wert einzugeben mittels Eingabefenster, bis er den Namen eines Landes aus der EU eingegeben hat. In diesem Fall muss man bedingte Schleifen einsetzen. Lies dir deshalb das Kapitel "4.4 Kopfgesteuerte Schleifen" auf den Seiten 40 bis 41 durch. Du kannst auch auf den folgenden Knopf klicken um ein Beispiel einer bedingten Schleife zu sehen:
  2. Praktische Aufgabe: Erstelle eine Webseite die beim Laden den Benutzer mittels Eingabefenster nach seinem Namen fragt. Der Benutzer muss so lange gefragt werden, bis er etwas eingibt. Er darf also das Eingabefenster nicht leer lassen.
  3. Praktische Aufgabe: Erstelle eine Webseite die beim Laden den Benutzer mittels Eingabefenster nach seinem Alter fragt. Der Benutzer muss so lange gefragt werden, bis er a) eine Zahl eingibt und b) diese Zahl positif ist.
  4. Praktische Aufgabe: Erstelle eine Webseite die beim Laden den Benutzer mittels Eingabefenster nach seinem Lieblingsland fragt. Der Benutzer muss so lange gefragt werden, bis er eines der folgenden Länder eingibt: Luxemburg, Portugal, Frankreich, Mittelerde oder Kalimdor.
  5. Manchmal ist es nicht auf den ersten Blick offensichtlich, welchen Typ von Schleifen man einsetzen muss. Stelle dir das folgende Beispiel vor:
    ein Benutzer wird mittels Eingabeschleife nach der Eingabe eines Passwortes gefragt. Allerdings hat er nur drei Versuche das Passwort richtig einzugeben.

    Handelt es sich bei diesem Beispiel um eine zählergesteuerte Schleife da er nur drei Versuche hat oder um eine bedingte Schleife da wir nicht wissen wie oft er braucht um das Passwort einzugeben?

    Versuche das Rätsel zu lösen indem du diese Aufgabe praktisch umsetzt.

03

Aufgabe 3

  1. Schleifen sind absolut notwendig zum Erstellen von Animationen in Webseiten. Um z.B. ein Bild 400 Pixel nach rechts "gehen" zu lassen, können wir sein Attribut style.left in Schritten von 10 Pixeln in gleichmässigen Schritten erhöhen. Dadurch entsteht eine fliessende Animation da sich bei jedem Schritt das Bild um 10 Pixeln nach rechts bewegt hat bis es schliesslich die ganzen 400 Pixel gegangen ist. Versuche den unten stehenden Code in eine Webseite einzubinden und beim Klicken auf eine Schaltfläche auszuführen. Vergiss nicht das Bild absolut zu positionieren und dem Bild eine Position (top, left) im inline CSS zu geben:<img src="bild.jpg" style="position: absolute; top: 0px; left: 0px;">Wieso funktioniert dieser Code nicht wie erwartet?
Aufgabe 3.1
function goRight() {
  var sprite = document.getElementById('sprite');
  var left = 0;
  var startLeft = parseInt(sprite.style.left);
  while (left <= 400) {
    sprite.style.left = startLeft + left + "px";
    left = left + 10;
  }
}
  1. Wie du sicher festgestellt hast, geht die Animation (die Schleife) so schnell, dass der Browser keine Zeit hat, die einzelnen Schritte anzuzeigen. Deshalb sind die bisher gesehenen Schleifen ungeeignet für Animationen. Um richtige Animationen zu erstellen benötigen wir deshalb zeitgesteuerte Schleifen, die man in JavaScript mittels window.setInterval() erstellen kann. setInterval() ist eine Methode vom window Objekt und wird benutzt um eine Funktion in einem bestimmten Interval (Zeitabstand) aufzurufen. Versuche etwas mit dem folgenden Beispiel zu experimentieren um die Funktionsweise besser zu verstehen [jsFiddle]:
Aufgabe 3.2
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Aufgabe 3.2</title>
  <script>
    var myTimer;
    function sayHello() {
      var output = document.getElementById('output');
      output.innerHTML = output.innerHTML + 'hello ';
    }

    function start() {
      myTimer = window.setInterval(sayHello, 100);
    }

  </script>
</head>
<body>
  <button onClick="start()">Hello!</button>
  <div id="output"></div>
</body>
</html>
  1. Wie die Methode window.setInterval() funktioniert kannst du ganz im Detail auf der Mozilla Webseite nachlesen. Um die Methode zu benutzen musst du ihr eigentlich nur zwei Sachen sagen:
    1. Der Name der Funktion die in regelmässigen Abstanden ausgeführt werden soll.
    2. Die Zeit in Millisekunden die zwischen zwei Funktionsaufrufen vergehen soll. Wenn du z.B. 1000 hinschreibst wird die Funktion jede Sekunde aufgerufen.
    Den Aufruf von window.setInterval() solltest du in einer Variabel speicheren. Diese Variabel ist dann ein Timer-Objekt das du unter anderem benutzen kannst, um den Timer wieder zu stoppen (sonst läuft er unendlich lange weiter). Um einen Timer wieder zu stoppen benutzt man die Methode window.clearInterval() und man muss ihr sagen, welchen Timer man stoppen will. Experimentiere mit dem folgenden Beispiel um Timer zu starten und zu stoppen [jsFiddle]:
Aufgabe 3.3
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Aufgabe 3.3</title>
  <script>
    // variable to save the timer
    var myTimer;

    function sayHello() {
      // access the div with the id 'output'
      var output = document.getElementById('output');

      // add the 'hello' string to the current innerHTML
      output.innerHTML = output.innerHTML + 'hello ';
    }

    function start() {
      // call sayHello() every 100 msecs and save the timer in myTimer
      myTimer = window.setInterval(sayHello, 100);
    }

    function stop() {
      // clear the myTimer timer
      window.clearInterval(myTimer);
    }

  </script>
</head>
<body>
  <button onClick="start()">Start</button>
  <button onClick="stop()">Stop</button>
  <div id="output"></div>
</body>
</html>
  1. Beim Benutzer von Timer gibt es ein paar Sachen zu beachten:
    • Beim Aufrufen von Funktionen werden alle Variabeln die innerhalb dieser Funktion definiert sind nur kurzzeitig erstellt und am Ende der Funktion wieder gelöscht. Dies hat nichts mit Timern zu tun sondern ist ganz normal in JavaScript und anderen Programmiersprachen.
    • Die Variabel die den Timer speichert muss unbedingt global, d.h. ausserhalb von einer Funktion definiert sein. Am Besten erstellt man diese Variabel ganz oben im JavaScript Code.
    • Alle Werte und Variabeln die man in Timern über längere Zeit hinweg benutzen will, muss man global speichern und nicht in der Funktion die im Timer aufgerufen wird. Denke daran dass die Variabeln dieser Funktion immer wieder gelöscht werden.
    Schaue dir das unten stehende Beispiel an um den Unterschied besser zu erkennen [jsFiddle]:
Aufgabe 3.4
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Aufgabe 3.4</title>
  <style>
    #output {
        margin: 20px;
        border: 1px solid #e3e3e3;
        width: 100px;
        height: 100px;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 80px;
        color: #333;
        text-align: center;
    }?
  </style>
  <script>
    var myTimer;

    var counter1 = 0;

    function count1() {
      counter1++;
      document.getElementById('output').innerHTML = counter1;
    }

    function count2() {
      var counter2 = 0;
      counter2++;
      document.getElementById('output').innerHTML = counter2;
    }

    function startCounter1() {
      window.clearInterval(myTimer);
      myTimer = window.setInterval(count1, 1000);
    }

    function startCounter2() {
      window.clearInterval(myTimer);
      myTimer = window.setInterval(count2, 1000);
    }

  </script>
</head>
<body>
  <button onClick="startCounter1()">Zählen 1</button>
  <button onClick="startCounter2()">Zählen 2</button>
  <div id="output"></div>
</body>
</html>

04

Aufgabe 4

Erstelle eine Webseite mit einem dunkel-blauen Hintergrund (#0020AA) auf der beim Laden 100 Schneeflocken herabschneien. Die Schneeflocken sollen beim Laden der Seite zufällig auf der Seite positioniert werden. Wenn eine Schneeflocke den Boden berührt, also die untere Seite des Browsers, so soll sie erneut an den oberen Rand des Browsers positioniert werden (an einer zufälligen Positionen oben am Rand des Browsers). Von dort soll sie dann wieder herabschneien.

Hier ein paar Tips:

05

Aufgabe 5

  1. Praktische Aufgabe: Tom's Oma hat ihm versprochen, dass wenn er in der nächsten Prüfung eine gute Note bekommt, sie ihm X Cent und dann in den kommenden (15-X) Tagen jeweils noch einmal das Doppelte des Betrages des vorherigen Tages geben würde.

    Beispiel: Wenn Tom sich für X=12 entscheidet, dann bekommt er sofort 12 Cent und er bekommt an den folgenden 15-12 = 3 Tagen auch noch Geld. Am 1. Tag bekommt er 12x2 = 24 Cent. Am 2. Tag bekommt er 24*2 = 48 Cent. Am 3. Tag bekommt er 48*2 = 96 Cent. Also bekommt er zusammengerechnet 0,12€ + 0,24€ + 0,48€ + 0,96€ = 1,80€.

    TagBelohnung (€)
    00.12€
    10.24€
    20.48€
    30.96€
    Total1.80€

    Hilf Tom dabei, den besten Wert für X herauszufinden, der ihm hilft am meisten Geld zu bekommen. Entwickle dafür eine Webseite mit folgenden Eigenschaften:

    • Die Webseite soll eine Auswahlliste haben wo Tom den Wert für X auswählen kann. Die Auswahlliste soll alle Werte von 1 bis 15 beinhalten.
    • Um die Webseite etwas dynamischer zu gestalten soll der Inhalt der Auswahlliste beim Laden der Seite dynamisch erstellt werden. Die Auswahlliste soll als Optionen anzeigen z.B. 0.01€, 0.02€, 0.03€ ... 0.14€, 0.15€. Die Werte der einzelnen Optionen der Auswahlliste sollen sein 1, 2, 3 ... 14, 15.
    • Zusätzlich zu der Auswahlliste soll die Webseite auch einen Schaltfläche haben. Beim Klick auf die Schaltfläche soll dynamisch eine Tabelle erstellt werden die Tom alle wichtigen Informationen anzeigt.
    • Die Tabelle soll 2 Spalten haben: die erste Spalte zeigt den aktuellen Tag an und die zweite Spalte wieviel Geld Tom an diesem Tag erhält. In der letzten Reihe soll dann der totale Geldbetrag angezeigt werden.

    Hier kannst du dir ein Beispiel des Resultates ansehen und die einzelnen Werte für X austesten.

  2. Praktische Aufgabe: Erstelle eine Webseite, die die aktuelle Uhrzeit anzeigt. Die Uhrzeit soll folgendes Format haben: hh:mm:ss. Die Stunden, die Minuten sowie die Sekunden sollen immer mit 2 Stellen angezeigt werden.

Sign In