Hauptmenü

Untermenü

DOM-Manipulation JavaScript - Praxistutorial 1 - Einführung

1. Die Abschnitte

2. Wichtig!

Schlechte Angewohnheiten wird man bekanntlich ganz schwer wieder los. Darum werde ich in diesem Tutorial auch nicht die übliche 08/15-Programmierweise von JavaScript einsetzen, sondern das DOM-Scripting, damit ihr euch endlich daran gewöhnt und die Vorteile zu schätzen wisst. Wer sich damit nicht auskennt, sollte sich bitte vorher damit beschäftigen. Denn die grundlegenden Dinge dazu werde ich hier nicht mehr erläutern.

3. Die Daten

Den Basiscode und die komplette Lösung für dieses Tutorial findet ihr rechts unter dem Punkt "Daten". Folgende Dateien müssen vorhanden sein.

Dateien

4. Das Ziel

In diesem Anfängertutorial werden wir anhand einer Beispielseite mal alle grundsätzlichen Aspekte der DOM-Manipulation vornehmen. Wir werden also Elemente ansteuern, verändern, erzeugen, Text- und Attributknoten bearbeiten, und was sonst noch so möglich ist. Allerdings gibt es hier eine Ausnahme. Formulare und deren Elemente werden erst mal komplett ignoriert, darauf gehe ich beim zweiten Tutorial ein, da es doch den einen oder anderen Unterschied gibt.

Das Beispiel

... ist eine zugegebenermaßen nicht sehr hübsche Seite, aber braucht uns hier nicht zu interessieren. Wichtig für das erste Verständnis ist der letzte Abschnitt. Über die dortigen Links werden wir die einzelnen Methoden aufrufen, um die entsprechenden Änderungen vorzunehmen.

Die Vorgehensweise

Schaut euch zuerst mal die manipulate.htm an, damit ihr die Struktur der Seite erfassen könnt. Allerdings werden wir an dieser Datei nichts ändern. Die styles.css könnt ihr komplett ignorieren, die ist hier völlig schnuppe. Für dieses Tutorial benötigt ihr nur die dom.js. In der werden wir alles abarbeiten.

5. Echt krank

Da ich, wie schon oft erwähnt, meinen Auftritt auch nutze, um mal bestimmte Dinge zu testen, werde ich euch hier mit ein paar Sachen konfrontieren, die meiner Meinung nach doch ziemlich verrückt sind. Aber dadurch lernt ihr auch, was mit JavaScript so möglich ist. Auch wenn studierte Informatiker ob dieser grausamen Vorgehensweise die Hände über dem Kopf zusammenschlagen möchten.

Darum macht euch hier auf die ein oder andere Merkwürdigkeit und seltsamen Code gefasst. Aber glaubt mir, das mache ich aus didaktischen Gründen, damit ihr verschiedene Möglichkeiten kennen lernt. Und darum arbeite ich hier auch zum ersten Mal in meinem Leben mit eval.

weiter zum nächsten Abschnitt