1


	Einführung
-	Startseite
-	Zum Buch
-	Konventionen
-	Impressum

	Internet
-	Das Internet
-	Geschichte des Internets
-	Internet-Dienste
-	Internet-Organisationen

	Site-Management
-	Promotion
-	Erfolgskontrolle
-	Relaunch
-	Kommunikation
-	Community-Strategien

	Design-Theorie
-	Designtheorie - Einführung
-	Farben
-	Textgestaltung
-	Site-Strukturen und Navigation
-	Zielgruppenorientiertes Design
-	Usability

	Web-Sprachen
-	Einführung
-	HTML-Tutorial
-	HTML-Tags
-	XHTML-Tags
-	JavaScript-Tutorial
-	DHTML
-	JavaScript-Know-How
-	CSS-Tutorial
-	SSI

	Design-Praxis
-	Einleitung
-	Arbeitsmittel
-	Tabellen
-	Frames
-	Textgestaltung
-	Formular-Gestaltung
-	Navigation
-	Sitemaps
-	Webrides
-	Browserkompatibiltät
-	Ladezeiten-Optimierung

	Technik I
-	Einleitung
-	Datenbanken und SQL
-	Perl/CGI-Tutorial
-	PHP-Einführung

	Technik II
-	Einleitung
-	Perl-Scripts konfigurieren
-	Formulare verschicken
-	Ein Forensystem installieren
-	Redaktionssystem
-	Session-Management mit Perl
-	Newsletter-Verwaltung

4.5 JavaScript-Tutorial

Druck-Version | Startseite| Kontakt | AboutWebDesign.de

Inhaltsverzeichnis "JavaScript-Tutorial"

4.5.1 Voraussetzungen
4.5.2 Zielsetzung
4.5.3 Nötiges Vorwissen
4.5.4 Einbindung von JS
4.5.5 Erste Schritte
4.5.5.1 Wesentliche Eigenschaften
4.5.5.2 Kommentare
4.5.5.3 Besondere Notationen
4.5.5.3.1 Zeichenketten
4.5.5.3.2 Zahlen
4.5.6 Variablen und die Verwendung von Funktionen
4.5.7 Operatoren
4.5.8 Kontrollstrukturen, Vergleichsoperatoren, Schleifen
4.5.8.1 Überblick
4.5.8.2 Die if-Anweisung
4.5.8.3 Ausdrücke
4.5.8.4 Vergleichsoperatoren
4.5.8.5 Logische Operatoren
4.5.8.6 Schleifen
4.5.8.6.1 for
4.5.8.6.2 while
4.5.9 Eigene Funktionen
4.5.10 Arrays
4.5.11 Objekte in JavaScript
4.5.11.1 Grundsätzliches
4.5.11.2 Objekte in JavaScript
4.5.11.3 Objekthierarchien
4.5.11.4 Mehr OOP
4.5.12 Fazit

Partnerprogramm

4.5.1 Voraussetzungen

Für dieses Tutorial benötigt werden:

Ein Text-Editor. Notepad reicht aus, Alternativen wie HomeSite oder UltraEdit machen das Arbeiten komfortabler.

Ein Browser (mit aktiviertem JavaScript, möglichst modern)

30 Minuten Zeit

Nach oben

4.5.2 Zielsetzung

Unsere Zielsetzung ist es, Sie in kurzer Zeit mit JavaScript vertraut zu machen. Für tiefer gehendes Wissen empfehlen wir SelfHTML. Wir sind dabei der Meinung, dass es schon genug Objekthierarchie-Übersichten und Funktionslisten im WWW gibt. Wir konzentrieren uns daher auf die wesentlichen Sprachelemente von JavaScript und reißen die in den Beispielen vorkommenden Funktionen nur an.

Nach oben

4.5.3 Nötiges Vorwissen

JavaScript ist eine eigene Programmiersprache und gehört nicht direkt zu HTML. Im Gegensatz zu HTML ist JavaScript übrigens eine wirkliche, objektorientierte Sprache. Um das Setzen von Variablen und das Aufrufen von Funktionen werden Sie also nicht herumkommen, wenn Sie eigene Scripts schreiben wollen.

