erstellt von: Dr. Erhard Henkes

Zurück zur Startseite
 

Praktische Einführung in Java-Script

Java-Script bietet die Möglichkeit, Windows-Programmierung innerhalb von HTML durchzuführen.
Es handelt sich hierbei nicht um geschlossene compilierte Programme, wie man sie mit C oder C++ erzeugt,
sondern um eine Sprache, die auf der Gegenseite (sprich: beim Browser) einen Interpreter benötigt.
Dieser Interpreter ist im Netscape Navigator 4 und im MS Internet Explorer 5 natürlich enthalten.

Was benötigt man für die Programmierung?
Ein einfacher Editor wie MS Notepad genügt bereits. Ich empfehle jedoch zum schnelleren Fortkommen
die zusätzliche Verwendung des HTML-Editors MS Frontpage Express 2.0 â ,
den man sich bei Microsoft kostenlos herunterladen kann.

Die folgenden Übungen bieten einen Schnelleinstieg in verschiedene Anwendungen, um die generellen Möglichkeiten aufzuzeigen und den Appetit anzuregen.
Für C++-Programmierer ist die Syntax angenehm, da weitgehend identisch.
 
 

Erste Übung:

inhalt_2="Hallo Welt ..."
inhalt=1
alert(inhalt)
inhalt=inhalt+1
alert(inhalt)
inhalt="Hallo"
alert(inhalt)
inhalt=inhalt+1
alert(inhalt)
alert("Hallo Welt")
alert(inhalt_2)

Was haben Sie getan?

Sie haben zwei Variablen definiert: inhalt und inhalt_2

Den Variablen wurden sofort Ausgangswerte zugeordnet:
inhalt_2="Hallo Welt ..."
inhalt=1

Sie haben die Message-Box mit dem Befehl alert(...) ausgegeben.

Mit den Variablen wurde "gerechnet":
Bei der Zahl 1 wurde aus 1+1=2.
Beim String "Hallo" ergab die Addition von 1 den String "Hallo1".

Sie haben auch einen festen String mit alert("Hallo Welt") ausgegeben.

Wie sieht der komplette Quelltext aus?

Speichern und Ausführen

... nach mehreren OK-Clicks ...


 
 
 
 

Zweite Übung:

In der ersten Übung wurde der Inhalt von Variablen im Windows-Meldefenster (Message Box) ausgegeben.
Um den Text direkt im Browser-Fenster selbst auszugeben, verwendet man document.write(...).
Verändern Sie Beispiel 1 wie folgt:

inhalt_2="Hallo Welt ..."
inhalt=1
document.write(inhalt)
inhalt=inhalt+1
document.write(inhalt)
inhalt="Hallo"
document.write(inhalt)
inhalt=inhalt+1
document.write(inhalt)
document.write("Hallo Welt")
alert(inhalt_2)

Nach dem Speichern und ausführen finden Sie folgende Bildschirmausgabe:
12HalloHallo1Hallo Welt

Wie Sie sehen, erfolgt nun die Ausgabe auf dem Bildschirm. Nur die Variable inhalt_2 wird noch in der Message-Box ausgegeben.
Ändern Sie document.write ab in document.writeln:

inhalt_2="Hallo Welt ..."
inhalt=1
document.writeln(inhalt)
inhalt=inhalt+1
document.writeln(inhalt)
inhalt="Hallo"
document.writeln(inhalt)
inhalt=inhalt+1
document.writeln(inhalt)
document.writeln("Hallo Welt")
alert(inhalt_2)

Nach dem Speichern und Ausführen erhalten Sie nun folgende Bildschirmausgabe:
1 2 Hallo Hallo1 Hallo Welt

Durch die Verwendung von writeln anstelle write erfolgt die Ausgabe nun gefolgt von einem Leerzeichen.
 
 

Dritte Übung:

Jetzt wollen wir eine for-Schleife zur Veränderung von Variablen einsetzen. Die allgemeine Syntax entspricht der von C++:

for ( Ausgangsbedingung; Abschlußbedingung; Schleifenverhalten )
{
}

Geben Sie folgendes Java-Script in MS Frontpage Express ein:

for ( inhalt=1; inhalt<101; inhalt=inhalt+1 )
{
document.writeln(inhalt)
}

Auf dem Bildschirm werden nun die Zahlen von 1 bis 100 getrennt durch ein Leerzeichen ausgegeben:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100

Probieren Sie auch andere Zahlen aus, damit Sie die Wirkungsweise der Parameter innerhalb der Schleifenanweisung testen können:
z.B.

for ( inhalt=1000; inhalt<3001; inhalt=inhalt+2 )
{
document.writeln(inhalt)
}

Bildschirmausgabe:
1000 1002 1004 1006 1008 1010 1012 1014 1016 1018 1020 1022
(...)
2978 2980 2982 2984 2986 2988 2990 2992 2994 2996 2998 3000
 
 

Vierte Übung:

In der nächsten Übung lernen Sie Schaltflächen (Buttons) und Funktionen kennen.
Benutzen Sie diesmal bitte den Notizblock (Notepad), damit Sie die gesamte HMTL-Syntax sehen:

<html>
<head>
<title>JavaScript-Test</title>
<script language="JavaScript">
<!--
function f1()
{
alert("Sie haben f1 gedrückt")
}

function f2()
{
alert("Sie haben f2 gedrückt")
}
//-->
</script>
</head>

<body>
<form>
<input type=button value=" f1 " onClick="f1()">
<input type=button value=" f2 " onClick="f2()">
</form>
</body>
</html>

Wichtig ist, daß Sie beim Speichern als htm- bzw. html-Datei abspeichern, also z.B. js4.htm als Namen verwenden.
Wenn Sie diese Datei dann mit dem Browser öffnen, erkennen Sie zwei Schaltflächen (Buttons) mit den Bezeichnungen f1 bzw. f2.
Beim Betätigen werden die Funktionen f1(){...} bzw. f2(){...} ausgelöst.
Dieser Mechanismus ist in der Anweisung onClick="..." enthalten.
Funktionen werden typischerweise im Bereich zwischen <head> und </head> definiert,
damit sie im Bereich <body> ... </body> bereits sicher zur Verfügung stehen.

wird fortgesetzt...

Zurück zur Startseite