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 zur
Erstellung eines Programmes mit der Endung js. Wir werden zusätzlich
Visual Studio Code (VS Code) mit der Erweiterung Live Server für in html
eingebetteten Code verwenden. Zur direkten Ausführung von Javascript Code im
Terminal von VS Code verwenden wir nodejs (zusammen mit chocolatey).
Falls noch nicht geschehen:
-
Visual Studio Code
installieren
- Die Erweiterung LiveServer in VS Code installieren
-
nodejs installieren
(in PATH eintragen, falls nicht geschehen, evtl.Neustart notwendig)
Die folgenden Übungen bieten einen
Schnelleinstieg
in verschiedene Anwendungen, um die generellen Möglichkeiten
aufzuzeigen
und den Appetit anzuregen. Für C/C++-Programmierer ist die Syntax angenehm, da
weitgehend identisch.
Wir bereiten unsere Tools vor:
Wir erstellen einen Ordner JavaScript
(bei mir Z:\JavaScript)
Wir erstellen in diesem Ordner eine kleine Datei
app.js mit dem MS Editor. Bitte folgende eintragen:
console.log("Hello,
World!");
In VS Code wählen wir im Menü Terminal - New Terminal
Wir geben
dort ein: node app.js
Wir erhalten als Ausgabe: Hello, World!
PS Z:\JavaScript> node app.js
Hello, World!
PS Z:\JavaScript> node -v
v20.17.0
Unser erstes Javascript-Programm wurde mit Hilde von nodejs (mit der Version
20.17.0) ausgeführt.
Falls es nicht klappt, hängt das daran, dass nodejs
noch nicht im PATH eingetragen ist.
Wir stellen sicher, dass im PATH
eingetragen ist:
C:\Program Files\nodejs\
C:\ProgramData\chocolatey\bin
Erste Übung:
let inhalt_2 = "Hallo Welt ...";
let inhalt = 1;
console.log(inhalt);
inhalt = inhalt + 1;
console.log(inhalt);
inhalt = "Hallo";
console.log(inhalt);
inhalt = inhalt + 1;
console.log(inhalt);
console.log("Hallo Welt");
console.log(inhalt_2);
Wir erhalten:
PS Z:\JavaScript> node app.js
1
2
Hallo
Hallo1
Hallo Welt
Hallo Welt ...
Zweite Übung:
Jetzt wollen wir eine for-Schleife zur Veränderung von Variablen einsetzen. Die allgemeine Syntax entspricht der von C/C++:
for ( Ausgangsbedingung; Abschlußbedingung;
Schleifenverhalten
)
{
}
Geben Sie folgendes Java-Script in app.js ein:
let result = ''; // Leerer String zum Sammeln
der Zahlen
for (let inhalt = 1; inhalt <=
100; inhalt++)
{
result += inhalt + ' '; // Zahlen hinzufügen und
mit einem Leerzeichen trennen
}
console.log(result);
// Ausgabe der gesamten Zahlenreihe in einer Zeile
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.
Dritte Übung:
In der nächsten Übung lernen Sie Schaltflächen
(Buttons)
und Funktionen kennen.
Bitte in VS Code eine neue html-Datei erstellen und im Ordner JavaScript als
js1.html speichern.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>JavaScript Test</title>
<script>
// Funktion f1
function f1()
{
alert("Sie haben f1 gedrückt");
}
//
Funktion f2
function
f2()
{
alert("Sie haben f2 gedrückt");
}
// Event Listener hinzufügen,
wenn das Dokument geladen ist
document.addEventListener("DOMContentLoaded",
function()
{
// Button für f1
const btnF1 = document.getElementById('btnF1');
btnF1.addEventListener('click', f1);
// Button für f2
const btnF2 = document.getElementById('btnF2');
btnF2.addEventListener('click', f2);
});
</script>
</head>
<body>
<form>
<input type="button" value="f1" id="btnF1">
<input type="button" value="f2" id="btnF2">
</form>
</body>
</html>
Mittels GoLive wird das unter
http://127.0.0.1:5500/js1.html im Browser dargestellt.
Hierbei habe ich den Button mit der Aufschrift "f1" gedrückt.
Nun können wir sowohl Javascript für die Konsole als auch eingebettet in html erzeugen.
wird fortgesetzt...