HTML5 in der mobilen Webentwickung - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 66

Ein besonders wichtiges Objekt ist window , also das eigentliche Browserfenster. Es hält
unter anderem die Methode .alert() bereit, die ein Dialogfenster mit dem in Klam-
mern übergebenen Text enthält (Abbildung 2.24).
Eigenschaften und Variablen
Jedes Objekt hat neben Methoden aber auch noch Eigenschaften, die Sie mit Java-
Script entweder auslesen oder verändern können. Das window -Objekt beispielsweise
hat die Eigenschaften innerWidth und innerHeight , also die Breite und Höhe der
Anzeigefläche des Browserfensters. Eigenschaften werden ebenfalls per Punkt-Nota-
tion ausgelesen:
<script>
var breite = window.innerWidth;
window.alert(breite);
</script>
Sie deklarieren eine Variable mit einem vorangestellten var . In ihnen können Sie
Daten und Werte speichern, die Sie zu einem späteren Zeitpunkt im Code noch ein-
mal verwenden möchten. Die Werte werden per = zugewiesen, dabei nimmt der
Bezeichner auf der linken Seite den Wert auf der rechten Seite an. In unserem Beispiel
legen Sie eine Variable mit dem Namen breite an und weisen ihr den Wert von win-
dow.innerWidth zu, also die Breite des Browserfensters. Anschließend geben Sie die-
sen Wert in einem Dialogfenster aus.
Denkbar ist aber auch Folgendes:
<script>
window.innerWidth = 300;
</script>
Eigenschaften von Objekten lassen sich auf dieselbe Weise anderen Werte zuweisen.
In diesem Beispiel verändern Sie die innere Breite des Browserfensters auf 300 Pixel.
Der Dokumentenbaum
Nachdem Sie nun die grundlegende Syntax von JavaScript kennengelernt haben,
widmen Sie sich dem eigentlichen Einsatzzweck von JavaScript bei HTML5-WebApps:
der Manipulation des DOM-Baums . DOM steht hier für Document Object Model . Kurz
gesagt, bedeutet dies, dass JavaScript jedes HTML-Element als ein Objekt betrachtet,
dessen Inhalte und Attribute verändert, kopiert oder gelöscht werden können.
Nehmen Sie den HTML-Code Ihrer Sharky-App, und fügen Sie am Ende der Überschrift
einen Button an (Abbildung 2.25). Dieser soll später den darunterstehenden Textpa-
ragrafen ein- und ausblenden. Aber immer mit der Ruhe, eins nach dem anderen.