Sprachaufbau und Syntax

JavaScript ist eine von Netscape entwickelte Scriptsprache. JavaScript ist objektorientiert und ähnelt vom Aufbau her ein bißschen der Java-Syntax, ist jedoch viel simpler. JavaScripte werden in HTML-Seiten eingebettet und vom Browser interpretiert und ausgeführt. JavaScript-fähige Browser sind derzeit der Netscape-Navigator und Microsofts InternetExplorer (...dessen JS-Implementation jedoch z.Zt. sehr mäßig ist).

Der Sinn und Zweck von JavaScript ist eine erweiterte Funktionalität von WWW-Seiten. Auf viele Elemente einer HTML-Seite kann zugegriffen und reagiert werden, ebenso auf Elemente des Browsers. Interaktionen, die sonst oft nur durch CGIs zustande kamen, können nun direkt vom Browser gehandhabt werden. z.B. Formularüberprüfung, dynamischer Seitenaufbau, Animationen, Rechenblätter, Laufschriften, Framesteuerung, dynamische Links etc.

JavaScript ist einer Interpreter-Sprache, d.H. das Programm resp. Script wird nicht in MaschinenCode übersetzt, sondern der Browser arbeitet es Zeile für Zeile ab. Der Quelltext wird in einer HTML-Seite innerhalb einer <SCRIPT>-Umgebung eingeschachtelt. Eventhandler können auch in einen HTML-Tag eingebettet sein. Als Attribut für den <SCRIPT>-Tag wird noch die verwendete ScriptSprache, also JavaScript angegeben: <SCRIPT LANGUAGE="JavaScript">. Diese Umgebung steht normalerweise innerhalb der <HEAD>-Umgebung, kann jedoch auch ab NS 2.x innerhalb der <BODY>-Umgebung an beliebiger Stelle verwendet werden.
Für Browser, die nicht JS-fähig sind, kann in der <NOSCRIPT>-Umgebung auf die fehlende Funktionalität hingewiesen werden. Für diese sollte man das Script in einem Kommentar "verstecken", da es sonst in der Seite angezeigt wird:

 <!-- HIDING THE SCRIPT FROM OTHER BROWSERS                            
     JavaScript Code ...                                                  
     // STOP HIDING FROM OTHER BROWSERS -->

Sprachelemente

Die Sprachelemente von JavaScript sind im wesentlichen:

Funktionen (eingebaute Standard-Funktionen und selbsterstellte)
Objekte (wie document, string, img z.B.)
Methoden (Funktionen, die sich auf Objekte beziehen)
Variablen (auch Felder)
Operatoren, Kontroll- und Schleifenstrukturen
Event-Handler (die auf ein bestimmtes Ereignis reagieren)

JavaScript hat eine Reihe von reservierten Worten, die nicht als eigene Funktions- oder Variablennamen gewählt werden dürfen.

Wichtig ist auch die Unterscheidung von Groß- und Kleinschreibung.

Funktionen

Wie andere Programmiersprachen auch, erlaubt JavaScript das Bilden von Funktionen. Die Syntax ist (optionale Elemente sind durch [ ] markiert):

  function functionName([ [parameter][,...] ])
   {
     [JavaScript-Anweisung;]
     [noch mehr JavaScript-Anweisungen...]
     [return [something];]
   }

Die Syntax eines Funktionsaufrufs ist:

 [returnvalue =] functionName([parameter][,...] ]);

Die Übergabeparameter einer Funktion können auch weggelassen werden, resp. teilwese weggelassen werden. Diese fehlenden Parameter sind dann einfach undefined.
Bsp.:

 function paraTest(caller,a,b,c){
 	alert(caller+"\na: "+a+" b: "+b+" c: "+c);
 }

Objekte und Methoden

JavaScript ist objektorientiert, d.H. an Daten und Datenstrukturen können spezifische Funktionen und Eigenschaften angebunden sein. Von Haus aus gibt es Standardobjekte, wie zB.

