Javascript Grundlagen: Variablen, Datentypen, Funktionen

Javascript Programmierung – Einstieg und Grundlagen

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 / eine Zeichenkette 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.

  • primitives
    • Number
    • String
    • Boolean
  • objects
    • Object
      • Function
      • Array
      • Date
      • RegExp
  • special
    • Null
    • Undefined
let a = 42;              // Zahlen wie 42 oder 4,98
let b = true;            // Boolesche Werte: true oder false
let 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.
let 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.
let total = sum(40, 2);
Javascript Objekte
sind Behälter für Werte und Funktionen – komplexe Datentypen, die individuell für besondere Anforderungen konstruiert werden.
let 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 definieren und initialisieren Variablen, berechnen und ändern die Werte von Variablen, rufen Methoden und Funktionen auf und treffen Entscheidungen.

for (let i=0; i<3; i++) {
   console.log(i);
}

console – Javascript Ausgabe über rechte Maustaste :: Eigenschaften bzw. F12 in IE/Edge

Variablen

Variablen werden in Javascript durch die Anweisung var oder let definiert.

Die Definition von Variablen mit var ist die ältere Form, let ist erst mit einer jüngeren Versionen von ECMAScript als verbesserte Variante hinzugekommen. Variablen, die außerhalb von Funktionen mit var definiert werden, sind im gesamten Script / Block (global scope) bekannt und können schnell versehentlich überschrieben werden.

Variablen mit let und Konstante mit const hingegen sind nur innerhalb ihres Blocks bekannt und Variablen mit demselben Namen in einem anderen Block überschreiben Variablen mit let nicht.

var nodeId = 1001; 
let postId = 200;
const blogId = 17;

console.log (window.nodeId);
console.log (window.postId);
console.log (window.siteId);
[Log] 1001 
[Log] undefined 
[Log] undefined 

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 ausgeführt.

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

var result = summe (42, 18);

Blöcke

Traditionell bilden Blöcke von geschweiften Klammern in Javascript 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.

Mit ECMAScript 6 sind Variablen, die mit let definiert wurde, nur innerhalb ihres Blocks (der dann auch von einem Paar geschweifter Klammern erzeugt wird) bekannt und können außerhalb ihres Geltungsbereichs nicht durch Variablen mit demselben Namen überschrieben werden.

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.

Javascript Konstante

Konstanten werden mit const definiert. Einer Konstanten kann kein neuer Wert zugewiesen werden, sie sind aber trotzdem nicht unveränderlich.

const k = 42; 

k = 17; // Führt zu einer Fehlermeldung
           Uncaught TypeError: Assignment to constant variable.

Wenn die Konstante ein Array oder ein Objekt ist und Werte oder Eigenschaften geändert werden, ändert sich auch der Wert der Konstanten. Das ist also OK:

const k = [17, 4, 29]; 
k[1] = 2525;

console.log ("k[1]" + k);
[log] 17, 2525, 29

In Javascript sind NaN, undefined und INFINITY Konstanten.

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";

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.

if then else while do try catch case switch function() typeof false false continue var