JavaScript Anfänger

Was ist JavaScript? Die Sprache des Webs verstehen

Was ist JavaScript?

JavaScript ist die Programmiersprache des Webs. Ohne JavaScript wäre das Internet, wie wir es kennen, nicht möglich. Jede interaktive Webseite, jede Web-App, jeder Button, der etwas macht, wenn du draufklickst – das alles wird mit JavaScript ermöglicht.

Die Geschichte in 30 Sekunden

JavaScript wurde 1995 von Brendan Eich in nur 10 Tagen entwickelt. Ursprünglich hieß es “Mocha”, dann “LiveScript”, und schließlich “JavaScript” – obwohl es nichts mit Java zu tun hat! Der Name war reines Marketing.

Heute ist JavaScript:

  • Die meistgenutzte Programmiersprache der Welt
  • Auf 98% aller Webseiten im Einsatz
  • Nicht nur im Browser, sondern auch auf Servern (Node.js), in Apps und sogar auf Robotern

Was macht JavaScript so besonders?

1. Läuft überall

// JavaScript läuft in jedem Browser
// Kein Download, keine Installation nötig
console.log("Hallo von JavaScript!");

Öffne jetzt die Entwicklertools deines Browsers (F12), geh zum Tab “Console” und tippe das ein. Boom – du hast gerade JavaScript ausgeführt!

2. Interaktivität

Ohne JavaScript sind Webseiten nur statische Dokumente. Mit JavaScript werden sie zu Anwendungen:

// Reagiere auf Benutzeraktionen
button.addEventListener('click', () => {
    alert('Du hast geklickt!');
});

// Ändere Inhalte dynamisch
element.textContent = 'Neuer Text!';

// Animiere Elemente
element.style.transform = 'rotate(360deg)';

3. Vielseitigkeit

JavaScript ist nicht mehr nur für Webseiten:

BereichTechnologieBeispiel
FrontendReact, Vue, SvelteInstagram, Netflix
BackendNode.js, DenoPayPal, LinkedIn
Mobile AppsReact NativeFacebook, Discord
Desktop AppsElectronVS Code, Slack
GamesPhaser, Three.jsBrowser-Spiele
KI/MLTensorFlow.jsBilderkennung im Browser

JavaScript vs. andere Sprachen

JavaScript vs. HTML/CSS

HTML  = Struktur (das Skelett)
CSS   = Style (die Kleidung)
JS    = Verhalten (das Gehirn)

Beispiel:

<!-- HTML: Die Struktur -->
<button id="myBtn">Klick mich</button>

<!-- CSS: Das Aussehen -->
<style>
  #myBtn {
    background: blue;
    color: white;
    padding: 10px 20px;
  }
</style>

<!-- JavaScript: Das Verhalten -->
<script>
  document.getElementById('myBtn').addEventListener('click', () => {
    alert('Button wurde geklickt!');
  });
</script>

JavaScript vs. Python

AspektJavaScriptPython
HaupteinsatzWebentwicklungData Science, KI, Backend
Läuft inBrowser + ServerServer
SyntaxGeschweifte Klammern {}Einrückungen
TypenDynamisch, lockerDynamisch, strenger

Beide Sprachen sind großartig – JavaScript ist nur die einzige, die nativ im Browser läuft.

Wie funktioniert JavaScript?

JavaScript ist eine interpretierte Sprache. Das bedeutet:

Dein Code → JavaScript Engine → Ausführung

Jeder Browser hat eine eigene JavaScript-Engine:

  • Chrome: V8
  • Firefox: SpiderMonkey
  • Safari: JavaScriptCore

Die Engine liest deinen Code Zeile für Zeile und führt ihn aus – keine Kompilierung nötig.

Ein einfaches Beispiel

// 1. Deklariere eine Variable
const name = "Max";

// 2. Erstelle eine Funktion
function greet(person) {
    return `Hallo, ${person}! Willkommen bei JavaScript.`;
}

// 3. Rufe die Funktion auf
const greeting = greet(name);

// 4. Zeige das Ergebnis
console.log(greeting);
// Ausgabe: "Hallo, Max! Willkommen bei JavaScript."

Was du mit JavaScript bauen kannst

Interaktive Webseiten

// Formular-Validierung
if (email.includes('@')) {
    form.submit();
} else {
    showError('Ungültige E-Mail!');
}

Single Page Applications (SPAs)

// Navigation ohne Seiten-Reload
router.navigate('/dashboard');
updateUI(dashboardData);

APIs ansprechen

// Daten von einem Server laden
const response = await fetch('https://api.example.com/data');
const data = await response.json();
displayData(data);

Animationen

// Smooth Scroll
element.scrollIntoView({ behavior: 'smooth' });

// CSS Animationen auslösen
element.classList.add('animate-bounce');

Mythen über JavaScript

❌ “JavaScript ist unsicher”

JavaScript im Browser läuft in einer Sandbox – es kann nicht auf deine Dateien zugreifen oder Programme installieren. Es ist so sicher wie die Website, die du besuchst.

❌ “JavaScript ist langsam”

Moderne JavaScript-Engines sind extrem optimiert. V8 kompiliert JavaScript zu Maschinencode und erreicht nahezu native Performance.

❌ “JavaScript ist nur für Anfänger”

Von Startups bis zu Google, Facebook und Microsoft – alle nutzen JavaScript für kritische Anwendungen. Es ist eine professionelle Programmiersprache.

Dein erster JavaScript-Code

Lass uns etwas Praktisches machen. Öffne die Browser-Konsole (F12 → Console) und tippe:

// Berechne dein Alter in Tagen
const birthYear = 2000; // Dein Geburtsjahr
const currentYear = 2026;
const ageInYears = currentYear - birthYear;
const ageInDays = ageInYears * 365;

console.log(`Du bist ca. ${ageInDays} Tage alt!`);

Herzlichen Glückwunsch! Du hast gerade:

  • Variablen deklariert (const)
  • Mathematik durchgeführt
  • Template Literals verwendet (` `)
  • Etwas in der Konsole ausgegeben

Was kommt als Nächstes?

In den nächsten Lektionen wirst du:

  1. Deine Entwicklungsumgebung einrichten – VS Code, Erweiterungen und Tools
  2. Variablen & Datentypen meistern – Das Fundament jedes Programms
  3. Kontrollstrukturen lernen – if/else, Schleifen
  4. Funktionen verstehen – Wiederverwendbarer Code
  5. Das DOM manipulieren – Webseiten interaktiv machen

Zusammenfassung

  • JavaScript ist die Sprache des Webs – unverzichtbar für moderne Webentwicklung
  • Es läuft im Browser ohne Installation
  • Du kannst damit alles bauen: Webseiten, Apps, Server, Games
  • Es ist eine professionelle Sprache, genutzt von den größten Unternehmen der Welt

Ready? Dann lass uns im nächsten Kapitel deine Entwicklungsumgebung einrichten!


💡 Pro-Tipp: Während du diesen Kurs durcharbeitest, probiere jeden Code-Block selbst aus. Die Browser-Konsole (F12) ist dein bester Freund zum Experimentieren!