Zum Inhalt springen

JS

Das JS-Format: Die Sprache, die das Web interaktiv machte

5 min read

Das JS-Format: Die Sprache, die das Web interaktiv machte

Wenn Sie eine moderne Website nutzen, erleben Sie die Magie von JavaScript. Wenn Sie auf einen "Gefällt mir"-Button klicken und dieser sofort blau wird, ohne dass die Seite neu geladen wird, dann ist das JavaScript. Wenn ein Bilderkarussell zum nächsten Bild gleitet, wenn ein Chat-Fenster aufpoppt oder wenn ein webbasiertes Spiel in Ihrem Browser läuft – das alles ist JavaScript.

JavaScript ist neben HTML (der Struktur) und CSS (dem Design) die dritte Säule des World Wide Web. Eine .js-Datei enthält JavaScript-Code, der statische Webseiten in dynamische, interaktive Anwendungen verwandelt.

In diesem Leitfaden werden wir untersuchen, was eine JS-Datei ist, die unglaubliche Geschichte von JavaScript, wie es im Browser funktioniert und wie es sich entwickelt hat, um nicht nur das Web, sondern auch Server und mobile Apps zu erobern.

Was ist eine JS-Datei?

Eine .js-Datei ist eine einfache Textdatei, die Code enthält, der in der Programmiersprache JavaScript geschrieben ist.

Im Gegensatz zu HTML und CSS, die Auszeichnungs- und Styling-Sprachen sind, ist JavaScript eine vollwertige, Turing-vollständige Programmiersprache. Es kann mathematische Berechnungen durchführen, Daten manipulieren, Entscheidungen basierend auf Logik treffen (if/else-Anweisungen) und mit externen Servern kommunizieren, um Daten zu senden oder abzurufen.

Wie es sich mit dem Web verbindet

Ein Webbrowser liest eine .js-Datei und führt den Code Zeile für Zeile aus. Entwickler verknüpfen eine .js-Datei normalerweise über das <script>-Tag mit einem HTML-Dokument:

<!-- Verknüpfung einer externen JS-Datei mit einem HTML-Dokument -->
<script src="script.js"></script>

Sobald der JavaScript-Code verknüpft ist, hat er Zugriff auf das DOM (Document Object Model). Das DOM ist eine Repräsentation der HTML-Seite. JavaScript kann das DOM lesen, ändern, neue HTML-Elemente hinzufügen oder vorhandene Elemente in Echtzeit löschen, und das alles, ohne dass der Benutzer die Seite aktualisieren (neu laden) muss.

Die Entstehungsgeschichte: 10 Tage im Mai

Die Geschichte von JavaScript ist eine der berühmtesten Legenden der Informatik.

Im Jahr 1995 war das Web völlig statisch. Ein Unternehmen namens Netscape (Entwickler des damals beliebtesten Browsers) wollte das Web dynamischer machen. Sie stellten einen Programmierer namens Brendan Eich ein, um eine Skriptsprache zu entwickeln, die direkt in Webseiten eingebettet werden konnte.

Unter enormem Druck, Microsoft in den "Browserkriegen" zu schlagen, entwarf und baute Eich bekanntermaßen den ersten Prototyp der Sprache in nur 10 Tagen.

Ursprünglich Mocha, dann LiveScript genannt, wurde es schließlich in JavaScript umbenannt – ein Marketingtrick, um auf der Erfolgswelle der damals unglaublich beliebten Programmiersprache Java mitzureiten (obwohl die beiden Sprachen architektonisch fast nichts gemeinsam haben).

Da es in 10 Tagen entwickelt wurde, wies das frühe JavaScript viele Eigenheiten und Fehler auf. Jahrelang machten sich "ernsthafte" Programmierer darüber lustig. Da es jedoch direkt in jeden Webbrowser der Welt integriert war, besaß es einen unaufhaltsamen Vorteil: die universelle Verbreitung.

