JavaScript Tutorial

1. Einleitung

Dieses JavaScript Tutorial ist an absolute Programmieranfänger adressiert. Selbst wenn Sie noch nie programmiert haben, sollten Sie, wenn Sie dieses Tutorial nicht nur durchgelesen sondern durchgearbeitet haben, in der Lage sein zumindest kleine Aufgaben zu programmieren.

JavaScript ist nicht nur aber hauptsächlich dazu gedacht, die Möglichkeiten von HTML und CSS zu erweitern. Nur das wird hier auch behandelt.
Wenn Sie zumindest Grundkenntnisse in HTML und CSS haben, sind Sie hier richtig!
Wenn nicht sollten Sie sich Grundkenntnisse in HTML und CSS erst mal aneignen.
Bevor Sie die nicht haben, macht es keinen Sinn sich mit JavaScript in dem hier behandelten Kontext zu befassen.
Hier finden Sie ein HTML Tutorial und hier ein CSS Tutorial.

Natürlich gibt es zahlreiche andere Seiten, die sich mit HTML und CSS beschäftigen.
Eine Auswahl davon finden Sie auf meiner Linkliste.

Eine Programmiersprache kann man sich sehr gut selber also autodidaktisch beibringen. Wenn Sie jemand kennen, der sich mit der Programmiersprache, die Sie lernen wollen, auskennt, um so besser. Wie Sie lernen wollen, bleibt Ihnen überlassen. Sie können sich Bücher kaufen und durcharbeiten und als Nachschlagewerk benutzen, Sie können sich mit entsprechenden Tutorials wie diesem befassen oder Sie schauen sich Video Tutorials an. Oder Sie machen alles von oben erwähntem.
Videos haben den unschlagbaren Vorteil, das einem auf diese Weise anschaulich, die Auswirkungen von Programmbefehlen gezeigt werden können.
Das ist mit reinem Text nicht möglich. Alternativ kann man natürlich Screenshots einbauen, was aber aufwändig und lange nicht so anschaulich ist.
Am Ende dieser Seite finden Sie 2 Video Tutorials zu JavaScript. Beide sind in englisch. Beide sind für Anfänger konzipiert und beide finde ich sehr gut.
Das erste ist hervorragend strukturiert und vermittelt einem Schritt für Schritt die theoretischen Grundlagen bevor es praktische Anwendungen beschreibt.
Das zweite ist, was die Einführung zu JavaScript betrifft, kürzer gehalten. Danach geht es relativ schnell zu fortschrittlicheren Anwendungen von JavaScript, die man als Anfänger wahrscheinlich nicht direkt nachvollziehen kann.
Meine Empfehlung ist sich das erste Video von Beau Carnes komplett anzuschauen. Danach haben Sie einen ersten Eindruck davon, wie JavaScript funktioniert und ob Sie sich damit überhaupt weiter befassen wollen.
Danach können Sie sich das zweite Video angucken. Dort wird Ihnen unter anderem sehr gut vermittelt, was man mit JavaScript realisieren kann, und es wird einem auch gezeigt, wie man Anwendungen realisiert, die man häufig erstellen will.
Danach kann man sich mit meinem Tutorial (oder natürlich auch mit einem beliebig anderem) befassen und Themen nachlesen oder noch mal nachschlagen.
Wie Sie an die Sache rangehen, bleibt selbstverständlich Ihnen überlassen. Aber ich halte die oben aufgeführte Herangehensweise für gut.

Mein Tutorial orientiert sich im wesentlichen an dem Video von Beau Carnes.

Programmieren lernen Sie aber weder durch Videos schauen noch durch lesen.
Beides dient lediglich dazu, Ihnen die theoretischen Grundlagen zu vermitteln.
Programmieren lernen Sie NUR, wenn Sie programmieren!

zurück zum Inhaltsverzeichnis

2. Was ist JavaScript?

JavaScript entspricht der ECMAScript Spezifikation und ist eigentlich ECMAScript. Die korrekte Bezeichnung für JavaScript ist folglich ECMAScript.
Die Bezeichnung JavaScript ist aber nicht so sperrig wie ECMAScript und hat sich im Sprachgebrauch durchgesetzt und wird auch hier verwendet.

