JavaScript und Ajax E-Book

Jan Winkler

• Herausgeber: Franzis Verlag
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Deutsch
• Veröffentlichungsjahr: 2012

Beschreibung

Fast alle Webseiten haben eines gemeinsam: Sie bestehen aus JavaScript-, HTML- und CSS-Code. Während HTML und CSS stagnieren, hat sich Java- Script mit Ajax zur dominierenden Web-2.0-Technik weiterentwickelt. Dieses Buch vermittelt anhand konkreter Programmierbeispiele die Grundlagen und einige fortgeschrittene Techniken von JavaScript und Ajax.

Leseprobe

Inhaltsübersicht

1  Einführung

1.1  Gliederung dieses Buches

1.2  Was muss ich können, um dieses Buch zu verstehen?

1.3  Welche Werkzeuge benötige ich?

1.4  Nützliche Editoren und Programme

1.5  Kostenlose Entwicklungsumgebung unter Windows einrichten

2  JavaScript-Grundlagen

2.1  Einführung

2.2  Erste Schritte

2.3  Variablen

2.4  Operatoren

2.5  Funktionen

2.6  Bedingungen und Verzweigungen

2.7  Schleifen

2.8  Ereignisse

2.9  Objekte

2.10  Verarbeitung

3  DHTML, der kleine Helfer

3.1  Was ist DHTML?

3.2  DHTML-Grundlagen

3.3  Mit Objekten arbeiten

3.4  Mit Ereignissen richtig umgehen

4  Interaktion mit Ajax

4.1  Was ist Ajax?

4.2  Daten abrufen

4.3  XML & JavaScript

4.4  Andere Formen von Ajax

4.5  Einfacher arbeiten mit Ajax-Frameworks

5  JavaScript, DHTML und Ajax in der Praxis

5.1  JavaScript und der Browser: Die wichtigsten Objekte

5.2  Datum & Zeit

5.3  Arrays

5.4  Formulare kontrollieren

5.5  Fenster & Frames

5.6  Mit Cookies arbeiten

5.7  Drop-Down-Menü mit DHTML

5.8  Drag&Drop-Warenkorb mit DHTML

5.9  Suchvorschläge mit Ajax

5.10  Formularverarbeitung mit Ajax

5.11  Chat mit Ajax

6  Objektreferenz

6.1  Einführende Hinweise

6.2  Top-Level-Eigenschaften und -Funktionen

6.3  Kollektionen

6.4  all

6.5  anchors

6.6  applets

6.7  areas

6.8  arguments

6.9  Array

6.10  attribute

6.11  attributes

6.12  behaviorUrns

6.13  bookmarks

6.14  Boolean

6.15  boundElements

6.16  cells

6.17  childNodes

6.18  children

6.19  clientInformation

6.20  clip

6.21  clipboardData

6.22  controlRange

6.23  crypto

6.24  currentStyle

6.25  dataTransfer

6.26  Date

6.27  document

6.28  elements

6.29  embeds

6.30  Error

6.31  Event

6.32  event

6.33  external

6.34  filters

6.35  forms

6.36  Formular-Elemente

6.37  frames-Objekt

6.38  Function

6.39  history

6.40  HTML-Elemente

6.41  images

6.42  implementation

6.43  imports

6.44  layers

6.45  links

6.46  location

6.47  Math

6.48  mimeTypes

6.49  namespace

6.50  namespaces

6.51  navigator

6.52  Number

6.53  Object

6.54  page

6.55  pages

6.56  plugins

6.57  popup

6.58  RegExp

6.59  rows

6.60  rule

6.61  rules

6.62  runtimeStyle

6.63  screen

6.64  scripts

6.65  selection

6.66  String

6.67  style

6.68  Style-Eigenschaften

6.69  styleSheets

6.70  tBodies

6.71  TextNode

6.72  TextRange (Objekt)

6.73  TextRange (Kollektion)

6.74  TextRectangle (Objekt)

6.75  TextRectangle (Kollektion)

