JavaScript in Beispielen

JavaScript in Beispielen
1. HTML und JavaScript
JavaScript–Programme sind ein Teil von sog. HTML–Seiten (Hyper Text Markup Language), wie sie im
Internet verwendet werden. Eine reine HTML–Seite besteht aus Text und Formatierungsangaben (engl.
tags), ist also relativ statisch. Die von der Firma Netscape 1995 entwickelte Programmiersprache JavaScript
erlaubt es, Dynamik in solche Seiten zu bringen. JavaScript–Programme werden immer in eine HTML–Seite
eingebettet und greifen gegebenenfalls auf Elemente der HTML–Seite (z.B. Eingabefelder) zu.
Solche HTML–Seiten — mit oder ohne JavaScript–Programm — werden von einer speziellen
Anwendung, dem Browser (z.B. Firefox, Internet Explorer oder Safari), angezeigt und ausgeführt. Der
Browser übersetzt dabei das JavaScript–Programm erst in ausführbare Befehle, wenn die Seite geladen
wird (sog. Interpretieren). Deshalb sind JavaScript–Programme weitgehend plattformunabhängig und
laufen unter Windows oder MacOS genauso wie unter Linux.
Um in JavaScript programmieren zu können, benötigen wir nur zwei HTML–Befehle:
Beispiel 1: hallo.html
Hallo Welt aus HTML!
// Hello-World-Programm mit reinen JavaScript-Befehlen
document.write("Erstes Hallo Welt aus JavaScript!"); //
Textausgabe mit Zeilenwechsel
document.write("1+1 = "); // Textausgabe ohne Zeilenwechsel
document.write(1+1); // Berechnung und Ausgabe einer Zahl
Der oben grau unterlegte Teil ist das JavaScript–Programm, darum herum eine einfache HTML–Seite. In
diesem Beispiel machen der HTML–Teil und das JavaScript–Programm fast das gleiche: Sie geben einen
Text aus, das Programm zusätzlich das Resultat einer Berechnung.
Die beiden HTML–Tags, die wir verwenden müssen sind (beendet mit ) und (beendet mit ). Diesen hellen Teil können Sie als Rahmen für jedes Ihrer
Programme benützen. erzeugt einen Zeilenumbruch.
JavaScript–Programme können auch dazu verwendet werden, Elemente einer HTML–Seite „zum Leben
zu erwecken“. Im nächsten Beispiel bekommen zwei Knöpfe einer HTML–Seite je einen JavaScript–Befehl
zugeordnet. Hier könnten aber auch ganze Programme aktiviert werden.
Seite 1

JavaScript in Beispielen
Beispiel 2: hallo2.html
Umlaute können wegen der Platformunabhängigkeit nicht direkt ein- und ausgegeben werden.
ä (a Umlaut) ergibt ein ä, ö ein ö und ü ein ü.
Das Zusammenspiel HTML–JavaScript über Formulare sehen Sie in späteren Beispielen.
2. Lineare Programme, Variablen
Am Anfang eines Programms können (und werden auch meistens) Variablen deklariert, in denen
während des Programmablaufs Werte abgelegt werden. Sie können in Variablen Zahlen (ganze oder
Dezimalzahlen), Text (sog. Strings), Boolsche Ausdrücke (z.B. true oder false), aber auch komplexe
Strukturen (z.B. Arrays) speichern. Dabei muss der Typ der Variablen meist nicht vorher definiert werden.
JavaScript setzt ihn automatisch bei der ersten Zuweisung.
Beispiel 3: kreis.html
// Berechnung eines Kreises mit einem linearen Programm in JavaScript,
ohne Eingabe
var pi,r,d,f,u; // Zahl pi, Radius r, Duchmesser d, Fläche f, Umfang u
document.write("Kreisberechnung")
pi = 3.1416;
r = 5;
d = 2*r;
document.write("Der Durchmesser beträgt "+d+" cm.");
u = 2*pi*r;
Seite 2

