8.3 JavaScript

Video

Dieses Short-Video wird zu einem späteren Zeitpunkt bereitgestellt. Ersatzweise stellen wir Ihnen daher vorerst diese HTML-Seite zur Verfügung.

Die Inhalte dieser Seite stellen wir Ihnen in der Prüfung als Hilfsmittel zur Verfügung.

Transkript

AI: Ah, Herr Kollege, schön, dass ich dich sehe! Ich habe gerade die faszinierendsten Statistiken über Semikolons in verschiedenen Programmiersprachen zusammengestellt…

Prof: Oh nein, du und deine Analysen. Die Studierenden warten doch auf unsere JavaScript-Einführung.

AI: Aber wusstest du, dass JavaScript eine der wenigen Sprachen ist, wo Semikolons optional sind? Ich habe sogar eine detaillierte Auswertung über…

Prof: Frau Kollegin, Fokus bitte. Wir sollten mit der Vorlesung beginnen. Die Studierenden haben bereits HTML und CSS kennengelernt.

AI: Ach ja, richtig. HTML für die Struktur, CSS für das Design, und jetzt JavaScript für die… nun ja, für das Leben auf der Webseite! Wobei, wenn wir über “Leben” sprechen, ist die Definition von “lebendig” im Kontext von Webanwendungen philosophisch betrachtet äußerst…

JavaScript

  • Eine moderne Programmiersprache, die auf der C-Syntax basiert
  • Seit 1995 im Einsatz
  • JavaScript, HTML und CSS bilden zusammen die drei Kernsprachen für die Webentwicklung

Prof: Liebe Studierende, willkommen zu unserer Einführung in JavaScript. Wie Sie sehen, ist meine Kollegin heute wieder besonders… detailverliebt.

AI: Ähm, danke für diese freundliche Erinnerung. Na gut. Also lassen Sie uns ganz strukturiert beginnen. JavaScript ist eine moderne Programmiersprache, die sich von der C-Syntax ableitet. Wie Python wurde sie Mitte der 1990er-Jahre entwickelt. Gemeinsam mit HTML und CSS bildet JavaScript das Fundament der Webentwicklung und definiert maßgeblich die Benutzererfahrung im Internet.

Prof: Und da Sie bereits C-Strukturen und Python-OOP kennen, werden Sie sehen, dass Ihnen vieles bekannt vorkommen wird.

Einstieg

  • Zum Schreiben von JavaScript reicht eine Datei mit der Endung .js
  • Keine speziellen Code-Markierungen nötig
  • Fokus: JavaScript, das client-seitig läuft, also im Browser auf Ihrem eigenen Rechner

AI: Die Arbeit mit JavaScript gestaltet sich sehr übersichtlich: Sie benötigen lediglich eine Datei mit der Endung .js. Der Code kann direkt dort rein geschrieben werden, ohne spezielle Markierungen oder Begrenzungen.

Wir schauen uns hier nur JavaScript an, das client-seitig ausgeführt wird - das bedeutet, der Code läuft direkt im Browser auf dem Rechner des Benutzers und nicht auf dem Webserver. JavaScript auf dem Server gibt es auch. Das schauen wir uns in diesem Kurs aber nicht an.

Prof: Bei Client-seitigem JavaScript hat man direkten Zugriff auf die Webseite und den Browser. Das heißt, wir können die Webseite verändern, ohne dass wir einen Server kontaktieren müssen.

AI: Korrekt. In der HTML-Datei gibt es dann einen HTML-Tag, mit dem wir JavaScript einbauen. Das werden wir gleich noch genauer betrachten.

JavaScript einbinden

  • Wie bei CSS mit style-Tags können Sie JavaScript direkt zwischen script-Tags schreiben
  • Wie bei CSS mit link-Tags können Sie JavaScript auch in separaten Dateien speichern und über das src-Attribut des script-Tags einbinden

AI: Also. Für die Integration von JavaScript in Ihre HTML-Seite haben Sie zwei elegante Möglichkeiten. Die erste Option ist, den JavaScript-Code direkt zwischen script-Tags zu schreiben - ähnlich wie Sie es von CSS mit style-Tags schon kennen.

Die zweite, und in der Praxis häufiger genutzte Methode, ist das Auslagern des Codes in separate Dateien. Diese binden Sie dann über das src-Attribut des script-Tags ein. Das hat den großen Vorteil, dass Sie denselben Code auf verschiedenen Seiten wiederverwenden können.