6.76  userProfile

6.77  window

6.78  XMLHttpRequest

A  Anhang

A.1  Events

A.2  Reservierte Wörter

Stichwortverzeichnis

1  Einführung

Was ist JavaScript? Was steckt eigentlich dahinter? Wie wendet man es an? Was versteht man unter Ajax, und wozu ist es überhaupt gut? Genau diesen Fragen werden wir in diesem Buch nachgehen. Am Ende werden Sie die Grundzüge von JavaScript, DHTML und Ajax beherrschen, die gängigen Frameworks kennen und außerdem reichlich Praxisluft geschnuppert haben, sodass Sie in der Lage sein werden, eigene JavaScript- oder Ajax-Anwendungen zu entwickeln.

1.1  Gliederung dieses Buches

Der Aufbau ist so gestaltet, dass die einzelnen Kapitel mehr oder minder aufeinander aufbauen beziehungsweise die in einem Kapitel erworbenen Kenntnisse für das Verständnis der darauf folgenden Kapitel benötigt werden. Los geht es mit dem Grundlagenkapitel zum Thema JavaScript – hier erlernen Sie, was JavaScript eigentlich ist und wie Sie eigene Programme in JavaScript schreiben können. Als Nächstes folgt eine Einführung in das Thema DHTML (Dynamic HTML), mit dessen Hilfe Sie mehr Abwechslung in eine Website bringen können. Anschließend erlernen Sie, was es mit Ajax (Asynchronous JavaScript and XML) auf sich hat und wie Sie es für Ihre Zwecke einsetzen können. Den Abschluss bilden dann ein Kapitel mit zahlreichen Praxisbeispielen und hilfreichen Tricks sowie eine umfassende Objektreferenz, mit der Sie alle wichtigen JavaScript-Objekte nachschlagen können.

1.2  Was muss ich können, um dieses Buch zu verstehen?

Grundsätzliche Voraussetzung, um den Inhalt dieses Buches verstehen und anschließend umsetzen zu können, sind solide Grundkenntnisse in den Bereichen Internet (Funktionsweise, Protokolle usw.) sowie gefestigte Kenntnisse in Sachen HTML. Letzteres ist für die Anwendung von JavaScript unerlässlich. Für die Arbeit mit DHTML sollten Sie darüber hinaus bereits mit CSS (Cascading Style Sheets) gearbeitet haben und – für das Verständnis von Ajax – über ein Basiswissen in XML (Extensible Markup Language) verfügen. Da Ajax in der Regel im Verbund mit einer auf dem Webserver operierenden Sprache agiert, sind ebenfalls entsprechende Grundkenntnisse in zumindest einer serverseitigen Programmiersprache wie PHP, ASP/ASP.NET oder Java (Java Server Pages, JSP) von Vorteil. Insbesondere bei größeren Anwendungen kommt zudem MySQL beziehungsweise Microsofts SQL-Server als Datenbanksystem hinzu, für das ebenfalls entsprechende Kenntnisse vorliegen sollten.

Lassen Sie sich von der Fülle der eben aufgezählten Programmiersprachen und Technologien jedoch nicht verunsichern: In der Regel wird je nach Anwendung und Zielsetzung nur ein Bruchteil davon benötigt. Um den Einstieg zu erleichtern, werden wir zudem an den passenden Stellen kurze Erläuterungen und Exkurse in die jeweiligen Bereiche bieten.

1.3  Welche Werkzeuge benötige ich?

JavaScript und damit alle davon abhängigen Technologien begnügen sich mit recht wenig softwaretechnischem Beiwerk. Für die Programmierung von JavaScript-Anwendungen sind daher im simpelsten Fall ein Texteditor (vgl. Windows Notepad) zum Entwickeln sowie ein gängiger Browser zum Testen notwendig. Da JavaScript- und Ajax-Anwendungen allerdings auch schon mal ein paar Hundert bis Tausend Zeilen an Code umfassen können, empfiehlt es sich hier, auf einen entsprechend ausgerüsteten Editor zu setzen. Die meisten der verbreiteten Editoren unterstützen das Editieren von JavaScript-Code mit zahlreichen nützlichen Features wie Syntaxhervorhebung, Auto-Vervollständigung und weiteren Funktionen, die das Programmieren deutlich vereinfachen und damit effizienter machen können.

