JavaScript

Hintergrund & ECMAScript

Informatik – 3. Semester

Software- und Web-Engineering I · TH Lübeck
1 Hintergrund & ECMAScript
2 Grundlagen, Einbettung & Parsing-Order

Woher kommt JavaScript, und warum braucht es einen Standard?

Software- und Web-Engineering I · TH Lübeck
Allgemeines
  • Wurde für eingebettete Skripte entwickelt, die einmalig von einem Server heruntergeladen und lokal (im Browser) ausgeführt werden
    • Dadurch lassen sich HTML-Seiten dynamisch verändern
    • Verringert Datenverkehr zwischen Browser und Server
  • Typische Aufgaben von JavaScript-Programmen in HTML-Seiten:
    • Eingegebene Daten vor dem Versenden prüfen oder formatieren
    • Maus- und Tastatureingaben verarbeiten
    • Dynamische Inhalte wie Suchergebnisse verwalten
  • Zunehmend wird es auch für andere Aufgaben verwendet
    • z.B. auch serverseitige Programmierung mit NodeJS
Software- und Web-Engineering I · TH Lübeck
Ursprung
  • 1995 wurde die erste Version von JavaScript von der Firma Netscape für ihren damaligen Browser entwickelt
  • 1996 erweiterte Microsoft den Internet Explorer um eine weitgehend gleiche Skriptsprache namens JScript
  • Ende 1996 begann die Entwicklung eines gemeinsamen Standards für den Kern von JavaScript und JScript: ECMAScript
Software- und Web-Engineering I · TH Lübeck
EcmaScript – Ursprung
  • „European Computer Manufacturers Association“ ist ein Standardisierungsgremium für Computer und Web-Standards
  • Heute heißt es „Ecma International – European association for standardizing information and communication systems.”
  • Standards beginnen jedoch heute immer noch mit dem Kürzel ECMA
  • Annual Release Cycle (aktuell ES2025)
Software- und Web-Engineering I · TH Lübeck
ECMAScript – Grundlagen
  • ECMAScript ist ein Standard für eine Programmiersprache
  • ES definiert Aspekte wie Datentypen, Operatoren, Ausdrücke, Objekte und Kontrollstrukturen
  • ES beschreibt jedoch keinerlei Funktionen für die Interaktion mit der ausführenden Plattform
    • z.B. Betriebssystem oder Webbrowser
    • Insbesondere gibt es in ECMAScript keine Ein- und Ausgabefunktionen
  • ECMAScript-Code wird deshalb in ein so genanntes „Host Environment“ eingebettet
    • Das Host Environment liefert umgebungsspezifische Features wie Fenster, Menüs, Input & Output, Caching, etc.
    • JavaScript und JScript stellen ein solches Host Environment zur Verfügung
    • Aus Sicherheitsgründen wird der Zugriff auf das Betriebssystem typischerweise stark eingeschränkt
Software- und Web-Engineering I · TH Lübeck
EcmaScript
Reaktions-GIF: skeptisch hochgezogene Augenbraue
  • Wenn JS die einzige aktuell relevante Implementation ist, wozu brauchen wir dann einen getrennten Standard?
Software- und Web-Engineering I · TH Lübeck
EcmaScript als Standard
  • Welche Vorteile und Nachteile entstehen durch eine Trennung von Standard und Implementation?
  • Standard = EcmaScript
  • Implementation = JavaScript
3 Min
Software- und Web-Engineering I · TH Lübeck
EcmaScript als Standard
Vorteile
  • Paradigmaübergreifende Anwendung
    • Client-Side Logik mit Browsern
    • Server-Side Logik mit Node.js
    • Cross-Plattform Apps mit React Native
Nachteile
  • Implementationen variieren
    • Browser haben unterschiedliche Implementationen von JavaScript
    • Dadurch stellen Browser manche Seiten unterschiedlich dar
