JavaScript in einer Webseite

Bisher haben deine Programme Text in die Konsole ausgegeben. Aber JavaScript wurde für Webseiten gemacht: Fast jede Seite, die du besuchst, benutzt es, um auf Klicks zu reagieren, neue Inhalte anzuzeigen oder zu prüfen, was du eingetippt hast. In dieser Lektion lernst du, eine Webseite mit JavaScript zu verändern, und am Ende baust du eine kleine To-do-Liste.

Eine Webseite wird in HTML geschrieben. HTML ist keine Programmiersprache: Es beschreibt, was auf der Seite steht, etwa Überschriften, Absätze und Buttons. Jeder dieser Teile ist ein Element, das mit Tags geschrieben wird:

<h1>Wetter</h1>
<p>Heute scheint die Sonne.</p>

<h1> ist ein öffnendes Tag und </h1> ein schließendes Tag (mit einem Schrägstrich); dazwischen steht der Inhalt des Elements. h1 ist die Hauptüberschrift, p ein Absatz. Elemente können andere Elemente enthalten. Die ganze Seite steckt im Element html, das zwei Teile hat: head mit Informationen über die Seite, etwa ihrem Titel, und body mit allem, was du auf der Seite siehst. Damit eine Seite richtig angezeigt wird, braucht sie außerdem immer die Zeilen <!DOCTYPE html> und <meta charset="utf-8">; darum musst du dir jetzt keine Gedanken machen.

In dieser Lektion hat der Editor zwei Dateien, zwischen denen du mit den Tabs darüber wechselst: script.js ist dein JavaScript-Programm und index.html ist die Seite. Die Vorschau zeigt die Seite, und darunter ist die Konsole, in der du siehst, was console.log() ausgibt, und auch Fehler.

Die Seite lädt das Programm mit dem Element script:

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

src="script.js" ist ein Attribut: eine zusätzliche Information, die als name="wert" im öffnenden Tag steht. Das Attribut src (englisch source, Quelle) sagt, welche Datei geladen werden soll. Zwischen den Tags steht nichts, aber das schließende Tag </script> muss trotzdem da sein.

Setze das Element script ans Ende von body, direkt vor </body>. Warum dorthin? Der Browser liest die Seite von oben nach unten und führt ein Skript aus, sobald er darauf stößt. Ein Skript am Anfang der Seite würde laufen, bevor der Browser die Elemente darunter gelesen hat, und könnte sie deshalb nicht finden.

Das Skript läuft einmal, wenn die Seite geladen wird. Jedes Mal, wenn du auf Ausführen klickst, wird die Seite neu geladen, und das Skript läuft noch einmal.

In script.js steht schon ein kurzes Programm: Es gibt eine Nachricht in der Konsole aus und ändert die Hauptüberschrift. Wie es funktioniert, lernst du in der nächsten Übung. Vorerst passiert nichts, weil die Seite das Skript noch nicht lädt.