JavaScript/Tutorials/Einstieg/Erste Schritte

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
45min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
keine

Ein großer Vorteil am Programmieren mit JavaScript ist, dass man kaum Vorbereitungen benötigt: Einen Browser zum Ausführen von Javascript haben Sie bereits installiert – ansonsten könnten Sie diese Seite schließlich nicht anschauen. Lediglich zum Erstellen der HTML-Dateien mit darin enthaltenem JavaScript empfiehlt es sich, anstelle des bereits installierten Editors (z. B. Notepad bei Windows) einen komfortableren Code-Editor zu installieren. Ein kostenloses Programm ist hier zunächst völlig ausreichend; für Windows sei hier exemplarisch Notepad++ genannt; für MacOS, Linux oder auch Windows ATOM. Tipp: Falls man mit dem Editor nicht zurechtkommt, kann man einfach einen anderen installieren.

Anlegen eines Dokuments[Bearbeiten]

Anhand dieses kleinen Scripts, das es so wohl in allen Sprachen gibt, sehen Sie, wie einfach es ist, ein kleines Programm in ihrem Browser zu starten:

Beispiel: das erste JavaScript ansehen …
<script>
  alert('Hallo Welt!');
</script>
In diesem Script wird eine Warnmeldung (alert ) mit dem Text Hallo Welt aufgerufen.

Speichern Sie das Script in einer Datei mit der Endung .htm oder .html ab und laden Sie es im Browser (i. d. R. über Datei → Datei öffnen). Obwohl doctype und html-Tag am Anfang des Dokuments fehlen, erkennt der Browser an der Dateiendung, dass der Inhalt nicht als reiner Text, sondern als HTML-Code behandelt werden soll. Der script-Tag leitet einen Script-Bereich ein, in den Sie Javascript-Code notieren und ausführen lassen können. Am Ende des Dokuments müssen Sie ihn wieder schließen. Der schließende html-Tag ist dagegen ebenfalls optional und kann weggelassen werden.

Verwendung von Variablen[Bearbeiten]

Neben diesen Warnmeldungen können Sie auch Dialogfenster nutzen, in denen der Anwender Benutzereingaben vornimmt.

Die Eingabe des Benutzers wollen wir zunächst in einer sogenannten Variablen abspeichern. Eine Variable ist sozusagen ein einfacher Behälter für Daten – man kann Daten hineinschreiben und sie zu einem späteren Zeitpunkt im Programm wieder auslesen und damit arbeiten. Sie müssen nicht festlegen, für welchen Datentyp (z. B. Zahlen oder Text) der Behälter bestimmt ist. Eine JavaScript Variable kann Werte aller Datentypen speichern und passt sich bei Bedarf an.

Beispiel: 2. Eingabe und Verarbeitung eines Namens ansehen …
 var eingabe;
 eingabe = prompt('Bitte geben Sie Ihren Namen ein!','');
 alert('Hallo, ' + eingabe);

Dieses Programm fragt den Namen des Benutzers ab und begrüßt ihn dann persönlich.

Dafür wird mit var eine Variable mit dem selbst gewählten Namen eingabe deklariert.

Im zweiten Schritt passieren zwei Dinge. Von links nach rechts gelesen, finden Sie hier zunächst eine Zuweisung an eine Variable. Zuweisungen haben die Form name = wert;. Ein Wert kann eine Konstante sein oder durch den Aufruf einer Funktion ermittelt werden. Bei prompt handelt es sich um eine in JavaScript eingebaute Funktion. Sie öffnet ein kleines Fenster, in dem sich ein Informationstext, ein Eingabefeld sowie die Buttons OK und Abbrechen befinden. Dieser Informationstext sowie der anfängliche Inhalt des Eingabefeldes sind Werte, die man prompt() zur Verfügung stellen muss, indem man sie innerhalb der Klammern durch Komma getrennt hinschreibt.

