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
}}

{|
|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;"|
Lokale und externe Definition
|}

{|
|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
|}

{|
|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
|}

{|
|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
|}