01.03.2014 Aufrufe

JavaScript in Beispielen

JavaScript in Beispielen

JavaScript in Beispielen

MEHR ANZEIGEN
WENIGER ANZEIGEN

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 />

&auml; (a Umlaut) ergibt e<strong>in</strong> ä, &ouml; e<strong>in</strong> ö und &uuml; 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&auml;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&auml;gt "+u+" cm.");<br />

f = pi*r*r;<br />

document.write("Der Fl&auml;chen<strong>in</strong>halt betr&auml;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&auml;gt "+d+" cm.");<br />

u = 2*pi*r;<br />

document.write("Der Umfang betr&auml;gt "+u+" cm.");<br />

<br />

f = pi*r*r;<br />

document.write("Der Fl&auml;chen<strong>in</strong>halt betr&auml;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&uuml;gner!");<br />

document.write("Ist Epimenides ist ke<strong>in</strong> L&uuml;gner (aber daf&uuml;r<br />

alle Kreter)? ");<br />

document.write(((epimenides==!luegner) && (kreter==luegner))+"");<br />

document.write("Ist Epimenides ist e<strong>in</strong> L&uuml;gner (aber daf&uuml;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&auml;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&uuml;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&auml;chen<strong>in</strong>halt betr&auml;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&auml;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

Hurra! Ihre Datei wurde hochgeladen und ist bereit für die Veröffentlichung.

Erfolgreich gespeichert!

Leider ist etwas schief gelaufen!