SELF-Treffen in Mannheim 2025

SELFHTML wird 30 Jahre alt! → Veranstaltungs-Ankündigung.

Einstieg in JavaScript/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.[1]

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.

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 gib deinen 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 vermeidest 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 ES6 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 werden.

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.

Kontrollstrukturen

Ein Programm ist nicht nur eine geradlinige Kette von aufeinander folgenden Anweisungen, sondern soll z.B. auf Eingaben unterschiedlich reagieren oder auf gewisse Umstände hin entsprechend reagieren. Dafür kann man bedingte Anweisungen verwenden, die bei Erfüllen einer Bedingung einen Anweisungsblock ausführen, bei Nichterfüllen nichts oder etwas anderes tun.

Wenn-dann-Bedingung mit if

Das Schlimmste, was einem angehenden Software-Ingenieur passieren kann, ist, dass der kleine Bruder versucht, einen Blick auf sein Programm zu werfen. Deshalb bauen wir als nächsten Schritt nun eine Altersabfrage ein. In unserem Quellcode wollen wir uns auch mehr einer HTML-Seite nähern, und darum zeigen wir nun auch einen Teil des Grundgerüsts, das im HTML-Tutorial vorgestellt wird.[2]


4. Eingabe von Namen und Alter ansehen …
 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>4. Eingabe von Namen und Alter</title>
 6 </head>
 7 <body>
 8 <script>
 9    'use strict';
10    const erwachsen = 18;
11    let
12      name  = '',
13      alter = '';
14 
15    name = prompt('Bitte gib deinen Namen ein!');
16    alter = prompt('Bitte gib dein Ihr Alter ein!');
17 
18    if (alter < erwachsen) {
19       alert('Du kommst hier net rein!');
20    }
21    else {
22       alert(`Hallo ${name}!`);
23    }
24 </script>
25 </body>
26 </html>

Das vorherige Beispiel wurde so ausgebaut, dass eine weitere Variable alter deklariert und ebenfalls abgefragt wird. Dazu kommt eine Konstante erwachsen mit dem Wert 18. Eine Konstante ist eine Variable, deren Wert während des Programmablaufs nicht verändert werden kann.

In Zeile 16 wird mit einer if-Anweisung überprüft, ob der in runden Klammern stehende Ausdruck (alter < erwachsen) richtig ist. Der Operator < vergleicht die Werte auf seiner linken und rechten Seite und liefert den logischen Wert true, wenn der linke Wert kleiner ist. Die if-Anweisung prüft, ob sie true erhält (oder einen Wert, den sie als true interpretieren kann).

Ist das der Fall, wird der direkt dahinter in geschweiften Klammern stehende Anweisungsblock ausgeführt. In vielen Programmiersprachen wird dem Anweisungsblock für true noch das Schlüsselwort then vorangestellt (in JavaScript nicht!), deshalb spricht man bei diesem Block auch vom then-Zweig der Abfrage. Falls die Bedingung nicht zutrifft, kann mit Hilfe des Schlüsselworts else (sonst) ein Anweisungsblock vorgegeben werden, der statt dessen ausgeführt werden soll. Diesen nennt man dementsprechend den else-Zweig.

Unser Beispiel gibt im then-Zweig die Meldung aus, dass eine unbefugte Nutzung vorliegt. Gelangt das Programm in den else-Zweig, gilt der Anwender als berechtigt und wird mit seinem Namen begrüßt..

Beachte: Es ist nicht zwingend nötig, den Anweisungsblock in geschweifte Klammern zu setzen, wenn er nur aus einer Anweisung besteht. Aus Gründen der Übersichtlichkeit (und falls du später den Code erweiterst) ist dies jedoch zu empfehlen.

Verzweigung mit switch

Mit if und else kann man genau zwei Fälle unterscheiden. Wenn du feiner differenzieren, also zwischen mehreren Fällen unterscheiden willst, kannst du zwar mehrere if-Abfragen hintereinander notieren, aber es gibt noch eine elegantere Möglichkeit: die Fallunterscheidung mit switch:

6. Altersabfrage mit Gültigkeitsüberprüfung ansehen …
 1 'use strict';
 2 let
 3   name  = '',
 4   alter = '',
 5   eingabe = '',
 6   text = '';
 7 
 8 const erwachsen = 18;
 9 
10 name = prompt('Bitte gibe deinen Namen ein!');
11 alter = prompt('Bitte gib dein Alter ein!');
12 
13 if (isNaN(alter)) {
14   eingabe = 'dumm';
15 } 
16 else if (alter < erwachsen) {
17   eingabe = 'jung';
18 } else {
19   eingabe = 'ok';
20 }
21 
22 switch (eingabe) {
23   case 'jung':
24     text ='Du bist leider zu jung!';
25     break;
26   case 'dumm':
27     text ='Sie sind leider zu dumm, eine Zahl einzugeben!';
28     break;
29   default:
30     text = `Hallo ${name}!`;
31     break;
32 }
33   
34 alert(text);

In diesem Beispiel wird die eingegebene Variable alter überprüft und anhand dessen einer neuen Variable eingabe ein Wert zugewiesen.

