Webtechnologien - All in One

Eine praxisorientierte Einführung in moderne Webtechnologien

Jörg Barres

• Verlag: Books on Demand
• Jahr: 2015
• ISBN drucken: 9783735756756
• eBook-ISBN: 9783735748119
• Auflage: 3
• Thema: Informatik
• Thema: Informatik Allgemein

Mit diesem Buch möchte ich Ihnen die Möglichkeit geben, die Grundlagen moderner Webtechnologien im Selbststudium zu erlernen, zu verstehen und zu beherrschen.Entstanden ist das Buch als Lektüre zu meiner gleichnamigen Veranstaltung, und genau so funktioniert auch dieses Buch.Keine trockene Theorie, keine seitenlangen Auflistungen von Befehlen, Syntax oder Code. Stattdessen werde ich mit Ihnen ein konkretes Web-Projekt erarbeiten und Sie durch alle Entwicklungsschritte begleiten.Für Sie bedeutet das: Learning by doingDenn nur das, was Sie selber machen, lernen, verstehen und beherrschen Sie auch.

Teil III.

Die Fertigstellung

8. Komfort mit Javascript

Genau wie PHP ist auch Javascript eine vollständige objektorientierte Programmiersprache, mit Variablen, Schleifen, Kontrollstrukturen und Funktionen.

Entwickelt wurde Javascript 1995 von der Firma Netscape, um bei HTML-Seiten bessere Interaktionen mit dem Benutzer zu ermöglichen. Dazu kann Javascript über das Document Object Model (DOM) auf alle Elemente der Seite zugreifen. Das ermöglicht es beispielsweise, Elemente auf der Seite zur Laufzeit auszulesen, zu erzeugen oder zu verändern. Insbesondere in der Kombination mit CSS werden dadurch vielfältige Möglichkeiten für bessere Benutzeroberflächen ermöglicht.

8.1. Die Programmiersprache Javascript

Javascript ist genau wie PHP eine Interpretersprache, die Befehle werden also zur Laufzeit interpretiert und ausgeführt. Der große Unterschied zu PHP ist jedoch, dass die Javascript-Programme im Browser ausgeführt werden, also nicht wie bei PHP auf dem Webserver laufen. Aus diesem Grund ist auch die Unterstützung von Javascript je nach Browser unterschiedlich gut umgesetzt, insbesondere die Möglichkeiten von HTML 5 werden teilweise noch nicht durchgängig von allen Browsern unterstützt.

Ein wichtiger Aspekt von Javascript ist die Sicherheit. So ist es über Javascript nicht möglich, auf den ausführenden Computer zuzugreifen. Da Javascript in einer sogenannten Sandbox¹⁰ läuft, besteht keine Möglichkeit, dass eventuell eingeschleuster Schadcode Zugriff auf das Dateisystem oder angeschlossene Hardware-Komponenten erhält. Eine Ausnahme stellen hierbei Multimedia-Geräte dar, so ist es beispielsweise möglich, auf angeschlossene Webcams, Mikrophone oder Lautsprecher zuzugreifen¹¹.

Auch der Javascript-Code wird direkt auf der HTML-Seite eingebunden, wir haben also neben HTML- und PHP-Code jetzt auch noch Javascript-Code auf unserer HTML-Seite.

8.1.1. Einbinden von Javascript-Code

Es gibt vielfältige Möglichkeiten, Javascript-Code auf einer Seite zu integrieren. Kurzer und seitenspezifischer Code kann dabei direkt auf der Seite geschrieben werden, längere Codeblöcke oder Code, den man auf mehreren Seiten benötigt, sollte über eine ausgelagerte Datei eingebunden werden.

Der Javascript-Code wird vom Browser ausgeführt, sobald er bei der Interpretation der Seite auf den Code stößt. Steht der Code jetzt weit oben auf der Seite oder im head-Bereich, so kann es passieren, dass Elemente auf der Seite, die der Code bearbeiten soll, noch gar nicht geladen sind. Aus diesem Grund stellt man Javascript-Code sehr oft an das Ende der Seite, oder sorgt über die Ereignisverwaltung dafür, dass der Code erst ausgeführt wird, wenn die Seite vollständig geladen wurde.

