Dr. Erhard Henkes, 07.09.2024

 

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

Zurück zur Startseite