5. Webseitenentwicklung mit JavaScript

Die meisten frühen Webseiten waren statisch, dominierten das Web und boten nur wenig Interaktivität.

SPIRES war eine der ersten dynamischen Webseiten, die eine Suche nach wissenschaftlichen Publikationen ermöglichte und das Konzept des Request-Response-Cycles nutzte.

Der Request-Response-Cycle beschreibt den Ablauf, bei dem der Browser eine Anfrage (Request) an den Server sendet und als Antwort (Response) eine neue Webseite erhält.

Weil immer eine neue Webseite aufgebaut werden musste, was zeitaufwendig und ineffizient war.

1995 wurde die Notwendigkeit der Programmierbarkeit von Browsern von Netscape erklärt, dem größten Browserhersteller zu dieser Zeit.

JavaScript wurde 1995 von Netscape entwickelt, um Webseiten interaktiver zu machen und eine Alternative zu Java-Applets zu bieten.

JavaScript hat nichts mit der Programmiersprache Java zu tun. Der Name wurde nur aus Marketingzwecken gewählt.

Mit der Einführung von Node.js im Jahr 2009 konnte JavaScript auch serverseitig genutzt werden, wodurch es sich zu einer wichtigen Programmiersprache für Web-Anwendungen entwickelte.

Ein JavaScript-Framework ist eine Sammlung von Code, die das Entwickeln von Web-Applikationen erleichtert, indem es Inkompatibilitäten zwischen Browsern behebt und die Programmierung vereinfacht.

ECMAScript 5/ES5 führte den „strict mode“ ein, verbesserte die Code-Qualität, ermöglichte Getter & Setter, und brachte nützliche Funktionen für Arrays sowie Unterstützung für JSON.

AJAX ermöglichte es, nur Teile einer Webseite neu zu laden, anstatt die gesamte Seite, was zu einer erheblichen Verbesserung der Web-Applikationen führte.

React.js, eingeführt 2013 von Facebook, verbindet JavaScript und HTML in sogenannten Komponenten und ermöglicht dadurch eine bessere Strukturierung von Web-Anwendungen.

WebAssembly erlaubt eine schnellere Programmierung von Browsern als JavaScript und schützt den Code vor Modifikationen und Kopien.

ECMAScript 2015/ES6 bildet die Grundlage der heutigen JavaScript-Versionen, die in modernen Browsern verwendet werden.

Interpreter-Sprachen werden zur Laufzeit übersetzt, was zu etwas langsamerer Ausführung führt, während das Ergebnis sofort sichtbar ist. Compiler-Sprachen hingegen übersetzen den gesamten Code vor der Ausführung, was schneller ist, aber das Ergebnis ist erst nach der Kompilierung sichtbar.

JavaScript kann auf fast allen Geräten der Welt genutzt werden, da jeder Webbrowser in der Lage ist, JavaScript auszuführen.

Die ursprüngliche Aufgabe von JavaScript war es, HTML-Seiten dynamisch und interaktiv zu machen. Über die Jahre ist die Sprache jedoch gewachsen und deckt nun viele weitere Anforderungen ab.

Da JavaScript eine dynamisch typisierte Sprache ist, können Programme fehlerhaft sein und die Fehler erst spät entdeckt werden. Daher ist das Testen bei JavaScript von großer Bedeutung.

JavaScript-Code wird in HTML mit dem <script>-Tag eingebettet. Der Code kann entweder direkt in die HTML-Datei geschrieben oder über das src-Attribut von einer externen Datei geladen werden.

Bei umfangreichem Code macht es Sinn, diesen extern zu laden, damit die HTML-Datei kleiner bleibt und der Browser den Code cachen kann.

JavaScript verwendet eine ähnliche Syntax wie „C“, was die Einarbeitung erleichtert, auch wenn die Sprachen in ihren Funktionen unterschiedlich sind.

Browser verfügen über eine Entwicklerkonsole, in der man JavaScript-Befehle direkt eingeben und das Ergebnis sofort sehen kann.

Das DOM ist die hierarchische Struktur, die der Browser aus dem HTML-Dokument erstellt. JavaScript verwendet das DOM, um Inhalte auf der Webseite dynamisch zu ändern.

Elemente können z. B. mit document.getElementsByTagName() selektiert werden, das eine Liste (HTMLCollection) von Elementen zurückgibt.

