JavaScript in Beispielen
JavaScript in Beispielen
JavaScript in Beispielen
Erfolgreiche ePaper selbst erstellen
Machen Sie aus Ihren PDF Publikationen ein blätterbares Flipbook mit unserer einzigartigen Google optimierten e-Paper Software.
<strong>JavaScript</strong> <strong>in</strong> <strong>Beispielen</strong><br />
1. HTML und <strong>JavaScript</strong><br />
<strong>JavaScript</strong>–Programme s<strong>in</strong>d e<strong>in</strong> Teil von sog. HTML–Seiten (Hyper Text Markup Language), wie sie im<br />
Internet verwendet werden. E<strong>in</strong>e re<strong>in</strong>e HTML–Seite besteht aus Text und Formatierungsangaben (engl.<br />
tags), ist also relativ statisch. Die von der Firma Netscape 1995 entwickelte Programmiersprache <strong>JavaScript</strong><br />
erlaubt es, Dynamik <strong>in</strong> solche Seiten zu br<strong>in</strong>gen. <strong>JavaScript</strong>–Programme werden immer <strong>in</strong> e<strong>in</strong>e HTML–Seite<br />
e<strong>in</strong>gebettet und greifen gegebenenfalls auf Elemente der HTML–Seite (z.B. E<strong>in</strong>gabefelder) zu.<br />
Solche HTML–Seiten — mit oder ohne <strong>JavaScript</strong>–Programm — werden von e<strong>in</strong>er speziellen<br />
Anwendung, dem Browser (z.B. Firefox, Internet Explorer oder Safari), angezeigt und ausgeführt. Der<br />
Browser übersetzt dabei das <strong>JavaScript</strong>–Programm erst <strong>in</strong> ausführbare Befehle, wenn die Seite geladen<br />
wird (sog. Interpretieren). Deshalb s<strong>in</strong>d <strong>JavaScript</strong>–Programme weitgehend plattformunabhängig und<br />
laufen unter W<strong>in</strong>dows oder MacOS genauso wie unter L<strong>in</strong>ux.<br />
Um <strong>in</strong> <strong>JavaScript</strong> programmieren zu können, benötigen wir nur zwei HTML–Befehle:<br />
Beispiel 1: hallo.html<br />
<br />
Hallo Welt aus HTML!<br />
<br />
// Hello-World-Programm mit re<strong>in</strong>en <strong>JavaScript</strong>-Befehlen<br />
document.write("Erstes Hallo Welt aus <strong>JavaScript</strong>!"); //<br />
Textausgabe mit Zeilenwechsel<br />
document.write("1+1 = "); // Textausgabe ohne Zeilenwechsel<br />
document.write(1+1); // Berechnung und Ausgabe e<strong>in</strong>er Zahl<br />
<br />
<br />
Der oben grau unterlegte Teil ist das <strong>JavaScript</strong>–Programm, darum herum e<strong>in</strong>e e<strong>in</strong>fache HTML–Seite. In<br />
diesem Beispiel machen der HTML–Teil und das <strong>JavaScript</strong>–Programm fast das gleiche: Sie geben e<strong>in</strong>en<br />
Text aus, das Programm zusätzlich das Resultat e<strong>in</strong>er Berechnung.<br />
Die beiden HTML–Tags, die wir verwenden müssen s<strong>in</strong>d (beendet mit ) und (beendet mit ). Diesen hellen Teil können Sie als Rahmen für jedes Ihrer<br />
Programme benützen. erzeugt e<strong>in</strong>en Zeilenumbruch.<br />
<strong>JavaScript</strong>–Programme können auch dazu verwendet werden, Elemente e<strong>in</strong>er HTML–Seite „zum Leben<br />
zu erwecken“. Im nächsten Beispiel bekommen zwei Knöpfe e<strong>in</strong>er HTML–Seite je e<strong>in</strong>en <strong>JavaScript</strong>–Befehl<br />
zugeordnet. Hier könnten aber auch ganze Programme aktiviert werden.<br />
Seite 1
<strong>JavaScript</strong> <strong>in</strong> <strong>Beispielen</strong><br />
Beispiel 2: hallo2.html<br />
<br />
<br />
<br />
<br />
<br />
<br />
Umlaute können wegen der Platformunabhängigkeit nicht direkt e<strong>in</strong>- und ausgegeben werden.<br />
ä (a Umlaut) ergibt e<strong>in</strong> ä, ö e<strong>in</strong> ö und ü e<strong>in</strong> ü.<br />
Das Zusammenspiel HTML–<strong>JavaScript</strong> über Formulare sehen Sie <strong>in</strong> späteren <strong>Beispielen</strong>.<br />
2. L<strong>in</strong>eare Programme, Variablen<br />
Am Anfang e<strong>in</strong>es Programms können (und werden auch meistens) Variablen deklariert, <strong>in</strong> denen<br />
während des Programmablaufs Werte abgelegt werden. Sie können <strong>in</strong> Variablen Zahlen (ganze oder<br />
Dezimalzahlen), Text (sog. Str<strong>in</strong>gs), Boolsche Ausdrücke (z.B. true oder false), aber auch komplexe<br />
Strukturen (z.B. Arrays) speichern. Dabei muss der Typ der Variablen meist nicht vorher def<strong>in</strong>iert werden.<br />
<strong>JavaScript</strong> setzt ihn automatisch bei der ersten Zuweisung.<br />
Beispiel 3: kreis.html<br />
<br />
<br />
// Berechnung e<strong>in</strong>es Kreises mit e<strong>in</strong>em l<strong>in</strong>earen Programm <strong>in</strong> <strong>JavaScript</strong>,<br />
ohne E<strong>in</strong>gabe<br />
var pi,r,d,f,u; // Zahl pi, Radius r, Duchmesser d, Fläche f, Umfang u<br />
document.write("Kreisberechnung")<br />
pi = 3.1416;<br />
r = 5;<br />
d = 2*r;<br />
document.write("Der Durchmesser beträgt "+d+" cm.");<br />
u = 2*pi*r;<br />
Seite 2
<strong>JavaScript</strong> <strong>in</strong> <strong>Beispielen</strong><br />
document.write("Der Umfang beträgt "+u+" cm.");<br />
f = pi*r*r;<br />
document.write("Der Flächen<strong>in</strong>halt beträgt "+f+" cm^2.");<br />
<br />
<br />
Das Programm von Beispiel 3 hat den grossen Nachteil, dass der Kreisradius, auf dem die ganzen<br />
Berechnungen beruhen, fix vorgegeben ist, und vom Benutzer, der das Programm laufen lässt, nicht<br />
verändert werden kann. Diese Möglichkeit wird im nächsten Beispiel mit dem Befehl prompt() s<strong>in</strong>nvoll<br />
ergänzt. Er öffnet e<strong>in</strong> Pop up–Fenster mit e<strong>in</strong>em E<strong>in</strong>gabefeld.<br />
Beispiel 4: kreis2.html<br />
<br />
<br />
// Berechnung e<strong>in</strong>es Kreise mit E<strong>in</strong>gabe über prompt<br />
u<br />
var pi,r,d,f,u; // Zahl pi, Radius r, Duchmesser d, Fläche f, Umfang<br />
document.write("Kreisberechnung")<br />
pi = 3.1416;<br />
r = prompt("Geben Sie den Radius <strong>in</strong> cm e<strong>in</strong>!","5");<br />
d = 2*r;<br />
document.write("Der Durchmesser beträgt "+d+" cm.");<br />
u = 2*pi*r;<br />
document.write("Der Umfang beträgt "+u+" cm.");<br />
<br />
f = pi*r*r;<br />
document.write("Der Flächen<strong>in</strong>halt beträgt "+f+" cm^2.");<br />
<br />
Im nächsten Beispiel werden Boolsche Ausdrücke <strong>in</strong> Variablen abgelegt. „==“ bedeutet „ist gleich“,<br />
„!“ ist e<strong>in</strong>e Verne<strong>in</strong>ung und „&&“ e<strong>in</strong>e Und–Verknüpfung.<br />
Seite 3
<strong>JavaScript</strong> <strong>in</strong> <strong>Beispielen</strong><br />
Beispiel 5: luegner.html<br />
<br />
<br />
// Verwendung von logischen Ausdrücken<br />
var epimenides,luegner,kreter;<br />
document.write("E<strong>in</strong> Paradoxon")<br />
luegner = true;<br />
kreter = luegner;<br />
epimenides = kreter;<br />
document.write("Epimenides der Kreter sagt: Alle Kreter s<strong>in</strong>d<br />
Lügner!");<br />
document.write("Ist Epimenides ist ke<strong>in</strong> Lügner (aber dafür<br />
alle Kreter)? ");<br />
document.write(((epimenides==!luegner) && (kreter==luegner))+"");<br />
document.write("Ist Epimenides ist e<strong>in</strong> Lügner (aber dafür<br />
alle Kreter nicht)? ");<br />
document.write(((epimenides==luegner) && (kreter!=luegner)));<br />
// Beide Audrücke ergeben false.<br />
<br />
<br />
Seite 4
<strong>JavaScript</strong> <strong>in</strong> <strong>Beispielen</strong><br />
3. Schleifen<br />
Sollen e<strong>in</strong>zelne Programmteile wiederholt werden, so stellt <strong>JavaScript</strong> drei verschiedene Arten von<br />
Schleifen zur Verfügung.<br />
Ist die Anzahl der Wiederholungen zu Beg<strong>in</strong>n der Schleife bereits bekannt, so lässt sich die Schleife mit<br />
dem Befehl for steuern.<br />
Beispiel 6: fakultaet.html<br />
<br />
<br />
// for-Schleife für e<strong>in</strong>e feste Anzahl von Wiederholungen<br />
var n,f; // Natürliche Zahl n, Fakultätswert f<br />
document.write("Fakultät n! = 1*2*3*...*n")<br />
n = prompt("Geben Sie die Zahl n e<strong>in</strong>!","");<br />
f = 1;<br />
for (var i = 1; i
<strong>JavaScript</strong> <strong>in</strong> <strong>Beispielen</strong><br />
var n,a; // Zähler n, Verdoppelungswert a<br />
a = 1;<br />
n = 0;<br />
while (a
<strong>JavaScript</strong> <strong>in</strong> <strong>Beispielen</strong><br />
4. Verzweigungen<br />
Nicht immer können oder sollen bei e<strong>in</strong>em Lauf alle Befehle e<strong>in</strong>es Programms ausgeführt werden. In<br />
den meisten Fällen genügt e<strong>in</strong>e e<strong>in</strong>fache Verzweigung, wie sie mit dem Befehl if…else erzeugt werden<br />
kann.<br />
Beispiel 9: kehrwert.html<br />
<br />
<br />
// E<strong>in</strong>fache Verzweigung mit e<strong>in</strong>em if-else-Befehl<br />
var x,k; // Zahl x, Kehrwert k von x<br />
document.write("Kehrwert");<br />
x = prompt("Geben Sie e<strong>in</strong>e Zahl e<strong>in</strong>!","");<br />
if (x==0) {<br />
document.write("Der Kehrwert für Null ist nicht<br />
def<strong>in</strong>iert!"); }<br />
else {<br />
k = 1/x;<br />
document.write("1/"+x+" = "+k); }<br />
<br />
<br />
Mehrfache Verzweigungen können mit verschachtelten if–Befehlen realisiert werden. Manchmal wird<br />
die Programmstruktur aber mit dem Befehl switch…case wesentlich übersichtlicher.<br />
Beispiel 10: eltonjohn.html<br />
<br />
<br />
// Auswahl aus e<strong>in</strong>er Liste mit dem switch-case-Befehl<br />
// Dieser Befehl lässt gegenüber dem if-Befehl mehrere Möglichkeiten der<br />
Verzweigung zu.<br />
var ant; // Antwort ant<br />
document.write("Elton-John-Quiz")<br />
Seite 7
<strong>JavaScript</strong> <strong>in</strong> <strong>Beispielen</strong><br />
document.write("1 - Hey Jude");<br />
document.write("2 - Candle <strong>in</strong> the w<strong>in</strong>d");<br />
document.write("3 - Satisfaction");<br />
document.write("4 - P<strong>in</strong>ball Wizard");<br />
document.write("5 - Your song");<br />
ant = prompt("Welcher Song stammt von Elton John?","");<br />
switch (ant) {<br />
case "2":<br />
case "5": document.write("Richtig!"); break;<br />
case "4": document.write("E. J. s<strong>in</strong>gt nur, der Song stammt von<br />
The Who."); break;<br />
default: document.write("Falsch!"); } // Standardantwort<br />
<br />
<br />
Seite 8
<strong>JavaScript</strong> <strong>in</strong> <strong>Beispielen</strong><br />
5. Arrays<br />
Bis jetzt haben wir <strong>in</strong> den <strong>Beispielen</strong> mit nur we<strong>in</strong>gen Variablen alle nötigen Daten verwalten und<br />
speichern können. S<strong>in</strong>d viele gleiche Speicherplätze nötig, so bietet sich als Datenstruktur der Array an.<br />
E<strong>in</strong> Array ist e<strong>in</strong>e nummerierte Liste von Variablen. Die Nummerierung beg<strong>in</strong>nt immer bei 0. In der<br />
Variablendeklaration am Anfang des Programms wird e<strong>in</strong> Array explizit über new Array(n) def<strong>in</strong>iert,<br />
wobei n die Anzahl der Speicherplätze ist. Das letzte Element der Arrays erhält so die Nummer n–1.<br />
Beispiel 11: primzahlen.html<br />
<br />
<br />
// Primzahlensieb des Eratosthenes<br />
// Verwendung von Arrays<br />
var max = 1000,z = new Array(max+1),i; // Anzahl Werte max<br />
// Array z mit den Elementen 0...1000, Zähler i<br />
document.write("Die Primzahlen von 1 bis "+max+"")<br />
z[1] = false;<br />
for (var j = 2; j
<strong>JavaScript</strong> <strong>in</strong> <strong>Beispielen</strong><br />
6. Funktionen und HTML–Formulare<br />
Funktionen s<strong>in</strong>d Programme <strong>in</strong>nerhalb e<strong>in</strong>es Programms. Wird z.B. e<strong>in</strong>e Berechnung <strong>in</strong> e<strong>in</strong>em<br />
Programm an mehreren Stellen benötigt, so kann e<strong>in</strong>e Funktion anfänglich def<strong>in</strong>iert und dann an den<br />
entsprechenden Stellen aufgerufen werden.<br />
E<strong>in</strong>e Funktion beg<strong>in</strong>nt mit e<strong>in</strong>em Kopf, <strong>in</strong> dem function Funktionsname steht. In Klammern folgen die<br />
Variablen, die an die Funktion beim Aufruf übergeben werden.<br />
Als nächstes kommt die Variablendeklaration der Funktion. Beachten Sie, dass die hier def<strong>in</strong>ierten<br />
Variablen nur <strong>in</strong>nerhalb der Funktion gültig s<strong>in</strong>d und nach dem Beenden der Funktion nicht mehr<br />
verwendet werden können.<br />
Am Schluss der Funktion kann e<strong>in</strong> Wert def<strong>in</strong>iert werden, der von der Funktion als Resultat zurück<br />
gegeben wird. Er folgt dem Befehl return.<br />
Beispiel 12: kreisr<strong>in</strong>g.html<br />
<br />
<br />
<br />
// Berechnung e<strong>in</strong>es Kreisr<strong>in</strong>gs mit e<strong>in</strong>er Funktion<br />
// Def<strong>in</strong>ition der Funktion im head-Teil<br />
function kreis(r) {<br />
var pi = 3.1416; // Zahl pi (Wert direkt zugeordnet)<br />
return pi*r*r; }<br />
<br />
<br />
<br />
<br />
// Das eigentliche Programm im body-Teil<br />
var ri,ra,f; // Innerer ri und äusserer Radius ra, Fläche f<br />
document.write("Kreisr<strong>in</strong>gberechnung")<br />
ri = prompt("Geben Sie den <strong>in</strong>neren Radius <strong>in</strong> cm e<strong>in</strong>!","");<br />
ra = prompt("Geben Sie den aeusseren Radius <strong>in</strong> cm e<strong>in</strong>!","");<br />
f = kreis(ra)-kreis(ri); // Aufruf der Funktion<br />
document.write("Der Flächen<strong>in</strong>halt beträgt "+f+" cm^2.");<br />
<br />
Seite 10
<strong>JavaScript</strong> <strong>in</strong> <strong>Beispielen</strong><br />
<br />
<br />
Funktion und Programm s<strong>in</strong>d <strong>in</strong> zwei verschiedenen Bereichen der HTML–Seite platziert worden. Den<br />
Nutzen dieser Massnahme sehen Sie beim nächsten Beispiel. Funktionen werden im Kopfteil der Seite, der<br />
mit und markiert ist, untergebracht, während das Programm im Hauptteil, der mit<br />
beg<strong>in</strong>nt und mit endet, folgt.<br />
Funktionen können auch direkt aus HTML–Formularen aufgerufen werden und z.B. e<strong>in</strong>e Berechnung<br />
nach e<strong>in</strong>em Knopfdruck ausführen. Das nächste Beispiel berechnet die gleichen Daten wie Beispiel 3,<br />
nutzt aber e<strong>in</strong> HTML–Formular zur E<strong>in</strong>- und Ausgabe. E<strong>in</strong> Formular beg<strong>in</strong>nt mit und<br />
endet mit . Mit dem tag wird e<strong>in</strong> E<strong>in</strong>- und Ausgabefeld, mit e<strong>in</strong> Knopf def<strong>in</strong>ert.<br />
Beispiel 13: kreis3.html<br />
<br />
<br />
<br />
// Kreisberechnung mit E<strong>in</strong>- und Ausgabe über e<strong>in</strong> HTML-Formular<br />
function rechnen() {<br />
var r,d,u,f;<br />
r = document.KreisForm.r.value;<br />
d = 2*r;<br />
u = 2*Math.PI*r;<br />
f = Math.PI*r*r;<br />
document.KreisForm.d.value = d;<br />
document.KreisForm.u.value = u;<br />
document.KreisForm.f.value = f; }<br />
<br />
<br />
<br />
<br />
Kreisberechnung<br />
<br />
r =<br />
<br />
Seite 11
<strong>JavaScript</strong> <strong>in</strong> <strong>Beispielen</strong><br />
<br />
<br />
<br />
Durchmesser: d =<br />
<br />
Umfang: U =<br />
<br />
Fläche: F =<br />
<br />
<br />
<br />
<br />
Beachten Sie, dass die Funktion ihre Resultate direkt <strong>in</strong>s Formular schreibt (hier z.B.:<br />
document.KreisForm.d.value = …) und ke<strong>in</strong>en return–Befehl benutzt, denn die Berechnungen werden ja<br />
nicht an e<strong>in</strong> <strong>JavaScript</strong>–Programm, sondern an e<strong>in</strong> HTML–Formular zurückgegeben.<br />
Seite 12
<strong>JavaScript</strong> <strong>in</strong> <strong>Beispielen</strong><br />
7. Objekte<br />
<strong>JavaScript</strong> ist e<strong>in</strong>e objektorientierte Programmiersprache, wie auch die meisten anderen heute<br />
verwendeten Programmiersprachen (z.B. C++). Deshalb soll zum Schluss diese Idee etwas genauer<br />
beleuchtet werden.<br />
E<strong>in</strong> Beispiel e<strong>in</strong>es Objekts s<strong>in</strong>d die Fenster (w<strong>in</strong>dow–Objekt), <strong>in</strong> denen HTML–Seiten mit Text und<br />
Bildern gestaltet werden oder e<strong>in</strong> Programm se<strong>in</strong>e Daten ausgibt. Alle Fenster haben — so verschieden sie<br />
auch aussehen mögen — viele Geme<strong>in</strong>samkeiten: Sie haben e<strong>in</strong>e Titelleiste und e<strong>in</strong>en Rahmen, vielleicht<br />
Rollbalken oder die für Browserfenster typischen Navigationsknöpfe. Dies s<strong>in</strong>d Eigenschaften des Fenster–<br />
Objekts. Fenster können geöffnet oder geschlossen, vergrössert oder verkle<strong>in</strong>ert werden. Dies s<strong>in</strong>d<br />
Methoden (Funktionen), die zum Fenster–Objekt gehören.<br />
Wird von e<strong>in</strong>em Programm e<strong>in</strong> Fenster erzeugt, erstellt das Programm e<strong>in</strong>e sog. Instanz des Fenster–<br />
Objekts. Alle erzeugten Fenster bekommen so die gleichen möglichen Eigenschaften (z.B. mit oder ohne<br />
Rollbalken) und die gleichen Methoden (z.B. Fenster öffnen oder schliessen).<br />
E<strong>in</strong> anderes Beispiel für e<strong>in</strong> Objekt s<strong>in</strong>d die Zeichenketten (str<strong>in</strong>g–Objekt). E<strong>in</strong>e Zeichenkette hat als<br />
Eigenschaft ihre Länge. Methoden verändern z.B. die Schriftart oder -farbe, fügen Zeichen e<strong>in</strong> oder<br />
schneiden sie aus.<br />
Die Knöpfe e<strong>in</strong>er HTML–Seite s<strong>in</strong>d auch Objekte mit Eigenschaften (z.B. Beschriftung). Zudem können<br />
Sie auf Aktivitäten des Benutzers reagieren und besitzen entsprechende Funktionen, sog. Event Handler.<br />
Arrays s<strong>in</strong>d ebenfalls Objekte. Dieses Objekt besitzt auch Funktionen zur Erzeugung von Instanzen,<br />
sog. Konstruktor.<br />
Beispiele für verwendete Methoden <strong>in</strong> den Beispielprogrammen:<br />
Beispiel Befehl Erklärung<br />
hallo.html document.write() Methode write() des Objekts document zur Textausgabe.<br />
hallo2.html onklick Event Handler des Objekts button für die Reaktion auf e<strong>in</strong>en<br />
Mausklick.<br />
alert()<br />
Methode des Objekts w<strong>in</strong>dow für e<strong>in</strong> Pop up–Fenster.<br />
kreis2.html prompt() Methode des Objekts w<strong>in</strong>dow für e<strong>in</strong> Pop up–Fenster mit<br />
E<strong>in</strong>gabefeld.<br />
primzahlen.html Array() Konstruktor des Objekts Array zur Erzeugung e<strong>in</strong>es Arrays.<br />
kreis3.html Math.PI Eigenschaft PI des Objekts Math, liefert den Wert von π.<br />
Seite 13