Dynamische Webseiten-Generierung, Vorlesung 6

<- Vorlesung 5 Übungen Vorlesung 7 ->

Einführung in JavaScript

Nachdem wir damit vertraut sind, wie mit PHP auf dem WWW-Server Seiten dynamisch erzeugt werden können, wenden wir uns nun wieder dem Client zu. Die Sprache JavaScript wurde von der Firma Netscape entwickelt und erstmals 1995 in den Netscape Navigator 2.0 integriert. Ursprünglich hieß die Sprache LiveScript, wurde aber dann in JavaScript umbenannt.

Kurz gesagt ist JavaScript eine fast vollwertige Programmiersprache, die

Es gibt mittlerweile eine Reihe von JavaScript-Versionen, die von verschiedenen Browser-Versionen unterschiedlich gut verarbeitet werden können:

Allerdings verhalten sich die Browser oft nicht so, wie von den Herstellern angekündigt. Es empfiehlt sich also auf alle Fälle ein Test der JavaScript-Programme mit verschiedenen Browsern.

Literatur:
Eine systematische Einführung ist bei SELFHTML von Stefan Münz enthalten. Anhand zahlreicher Beispiele wird bei JavaScript für alle von Uwe Brinkmann in die Thematik eingeführt. Dort gibt es auch eine Seite mit weiteren Hinweisen auf Literatur.

Wir werden uns in etwa an der Vorgehensweise bei SELFHTML orientieren.

1) Der Einstieg

JavaScript-Befehle werden durch den Befehl 
	<script language="JavaScript">
		hier steht das JavaScript-Programm
	</script>
eingeschlossen. Damit bei Browsern, die kein JavaScript beherrschen, der JavaScript-Programm-Text nicht angezeigt wird, schließen wir in üblicherweise in HTML-Kommentare ein: 
	<script language="JavaScript">
	<--
		hier steht das JavaScript-Programm
	//-->
	</script>
Es gibt keine festen Regeln, wo das JavaScript-Programm auf der HTML-Seite stehen soll. Normalerweise setzt man alles, was beim Laden der Datei ausgeführt werden soll (z.B. die Definition von eigenen Funktionen), in den Kopfteil (Head). Soll ein JavaScript-Programm HTML-Text auf der Seite erzeugen (wie z.B. Datumsangaben), so steht dieser Programmteil üblicherweise an der Stelle, an der der Text erscheinen soll.

In unserem ersten JavaScript-Programm öffnen wir ein neues Fenster mit etwas Text: 

	<HTML>
	<HEAD>
	<TITLE>
	JavaScript-Einführung
	</TITLE>
	<script language="JavaScript">
	<!--
	   alert("Hallo");
	//-->
	</script>
	</HEAD>
	<BODY>
	Test  
	</BODY>
Wir greifen ein wenig voraus und sehen, wie wir JavaScript mit Formularen verbinden können. Zuerst definieren wir uns eine Funktion, die dann mit einem Klick auf einen Button gestartet wird: 
	<HTML>
	<HEAD>
	<TITLE>
	JavaScript-Einführung
	</TITLE>
	<script language="JavaScript">
	<!--
		function Sekunden( Tage ) {
		   alert(3600*24*Tage);
		}
	//-->
	</script>
	</HEAD>
	<BODY>
	Test  
	<FORM>
	<INPUT TYPE="button" VALUE="Start" onClick="Sekunden(7)">
	</FORM>
	</BODY>
Achtung: Im Gegensatz zu PHP wird bei JavaScript die Groß- und Kleinschreibung strikt unterschieden.

2) Variable

Wir könnten auch eine zusätzliche Variable einführen: 
	function Sekunden( Tage ) {
		sek = 3600*24*Tage;
	   alert(sek);
	}
An diesem Beispiel sehen wir, daß Variable in JavaScript im Gegensatz zu PHP ohne $-Zeichen geschrieben werden. Überhaupt müssen Variablen- oder Funktionsnamen folgendermaßen gewählt werden: Die Definition von Variablen verläuft bei JavaScript recht freizügig. Während man z.B. bei Java genau angeben muß, ob eine Variable vom Typ String, Integer oder dergleichen ist, versucht JavaScript herauszufinden, von welchem Typ eine Variable ist. Allerdings unterscheidet JavaScript nur zwei Arten von elementaren Variablen: Zahlen und Zeichenketten. 
	i = 10;
	j = 1.3;
	a = "Hallo";
Die Variablen i und j werden als Zahlen interpretiert, die Variable a als Zeichenkette. Kurz gesagt, alles was mit " eingeschlossen wird, ist Zeichenkette.

Variable werden meist mittels des reservierten Worts var definiert.

3) Programmablauf

Die Syntax von JavaScript-Programmen ist stark an Java und C angelehnt: Gleich ein Beispiel: 
	function langerText() {
		var x = "";
		for (i=0;i<10;i++) {
			x = x + "Hallo\n";
		}
		alert(x);
	}
Hier wird der Text Hallo 10 mal aneinandergehängt und danach ausgegeben. Man beachte, daß das +-Zeichen hier Zeichenketten aneinanderhängt, da die erste Variable eine Zeichenkette ist. Wäre die erste Variable vom Typ Zahl, so wird JavaScript versuchen, die auftretenden Zahlen zu addieren.

Eine Kurzform zu 

	x = x + "Hallo\n";
ist 
	x += "Hallo\n";
d.h. alles was rechts von = steht, wird zu x hinzugefügt (oder addiert, falls x eine Zahlvariable ist). Analog gibt es bei Zahlvariablen die Befehle "-=", "*=", "/=".

Obwohl es wahrscheinlich etwas langweilig ist, betrachten wir doch noch einmal die verschiedenen Möglichkeiten Schleifen zur realisieren.

Der Befehl 

	i=0;
	while (i<10) {
		document.write(i+"<BR>");
		i++;
	}
schreibt die Werte der Variablen i von 0 bis 9 direkt in die HTML-Seite (an der Stelle, an der der Befhel steht). 
	i=0;
	do {
		document.write(i+"<BR>");
		i++;
	} while (i<10);
verhält sich genauso, mit dem Unterschied, dass die Schleife egal wie der Wert von i zu Beginn ist, mindestens einmal durchlaufen wird. 
	for (i=0;i<10;i++) {
		document.write(i+"<BR>");
	}
Dies ist die bereits aus PHP bekannte for-Schleife. Initialisierung, Test und Hochzählen wird zusammen in einer Zeile festgelegt.

<- Vorlesung 5 Übungen Vorlesung 7 ->

Alfred.Wassermann@uni-bayreuth.de