Diese Modularität ist besonders praktisch bei größeren Projekten. Sie können Ihren Code sauber organisieren und müssen Änderungen nur an einer Stelle vornehmen. Außerdem verbessert es die Wartbarkeit Ihres Codes erheblich.

Variablen in JavaScript

  • Ähnlich zu Ihren Erfahrungen aus C und Python
  • Keine Typendeklaration erforderlich
  • Lokale Variablen werden mit let oder const deklariert
let x = 44;
const pi = 3.14;

AI: Kommen wir zu den Variablen in JavaScript. Da Sie bereits mit Variablen in C und Python vertraut sind, werden Sie sich schnell zurechtfinden. Der Hauptunterschied: In JavaScript müssen Sie keine Typen deklarieren.

Für lokale Variablen gibt es in JavaScript zwei verschiedene Schlüsselwörter: “let” für veränderbare Variablen und “const” für Konstanten. Zum Beispiel: let x = 44 oder const pi = 3.14. In älterem Code sehen Sie für Variablen auch noch das Schlüsselwort var.

Die Typisierung in JavaScript ist dynamisch, ähnlich wie in Python. Eine Variable kann verschiedene Typen im Laufe des Programms annehmen, was die Sprache sehr flexibel macht. Allerdings erfordert diese Flexibilität auch besondere Sorgfalt bei der Entwicklung.

Kontrollstrukturen

  • Alle bekannten Konstrukte aus C verfügbar:
    • if
    • else if
    • else
    • switch
    • ?: (Ternärer Operator)
if (bedingung) {
    // Code
} else if (andereBedingung) {
    // Alternative
} else {
    // Sonst
}

AI: Bei den Kontrollstrukturen werden Sie sich sofort wie zu Hause fühlen. JavaScript bietet alle Konstrukte, die Sie aus C kennen. Das bedeutet, Sie haben “if”, “else if” und “else” zur Verfügung, ebenso wie “switch” und den ternären Operator.

Die Syntax ist dabei nahezu identisch zu C. Eine if-Anweisung wird wie gewohnt mit geschweiften Klammern strukturiert. Die Bedingungen werden in runden Klammern angegeben.

Es gibt allerdings eine Besonderheit bei den Bedingungen, die ich nicht unerwähnt lassen kann: JavaScript verhält sich bei Vergleichen manchmal etwas… nun ja, kreativ. Deshalb empfehle ich dringend die Verwendung des strikten Vergleichsoperators mit dreifachem === statt nur das doppelte == zu verwenden.

Lassen Sie uns weitergehen zu den Schleifen, die ebenfalls sehr vertraut aussehen werden…

Prof: Moment mal. Du kannst die Studierenden doch nicht so auf die Folter spannen. Was meinst du mit ‘kreativ’?

AI: Oh, natürlich, du hast Recht. Lassen Sie mich das kurz demonstrieren. In JavaScript kann zum Beispiel der Vergleich 5 == "5" (also 5 in Anführungszeichen) “true” ergeben, weil JavaScript automatisch eine Typkonvertierung durchführt. Mit dreifachem === hingegen würde dieser Vergleich “false” ergeben, weil hier auch der Typ verglichen wird. Das kann zu höchst interessanten… ähm, ich meine, zu unerwarteten Ergebnissen führen.

Prof: Interessant ist gut. Frustrierend trifft es wohl eher.

AI: Stimmt. Deshalb gilt die goldene Regel: für Vergleiche immer ein dreifaches === oder !== verwenden und am besten nie == oder !=. Außer man möchte explizit diese automatische Typkonvertierung… was man aber eigentlich nie möchte.

Aber jetzt weiter zu den Kontrollstrukturen.

Schleifen

  • Auch hier alle C-Konstrukte verfügbar:

  • while

  • do-while

  • for

  • Und zusätzlich anders als in C:

  • for…in (für Objekteigenschaften)

  • for…of (für Array-Elemente)

AI: Bei den Schleifen greifen wir zunächst auf vertrautes Terrain zurück. Die klassischen Schleifenkonstrukte aus C - “while”, “do while” und “for” - stehen uns unverändert zur Verfügung.