Wofür ist JavaScript überhaupt genau zuständig? Im Wesentlichen geht es darum, die Inhalte von Web-Seiten dynamisch zu machen, ohne dabei erneut Verbindung zum Server aufbauen zu müssen. Dazu werden JavaScript-Dateien in einer sogenannten Sandbox, also einer theoretisch nach außen sicheren Umgebung, ausgeführt. Die Scripts nehmen dann meist Zugriff auf das Dokument. Wichtig ist, dass JavaScript kein Ersatz für HTML ist, sondern lediglich eine dynamische Ergänzung. JavaScript ist auch nicht für Aufgaben zuständig, die normalerweise von serverseitigen Scriptsprachen wie Perl erledigt werden.

Leider ist JavaScript - genau wie HTML selbst - nicht browserübergreifend kompatibel. Etwas, das im Netscape Navigator funktioniert, muss im Internet Explorer noch lange nicht funktionieren. Besonders ärgerlich ist das, wenn es um DHTML geht - aber dazu mehr im entsprechenden Kapitel.

Nach oben

4.5.4 Einbindung von JS

Öffnen Sie nun den Editor Ihrer Wahl und fügen Sie folgenden Code in eine leere Datei ein:



            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

                  "http://www.w3.org/TR/html4/transitional.dtd">

            <html>

            <head>

                <title>Meine erste Test-Seite</title>

                <script language="JavaScript1.2" type="text/javascript">

                alert("Hallo User!");

                </script>

            </head>

            <body>

                Hallo Welt

            </body>

            </html>

Speichern Sie die Datei ab und öffnen Sie sie in Ihrem Browser. Eine kleines Benachrichtigungsfenster sollte erscheinen.

Wie Sie sehen, werden JavaScript-Anweisungen hier also zwischen <script> ... </script> notiert. Es gibt auch die Möglichkeit, JavaScript in externen Dateien zu notieren:



            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

                  "http://www.w3.org/TR/html4/transitional.dtd">

            <html>

            <head>

                <title>Meine erste Test-Seite</title>

                <script language="JavaScript1.2" src="mycode.js" type="text/javascript">

            </head>

            <body>

                Hallo Welt

            </body>

            </html>

In diesem Falle müsste die Datei "mycode.js" im gleichen Verzeichnis liegen wie die HTML-Datei. Wieso, das wird im HTML-Tutorial unter "Absolute und relative Adressierung" erklärt.

Nach oben

4.5.5 Erste Schritte

Sehen Sie sich folgenden Code im Browser an:



            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

                  "http://www.w3.org/TR/html4/transitional.dtd">

            <html>

            <head>

                <title>Meine erste Test-Seite</title>

                <script language="JavaScript1.2" type="text/javascript">

                    document.write("Hallo User!");

                    document.write(321);

                    document.write("Verwendung eines HTML-Tags: <br><br><br>");

                </script>

            </head>

            <body>

                Hallo Welt

            </body>

            </html>

4.5.5.1 Wesentliche Eigenschaften

Dieses Beispiel zeigt mehrere wesentliche Eigenschaften von JavaScript:

Jeder Befehl endet mit einem Semikolon

document.write ist eine Funktion. Funktionen sind kleine Unterprogramme - man steckt etwas hinein (z.B. eine Zeichenkette) und bekommt eine Reaktion. In diesem Fall ist die Reaktion, dass die übergebene Zeichenkette direkt in das Browser-Fenster geschrieben wird.

Wenn etwas an eine Funktion übergeben werden soll, steht es in Klammern

Zeichenketten wie "Hallo User!" stehen in Anführungszeichen. Zahlen dagegen können direkt verwendet werden.

Wenn es wie beim document.write-Befehl darum geht, etwas ins Dokument zu schreiben, sind HTML-Tags natürlich erlaubt, wie der vierte der Befehle im Beispiel zeigt.

Übrigens spielt die Groß- und Kleinschreibung bei JavaScript eine große Rolle: document.Write ist etwas anderes als document.write.

4.5.5.2 Kommentare

Wer in JavaScript einen Kommentar definieren möchte, kann dies mit Hilfe von zwei Slashes am Anfang einer Zeile tun:



            // ich bin ein Kommentar

Kommentare werden vom Browser ignoriert und nicht ausgeführt.

Wer einen längeren Kommentar schreiben will und auf die Slashes verzichten will, verwendet am besten diese Form des Kommentars:



        /*

        Mehrzeiliger

        Kommentar

        */

4.5.5.3 Besondere Notationen

