Was ist JavaScript?

Du kennst das Bild aus HTML und CSS: HTML ist der Rohbau, CSS die Einrichtung. Jetzt kommt die Elektrik dazu.

HTML sagt, was ein Inhalt ist. Eine Überschrift ist eine Überschrift, ein Knopf ist ein Knopf. CSS sagt, wie er aussieht: welche Farbe, welche Größe, an welcher Stelle. Beides beschreibt einen Zustand, und der steht schon fest, bevor jemand die Seite öffnet.

JavaScript beschreibt, was passiert. Wenn jemand klickt, wenn er tippt, wenn ein paar Sekunden vergangen sind, wenn Daten aus dem Netz eintreffen. Es ist die einzige der drei Sprachen, die einen Ablauf kennt.

01 / 05Drei Seiten, dieselbe Datei

Schau dir die drei Beispiele der Reihe nach an. Es ist immer dasselbe Markup, nur der Skript-Teil unterscheidet sich. Der <style>-Block im Kopf steht in allen dreien gleich und gehört nicht zum Thema: er gibt der Seite eine lesbare Schrift und etwas Luft, damit du eine Seite ansiehst und keinen Rohentwurf.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Newsletter</title>
    <style>
      body {
        font-family: system-ui, sans-serif;
        max-width: 40rem;
        margin: 0;
        padding: 1rem;
        line-height: 1.6;
        color: #1c1917;
      }
      h1 {
        font-size: 1.5rem;
        margin: 0 0 0.75rem;
      }
      p {
        margin: 0 0 0.75rem;
      }
      button {
        font: inherit;
        padding: 0.4rem 0.8rem;
        border: 1px solid #d6d3d1;
        border-radius: 6px;
        background: #fafaf9;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <h1>Newsletter</h1>
    <p id="status">Noch nichts passiert.</p>
    <button type="button" id="anmelden">Anmelden</button>
  </body>
</html>

Hier passiert nichts. Der Knopf ist ein echter Knopf, du kannst ihn drücken, er sieht sogar gedrückt aus. Aber es ist niemand da, der auf das Drücken reagiert. Der Absatz behält seinen Text.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Newsletter</title>
    <style>
      body {
        font-family: system-ui, sans-serif;
        max-width: 40rem;
        margin: 0;
        padding: 1rem;
        line-height: 1.6;
        color: #1c1917;
      }
      h1 {
        font-size: 1.5rem;
        margin: 0 0 0.75rem;
      }
      p {
        margin: 0 0 0.75rem;
      }
      button {
        font: inherit;
        padding: 0.4rem 0.8rem;
        border: 1px solid #d6d3d1;
        border-radius: 6px;
        background: #fafaf9;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <h1>Newsletter</h1>
    <p id="status">Noch nichts passiert.</p>
    <button type="button" id="anmelden">Anmelden</button>

    <script>
      document.getElementById("status").textContent = "Das Skript war hier.";
    </script>
  </body>
</html>

Eine Zeile mehr, und der Text im Absatz ist ein anderer. Interessant daran ist der Zeitpunkt: das Skript läuft, sobald der Browser bei dieser Stelle im Dokument ankommt. Niemand hat etwas angeklickt. Was im HTML stand, war der Anfangszustand, und den hat das Skript sofort überschrieben.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Newsletter</title>
    <style>
      body {
        font-family: system-ui, sans-serif;
        max-width: 40rem;
        margin: 0;
        padding: 1rem;
        line-height: 1.6;
        color: #1c1917;
      }
      h1 {
        font-size: 1.5rem;
        margin: 0 0 0.75rem;
      }
      p {
        margin: 0 0 0.75rem;
      }
      button {
        font: inherit;
        padding: 0.4rem 0.8rem;
        border: 1px solid #d6d3d1;
        border-radius: 6px;
        background: #fafaf9;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <h1>Newsletter</h1>
    <p id="status">Noch nichts passiert.</p>
    <button type="button" id="anmelden">Anmelden</button>

    <script>
      const status = document.getElementById("status");
      const knopf = document.getElementById("anmelden");

      knopf.addEventListener("click", function () {
        status.textContent = "Danke, du bist dabei.";
      });
    </script>
  </body>
</html>

Und jetzt wartet der Code. Er merkt sich zwei Elemente, hängt sich an den Knopf und tut erst etwas, wenn jemand klickt. Genau das ist es, was du in diesem Kurs baust.

Du musst noch nichts davon verstehen. Wenn du magst, änder in der Mitte den Text zwischen den Anführungszeichen und schau im Reiter Browser zu, was mit der Seite passiert. Mehr ist es nicht.

02 / 05Womit du hier arbeitest

Einmal die Werkzeuge, dann geht es los. Zum Editor gehören drei Reiter, und du wirst alle drei brauchen.

Der Reiter Browser zeigt die Seite, so wie sie gerade ist. Er hat eine Adresszeile und einen Knopf für Vollbild, wie ein richtiger Browser auch.

Der Reiter Console ist das Werkzeug der nächsten Wochen. Dort landet alles, was dein Code ausgibt, und jeder Fehler, den er auslöst. Die Zahl am Reiter sagt dir, wie viele Zeilen darin stehen, und die übernächste Lektion handelt nur davon.

Der Reiter Netzwerk zeigt, was der Browser für diese Seite geladen hat. Der wird ab Abschnitt 16 wichtig, wenn du dir selbst Daten aus dem Netz holst.

In den nächsten neun Abschnitten arbeitest du fast nur mit der Console. Auf der Seite steht dann ein Platzhalter, der genau das sagt: hier passiert nichts, das Ergebnis steht in der Console. Ab Abschnitt 10 dreht sich das um, dann ist die Seite das Ergebnis.

Die drei Reiter gibt es auf jedem Gerät. Nur liegen sie auf einem schmalen Bildschirm nicht neben dem Editor: dort füllt eine Fläche den Schirm, und du schaltest unten zwischen Lektion, Praxis, Code und Browser um. Zwei Sachen fehlen dort: der Knopf für Vollbild von eben und das Fadenkreuz, mit dem du ein Element auf der Seite antippst. Das Fadenkreuz brauchst du zum ersten Mal in Abschnitt 10, und die Lektion sagt es dort dazu. Lösbar bleibt jede Aufgabe.

03 / 05Wo dieser Code läuft

Das ist der Punkt, an dem sich JavaScript von allem unterscheidet, was du vielleicht über Programmieren gehört hast.

Dein Code wird zusammen mit der Seite ausgeliefert und läuft dann auf dem Gerät des Besuchers. Auf seinem Handy, in seinem Browser, mit seinem Akku. Nicht auf deinem Server. Der hat die Datei nur verschickt und ist danach fertig.

Daraus folgen zwei Dinge, und beide sind wichtig genug, um sie am ersten Tag zu hören.

Jeder kann deinen Code lesen. Rechtsklick, Seitenquelltext anzeigen, fertig. Es gibt keine Möglichkeit, das zu verhindern, und deshalb gehört nichts Geheimes in dein JavaScript: kein Passwort, kein API-Schlüssel, keine Preisberechnung, auf die du dich verlassen musst. Was der Browser wissen muss, weiß auch der Besucher.

Dein Code kann ausfallen. Ein Tippfehler, eine langsame Verbindung, eine Browser-Erweiterung, die dazwischenfunkt. Dann steht die Seite da, als hättest du das dritte Beispiel geschrieben und der Browser hätte das zweite geladen. Deshalb baut man Seiten so, dass das Wichtigste auch ohne Skript funktioniert: ein Formular, das sich abschicken lässt, Links, die irgendwohin führen, Texte, die dastehen. JavaScript macht es besser, nicht erst möglich.

Beides ist keine Warnung vor der Sprache. Es ist nur der Rahmen, in dem sie arbeitet, und wer ihn kennt, trifft von Anfang an bessere Entscheidungen.

04 / 05Der Name ist eine Verwechslung

Bevor die Frage kommt: JavaScript hat mit Java nichts zu tun. Nichts. Die beiden Sprachen sehen unterschiedlich aus, laufen an unterschiedlichen Orten und wurden von unterschiedlichen Leuten aus unterschiedlichen Gründen gebaut.

Der Name entstand 1995 als Marketing. Java war damals das große Ding, und die neue Sprache im Browser hieß erst LiveScript. Man taufte sie um, weil das die Aufmerksamkeit auf sie zog. Der Vergleich, den man dazu am häufigsten liest, trifft es gut: Java verhält sich zu JavaScript wie ein Karren zu einem Karneval.

Der offizielle Name der Sprache ist übrigens ECMAScript. So heißt der Standard, und wenn du irgendwo „ES2015” oder „ES6” liest, ist eine Version davon gemeint. Im Alltag sagt trotzdem jeder JavaScript.

05 / 05Was du in diesem Kurs machst

Die nächste Lektion zeigt, wie ein Skript überhaupt an eine Seite kommt, und danach schreibst du selbst. Die ersten neun Abschnitte kommen dabei ganz ohne Seite aus: es geht um Werte, Rechnungen, Entscheidungen und Funktionen.

Ab Abschnitt 10 kommt das DOM dazu, also die Seite selbst, und ab da baust du Dinge, die man anfassen kann. Was du hier im dritten Beispiel gesehen hast, schreibst du in Abschnitt 12 selbst und verstehst dann jede Zeile davon.