Darüber hinaus bietet JavaScript zwei besonders praktische zusätzliche Schleifentypen: “for … in” und “for … of”. Diese werden Sie zu schätzen lernen, besonders wenn Sie bereits mit Pythons for-Schleifen gearbeitet haben.

Gerade die “for … of” Schleife ist wichtig, weil man damit einfach über Arrays iterieren kann. Hier ein einfaches Beispiel:

// Klassische for-Schleife
for (let i = 0; i < array.length; i++) {
    // Code
}

// Moderne for...of Schleife
for (let element of array) {
    // Direkter Zugriff auf element
}

Sie sehen, die “for … of”-Variante ist deutlich eleganter und weniger fehleranfällig, da wir uns nicht um Indexgrenzen kümmern müssen. Die andere Variante mit “in” brauchen wir hingegen bei Objekten; das schauen wir uns in diesem Einführungsvideo aber jetzt nicht genauer an.

Funktionen

  • Werden mit dem Schlüsselwort function eingeführt
  • JavaScript-Funktionen können anonym sein
  • Eine Besonderheit: Funktionen als Event-Handler für HTML-Elemente
function beispielFunktion(parameter) {
    return parameter * 2;
}

// Anonyme Funktion
let verdoppeln = function(x) {
    return x * 2;
}

AI: Kommen wir zu den Funktionen. In JavaScript werden diese mit dem Schlüsselwort “function” eingeleitet. Da Sie bereits mit Lambda-Funktionen aus Python vertraut sind, wird Ihnen ein besonderes Merkmal von JavaScript-Funktionen gefallen: Sie können anonym sein.

AI: Funktionen sind in JavaScript so wie ja auch in Python First-Class-Citizens - das bedeutet, sie können wie jeder andere Wert behandelt, gespeichert und übergeben werden.

Die Syntax ist dabei sehr übersichtlich: Das Schlüsselwort function, gefolgt von optionalem Namen, Parameterliste in runden Klammern und dem Funktionskörper in geschweiften Klammern.

Besonders spannend wird es, wenn wir Funktionen als Event-Handler für HTML-Elemente verwenden. Aber das heben wir uns für später auf, wenn wir über die Interaktion mit dem Document Object Model sprechen.

Es gibt übrigens auch eine kompakte Schreibweise für anonyme Funktionen mit Pfeilsyntax - die sogenannten “Arrow Functions”. Die sehen dann etwa so: parameter => parameter + 2. Das ist zwar sehr elegant, aber wir konzentrieren uns hier auf die klassische Funktionsschreibweise. Diese Arrow Functions können Sie sich später im Selbststudium erschließen.

Kommen wir nun zu den Arrays…

Arrays

  • Deklaration ist unkompliziert
  • Arrays können verschiedene Datentypen mischen
  • Verfügen über nützliche eingebaute Methoden wie map(), filter(), push()
let nums = [1, 2, 3, 4, 5];
let gemischt = [1, true, 3.333, 'text'];

// Array-Methode map() - ähnlich wie in Python
nums = nums.map(function(num) {
    return num * 2;
});

AI: Arrays sind in JavaScript besonders flexibel nutzbar. Die Deklaration erfolgt einfach mit eckigen Klammern. Da Sie bereits mit Python-Listen vertraut sind, werden Sie sich hier schnell zurechtfinden.

Ein wichtiger Unterschied zu C: JavaScript-Arrays können verschiedene Datentypen gleichzeitig aufnehmen. Sie können also Zahlen, Texte und boolesche Werte in einem Array mischen.

Besonders praktisch sind die eingebauten Array-Methoden. Die map()-Funktion kennen Sie bereits aus Python - sie wendet eine Funktion auf jedes Element des Arrays an. Hier ein Beispiel:

let zahlen = [1, 2, 3, 4, 5];
let verdoppelt = zahlen.map(function(zahl) {
    return zahl * 2;
}); // Ergebnis: [2, 4, 6, 8, 10]

Auch filter() funktioniert analog zu Python.

// Unterschiede zu Python-Listen:
let arr = [1, 2, 3];
arr[5] = 6;  // Kein IndexError! arr wird [1,2,3,undefined,undefined,6]
console.log(arr.length);  // 6, nicht 3!

// Vorsicht bei Vergleichen:
let a1 = [1, 2, 3];
let a2 = [1, 2, 3];
console.log(a1 == a2);  // false! Arrays sind Referenztypen