Software- und Web-Engineering I · TH Lübeck
Populäre Implementationen
  • V8 (Google)
    • Chrome
    • Chromium
    • Node.js
  • SpiderMonkey (Mozilla)
    • Firefox
    • Servo
  • Nitro (Apple)
    • Safari
    • WebKit-based browsers
  • Chakra (Microsoft)
    • Microsoft Edge (Legacy Version)
    • Windows Apps (HTMLEngine)
    • Deprecated
  • Hermes (Facebook)
    • React Native
    • various Facebook apps
Software- und Web-Engineering I · TH Lübeck
Standards und Implementationen
Software- und Web-Engineering I · TH Lübeck
ECMAScript
  • ECMAScript ist ein Standard
  • ES definiert Aspekte wie Datentypen, Operatoren, Ausdrücke, Objekte und Kontrollstrukturen
  • Keine Funktionen zur Interaktion mit Plattformen
    • z.B. keine Ein- und Ausgabefunktionen
  • JavaScript ist eine Host Environment für ECMAScript
  • Host Environments liefern umgebungsspezifische Features wie Fenster, Menüs, Input & Output, Caching, etc.
Software- und Web-Engineering I · TH Lübeck
1 Hintergrund & ECMAScript
2 Grundlagen, Einbettung & Parsing-Order

Grundlagen, Einbettung & Parsing-Order

Software- und Web-Engineering I · TH Lübeck
Interpreter
<script>
  var targetVariable = "Moin!"
  console.log("Hello there!")
  console.log(typoVariable)
</script>
Browser-Konsole: Hello there! gefolgt von Uncaught ReferenceError: typoVariable is not defined
  • JavaScript wird interpretiert, nicht kompiliert
  • Lines werden direkt sequenziell ausgeführt, ohne vorher den Gesamtkontext zu ermitteln
Software- und Web-Engineering I · TH Lübeck
Variablen und Datentypen
<script>
  var num = 39;
  var word = "This is a String!"
  word = 2;
  num = "4";
  document.write(word + num);
</script>

Ergebnis: 24

  • JavaScript verfügt über Variablen und Datentypen
  • Im Gegensatz zu Java, sind diese jedoch nicht explizit typisiert
  • Der Interpreter erkennt Datentypen bei der Zuweisung aus dem Kontext
    • Das nennt man dynamische Typisierung
Software- und Web-Engineering I · TH Lübeck
Variablen und Datentypen
<script>
  var x = 3;
  y = 5;
  console.log(x + y);
</script>

Ergebnis: 8

  • Variablen können deklariert werden, müssen aber nicht
  • Es gibt jedoch einen Unterschied
Software- und Web-Engineering I · TH Lübeck
Variablen und Datentypen
<script>
  var x;
  y = x*x;      // y hat den Wert NaN
  y = 2/0;      // y hat den Wert Infinity
  y = -2/0;     // y hat den Wert -Infinity
  y = 0/0;      // y hat den Wert NaN
  y = 1e999;    // y hat den Wert Infinity
  y = 2/(1/0);  // y hat den Wert 0 (!)
</script>
  • NaN (Not-a-Number)
    • repräsentiert invalide Nummern
  • Infinity
    • Repräsentiert Nummern, die größer sind als JavaScripts numerisches Limit
Software- und Web-Engineering I · TH Lübeck
Variablen und Datentypen
<script>
  var absichtlichLeer = null;
  var nurLeer;
</script>
  • Null
    • Absichtliche Abwesenheit eines Wertes
    • Muss explizit zugewiesen werden
    • Null ist ein Object
  • Undefined
    • Automatisch zugewiesener Wert für nicht initialisierte Variablen
Software- und Web-Engineering I · TH Lübeck
Variable Scope

Mit var (oder ohne Schlüsselwort) deklarieren Sie eine Variable. Seit ECMA Script 6 können Sie mit let Variablen mit Blockgültigkeit oder mit const Konstanten (final in Java) mit Blockgültigkeit erzeugen.

if( true ) {
  let x = 5;
}
console.log(x); //Reference error
Software- und Web-Engineering I · TH Lübeck
Variable Scope – Miniübung