Der Inhalt eines Elements kann über innerHTML geändert werden, z. B.:document.getElementsByTagName("h1")[0].innerHTML = "Neuer Text";

JavaScript unterscheidet zwischen Groß- und Kleinschreibung. Variablen wie Möglich und möglich sind also unterschiedlich.

Mit den Schlüsselwörtern const, let oder var.

1. const definiert eine Konstante, die nicht geändert werden kann.

2. let definiert eine veränderbare Variable, deren Gültigkeit auf den aktuellen Block beschränkt ist.

3. var hat eine breitere Gültigkeit und verhält sich unvorhersehbar, weshalb es heute eher vermieden wird.

var kann vor der Deklaration verwendet werden, was zu unerwartetem Verhalten führen kann. Daher werden let und const bevorzugt.

JavaScript entscheidet zur Laufzeit, welchen Typ eine Variable hat, sodass der Programmierer dies nicht explizit angeben muss.

Objekte sind Datenstrukturen, die Informationen in Form von Schlüssel-Wert-Paaren speichern. Sie werden genutzt, um komplexe Daten besser zu organisieren.

Mit der Punktnotation (objekt.name) oder mit eckigen Klammern (objekt["name"]).

Arrays sind eine spezielle Art von Objekten, die geordnete Listen von Werten speichern, während Objekte ungeordnete Schlüssel-Wert-Paare speichern.

Die Länge eines Arrays wird mit der length-Eigenschaft ermittelt:list.length

Es wird keine Kopie erstellt, sondern eine Referenz. Änderungen an der neuen Variablen betreffen also auch das ursprüngliche Objekt.

Eine if-Anweisung führt einen Codeblock nur dann aus, wenn die angegebene Bedingung wahr (true) ist.

Der Codeblock wird nicht ausgeführt, da die Bedingung als falsch (false) bewertet wird.

JavaScript unterstützt Operatoren wie ==, ===, !=, !==, <, <=, >, >=.

== prüft, ob die Werte gleich sind, während === zusätzlich den Datentyp vergleicht und auf strikte Gleichheit prüft.

Logische Verknüpfungen wie && (UND), || (ODER) und ! (NICHT) verbinden Bedingungen, um komplexere Abfragen zu ermöglichen.

Eine Schleife führt denselben Codeblock wiederholt aus, solange eine bestimmte Bedingung erfüllt ist. Sie wird verwendet, um wiederholte Aufgaben effizienter zu erledigen.

for-Schleife: Läuft eine feste Anzahl von Durchläufen durch.

for (let i = 0; i < 5; i++) {

console.log(i);

}

while-Schleife: Führt den Codeblock aus, solange die Bedingung wahr ist.

let i = 0;

while (i < 5) {

console.log(i);

i++;

}

do-while-Schleife: Führt den Codeblock mindestens einmal aus, bevor die Bedingung geprüft wird.

let i = 0;

do {

console.log(i);

i++;

} while (i < 5);

Mit dem class-Schlüsselwort können Klassen erstellt werden, die Vorlagen für Objekte sind:

class Person {

constructor(name, age) {

this.name = name;

this.age = age;

}

greet() {

console.log(`Hello, my name is ${this.name}`);

}

}

const person1 = new Person("Alice", 30);

person1.greet(); // "Hello, my name is Alice"

Der constructor() ist eine spezielle Methode, die beim Erstellen eines neuen Objekts aufgerufen wird. Sie initialisiert die Eigenschaften des Objekts.

Mit Vererbung können Klassen andere Klassen erweitern und deren Eigenschaften und Methoden übernehmen. Dies wird mit dem Schlüsselwort extends erreicht.

JSON (JavaScript Object Notation) ist ein Datenformat, das häufig zum Austausch von Daten zwischen Webanwendungen und Datenbanken oder REST-Services verwendet wird. Es wird genutzt, um Daten zu laden oder dauerhaft zu speichern.

Eine JSON-Datei beginnt mit geschweiften Klammern {…}. Darin stehen Schlüssel-Wert-Paare, die durch einen Doppelpunkt getrennt sind. Die Schlüssel stehen in Anführungszeichen, und die einzelnen Einträge werden durch Kommas getrennt.

JSON unterstützt folgende Datentypen:

• Null: null

• Boolean: true oder false

• Number: Ganz- oder Kommazahlen

• String: Zeichenketten

• Array: Liste von Elementen aus den anderen Datentypen