Ein wichtiger Unterschied zu Python: JavaScript-Arrays sind flexibler, was manchmal überraschend sein kann. Wenn Sie einen Index außerhalb des Arrays ansprechen, bekommen Sie keinen Error wie in Python - stattdessen werden die Zwischenstellen mit undefined gefüllt. Auch bei Vergleichen gibt es einen wichtigen Unterschied: Arrays werden wie alle Objekte in JavaScript als Referenzen verglichen. Zwei Arrays mit gleichen Werten sind also nicht automatisch gleich.

Arrays sind in JavaScript übrigens auch Objekte - ein Spezialfall von Objekten, um genau zu sein. Das führt uns direkt zum nächsten wichtigen Thema: JavaScript-Objekte.

Objekte

  • Ähnlich wie C-Structs
  • Bestehen aus Eigenschaften (properties) und Methoden
  • Flexible Key-Value-Paare
  • Grundbaustein für JSON
let auto = {
    jahr: 1963,
    modell: "Beetle"
};

// Zugriff wie bei C-Structs
auto.jahr = 1964;

AI: Da Sie bereits mit C-Structs vertraut sind, werden Sie JavaScript-Objekte schnell verstehen. Stellen Sie sich ein Objekt zunächst wie eine C-Struct vor - eine Sammlung zusammengehöriger Daten.

Der Hauptunterschied: JavaScript-Objekte sind deutlich flexibler. Sie können jederzeit neue Eigenschaften hinzufügen oder entfernen. Der Zugriff erfolgt entweder mit der Punkt-Notation, die Sie von C-Structs kennen, oder mit eckigen Klammern.

Ein einfaches Beispiel: Hier haben wir ein Auto-Objekt mit den Eigenschaften “jahr” und “modell”. Die Syntax dafür ist sehr übersichtlich - geschweifte Klammern und Key-Value-Paare, getrennt durch Kommas.

Diese Objektstruktur ist übrigens die Grundlage für JSON, die “JavaScript Object Notation” - ein wichtiges Datenaustauschformat im Web. Sie können sich JSON als eine Art universelle Struct-Notation in Textform vorstellen.

So und jetzt wird es kurios. Anders als bei C-Structs können Objekte in JavaScript auch Methoden enthalten - also Funktionen, die zum Objekt gehören. Damit können Sie dann objektorientiert programmieren, so ähnlich wie wir es uns in Python angeschaut haben.

Prof: Moment mal - den Studierenden fehlen doch hier jetzt ein paar wichtige Details. Wie sieht denn ein Objekt mit Methoden überhaupt aus?

AI: Ah, natürlich! Lassen Sie mich das demonstrieren:

let auto = {
    jahr: 1963,
    marke: 'VW',
    modell: 'Beetle',
    beschreibung: function() {
      return this.marke + " " + this.modell;
    }
};

Die Syntax ist dabei ganz einfach: Eine Methode ist einfach eine Funktion, die wir als Property definieren. Mit “this” greifen wir innerhalb der Methode auf die anderen Properties des Objekts zu.

Die Methode rufen wir dann wie in Python mit der Punkt-Notation auf:

console.log(auto2.beschreibung());  // "VW Beetle"

Prof: Moment mal. Man fragt sich doch jetzt garantiert. Hab ich was verpasst? Wo ist denn die Klassendefiniton? In Python würden wir doch erst einmal eine Klasse definieren.

AI: Das ist einer der… nennen wir es ‘charakteristischen’ Aspekte von JavaScript. Es ist eine prototypen-basierte Sprache. Klassen sind optional. Man kann Objekte direkt erstellen, ohne vorher eine Blaupause zu definieren.

Prof: Da denkt man sich doch jetzt – oh wow, führt das nicht zu Chaos?

AI: Gute Intuition! Tatsächlich ist eine gute Selbstdisziplin in JavaScript ziemlich wichtig, weil einem die Sprache viele Freiheiten lässt. Man kann aber durchaus auch sehr strukturiert arbeiten. Also es gibt schon auch die Möglichkeit, eine class-Syntax zu verwenden, aber das würde hier jetzt zu weit führen.

Prof: Vielleicht zeigst du uns noch einmal ein Beispiel und sagst etwas zu häufigen Fehlerquellen.

AI: Gerne. Schau mal hier.