Wenn JavaScript eine Zuweisung ausführt, ermittelt es zuerst den Wert, der zugewiesen werden soll. In unserem Beispiel findet sich ein Funktionsaufruf. Daher erscheint das Eingabefenster, sobald JavaScript auf diese Zeile stößt. Nachdem Sie etwas eingegeben und OK geklickt haben, wird diese Eingabe von prompt als Wert bereitgestellt und kann nun an die Variable eingabe zugewiesen, das heißt: darin gespeichert, werden.

Empfehlung:
  • Deklarieren Sie Variablen immer mit var, da Sie sonst globale Variablen erzeugen, die später evtl. ungewollte Konsequenzen nach sich ziehen.
  • Geben Sie Variablen selbsterklärende, sogenannte sprechende Namen, damit Sie in ein paar Wochen wieder erkennen können, was diese Variable beinhalten soll.
  • Beachten Sie die Regeln für selbstvergebene Namen.

Der strenge Modus[Bearbeiten]

In JavaScript gibt es aufgrund der bewegten Geschichte mit vielen proprietären Methoden und der sehr einfachen Möglichkeit, globale Variablen einzuführen viele potentielle Fehlerquellen. Deshalb wurde mit ECMAScript 5 der strenge Modus (strict mode) eingeführt, der ein standardisiertes, um Fehlerquellen bereinigtes, Subset der Programmiersprache aktiviert.

Mit jedem Tippfehler in einem Variablennamen erzeugen Sie in JavaScript eine neue Variable, während die gewünschte Variable oder Methode nicht verarbeitet wird. Häufig fallen diese Fehler erst später auf und führen dann zu einem unerklärlichen Programmabbruch, den Sie erst mühselig debuggen müssen. Im strengen Modus werden solche Fehler gleich als Referenzfehler erkannt.

Empfehlung:
  • Verwenden Sie den strengen Modus ('use strict';), um Referenzfehler durch fehlerhaft geschriebene Methoden oder Variablen auszuschließen.

Anweisungen[Bearbeiten]

Jetzt können wir unser Programm ein bisschen verbessern:

Beispiel: 3. Eingabe und Verarbeitung eines Namens ansehen …
1 'use strict';
2 var name = '';
3 name = prompt('Bitte geben Sie Ihren Namen ein!', name);
4 var ausgabe = 'Hallo, ' + name;
5 alert(ausgabe);
Durch use strict; wird der strenge Modus eingeleitet, der eine genauere und sorgfältigere Programmierung erzwingt. In diesem strikteren Modus sind z. B. undeklarierte Variablen oder Anweisungen ohne abschließendes Semikolon verboten. In Zeile 2 wird eine Variable name deklariert. In einer Wertzuweisung wird ihr als Wert eine leere Zeichenkette (String) zugewiesen.

Im Dialogfenster erscheint nun das Eingabefeld, dass mit dem leeren String gefüllt wird, also leer bleibt. Der eingegebene Wert überschreibt in der Anweisung in Zeile 3 den bisherigen Wert für name.

Danach wird eine Variable ausgabe deklariert, in der der Name und die vorgegebene Zeichenkette zusammengefügt werden. Anschließend wird diese mit alert() ausgegeben.


Anhand dieser Zeilen können wir uns nun die Syntax von JavaScript anschauen:

Anweisungen werden von einem Zeilenumbruch oder einem Strichpunkt ( ; ) beendet.

Empfehlung: Schließen Sie alle Anweisungen mit einem Strichpunkt, um von Anfang an sauber zu programmieren. So vermeiden Sie später Fehler und ein mühseliges Debuggen.


Zeichenketten werden von Anführungszeichen ("...") oder Hochkommata ('...')umschlossen, da sie sonst als Variablen behandelt würden.

Empfehlung: Verwenden Sie zur Abgrenzung der mit Anführungszeichen umschlossenen HTML-Attribute für Zeichenketten in JavaScript einfache Hochkommata.