Ajax testen

Da Ajax allein auf dem Client-Rechner, das heißt auf dem Browser, recht wenig Sinn ergeben würde, benötigt man für diese Funktionen zusätzlich eine Web-Umgebung, auf der sich Techniken wie PHP, ASP oder JSP testen lassen. Im einfachsten Fall lädt man die Dateien jeweils auf den eigenen Webspace hoch und testet sie dann dort. Wem dies zu umständlich beziehungsweise zeitaufwendig ist, der kann sich mit einem sogenannten XAMPP-Installationspaket[1] behelfen. Dabei handelt es sich um ein Programmpaket, welches unter anderem die Software Apache (ein Webserver), MySQL (ein Datenbanksystem) und PHP (eine Programmiersprache für serverseitige Programmierung) beinhaltet und diese Komponenten in der Regel schon komplett vorgefertigt und vorkonfiguriert mit sich bringt. Einmal installiert, hat man dann auf dem heimischen PC einen eigenen Webserver samt Datenbank und PHP laufen – ganz ähnlich wie bei den meisten Webhostern – und kann so Ajax-Skripte in Verbindung mit PHP direkt von zu Hause aus testen.

1.4  Nützliche Editoren und Programme

Auf dem Markt und im Internet existieren außerdem zahlreiche Tools und Programme, die Ihnen die Arbeit am Code deutlich erleichtern können. Einige davon möchten wir Ihnen hier kurz vorstellen, um Ihnen die Auswahl zu erleichtern.

Der Alleskönner: Adobe Dreamweaver

Wer es gern übersichtlich hat und sich beim Design seiner Website direkt anschauen möchte, was er programmiert, ist mit der Lösung von Adobe gut beraten. Insbesondere das Erstellen des Designs einer Seite fällt mit diesem Programm sehr leicht. Zudem wartet es mit Editorfunktionen auf, die einen direkten Eingriff in den Webseiten-Code und damit die Möglichkeit zur Einbindung von JavaScript bieten. Für den Einsteiger ist dieses Programm sehr zu empfehlen – einige Profis setzen jedoch auf reine Texteditoren. Das Programm ist ab 570 Euro erhältlich.

Bild 1.1  Die Oberfläche von Dreamweaver lässt sowohl die Code-Bearbeitung als auch die Seitengestaltung mit WYSIWYG-Editor und Vorschaufunktion zu.

Alleskönner Nr. 2: Microsoft Expression Web Designer

Ebenfalls sehr für Anfänger zu empfehlen sind die Programme aus dem Hause Microsoft, namentlich der Expression Web Designer beziehungsweise das ältere Frontpage. Ähnlich wie Dreamweaver bietet es einfache Funktionen zum Erstellen der Oberflächen, aber zugleich auch die Möglichkeit, den Code direkt zu bearbeiten. Die aktuelle Version von Microsoft Expression Web schlägt mit rund 299 Euro zu Buche.

Der Allrounder: Eclipse mit Eclipse Web Tools Platform

Eclipse ist ursprünglich aus einer Entwicklungsumgebung für die Programmiersprache Java hervorgegangen, mit einigen ergänzenden Tools und Plugins nun aber auch sehr gut für HTML und JavaScript geeignet. Das Programm ist ein reiner Texteditor – das heißt, eine grafische Bearbeitung wie bei Dreamweaver oder Expression Web ist nicht möglich. Dafür bietet die Umgebung umfangreiche Funktionen, die das Programmieren am Code deutlich vereinfachen und beschleunigen können. Da es sich um eine OpenSource-Lösung handelt, kann es kostenlos unter www.eclipse.org heruntergeladen werden. Fortgeschrittene Programmierer und Profis setzen mehrheitlich auf derartige Entwicklungsumgebungen.