Lässt sich der folgende Code fehlerfrei ausführen?

if( true ) {
  const x = 5;
}
console.log(x);
Software- und Web-Engineering I · TH Lübeck
Beispiel – Zugriff auf Elemente
<script type="application/javascript">
  function quadrat() {
    var z = document.berechnung.zahl.value;
    var q = z * z;
    alert("Das Quadrat von " + z + " ist " + q);
  }
</script>
<form name="berechnung">
  <input type="text" name="zahl" size="5">
  <input
    type="button"
    value="Quadrat berechnen"
    onclick="quadrat()"
  >
</form>
  • Mit JavaScript lässt sich auf HTML-Objekte in der DOM zugreifen
  • Hier wird auf das Form-Element „berechnung“ zugegriffen
Software- und Web-Engineering I · TH Lübeck
Skripte Einbetten – Direkt
<body>
  <script>
    x = 5;
    var tautologie = "X ist immer "
    document.write(tautologie + x);
  </script>
</body>

Ergebnis: X ist immer 5

  • Das Script-Element erlaubt es, JavaScript code direkt in die HTML-Seite hineinzuschreiben
Software- und Web-Engineering I · TH Lübeck
Skripte Einbetten – Extern
<head>
  <script src="tautologie.js"></script>
</head>
<body>
</body>

Ergebnis: X ist immer 5

  • Alternativ lassen sich Skripte auch durch externe Dateien einbinden
Software- und Web-Engineering I · TH Lübeck
CountOccurence
  • Entwickeln Sie eine Funktion countSpecificWord(word) die das Vorkommen eines angegebenen Strings innerhalb eines containers zählt und das Ergebnis in die entsprechenden <span> Elemente schreibt
  • Denken Sie daran, vorher die AI-Features Ihrer IDE auszuschalten!
  • Lernraumkurs -> Zusatzmaterial -> Übung: countOccurence
15 Min
QR-Code zur Übung countOccurence im Lernraumkurs
Software- und Web-Engineering I · TH Lübeck
Script Parsing
<head>
  <script>console.log("Inline Script!");</script>
  <script src="classic-external.js"></script>
  <script async src="async-script.js"></script>
  <script defer src="defer-script.js"></script>
  <script type="module" src="example-module.mjs"></script>
</head>
<body>
  <script>
    console.log("Dynamically Inserted External Script!");
    const dyn = document.createElement('script');
    dyn.src = 'dynamic-inserted.js';
    document.head.appendChild(dyn);
    const inlineDyn = document.createElement('script');
    inlineDyn.textContent =
      "console.log('Dynamically Inserted Inline Script!');";
    document.body.append(inlineDyn, dyn);
  </script>
</body>
  • In welcher Reihenfolge werden diese Skripte ausgeführt?
Reaktions-GIF: verwirrter Blick
Software- und Web-Engineering I · TH Lübeck
Script Parsing
  • Skripte können die DOM manipulieren, dementsprechend werden Sie kategorisiert und in strikter Ordnung ausgeführt
  • Inline Skripte
  • Externe Skripte
  • Asynchron-geladene Skripte -> async
  • Verzögerte Skripte -> defer
  • Modul-Skripte -> type:module
  • Dynamisch Inserierte Skripte:
Software- und Web-Engineering I · TH Lübeck

- Einstieg: heute geht es um die Herkunft von JavaScript und den Standard dahinter - Nicht auf dem Titel verweilen

- Zwei Bloecke heute: erst Geschichte und ECMAScript-Standard, dann Sprachgrundlagen und Einbettung - Roadmap kurz zeigen

- Einstieg: Wozu wurde JavaScript urspruenglich entwickelt? - Bezug zu NodeJS herstellen: JS hat den Browser laengst verlassen

- Kurzer historischer Abriss: Netscape, dann JScript von Microsoft - Ueberleitung: zwei fast gleiche Sprachen brauchten einen gemeinsamen Standard

