Web Engineering 1/DOM

Wiki-Quelltext dieser Seite.

<language>Javascript</language>
{{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;"|
Javascript DOM Manipulation
|}

==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;"|
jQuery DOM Manipulation
|}

==Events und Callbacks==
{|
|style="width: 25em;vertical-align:top;"|<html>
<iframe width="100%" height="310" src="//jsfiddle.net/pw_we1/yqtsd04b/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
</html>
|style="vertical-align:top;padding-left:1em;"|
Events, Callbacks
|}

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