jQuery - Übungen

Alle Programmieraufgaben sind vorzugsweise mit jQuery-Mitteln zu lösen!

Aufgabe 1 - Erklären Sie!

  1. Was ist ein Framework?
  2. Was ist jQuery?
  3. Wofür kann man jQuery verwenden?

Aufgabe 2 - Wozu setzt man jQuery ein?

Verfassen Sie einen Beitrag von etwa einer halben DIN A4-Seite, welcher die Vorteile der Verwendung von jQuery gegenüber einfacher javascript-Programmierung beschreibt. Ergänzen Sie Ihren Beitrag um 1-3 Beispiele, die die von Ihnen beschriebenen Leistungsmerkmale begründen bzw. genauer beschreiben.

Aufgabe 3 - Funktionsweise verstehen

a) Erstellen sie 3 unterschiedliche Programmbeispiele, die jQuery nutzen. Benutzen Sie mehrere unterschiedliche jquery-Events und jquery-Effekte. Benutzen Sie jQuery functions wie hide() show() slide() animate() ...
Ändern Sie bitte auch CSS-Eigenschaften mit jQuery!
b) Ergänzen Sie Ihre Seite um Effekte wie z.B. fadeIn und fadeOut, siehe

Aufgabe 4 - E-Mail Eingabeprüfung mit jQuery!

  1. Erstellen Sie eine HTML-Seite mit einem Eingabefeld
    (type="text" und nicht "email"), z.B.
    FormularEmailEingabe.png
  2. Reagieren Sie mit jQuery-Funktionen auf möglichst viele Ereignisse, z.B.
  3. Geben Sie z.B. einen Hilfetext in der Seite neben oder unter dem Eingabefeld aus,
    sobald der Cursor in das Feld gesetzt wird,
    siehe http://api.jquery.com/text/, http://www.w3schools.com/jquery/event_focus.asp.
  4. Prüfen Sie nach der Eingabe die syntaktische Korrektheit der Emailadresse und ändern Sie bei korrekter Eingabe anschließend die Farbe der Email-Adresse auf grün bzw. rot, siehe auch:
  5. Faden Sie den Hintergrund aus zurück auf grau.
    Siehe auch:
  6. ...

Aufgabe 5 - Bildschirmtastatur

Entwickeln Sie eine Bildschirmtastatur!
  1. Einzugebende Zeichen werden z.B. mit Anklicken ausgewählt und in ein Eingabefeld kopiert.
  2. Das Auswählen kann auch durch Berühren (ohne Klicken) mit der Maus geschehen oder durch Ziehen der Zeichen in das Eingabefeld.

Aufgabe 6 - Manuelle Diashow

a) Erstellen Sie eine Webseite, auf der ein Bild angezeigt wird.
b) Schreiben Sie die Dateinamen von 3 Bildern in ein globales Array.
c) Ergänzen Sie zwei Buttons unter dem Bild für die Funktionen vor und zurück.
d) Bei Anklicken der Buttons wird jeweils das nächste bzw. das vorherige Bild angezeigt.

w3schools-Lösung:

Aufgabe 7 - Klassenspiegel erstellen

Programmieren Sie ein Programm, welches nacheinander Noten erfasst, die Anzahl der Arbeiten zählt und den Durchschnitt errechnet!
Hinweis: Gezählt wird bei Anklicken der Noten! Alle Anzeigen werden dann sofort aktualisiert.
klassenspiegel.png

Aufgabe 8 - Textanalyzer (verschiedene Eventhandler und RegEx testen)

TextAnalyzer.png
a) Programmieren Sie ein Eingabefeld (ca. 50 Zeichen Platz für beliebige Zeichen)
b) Immer wenn ein Text eingegeben wird, soll getestet werden, um welche Art von Text es sich handelt!
  • Ist das Feld ausgefüllt?
  • Ist es eine Email-Adresse?
  • Ist es eine Internet-Domain?
  • Ist es ein Name?
Hinweis: Die benötigten fertigen Testfunktionen sollten sie im Kapitel "Formulare" unter Prüfungen mit RegEx finden!
c) Das Ergebnis des Tests soll in einem Ausgabefeld mitgeteilt werden! z.B. "Das scheint eine Email-Adresse zu sein!"
d) Testen Sie die Funktionsweise verschiedener jQuery-Aktionen (click, mouseout, change, blur, ...)
(siehe https://api.jquery.com/category/events/)
e) Ergänzen Sie einen Button, welcher ebenfalls für die Prüfung des Feldes sorgt!

Aufgabe 9 - Klick mich!

Realisieren Sie ein einfaches Klickspiel mit jQuery!