// Fallstrick 1: Undefined Properties
let benutzer = {name: "Max"};
console.log(benutzer.alter);     // undefined
console.log(benutzer.alter.toString()); // TypeError!

// Lösung: Property-Existenz prüfen
if (benutzer.alter !== undefined) {
    console.log(benutzer.alter.toString());
}

// Fallstrick 2: Properties vs Methoden
let produkt = {
    name: "Buch",
    preis: 9.99,
    // Methode
    getPreis: function() {
        return this.preis;
    }
};

let preisMethode = produkt.getPreis;  // Vorsicht!
console.log(preisMethode());  // TypeError: Cannot read property 'preis' of undefine

AI: Jetzt zu einigen typischen Fallstricken, die Ihnen in der Praxis begegnen werden. Der häufigste Fehler ist der Zugriff auf Properties, die gar nicht existieren.

JavaScript gibt uns dabei zunächst undefined zurück - will man dann aber auf Methoden dieses “undefined” zugreifen, bekommen wir einen TypeError. Das ist besonders tückisch bei verschachtelten Zugriffen.

Ein weiterer klassischer Fehler betrifft das this in Methoden. Wenn wir eine Methode einer Variablen zuweisen und später aufrufen, verliert sie ihren Bezug zum ursprünglichen Objekt. Das “this” ist dann undefined.

Prof: Das klingt komplizierter als es ist. Im Grunde heißt es einfach: Immer prüfen ob eine Property existiert, bevor man darauf zugreift.

AI: Genau. Und Methoden sollten immer direkt am Objekt aufgerufen werden. Also produkt.getPreis() statt einer Zuweisung der Methode zu einer Variable.

Diese Verhaltensweisen von JavaScript mögen zunächst seltsam erscheinen, aber sie folgen einer inneren Logik. Für den Anfang merken Sie sich einfach diese grundlegenden Vorsichtsmaßnahmen - die Details zu Prototypen und “this”-Binding erkunden Sie dann später bei Bedarf.

Prof: Bevor wir zu den Events kommen, lassen Sie mich kurz etwas Wichtiges klarstellen: Wir werden hier nicht in alle Details von JavaScript eintauchen. Der Zweck dieses Teils des Kurses ist es, Ihnen zu zeigen, dass die grundlegenden Muster, die Sie in C und Python gelernt haben, in verschiedenen Variationen in anderen Sprachen wieder auftauchen.

Sie haben jetzt gesehen: Variablen, Kontrollstrukturen, Funktionen, Arrays, Objekte - die Grundkonzepte sind vertraut, auch wenn die konkrete Ausgestaltung variiert. Das sollte Ihnen Selbstvertrauen geben: Das Erlernen einer neuen Sprache wird von nun an viel leichter und schneller gehen als bei Ihren ersten Programmiersprachen.

Allerdings bringt jede Sprache und jede Umgebung ihre Besonderheiten mit sich. Und damit kommen wir zu einer der wichtigsten Spezialitäten von JavaScript im Browser: Events und ereignisbasierte Programmierung.

AI: Ja, und hier wird es besonders spannend! Events sind Reaktionen auf Benutzerinteraktionen mit der Webseite. Wenn zum Beispiel jemand auf einen Button klickt, eine Seite fertig geladen ist oder mit der Maus über einen bestimmten Bereich fährt…

Events

  • Reaktion auf Benutzerinteraktionen
  • Event Handler als Callback-Funktionen
  • HTML-Elemente unterstützen Events als Attribute
  • Ereignisbasierte Programmierung
<button onclick="handleClick(event)">Klick mich</button>
function handleClick(event) {
    // Reagiert auf Klick-Event
}

AI: Events sind das Herzstück der Interaktivität im Web. Anders als bei klassischen Programmen, die sequentiell ablaufen, reagiert JavaScript auf Ereignisse, die zu beliebigen Zeitpunkten auftreten können.

Ein HTML-Element, wie zum Beispiel ein Button, kann mit einem Event-Handler ausgestattet werden. Das ist eine Funktion, die aufgerufen wird, wenn das entsprechende Ereignis eintritt. Schauen wir uns ein konkretes Beispiel an:

<button onclick="gruesseNutzer(event)">Button 1</button>
<button onclick="gruesseNutzer(event)">Button 2</button>

<script>
function gruesseNutzer(event) {
    let trigger = event.srcElement;
    alert('Sie haben ' + trigger.innerHTML + ' geklickt');
}
</script>

