Aus ProgrammingWiki
| 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
|