Die Alternativen: UltraEdit, SuperHTML, Phase 5, Aptana …

Neben den drei vorgenannten Programmen gibt es eine ganze Reihe kostenloser und kostenpflichtiger Editoren im Internet, die im Wesentlichen die gleichen oder zumindest ähnliche Funktionen aufweisen. Im Besonderen zu nennen wären hier UltraEdit (49,90 Euro, www.ultraedit.at), SuperHTML (79,95 Euro, www.superhtml.de), Phase 5 (kostenlos, www.qhaut.de) sowie Aptana Studio (kostenlos, www.aptana.com/studio).

Bild 1.2  Im Gegensatz zu den grafisch orientierten Tools Expression Web und Dreamweaver wirkt der HTML-Editor Phase 5 relativ monoton.

1.5  Kostenlose Entwicklungsumgebung unter Windows einrichten

Um gleich richtig mit der JavaScript-Programmierung loslegen zu können, benötigt man, wie beschrieben, einen ordentlichen Editor oder noch besser eine Entwicklungsumgebung. In diesem Zusammenhang ist Eclipse sehr interessant, da diese Lösung vielseitig einsetzbar ist und zudem kostenlos als OpenSource verfügbar ist. Für die Web-Entwicklung interessant ist hier die sogenannte WTP (ausgeschrieben: Web Tools Platform), welche als eine Art Erweiterung oder Zusatz-Tool zum gewöhnlichen Eclipse-Editor existiert.

Vorbereitung

Um Eclipse verwenden zu können, brauchen Sie es natürlich zunächst auf Ihrem PC. Gehen Sie also als Erstes auf www.eclipse.org und laden Sie dort das Programmpaket herunter. Innerhalb des Eclipse-Projekts gibt es eine ganze Reihe von Software-Komponenten, die sich für alles Mögliche eignen, aber nicht zwangsläufig auch für die Web-Entwicklung benötigt werden. Sie können also die Programmpakete etwa zur Java-Entwicklung (nicht zu verwechseln mit JavaScript!) oder anderen Programmiersprachen ignorieren. Benötigt wird lediglich das »WTP All-in-One«-Paket, welches, wie der Name erahnen lässt, schon alle wichtigen Web-Tools mit sich bringt. In der aktuellen Version ist das Paket rund 200 MB groß und kann als *.zip-Datei für Windows heruntergeladen werden. Haben Sie die Datei geladen, entpacken Sie sie am besten in das Eclipse-Verzeichnis (etwa unter Windows XP C:\Programme\Eclipse bzw. unter Windows Vista nach C:\Program Files\Eclipse) – es ist aber auch jeder andere Ort möglich. Eine Installation erfolgt nicht – das Programm ist also prinzipiell sofort nach dem Download startklar.

Java installieren

Wichtiger Hinweis: Dieser Abschnitt bezieht sich lediglich auf die Entwicklungsumgebung Eclipse und hat mit der Programmierung von JavaScript an sich nichts zu tun. Wenn Sie eine andere Software als Eclipse zur JavaScript-Programmierung einsetzen möchten, muss die hier beschriebene Java-Umgebung nicht zwangsläufig installiert sein!

Da Eclipse eine Java-Anwendung ist, ist es notwendig, dass auf dem Rechner eine Java-Umgebung installiert und verfügbar ist. Diese Software-Komponente ermöglicht die Ausführung von Java-Code auf einem PC und ist damit oberste Voraussetzung für die Funktionstüchtigkeit von Eclipse. Ob das Java-Laufzeitsystem (auch Runtime Engine genannt) installiert ist oder nicht, merken Sie ganz einfach daran, ob Eclipse startet: Öffnen Sie das Verzeichnis, in das Sie Eclipse entpackt haben (auf Windows-PCs z. B. C:\Programme\Eclipse), und starten Sie dort die Datei eclipse.exe. Erscheint eine Fehlermeldung, muss Java noch nachinstalliert werden – in allen anderen Fällen läuft Eclipse bereits (meist erscheint zu Beginn ein Wizard zur Einstellungshilfe). Ist die Runtime Engine noch nicht installiert, gehen Sie wie folgt vor:

