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. Den hast du bereits installiert – ansonsten könntest du 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.

Anlegen eines Dokuments

Anhand dieses kleinen Scripts, das es so wohl in allen Sprachen gibt, siehst du, wie einfach es ist, ein kleines Programm in deinem 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.

Speicher das Script in einer Datei mit der Endung .htm oder .html ab und lade 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 dem man Javascript-Code notieren und ausführen lassen kann. Am Ende des Dokuments muss man ihn wieder schließen. Der schließende html-Tag ist dagegen ebenfalls optional und kann weggelassen werden.

Verwendung von Variablen

Neben diesen Warnmeldungen kann man 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.

2. Eingabe und Verarbeitung eines Namens ansehen …
<script>
 let eingabe;
 eingabe = prompt('Bitte gib deinen 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, findest du 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 man etwas eingegeben und OK geklickt hat, wird diese Eingabe von prompt als Wert bereitgestellt und kann nun an die Variable eingabe zugewiesen, das heißt: darin gespeichert, werden.

Empfehlung:
  • Deklariere Variablen immer mit let, da du sonst globale Variablen erzeugst, die später evtl. ungewollte Konsequenzen nach sich ziehen.
  • Gib Variablen selbsterklärende, sogenannte sprechende Namen, damit du in ein paar Wochen wieder erkennen kannst, was diese Variable beinhalten soll.
  • Beachte die Regeln für selbstvergebene Namen.

Vermeide nicht initialisierte Variablen, die als Magic Number notiert wurden:

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. Man kann sie mit dem Schlüsselwort const deklarieren.

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 erzeugst du 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 man erst mühselig debuggen muss.

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:
  • Verwende
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ße alle Anweisungen mit einem Semikolon, um von Anfang an sauber zu programmieren. So vermeides du 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: Verwende 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 man einige Anführungszeichen und +-Zeichen sparen kann: 

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

So können Zeichenketten einfacher zusammengefügt werden.

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

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

Beachte: Selbstdefinierte Namen in JavaScript unterscheiden Groß- und Kleinschrift. Die Variable Name ist nicht mit name identisch. Solltest du in deinem 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=100452“