JavaScript ist eine Script-Sprache die im Browser läuft.
Auch wenn Java im Namen steht, hat es nicht viel mit Java zu tun. Die Aehnlichkeiten bei den Konstrukten kommen von der Sprache C, die ein gemeinsamer Vorfahre beider Sprachen ist.
Es gibt einen Standard, der die Sprache unter dem Namen ECMAScript genau beschreibt.
Immer dann wenn eine Webseite nicht nur statische Informationen anzeigen soll, braucht es JavaScript. Mit JavaScript können Menüs angezeigt werden, Bilder ausgetauscht und überblendet, Teile der Seite angezeigt oder versteckt werden.
Es ist möglich, Elemente ins DOM einzufügen, Elemente aus dem DOM zu löschen, oder die CSS-Eigenschaften ausgewählter Elemente zu aändern.
Praktisch ist zum Beispiel eine Validierung der Eingaben auf einem Formular. Viele Fehler können schon auf dem Browser abgefangen werden, was die Reaktionszeit für den User verbessert und den Server entlastet.
Weiter kann es dynamisch auf ein canvas-Element zeichnen, für Graphiken oder sogar Spiele.
Gerade sehr beliebt ist AJAX. Dabei wird im Hintergrund der Server abgefragt, ob es neue Informationen gibt. Wenn die Daten ändern, wird auch die Seite angepasst.
Ein beliebtes und nützliches Beispiel sind die Vorschäge bei den Auswahllisten, die Sie auf vielen Seiten sehen (Google, SBB, ...)
AJAX ist auch die Voraussetzeung für Dienste wie Google Maps, wo im Hintergrund neue Kartenkacheln geladen werden wenn sich der User an den Rand der aktuellen Kachel bewegt.
JavaScript wird Objekt-Basiert genannt, weil es alles als eine Art Objekt betrachtet.
Das Konzept der JavaScript-Objekte ist aber ganz anders als bei Java. In Java gehört jedes Objekt zu einer Klasse, die festlegt, welche Attribute und Methoden das Objekt hat.
Bei JavaScript dagegen ist ein Objekt einfach eine Sammlung von Attributen und Methoden die sich jederzeit ändern kann. Zur Laufzeit können also Attribute und Methoden hinzugefügt oder auch gelöscht werden !
Vererbung wie bei Java gibt es auch nicht, dafür sogenannte Prototypen, von denen Methoden und Attribute geerbt werden können.
Sowohl im Buch als auch im Tutorial im Web werden die Event-Händler direkt in die HTML-Elemente codiert. Bei groesseren Projekten versucht man heute, das HTML und das JavaScript möglichst separat zu halten. Nach dem Laden der Seite werden die Händler von einem Script an die Elemente gebunden. Im HTML steht also nur ein Link zum JavaScript-File und ein Aufruf im onload der den Prozess in Gang setzt.
Weil es aber bei diesem Verfahren Unterscheide zwischen den Browsern gibt, wird meist ein JavaScript-Framework wie jQuery benutzt, das die Unterschiede ausbügelt.
Bei uns geht es vor allem darum, die Grundlagen zu verstehen, darum habe ich bei allen Beispielen Händler direkt im HTML verwendet. Zudem funktionieren diese Händler erst noch in allen Browsern gleich ...
Die beste Trennung zwischen JavaScript und HTML wird erreicht, wenn alle Funktionen und Objekte in ein separates File ausgelagert werden. Dieses File wird per Script-Tag referenziert:
<script type="text/javascript" src="script.js"></script>
Das JavaScript kann auch direkt im HTML-File stehen. In diesem Fall steht es normalerweise im head-Element, umfasst von einem script-Element:
<script type="text/javascript">
var counter = 1 ;
function showVariable( x )
{
alert( x ) ;
}
</script>
In den Tutorials von w3schools wird bei vielen Beispielen von dieser Regel abgewichen, damit die vom Script benötigten HTML-Elemente schon geladen sind. Denn wenn das Script im Header steht und direkt ausgeführt wird, kann es nicht auf Elemente zugreifen die erst im Body stehen.
Mache ich eigentlich nie und rate Euch auch davon ab.
In JavaScript kann eine Variable alles speichern, also Objekte, Funktionen oder einen primitiven Typ.
JavaScript kennt nur drei primitive Datentypen: String, Number und Boolean, dazu kommen Undefined und null.
Ein String ist eine Folge von Zeichen, wie Sie das von Java gewohnt sind. Einzelne Character gibt es nicht, das sind einfach Strings mit nur einem Zeichen.
Im Unterschied zu Java sind auch Single Quotes als String-Begrenzung erlaubt,
Number ist ein Floating-Point Typ, der einem Java double entspricht. Wenn er keine Kommanstellen hat, sieht er aus wie ein int.
Genau wie in Java gibt es true oder false.
Wenn einer Variable kein Wert zugewiesen wurde, hat sie den Wert undefined.
Der Wert null bedeutet, dass die Variable ganz explizit nichts enthält. Das ist vergleichbar mit null in Java.
Eine Variable kann ein Objekt referenzieren, Diese Referenz verhält sich wie eine Referenzvariable in Java.
Ein Objekt kann mit einer einfachen Notation direkt erzeugt werden:
var obj = { firstname : "Donald", lastname : "Duck" } ;
Diese Zeile instanziert ein Objekt mit zwei Attributen; firstname und lastname.
Wie in fast allen Sprachen gibt es auch in JavaScript Arrays.
Weil JavaScript-Variablen keine Typen haben, kann so ein Array auch wild gemischte "Objekte" enthalten. Aus praktischen Gründen werden aber meist ähnliche Elemente in einem Array gespeichert.
Auch für Arrays gibt es eine einfache Notation:
var months = [ "Januar", "Februar", "März" ] ;
Arrays haben ein Attribut length, das die Anzahl der Elemente angibt. Der Array-Index läuft von 0 bis length - 1.
for( var i = 0; i < months.length; i++ )
alert( months[i] ) ;
Anders als bei Java müssen Funktionen nicht unbedingt zu einem Objekt gehören. Sie können Parameter bekommen und Returnwerte haben.
Eine einfache Funktion sieht so aus:
function square( x )
{
return x * x ;
}
Primitive Typen werden by Value übergeben (Kopie des Wertes), Objekte und Arrays by Reference (die Referenz wird übergeben. Das Verhalten ist also gleich wie bei Java.
Die Kontrollstrukturen wie if, else, for und while stammen von C ab und sind deshalb wie bei Java.
Das switch-Statement wird im BlueJ-Buch nicht erwähnt, und ist deshalb vielen Studenten nicht bekannt. Es erlaubt, mehrere Verzweigungen in einem Statement zu schreiben:
switch( x )
{
case 1: alert( "Eins" ) ;
break ;
case 2: alert( "Zwei" ) ;
break ;
default: alert( "Häh ?" ) ;
break ;
}
switch bestimmt, welche Expression
ausgewertet wird
case leitet eine Bedingung ein
break braucht es um den Zweig zu
beenden
default wird durchlaufen wenn keine andere
Bedingung passt
Auch break und continue kommen im BlueJ-Buch nicht vor, obwohl es diese Anweisungen auch bei Java gibt.
Allerdings sollten diese Anweisungen mit Bedacht eingesetzt werden, sonst wird der Code schwer zu warten.
break beendet die Schleife auf der
Stelle
continue geht direkt wieder zum
Schleifentest
Auch die Operatoren stammen von C ab und sind deshalb schon fast alle bekannt.
Bei den Vergleichsoperatoren gibt es eine Spezialität, die beachtet werden muss:
== macht die Operanden durch Typumwandlung passend. 5 == "5" gibt also true, auch wenn der Typ der Operanden das Resultat fragwürdig macht.
Das kann durch die Verwendung von === verhindert werden. 5 === "5" gibt false, weil der Typ der Operanden nicht der gleiche ist.
Die Daloge sollten sparsam eingesetzt werden, denn Popups sind bei den Usern sehr unbeliebt ...
Ein alert wird benutzt um den User auf etwas hinzuweisen. Wenn ein Server nicht auf einen AJAX-Request reagiert, könnte ein alert angebracht sein, weil der User das Problem sonst gar nicht erkennt.
alert( "Mami, der Server will nicht mehr mitspielen !" ) ;
Die immer wieder beliebte Frage "Sind Sie sicher ?" wird mit dem confirm-Dialog gestellt.
Obwohl kaum ein User wirklich hinschaut, ist es üblich, das Löschen von Einträgen bestätigen zu lassen.
if( confirm("Wollen Sie wirklich sprengen ?") )
explode() ;
Gibt es auch noch, aber das kommt bei mir nie vor. Es dient zur Eingabe einer Zeile.
Aehnlich wie bei der Swing-Programmierung gibt es bei JavaScript Händler die bei bestimmten Events aufgerufen werden.
Der Entwickler hängt seine Händler an die aktiven Elemente an und wenn die erwartete Aktion passiert, wird der Händler vom Browser aufgerufen.
Beliebt ist der onload-Handler im body-Element. Wenn dieser aufgerufen wird, ist die HTML-Seite geladen und der Händler kann damit arbeiten.
Ebenfalls häufig benutzt wird der onclick-Händler, der Klicks auf bestimmte Elemente behandelt.
Für die Validierung von Formularen kann der onsubmit-Händler benutzt werden.
Mit den onblur-Händlern die im Buch herausgestellt werden, habe ich keine guten Erfahrungen gemacht. Meine User (und ich auch !) mögen es nicht, wenn ein Formular schon meckert wenn es erst halb ausgefüllt ist.
Es gibt noch viele weitere Events, aber das schauen Sie besser im Internet nach.
Was oft wichtig ist: wenn ein Händler 0 zurückgibt dann wird die Aktion abgebrochen. So kann man zum Biespiel verhindern, dass ein Link eine neue Seite lädt.
Das sogenannte Event-Bubbling kann das Event-Händling vereinfachen, weil es Händler spart, aber die Sache auch verkomplizieren, weil man Events von verschachtelten Elementen bekommt.
Irgendwann muss der Einsatz von JavaScript auch sichtbare Effekte haben. Dann kommen die DOM-Operationen ins Spiel.
innerHTML ist wörtlich zu nehmen ! Durch eine Zuweisung an innerHTML können Sie nicht nur den Text in einem Element ändern, sondern auch ganze Aeste in den DOM-Baum einfügen.
In einem Projekt musste ich ganze Tabellen mit innerHTML auf die Seite setzen, um eine Beschränkung der alteren IEs zu umgehen :-/
Ist die einfachste Art, eine Referenz auf ein Element zu bekommen.
Wann immer möglich geben Sie dem Element ein id-Attribut und holen Sie es dann mit document.getElementById( "canvas" ),
Wenn Sie Referenzen auf alle Elemente mit einem bestimmten Tag-Namen brauchen, geht das mit getElementsByTagName. Die Referenzen werden in einem Array zurückgegeben.
Beispiel:
// Get all tables on the page
var tables = document.getElementsByTagName( "table" ) ;
// For every table
for( var t = 0; t < tables.length; t++ )
{
// Get all rows in the table
var rows = tables[t].getElementsByTagName( "tr" ) ;
// For every row
for( var r = 0; r < rows.length; r++ )
{
// Get all cells in the row
var cells = rows[r].getElementsByTagName( "td" ) ;
// Do something with the cells
}
}
Durch die Zuweisung an das style-Attribut eines Elements können Sie die Anzeige des Elements ändern:
element.style.color = "red" ; element.style.fontWeight = "bold" ;
Ausser dem Android-Browser bieten alle aktuellen Browser eine mehr oder weniger gute Unterstützung für das JavaScript-Debugging. Sie können Breakpoints setzen, im Single-Step Modus durch den Code laufen und haben eine Konsole wo Sie Code ausprobieren können.
Machen Sie sich mit dem Debugger vertraut, denn dieses Wissen ist sehr nützlich wenn Sie ein Projekt haben.
Die Konsole hilft beim Debuggen, wenn Sie console.log( "i is now " + i ) in Ihren Code einsetzen. So erhalten Sie einen Trace mit dem Sie den Ablauf vrfolgen können, ohne den Code stark zu verzögern.
AJAX heisst eigentlich Asynchronous JavaScript And XML, aber der XML-Teil wird heute auch oft durch reinen Text oder JSON ersetzt.
Das Asynchrone JavaScript aber ist geblieben und stellt den Kern der Technik dar.
Im Grunde geht es darum, im Hintergrund, vom User unbemerkt, Informationen vom Server zu holen und sie in die aktuelle Webseite einzubauen.
Beliebt sind etwa Vorschläge die schon beim Eintippen des Suchwortes auftauchen oder Webseiten die immer wieder aktuelle Informationen einblenden.
Wenn man ältere IEs ignoriert, ist die Infrastruktur nicht besonders kompliziert: * Man instanziert ein XMLHttpRequest-Objekt * Gibt ihm einen Event-Handler * Und schickt den Request ab
// Dieser Code ist nur ein simples Beispiel ohne jede Fehlerbehandlung !
// Request instanzieren
var request = new XMLHttpRequest() ;
// Event-Handler anhängen
request.onreadystatechange = function()
{
if( request.readyState == 4 )
{
// Do something with request.responseText
}
}
// Request abschicken
request.open( "GET", "getdata.php", true ) ;
request.send( null ) ;
Ungewohnt ist das Anhängen des Handlers. Das hat nichts mit dem Request an sich zu tun, sondern mit den Eigenschaften von JavaScript. Auf diese Art kann der Handler auf das Request-Objekt zugreifen ohne dass man eine globale Variable draus machen muss.
Weil die Abfrage des Servers asynchron erfolgt, kann man nicht einfach auf das Resultat warten. Das Request-Objekt ruft die onreadystatechange- Methode auf sobald etwas "interessantes" passiert.
Besonders interessant ist der Abschluss der Abfrage, was mit readyState == 4 signalisiert wird. An diesem Zeitpunkt kann der request.responseText abgefragt werden, der die Serverantwort enthält.
Bei der open-Methode gibt man die HTTP-Methode (GET) das URL (getdata.php) und true für eine asynchrone Abfrage an.
bei jedem Schritt der Abfrage
Die Abkürzung JSON bedeutet JavaScript Object Notation. Aehnlich wie XML wird JSON für den Datenaustausch benutzt.
JSON ist deutlich einfacher als XML aber es kann trotzdem beliebige Objekte und Arrays von Objekten darstellen.
Ein einfaches Objekt sieht in JSON so aus:
{ "name" ; "Daniel", "age" : 42 }
Daraus entsteht ein Objekt mit einem Attribut name mit dem Wert "Daniel" und einem Attribut age mit dem Wert 42.
Objekte können auch verschachtelt werden:
{"name";"Daniel","age":42,"children":[{"name":"Julia","age":9},{"name":"Joelle","age":"6"}]}
Das ist das Objekt aus dem Beispiel oben, erweitert durch ein Attribut children. Im Atrribut children steht ein Array mit zwei weiteren Objekten, eins für Tochter Julia und eins für Tochter Joelle.
Zur Umwandlung von JSON in JavaScript-Objekte gibt es in modernen Browsern ein JSON-Objekt.
// Der Text kommt meist von einer Abfrage an den Server
var text = '{ "name" ; "Daniel", "age" : 42 }' ;
var obj = JSON.parse( text ) ;