JavaScript in Beispielen

Transcrição

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
<html>
Hallo Welt aus HTML!<br>
<script language="JavaScript">
// 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
</script>
</html>
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 </script>). 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
<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>
</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
<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.");
</script>
</html>
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
<html>
// Berechnung eines Kreise mit Eingabe über prompt
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 = 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;
</script>
</html>
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
<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.
</script>
</html>
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
<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);
</script>
</html>
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
<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);
</script>
</html>
n++ ist die Kurzform der Zuordnung n = n+1.
Beispiel 8: eingabe.html
<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
</script>
</html>
„!=“ 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
<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); }
</script>
</html>
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
<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
</script>
</html>
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
<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; }
i = 2*j;
while (i<=max) {
z[i] = false;
i = i+j; }}
if (z[j]) document.write(j+" "); }
</script>
</html>
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
<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; }
</script>
</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
</script>
Seite 10
</body>
</html>
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
<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; }
</script>
</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>
</html>
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.
kreis2.html
alert()
Methode des Objekts window für ein Pop up–Fenster.
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

JavaScript in Beispielen

Transcrição

Documentos relacionados

Javascript

Javascript

JavaScript leicht gemacht

JavaScript

Grundlagen JavaScript

einführung in javascript

Profil - Diplom-Informatiker Frank Seitz

Dokumenten Verarbeitung Accantum Document Manager Digitale

JavaScript Die ersten Schritte

JavaScript

PDF herunterladen

Hunter Deckenventilator CABO FRIO New bronze

Hunter Deckenventilator CABO FRIO zinn antik

Georgia

JavaScript

www.cassini-onlineshop.de EU

HTML Cheat Sheet

Prostatitis

Tastaturbelegung

Sicherheit von Web-Anwendungen

Die protestantische Ethik und der Geist des Kapitalismus

PHP_Kontrolle