JavaScript/Tutorials/Einstieg/Erste Schritte

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Ein großer Vorteil am Programmieren mit JavaScript ist, dass man kaum Vorbereitungen benötigt.

Die bekannteste Möglichkeit, JavaScript-Programme auszuführen, besteht darin, sie in ein HTML Dokument einzubetten und dieses in einen JavaScript-fähigen Web-Browser zu laden. Diesen 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.

Anlegen eines Dokuments

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:

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

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

Beachten Sie: Die Beispiele auf dieser Seite verwenden der Einfachheit wegen zwei Funktionen (alert() und prompt()), die für echte Anwendungsfälle auf Webseiten ernste Nachteile haben. Wie man diese vermeidet, beschreibt ein Kapitel für Fortgeschrittene: JavaScript/Tutorials/Eigene_modale_Dialogfenster

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.

2. Eingabe und Verarbeitung eines Namens ansehen …
<script>
 let eingabe;
 eingabe = prompt('Bitte geben Sie Ihren Namen ein!','');
 alert('Hallo, ' + eingabe);
</script>

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

Dafür wird mit let 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 let, 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.

Vermeiden Sie nicht initialisierte Variablen, die Sie als Magic Number notiert haben:

Beispiel 
// schlecht: 
setTimeout(blastOff, 86400000);

// gut:
const MILLISECONDS_IN_A_DAY = 86400000;

setTimeout(blastOff, MILLISECONDS_IN_A_DAY);

Werte, die sich später nicht mehr ändern sollen, sind Konstanten und keine Variablen. Sie können mit dem Schlüsselwort const deklariert werden.

Der strenge Modus

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.

Beispielsweise erzeugen Sie in JavaScript durch einem Tippfehler in einem Variablennamen eine neue, leere Variable, während die gewünschte Variable nicht verwendet wird. Ein solcher Fehler fällt häufig erst viel später auf und führt zu einem unerklärlichen Programmabbruch, den Sie erst mühselig debuggen müssen.

Deshalb wurde mit ECMAScript 5 der strenge Modus (strict mode) eingeführt, der eine standardisierte, um Fehlerquellen bereinigte, Teilmenge der Programmiersprache aktiviert. Der Versuch, eine unbekannte Variable zu verwenden, löst im strengen Modus sofort einen sogenannten ReferenceError aus. Ist der strenge Modus nicht aktiviert, spricht man auch vom sloppy mode (schlampig, schluderig).

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

Anweisungen

Jetzt können wir unser Programm ein bisschen verbessern:

3. Eingabe und Verarbeitung eines Namens ansehen …
1 <script>
2   'use strict';
3   let name = '';
4   name = prompt('Bitte geben Sie Ihren Namen ein!', '');
5   let ausgabe = 'Hallo ' + name + '!';
6   alert(ausgabe);
7 </script>

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 3 wird eine Variable name deklariert. In einer Wertzuweisung wird ihr als anfänglicher Wert eine leere Zeichenkette (String) zugewiesen. Im Dialogfenster erscheint nun das Eingabefeld, das mit dem leeren String vorbelegt wird, also leer bleibt. Der eingegebene Wert überschreibt in der Anweisung in Zeile 4 den bisherigen Wert für name. Danach wird eine Variable ausgabe deklariert, in der der Name und die vorgegebene Zeichenkette mithilfe des Zeichenkettenverknüpfungs-Operator + 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 Semikolon ( ; ) beendet.

Empfehlung: Schließen Sie alle Anweisungen mit einem Semikolon, 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 Variable oder Anweisung behandelt würden.

Empfehlung: Verwenden Sie zur Abgrenzung der mit Anführungszeichen umschlossenen HTML-Attribute für Zeichenketten in JavaScript einfache Hochkommata. Die Alternativen sind aber auch nicht falsch!
let ausgabe = 'Hallo ' + name + '!';

Diese Art der Verkettung von mehreren Teilzeichenketten mit Variablen ist ziemlich fehleranfällig. In der JavaScript-Version von 2015 wurden Schablonen (Template Literale) eingeführt, mit denen Sie einige Anführungszeichen und +-Zeichen sparen können: 

let ausgabe = `Hallo ${name}!`;

So können Zeichenketten einfacher zusammengefügt werden.

  • Die Syntax der Schablonenliterale ist in Backticks eingeschlossen. Bitte lesen Sie den Artikel zu Template-Literalen, wenn Sie nicht wissen, wie Sie das Backtick eingeben können.
  • Die Syntax-Platzhalter in Schablonenliteralen verwenden ${Ausdruck}.
  • Innerhalb des Platzhalters können Sie einfache Werte, Variablen und sogar JavaScript-Ausdrücke verwenden.

Wir werden, wenn es sich anbietet, in den folgenden Kapiteln Schablonenliterale verwenden.

Beachten Sie: Selbstdefinierte Namen in JavaScript unterscheiden Groß- und Kleinschrift. Die Variable Name ist nicht mit name identisch. Sollten Sie in Ihrem Code die Groß-/Kleinschreibung versehentlich verwechseln, wird das Programm mit einem Referenzfehler abgebrochen werden, wenn es keine mit dieser Schreibweise definierte Variable gibt.
Abgerufen von „http://wiki.selfhtml.org/index.php?title=JavaScript/Tutorials/Einstieg/Erste_Schritte&oldid=95848“