JavaScript Tutorial - Erste Schritte
- Inhaltsverzeichnis
- 1. Einleitung
- 2. Was ist JavaScript?
- 3. Die Installation
- 4. Das erste JavaScript Programm
- 5. Die Syntax
- 5.1 Kommentare
- 5.2 Datentypen
- 5.3 Variablen
- 5.3.1 Variablennamen
- 6. JavaScript Tutorial Video Kurse
*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.
Sie sollten mindestens Grundkenntnisse in HTML und CSS haben. 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.
Eine Auswahl anderer Seiten, die sich mit HTML und CSS beschäftigen, 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, bleibt natürlich Ihnen überlassen. Sie können sich Bücher über JavaScript* 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 Vorteil, das einem anschaulich die Auswirkungen von Programmbefehlen gezeigt werden können. Das ist mit reinem Text und Screenshots nicht möglich.
Am Ende dieser Seite finden Sie 3 Video Tutorials zu JavaScript. Alle 3 sind in englisch. Sie sind für Anfänger konzipiert und meiner Meinung nach zum Einstieg sehr gut geeignet.
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.
Das dritte von Mike Dane ist vor allen Dingen für Leute interessant, die schon Programmiererfahrung haben oder sich nur einen schnellen Überblick über JavaScript verschaffen wollen. Es ist mit 46 Minuten Laufzeit das mit Abstand kürzeste Video.
Meine Empfehlung ist, wenn Sie keine Programmiererfahrung haben und JavaScript lernen wollen, sich das erste Video von Beau Carnes komplett anzuschauen. Danach haben Sie einen ersten Eindruck davon, wie JavaScript funktioniert.
Im zweite Video wird Ihnen unter anderem sehr gut vermittelt, was man mit JavaScript realisieren kann.
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!
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.
3. Die Installation
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 beispielsweise Notpad++ reicht für den Anfang vollkommen aus.
Eine Auswahl an HTML- und Programmiereditoren finden Sie auf meiner Seite HTML EDITOREN.
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.
5. Die Syntax
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:
Ein multiline Kommentar erstreckt sich über mehrere Zeilen:
Kommentarzeile 1
Kommentarzeile 2
...
*/
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
- null
- boolean
- string
- symbol
- number
- object
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!
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:
- var
- let
- const
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:
Wird eine Variable deklariert, wird eine Variable nur festgelegt. Es wird ihr kein Wert zugewiesen.
Beispiel für die Zuweisung (zu) einer Variablen:
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:
Die Variable c ist eine uninitialisierte Variable, weil ihr kein Wert zugewiesen ist.
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:
ist nicht gleich der Variablen:
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:
- Vergeben Sie "sprechende" Variablennamen. Aus einem Variablennnamen sollte möglichst hervor gehen, wozu die Variable geschaffen worden ist.
- 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:
Variablenname bestehend aus 2 zusammengesetzten Wörtern:
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...
6. JavaScript Tutorial Video Kurse
Ich empfehle Ihnen sich zuerst folgendes Video von Beau Carnes anzusehen:
Danach halte ich es für eine gute Idee, sich das Video von Brad Traversy anzuschauen:
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.
Es werden Basiskenntnisse von JavaScript vermittelt.