Begeben Sie sich auf

http://java.sun.com

.

Dort finden Sie unter dem Punkt »Downloads« mehrere Software-Komponenten namens Java EE SDK, Java ME, Java Development Kit (JDK) usw.

Benötigt und damit heruntergeladen werden sollte das Java EE SDK (ausgeschrieben: Java Enterprise Edition Software Development Kit). Dieses ist zwar umfangreicher als das Standard-Entwicklungspaket, enthält dafür aber deutlich mehr Code-Bibliotheken, die man eventuell später noch gebrauchen kann.

Laden Sie das SDK herunter, und führen Sie das Setup aus. Nach ein paar Fragen und Angaben zum Speicherort und den zu installierenden Komponenten ist die Installation abgeschlossen und muss gegebenenfalls noch mit einem Neustart des Rechners vollendet werden.

Ist die Installation beendet, und wurde der Rechner – sofern notwendig – neu gestartet, lässt sich Eclipse verwenden. Weitere Einstellungen sind nicht notwendig.

Der erste Start

Um Eclipse zu starten, begeben Sie sich in das Verzeichnis, in das Sie die Software entpackt haben (z. B. C:\Programme\Eclipse) und starten die Datei eclipse.exe. Für die weitere Verwendung ist immer diese Datei zu starten – es ist daher empfehlenswert, sich eine Verknüpfung dazu auf dem Desktop anzulegen (auf Windows-Rechnern muss man dazu einfach die Datei mit der rechten Maustaste auf den Desktop ziehen, loslassen und den Menüpunkt »Verknüpfung hier erstellen« wählen).

Wird Eclipse zum ersten Mal gestartet, öffnet sich zunächst ein Wizard (Einstellungshilfe) mit der Frage nach dem Speicherort für die sogenannten Workspaces. Unter Workspaces versteht Eclipse im weitesten Sinne so etwas wie ein Projekt. In der Maske ist bereits ein Speicherort vorgegeben, der ruhig beibehalten werden kann:

Bild 1.3  Auswahl des Speicherorts für Workspaces unter Windows Vista

Aktivieren Sie hierbei am besten auch gleich die Option »Use this as the default and do not ask again«, um nicht bei jedem Start danach gefragt zu werden.

Anschließend startet der Willkommensbildschirm von Eclipse:

Bild 1.4  Der Eclipse-Willkommensbildschirm

Hier stehen einige Buttons zu den verschiedenen Hilfebereichen von Eclipse zur Verfügung, etwa eine Einführung in die Software (sehr gut gemacht, leider aber nur auf Englisch) oder Beispielprogramme. Außerdem findet sich dort auch der Button »Workbench«, der Sie zur eigentlichen Entwicklungsumgebung führt.

Der Aufbau der Entwicklungsumgebung

Eclipse ist sehr strukturiert aufgebaut, und die Oberfläche ist übersichtlich und sortiert:

Bild 1.5  Die Arbeitsoberfläche von Eclipse

Der obere Bereich des Fensters enthält die wichtigsten Icons, die Sie auch von vielen anderen Programmen her gewöhnt sind: Neue Datei, Speichern, Öffnen usw. Hier finden sich auch die Icons zum Starten der Anwendung (»Play«-Pfeil) sowie die Vorschau im Browser und weitere oft verwendete Aufgaben.

Der Hauptbereich ist in vier Felder aufgeteilt: die Paketübersicht und die »History« (der kürzlich geöffneten Dokumente) links, das Code-Fenster in der Mitte, rechts die sogenannte »Outline« (sie zeigt Ihnen die Struktur eines Dokuments) und unten die Registerkarten zu Eigenschaften, auftretenden Problemen und Ähnliches. Alle Fenster, Werkzeugleisten usw. lassen sich zudem individuell konfigurieren und verändern, sodass sich jeder Entwickler die Umgebung genau so zusammenstellen kann, wie es ihm am einfachsten und produktivsten erscheint.