4.5.5.3.1 Zeichenketten

Sie wissen schon, dass Zeichenketten von Anführungszeichen umschlossen werden. Es gibt noch andere "seltsame" Konventionen: wer z.B. die Zeichenfolge \n in eine Zeichenkette einbaut, der erreicht damit einen Zeilenumbruch innerhalb der Zeichenkette. Achten Sie jedoch darauf, dass ein Zeilenumbruch in einer Zeichenkette (\n) etwas anderes ist als ein HTML-Zeilenumbruch (<br>). Ein Zeilenumbruch in einer Zeichenkette wird nicht direkt angezeigt, seine Wirkung ist mit einem Zeilenumbruch in einer HTML-Quelldatei vergleichbar. De facto ist das \n also nur für spezielle Situationen sinnvoll, meist zeigt es gar keinen Effekt.

Es gibt noch andere dieser besonderen Zeichenfolgen, "Escape-Sequenzen" genannt: so z.B. \t für einen Tabulator. Genauso wie \n haben sie aber am Anfang unserer JavaScript-Bemührungen für uns keinen Sinn.

JavaScript versucht, jeden Backslash innerhalb einer Zeichenkette als besondere Anweisung zu deuten, wie das auch bei \n passiert. Wenn Sie daher einfach nur einen Backslash ohne Sonderbedeutung einsetzen wollen, verwenden Sie zwei Backslashes hintereinander: \\.

Ein weiteres Problem ist die Verwendung von Anführungszeichen innerhalb von Zeichenketten: document.write("Ich sage: "Hallo""); führt zu Problemen. Die Lösung: Anführungszeichen werden mit Backslashes "gequotet": document.write("Ich sage: \"Hallo\"");.

4.5.5.3.2 Zahlen

Zahlen werden eigentlich "einfach so" geschrieben. Doch gibt es dabei einige Feinheiten zu beachten. Wer Kommazahlen verwenden will, nimmt statt des Kommas einen Punkt.

Wer seine Zahlen in Exponentialschreibweise angeben will, sollte dieses Schema verwenden: 2.123e23.

Nach oben

4.5.6 Variablen und die Verwendung von Funktionen

Variablen sind ein elementares Thema für jeden Programmierer. Eine Variable ist eine Art Platzhalter für Werte.



            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

                  "http://www.w3.org/TR/html4/transitional.dtd">

            <html>

            <head>

                <title>Meine erste Test-Seite</title>

                <script language="JavaScript1.2" type="text/javascript">

                    var meine_variable = "text ";

                    document.write(meine_variable);

                    meine_variable = "anderer Text ";

                    document.write(meine_variable);

                </script>

            </head>

            <body>

            </body>

            </html>

Vergleichen Sie dieses Beispiel zunächst mit dem vorhergehenden. Da, wo vorher in Klammern eine Zeichenkette stand, findet sich nun meine_variable. Bitte beachten Sie, dass meine_variable nicht in Anführungszeichen steht - es ist also keine Zeichenkette gemeint, sondern etwas anderes.

Die Anweisung var meine_variable = "text "; definiert eine Variable. Unter dem Bezeichner "meine_variable" wird im Computer nun die Zeichenkette "text " gespeichert. Wenn der Browser nun später irgendwo im Code den Bezeichner findet (in diesem Fall direkt in der nächsten Zeile), dann wird der zum Bezeichner gehörende Wert anstelle des Bezeichners selbst eingesetzt. Das Schlüsselwort var ist nicht zwingend erforderlich. Es ist aber guter Stil, es bei der ersten Definition eines Variablennamens zu verwenden.

Variablen sind also Speicher für Werte, Zeichenketten etc. Wie die dritte und vierte Zeile des Beispiel-Codes zeigen, lassen sich Variablen auch ändern und dann wieder verwenden. Natürlich wäre es auch möglich, die Variable erneut zu verwenden, ohne sie vorher verändert zu haben.

