Auf Ereignisse reagieren

01 - Aufgabe 1 03 - Aufgabe 3
02 - Aufgabe 2

 

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

01

Aufgabe 1

  1. Praktische Aufgabe: Erstelle eine Webseite mit einer Schaltfläche mit dem Text "Prüfungsnote auswerten". Wenn der Benutzer auf die Schaltfläche klickt so soll er mittels Eingabefenster nach einer Prüfungsnote gefragt werden. Das Eingabefenster soll als Vorgabewert die Zahl "60" haben.

    Die eingegebene Prüfungsnote soll dann von deinem Programm ausgewertet werden:

    • Gibt der Benutzer entweder keine Zahl ein oder eine Zahl die nicht zwischen [1; 60] liegt dann soll das fragende Emoticon angezeigt werden.
    • Gibt der Benutzer eine miserable Note ein (unter 10) dann soll das schockierte Emoticon angezeigt werden.
    • Gibt der Benutzer eine unzureichende Note ein (unter 30) dann soll das weinende Emoticon angezeigt werden.
    • Gibt der Benutzer eine gute Note ein (über 30) dann soll das freundliche Emoticon angezeigt werden.
    • Gibt der Benutzer eine sehr gute Note ein (über 50) dann soll das vor-Freude-sabbernde Emoticon angezeigt werden.
    • Gibt der Benutzer eine exzellente Note ein (60) dann soll das schreiende Emoticon angezeigt werden.

question.png surprise.png cry.png 

smile.png slobber.png shout.png 

  1. Praktische Aufgabe: Erstelle eine Webseite mit einer Schaltfläche mit dem Text "Klick mich". Wenn der Benutzer auf die Schaltfläche klickt dann soll mittels Meldungsfenster der folgende Text angezeigt werden: Du hast mich X Mal geklickt!. In dem angezeigten Text soll X durch die Anzahl an Klicks ersetzt werden die der Benutzer seit dem Laden der Seite auf der Schaltfläche getätigt hat.

02

Aufgabe 2

  1. Praktische Aufgabe: Erstelle eine Webseite mit einer Schaltfläche "Würfeln". Wenn der Benutzer auf die Schaltfläche klickt soll in einem Meldungsfenster der Text "Du hast X gewürfelt" angezeigt werden. In dem Text soll der Wert X durch eine Zufallszahl zwischen 1 und 6 ersetzt werden.

    Schaue dir das unten stehende Beispiel an um herauszufinden, wie man eine Zufallszahl erstellt.

Zufallszahl in JavaScript
  // Meldungsfenster mit einer Zufallszahl im Bereich [min, max]
  alert(Math.floor(Math.random() * (max - min + 1)) + min);
  1. Praktische Aufgabe: Erstelle eine Webseite mit einer Schaltfläche "Würfeln". Wenn der Benutzer auf die Schaltfläche klickt, soll zufällig in der Webseite eines der sechs folgenden Bilder angezeigt werden.

dice_1.gifdice_2.gifdice_3.gif

dice_4.gifdice_5.gifdice_6.gif

03

Aufgabe 3

  1. Schwere praktische Aufgabe: Erstelle eine Webseite die misst, wie lange ein Benutzer braucht um auf eine zufällig platzierte Schaltfläche zu klicken. Die Webseite soll mittels Meldungsfenster den Text: Du hast X Sekunden gebraucht! ausgeben wobei X die Anzahl an Sekunden ist, die der Benutzer gebraucht hat.

    Hier ein paar Tipps:

    • Wenn der Benutzer auf die Seite kommt muss man herausfinden, wie viel Uhr es ist, um ab diesem Zeitpunkt die Zeit zu messen. In Aufgabe 6.4 vom Kapitel "Grundlegende Sprachelemente" haben wir einen Befehl kennengelernt um das aktuelle Jahr herauszufinden. Das Date Objekt hat aber noch andere Methoden die auf den Seiten 81-82 aufgelistet sind. Die geeigneteste Methode ist getTime(), die uns die aktuelle Zeit in Millisekunden seit dem 1.1.1970, 0:00 Uhr angibt. Die folgende Zeile gibt uns also die Startzeit an:var startZeit = (new Date()).getTime();
    • Wenn der Benutzer auf die Seite kommt muss die Schaltfläche zufällig positioniert werden. Um ein Element irgendwo auf einer Seite zu platzieren muss man die Absolute Positionierung von Elementen verwenden. Lies dir dazu noch einmal die Seiten 186-187 deines HTSTA Buches durch.
    • Um die Schaltfläche zufällig zu positionieren müssen wir Zufallszahlen erstellen! Lies dir dazu das Beispiel auf Seite 75 durch. Die Schaltfläche soll zufällig im Bereich (0,0) bis (500, 500) platziert werden.
    • Um also die Schaltfläche zufällig zu positionieren muss beim Besuchen der Seite dynamisch:
      1. der HTML Code einer Schaltfläche in die Seite geschrieben werden.
      2. die Schaltfläche muss mittels inline CSS absolut positioniert werden.
      3. die Position der Schaltfläche muss mittels random() und inline CSS zufällig erstellt werden.
      4. Die Schaltfläche muss als onClick Event eine Funktion definiert haben.
    • Wenn der Benutzer auf die Schaltfläche klickt muss die Endzeit herausgefunden werden. Die Differenz der Endzeit mit der Startzeit gibt uns die Zeit an in Millisekunden die der Benutzer gebraucht hat.

    Das fertige Spiel kannst du hier spielen.

  2. Schwere praktische Aufgabe: Erweitere die Webseite aus Aufgabe 3.1 so dass die Schaltfläche wirklich auf dem ganzen Bildschirm zufällig platziert wird. Benutze dazu die Attribute innerWidth und innerHeight des window Objektes um die Breite und Höhe des Bildschirmes herauszufinden.
  3. Schwere praktische Aufgabe: Erweite die Webseite aus Aufgabe 3.2 so dass die Schaltfläche nicht mehr am Rande des Bildschirms aus dem Bildschirm herausragen kann. Dazu musst du der Schaltfläche mittels CSS eine fixe Höhe und Breite geben und diese in die zufällige Positionsberechnung miteinfliessen lassen.
Sign In