JavaScript in Beispielen
document.write("Der Umfang beträgt "+u+" cm.");
f = pi*r*r;
document.write("Der Flächeninhalt beträgt "+f+" cm^2.");
Das Programm von Beispiel 3 hat den grossen Nachteil, dass der Kreisradius, auf dem die ganzen
Berechnungen beruhen, fix vorgegeben ist, und vom Benutzer, der das Programm laufen lässt, nicht
verändert werden kann. Diese Möglichkeit wird im nächsten Beispiel mit dem Befehl prompt() sinnvoll
ergänzt. Er öffnet ein Pop up–Fenster mit einem Eingabefeld.
Beispiel 4: kreis2.html
// Berechnung eines Kreise mit Eingabe über prompt
u
var pi,r,d,f,u; // Zahl pi, Radius r, Duchmesser d, Fläche f, Umfang
document.write("Kreisberechnung")
pi = 3.1416;
r = prompt("Geben Sie den Radius in cm ein!","5");
d = 2*r;
document.write("Der Durchmesser beträgt "+d+" cm.");
u = 2*pi*r;
document.write("Der Umfang beträgt "+u+" cm.");
f = pi*r*r;
document.write("Der Flächeninhalt beträgt "+f+" cm^2.");
Im nächsten Beispiel werden Boolsche Ausdrücke in Variablen abgelegt. „==“ bedeutet „ist gleich“,
„!“ ist eine Verneinung und „&&“ eine Und–Verknüpfung.
Seite 3