JavaScript ist eine High Level Programmiersprache. Das bedeutet, das sie sehr abstrakt und auf einer höheren Ebene angesiedelt ist.
Am einfachsten versteht man, was damit gemeint ist, wenn man erklärt, was Low Level Programmiersprachen wie beispielsweise C und C++ sind. Diese laufen auf einem tiefen Niveau ab. Man muss sich bei solchen Programmiersprachen um viele Dinge wie zum Beispiel das Speichermanagement selber kümmern, was bei JavaScript nicht erforderlich ist.
Dadurch ist JavaScript sehr viel leichter erlern- und anwendbar als die oben angesprochenen Programmiersprachen.

JavaScript ist eine Interpreter Sprache. Das bedeutet, das die Javascript Befehle direkt vom Rechner ausgeführt (interpretiert) werden.
Programme die in C oder C++ geschrieben sind, sind erstmal nicht lauffähig. Sie müssen erst von einem Compiler in ein Format übersetzt werden, das der Rechner versteht.
Dafür werden sie dann aber deutlich schneller ausgeführt als Interpretersprachen.

JavaScript ist eine Multi-paradigm Sprache. Das heißt, der Programmierstil ist nicht festgelegt. Man kann mit JavaScript beispielsweise funktional oder objektorientiert programmieren.
Mit C kann man nur strukturiert, mit C++ nur objektorientiert programmieren. Diese Begrifflichkeiten sind aber erstmal nicht weiter wichtig.

JavaScript kann sowohl clientseitig, im Browser des Anwenders als auch mit entsprechenden Erweiterungen auf dem Server ausgeführt werden.
Gegenstand dieses Tutorials ist die clientseitige Programmierung.

Mit JavaScript werden die Möglichkeiten die HTML und CSS bieten erweitert. Hauptsächlich wird JavaScript dazu benutzt, um Webseiten interaktiv zu gestalten, was nur mit HTML und CSS nicht möglich ist. Damit sind die Möglichkeiten von JavaScript noch lange nicht erschöpft, werden aber an dieser Stelle nicht erläutert.

zurück zum Inhaltsverzeichnis

3. Die Installation von JavaScript

Es ist nicht erforderlich JavaScript zu installieren. JavaScript läuft unter fast jedem Betriebssystem und mit fast jedem Browser. Auch auf mobilen Endgeräten.
JavaScript läuft in der Form, wie es hier behandelt wird, im Browserfenster des Anwenders ab, der die Seite die JavaScript enthält aufruft.
Das heißt, Sie können für die ersten Experimente Ihren gewohnten Browser nehmen, dort die Konsole öffnen und loslegen.
Unter Mozilla Firefox finden Sie die beispielsweise unter: "Extras" => "Web-Entwickler" => "Web-Konsole"
Alternativ gibt es auch diverse Webseiten, die eine JavaScript Konsole emulieren. Dort können Sie Ihre Befehle auch eingeben.
Eine Auswahl davon wird Ihnen am Anfang des Videos von Beau Carnes gezeigt.
Was Sie zwar nicht installieren müssen aber sollten ist ein Programmiereditor. Die gibt es kostenlos und kostenpflichtig.
Ein kostenloser wie Notpad++ reicht für den Anfang vollkommen aus.

zurück zum Inhaltsverzeichnis

4. Das erste JavaScript Programm

Öffnen Sie die Konsole Ihres Browser und geben Sie folgendes ein: console.log ("Hello World");
In der Konsole erscheint der Text "Hello World" ohne Anführungszeichen.
Der Befehl "console.log" dient dazu Zeichen auf der Konsole auszugeben. In diesem Fall den String "Hello World".
Machen Sie das Gleiche nochmal und geben Sie statt "Hello World" die Zahl 5 ohne Anführungszeichen in die runden Klammern ein, wird die Zahl 5 ausgegeben. Das Gleiche passiert, wenn Sie die oben angegebenen Befehle in einer HTML Datei stehen haben und Sie diese Datei aufrufen und die Konsole geöffnet ist.
Allerdings ist es dann zwingend erfoderlich, das die JavaScript Befehle zwischen den Tags:
<script>...</script>
stehen.
Alternativ können Sie Ihre JavaScript Programme in eine externe Datei mit der Dateiendung ".js" schreiben. Diese Datei muss dann in die HTML Datei in der das JavaScript Programm ausgeführt werden soll eingebunden werden.
Das kann dann zum Beispiel so:
<script src="/js/meinjavascriptprogramm.js" type="text/javascript"></script>
aussehen.
JavaScript Programme müssen zwar nicht sollten aber immer am Ende einer HTML Datei stehen, damit der Anwender beim laden der Seite zuerst etwas auf dem Bildschirm zu sehen bekommt und danach erst das Programm abgearbeitet wird.

