LinuxUser Programmieren (Vorschau)

SCHWERPUNKT
Javascript
LISTING 1
sprachen basieren im Kern auf namenlosen,
an Variablen gebundene
Funktionen (anonyme Funktionen
oder Lambda-Funktionen
genannt), die Sie auch als Parameter
für Funktionen verwenden
dürfen. Einen vollständigen Überblick
über sämtliche Sprachelemente
von Javascript mit Ausnahme
der Objektorientierung
finden Sie im Web [2].
Nachhilfe gefragt
Kaum ein Programmierer spricht
die DOM-API heute noch direkt
an: Zu sehr unterscheidet sich die
Implementation von Browser zu
Browser, obwohl die Zahl der Unterschiede
in den letzten Jahren
abgenommen hat. Von solchen
Problemen abgesehen, ist das
DOM an sich gesehen unhandlich
und sperrig. Deswegen nutzen die
meisten Programmierer die Bibliothek
JQuery [3] als Zwischenschicht.
Dieser einführende Artikel
konzentriert sich ausschließlich
auf diesen Ansatz.
01
02
03 $(function(){ //ausführen, wenn Anzeige fertig
04 var colors = ["red", "green", "blue", "yellow"];
05 var names =["rot", "grün", "blau", "gelb"];
06 var sayings = {
07 "rot":"Rot steht für die Liebe.",
08 "grün":"Grün sind die Bäume im Mai.",
09 "blau":"Auch roter Wein macht blau.",
10 "gelb":"Das Angesicht des Neids ist gelb."
11 };
12
13 for (var i in colors){
14 var div = $("");
15 div.css({"height":"50px", "width":"150px",
"background-color":colors[i]});
16 div.addClass("colorbox");
17 div.html(names[i]);
18 $("body").append(div);
19 }
20
21 $(".colorbox").on("click", function(){
22 var clicked = $(this);
23 var farbe = clicked.text();
24 alert(sayings[farbe]);
25 });
26 });
27
Das erste kleine Übungsprogramm
fügt mithilfe einer Schleife vier
farbige Boxen in eine leere Seite
ein. Als Beispiel für Interaktivität
öffnet ein Klick auf eine der Boxen
einen Dialog mit einem abhängig
von der Farbe wechselnden Text.
Die Zeilen aus Listing 1 zeigen viele
Grundzüge der Javascript-Programmierung.
In Abbildung B sehen
Sie das Ergebnis.
Zeile 1 bindet die JQuery-Bibliothek
ein, die beim Manipulieren
des HTML-Codes zum Einsatz
kommt. Enthält das Tag
ein Attribut src, verweist
es auf eine externe Javascript-
Datei. In unserem Fall deutet die
URL auf die von Google gehostete
Version von JQuery, was den
Download der Bibliothek erspart.
Der zweite Script-Tag enthält
kein entsprechendes Attribut.
Dafür umschließt er direkt eingebetteten
Programmcode. Der Typ
text/javascript verweist in beiden
Fällen auf die Sprache der eingebetteten
Skripte.
Im Zeichen des Dollars
Gleich als erstes Zeichen des
Java script-Codes springt das Dollarzeichen
ins Auge. Über dieses
sprechen Sie alle Funktionen von
JQuery an. Die erste Zeile erweist
sich für Neulinge oft als große
Hürde in Bezug auf das Verständnis:
Sie öffnet den JQuery-Aufruf
$(), der erst vor dem schließenden
Script-Tag endet.
Damit hat es folgende Bewandtnis:
Der Browser führt Javascript-
Code, auf den er beim Parsen der
HTML-Seite stößt, immer sofort
aus. Dabei passiert es jedoch mitunter,
dass der Browser mit der
Anzeige der Seite noch nicht fertig
ist. Wenn ein Skript dann versucht,
auf Elemente der Seite zuzugreifen,
scheitert es.
Um dieses Problem zu vermeiden,
kapselt die Funktion $() denjenigen
Teil des Codes, den JQuery
erst dann ausführt, wenn der
Browser mit der Anzeige des
HTML-Codes fertig ist. In unserem
Beispiel umfasst $() den gesamten
Code. Genau genommen
umschließt es den Code nicht
selbst, es erhält vielmehr als Parameter
eine Funktion ohne Namen
(anonyme Funktion, Lambda-
Funktion), die den eigentlichen
Programmcode enthält.
Abgesehen von der Tatsache,
dass der von der anonymen Funktion
umschlossene Code garantiert
erst dann abläuft, wenn der
Browser die Seite komplett aufgebaut
hat, ändert sich nichts an
dessen Funktionalität.
Anonym und doch präsent
Anonyme Funktionen gehören zu
den unverzichtbaren Bestandteilen
von Javascript. Event-Handler,
die auf die Eingabe von Benutzern
reagieren, funktionieren
ohne sie nicht (siehe Listing 1,
Zeile 22). „Funktion ohne Namen“
ist hier ganz wörtlich zu
verstehen: Nach dem Schlüsselwort
function folgen gleich die Parameter
in runden Klammern (im
Beispiel leer, weil es keine Parameter
gibt). Lambda-Funktion
verhalten sich genau wie einfache
Werte (Zahlen oder Strings): Sie
dürfen sie einer Variablen zuweisen
oder einer Funktion als Parameter
übergeben.
Die ersten zwei Zeilen der anonymen
Funktion definieren Arrays,
die mehrere Strings aufnehmen.
Array[Index] greift auf den
Inhalt zu. Als Schlüssel eines Arrays
sind nur null sowie positive
Ganzzahlen erlaubt. Container
mit Strings als Schlüssel, auch als
assoziative Arrays oder in Perl als
Hashes bekannt, heißen in Javascript
Objekt. Zum Definieren
solcher Objekte kommt die
JSON-Schreibweise zum Einsatz
(„Javascript Object Notation“),
die inzwischen auch viele andere
Sprachen nutzen.
In JSON umschließen geschweifte
Klammern eine mit
Komma separierte Liste von
Schlüssel-Werte-Paaren (Listing
1, Zeile 7). Der Zugriff erfolgt
in der von Java bekannten
Dot-Notation: Objekt.Attributname.
26 11 | 12
www.linux-user.de