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!<br> // Hello-World-Programm mit reinen JavaScript-Befehlen document.write("erstes Hallo Welt aus JavaScript!<br>"); // 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 <HTML> (beendet mit </HTML>) und <script langugage= > (beendet mit ). Diesen hellen Teil können Sie als Rahmen für jedes Ihrer Programme benützen. <br> 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
Beispiel 2: hallo2.html <form> <input type="button" value="bitte drücken!" onclick="alert('zweites Hallo Welt aus JavaScript!')"> <input type="button" value="1+1 =?" onclick="alert(1+1)"> </form> 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<br><br>") pi = 3.1416; r = 5; d = 2*r; document.write("der Durchmesser beträgt "+d+" cm.<br>"); u = 2*pi*r; Seite 2
document.write("der Umfang beträgt "+u+" cm.<br>"); 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<br><br>") pi = 3.1416; r = prompt("geben Sie den Radius in cm ein!","5"); d = 2*r; document.write("der Durchmesser beträgt "+d+" cm.<br>"); u = 2*pi*r; document.write("der Umfang beträgt "+u+" cm.<br>"); 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
Beispiel 5: luegner.html // Verwendung von logischen Ausdrücken var epimenides,luegner,kreter; document.write("ein Paradoxon<br><br>") luegner = true; kreter = luegner; epimenides = kreter; document.write("epimenides der Kreter sagt: Alle Kreter sind Lügner!<br><br>"); document.write("ist Epimenides ist kein Lügner (aber dafür alle Kreter)? "); document.write(((epimenides==!luegner) && (kreter==luegner))+"<br>"); 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
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<br><br>") n = prompt("geben Sie die Zahl n ein!",""); f = 1; for (var i = 1; i<=n; i++) { f = f*i; } document.write(n+"! = "+f); Für die Schleife wird eine Zählvariable benötigt, die im for Befehl definiert wird (hier: var i = 1), dieser Zähler wird bei jedem Druchlauf um 1 erhöht (hier: i++). Wird die Zahl der Wiederholungen erst während der Ausführung der Schleife klar, so kann jeweils entweder zu Beginn der Schleife mit dem Befehl while oder am Ende der Schleife mit dem Befehl do while über einen logischen Ausdruck die Fortsetzung resp. der Abbruch der Schleife gesteuert werden. Beispiel 7: verdoppelung.html // Schleife mit dem while-befehl Seite 5
var n,a; // Zähler n, Verdoppelungswert a a = 1; n = 0; while (a<1000) { // Überprüfung am Anfang der Schleife a = 2*a; n++; } // Erhöhen des Zählers document.write("anzahl Verdoppelungen: "+n); n++ ist die Kurzform der Zuordnung n = n+1. Beispiel 8: eingabe.html // Überprüfung einer Eingabe mit einer do-while-schleife var ant; // Antwort ant do { ant = prompt("geben Sie JA oder NEIN ein!",""); document.write(ant+"<br>"); } while ((ant!="ja") && (ant!="nein")); // Überprüfung nach der Schleife!= bedeutet nicht gleich (also das Gegenteil von == ). Seite 6
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<br><br>"); 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<br><br>") Seite 7
document.write("1 - Hey Jude<br>"); document.write("2 - Candle in the wind<br>"); document.write("3 - Satisfaction<br>"); document.write("4 - Pinball Wizard<br>"); document.write("5 - Your song<br><br>"); 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
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+"<br><br>") z[1] = false; for (var j = 2; j<=max; j++) { z[j] = true; } for (var j = 2; j<=max; j++) { i = 2*j; while (i<=max) { z[i] = false; i = i+j; }} for (var j = 1; j<=max; j++) { if (z[j]) document.write(j+" "); } Auf die Elemente eines Arrays wird über ihre Nummer in eckigen Klammern zugegriffen (hier: z[1] oder z[i]). Seite 9
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 <head> // 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; } </head> <body> // Das eigentliche Programm im body-teil var ri,ra,f; // Innerer ri und äusserer Radius ra, Fläche f document.write("kreisringberechnung<br><br>") 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
</body> 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 <head> und </head> markiert ist, untergebracht, während das Programm im Hauptteil, der mit <body> beginnt und mit </body> 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 <form name= > und endet mit </form>. Mit dem tag <input type= text > wird ein Ein- und Ausgabefeld, mit <input type= button > ein Knopf definert. Beispiel 13: kreis3.html <head> // 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; } </head> <body> <form name="kreisform"> Kreisberechnung<br> <br> r = <input type="text" name="r" size="10" value="1"><br> Seite 11
<br> <input type="button" name="rechne" value="rechnen" onclick="rechnen()"><br> <br> Durchmesser: d = <input type="text" name="d" size="20" value="?"><br> Umfang: U = <input type="text" name="u" size="20" value="?"><br> Fläche: F = <input type="text" name="f" size="20" value="?"><br> </form> </body> 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
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