zurück zum Inhaltsverzeichnis

5. Die Syntax von JavaScript

5.1 Kommentare

Kommentare dienen dazu, wie der Name schon sagt, Ihre Programme zu kommentieren. Das macht man, damit Sie und gegebenenfalls andere Ihren Code besser nachvollziehen können.
Wenn Sie ein JavaScript Programm geschrieben haben und nach einem halben Jahr dieses Programm erweitern wollen, werden Sie schnell feststellen, das es gar nicht so einfach ist, das was Sie sich damals überlegt haben, wieder ins Gedächtnis zu rufen. Kommentare helfen dabei und man sollte davon auch Gebrauch machen.
In welchem Umfang bleibt jedem selbst überlassen.

Das was hinter beziehungsweise zwischen einem Kommentar steht wird von JavaScript ignoriert.

Es gibt einzeilige (inline) und mehrzeilige (multiline) Kommentare.

Ein inline Kommentar erstreckt sich nur über die Zeile in der er steht.

Das sieht dann so aus:

// Kommentar

Ein multiline Kommentar erstreckt sich über mehrere Zeilen:

/*
Kommentarzeile 1
Kommentarzeile 2
...
*/

zurück zum Inhaltsverzeichnis

5.2 Datentypen

In jeder Programmiersprache gibt es unterschiedliche Datentypen. Diese Datentypen sind für den Computer wichtig, damit er weiß, womit er es zu tun hat. In JavaScript gibt es 7 unterschiedliche Datentypen.

Das sind:

undefined

undefined bedeutet, das beispielsweise eine Variable (noch) nicht definiert ist.

null

null bedeutet, das man etwas als null also nichts definiert.

boolean

boolean heißt, das etwas richtig oder falsch ist.

string

string ist eine beliebige Zeichenfolge. Auch eine Zahl kann ein string sein. Dann kann man damit aber nicht mehr rechnen.

symbol

symbol ist ein unveränderlicher Wert, der einzigartig ist.

number

number ist eine Zahl.

object

object speichert Schlüssel Wert Paare ab.

Lassen Sie sich von der Abstraktheit dieser Erklärungen nicht verwirren.
Später wird Ihnen klar, wozu man diese Datentypen braucht.
Die einzelnen Puzzleteile dieses Tutorials werden sich nach und nach zu einem klaren Gesamtbild von JavaScript entwickeln!

zurück zum Inhaltsverzeichnis

5.3 Variablen

Was ist eine Variable? Eine Variable ist ein beliebiger Name für eine Speicherstelle oder einen Speicherbereich.
Über diesen Namen also die Variable spricht man einen Speicherbereich an und weist ihm beispielsweise einen Wert zu.

Konkretes Beispiel:

var vorname = "Jürgen"

var ist das Schlüsselwort; vorname ist der Name der Variablen; = ist der Operator; Jürgen ist der Wert der der Variablen vorname zugewiesen wird, in diesem Fall ein string

Übersetzt heißt das: Weise der Variablen vorname den Wert (Datentyp: string) Jürgen zu.

Ich möchte noch mal betonen das Variablen grundsätzlich beliebige Namen haben können.

var limonade = "Jürgen" hat den gleichen Effekt wie oben. Mit dem Unterschied das die Variable diesmal limonade heißt.
Für die Programmausführung ist der Name der Variablen vollkommen gleichgültig. Sinnvollerweise vergibt man natürlich trotzdem "sprechende" Variablennamen damit man seine Programme besser versteht!

In JavaScript gibt es 3 verschiedene Schlüsselwörter für Variablen:

Das sind:

Variablen, die über var deklariert werden, sind im gesamten JavaScript Programm gültig.

Variablen, die über let deklariert werden, sind nur temporär im JavaScript Programm gültig.

Variablen, die über const deklariert werden, sind im gesamten JavaScript Programm gültig und im Gegensatz zu den beiden obigen Schlüsselwörtern konstant also nachträglich nicht mehr änderbar.
Dazu später mehr.

Jede Codezeile in JavaScript endet mit einem Semikolon (;). Das ist zwar kein muss, sollte aber beherzigt werden, damit man weiß, das diese Codezeile hier zu Ende ist.

Es ist zu unterscheiden zwischen der Deklaration einer Variablen und der (Wert)Zuweisung (zu) einer Variablen.

