JavaScript Grundlagen: Einführung

JavaScript ist die Programmiersprache des Webs. Ob du Websites interaktiv machen, Server-Anwendungen entwickeln oder Mobile Apps bauen willst – JavaScript ist überall. In diesem Tutorial lernst du die Grundlagen kennen und führst deinen ersten Code aus.

Was ist JavaScript?

JavaScript ist eine dynamische, interpretierte Programmiersprache, die 1995 von Brendan Eich bei Netscape entwickelt wurde. Ursprünglich für einfache Interaktionen im Browser gedacht, hat sich JavaScript zu einer der wichtigsten Programmiersprachen weltweit entwickelt.

Wichtige Eigenschaften:

High-Level: Abstrakt genug für produktive Entwicklung
Dynamisch typisiert: Typen werden zur Laufzeit bestimmt
Multi-Paradigm: Unterstützt funktionale, objektorientierte und imperative Programmierung
Single-Threaded: Ein Ausführungsthread mit Event Loop für Asynchronität

Geschichte und Entwicklung

JavaScript wurde in nur 10 Tagen entwickelt – ursprünglich unter dem Namen “Mocha”, dann “LiveScript”, schließlich “JavaScript” aus Marketing-Gründen (Java war damals populär, hat aber nichts mit JavaScript zu tun!).

Wichtige Meilensteine:

1995: Erste Version in Netscape Navigator
1997: ECMAScript Standard (ES1)
2009: Node.js bringt JavaScript auf den Server
2015: ES6/ES2015 revolutioniert die Sprache (Arrow Functions, Classes, Promises, Module)
2016+: Jährliche Updates mit neuen Features

JavaScript-Versionen verstehen

JavaScript folgt dem ECMAScript-Standard (kurz: ES). Seit 2015 gibt es jährliche Updates:

Version	Jahr	Wichtige Features
ES5	2009	Strict Mode, JSON Support
ES6/ES2015	2015	Arrow Functions, Classes, let/const, Promises, Modules
ES2016	2016	Array.includes(), Exponentiation Operator
ES2017	2017	async/await, Object.entries()
ES2020	2020	Optional Chaining (?.), Nullish Coalescing (??)
ES2021	2021	Logical Assignment Operators
ES2023	2023	Array Methods (findLast, toSorted)

Moderne Browser unterstützen praktisch alle aktuellen Features. Für ältere Browser kannst du Tools wie Babel nutzen, die neuen Code in kompatiblen Code umwandeln (Transpiling).

Wo läuft JavaScript?

JavaScript läuft in zwei Hauptumgebungen:

1. Im Browser (Client-Side)

Jeder moderne Browser hat eine JavaScript-Engine eingebaut:

Chrome/Edge: V8
Firefox: SpiderMonkey
Safari: JavaScriptCore

Typische Anwendungen:

DOM-Manipulation (Webseiten verändern)
Event-Handling (Button-Klicks, Formulare)
Fetch API (Daten vom Server laden)
Browser APIs (LocalStorage, Geolocation, Canvas)

2. Auf dem Server (Server-Side)

Mit Node.js (basiert auf V8) läuft JavaScript außerhalb des Browsers:

Backend-APIs entwickeln
CLI-Tools bauen
Build-Tools (Webpack, Vite)
Desktop-Apps (Electron)

Browser vs. Node.js:

// ✅ Browser: window, document, fetch (nativ ab ES2022)
console.log(window.location.href);
document.querySelector('button').addEventListener('click', () => {});

// ✅ Node.js: process, fs, require/import
console.log(process.version);
const fs = require('fs');
fs.readFileSync('file.txt', 'utf-8');

Deinen ersten JavaScript-Code ausführen

Methode 1: Browser-Console (Schnellster Start)

Öffne die Developer Tools in deinem Browser:

Chrome/Edge: F12 oder Ctrl + Shift + I (Windows/Linux) / Cmd + Option + I (Mac)
Firefox: F12 oder Ctrl + Shift + K
Safari: Cmd + Option + C (Developer Menu muss aktiviert sein)

Wechsle zum Tab Console und tippe:

console.log('Hallo, JavaScript!');
// Output: Hallo, JavaScript!

let name = 'Dein Name';
console.log(`Willkommen, ${name}!`);
// Output: Willkommen, Dein Name!

// Einfache Berechnung
let result = 5 + 3 * 2;
console.log(result); // Output: 11 (Punkt vor Strich!)

