JavaScript Workshop 1

2/4

INHALT

Der Weg nach Java (1/4)

JavaScript – wofür? (1/4)

Grundlagen (1/4)

Objects, Methods, Properties, Variabeln (2/4)

Events, Event Handlers (2/4)

Functions (2/4)

Wanzensuche (3/4)

Learning by doing (3/4)

Ausblick auf Teil 2 (3/4)

Event Handler (3/4)

Interessante Links zu JavaScript (4/4)

Beispiele in JavaScript:

JavaScript Workshop Teil 2

Tips - Übersicht

Objects, Methods, Properties, Variabeln
JavaScript benutzt Objekte, um Informationen zu organisieren, und wird deshalb auch eine ‘objektorientierte’ Programmiersprache genannt. Ein Objekt hat Eigenschaften, die properties genannt werden (Beispiel: document.lastModified). Befehle, die ein Objects ausführen kann, heissen methods. (Beispiel: document.write()). Die Eigenschaften, Methoden und allfällige Subobjekte werden immer durch einen Punkt vom Objekt getrennt.

In JS ist ein reiches Set von Objekten bereits eingebaut, es können aber nach Bedarf auch eigene definiert werden. JS benutzt eine Hierarchie, um die Objekte zu organisieren. Zuoberst in der Hierarchie ist das window-Objekt, das Browserfenster. Alle anderen Objekte sind Subobjekte davon und werden wie Eigenschaften behandelt. Es gibt allerdings auch Objekte, die nichts mit dem Browserfenster zu tun haben und deshalb auch keine Subobjekte davon sind. Es handelt sich dabei um Array, Date, Function, Math, navigator und String.

Wie bereits erwähnt, ist das Browserfenster die oberste Ebene der Objekte. Sein meistgebrauchtes Subobjekt ist das document-Objekt. Dieses beinhaltet sämtliche Links, Bilder und Formulare einer Seite. Man kann nun jedes Subobjekt des document-Objekts weiter in seine Elemente unterteilen, die wiederum eigene Eigenschaften haben können. Zum Beispiel beinhaltet das image-Objekt alle Bilder einer Seite. Um auf ein bestimmtes Bild zuzugreifen, muss man es durch seine Nummer spezifizieren: document.images[1] bezieht sich auf das zweite Bild des Dokuments. Die Bilder werden in der Reihenfolge ihres Erscheinens im HTML-Code gespeichert und von Null an numeriert.

JavaScript erkennt folgende grundlegenden Datentypen: Zahlen, bool’sche Operatoren (true oder false) sowie Strings aus nichtnumerischen Zeichen. Normalerweise arbeitet JS mit Werten (values), die jedesmal, wenn Sie vorkommen, neu eingegeben werden müssen und die voneinander unabhängig sind. Die ständige Neueingabe lässt sich umgehen, wenn man sie als Variable definiert. Variablen speichern einen Wert und erlauben so, Operationen damit durchzuführen und mit anderen Teilen des Scripts zu interagieren.

Identifiers oder Variablennamen sind Zeichenketten aus Buchstaben (a-z, A-Z), Ziffern (0-9) und Underscores ( _ ) und müssen entweder mit einem Buchstaben oder einem Underscore beginnen. Definiert werden sie durch das Schlüsselwort var.

var beispiel = prompt("Geben Sie einen Text ein:")
document.write(beispiel)

Beispiel

In diesem Beispiel wird der User aufgefordert, einen Text einzugeben (prompt()). Dieser wird als Variable gespeichert und danach ins Browserfenster geschrieben.

Events, Event Handlers
Ein User, der eine Webseite besucht, produziert Ereignisse, indem er beispielsweise das Dokument lädt, ein Formular ausfüllt oder auf einen Link klickt. Diese Ereignisse werden in JS events genannt, und sie sind über die event handler in der Lage, auf den Input des Besuchers zu reagieren. JS besitzt zurzeit 12 event handlers (vgl. Kasten), die die Seiten interaktiv machen.

Event handler werden dazu benutzt, auf eine Aktion des Users mit einer Reaktion der Seite zu antworten. Normalerweise werden die Teile eines Scripts, also beispielsweise eine Funktion, durch einen event handler aufgerufen. Sie sind das Verbindungsstück zwischen HTML und dem Script und erscheinen deshalb im HTML-Code nicht zwischen den Scripttags, sondern als Attribut des Tags, der durch die Aktion betroffen ist. Wenn sie keine Funktion aufrufen, kommen sie gar ganz ohne Script aus:

Beispiel

Dieses Beispiel verlangt vom User eine Texteingabe, die dann in einem Warnfenster angezeigt wird, sobald das Eingabefeld verlassen wird. Ausserdem zeigt es eine wesentliche Erleichterung im Umgang mit Adressen durch das Schlüsselwort this. Um den Wert des Textfeldes zu ermitteln, werden normalerweise mindestens 4 Ebenen gebraucht: document.forms[0].elements[0].value. Häufig kann aber das Schlüsselwort this anstelle der vollen Adresse genutzt werden. Sie sollten davon Gebrauch machen, wo immer es möglich ist, um Ihre Scripts klarer und einfacher zu halten.

Functions
Wie Sie gesehen haben, können Sie die Methoden benutzen, um einfache Dinge wie das Schreiben in ein Dokument oder das Anzeigen einer Warnung zu erledigen. Für komplexere Aufgaben ist es aber nötig, Gruppen von Methoden zu erstellen, die dann Funktion genannt werden.

Funktionen werden in JS mit dem Schlüsselwort function und ihrem Namen definiert, gefolgt von den Parametern in normalen Klammern und separiert durch Kommas sowie dem Block der Statements, die in geschwungenen Klammern eingeschlossen sind. Die Parameter-Klammern können auch leer sein.

Der folgende Codekasten zeigt die korrekte Schreibweise einer Funktion.

myfunction(arguments) {
statements
}

Aufgerufen wird die Funktion durch einen event handler.

<SCRIPT>
function display() {
alert("Willkommen beim Windows Guide!")
}
</SCRIPT>
<BODY>
Klicken Sie hier für eine wichtige Information:
<FORM>
<INPUT TYPE="button" VALUE="Info" onClick="display()">
</FORM></BODY>

Beispiel

Dieses Beispiel verlangt vom User, dass er auf den Button klickt, worauf die Funktion display() ausgeführt wird. Dies zeigt die vorgegebene Meldung in einem Warnfenster an.

Vorherige Seite | Tips | Nächste Seite