| Wissen | Können | Projekt |
|---|
- Baumstruktur des DOMs repräsentiert eine Webseite
- DOM-Manipulationen bewirken Änderung der Webseite
- jQuery als Hilfsframework
- Events bieten Einstiegspunkte für Reaktionen
- Konzept von Subscriptions und Callbacks (Funktionen höherer Ordnung)
| - Zugriff und Manipulation des DOM mit Javascript
- Arbeiten mit jQuery (Zugriff, Manipulation, Ereignisse)
| - Zusammenführung von Sudoku Spielfeld und Dokumentation (Umschaltung per DOM-Manipulation)
- Angeklicktes Sudoku-Feld wird hervorgehoben
- In Sudoku-Felder dürfen nur die Werte 1-9 eingetragen werden
- Start-Knopf: Alle Sudoku-Felder werden mit zufälligen Zahlen gefüllt
|
Javascript benutzen
| - Übernehmen Sie das Beispiel und erzeugen Sie neben der HTML Datei die extern.js Datei mit dem Inhalt alert("Hallo Extern!");
- Verschieben Sie die Datei extern.js in einen Unterordner und passen Sie den Code entsprechend an
- Tauschen Sie die beiden script Tags und machen Sie sich die zeitlichen Abläufe beim Laden der Skripte klar
- Recherchieren Sie die Funktion console.log und ersetzen Sie alert entsprechend
|
DOM Manipulation
|
| - Ergänzen Sie eine weitere Spalte und weitere Zeilen
- Finden Sie alle td Elemente im DOM und gruppieren Sie diese in der Klasse field (Attribut class)
- Finden Sie Elemente der Klasse field und erweitern Sie deren Inhalt um eine laufende Nummer
- Recherchieren Sie die Funktion querySelectorAll und finden Sie so alle Tabellenfelder der zweiten Spalte
- Geben Sie den gefundenen Feldern einen grünen Rahmen
|
jQuery
|
| - Analysieren Sie das Beispiel und erklären Sie die Gemeinsamkeiten zum vorherigen Beispiel (Hinweis: Achten Sie auf die Klammerung)
- Erweitern Sie die Tabelle um weitere Spalten und Zeilen und gruppieren Sie die td Elemente in Klassen (Hinweis: addClass)
- ''Recherchieren Sie die Funktionen prepend(), after() und before(). Überlegen Sie wie Sie diese Funktionen ohne jQuery umsetzen würden.
- Erweitern Sie den Inhalt aller Felder um eine laufende Nummer und recherchieren Sie den Unterschied zwischen den Funktionen text(), html() und val()
- Legen Sie für die Tabellenfelder der zweiten Spalte einen grünen Rahmen fest
- Leeren Sie den Inhalt aller Tabellenfelder, die keinen grünen Rahmen haben
|
Events und Callbacks
|
| - Fügen Sie einen Button hinzu, der bei Klick den vorhandenen Test-Button ausblendet
- Bei einem weiteren Klick soll der Test-Button wieder eingeblendet werden
- Verlangsamen Sie den Ein-/Ausblendeffekt und deaktivieren Sie während des Effekts Ihren Button
- Geben Sie dem Button einen grünen Rand solange sich die Maus darüber befindet
- Ändern Sie beim Überfahren zusätzlich den Text des Buttons und recherchieren Sie, wie Method Chaining Ihnen dabei helfen kann
|
Führen Sie die Dokumentation und das Spielfeld in einer HTML Datei zusammen und regeln Sie die Seitenumschaltung nun durch Manipulation des DOM. Wird in ein Sudoku-Feld geklickt, so soll es hervorgehoben werden, wobei natürlich immer nur ein Feld hervorgehoben sein soll. Entwerfen Sie außerdem eine geeignete Eingabevalidierung für die Sudoku-Felder. Fügen Sie dem Spielfeld einen Start-Button hinzu und füllen Sie bei Klick das Spielfeld mit zufälligen Zahlen komplett aus.
Beispiellösung
WE1-P5.zip - Installieren Sie (lokal) auf Ihrem Laptop das Firefox-AddOn "DOM Inspector". Analysieren Sie die DOM-Struktur eines einfachen HTML-Dokuments. Verwenden Sie auch Elemente mit Attributen.
- Verwenden Sie Firefox und öffnen Sie die Entwicklerwerkzeuge. Suchen Sie sich im Inspektor (nicht DOM Inspector) ein DOM-Element mit einer ID aus, die Sie sich merken. Wechseln Sie zur Konsole und geben Sie ein: document.getElementByID("IhreGemerkteID") . Führen Sie in dieser Browser-Umgebung ganz ähnliche Navitations- und Modifkationsexperimente durch wie Sie das im Tutorial gemacht haben.
- DOM-Manipulationen werden in Echtzeit ausgeführt. Entwerfen Sie ein HTML-Dokument nach eigenen Intentionen, das per Knopfdruck schnelle Farbwechsel an verschiedenen Stellen des Dokuments, verschwindenden bzw. erscheinenden Text und weitere spektakuläre Effekte offeriert. Verwenden Sie HTML(5), CSS und jQuery.
- Ersetzen Sie die Knöpfe zum Auslösen der Effekte aus der vorherigen Aufgabe durch Events. Stellen Sie sich jeweils passende Anwendungsfälle vor.
- Machen Sie sich mit den in der Vorlesung aufgezeigten Technologien der Eingabeverifizierung vertraut, indem Sie mit den entwickelten Dokumenten experimentierten und diese modifizieren, um die sich daraus ergebenden Effekte zu beobachten. Den Einsatz von JavaScript sollten Sie dabei auf ein Minimum beschränken, da noch nicht bekannt.