====== Document Object Model ====== ===== Was versteht man unter dem Document Object Model ===== * [[wpde>Document_Object_Model|Was ist DOM ?]] * [[http://openbook.galileocomputing.de/javascript_ajax/16_dom_001.htm#Xxx999393|Der DOM-Baum]] **Beispiel: Erstelle folgende Testseite und analysiere diese mit dem [[https://addons.mozilla.org/de/firefox/addon/dom-inspector-6622/|DOM-Inspector]] von Mozilla.** Testseite

Meine Testseite

Das ist ein kleine Testseite zur Illustrations des DOM-Modells.

Hier ein Bild unseres Zentralgestirns:

\\ \\ ===== Ein- und Ausgabe auf einer Webseite durch Zugriff mittels DOM-Methoden ===== Für Eingaben auf einer Website kann man z.B. den -Tag verwenden. Für Ausgaben den (DOM-)Befehl document.getElementById(„Ausgabefeld“).innerHTML = ausgabewert. Als Ausgabefeld eignet sich dann jedes beliebige HTML-Element (dieses muss nur eine ID bekommen, z.B. ). ==== Beispiel 1: Eingabe über Input-Feld ==== Berechne den Funktionswert bei der Exponentialfunktion.\\ Eingabe: Argument x Ein-Ausgabe

Berechung von Funktionswerten der Exponentialfunktion

Bitte geben Sie das Argument ein: ==== Beispiel 2: Eingabe über Input-Feld und Radiobuttons ==== Berechne das Gewicht auf einem Himmelskörper.\\ Eingabe: Masse, Himmelskörper (über Radiobutton) Ein-Ausgabe 2

Berechung des Gewichts auf verschiedenen Himmelskörpern

**Beispiel Ein- und Ausgabe in HTML-Seite** Berechne die Quadratwurzel einer Zahl.\\ Eingabe: Zahl JavaScript-Funktion2

Funktionsberechnung

**Beispiel: Zwei Ausgabefelder** Berechne Umfang und Radius eines Kreises\\ Eingabe: Radius JavaScript-Funktion3

Funktionsberechnung

Umfang:
Fläche:

**Zwei Eingabefelder** Berechne das Volumen eines Drehzylinders\\ Eingabe: Radius, Höhe Berechnung wird bei Button-Click ausgeführt. JavaScript-Funktion4

Funktionsberechnung

Berechnung wird bei Änderung in einem der beiden Eingabefelder ausgeführt. JavaScript-Funktion4a

Funktionsberechnung

Volumen:

\\ Berechnung des Idealgewichts JavaScript-Idealgewicht

Idealgewichtsberechnung

\\ Ein- und Ausschalten bzw. Bewegen eines DIV-Containers DIV-Container manipulieren 1

Hier klicken um die Ein-/Ausgabefläche einzublenden/auszublenden

Hier können Text, Bilder, Videos, Ein- und Ausgabeelemente untergebracht werden, kurzum: beliebiger HTML-Inhalt.