Grundlegende JavaScript-Syntax

Die JavaScript-Syntax ist stark an C und Java angelehnt. Hier sind einige grundlegende Konzepte:

Variablen und Daten

Variablen werden verwendet, um Daten zu speichern.

let userName = "Alice";    // Ein String (Text)
const age = 30;            // Eine Zahl (Konstante, kann nicht geändert werden)
let isOnline = true;       // Ein Boolean (wahr/falsch)

Funktionen

Funktionen sind wiederverwendbare Codeblöcke, die eine bestimmte Aufgabe ausführen.

function greetUser(name) {
    alert("Hallo, " + name + "!");
}

// Aufruf der Funktion
greetUser(userName); // Zeigt ein Alarmfenster mit "Hallo, Alice!"

DOM-Manipulation

Auf diese Weise ändert JavaScript die Webseite.

// Finde ein HTML-Element mit der ID "mein-button"
const button = document.getElementById('mein-button');

// Lass den Button etwas tun, wenn er angeklickt wird
button.addEventListener('click', function() {
    document.body.style.backgroundColor = 'red'; // Färbt den Hintergrund rot
});

Die AJAX-Revolution (Web 2.0)

Im ersten Jahrzehnt seines Bestehens wurde JavaScript hauptsächlich für nervige Pop-up-Werbung oder einfache Formularüberprüfungen verwendet.

Alles änderte sich Mitte der 2000er Jahre mit der Popularisierung von AJAX (Asynchronous JavaScript and XML). AJAX ermöglichte es JavaScript, im Hintergrund mit einem Server zu kommunizieren, ohne die Seite neu zu laden.

Als Google Google Maps (2005) und Gmail (2004) auf den Markt brachte, nutzten sie AJAX intensiv. Benutzer konnten eine Karte herumziehen, und neue Kartenkacheln wurden nahtlos im Hintergrund geladen. Dies bewies, dass JavaScript verwendet werden kann, um komplexe, Desktop-ähnliche Software direkt im Browser zu erstellen, was die Ära des "Web 2.0" einläutete.

JavaScript erobert die Welt

Heute wird JavaScript durchweg als die beliebteste Programmiersprache der Welt eingestuft. Sein Ökosystem ist riesig und es hat sich weit über den Webbrowser hinaus ausgedehnt.

  • Frontend-Frameworks: Tools wie React, Vue und Angular ermöglichen es Entwicklern, unglaublich komplexe Single Page Applications (SPAs) schnell und effizient zu erstellen.
  • Node.js (Backend): 2009 schuf Ryan Dahl Node.js, eine Umgebung, die es ermöglicht, JavaScript auf Servern auszuführen. Dies bedeutete, dass Entwickler genau dieselbe Sprache sowohl für das Frontend (Browser) als auch für das Backend (Server) verwenden konnten.
  • Mobile Apps: Frameworks wie React Native ermöglichen es Entwicklern, JavaScript-Code zu schreiben, der in native iOS- und Android-Anwendungen kompiliert wird.
  • Desktop-Apps: Frameworks wie Electron (welches Apps wie Slack, Discord und VS Code antreibt) ermöglichen es Entwicklern, Desktop-Software mit HTML, CSS und JavaScript zu erstellen.

Fazit

Von einem hastigen Prototyp, der in 10 Tagen gebaut wurde, bis zum unangefochtenen König der Softwareentwicklung – die Reise von JavaScript ist bemerkenswert. Das .js-Format ist der Motor des modernen Internets. Es brachte Interaktivität in das statische Web, verwischte die Grenzen zwischen Websites und Desktop-Software und schuf eine einheitliche Sprache, die auf praktisch jedem Gerät der Welt ausgeführt werden kann. Wenn Sie für das Web entwickeln möchten, ist das Erlernen von JavaScript nicht nur eine Option, sondern eine absolute Notwendigkeit.

Buy me a coffee