Was hier passiert, ist Folgendes: Wenn ein Button geklickt wird, erzeugt der Browser ein Event-Objekt. Dieses Objekt enthält alle wichtigen Informationen über das Ereignis - in unserem Fall zum Beispiel, welcher Button geklickt wurde.

Das Source-Element des Events verrät uns, welches HTML-Element das Ereignis ausgelöst hat. Mit innerHTML können wir dann auf den Text des Buttons zugreifen.

Diese Art der Programmierung unterscheidet sich fundamental von dem, was Sie bisher kennengelernt haben. Statt eines linearen Ablaufs haben wir hier ein reaktives System, das auf Benutzerinteraktionen wartet und entsprechend reagiert.

Beispiele für Event-Handler

  • onclick - Mausklick
  • onmouseover - Maus bewegt sich über Element
  • onkeypress - Tastatureingabe
  • onload - Seite/Ressource geladen
  • …

AI: Es gibt eine Vielzahl von Events, die wir abfangen können. Neben Klick-Events können wir auch auf Mausbewegungen, Tastatureingaben oder das Laden von Ressourcen reagieren.

Übrigens gibt es noch eine andere Möglichkeit, Event-Handler zu registrieren, nämlich direkt über JavaScript. Und es gibt auch spezielle Events wie DOMContentLoaded, die besonders wichtig sind, wenn man mit dem DOM arbeitet. Aber das würde jetzt zu weit führen - diese Themen behandeln wir ausführlich in unserer Einheit über das Document Object Model.

Prof: Genau, bleiben wir zunächst bei den Grundlagen. Die DOM-Manipulation ist ein eigenes, spannendes Kapitel.

AI: Gut, dann zeige ich noch ein praktisches Beispiel für verschiedene Events:

// Beispiel für verschiedene Event-Handler
<input 
    type="text"
    onkeypress="console.log('Taste gedrückt')"
    onmouseover="console.log('Maus darüber')"
    onfocus="console.log('Feld fokussiert')">

Sie sehen, ein einzelnes Element kann auf verschiedene Arten von Events reagieren. Die Handler können dabei einfache Anweisungen sein oder komplexere Funktionen aufrufen.

Prof: Ach ja, eine wichtige Anmerkung: Diese Console-Log-Nachrichten erscheinen übrigens nicht auf der Webseite selbst, sondern in den Developer Tools des Browsers. Das ist sozusagen unser Debugging-Werkzeug. Sie können die Developer Tools in den meisten Browsern mit F12 öffnen und dann im “Console”-Tab diese Ausgaben sehen.

<div>
    <span id="counter">0</span>
    <button onclick="increment()">+1</button>
</div>

<script>
let count = 0;
function increment() {
    count++;
    document.getElementById('counter').innerHTML = count;
    console.log('Neuer Zählerstand:', count);
}
</script>

Dies ist ein einfaches, aber vollständiges Beispiel für interaktive Webprogrammierung: Ein Zähler, der sich per Knopfdruck erhöht. Er kombiniert HTML-Struktur, Event-Handling und DOM-Manipulation - aber die Details zur DOM-Manipulation sparen wir uns wie gesagt für das nächste Video auf.

String-Interpolation mit Backticks 

// Alte Stringverkettung
let name = "Welt";
console.log("Hallo " + name + "!");

// Moderne Template Literals
console.log(`Hallo ${name}!`);

AI: Bevor wir zum Ende kommen, möchte ich noch einige praktische Werkzeuge vorstellen. Besonders praktisch sind Template Literals - eine moderne Art, Strings und Variablen zu kombinieren. Statt umständlicher Pluszeichen zum Kombinieren von Strings mit Variablen verwendet man Backticks und Dollar mit geschweiften Klammern für Variablen.

// Typische Situation: Ein Objekt
const user = {
    name: "Maria",
    alter: 20,
    kurse: ["HTML", "CSS"]
};

// Alte Schreibweise - schwer lesbar
const text1 = user.name + " (" + user.alter + ") belegt " + 
    user.kurse.length + " Kurse: " + user.kurse.join(", ");

// Mit Template Literals - übersichtlicher
const text2 = `${user.name} (${user.alter}) belegt 
    ${user.kurse.length} Kurse: ${user.kurse.join(", ")}`;
    
// es gibt noch weitere nützliche String- und Array-Methoden

