CSS, HTML & Javascript mit {stil}

Javascript Grundlagen: Datentypen, Objekte und Funktionen

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.

Javascript Programmierung

Zahlen, Strings, Boolean

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«, ein String / Zeichenkette wie »Peter Schmitz« oder ein Wahrheitswert (Boolean) wie has-white-background sein. Programme untersuchen Daten und ändern sie – sie berechnen die Summe von zwei Zahlen oder prüfen, ob der String eine Emailadresse ist.

Datentypen klassifizieren Daten – ordnen sie in Kategorien, denn mit einer Zeichenkette sind andere Operationen verbunden als mit Zahlen.

Primitives, Objekte und spezielle Datentypen

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

Javascript Variablen

Variablen werden durch let oder const definiert. Dazu gilt auch noch das ältere Schlüsselwort var.

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

Variablen mit let und const hingegen sind nur innerhalb ihres Blocks aus geschweiften Klammern bekannt (Block Scope). Variablen mit demselben Namen in einem anderen Block überschreiben Variablen mit let / const nicht.

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

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.

const 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 class

Javascript ist keine Klassen-basierte Programmiersprache wie Java. In Klassen-basierten Sprachen werden Objekte mit class konstruiert und jedes Objekt erbt seine Eigenschaften und Verhalten vom Konstruktor der Klasse. Das klingt zwar fast genauso wie der Umgang mit Objekten, Vererbung und Prototyping in Javascript, aber die traditionelle Technik des Prototypings in Javascript hinterläßt schnell einen desorientierten Eindruck.

Das neue Schlüsselwort class lehnt sich besser an die klassenorientierten Programmiersprachen an. Javascript Klassen setzen unter der Oberfläche weiterhin auf Konstruktoren und Prototypen auf, aber erfordern weniger Code und sind besser lesbar.

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.

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

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

benutzt werden. Mehr zu reservierten Wörtern: Javascript Variablennamen / Identifier

Suchen auf mediaevent.de