Viele angehende Programmierer stellen die Frage, wozu Variablen denn überhaupt zu gebrauchen sind. Wie der Name verrät, sind Variablen variabel, also veränderlich. Sie können also Variablen einsetzen, ohne genau wissen zu müssen, was sich hinter einer Variable verbirgt. Das folgende Beispiel macht das deutlich:



                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

                      "http://www.w3.org/TR/html4/transitional.dtd">

                <html>

                <head>

                    <title>Meine erste Test-Seite</title>

                    <script language="JavaScript1.2" type="text/javascript">

                        var meine_variable = prompt("Bitte etwas eingeben", "Hier Wert eingeben");

                        document.write("Es wurde eingegeben: ");

                        document.write(meine_variable);                    

                    </script>

                </head>

                <body>

                </body>

                </html>

Um das Beispiel verstehen zu können, müssen Sie zunächst noch die Funktionsweise der Funktion prompt kennen: ein Eingabefeld wird auf dem Bildschirm angezeigt. Wie man die Funktion aufruft, wird normalerweise in einem solchen Schema angegeben:



            prompt(aufforderung, vorbelegung);

Das verrät Ihnen

wie die Funktion heißt

wie viele Parameter bzw. übergebene Werte die Funktion erwartet

welchen Sinn die Parameter haben: Der erste gibt den Aufforderungs-Text an, der zweite die Vorbelegung des Eingabefeldes

Der Beispiel-Code zeigt recht anschaulich, dass auch Funktionen einen Rückgabewert haben können: Das, was der Anwender eingibt, wird in meine_variable gespeichert.

Nach oben

4.5.7 Operatoren

Operatoren sind dafür zuständig, verschiedene Werte oder Variablen miteinander zu verknüpfen. Alle Operatoren liefern entweder einen Rückgabewert oder modifizieren eine der beteiligten Variablen. Der folgende Code zeigt Ihnen einige Operatoren:



                <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

                      "http://www.w3.org/TR/html4/transitional.dtd">

                <html>

                <head>

                    <title>Meine erste Test-Seite</title>

                    <script language="JavaScript1.2" type="text/javascript">

                        // Operatoren

                        // Das Script gibt nichts aus!

                        var s;

                        var a = 5;

                        var b = 6;

                        // Addition

                        s = 3 + 4;            

                        s = a + b;

                        // Subtraktion

                        s = 3 - 2;

                        s = a - b;

                        // Multiplikation

                        s = 3 * 5;

                        s = a * b;

                        // Division

                        s = 6 / 3;

                        s = a / b;

                        // Zeichenketten verknüpfen

                        s = "Erster Teil, " + "zweiter Teil!";

                    </script>

                </head>

                <body>

                </body>

                </html>