Anforderungen:
  1. Eigenes SVG-Objekt zur Verwendung im Spiel mit Libre Office Draw erstellen.
  2. Verwendung des Objekts in HTML-Seite (IDs für wichtige Tags vergeben).
  3. Punktezähler für das Anklicken des Objekts realisieren.
  4. Punktezähler auf der Seite anzeigen.
  5. Verwendung eines Timers zur Erzeugung neuer Objekte.
  6. Neue Objekte werden zufällig an neuen Positionen erzeugt.

Vorlage:

Links für Fortschrittene / Animationen von SVG-Elementen:

Aufgabe 10 - Black Jack

Programmieren Sie das Spiel "Black Jack"!
Das könnte z.B. wie folgt aussehen:

Spielregeln

Karten zählen - falls jemand den Film 21 gesehen hat:

Vorlage

  • Vorlage mit ein paar Ideen, wie Features in Javascript und jQuery realisiert werden könnten: Download
    (Karten anzeigen, Zufallsfunktion nutzen, Array mit Kartennamen, ...)

Konzept-Beispiel

  1. Der Bildschirm wird in einen Bereich für den Spieler und einen Bereich für die Bank aufgeteilt, (z.B. mit zwei div-Bereichen, eine im oberen Teil des Bildschirms und für die in einem Bereich darunter. Dort sollen dann die gezogenen Karten erscheinen.
    Hinweis: Die Karten der Bank erscheinen in einer einfachen Spielvariante aufgedeckt, in der erweiterten Variante nur die erste Karte.
  2. Vor dem ersten Kartenziehen werden beim Laden der Seite automatisch zwei Karten für den Spieler und eine Karte für die Bank angezeigt. Alternativ werden die ersten Karten erst angezeigt, wenn Sie einen Start-Button betätigen.
  3. Zum Ziehen einer weiteren Karte ist ein Button "Hit" vorzusehen. Falls man genug Karten hat, wird der Button "Stand" gedrückt und dann die Karten für die Bank automatisch gezogen.
  4. Die Gesamtzahl der Punkte des Spielerblatts wird jeweils nach der Anzeige der Karten des Spielers im Spielerfeld angezeigt.
    Im ersten Schritt sind die Karten wie folgt zu bewerten:
    - Karten 2 bis 10: jeweils die angegebene Punktzahl
    - Karten Bube (Jack), Dame (Queen), König (King): jeweils 10 Punkte
    - Karte As: 1 Punkt
    (später kann auch die Unterscheidung As = 11 oder 1 Punkt(e) programmiert werden,
    in der Regel, wenn der Spieler mit As = 11 Punkte "Bust" (>21 Punkte) gehen würde.
  5. Mögliche Erweiterungen:
    1. Setzen von Geld und das Errechnen von Gewinnen.
    2. Die Bank verdeckt alle Karten außer der ersten und deckt sie erst auf nach Beendigung des Spiels: Download verdeckte Karte
    3. Hinzufügen weiterer Spieler, die z.B. alle nacheinander gegen die Bank spielen.
    4. Verwaltung von Spielständen.
    5. ...

Voraussetzungen

Für die Programmierung wird erwartet, dass Sie sich ggf. selbstständig "mangelnde" Kenntnisse erarbeiten, z.B.
  1. HTML-Seitenerstellung
  2. CSS
  3. Schleifen (for/while/do while)
  4. Verzweigung (if else)
  5. Zähler programmieren (count++ usw.)
  6. Zufallszahl ermitteln
  7. Arrays
  8. Funktionen mit Parameter und return-Wert
  9. jquery (selektoren: id, class, tags, this / APIs: html, append, text)

Tipps zur Programmierung

  1. Notieren Sie die Dateinamen der Karten in einem Array. Fangen Sie erst einmal mit wenigen Karten an! Da sieht man die auftretenden Fehler im Programm sofort.
  2. Programmieren Sie eine Funktion initialize(). Hier werden alle Variablen auf die Startwerte zurückgesetzt für ein neues Spiel, z.B. Punktzahlen usw. Diese Funktion rufen Sie als erstes nach $(document).ready auf.
  3. Programmieren Sie eine Zufallsfunktion, welche Ihnen den Dateinamen einer gezogenen Karte liefert.
  4. Programmieren Sie eine Funktion, die Ihnen ein fertiges Image-Tag zusammenbastelt.
  5. ...

Bewertung

Praxis:
  1. Einwandfrei funktionierendes Programm?
  2. Eigenleistung gegenüber Musterlösungen?
  3. Gefällige Gestaltung
  4. Hilfestellung für den Benutzer
  5. Einhaltung der Spielregeln
  6. Korrekte Meldungen (gewonnen/verloren/unentschieden usw.)
  7. Spielen mit Einsatz und Berechnung des korrekten Gewinns
  8. Neustart des Spiels möglich
  9. ...
Theorie:
  1. Beantwortung von Fragen zum Ablauf und zur Funktion
    (Prüfung der Eigenleistung und Programmier-Kompetenz)


Weitere Aufgaben

z.B. Verwendung von Grafik in HTML5