Tipp: Die Console ist perfekt zum Experimentieren und Debugging.

Methode 2: HTML-Datei mit `<script>`-Tag

Erstelle eine Datei index.html:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mein erstes JavaScript</title>
</head>
<body>
  <h1>JavaScript Test</h1>
  <button id="myButton">Klick mich!</button>

  <script>
    // JavaScript-Code hier
    console.log('Seite geladen!');

    // Button-Interaktion
    document.getElementById('myButton').addEventListener('click', () => {
      alert('Button wurde geklickt!');
    });
  </script>
</body>
</html>

Öffne die Datei im Browser – die Console zeigt “Seite geladen!” und der Button ist interaktiv.

Methode 3: Externes JavaScript-File

Besser für größere Projekte: JavaScript in separate Datei auslagern.

index.html:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>JavaScript extern</title>
</head>
<body>
  <h1>Externe JS-Datei</h1>
  <script src="script.js"></script>
</body>
</html>

script.js:

console.log('Externes JavaScript läuft!');

// DOM-Manipulation
document.body.style.backgroundColor = '#1e1e1e';
document.body.style.color = '#ffffff';

Vorteile:

Code-Wiederverwendung
Bessere Organisation
Browser-Caching möglich

Methode 4: Node.js (für Server-Side)

Falls Node.js installiert ist (nodejs.org):

app.js:

console.log('Hallo von Node.js!');

const sum = (a, b) => a + b;
console.log(`5 + 3 = ${sum(5, 3)}`);

Im Terminal ausführen:

node app.js
# Output: Hallo von Node.js!
# Output: 5 + 3 = 8

Dein erstes interaktives Programm

Lass uns ein kleines Programm schreiben, das verschiedene JavaScript-Features zeigt:

// Variablen deklarieren
let userName = 'Max';
const currentYear = 2025;
let birthYear = 1990;

// Berechnung
let age = currentYear - birthYear;

// Funktion definieren
function greet(name, age) {
  return `Hallo ${name}, du bist ${age} Jahre alt!`;
}

// Funktion aufrufen
let message = greet(userName, age);
console.log(message);
// Output: Hallo Max, du bist 35 Jahre alt!

// Bedingung (Control Flow)
if (age >= 18) {
  console.log('Du bist volljährig.');
} else {
  console.log('Du bist minderjährig.');
}

// Array und Loop
let hobbies = ['Programmieren', 'Gaming', 'Lesen'];
console.log('Meine Hobbies:');
for (let hobby of hobbies) {
  console.log(`- ${hobby}`);
}

Was passiert hier?

Variablen speichern Daten (let, const)
Funktionen gruppieren wiederverwendbaren Code
Template Literals (`${}`) fügen Variablen in Strings ein
if/else steuert den Programmfluss
Arrays speichern Listen, Loops iterieren darüber

Wichtige Konzepte auf einen Blick

Statements vs. Expressions

Expression: Produziert einen Wert: 5 + 3, true && false, myFunction()
Statement: Führt eine Aktion aus: let x = 5;, if (condition) { }

Semikolons (;)

In JavaScript sind Semikolons optional (Automatic Semicolon Insertion, ASI), aber Best Practice:

// Mit Semikolon (empfohlen)
let x = 5;
console.log(x);

// Ohne Semikolon (funktioniert, kann aber zu Fehlern führen)
let y = 10
console.log(y)

Case-Sensitivity

JavaScript unterscheidet Groß-/Kleinschreibung:

let myVariable = 'test';
let myvariable = 'different'; // Unterschiedliche Variablen!
console.log(myVariable); // 'test'
console.log(myvariable); // 'different'

Nächste Schritte

Du hast jetzt die absoluten Grundlagen von JavaScript kennengelernt:

Was JavaScript ist und wo es läuft
Wie du Code ausführst (Browser, Node.js)
Erste Syntax-Elemente

Im nächsten Tutorial lernst du alles über Variablen und Scopes – wie du Daten speicherst und wo diese im Code verfügbar sind.

Weiterführende Ressourcen

MDN Web Docs – JavaScript – Die beste Referenz
JavaScript.info – Umfassendes Tutorial (Englisch)
Node.js Dokumentation – Für Server-Side JavaScript
Can I Use – Browser-Kompatibilität prüfen

Tipp: Die Browser-Console ist dein bester Freund beim Lernen. Probiere jeden Code-Schnipsel selbst aus!