Benötigte Software
Für das Erstellen der JavaScript-Dateien wird ein Texteditor benötigt, in dem der Code erstellt werden kann. Um den geschriebenen Code ausführen zu können, benötigen wir einen Interpreter, so wie er beispielsweise im Webbrowser zur Verfügung steht.
Texteditor / Codeeditor
Um eine JavaScript-Datei zu erstellen, wird ein Texteditor benötigt. Ein einfacher Texteditor, wie er vom Betriebssystem bereitgestellt wird reicht, dafür zwar aus, aber diese eignen sich nicht besonders gut für das Umsetzen größerer Projekte. Im Internet gibt es zahlreiche kostenlose Tools, die für das Erstellen und bearbeiten von JavaScript-Dateien ausreichende Funktionen zur Verfügung stellen.
beliebte Texteditoren / Codeeditoren
Webbrowser
Windows Betriebssysteme hatten bis Windows 10 den "Internet-Explorer" als Standard-Browser, seit Windows 10 ist sein Nachfolger der Webbrowser "Edge". Inzwischen hat Microsoft mit dem Webbrowser "Edge Chromium" nachgelegt, der seine Vorgänger um weiten voraus ist.
Weil die Microsoft Browser bisher nicht die besten Freunde des Webentwicklers waren, wurde lieber mit alternativer Software gearbeitet.
beliebte Webbrowser
Nach der Installation des Webbrowsers sollte dieser als Standardbrowser in den Systemsteuerungen eingestellt werden.
Um in die Entwicklerumgebung des Webbrowsers zu gelangen, reicht es meistens aus, die Taste F12 (Funktionstaste 12) auf der Tastatur zu drücken. Alternativ gelangt man über einem Rechtsklick im aktuellen Browserfenster in ein Kontextmenü, über welches auch die Entwicklerumgebung geöffnet werden kann. Bei Chrome zum Beispiel heißt der Menüpunkt Untersuchen.
Die erste Datei erstellen
JavaScript im Webbrowser
Um die ersten Anweisungen mit JavaScript auszuführen, reicht auch ein Webbrowser aus.
In der Entwicklerumgebung des Webbrowsers F12 (Funktionstaste 12) können wir unter dem Menüpunkt "Console" direkt den JavaScript-Code eingeben, der ausgeführt werden soll.
Direkt neben dem kleinen blauen Pfeil können wir Anweisungen eingeben.
alert('Mein erstes JavaScript');
Wenn wir in der Konsole des Browsers den Befehl: alert('Mein erstes JavaScript'); einfügen und im Anschluss die Enter-Taste drücken.
Dann erscheint ein Fenster, in dem der Text steht, den wir innerhalb der runden Klammer zwischen den Anführungszeichen geschrieben haben.
Die Funktion "alert" ist dafür verantwortlich, dieses Fenster aufzurufen und den Text auszugeben den wir geschrieben haben.
Mit dem Semikolon geben wir das Ende der Anweisung an.
JavaScript als Datei
Bevor wir die erste JavaScript-Datei schreiben, erstellen wir noch einen Projektordner.
Dieser Ordner kann irgendwo im System erstellt werden. Am schnellsten geht es, wenn ein neuer Ordner direkt auf dem Desktop erstellt wird (Rechtsklick Neu Ordner).
Der Name des Ordners kann ein beliebiger Name sein. Als Namensvorlage könnte "Meine erste JavaScript" dienen.
Nun benötigen wir als Erstes eine HTML-Datei in diesem Ordner, um JavaScript darin zu verknüpfen. Entweder wir erstellen eine neue Textdatei in dem Projektordner. die mit dem Namen "index.html" gespeichert wird.
Achtung!
Die Dateiendung muss unbedingt von ".txt" auf ".html" geändert werden.
Manchmal verändert sich die Dateiendung nicht wie gewünscht und dann trägt die Datei den Namen "index.html.txt" und ist somit immer noch eine Textdatei.
Oder wir öffnen den Texteditor / Codeeditor und speichern einfach eine Datei mit dem Namen "index.html" in den Projektordner, den wir erstellt haben.
Die "index.html" umfasst zu Beginn nur wenige Metadaten.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>JavaScript lernen</title>
</head>
<body>
</body>
</html>Als Nächstes erstellen wir in dem Projektordner die Datei "main.js" und geben dort den folgenden Code ein:
function zeigeText () {
alert('Mein erstes JavaScript');
}
Wir haben eine Funktion erstellt, die auf dem Namen "zeigeText" reagiert.
Die Funktion "zeigeText" ruft die Funktion "alert" auf, die zu den Standardfunktionen von JavaScript gehört.
Die Funktion "alert" übergibt die Meldung "Mein erstes JavaScript" an die Funktion "zeigeText".
Um diese Funktion ausführen zu können, müssen wir zunächst die JavaScript-Datei in die HTML-Datei (im body) einbinden.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>JavaScript lernen</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>Beim Aufruf der Seite passiert aber noch gar nichts, denn die Funktion "zeigeText" muss erst noch aufgerufen werden, bevor sie ausgeführt wird.
Um die Funktion "zeigeText" aufzurufen, ergänzen wir die Datei "main.js" um die Zeile "zeigeText();", damit sie wie folgt aussieht:
function zeigeText () {
alert('Mein erstes JavaScript');
}
zeigeText();
Wenn wir die Datei jetzt speichern und im Browser neu Laden, dann erscheint direkt ein Hinweisfenster, in dem der Text steht, den wir in der Funktion "alert" geschrieben haben.
Kommentare
Beim Programmieren ist es nützlich, sich und auch anderen ein paar Kommentare im Quelltext zu hinterlassen.
Dabei gibt es 2 Möglichkeiten, seinen Code zu Kommentieren.
Entweder als einzeiliges Kommentar, welcher mit doppelten Schrägstrich eingeleitet wird ("//").
Oder als mehrzeiliges Kommentar, welches mit Schrägstrich und Sternchen ("/*") eingeleitet wird und mit Sternchen und Schrägstrich ("*/") beendet wird.
Bei dem einzeiligen Kommentar wird der Interpreter alles, was in dieser Zeile hinter dem "//" steht Ignorieren und in der nächsten Zeile weiter arbeiten.
let lottozahl1 = 3; // eine Zahl bei Lotto
Bei mehrzeiligen Kommentaren wird alles zwischen den Zeichen "/*" und "*/" vom Interpreter ignoriert, egal ob dieses Kommentar nur eine oder mehrere Zeilen betrifft.
let lottozahl2 = 7; /* noch eine Zahl bei Lotto */ let lottozahl3 = 14;
let lottozahl4 = 20; /* Mehr Zahlen darf ich nicht verraten
Daher wird der Rest jetzt auskommentiert */
let superzahl = 5;
Weiter mit Einbinden