Beispiel für die Deklaration einer Variablen:

var a;

Wird eine Variable deklariert, wird eine Variable nur festgelegt. Es wird ihr kein Wert zugewiesen.

Beispiel für die Zuweisung (zu) einer Variablen:

var b = 2;

Hier wird einer Variablen ein Wert (die Zahl 2) zugewiesen. Im Fall der Variablen b findet Deklaration und Zuweisung gleichzeitig statt.

Empfehlung: Ergänzend dazu schauen Sie sich bitte den entsprechenden Abschnitt in dem Video von Beau Carnes ab 09 Min. 15 Sek. an.

Analog gilt:

var c;

Die Variable c ist eine uninitialisierte Variable, weil ihr kein Wert zugewiesen ist.

var d = 3;

Die Variable d ist eine initialisierte Variable. Ihr ist der Wert 3 zugewiesen worden.

Empfehlung: Ergänzend dazu schauen Sie sich bitte den entsprechenden Abschnitt in dem Video von Beau Carnes ab 11 Min. 32 Sek. an.

5.3.1 Variablennamen

Variablennamen sind grundsätzlich beliebig. Aber es gibt ein paar Sachen, die man beachten muss und ein paar Sachen, die man beachten sollte.
Was man beachten muss ist, das Variablennamen Case Sensitiv sind. Das heißt JavaScript unterscheidet zwischen Gross- und Kleinschreibung von Variablennamen.

Die Variable:

var abc = 3;

ist nicht gleich der Variablen:

var aBc = 3;

Es handelt sich um 2 unterschiedliche Variablen, die nur den gleichen Wert (die Zahl 3) haben.

Zu den Dingen die man beachten sollte gehört:

  1. Vergeben Sie "sprechende" Variablennamen. Aus einem Variablennnamen sollte möglichst hervor gehen, wozu die Variable geschaffen worden ist.
  2. Als Konvention für Variablennamen in JavaScript gilt, das Variablennamen klein geschrieben werden. Wenn Variablennamen aus mehreren zusammengesetzten Wörtern bestehen, wird das erste Wort kleingeschrieben und die folgenden Wörter beginnen mit einem Grossbuchstaben.

Beispiele:

Variablenname bestehend aus einem Wort:

var straße = "Autobahn";

Variablenname bestehend aus 2 zusammengesetzten Wörtern:

var straßenBelag = "Asphalt";

Empfehlung: Ergänzend dazu schauen Sie sich bitte den entsprechenden Abschnitt in dem Video von Beau Carnes ab 12 Min. 40 Sek. an.

Fortsetzung folgt...

zurück zum Inhaltsverzeichnis

6. JavaScript Tutorial Video Kurse

Ich empfehle Ihnen sich zuerst folgendes Video von Beau Carnes anzusehen:

Learn JavaScript - Full Course for Beginner
Didaktisch hochwertiges, gut strukturiertes Video in englischer Sprache das ein sehr guter Einstieg für Programmieranfänger in JavaScript ist.

Danach halte ich es für eine gute Idee, sich das Video von Brad Traversy anzuschauen:

JAVASCRIPT CRASH COURSE For Beginners...
Englischsprachiges JavaScript Video Tutorial für Anfänger, das aber sehr schnell zu praktischen Anwendungen übergeht, die man als Anfänger wahrscheinlich nicht sofort nachvollziehen kann.
Trotzdem sehenswert, da man einen Eindruck vermittelt bekommt, was mit JavaScript alles möglich ist.

Wenn Sie Programmiererfahrung haben und nur JavaScript neu für Sie ist und/oder sich nur einen Überblick über JavaScript verschaffen wollen, dann empfehle ich Ihnen das Video von Mike Dane.
Mike Dane spricht grundsätzlich ziemlich schnell. In diesem Video hat er diesbezüglich noch mal den Turbo eingeschaltet.
Er "rast" förmlich durch JavaScript. Er spricht aber wie immer sehr deutlich. Es kann allerdings sein, das Ihr Gehirn zwischendurch eine kleine Pause braucht, damit kein stack overflow entsteht.

JavaScript Programming | In One Video
Englischsprachiges JavaScript Video Tutorial für Leute die mit anderen Sprachen Programmiererfahrung haben.
Es werden Basiskenntnisse von JavaScript vermittelt.

zurück zum Inhaltsverzeichnis


Die Datei wurde zuletzt aktualisiert am: 23.02.2020