Auszug aus dem Buch Apps mit PhoneGap entwickeln

1.1.2 Die Skript-Referenzen

Der zentrale Aspekt bei der Verbindung der Webseite mit PhoneGap ist die Referenz auf die JavaScript-Bibliothek von PhoneGap. Grundsätzlich wird JavaScript bei modernen Webseiten und Web-Applikationen nur in Form von externen Dateien verwendet[4]. Wie üblich verwenden Sie den <script>-Tag mit dem src-Attribut zur Angabe des URLs dieser externen Datei.

Wenn Sie nun aber die HTML-Datei ansehen, die unter dem Visual Studio beim Anlegen eines PhoneGap-Projekts generierte wird, werden Sie erkennen, dass diese Referenz nicht im Header der HTML-Datei, sondern unmittelbar vor dem schließenden Tag des Bodies notiert wird. Das ist kein Zufall, sondern beugt einigen Fehlern vor, die manche Browser beim Aufbau des DOMs haben.

CHV_BOX_ID_02

icn002

Das DOM-Konzept

Im DOM-Konzept (Document Object Model) wird ein baumartig aufgebautes Dokument wie eine HTML-Seite als differenzierbare Struktur betrachtet, deren einzelne Bestandteile Programmen und Skripten dynamisch zugänglich sind. Dieser Ansatz ermöglicht etwa die individuelle Behandlung von Bestandteilen einer Webseite nach dem Laden in den Browser. Das DOM-Konzept veranlasst beispielsweise einen Browser eine HTML-Seite wie eine gewöhnliche Textdatei zu lesen und entsprechende Anweisungen auszuführen. Darüber hinaus wird der Browser jedoch beim Laden der Webseite alle ihm im Rahmen des Konzepts bekannten und einzeln identifizierbaren Elemente einer Webseite bezüglich ihres Typs, ihrer relevanten Eigenschaften und ihrer Position innerhalb der Webseite indizieren und als Objekte zugänglich machen.

Wenn Sie sich mit der Programmierung im World Wide Web auskennen wissen Sie, dass es beim Zugriff auf die Bestandteile einer Webseite per JavaScript oder einer anderen Skriptsprache über das DOM-Konzept zu Problemen kommen kann, wenn diese Zugriffe mit dem Laden der Webseite einher gehen. Beim Laden (Parsen) der Webseite verarbeiten verschiedene Browser die Webseite unterschiedlich und es kann beim Zugriff auf die Elemente der Webseite vor allen Dingen dann Schwierigkeiten geben, wenn man in einem Skript zu früh auf Elemente einer Webseite zugreifen will – also bevor der Browser den DOM korrekt aufgebaut hat.

Um diesem zu frühen Zugriff Herr zu werden, bieten moderne Web-Frameworks wie das Dojo Toolkit oder jQuery zuverlässige Verfahren. Nutzt man solche Frameworks nicht, muss man den Schutz des DOMs selbst in die Hand nehmen. Im Prinzip steht dazu der Eventhandler onload zur Verfügung, um eine Funktion, die auf den DOM einer Webseite zugreifen möchte, erst nach dem Laden der Webseite (was mit dem Fertigstellen des DOM identisch ist bzw. sein sollte) aufzurufen. Dieser Eventhandler ist jedoch in verschiedenen Browsern fehlerhaft implementiert.

Aus diesem Grund notiert man – wenn man eben ein Framework wie jQuery nicht verwendet – die Skript-Referenz am Ende der Webseite, wenn darin bereits beim Laden der Webseite Zugriffe auf DOM-Elemente erfolgen. Denn bis diese Skriptreferenz vom Browser erreicht wird, ist der Rest der Webseite bereits verarbeitet und damit der DOM fertig. Und das ist der Grund, warum das in der generierten Webseite vom Visual Studio oder auch unter Xcode so gemacht wird.

Nun sollte auffallen, dass in der generierten HTML-Datei noch eine weitere Referenz auf eine externe JavaScript-Datei zu finden ist. Diese ist dafür gedacht, dass Sie Ihren eigenen JavaScript-Code dort unterbringen. Und es ist kein Zufall, dass diese nach der Referenz auf die PhoneGap-Datei notiert wird. Denn Sie werden dort Deklarationen aus dieser PhoneGap-Datei ja verwenden wollen und die müssen vorher bereits verfügbar gemacht werden. Dennoch sollte man festhalten, dass es bei unseren PhoneGap-Apps ja meist darum geht, dass eine lokale HTML-Seite geladen wird und nicht der klassische Fall des Ladens einer Webseite über das Internet vorliegt. Zudem gibt es einen eigenen Eventhandler der beobachtet, ob eine App fertig geladen ist und man auf den DOM zugreifen kann.

CHV_BOX_ID_01

icn001

Aufteilung auf mehrere Skript-Dateien

Selbstverständlich können Sie auch Ihre eigenen Skripte auf mehrere Dateien aufteilen. Diese werden einfach der Reihe nach eingebunden. JavaScript arbeitet in einem gemeinsamen Namensraum. Das bedeutet, dass etwa Deklarationen aus der einen Datei auch in einer anderen Datei zur Verfügung stehen, wenn diese in einer HTML-Datei eingebunden sind. Allerdings müssen Sie auch hier beachten, dass Deklarationen in einer Datei immer vor der Verwendung in einer anderen Datei eingebunden gehören.

Die Kommentare wurden geschlossen