Web Engineering 1/DOM

Wiki-Quelltext dieser Seite.

<language>Javascript</language>
__NOTOC__
{{Ziele|
* 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==
{|
|style="width: 20em;vertical-align:top;"|
<code id="58603b800d2a1">
<head>
  <title>Javascript</title>
  <meta charset="UTF-8">
  <script src="extern.js"></script>
  <script>
    alert("Hallo Welt!");
  </script>
</head>
</code>
|style="vertical-align:top;padding-left:1em;"|
* ''Übernehmen Sie das Beispiel und erzeugen Sie neben der HTML Datei die <tt>extern.js</tt> Datei mit dem Inhalt <tt>alert("Hallo Extern!");</tt>''
* ''Verschieben Sie die Datei <tt>extern.js</tt> in einen Unterordner und passen Sie den Code entsprechend an''
* ''Tauschen Sie die beiden <tt>script</tt> Tags und machen Sie sich die zeitlichen Abläufe beim Laden der Skripte klar''
* ''Recherchieren Sie die Funktion <tt>console.log</tt> und ersetzen Sie <tt>alert</tt> entsprechend''
|}

==DOM Manipulation==
{|
|style="width: 25em;vertical-align:top;"|<html>
<iframe width="100%" height="230" src="//jsfiddle.net/pw_we1/xxfkkup5/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
</html>
|style="vertical-align:top;padding-left:1em;"|
* ''Ergänzen Sie eine weitere Spalte und weitere Zeilen''
* ''Finden Sie alle <tt>td</tt> Elemente im DOM und gruppieren Sie diese in der Klasse <tt>field</tt> (Attribut <tt>class</tt>)''
* ''Finden Sie Elemente der Klasse <tt>field</tt> und erweitern Sie deren Inhalt um eine laufende Nummer''
* ''Recherchieren Sie die Funktion <tt>querySelectorAll</tt> und finden Sie so alle Tabellenfelder der zweiten Spalte''
* ''Geben Sie den gefundenen Feldern einen grünen Rahmen''
|}

==jQuery==
{|
|style="width: 25em;vertical-align:top;"|<html>
<iframe width="100%" height="230" src="//jsfiddle.net/pw_we1/kzmrfb44/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
</html>
|style="vertical-align:top;padding-left:1em;"|
* ''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 <tt>td</tt> Elemente in Klassen (Hinweis: <tt>addClass</tt>)''
* ''Recherchieren Sie die Funktionen <tt>prepend()</tt>, <tt>after()</tt> und <tt>before()</tt>. Ü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 <tt>text()</tt>, <tt>html()</tt> und <tt>val()</tt>''
* ''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==
{|
|style="width: 25em;vertical-align:top;"|<html>
<iframe width="100%" height="310" src="//jsfiddle.net/pw_we1/yqtsd04b/embedded/js,html,result" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
</html>
|style="vertical-align:top;padding-left:1em;"|
* ''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''
|}

{{Projekt|Beispiellösung <document>WE1-P5.zip</document>}}