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 Number oder String und komplexen Typen – Referenzen (Verweise) – vertraut machen. Javascript hat nur einen kleinen Satz von einfachen, nicht zusammengesetzten Datentypen: Boolean, Number und String.

Javascript Programmierung

Primitive Datentypen, Objekte und spezielle Datentypen

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.

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.

  • Primitive Datentypen
    • Number
    • String
    • Boolean
    • Symbol
    • BigInt
  • Spezielle primitive Datentypen
    • null
    • Undefined
  • Referenzdatentypen
    • Object
      • Function
      • Array
      • Map
      • Set
      • class
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                     // absichtlicher leerer Wert

null und undefined

undefined bedeutet, dass eine Variable deklariert, aber nicht initialisiert wurde.

null ist ein absichtlich »leerer« Wert (typeof null liefert fälschlicherweise object, was ein bekannter JavaScript-Fehler ist.)

Kein Integer, kein Float, aber BigInt?

In JavaScript gibt es nur den Zahlentyp Number, der auf 64-Bit Gleitkommazahlen (IEEE 754-Standard) beruht. Sowohl ganze Zahlen (Integer) als auch Fließkommazahlen (Float) sind beides Number-Werte. 

let a = 42;       // Ganzzahl (Integer)
let b = 3.14;     // Fließkommazahl (Float)
let c = 50.0;     // Fließkommazahl (Float)

BigInt kam erst 2018 in JavaScript an, weil normale Number-Werte nur 53 Bits für die Zahlenspeicherung haben: Number kann nur Werte von -2⁵³ bis 2⁵³-1 exakt speichern.

const normal = 9007199254740991; // Maximale sichere Zahl in JavaScript
const big = 9007199254740992n;   // BigInt - kann unendlich groß sein

Mit dem typof-Operator kann man prüfen, von welchem Datentyp eine Variable ist.

console.log(typeof normal); // 'number'
console.log(typeof big);    // 'bigint'

Dynamisch typisiert

Javascript ist eine dynamisch typisierte Programmiersprache, in der Variablen keinen festen Typ haben, sondern der Typ einer Variablen hängt von ihrem Wert ab und kann jederzeit geändert werden.

let x = 3.14;  // x ist eine Zahl (also Number)
x = "Pi";      // x ist jetzt ein String

console.log(typeof x); // 'string'

Komplexe Datentypen

Javascript Arrays
sind geordnete Sammlungen von logisch zusammengehörigen Elementen, die mit einem einzigen Namen angesprochen werden.
const farben = ["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.
{ name: "Mathilde", alter: 25 }

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.

Suchen auf mediaevent.de