Grundlagen

Historie von JavaScript

• LiveScript (1995) im Netscape Navigator 2.0
• Entwickelt von Brendan Eich
• umbenannt in JavaScript (Name wurde von Sun lizensiert)
• hat aber nichts mit Java tu tun
• von Netscape an Microsoft lizenziert

JScript (1996) von Microsoft eingeführt

• lizenzunabhängige Sprachvariante
• mit Erweiterungen durch Microsoft

• ECMAScript (1997) – ECMA-262
• European Computer Manufacturer's Association, Genf
• Standardisierung des Sprachkerns von JavaScript
• sollte den Browserkrieg befrieden
• aktuelle Version ECMA2022

Anwendung von JavaScript

• Benutzerinteraktion auf Clientseite
• Verbesserte Navigation
• Überprüfung von Benutzereingaben vor dem Absenden des Formulars
• Dynamische Modifikation von HTML-Seiten zur Laufzeit
• Strukturanpassungen durch Einfügen / Entfernen von HTML-Elementen
• Formatanpassungen durch Ändern von CSS-Einstellungen
• Nachladen von Daten, ohne die HTML-Seite neu zu laden
• AJAX (Asynchronous JavaScript and XML), Frame-Ersatz
• Nachbildung von GUI-Elementen, die in HTML fehlen

Beispiel: Hello World in JavaScript

alert("Hello World!");

Eigenschaften von JavaScript

• C ähnlicher Syntax
• Frei formatierbar
• Interpretiert
• Schwaches Typsystem (loosely-typed)
• Garbage-Collection (ähnlich zu Java)
• Ausschließlich Fließkommazahlen
• Strings in Unicode
• Keine Klassen
• Objekte haben Properties und Methoden

• objektbasiert aber nicht objektorientiert
• Variablen und Funktionen können jederzeit angelegt werden
• Variable Anzahl von Parametern für Funktionen
• Portabel und hardwareunabhängig

Vergleich mit Java

• Ähnlicher Syntax
• Blöcke mit { }
• Kontrollstrukturen: if, switch, for, while, do, try catch
• Kommentare: //, /*...*/
• Stringverkettung mit +

• Variablen sind dynamisch typisiert
• keine Typdeklaration, Variable kann nacheinander unterschiedliche Typen halten
• Zahlen sind immer Gleitkommazahlen (kein int, kein short, …)
• let oder var leiten Variablendeklaration ein
• const definiert Konstanten
• function leitet Funktionsdeklaration ein

let a = 5;
const b = 7;
function f(a) { /* */ }

• Objekterzeugung erfolgt mit new
• Statements werden mit ; beendet
• Am Zeilenende darf ; fehlen, wird automatisch eingefügt
• kein Zeilenende hinter return oder vor ++ bzw. --

Sichtbarkeit von Variablen

• Deklaration mit var
• sind in der ganzen Funktion sichtbar
• Blöcke haben (anders als in Java) keine Auswirkungen auf die Sichtbarkeit
• Deklaration mit let
• haben Block-Scope (wie in Java)

Moderner JavaScript-Code verwendet var nicht mehr

Sichtbarkeit von Variablen (var)

var a = 5;  // global sichtbar

function f() {
    var b = 7; // innerhalb der Funktion sichtbar

    if (b === 7) {
        var c = 9; // innerhalb der Funktion sichtbar
    }
    log("a = " + a);
    log("b = " + b);
    log("c = " + c);
}
f();

Sichtbarkeit von Variablen (let)

let a = 5;  // global sichtbar

function f() {
    let b = 7; // innerhalb der Funktion sichtbar

    if (b === 7) {
        let c = 9; // innerhalb des Blocks sichtbar
    }
    log("a = " + a);
    log("b = " + b);
    log(typeof c);
}
f();

Datentypen in JavaScript

Eingebaute Datentypen von JavaScript

• Boolean: Wahrheitswert (true oder false)
• Number: Ganz- oder Fließkommazahl
• String: Zeichenkette
• Date: Datum
• Array: Indiziertes oder assoziatives Array
• Objekt: Vor- oder selbstdefinierte Objekte
• Function: Funktionen

Typumwandlung

Typumwandlung erfolgt implizit

• hin zum größeren Typ
• keine Genauigkeitsverluste bei Zuweisung

Zwei Vergleichsoperatoren

• == Vergleich mit Typumwandlung
• === Vergleich ohne Typumwandlung

typeof(variable) liefert den Datentyp der Variablen

Beispiel: Typumwandlung

let a = "10";
let b = 10;

log("typeof(a) = " + typeof(a));
log("typeof(b) = " + typeof(b));

let c1 = (a == b);
let c2 = (a === b);

log("c1 = " + c1);
log("c2 = " + c2);

Truthiness

• JavaScript Operatoren ||, && und Kontrollstrukturen (z. B. if) arbeiten mit booleschen Werten, beliebige Daten können übergeben werden und werden zu true/false konvertiert
• Truthiness legt fest, welche Werte als true bzw. false angesehen werden
• falsch sind
• false, ""
• 0, -0, NaN
• null, undefined
• wahr sind alle anderen Werte ⇒ Anders als in vielen anderen Sprachen

Beispiel: Truthiness

if (!0)      { log("0 == false"); }
if (1)       { log("1 == true"); }
if (!NaN)    { log("NaN == false"); }
if (!'')     { log("'' == false"); }
if ('Hallo') { log("'Hallo' == true"); }
if (!null)   { log("null == false"); }

Not a Number (NaN)

• Bei Zahlen repräsentiert NaN den ungültigen Wert Not a Number
• Kein Wert ist gleich NaN (auch nicht NaN selbst)

log(1 / 0);
log(0 / 0);
log(0 === NaN);
log(NaN === NaN)

Einfache Literale

Notation wie in Java mit Besonderheiten bei Strings

let antwort = 42;      // Integer-Literal
let pi = 3.141;        // Fließkomma-Literal
let happy = true;      // Boolean-Literal
let leer = null;       // Null-Literal

// String-Literale
let s1 = 'Hallo';
let s2 = "Hallo";
let s3 = 'String "im String" geht auch';
let s4 = "String 'im String' geht auch";
let s5 = "String " + "Anhang";
let s6 = "\"Escapen von Zeichen\"";
let s7 = "\u00ea Unicode";

Template-Literals

Template-Literals

• Die meisten Skriptsprachen können Variablen in Strings ersetzen
• JavaScript kannte diesen Mechanismus ursprünglich nicht
• Mit ECMAScript 6 wurde er eingeführt, konnte aber aus Kompatibilitätsgründen nicht für "- und '-Strings aktiviert werden ⇒ Neuer Begrenzer `

let name = "Thomas";
let hello = `Hello ${ name }.`;
log(hello);

Ausnahmebehandlung

try, catch, finally ähnlich wie in Java

• Ausnahmen sind nicht typisiert
• daher nur ein catch-Block pro try
• finally wird immer ausgeführt

Beispiel: Ausnahmen

try {
    log("Vor dem throw...");
    throw { name: "Fehlermeldung" };
    log("Nach dem throw...");
}
catch (e) {
    // Fehlerbehandlung
    log("Ooops: " + e.name);
}
finally {
    // wird immer ausgeführt
    log("finally");
}