Abschnitt 1 · Lektion 4
Anweisungen und Kommentare
Ein Programm ist eine Liste von Anweisungen, die der Browser der Reihe nach abarbeitet. Diese Lektion klärt, wo eine Anweisung aufhört und die nächste anfängt, und wie du Text hinschreibst, der nicht ausgeführt werden soll.
Eine Anweisung pro Zeile
Die Regel ist einfach: eine Anweisung pro Zeile, Semikolon am Ende.
Das Semikolon ist das Satzzeichen von JavaScript. Es sagt: hier bin ich fertig. Ohne Trennung kommt der Browser nicht klar.
<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p> // Zwei Anweisungen in einer Zeile, ohne Trennung dazwischen.
// Der Browser kommt damit nicht klar und liest die Datei gar nicht erst.
console.log("Erste Zeile")console.log("Zweite Zeile") In der Console steht ein SyntaxError, und ausgegeben wird gar nichts. Nicht einmal die erste der beiden Zeilen, obwohl die für sich richtig ist.
Das ist wichtig genug für einen eigenen Absatz: Ein Syntaxfehler bricht die ganze Datei ab, bevor eine einzige Zeile läuft. Der Browser liest deine Datei erst komplett und führt sie dann aus. Findet er beim Lesen etwas, das keinen Sinn ergibt, hört er auf. Wenn also gar nichts passiert, obwohl oben in deiner Datei ein console.log steht, dann liegt der Fehler meistens weiter unten. Die nächste Lektion geht genauer darauf ein.
Das Semikolon, das JavaScript selbst ergänzt
Jetzt kommt die Stelle, an der die Sprache hilfsbereiter ist, als ihr guttut.
JavaScript ergänzt fehlende Semikolons an vielen Stellen von selbst. Das nennt sich Automatic Semicolon Insertion, kurz ASI, und meistens macht es genau das, was du gemeint hast. Du kannst also console.log("Hallo") ohne Semikolon schreiben, und es funktioniert.
Das Wort in diesem Satz ist „meistens”.
<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p> // Hier fehlt am Ende der dritten Zeile ein Semikolon.
// Weil die nächste Zeile mit einer Klammer beginnt, hängt JavaScript
// beide zusammen und liest console.log("Fertig")(7).
console.log("Fertig")
(7) Der Browser sieht am Ende der Zeile mit console.log("Fertig") keinen Grund, dort abzubrechen: die nächste Zeile beginnt mit einer runden Klammer, und irgendwas(7) ist eine gültige Fortsetzung. Also liest er beides zusammen als console.log("Fertig")(7). Und weil console.log(...) keine Funktion zurückgibt, die man aufrufen könnte, gibt es einen TypeError.
Genau diese Fälle treffen dich: Zeilen, die mit ( oder [ beginnen. Die Regel selbst musst du nicht auswendig lernen. Es reicht, eine Gewohnheit zu haben, die dich davor schützt, und die heißt: Semikolon hinschreiben. Es kostet einen Tastendruck.
Du wirst trotzdem Code sehen, in dem keine Semikolons stehen. Manche Teams entscheiden sich bewusst dagegen und benutzen ein Werkzeug, das die riskanten Zeilen findet. Solange du kein solches Werkzeug hast, ist die Entscheidung leicht.
Kommentare
Ein Kommentar ist Text in deiner Datei, den der Browser überliest. Er ist für Menschen da, für deine Kollegen und für dich selbst in drei Monaten.
<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p> // Zwei Schrägstriche machen den Rest der Zeile zur Notiz.
console.log("Diese Zeile läuft."); // auch hinter Code
// console.log("Diese hier nicht, sie ist auskommentiert.");
/* Zwischen Schrägstrich-Stern und Stern-Schrägstrich
darf ein Kommentar über mehrere Zeilen gehen.
Praktisch, um vorübergehend einen ganzen Block stillzulegen. */
console.log("Und diese wieder."); Zwei Schrägstriche machen den Rest der Zeile zur Notiz. Das ist die Form, die du fast immer benutzt. Sie funktioniert auch hinter Code, nicht nur am Zeilenanfang.
Für mehrere Zeilen gibt es die zweite Form mit Schrägstrich-Stern am Anfang und Stern-Schrägstrich am Ende. Alles dazwischen wird überlesen, auch über Zeilengrenzen hinweg.
Der zweite Zweck von Kommentaren ist mindestens so wichtig wie der erste: Code stilllegen, ohne ihn zu löschen. Du hast eine Zeile, die noch nicht fertig ist oder gerade stört. Zwei Schrägstriche davor, und sie ist weg, aber eben nicht verloren. In den meisten Editoren geht das mit Strg + Shift + 7 für die markierten Zeilen, auf dem Mac mit Cmd + /.
Was einen guten Kommentar ausmacht, ist übrigens nicht die Menge. Ein Kommentar, der wiederholt, was die Zeile sowieso sagt, ist Beiwerk. Nützlich wird er, wenn er das Warum festhält: warum diese Reihenfolge, warum dieser krumme Wert, warum hier eine Ausnahme steht.
Groß und klein sind verschiedene Dinge
JavaScript unterscheidet strikt zwischen Groß- und Kleinschreibung, überall.
<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p> console.log("Diese Zeile läuft.");
// Ein großes L, und der Browser kennt den Befehl nicht mehr.
console.Log("Diese hier nicht.");
console.log("Und diese auch nicht, weil vorher abgebrochen wurde."); console.Log mit großem L gibt es nicht, also bricht das Programm an dieser Stelle ab. Die Zeile davor ist noch gelaufen, die danach nicht mehr. Anders als beim Syntaxfehler oben passiert der Abbruch hier erst beim Ausführen, deshalb siehst du die erste Ausgabe.
Dasselbe gilt für alle Namen, die du selbst vergibst. meinName und meinname sind zwei völlig verschiedene Dinge. Das ist keine Schikane, sondern die Bedingung dafür, dass sich Namen wie istAngemeldet überhaupt lesen lassen. Wie man Namen richtig schreibt, kommt in der ersten Lektion des nächsten Abschnitts.
Was dagegen egal ist
Leerzeichen, Einrückungen und Leerzeilen sind dem Browser gleichgültig. Du kannst zwischen console und dem Punkt zehn Leerzeichen setzen, du kannst drei Leerzeilen zwischen zwei Anweisungen lassen. Es ändert nichts.
Genau eine Ausnahme gibt es: innerhalb von Text in Anführungszeichen zählt jedes Zeichen. "Hallo Welt" und "Hallo Welt" sind zwei verschiedene Texte, und genau das prüft die Aufgabe der vorigen Lektion Zeichen für Zeichen.
Dass Formatierung dem Browser egal ist, heißt nicht, dass sie egal ist. Sie ist der Unterschied zwischen Code, den man lesen kann, und Code, den man entziffern muss. Zwei Leerzeichen Einzug pro Ebene und eine Leerzeile zwischen Sinnabschnitten sind die Konvention, an die sich fast alle halten.
Zum Mitnehmen
JavaScript setzt fehlende Semikolons meistens selbst. Meistens ist bei einer Regel mit Ausnahmen das schlechteste Wort, das es gibt.
Jetzt du
Basis Konto, kostenlosZu dieser Lektion gehört eine Aufgabe. Du schreibst den Code selbst, und nach jedem Lauf sagt dir eine Prüfliste, was schon stimmt.
Dafür brauchst du das Basis Konto. Es kostet nichts, und ein Passwort gibt es auch nicht.
Was in dieser Lektion steckt
-
Artikel mit 4 Beispielen zum Ausprobieren
Steht hier, ohne Konto lesbar.
-
Aufgabe im Editor, direkt im Browser geprüft
Öffnet sich mit dem Basis Konto.