Zum Inhalt springen
JavaScript AnfÀnger 1 min

Was ist JavaScript? Die Sprache des Webs verstehen

Erfahre, was JavaScript ist, warum es so wichtig ist und was du damit alles machen kannst. Der perfekte Einstieg in die Welt von JS.

Aktualisiert:

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!

ZurĂŒck zum JavaScript Kurs