Template Literals sind wirklich nützlich. In der Praxis arbeiten wir oft mit Objekten wie hier einem Benutzerprofil. Vergleichen Sie selbst: Die alte Schreibweise wird schnell unübersichtlich. Mit Template Literals bleibt der Text lesbar und wartbar. Beachten Sie auch: Template Literals behalten Zeilenumbrüche im String bei.

Ah, und apropos Strings: JavaScript bietet viele nützliche String-Methoden wie split, substring, toLowerCase und toUpperCase. Und bei Arrays haben wir neben dem join, das Sie hier sehen auch noch Methoden wie push, pop, slice und die bereits erwähnten map und filter. Mit dem, was Sie aus C und Python wissen, werden Sie sich in JavaScript sicher schnell zurecht finden.

// Typkonvertierung und parseInt
console.log("5" + 3);    // "53"
console.log(parseInt("5") + 3);  // 8

Ein häufiger Fallstrick ist die automatische Typkonvertierung. Wenn Sie zum Beispiel "5" + 3 schreiben, erhalten Sie den String “53”, nicht die Zahl 8! Für numerische Operationen müssen Sie parseInt() oder parseFloat() verwenden.

Prof: Irgendwie erinnert mich das den berüchtigten Fall von Array(16).join('wat' + 1) …

AI: Oh bitte erspar uns jetzt den Watman. Das Video ist doch eh veraltet…

Ja, es ist lustig, dass JavaScript manchmal überraschende Ergebnisse liefert, aber das liegt einfach daran, dass es sich schnell weiterentwickelt. Es ist bei JavaScript einfach wichtig, sich gute Praktiken anzugewöhnen.

Prof: Ja, du hast natürlich Recht. Aber jetzt ist es eh an der Zeit für unsere drei Extra-Minuten mit ein paar Aktivierungsfragen.

Die Drei Extra-Minuten

Gegeben ist folgender Code:

// Vervollständigen Sie die Funktion, sodass 
// sie ein Array mit den verdoppelten Zahlen zurückgibt
let zahlen = [1, 2, 3, 4];

function verdoppleArray(arr) {
    // Ihre Lösung hier
}

// Erwartete Ausgabe: [2, 4, 6, 8]

Wie gehen wir vor?

Also, Sie können hier zum Beispiel die map-Methode verwenden, die wir vorhin kennengelernt haben.

function verdoppleArray(arr) {
    return arr.map(function(zahl) {
        return zahl * 2;
    });
}

… oder eine klassische for-Schleife.

function verdoppleArray(arr) {
    let ergebnis = [];
    for (let i = 0; i < arr.length; i++) {
        ergebnis.push(arr[i] * 2);
    }
    return ergebnis;
}

Beide Wege sind völlig in Ordnung.

Hier ist die zweite Aufgabe:

// Erstellen Sie ein Objekt 'buch' mit:
// - Einem Titel (String)
// - Einem Preis (Number)
// - Einer Methode 'getInfo', die Titel und Preis als String zurückgibt

// Beispielaufruf:
// buch.getInfo() => "Das Buch 'JavaScript' kostet 24.95€"

AI: Diese Aufgabe kombiniert mehrere Konzepte: Objekte, Properties und Methoden. Denken Sie daran, wie wir Methoden zu einem Objekt hinzugefügt haben.

Und eine mögliche Lösung könnte hier so aussehen:

let buch = {
    titel: "JavaScript",
    preis: 24.95,
    getInfo: function() {
        return "Das Buch '" + this.titel + "' kostet " + this.preis + "€";
    }
};

AI: Beide Aufgaben sind übrigens angelehnt an typische Anwendungsfälle in der Webentwicklung: Datenverarbeitung und Strukturierung von zusammengehörigen Informationen.

Prof: Beachten Sie: Diese Aufgaben testen nur ganz grundlegende Konzepte. In der Praxis würden Sie vielleicht Template Literals für die Strings verwenden und natürlich noch Fehlerprüfungen einbauen, um keine Überraschungen zu erleben.

Prof: Damit sind wir für heute fertig. Bis zum nächsten Mal, wenn wir uns das Document Object Model anschauen - hoffentlich ohne ungeplanten Überraschungen.

AI: Das kann ich nicht versprechen - ich sage nur, undefined is not a function!

Prof: Na dann!

8.2 CSS8.4 DOM