Ein HTML- oder JavaScript-Projekt anlegen

Gearbeitet wird bei Eclipse ausschließlich in Projekten, was zugleich ein Vor- und auch ein Nachteil ist: Um HTML-Dateien erstellen zu können, müssen Sie zunächst ein neues Projekt anlegen oder ein bestehendes öffnen.

Um ein neues Projekt anzulegen, wählen Sie in der Werkzeugleiste oben links den ersten Button (»New«) oder im Hauptmenü den Eintrag »File > New > Project«. Es öffnet sich der Wizard für neue Dateien und Projekte:

Bild 1.6  Der »New«-Wizard hilft bei der Auswahl der neuen Datei oder des Projekts.

Hier zeigt sich schon gleich die Vielseitigkeit von Eclipse: Der Wizard bietet rund 15 Kategorien mit insgesamt mehr als 60 verschiedenen Datei- und Projekttypen an. Für uns als Web-Entwickler ist hier natürlich die Kategorie »Web« von besonderem Interesse, in der es u. a. folgende Einträge gibt:

»Dynamic Web Project« – erstellt ein Projekt für JSP (Java Server Pages, vergleichbar mit ASP oder PHP)

»Static Web Project« – erstellt ein normales Web-Projekt ohne JSP-Unterstützung

»CSS« – erzeugt eine CSS-Datei und speichert sie im aktuell geöffneten Projekt

»HTML« – erstellt eine HTML-Datei und speichert sie im aktuell geöffneten Projekt

»JavaScript« – erstellt eine JavaScript-Datei und speichert sie im aktuell geöffneten Projekt

»JSP« – erstellt eine JSP-Datei

»Servlet« – erstellt ein Java-Servlet (eine Java-Datei auf dem Server)

Für uns hier interessant ist zunächst das »Static Web Project« als Grundlage für unsere Dateien. Um später mit JavaScript arbeiten zu können, legen Sie nun also ein neues Projekt an. Wählen Sie dazu den Eintrag in der Liste aus, und klicken Sie auf »Next«. Anschließend geben Sie einen Projektnamen ein und wählen das Arbeitsverzeichnis aus. Mit Klick auf »Finish« wird das Projekt angelegt und ist innerhalb der Entwicklungsumgebung im Hauptfenster links im »Project Explorer« sichtbar. Mit dem Projekt angelegt wurde auch gleich ein Unterverzeichnis »WebContent«, in das die HTML-, CSS- und JavaScript-Dateien hineingehören. Um eine dieser Dateien zu erstellen, klicken Sie ebenso wie beim Erstellen des Projekts wieder auf »New« beziehungsweise den entsprechenden Eintrag im Hauptmenü, wählen im Wizard den Dateityp aus und geben anschließend den Dateinamen und Speicherort sowie gegebenenfalls weitere Eigenschaften an.

Mit HTML, CSS und JavaScript arbeiten

Um den Umgang mit HTML, CSS und JavaScript zu vereinfachen, besitzt Eclipse eine ganze Reihe von Funktionen und kleinen Hilfestellungen.

Nützliche HTML-Hilfen

Bei der Arbeit mit HTML-Dokumenten erweist sich die Code-Vervollständigung als sehr hilfreich. Geben Sie innerhalb eines HTML-Dokuments die öffnende Klammer ein (<), öffnet sich automatisch eine Liste der verfügbaren Elemente: Wurde die Klammer beispielsweise innerhalb von <table>…</table> geöffnet, zeigt Eclipse automatisch <tr>, <td> und weitere mögliche Elemente an:

Bild 1.7  Die Auto-Vervollständigung von Eclipse hilft bei der Auswahl der möglichen Elemente.

Außerdem sehr hilfreich: Setzen Sie den Cursor innerhalb eines Tags (<...>), dann erscheinen im unteren Fensterteil in der Registerkarte »Properties« automatisch die für dieses Element verfügbaren Attribute und können dort direkt bearbeitet werden:

