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 zum Beispiel mit C oder C++ erzeugt,
sondern um eine Sprache, die auf der Gegenseite
(sprich:
beim Browser) einen Interpreter benötigt.
Dieser Interpreter ist in modernen Browsern immer noch enthalten.
Was benötigt man für die Programmierung?
Ein einfacher Editor wie MS Notepad genügt bereits.
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:
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.
Diesen Code optimiert chatGPT-3.5 (Version vom 23.03.2023) mit Stand 07.04.2023 wie folgt:
<html>
<head>
<title>JavaScript-Test</title>
<script>
function showMsg(msg) {
alert(msg);
}
document.addEventListener("DOMContentLoaded", function() {
const btn1 =
document.getElementById("btn1");
const btn2 =
document.getElementById("btn2");
btn1.addEventListener("click", function() {
showMsg("Sie haben f1 gedrückt");
});
btn2.addEventListener("click", function() {
showMsg("Sie haben f2 gedrückt");
});
});
</script>
</head>
<body>
<input type="button" id="btn1"
value="f1">
<input type="button" id="btn2" value="f2">
</body>
</html>
Die Anmerkungen von chatGPT sind wie folgt:
In dieser optimierten Version des Codes wurde das Attribut "language" des
script-Tags entfernt, da es nicht mehr benötigt wird.
Die beiden
Funktionen "f1" und "f2" wurden in eine neue Funktion "showMsg" zusammengeführt,
um den Code zu vereinfachen und die Wartbarkeit zu erhöhen.
Die Funktion "showMsg" wird verwendet, um eine Nachricht anzuzeigen, und sie
wird von den Click-Event-Listeners der beiden Buttons aufgerufen.
Die
Event-Listeners wurden auch verbessert, indem sie von "onClick" auf
"addEventListener" umgestellt wurden.
Außerdem wurde jedem Button eine ID zugewiesen, um sie einfacher auswählen zu
können.
Die Verwendung von
"document.addEventListener("DOMContentLoaded")" stellt sicher, dass der Code
ausgeführt wird, wenn die Seite vollständig geladen ist.
Später wurde noch ergänzt, dass der form tag überflüssig ist.
wird fortgesetzt...