In einer switch-Abfrage wird dieser Wert wieder abgefragt und ein entsprechender Text ausgegeben.

Beachte: JavaScript kennt zwei Arten des Tests auf Gleichheit: == und ===. Das zweifache Gleichheitszeichen versucht, die Typen der verglichenen Werte aneinander anzupassen, bevor der Vergleich stattfindet, und würde 2 == "2" mit „wahr“ beantworten. Das dreifache Gleichheitszeichen prüft dagegen strikt und ergibt für jeden Vergleich, bei dem die Typen der verglichenen Werte nicht übereinstimmen, ein „falsch“. Die switch-Anweisung verwendet den strikten Vergleich mit ===!

Schleifen

Zu den wichtigsten Kontrollstrukturen gehören Schleifen (auch „Wiederholung“ oder englisch loop) mit denen ein Anweisungs-Block – der sogenannten Schleifenrumpf oder Schleifenkörper – wiederholt durchlaufen wird, solange die Schleifenbedingung gültig bleibt bzw. als Abbruchbedingung nicht eintritt.[3]

while

Mit Hilfe von while-Schleifen wiederholst du Programmanweisungen beliebig oft, nämlich solange, wie die im Schleifenkopf formulierte Bedingung erfüllt ist. Solche Schleifen eignen sich dann, wenn du nicht weisst, wie oft die Schleife durchlaufen werden soll.


7. Wiederholung einer Anweisung mit While ansehen …
'use strict';
let zahl, text;

zahl = prompt('Bitte gib eine Zahl ein!');

while (zahl >= 1) {
  text = zahl + '- 1 = ' + (zahl-1);
  zahl = zahl -1;
  alert(text);
}

In diesem Beispiel wird von der eingegebenen Zahl zahl in einer Schleife solange eins subtrahiert, bis die Summe 0 erreicht ist. Der Rechenweg wird in der Variablen text gespeichert und dann mit alert ausgegeben.

for

Bei einer for-Schleife zählt der Computer von einer Anfangszahl bis zu einer Endzahl und wiederholt dabei jedes mal den Codeblock („Schleifenrumpf“) hinter dem for(...). Die aktuelle Zahl wird in eine Variable i („Iterator“) gesetzt, damit sie bei Bedarf in dem Codeblock Verwendung finden kann.

8. Zählschleife mit for ansehen …
'use strict';
let
  zahl,
  text;

confirm('Sind Sie bereit?');

for (let i = 1; i <= 10; i++) {
  zahl =  i * i;	  
  text = zahl +' = '+ i +' * '+ i ;
  alert(text);
}

Sobald die Person vor dem Computer mit confirm() bestätigt, wird die Schleife ausgeführt.

Die Zählschleife wird insgesamt 10 mal durchlaufen, nämlich so oft, wie der Zähler, der in der Variablen i definiert und mit dem Wert 1 initialisiert wird, kleiner oder gleich 10 ist (Ausdruck i <= 10), wobei er bei jedem Schleifendurchlauf um 1 erhöht wird (Ausdruck i++).

Die Zählvariable i wird mit sich selbst multipliziert und der Variable zahl zugewiesen.

Anschließend wird alles ausgegeben.

Man kann der Variablen auch einen anderen Namen geben (z. B. zaehler); konventionsgemäß nennt man sie aber meistens i, so wie auch hier in unserem Beispiel.

Ebenso ist es möglich, die Variable hinunter- statt hinaufzählen zu lassen (i-- statt i++). In diesem Fall muss man aber den Anfangs- und den Endwert anpassen – denn wenn i mit dem Wert 1 anfängt und dann immer heruntergezählt wird, dann wird die Bedingung i <= 10 immer zutreffen und die Schleife wird unendlich oft durchlaufen. (Anmerkung: In Wirklichkeit wird sie nicht unendlich oft durchlaufen, sondern „nur“ einige Milliarden Male, bis es zu einem sogenannten Überlauf kommt; in der Praxis macht dies für uns hier aber keinen Unterschied.)

Für einen Countdown müsste die entsprechende Zeile also wie folgt aussehen:

8. Countdown-Zählschleife mit for 
// ... Rest genau wie oben ...

for (let i = 10; i >= 1; i--) {

// ... Rest genau wie oben ...

Weiterführende Links

In einem Anfänger-Tutorial kann nicht alles auf einmal behandelt werden. Deshalb findest du hier Links auf weiterführende Artikel in unserem Wiki:

  1. ↑ HTML/Tutorials/Element, Tag und Attribut Optionale Tags
  2. ↑ alert() und prompt() haben für echte Anwendungsfälle auf Webseiten ernste Nachteile. Deshalb werden heute oft modale Dialogfenster mit dem dialog-Element verwendet.
  3. ↑ Auf dieser Tutorialseite stellen wir nur zwei einfache Schleifenkonstrukte vor. Es gibt noch weitere Schleifenkonstrukte in JavaScript.
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Einstieg_in_JavaScript/Erste_Schritte&oldid=102511“