DevPanicZone Logo DevPanicZone! Cheatsheets.

Was ist JavaScript eigentlich?

Der entspannte Einstieg: Was JS kann, wofür du es brauchst - und dein erstes funktionierendes Beispiel.

Die Basics

JavaScript wirkt am Anfang wie ein großes Mysterium. Dabei ist es eigentlich nur ein Werkzeug, das Webseiten lebendig macht. Kein Zauber, kein Geheimcode, sondern einfach Logik, ein paar Grundideen - und der Rest ergibt sich mit der Zeit fast von selbst.

Was ist JavaScript überhaupt?

HTML sorgt dafür, was auf der Seite steht. CSS sorgt dafür, wie es aussieht. JavaScript sorgt dafür, dass etwas passiert.

Zum Beispiel:

  • Ein Menü aufklappen
  • Tekste ändern
  • Buttons reagieren lassen
  • Elemente ein- oder ausblenden
  • Eingaben prüfen
  • Animationen starten

Ohne JavaScript wäre eine Webseite einfach nur statisch.

JavaScript ist nicht Java

Ein häufiges Missverständnis: JavaScript und Java sind zwei komplett verschiedene Sprachen. Der Name ist historisch bedingt - Marketing aus den 90ern.

Java ist eine eigenständige Programmiersprache für Apps, Server und mehr. JavaScript läuft im Browser und macht Webseiten interaktiv. Außer dem Namen haben sie wenig gemeinsam.

Dein erstes Mini-Beispiel

Nichts installieren, keine Vorbereitung - du kannst JavaScript direkt im Browser testen:

  1. Irgendeine Webseite öffnen
  2. Rechtsklick → „Untersuchen“
  3. Reiter „Konsole“
  4. Code eingeben: console.log("Hallo!");

Das ist schon JavaScript. Wirklich.

Ein funktionierendes Beispiel auf dieser Seite

Klick mal auf den Button - das ist pures JavaScript:

So wenig Code reicht, um etwas auf der Seite zu verändern oder zu reagieren:

HTML 
<button id="helloBtn">Sag Hallo</button>

<script>
  const button = document.querySelector("#helloBtn");

  button.addEventListener("click", function() {
    alert("Hallo!");
  });
</script>

Wo schreibt man JavaScript?

Es gibt drei Wege, JavaScript in eine Webseite einzubinden:

1. Inline im HTML

HTML 
<button onclick="alert('Hallo!')">Klick mich</button>

Nur für schnelle Tests - nicht für echte Projekte.

2. Script-Tag im Dokument

HTML 
<script>
  console.log("Direkt im HTML");
</script>

3. Externe Datei (empfohlen)

HTML 
<script src="script.js" defer></script>

Das defer-Attribut sorgt dafür, dass das Script erst ausgeführt wird, wenn das HTML komplett geladen ist.

Was du am Anfang wirklich brauchst

Viele Tutorials werfen mit Fachbegriffen um sich - aber die Wahrheit ist: Für deinen Start brauchst du nur ein paar Grundbausteine.

  • Variablen - kleine Schubladen für Werte
  • Datentypen - Zahlen, Text, true/false
  • Bedingungen - „wenn X, dann Y“
  • Events - Klicks, Scrollen, Eingaben usw.
  • DOM-Auswahl - Elemente aus HTML auswählen

Das reicht locker für die ersten Tage oder Wochen. Im nächsten Tutorial gehen wir etwas genauer auf die Basics ein:

→ Zum Tutorial JavaScript Basics

Was später dazu kommt

  • Funktionen
  • Arrays und Objekte
  • Schleifen
  • Module
  • APIs
  • Asynchrone Abläufe

Alles Schritt für Schritt - und sobald du eine Basis hast, wird JavaScript plötzlich logisch.

Häufige Anfängerfehler

Darauf achten
  • Groß-/Kleinschreibung: querySelector ist nicht queryselector
  • Semikolons vergessen: Funktioniert oft trotzdem, aber besser immer setzen
  • Anführungszeichen mischen: "text' geht nicht
  • Script zu früh laden: Elemente existieren noch nicht → defer nutzen

Einsteiger Cheat-Sheet

Variablen

javascript 
const name = "Alex"; // fester Wert
let score = 0;       // veränderbarer Wert

Datentypen

  • "Text" - String
  • 42 - Number
  • true / false - Boolean
  • [1, 2, 3] - Array
  • { key: "value" } - Objekt

Bedingungen

javascript 
if (score > 10) {
  console.log("Gewonnen!");
} else {
  console.log("Weitermachen!");
}

Elemente auswählen

javascript 
const title = document.querySelector("h1");

Events

javascript 
button.addEventListener("click", function() {
  console.log("Button geklickt!");
});

Mehr aus JavaScript

Tutorials werden geladen...