Dr. Erhard Henkes (Original stammt aus den 90er Jahren, aktualisiert am 07.04.2023)

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

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.

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

Zurück zur Startseite