Bild 1.8  Die verfügbaren Attribute eines Elements werden stets unten angezeigt.

Hinweis: Sollte die Registerkarte »Properties« nicht angezeigt werden, können Sie sie jederzeit im Hauptmenü unter »Window > Show View > Properties« aktivieren.

Nützliche CSS-Hilfen

Ebenso wie bei HTML-Dateien gibt es auch zahlreiche Funktionen, die Ihnen bei CSS-Dateien aushelfen können. Ähnlich wie bei HTML-Elementen werden bei CSS-Definitionen die verfügbaren CSS-Eigenschaften angezeigt und können direkt im Editor angepasst werden:

Bild 1.9  CSS-Eigenschaften für diese Definition können direkt unten innerhalb der Tabelle ausgefüllt werden.

Nützliche Hilfen für JavaScript

Zu guter Letzt unterstützt Eclipse natürlich auch zahlreiche Funktionen, die Ihnen die Arbeit an JavaScript deutlich erleichtern können. Hierzu gehören etwa diverse Highlight-Funktionen (Beispiel: Steht der Cursor hinter einer schließenden Klammer, wird die dazugehörige öffnende Klammer hervorgehoben) oder eine Auto-Vervollständigung für Code-Objekte. Drückt etwa der Benutzer beim Erstellen oder Bearbeiten einer HTML-Datei auf die Taste mit der sich öffnenden spitzen Klammer (<), dann wird ein kleines Popup-Fenster angezeigt, das die passenden Elemente enthält. Ebenso ist es im Fall von JavaScript: Bei Eingabe eines Code-Objekts (etwa document.) werden nach dem Punkt die verfügbaren (Unter-)Objekte angezeigt (was Objekte sind, zeigen wir Ihnen später).

Bild 1.10  Eclipse erkennt automatisch das Objekt »document.« und zeigt die dazu verfügbaren Unterobjekte an.

[1]

XAMPP ist für zahlreiche Betriebssysteme, darunter Windows, Linux und Mac OS X, unter der Adresse http://www.apachefriends.org/de/xampp.htmlkostenlos zum Download erhältlich.

2  JavaScript-Grundlagen

JavaScript ist eines der mächtigsten Werkzeuge für jeden Web-Entwickler und kann mit wenigen Handgriffen und einfachem Code für neues Leben in nahezu jeder Website sorgen. Darüber hinaus bildet es die Basis für alle Techniken, die im Folgenden beschrieben werden, und ist daher elementarer Bestandteil einer jeden DHTML- oder Ajax-Anwendung. In diesem Kapitel wollen wir Ihnen einen umfassenden Einblick in die JavaScript-Programmierung bieten und Ihnen die Werkzeuge an die Hand geben, die Sie für spätere Entwicklungsaufgaben benötigen.

2.1  Einführung

Was ist JavaScript eigentlich? Grob gesagt, ist JavaScript eine Programmiersprache, mit deren Hilfe zum Beispiel innerhalb des Browsers bestimmte Aktionen durchgeführt werden können. Zu diesen Aktionen gehören etwa das Auswerten von Formularen, das Auslesen und Schreiben von Cookies oder einfach das Öffnen eines neuen Browser-Fensters (das sogenannte Popup).

Was ist JavaScript?

Genau genommen, ist JavaScript eine Technologie, um relativ einfache Programmabläufe erstellen zu können. Die Syntax der Sprache ist, wie der Name vermuten lässt, stark an die Programmiersprache Java angelehnt – wer Java schon kennt, wird demnach mit JavaScript keine Probleme haben. In den häufigsten Fällen wird JavaScript innerhalb des Browsers zur Steuerung des Browser-Inhalts beziehungsweise zur Interaktion mit dem Benutzer eingesetzt. Darüber hinaus gibt es jedoch auch Software-Umgebungen, in denen JavaScript direkt auf dem Server eingesetzt wird. Da diese Varianten jedoch kaum Verbreitung gefunden haben, ist in der Regel clientseitiges JavaScript gemeint, wenn von JavaScript die Rede ist.