- Namensherkunft ECMA kurz erklaeren (Gremium, nicht nur Sprache) - Jaehrlicher Release-Zyklus als Ueberleitung zu spaeteren Feature-Fragen (caniuse.com)

- Kernaussage: ECMAScript ist nur die Sprache, keine I/O - Begriff "Host Environment" einfuehren, spaeter mit JavaScript/JScript verknuepfen

- Bewusste Denkpause mit dem GIF erzeugen, dann die Frage in den Raum stellen - Noch keine Antwort geben, ueberleitet zur naechsten Folie

- Kurze Partner- oder Einzelarbeit, dann 1-2 Antworten einsammeln - Erwartung: Trennung erlaubt mehrere Implementationen, aber auch Inkonsistenzen

- Ergebnisse der vorherigen Denkpause hier einordnen - Betonen: ein Standard mit mehreren Implementationen ist der Normalfall im Web (vgl. HTML/CSS)

- Nur als Ueberblick zeigen, nicht jede Engine einzeln vertiefen - V8 als praesentesten Vertreter hervorheben (Chrome + Node.js)

- Parallele zu HTML/CSS ziehen, die Studierenden schon kennen - MDN und caniuse.com als Nachschlagewerke fuer den Projektalltag empfehlen

- Zusammenfassung des ersten Blocks: ECMAScript vs. JavaScript sauber trennen - Ueberleitung: als naechstes wird es konkret, wir schauen uns die Sprache selbst an

- Wechsel von Geschichte/Standard zu konkreter Sprache: Variablen, Einbettung, Parsing-Reihenfolge

- Konsole zeigen: erste Zeile laeuft durch ("Hello there!"), erst danach kommt der Fehler - Kernaussage: kein Vorab-Check des gesamten Skripts wie bei kompilierten Sprachen

- Zeile fuer Zeile durchgehen: word wird erst String, dann Number, num wird erst Number, dann String - Ergebnis "24" als Stringverkettung erklaeren, nicht als Addition

- Frage stellen: was ist hier anders zwischen x und y? - y ohne var/let/const wird implizit zu einer globalen Variable, das ist der Unterschied

- Jede Zeile kurz kommentieren, besonders die letzte (2/(1/0) = 0) als Überraschung hervorheben - NaN und Infinity als Sonderwerte einordnen, keine Fehler, sondern gueltige Werte

- Unterschied Null vs. Undefined betonen: bewusst leer vs. noch nicht gesetzt - Kurze Randnotiz: typeof null ist "object", historische Eigenart von JavaScript

- Blockgueltigkeit (let/const) gegen Funktionsgueltigkeit (var) abgrenzen - Beispiel zeigen: x existiert ausserhalb des if-Blocks nicht mehr

- Kurz ueberlegen lassen, dann gemeinsam ausfuehren/pruefen - Erwartung: gleicher ReferenceError wie auf der vorherigen Folie, const aendert daran nichts

- DOM (Document Object Model, die Baumstruktur der geladenen HTML-Seite) als Begriff kurz einordnen - Zeigen, wie der Formularname im Code als document.berechnung wieder auftaucht

- Einfachster Einbettungsfall: script-Tag direkt im body - Ueberleitung zur externen Variante auf der naechsten Folie

- Gleiches Ergebnis wie zuvor, jetzt aber aus ausgelagerter Datei - Vorteil andeuten: Wiederverwendung und Trennung von Struktur und Verhalten

- Uebung im Lernraumkurs verlinken (QR-Code oder direkte Navigation zeigen) - Hinweis auf AI-Features bewusst wiederholen, das ist den Studierenden wichtig

- Frage bewusst offen stehen lassen, Vermutungen aus dem Publikum einsammeln - Ueberleitung: naechste Folie klaert die tatsaechliche Reihenfolge

- Kategorien einmal aufzaehlen, Ausfuehrungsreihenfolge ist Kernaussage - Bei Bedarf auf Nachfrage vertiefen, welche Kategorie in der Praxis am haeufigsten vorkommt