navigator, window, frame,
document, link, string

etc.
Methoden sind an Objekte gebundene Funktionen. Durch diese Bindung werden Fehler vermieden, da die Methoden nur auf übergeordnetes Objekt angewendet werden können: So kann die Methode length auf ein String-Objekt angewendet werden, nicht aber zB. auf eine Integer-Variable.

Beispiel: Um einen Text auszugeben benutzt man die Methode write des document-Objekts:
document.write("Hello world!");

Variablen

Mit Hilfe von Variablen können Daten gespeichert werden. Der Inhalt einer Variable kann zur Laufzeit gesetzt, gelesen, veraendert oder wieder gelöscht werden.
Gültige Typen für Variablen sind:

numerische Werte wie 23 oder 200.1
die logischen Werte true und false
Zeichenketten (Strings)
null

Bei der Variablendeklaration braucht der Typ der Variable nicht angegeben zu werden. Der Datentyp ist dynamisch, d.H. er wird automatisch in den beim Umgang mit der Variable gebrauchten Typ konvertiert. Durch die dynamische Typenfestlegung ist es auch möglich, einer Variable zuerst einen Integer und danach im Scriptverlauf einen String zuzuweisen. Wenn eine gemischte Zuweisung auftritt, konvertiert JavaScript diese Zuweisung in einen String.
var test = "Die Antwort ist" + 42; wird zu einer Stringvariable, die Die Antwort ist 42 enthält.

Die Deklaration geschieht innerhalb der <SCRIPT>, dort als globale Variablen außerhalb oder als lokale Variablen innerhalb einer Funktion. Zur Definition kann (der Übersicht halber) das Schlüsselwort var verwendet werden.
Beispiele:

 var x=23;
 var y;
 var z=x++:
 var txt="foo"+"bar";

Operatoren, Kontroll- und Schleifenstrukturen

JavaScript kennt die aus C bekannten Kontroll- und Schleifenstrukturen.

Als Entscheidungsstrukturen gibt es:

1)
   if (expression)
	do_this()
   [else{
	do_that();
	and_that();
   };]

2)
   (expression) ? do_this() : do_that();

Um Anweisungen zu wiederholen, gibt es 2 Schleifenstrukturen:

1)
for ([initial-expression;] [condition;] [increment-expression]) {
   [statements]
}

2)
while (condition) {
   [statements]
}

Die beiden Schleifen lassen sich noch mit Hilfe der aus C bekannten break und continue Anweisungen manipulieren.

Die Funktionalität und die Rangfolge der Operatoren entspricht der der von C-Operatoren:

	comma , 
	assignment = += -= *= /= %= <<= >>= >>>= &= ^= |= 
	conditional ?: 
	logical-or || 
	logical-and &&
	bitwise-or | 
	bitwise-xor ^ 
	bitwise-and & 
	equality == != 
	relational < <= > >= 
	bitwise shift << >> >>> 
	addition/subtraction + - 
	multiply/divide * / % 
	negation/increment ! ~ - ++ -- 
	call, member () [] .

Event Handler

Event-Handler sind Funktionen, die auf bestimmte Aktionen des Users resp. Browsers reagieren. Sie können dann zB. eine Funktion aufrufen, die die Userinnen-Aktion auswertet. EventHandler stehen immer innerhalb eines HTML-Tags.
Die Syntax ist:

<HTML-TAG eventHandler="JavaScript Code [; more code]">

Es gibt eine ganze Reihe von Event-Handlern:

onAbort: Dies ist ein Event-Handler des IMG-Objekts. Er tritt dann in Aktion, wenn das Laden eines Bildes abgebrochen wurde.
onBlur: Dieser Event-Handler gehört zu den select, text & textarea-Objekten einer FORM. Er tritt dann in Aktion, wenn das gewählte Objekt nicht mehr aktiv ist, also z.B. per Mausklick in ein anderes Feld gesprungen wird.; Zu diesem Handler gibt es ein Beispiel.
onChange: Dieser Event-Handler gehört zu den select, text & textarea-Objekten einer FORM. Er tritt dann in Aktion, wenn das gewählte Objekt nicht mehr aktiv ist und sich der Wert resp. Inhalt des Feldes geändert hat.
onClick: Dieser Event-Handler gehört zu den button, checkbox, radio, link, reset & submit-Objekten einer FORM. Er tritt in Aktion, wenn auf eines dieser Objekte geklickt wird.
onError: Dieser Event-Handler gehört zu den window & img-Objekten. Er tritt dann in Aktion, wenn beim Laden eines Dokuments oder eines Bildes ein Fehler auftritt.
onFocus: Dieser Event-Handler gehört zu den select, text & textarea-Objekten einer FORM. Er tritt dann in Aktion, wenn das gewählte Objekt aktiv wird, ist, also das Objekt z.B. per Mausklick oder Tabulator-Taste angewählt wird.
onLoad: Der onLoad-Handler wird aktiv, wenn ein window-Objekt oder alle Frames eines FRAMESETS geladen sind. Er steht im <BODY>-Tag des Dokuments.
onMouseOut: Dieser Handler wird aktiv, der Mauszeiger eine AREA einer client-side Imagemap verlassen wird. Er gehört zu den AREA & LINK-Objekten.; Dazu gibt es Beispiel
onMouseOver: Dieser Handler tritt in Aktion, wenn der Mauszeiger über einem LINK-Objekt ist.; Dazu gibt es Beispiel
onReset: Dieser Handler gehört zum FORM-Objekt. Er tritt dann in Aktion, wenn das Formular durch Klick auf den reset- Button in den Ursprungszustand zurückgesetzt wird.
onSelect: Ein Select-Event wird ausgelöst, wenn in einem text- oder textarea-Feld eines Formulars ein Text mit der Maus ausgewählt resp. markiert wird.
onSubmit: Dieser Handler wird aktiv, wenn ein FORM-Objekt übermittelt wird, z.B. durch Klick auf den submit-Button. Er gehört zum FORM-Objekt. Wenn die aufgerufene Funktion als Return-Wert FALSE zurückgibt, wird der Submit-Vorgang nicht ausgeführt, fehlt ein Return-Wert oder ist er true, so wird der Submit-Vorgang ausgeführt.; Zu diesem Handler gibt es ein Beispiel.
onUnload: Dieser Handler wird aktiv, wenn ein Dokument verlassen wird. Er gehört zum window-Objekt und steht im <BODY> oder <FRAMESET>-Tag.

Reservierte Worte

Die Worte der folgenden Liste sind reservierte Worte, sie können nicht als Funktions-, Objekt-, Variablen oder Methodennamen genutzt werden. Einige dieser Worte werden noch nicht von JavaScript verwendet, sind aber schonmal für spätere Verwendungszwecke reserviert.

abstract
boolean
break
byte
case
catch
char
class
const
continue
default
do
double

else
extends
false
final
finally
float
for
function
goto
if
implements
import
in

instanceof
int
interface
long
native
new
null
package
private
protected
public
return
short

static
super
switch
synchronized
this
throw
throws
transient
true
try
var
void
while

with

Wort-Tester

Mit diesem Formular können Sie nachsehen, ob ein Wort reserviert ist, oder nicht.

Groß- und Kleinschreibung

Wichtig ist die Unterscheidung zwischen Groß- und Kleinbuchstaben bei Bezeichnernamen, Funktionsnamen etc. Das folgende Beispiel veranschaulicht, das die Variablen test und TEST nicht die gleiche Variable meint.

<SCRIPT LANGUAGE="JavaScript">
 var testvar=1;
 var TESTVAR=2;
 document.write("testvar != TESTVAR: "+testvar+"!="+TESTVAR);
</SCRIPT<