Entstehung

JavaScript kann auf eine für IT-Verhältnisse schon recht lange Geschichte zurückblicken. Ursprünglich entwickelt wurde es um 1996 von der Firma Netscape, von der damals auch der beliebteste Browser stammte (inzwischen ist Netscape in AOL aufgegangen, der Browser-Code ist in das Mozilla-Projekt und den Firefox-Browser eingeflossen). Der Name sollte ursprünglich LiveScript heißen, wurde jedoch aufgrund der damaligen enormen Bekanntheit und der angelehnten Syntax nach der Programmiersprache Java benannt. Im Zuge der Rivalität zwischen Microsofts Internet Explorer und Netscapes Navigator wurde auch die Entwicklung von JavaScript vorangetrieben, die jedoch mit dem Ende des sogenannten »ersten Browser-Kriegs« (zwischen Microsoft und Netscape) und dem Rückzug Netscapes aus der Browser-Welt ins Stocken geriet. Bislang sind sechs Versionen (1.0 bis 1.5) entstanden, die sich jeweils durch Neuerungen in Sachen Syntax und verfügbarer Code-Objekte (Bibliotheken) unterscheiden[1]. Aktuell wurde außerdem eine neue Version von ECMAScript (die standardisierte Form von JavaScript) herausgegeben, die jedoch in den aktuellen Browsern noch nicht implementiert wurde. In diesem Zusammenhang ist auch die Version 2.0 von JavaScript bereits seit Langem in Vorbereitung.

Client- und serverseitig

JavaScript ist weitestgehend eine clientseitige Sprache, das heißt, sie wird vorwiegend im Browser ausgeführt und kommt nur selten direkt auf dem Webserver zum Einsatz. Der Browser lädt dazu vom Server die Website (das HTML-Dokument) herunter und durchsucht es nach Vorkommen von JavaScript-Code. Wird solcher Code gefunden, wird er ausgeführt und je nach Inhalt und Ergebnis angezeigt beziehungweise ausgegeben.

Effektiv auf einem Server zum Einsatz gekommen sind lediglich SSJS (Serverside JavaScript) – ein Feature von Netscapes damaliger Webserver-Software – sowie die Möglichkeit, bei Microsofts ASP-Implementation statt der Sprache VBScript auch JScript (Microsofts JavaScript-Variante) einzusetzen. In der Praxis sind allerdings weder Netscapes Webserver noch ASP mit JScript von Bedeutung.

Versionen und Browser

Je nach Browser-Hersteller und -Version werden jeweils nur eine bestimmte JavaScript-Version oder teilweise sogar nur Teile einer bestimmten Version unterstützt. Darüber hinaus war es lange Zeit der Fall, dass die beiden meistverwendeten Browser Microsoft Internet Explorer und Netscape Navigator (jetzt Mozilla Firefox) teils gegenläufige Methoden, Objekte und Technologien unterstützten und damit jedem Programmierer die Arbeit schwer machten, wenn dieser versuchte, die Website für möglichst alle Browser zugänglich zu machen. Dies ist zum Glück mittlerweile nicht mehr von so tragender Bedeutung. Zwar existieren immer noch diverse Browser, die JavaScript teils sehr unterschiedlich beherrschen – aufgrund der sehr weiten Verbreitung des Internet Explorer 6, 7 beziehungsweise 8 sowie des Mozilla Firefox 1.5, 2 beziehungsweise 3 und der damit einhergehenden Vereinheitlichung sind wir mittlerweile jedoch an einem Punkt, an dem das Thema der Browser-Version für JavaScript allein eine eher untergeordnete Rolle spielt. Einzig bei neueren Technologien wie Ajax bestehen leider immer noch Probleme, wenn es um Browser-Kompatibilität geht – dazu aber an der jeweiligen Stelle dann mehr.