Um Javascript-Code direkt auf der Seite einzubinden, ist diese Syntax nötig:

Um eine ausgelagerte Javascript-Datei einzubinden, verwendet man diese Syntax:

8.1.2. Die Syntax von Javascript

Die Syntax von Javascript unterscheidet sich nicht sehr von PHP, auch hier lautet die wichtigste Regel:

Jede Javascript-Anweisung endet mit dem Strichpunkt ;

Abb. 8.1.: Hello World in Javascript

Sehen wir uns jetzt das „Hello World“-Programm einmal in Javascript an. Da wir den Zugriff auf HTML-tags noch nicht besprochen haben, beschränken wir uns in der Ausgabe erst einmal auf zwei wichtige Ausgabemöglichkeiten in Javascript, die Ausgabe auf die Konsole¹² und in ein Meldungsfenster.

Der Vollständigkeit halber zeigt Abbildung 8.2 hier den kompletten Code der Seite, also inklusive der HTML-tags. Der eigentliche Javascript-Code beginnt erst in Zeile sieben, dort gebe ich mit der Anweisung console.log den Text ’Hello world’ auf die Konsole aus. Und mit dem alert-Befebl in Zeile acht erzeuge ich das Meldungsfenster.

Abb. 8.2.: Hello world in Javascript

Konstanten, Variablen und Arrays

Natürlich gibt es auch in Javascript Konstanten, Variablen und Arrays. Genau wie PHP besteht Javascript nicht darauf, dass diese vor der Verwendung deklariert werden müssen, was natürlich sehr praktisch und bequem, aber eben auch etwas „unordentlich“ ist. Und genau wie bei PHP werden die Datentypen dynamisch typisiert, also erst bei der Wertzuweisung festgelegt.

• Konstanten werden einmal definiert und bekommen dabei einen Wert zugewiesen. Dieser Wert verändert sich über die gesamte Laufzeit des Programms nicht. Die formale Syntax lautet:
  
• Variablen werden über das Schlüsselwort var deklariert. Dabei kann auch direkt eine erste Wertzuweisung erfolgen:
  
• Arrays können wie in PHP eindimensional, mehrdimensional oder assoziativ aufgebaut sein. Und auch hier beginnt der Index immer bei Null. Bei der Deklaration können diese wahlweise in der Größe beschränkt oder bereits mit Werten belegt werden. Für eindimensionale Arrays sieht die Syntax so aus:
  

Abfragen

Zu den Abfragen müsste ich jetzt an sich gar nichts schreiben, die sind in Javascript genau wie in PHP. Die formale Syntax lautet:

Auch die Operatoren für die Bedingung funktionieren genau gleich, sehen Sie sich dazu noch einmal Tabelle 3.1 an.

Schleifen

Wie in jeder Programmiersprache, gibt es die „üblichen“ Schleifen auch in Javascript. Die zählergesteuerte for-Schleife hat dabei diese Syntax:

Bei der kopfgesteuerten Schleife finden wir mit dem while-Befehl diese Syntax:

Bleibt noch die fußgesteuerte Schleife mit dieser Syntax:

Funktionen

Auch bei den Funktionen kommt auf Sie nichts Neues mehr zu. Sie können Funktionen eine beliebige Menge an Parametern übergeben, lokale Variablen deklarieren und maximal einen Ergebniswert an das aufrufende Programm zurückgeben. Die allgemeine Syntax lautet:

Innerhalb der Funktion haben Sie Zugriff auf alle global definierten Variablen, ohne diese wie bei PHP erst deklarieren zu müssen. Und mit dem Schlüsselwort return übergeben Sie den Ergebniswert an das aufrufende Programm.

8.2. Das Document Object Modell DOM

Einer der großen Vorteile von Javascript ist der Zugriff auf alle Elemente der Webseite. Diese Technik basiert auf dem Document Object Model, oder auch kurz DOM. Dahinter ...

Inhaltsverzeichnis

• Inhaltsverzeichnis
• Vorwort
• Teil I. Das Fundament
• Teil II. Der Rohbau
• Teil III. Die Fertigstellung
• Teil IV. Der Anhang
• Index
• Impressum