Die Wirkungsweise der einzelnen Operatoren wird im Code durch Kommentare (eingeleitet durch ein //) erklärt. Nicht explizit erklärt ist der =-Operator: Er nimmt das, was auf der rechten Seite steht, und packt es in die Variable, die er zu seiner Linken findet.

Das Beispiel im nächsten Abschnitt zeigt einige Zahlenspielereien. Da dabei viele Operatoren verwendet werden, ist es sicherlich sinnvoll, den Code Zeile für Zeile durchzugehen.

Nach oben

4.5.8 Kontrollstrukturen, Vergleichsoperatoren, Schleifen

Sehen Sie sich diesen Code an:



            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

                  "http://www.w3.org/TR/html4/transitional.dtd">

            <html>

            <head>

                <title>Meine erste Test-Seite</title>

                <script language="JavaScript1.2" type="text/javascript">

                    // Zahlen holen

                    var s = prompt("Bitte erste Zahl eingeben", 4);

                    var t = prompt("Bitte eine andere Zahl eingeben", 5);

                    // Was ist denn das?

                    if (s == t)

                    {

                        // Wenn s gleich t...

                        // Achtung: kein normales Gleichzeichen in der if-Anweisung...

                        

                        alert("Die Zahlen mussten unterschiedlich sein. Nun ist es vorbei!");

                    }

                    else

                    {

                        // Wenn s ungleich t...

                        // Eine schöne Meldung:

                        alert("Cool! Zahlenspielereien beginnen!");

                        

                        document.write("<b>Normale Zahlenspiele</b> <br><br>");

                        

                        // Verwende verschiedene Operatoren: +, -, *

                        document.write("Zahl1 plus Zahl2: ");

                        document.write(s*1 + t*1); // Trick, damit die beiden Variablen nicht verkettet, sondern addiert werden

                        document.write("<br>");

                        

                        document.write("Zahl1 mal Zahl2: ");

                        document.write(s*t);

                        document.write("<br>");                    

                        

                        document.write("Zahl1 minus Zahl2: ");

                        document.write(s-t);

                        document.write("<br>");                

                        

                        document.write("<br><b>Die Schleife</b> <br><br>");

                        

                        // Jetzt wird's komplizierter

                        // Gebe Zahl1-mal Zahl2 aus

                        // Wenn also Zahl1 gleich drei ist, wird dreimal der Wert von Zahl2 ausgegeben

                        for(var i =1; i <= s; i++)                                    

                        {

                            // Verwendung des +-Operators zur Verkettung von einer Zeichenkette mit einer Zahl

                            document.write("Durchlauf "+i+"<br>");

                            document.write(t);

                            document.write("<br><br>");

                        }

                    }

                    

                </script>

            </head>

            <body>

            </body>

            </html>

4.5.8.1 Überblick

Was passiert in diesem Script? Der Anwender muss zwei ungleiche Zahlen eingeben, sonst bekommt er eine Fehlermeldung. Danach werden einige Operatoren in praktischen Beispielen gezeigt. Abschließend wird eine Zählschleife genutzt, um eine Zahl wiederholt auszugeben.

4.5.8.2 Die if-Anweisung

Die ausgegebene Fehlermeldung im Falle zweier gleicher Zahlen ist neu für uns. Im Detail funktioniert das so: Zunächst einmal werden zwei Zahlen vom Anwender eingegeben. Die nächste Zeile enthält eine bedingte Verzweigung: wenn s gleich t ist, erhält der Anwender eine Fehlermeldung.

Dafür setzen wir die if-Anweisung ein:



        if (ausdruck)

        {

            // Wird ausgeführt, wenn ausdruck eine 1 zurückliefert

        }

        else

        {

            // Wird ausgeführt, wenn ausdruck eine 0 zurückliefert

        }

4.5.8.3 Ausdrücke

ausdruck ist dabei der entscheidende Teil: Wenn ausdruck eine 1 zurückliefert, gilt der Ausdruck als "wahr". "wahr" ist der Ausdruck weiterhin, wenn er eine Zeichenkette oder eine beliebige Zahl ungleich 0 zurückliefert.

Nur: was sind Ausdrücke? Ein Ausdruck kann eine einfache Variable oder eine Zeichenkette/Zahl sein:



        if ("abc")

        {

            // wird ausgeführt

        }

        

        if (1)

        {

            // wird ausgeführt

        }    



        var a = "abc";

        if ("abc")

        {

            // wird ausgeführt

        }

4.5.8.4 Vergleichsoperatoren

Häufiger aber ist die Verwendung eines Vergleichsoperators wie ==. Der erwartet zwei Werte oder Variablen, eine links, eine rechts: "eins" == "zwei". Eine 1 wird dann zurückgegeben, wenn links gleich rechts ist.

Andere Operatoren sind > (größer), < (kleiner), <= (kleiner oder gleich) und >= (größer oder gleich).

4.5.8.5 Logische Operatoren

Nur: was ist, wenn Sie mehrere Bedingungen verknüpfen wollen? Dafür gibt es logische Operatoren: || (oder), && (und) und ! (Umkehr von 0 zu 1 und umgekehrt).

Beispiel: ((a > 10) && (b < 20)) liefert nur dann 1 zurück, wenn a größer als 10 ist und b kleiner als 20. ((!(a == 10)) || (b < 10)) dagegen liefert nur dann 1 zurück, wenn a ungleich 10 ist oder wenn b kleiner als 10 ist.

Eine Klammerung bietet sich hier übrigens an, um Eindeutigkeit zu gewährleisten. Ansonsten können einem leicht kleine Fehler unterlaufen, die aus der verschiedenen Priorität der Operatoren resultieren.

4.5.8.6 Schleifen

4.5.8.6.1 for

Im unteren Teil des Beispiels befand sich dieser Code:



            for(var i =1; i <= s; i++)                                    

            {

                // Verwendung des +-Operators zur Verkettung von einer Zeichenkette mit einer Zahl

                document.write("Durchlauf "+i+"<br>");

                document.write(t);

                document.write("<br><br>");

            }

Die for-Anweisung ist eine sogenannte Zählschleife. "Schleife" bezieht sich darauf, dass der in geschweiften Klammern stehende Code mehrmals ausgeführt werden kann.

Im Detail funktioniert for so: Zunächst wird eine Zählvariable deklariert und auf einen Startwert gesetzt. In unserem Beispiel wird i auf 1 gesetzt. Es folgt ein Strichpunkt, danach kommt ein Ausdruck. Solange der wahr ist, wird der Code im Inneren der Schleifenstruktur ausgeführt. Nach einem erneuten Semikolon folgt eine Anweisung, die bei jedem Durchlauf ausgeführt wird. i++ sorgt hier dafür, dass i um 1 erhöht wird.

4.5.8.6.2 while

Die while-Schleife ist einfacher:



            while(a > b)                                    

            {

                // Anweisungen...

            }

Solange der Ausdruck in den Klammern wahr ist, wird der Code im Innern ausgeführt.

Nach oben

4.5.9 Eigene Funktionen

JavaScript erlaubt es, eigene Funktionen zu definieren:



            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

                  "http://www.w3.org/TR/html4/transitional.dtd">

            <html>

            <head>

                <title>Meine erste Test-Seite</title>

                <script language="JavaScript1.2" type="text/javascript">

                document.write(multipliziere(1,2,3));

                

                function multipliziere(z1, z2, z3)

                {

                    return z1*z2*z3;

                }

                </script>

            </head>

            <body>

            </body>

            </html>

Wenn Sie sich dieses Dokument im Browser ansehen, wird eine 6 ausgegeben.

multipliziere ist eine selbstdefinierte Funktion. Funktionsdefinitionen werden eingeleitet durch das Schlüsselwort function und den Funktionsnamen. In Klammern wird dahinter die Parameter-Liste angegeben: Sie vergeben Namen für Variablen, über die im Code der Funktion auf die übergebenen Werte zugegriffen werden kann. Wenn Sie keine Parameter benötigen, notieren Sie einfach eine leere Liste: ().

Der Code der Funktion muss von geschweiften Klammern umschlossen sein. Erlaubt ist dann alles, was auch sonst erlaubt ist - jede beliebige Anweisung darf innerhalb einer Funktion aufgerufen werden.

Wenn eine Funktion einen Wert zurückgeben soll, verwenden Sie den Befehl return.

Nach oben

4.5.10 Arrays

Folgendes Beispiel: Sie wollen die Farben von 10 Blumentöpfen speichern. Naheliegend wäre ein solcher Ansatz:



            var topf1 = "rot";

            var topf2 = "grün";

            ...

            var topf10 = "ultraviolett";

Dieser Code würde zwar funktionieren, wäre aber unflexibel. Stellen Sie sich vor, Sie wollten die Farben aller Töpfe in einer Zeichenkette zusammensetzen:



            topf1+topf2+topf3...

Wenn nun noch ein elfter Topf hinzukommt, müssen Sie praktisch Ihren gesamten Code umschreiben - lästig und unpraktisch.

JavaScript bietet Arrays an, auf Deutsch "Listen". Die sind darauf ausgelegt, eine Reihe von Daten zu speichern.



        // Array definieren

        var toepfe = new Array("rot", "grün", "ultraviolett");

        // Array durchgehen und Einzelwerte ausgeben

        for (var i = 0; i < toepfe.length; i++)

        {

            document.write(toepfe[i]);

        }    

        // Einzelne Array-Elemente ändern

        toepfe[1] = "wie Nudeln";

Zunächst also wird ein neues Array mit dem Befehl new Array (...) erzeugt. In Klammern stehen die in der Liste zu speichernden Werte.

Jetzt kann auf die einzelnen Listeneinträge mit einem Index zugegriffen werden, also mit einer Zahl, die genau angibt, welchen Eintrag man meint. Ein Index steht in eckigen Klammern. Der erste Listeneintrag hat den Index 0, der zweite den Index 1, der dritte den Index 2 etc.

Wer die Anzahl der Einträge eines Arrays herausfinden will, verwendet arrayname.length. In unserem Beispiel nutzen wir das, um alle Werte der Reihe nach durchzugehen.

Auf einzelne Elemente kann wie auf normale Variablen zugegriffen werden. Die letzte Zeile des Beispiels zeigt das.

Nach oben

4.5.11 Objekte in JavaScript

4.5.11.1 Grundsätzliches

Der Zugriff mit JavaScript auf zu verändernde HTML-Seiten basiert zu großen Teilen auf Objekthierarchien. Um diese Vorgänge zu verstehen, benötigen Sie ein wenig Grundwissen über objektorientierte Programmierung.

Eine einfache Definition: Ein Objekt ist ein Etwas, dem eigene Variablen und Funktionen zugeordnet sind. Weil man hier von Objekten redet, heißen Variablen "Eigenschaften" und Funktionen "Methoden".

Eine Klasse dagegen ist ein Bauplan für Objekte. Den Vorgang der Objekterstellung nennt man Instanzierung.

Wer ein Objekt erzeugen will, benötigt also zunächst einmal eine Klasse. Mit Hilfe der Klasse wird dann ein neues Objekt zusammengebaut. Dieser Vorgang lässt sich beliebig oft wiederholen, die dabei entstehenden Objekte sind zunächst einmal voneinander unabhängig.

Welche Vorteile bietet das Objekt-Konzept? Der Programmierer kann mit Objekten sehr realitätsorientiert arbeiten. Wer Schiffe simulieren will, verwendet einfach eine Klasse namens "Schiff" mit verschiedenen Eigenschaften. Viel schmutzige Arbeit wird dann direkt vom JavaScript-Interpreter erledigt, der Code wird selbsterklärend. So ist die Anweisung mein_schiff.kurs_setzen("holland") wirklich leicht zu verstehen.

Weiterhin erleichtern Objekte die Trennung von Schnittstelle und Implementation. Das klassische objektorientierte Dogma schreibt vor, dass Objekte nur ihre Bedienschnittstelle (Methoden) nach außen zugänglich machen. Wer das Objekt verwenden will, soll keinen Zugriff auf interne Arbeitsweisen und Datenspeicher des Objekts haben.

Ein Beispiel hilft oft, sich die Vorteile von OOP (objektorientierter Programmierung) klar zu machen. Nehmen wir an, wir wären in einer großen Firma tätig, die gerade ein 3D-Computerspiel herstellt. Wir greifen über Objekte auf Methoden zur Grafikdarstellung zu (folgenden Code funktioniert natürlich nicht in einem Browser):



            screen.setPixel(x,y,farbe);

Die für das screen-Objekt zuständige Abteilung kann das Objekt intern ändern, wie sie möchte. Beispielsweise kann sie die komplette Prozedur zum Zeichnen eines Bildpunktes umschreiben. Alle anderen Abteilungen braucht das aber nicht zu interessieren, da der Bildschirm über die screen-Klasse gekapselt ist. Solange die Methode setPixel existiert, muss kein bisschen Code geändert werden.

4.5.11.2 Objekte in JavaScript

JavaScript stellt von sich aus viele Objekte zur Interaktion mit dem Browser bereit. Diese Objekte existieren einfach, müssen also nicht von Ihnen erzeugt werden.

So haben wir z.B. die ganze Zeit munter die Funktion document.write verwendet. In Wahrheit war die Bezeichnung "Funktion" völlig falsch - es handelt sich um eine Methode des document-Objekts. Wie das Beispiel deutlich macht, werden Objektname und Methode/Eigenschaft durch einen Punkt getrennt.

4.5.11.3 Objekthierarchien

Wer JavaScript programmiert, wird häufiger auf Konstrukte wie document.Formular1.Land.value stoßen. Formular1 ist ein Objekt, das aber gleichzeitig eine Eigenschaft von document ist. Land wiederum ist eine Eigenschaft von Formular1.

4.5.11.4 Mehr OOP

Im Kapitel "JavaScript-Know-How" finden Sie weitere Informationen zum Thema JavaScript und OOP.

Nach oben

4.5.12 Fazit

Sie sollten nun fähig sein, eigene JavaScript-Programme zu schreiben, denn Sie beherrschen nun Variablen, Kontrollstrukturen, Operatoren und OOP. Was Ihnen nun noch fehlt, ist eine genaue Kenntnis der JavaScript-Objekthierarchie. Im Internet gibt es dazu viele gute Quellen.

Wenn Sie tiefer in die Materie einsteigen wollen, sollten Sie die Kapitel "JavaScript-Know-How" und "DHTML" lesen. Dort gehen wir auf Themen wie OOP, sich bewegende Objekte und viele weitere Anwendungsbeispiele ein.

Nach oben

Partnerseite: Informationen zu HTML bei HTMLWorld.de.