• Object: Verschachtelte Objekte in {…}

REST (Representational State Transfer) ist eine Architektur für Web-Services über HTTP. Daten werden per GET-Befehl abgerufen und per POST-Befehl hochgeladen. JSON wird oft als Format zum Datenaustausch in REST-basierten Web-Services verwendet.

JavaScript hat native Funktionen für JSON:

• JSON.stringify(objekt): Wandelt ein Objekt in einen JSON-String um.

• JSON.parse(jsonData): Wandelt einen JSON-String in ein JavaScript-Objekt um.

• fetch(url): Lädt Daten von einer URL, oft in Form von JSON, und kann asynchron mit await verwendet werden.

Der Befehl fetch(url) lädt Daten von einer angegebenen URL, die verschiedene Formate (JSON, Bilder, PDFs etc.) haben können. Da dieser Vorgang zeitabhängig ist, wird die Funktion asynchron ausgeführt und kann mit dem await-Präfix genutzt werden.

Ein JSON-Beispiel zur Beschreibung einer Person könnte so aussehen:

{

"firstName": "John",

"lastName": "Smith",

"isAlive": true,

"age": 27,

"address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": "10021–3100" },

"phoneNumbers": [ { "type": "home", "number": "212 555–1234" }, { "type": "office", "number": "646 555–4567" } ],

"children": ["Catherine", "Thomas", "Trevor"],

"spouse": null

}

Man lädt JSON-Daten mit dem fetch-Befehl, wandelt sie mit response.json() in ein JavaScript-Objekt um und kann sie dann verwenden, zum Beispiel mit:

const response = await fetch("person.json");

const json = await response.json();

console.log(json);

1. Eine Bibliothek ist eine Sammlung von Klassen und Funktionen für einen spezifischen Zweck, die unabhängig voneinander verwendet werden können.

2. Ein Framework ist ein fertiges Gerüst für bestimmte Arten von Programmen und gibt genau vor, welcher Code geschrieben werden muss, um es zu verwenden.

Eine Single-Page-Application (SPA) lädt beim Start der App den gesamten Code auf einmal und danach keine neuen HTML-Seiten mehr. Die gesamte Bedienlogik läuft im Browser, wodurch die App sich wie eine native App anfühlt.

jQuery wurde entwickelt, um das Arbeiten mit JavaScript zu erleichtern, indem es eine plattformübergreifende API bereitstellte, die browserübergreifende Kompatibilität ermöglichte. Es wird immer noch verwendet, aber viele seiner Funktionen sind heute direkt in Browsern integriert, weshalb es bei neuen Projekten kaum noch eingesetzt wird.

Angular.js vereinfachte die Entwicklung von Single-Page-Applications (SPAs), indem es wiederverwendbare Komponenten ermöglichte und das MVVM-Entwurfsmuster verbreitete. Es wird oft in TypeScript geschrieben, einer statisch typisierten Version von JavaScript.

MVVM steht für "Model-View-View-Model" und ist ein Entwurfsmuster zur Trennung von Darstellung und Logik der Benutzeroberfläche (UI). Dadurch können Design (CSS) und Benutzungslogik (JavaScript) unabhängig voneinander entwickelt werden.

Two-Way-Binding verbindet ein Eingabefeld mit einer Variablen im Modell. Änderungen im Eingabefeld oder in der Variablen werden wechselseitig sofort sichtbar, ohne dass zusätzliche Code-Anpassungen notwendig sind.

React ermöglicht es, Webanwendungen mit Komponenten zu entwickeln, die HTML, CSS und JavaScript integrieren. Es ist besonders beliebt, weil es die Entwicklung von wiederverwendbaren und dynamischen UI-Komponenten erleichtert und von großen Plattformen wie Facebook und Instagram verwendet wird.

Vue.js kombiniert eine flache Lernkurve (ähnlich wie React) mit dem Two-Way-Binding (wie bei Angular). Es ist einfach zu erlernen, aber mächtig genug für komplexe Anwendungen. Deshalb wird es von vielen großen Firmen wie Facebook und Netflix verwendet.

Svelte ist ein Web-Framework, das seit 2016 zunehmend an Beliebtheit gewinnt. Es ist besonders einfach zu erlernen und benötigt weniger Code als andere Frameworks wie React. Svelte führt viele Prozesse während der Kompilierung aus, anstatt sie im Browser durchzuführen.