JavaScript in Beispielen
Beispiel 5: luegner.html
// Verwendung von logischen Ausdrücken
var epimenides,luegner,kreter;
document.write("Ein Paradoxon")
luegner = true;
kreter = luegner;
epimenides = kreter;
document.write("Epimenides der Kreter sagt: Alle Kreter sind
Lügner!");
document.write("Ist Epimenides ist kein Lügner (aber dafür
alle Kreter)? ");
document.write(((epimenides==!luegner) && (kreter==luegner))+"");
document.write("Ist Epimenides ist ein Lügner (aber dafür
alle Kreter nicht)? ");
document.write(((epimenides==luegner) && (kreter!=luegner)));
// Beide Audrücke ergeben false.
Seite 4

JavaScript in Beispielen
3. Schleifen
Sollen einzelne Programmteile wiederholt werden, so stellt JavaScript drei verschiedene Arten von
Schleifen zur Verfügung.
Ist die Anzahl der Wiederholungen zu Beginn der Schleife bereits bekannt, so lässt sich die Schleife mit
dem Befehl for steuern.
Beispiel 6: fakultaet.html
// for-Schleife für eine feste Anzahl von Wiederholungen
var n,f; // Natürliche Zahl n, Fakultätswert f
document.write("Fakultät n! = 1*2*3*...*n")
n = prompt("Geben Sie die Zahl n ein!","");
f = 1;
for (var i = 1; i

JavaScript in Beispielen
var n,a; // Zähler n, Verdoppelungswert a
a = 1;
n = 0;
while (a

JavaScript in Beispielen
4. Verzweigungen
Nicht immer können oder sollen bei einem Lauf alle Befehle eines Programms ausgeführt werden. In
den meisten Fällen genügt eine einfache Verzweigung, wie sie mit dem Befehl if…else erzeugt werden
kann.
Beispiel 9: kehrwert.html
// Einfache Verzweigung mit einem if-else-Befehl
var x,k; // Zahl x, Kehrwert k von x
document.write("Kehrwert");
x = prompt("Geben Sie eine Zahl ein!","");
if (x==0) {
document.write("Der Kehrwert für Null ist nicht
definiert!"); }
else {
k = 1/x;
document.write("1/"+x+" = "+k); }
Mehrfache Verzweigungen können mit verschachtelten if–Befehlen realisiert werden. Manchmal wird
die Programmstruktur aber mit dem Befehl switch…case wesentlich übersichtlicher.
Beispiel 10: eltonjohn.html
// Auswahl aus einer Liste mit dem switch-case-Befehl
// Dieser Befehl lässt gegenüber dem if-Befehl mehrere Möglichkeiten der
Verzweigung zu.
var ant; // Antwort ant
document.write("Elton-John-Quiz")
Seite 7

JavaScript in Beispielen
document.write("1 - Hey Jude");
document.write("2 - Candle in the wind");
document.write("3 - Satisfaction");
document.write("4 - Pinball Wizard");
document.write("5 - Your song");
ant = prompt("Welcher Song stammt von Elton John?","");
switch (ant) {
case "2":
case "5": document.write("Richtig!"); break;
case "4": document.write("E. J. singt nur, der Song stammt von
The Who."); break;
default: document.write("Falsch!"); } // Standardantwort
Seite 8

JavaScript in Beispielen
5. Arrays
Bis jetzt haben wir in den Beispielen mit nur weingen Variablen alle nötigen Daten verwalten und
speichern können. Sind viele gleiche Speicherplätze nötig, so bietet sich als Datenstruktur der Array an.
Ein Array ist eine nummerierte Liste von Variablen. Die Nummerierung beginnt immer bei 0. In der
Variablendeklaration am Anfang des Programms wird ein Array explizit über new Array(n) definiert,
wobei n die Anzahl der Speicherplätze ist. Das letzte Element der Arrays erhält so die Nummer n–1.
Beispiel 11: primzahlen.html
// Primzahlensieb des Eratosthenes
// Verwendung von Arrays
var max = 1000,z = new Array(max+1),i; // Anzahl Werte max
// Array z mit den Elementen 0...1000, Zähler i
document.write("Die Primzahlen von 1 bis "+max+"")
z[1] = false;
for (var j = 2; j

JavaScript in Beispielen
6. Funktionen und HTML–Formulare
Funktionen sind Programme innerhalb eines Programms. Wird z.B. eine Berechnung in einem
Programm an mehreren Stellen benötigt, so kann eine Funktion anfänglich definiert und dann an den
entsprechenden Stellen aufgerufen werden.
Eine Funktion beginnt mit einem Kopf, in dem function Funktionsname steht. In Klammern folgen die
Variablen, die an die Funktion beim Aufruf übergeben werden.
Als nächstes kommt die Variablendeklaration der Funktion. Beachten Sie, dass die hier definierten
Variablen nur innerhalb der Funktion gültig sind und nach dem Beenden der Funktion nicht mehr
verwendet werden können.
Am Schluss der Funktion kann ein Wert definiert werden, der von der Funktion als Resultat zurück
gegeben wird. Er folgt dem Befehl return.
Beispiel 12: kreisring.html
// Berechnung eines Kreisrings mit einer Funktion
// Definition der Funktion im head-Teil
function kreis(r) {
var pi = 3.1416; // Zahl pi (Wert direkt zugeordnet)
return pi*r*r; }
// Das eigentliche Programm im body-Teil
var ri,ra,f; // Innerer ri und äusserer Radius ra, Fläche f
document.write("Kreisringberechnung")
ri = prompt("Geben Sie den inneren Radius in cm ein!","");
ra = prompt("Geben Sie den aeusseren Radius in cm ein!","");
f = kreis(ra)-kreis(ri); // Aufruf der Funktion
document.write("Der Flächeninhalt beträgt "+f+" cm^2.");
Seite 10

JavaScript in Beispielen
Funktion und Programm sind in zwei verschiedenen Bereichen der HTML–Seite platziert worden. Den
Nutzen dieser Massnahme sehen Sie beim nächsten Beispiel. Funktionen werden im Kopfteil der Seite, der
mit und markiert ist, untergebracht, während das Programm im Hauptteil, der mit
beginnt und mit endet, folgt.
Funktionen können auch direkt aus HTML–Formularen aufgerufen werden und z.B. eine Berechnung
nach einem Knopfdruck ausführen. Das nächste Beispiel berechnet die gleichen Daten wie Beispiel 3,
nutzt aber ein HTML–Formular zur Ein- und Ausgabe. Ein Formular beginnt mit und
endet mit . Mit dem tag wird ein Ein- und Ausgabefeld, mit ein Knopf definert.
Beispiel 13: kreis3.html
// Kreisberechnung mit Ein- und Ausgabe über ein HTML-Formular
function rechnen() {
var r,d,u,f;
r = document.KreisForm.r.value;
d = 2*r;
u = 2*Math.PI*r;
f = Math.PI*r*r;
document.KreisForm.d.value = d;
document.KreisForm.u.value = u;
document.KreisForm.f.value = f; }
Kreisberechnung
r =
Seite 11

JavaScript in Beispielen
Durchmesser: d =
Umfang: U =
Fläche: F =
Beachten Sie, dass die Funktion ihre Resultate direkt ins Formular schreibt (hier z.B.:
document.KreisForm.d.value = …) und keinen return–Befehl benutzt, denn die Berechnungen werden ja
nicht an ein JavaScript–Programm, sondern an ein HTML–Formular zurückgegeben.
Seite 12

JavaScript in Beispielen
7. Objekte
JavaScript ist eine objektorientierte Programmiersprache, wie auch die meisten anderen heute
verwendeten Programmiersprachen (z.B. C++). Deshalb soll zum Schluss diese Idee etwas genauer
beleuchtet werden.
Ein Beispiel eines Objekts sind die Fenster (window–Objekt), in denen HTML–Seiten mit Text und
Bildern gestaltet werden oder ein Programm seine Daten ausgibt. Alle Fenster haben — so verschieden sie
auch aussehen mögen — viele Gemeinsamkeiten: Sie haben eine Titelleiste und einen Rahmen, vielleicht
Rollbalken oder die für Browserfenster typischen Navigationsknöpfe. Dies sind Eigenschaften des Fenster–
Objekts. Fenster können geöffnet oder geschlossen, vergrössert oder verkleinert werden. Dies sind
Methoden (Funktionen), die zum Fenster–Objekt gehören.
Wird von einem Programm ein Fenster erzeugt, erstellt das Programm eine sog. Instanz des Fenster–
Objekts. Alle erzeugten Fenster bekommen so die gleichen möglichen Eigenschaften (z.B. mit oder ohne
Rollbalken) und die gleichen Methoden (z.B. Fenster öffnen oder schliessen).
Ein anderes Beispiel für ein Objekt sind die Zeichenketten (string–Objekt). Eine Zeichenkette hat als
Eigenschaft ihre Länge. Methoden verändern z.B. die Schriftart oder -farbe, fügen Zeichen ein oder
schneiden sie aus.
Die Knöpfe einer HTML–Seite sind auch Objekte mit Eigenschaften (z.B. Beschriftung). Zudem können
Sie auf Aktivitäten des Benutzers reagieren und besitzen entsprechende Funktionen, sog. Event Handler.
Arrays sind ebenfalls Objekte. Dieses Objekt besitzt auch Funktionen zur Erzeugung von Instanzen,
sog. Konstruktor.
Beispiele für verwendete Methoden in den Beispielprogrammen:
Beispiel Befehl Erklärung
hallo.html document.write() Methode write() des Objekts document zur Textausgabe.
hallo2.html onklick Event Handler des Objekts button für die Reaktion auf einen
Mausklick.
alert()
Methode des Objekts window für ein Pop up–Fenster.
kreis2.html prompt() Methode des Objekts window für ein Pop up–Fenster mit
Eingabefeld.
primzahlen.html Array() Konstruktor des Objekts Array zur Erzeugung eines Arrays.
kreis3.html Math.PI Eigenschaft PI des Objekts Math, liefert den Wert von π.
Seite 13