CSS, HTML und Javascript mit {stil}

Javascript Grundlagen: Variablen, Datentypen, Funktionen

Javascript Programmierung – Tutorial für Einsteiger

Wer Javascript als erste Programmiersprache lernt, muss sich mit den Konzepten von Datentypen wie Zahl oder Zeichenkette (Number oder String), Anweisungen oder Befehlen, Operatoren von Plus bis Größer Gleich, Variablen und Funktionen vertraut machen.

Die grundlegenden Konzepte von Javascript werden in der ECMAScript Language Specification festgelegt. Darüber hinaus beinhaltet Javascript je nach Anwendung – HTML-Seiten, SVG oder XML, eBooks, Photoshop und Postscript – Schnittstellen zum jeweiligen Dokumententyp (z.B. Webseiten, PDF, Grafik).

Programme agieren auf Daten. Diese Daten können Zahlen wie »42« oder ein String wie »Peter Schmitz« sein. Programme untersuchen Daten und ändern sie – sie berechnen die Summe von zwei Zahlen oder prüfen, ob der String eine Emailadresse ist.

Folgen von Anweisungen, die das Script mehrfach braucht, werden in Funktionen zusammengefasst.

Datentypen: Boolean, Number und String

JavaScript-Variablen stehen für Zahlen wie 4711, Zeichenketten wie "Peter Schmitz" und Wahrheitswerte oder Boolean (true oder false), die als unterschiedlichen Arten von Daten behandelt werden. Javascript hat nur einen kleinen Satz von einfachen nicht zusammengesetzten Datentypen: Boolean, Number und String und die speziellen Werte null und undefined. Alles andere sind Varianten vom Typ Object, einem zusammengesetzten Datentyp.

var a = 42;              // Zahlen wie 42 oder 4,98
var b = true;            // Boolesche Werte: true oder false
var c = "Lorem Ipsum";   // String – Zeichenkette 
undefined                // z.B. Variablen denen noch kein Wert zugewiesen wurde
null                     // beschreibt einen Nullwert

Komplexe Datentypen

Javascript Arrays
sind geordnete Sammlungen von logisch zusammengehörigen Elementen, die mit einem einzigen Namen angesprochen werden.
var farben = new Array("rot", "grün", "blau");
Javascript Funktionen
sind Datentypen in Javascript – d.h., sie können behandelt werden, als würden sie Werte enthalten, die geändert werden können.
var total = sum(40, 2);
Javascript Objekte
sind Behälter für Werte und Funktionen – komplexe Datentypen, die individuell für besondere Anforderungen konstruiert werden.
var adress = new Object();

Operatoren

Berechnen oder Vergleichen von Werten: Plus, Minus, Mal, Modulo, ist gleich, größer gleich

summe + steuer

Anweisungen

Nahezu jede Zeile Javascript ist eine Anweisung oder Befehl. Anweisungen deklarieren und initialisieren Variablen, berechnen und ändern die Werte von Variablen, rufen Methoden und Funktionen auf und treffen Entscheidungen.

while (clicks < 10) {
    Anweisung; 
    Anweisung; 
    Anweisung; Anweisung;
}

Variablen

Variablen werden in Javascript durch die var-Anweisung definiert. Variablen müssen deklariert werden, bevor sie benutzt werden können. Wenn sie innerhalb einer Funktion definiert werden, gelten mit var definierte Variablen nur innerhalb der Funktion und sind nicht von außerhalb der Funktion zugreifbar.

Konstante

Mit dem Schlüsselwort const werden Konstanten definiert, die im Programm nur gelesen, nicht aber verändert werden können.

const mwst = 16; 

Literale

Literale stellen Werte dar. Im Gegensatz zu Variablen sind Literale feste Werte, die dem Script sozusagen wörtlich übergeben werden.

  • Array-Literal var farben = ["rot", "grün", "blau"];
  • Boolean-Literal var isIn = true und var isIn = false
  • Floating-Point Literal var pi = 3.1415
  • Integer-Literal var antwort = 42
  • Objekt-Literal var adress = { name: "Hansen", ort: "Bonn", plz: 4711 }
  • String-Literal var lamm = "bähbäh";

Funktionen

Funktionen sind ein Stück Code, das einmal definiert wird und im Programm mehrfach aufgerufen werden kann – Funktionen sparen aufwändige und fehlerträchtige Doppelprogrammierung und strukturieren gleichzeitig das Programm ähnlich wie die Kapitel eines Buches. Zuguterletzt verhindern Funktionen, dass Code automatisch beim Laden des Dokuments ausgeführt wird – Funktionen werden erst beim expliziten Aufruf der Funktion geladen.

function summe(x, y) {
    return x + y;
}

var result = summe (42, 18);

Blöcke

Blöcke von geschweiften Klammern bilden keinen Scope. Scope ist die Bezeichnung für die Umgebung, innerhalb der die dort definierten Variablen gelten. Der einzige Scope in Javascript wird durch Funktionen gebildet.

Objekte

Javascript ist eine objektorientierte Programmiersprache. Der Schlüssel zu einem schnellen Verständnis von Javascript liegt in der Struktur seiner Objekte. Javascript enthält nur wenige Funktionen, die nicht Teil eines Objekts sind.

Objekte bestehen aus

  • Methoden (Funktionen),
  • Eigenschaften (Daten oder andere Objekte),
  • Ereignisse, die an ein Objekt gebunden sind.

Objekte realisieren einfache Datenstrukturen wie Strings und komplexe Datenstrukturen – z.B. ein Adressbuch mit hoher Funktionalität.

var myObject = { firstName: "Monika", lastName: "Schulze", city: "Neudorf" };

Javascript kann auf eine große Anzahl von eingebauten Objekten zurückgreifen, die Charakteristika des Webdokuments darstellen. Das wichtigste Objekt ist das DOM, das Document Object Model.

Das globale Objekt ist der Hüter aller Funktionen und Variablen, die nicht innerhalb anderer Funktionen und Objekte definiert wurden. Das globale Objekt hat keinen expliziten Namen.

Reservierte Wörter

Reservierte Wörter können nicht

  • als Name in einer literalen Objekt-Notation
  • als Name eines Mitglieds in einer dot-Notation
  • als Argument einer Funktion
  • als Variable
  • als unqualifizierte globale Variable
  • als Sprungmarke

Reserved Words

abstract boolean break byte case catch char class const continue debugger default delete do double else enum export extends false final finally float for function goto if implements import in instanceof int interface long let native new null package private protected public return short static super switch synchronized this throw throws transient true try typeof var void volatile while with

Nicht alle reservierten Wörter werden in JavaScript tatsächlich benutzt.