Dein erstes Programm
Kurz gesagt: Ein Programm ist eine Folge von Befehlen, die von oben nach unten ausgeführt werden: In JavaScript gibt console.log Text aus, // beginnt einen Kommentar, und du startest die Datei mit node.
Problem
Der Computer macht genau, was dasteht
Der Computer errät nicht, was du willst. Er führt Befehle aus, einen nach dem anderen, genau so, wie sie geschrieben sind. Eine Folge solcher Befehle ist ein Programm.
Hier ist ein ganzes Programm. Es gibt zwei Zeilen auf dem Bildschirm aus:
console.log("Willkommen!");console.log("Das ist dein erstes Programm.");Willkommen!Das ist dein erstes Programm.Das ist das ganze Programm: zwei Zeilen, ein Befehl pro Zeile. Es gibt keine Hülle darum. Du speicherst sie in einer Datei hello.js und startest sie.
Die Idee
Was im Programm steht
- Das Programm ist die Datei selbst. Ausgeführt wird sie von Node.js: dem Programm, das JavaScript außerhalb des Browsers ausführt. Es geht die Zeilen von oben nach unten durch, von der ersten bis zur letzten.
console.log(...)gibt den Text in den Klammern aus und springt in eine neue Zeile.- Der Text steht in doppelten Anführungszeichen:
"Willkommen!". Die Anführungszeichen werden nicht ausgegeben. - Jeder Befehl endet mit
;. JavaScript kommt oft auch ohne aus, aber wir schreiben es immer: So siehst du, wo ein Befehl endet.
Du startest das Programm im Terminal, im Ordner der Datei:
node hello.jsNode.js liest die Datei und führt die Befehle darin aus. Es gibt keinen eigenen Schritt, in dem der Code vorher übersetzt wird: Du schreibst und startest.
Genauer, für Neugierige
- Groß- und Kleinbuchstaben spielen eine Rolle.
Console.logist nicht dasselbe wieconsole.log, und das Programm hält mit einem Fehler an, wenn es diese Zeile erreicht.
- Text kann auch in einfachen Anführungszeichen stehen:
console.log('Willkommen!');gibt dasselbe aus. In diesem Kurs schreiben wir doppelte. - JavaScript läuft auch im Browser. Dort gibt
console.login der Konsole der Entwicklerwerkzeuge (F12) aus. In diesem Kurs starten wir die Programme mit Node.js.
Die Idee
Ausgabe mit und ohne Zeilenumbruch
Manchmal willst du mehrere Textstücke in einer Zeile. console.log springt immer in eine neue Zeile, deshalb gibt es dafür einen anderen Befehl: process.stdout.write. Er gibt den Text aus und bleibt in derselben Zeile.
process.stdout.write("Bestellung ");process.stdout.write("Nr. 1024");console.log(" ist bestätigt.");console.log("Lieferung: morgen");Bestellung Nr. 1024 ist bestätigt.Lieferung: morgenDie ersten beiden Zeilen im Code nutzen process.stdout.write, deshalb kommen „Bestellung“, „Nr. 1024“ und „ist bestätigt.“ zusammen heraus. Nach console.log beginnt der nächste Text in einer neuen Zeile.
Achte auf die Leerzeichen. Sie stehen in den Anführungszeichen, denn der Computer setzt kein Leerzeichen von selbst.
Folge dem Cursor: Der Text erscheint immer dort, wo er steht.
process.stdout.write("Bestellung ");process.stdout.write("Nr. 1024");console.log(" ist bestätigt.");console.log("Lieferung: morgen");Schritt für Schritt, in Worten
- process.stdout.write gibt „Bestellung “ aus, und der Cursor bleibt in derselben Zeile.
- process.stdout.write gibt „Nr. 1024“ aus, und der Cursor bleibt in derselben Zeile.
- console.log gibt „ ist bestätigt.“ aus, und der Cursor springt in eine neue Zeile.
- console.log gibt „Lieferung: morgen“ aus, und der Cursor springt in eine neue Zeile.
- Die Leerzeichen stehen in den Anführungszeichen. Der Computer setzt kein Leerzeichen von selbst.
Genauer, für Neugierige
process.stdout ist die Ausgabe des Programms in Node.js. Im Browser gibt es das nicht: Dort wird der Text für eine Zeile gesammelt und auf einmal mit console.log ausgegeben.
Probier es aus
In wie vielen Zeilen?
Was gibt das Programm aus?
process.stdout.write("Zug ");console.log("8:15");process.stdout.write("Gleis ");process.stdout.write("3");console.log();Nach „8:15“ steht console.log, deshalb steht „Gleis“ in einer neuen Zeile. Die letzte Zeile, console.log();, gibt keinen Text aus. Sie springt nur in eine neue Zeile.
Die Idee
Kommentare: Notizen für Menschen
Manchmal willst du eine Notiz im Code hinterlassen: warum etwas so ist oder was als Nächstes kommt. Du schreibst sie als Kommentar. Der Computer überspringt Kommentare.
//beginnt einen Kommentar bis zum Ende der Zeile./*und*/umschließen einen Kommentar über mehrere Zeilen.
/* Der Kassenbon des Cafés. Die Preise sind in Euro. */console.log("Kaffee 2,50 €");// console.log("Croissant 1,80 €");console.log("Summe 2,50 €"); // keine Croissants mehrKaffee 2,50 €Summe 2,50 €Die Zeile mit dem Croissant ist Code, aber sie steht hinter //, deshalb wird sie nicht ausgeführt. So schaltest du eine Zeile vorübergehend ab, ohne sie zu löschen.
Ein guter Kommentar sagt, warum, nicht was. Was der Code macht, zeigt er selbst.
Probier es aus
Was kommt heraus?
Was gibt das Programm aus?
console.log("9:00 Mathe");// console.log("10:00 Physik");console.log("11:00 Geschichte"); // danach ist MittagspauseDie ganze zweite Zeile ist ein Kommentar, deshalb wird „Physik“ nicht ausgegeben. In der dritten Zeile beginnt der Kommentar nach `;`: Der Befehl wird ausgeführt, und die Notiz nach // wird übersprungen.
Problem
Das Programm startet nicht
Du hast das Programm geschrieben, du startest es, und es beginnt nicht einmal. Keine einzige Zeile erscheint. Statt einer Ausgabe bekommst du eine Meldung:
console.log("Willkommen im Kurs!"console.log("Jetzt geht es los.");/home/student/welcome.js:1console.log("Willkommen im Kurs!" ^^^^^^^^^^^^^^^^^^^^^
SyntaxError: missing ) after argument listHier fehlt in der ersten Zeile die schließende Klammer. Bevor Node.js die erste Zeile ausführt, liest es die ganze Datei und prüft, ob sie nach den Regeln der Sprache geschrieben ist. Wenn nicht, hält es an und führt nichts aus, nicht einmal die Zeilen vor dem Fehler. Das nennt man einen Syntaxfehler (SyntaxError).
Die Idee
So liest du die Meldung
Die Meldung sagt dir drei Dinge: die Datei, die Zeile und was falsch ist.
/home/student/welcome.js:1 bedeutet die Datei welcome.js (mit dem vollen Pfad dorthin), Zeile 1. Darunter steht die Zeile selbst, und die Zeichen ^ unterstreichen die Stelle, an der Node.js das Problem bemerkt hat. Dann kommt die Art des Fehlers und was falsch ist: missing ) after argument list bedeutet „nach dem Inhalt der Klammern fehlt eine )“.
Unter der Meldung gibt Node.js weitere Zeilen aus, die mit at beginnen. Sie sagen, wo in Node.js selbst der Fehler bemerkt wurde. Überspring sie vorerst.
Es gibt auch eine zweite Art von Fehler. Das Programm startet, führt die Zeilen nacheinander aus und hält erst bei der Zeile an, die es nicht ausführen kann:
console.log("Willkommen im Kurs!");Console.log("Jetzt geht es los.");Willkommen im Kurs!/home/student/welcome.js:2Console.log("Jetzt geht es los.");^
ReferenceError: Console is not definedConsole mit großem Anfangsbuchstaben ist ein Name, den Node.js nicht kennt (ReferenceError). Node.js merkt das erst, wenn es diese Zeile erreicht, deshalb ist die erste Zeile schon ausgegeben. Wieder nennt es die Datei und die Zeile, danach die Art des Fehlers.Die häufigsten Fehler am Anfang:
- ein Anführungszeichen oder eine Klammer ist geöffnet, aber nicht geschlossen (SyntaxError);
- ein Großbuchstabe statt eines Kleinbuchstabens:
Console.log(ReferenceError, wenn das Programm die Zeile erreicht).
Node.js zeigt immer nur einen Syntaxfehler auf einmal. Du behebst ihn, startest neu, und erst dann siehst du den nächsten, falls es einen gibt.
Genauer, für Neugierige
- Node.js sagt dir, wo das Problem bemerkt wurde. Manchmal liegt der Fehler etwas weiter oben.
- Es gibt auch Fehler, die niemand abfängt: Das Programm startet, macht aber etwas anderes, als du willst. Die jagen wir in fast jeder Lektion.
Probier es aus
Finde den Fehler
Das Programm soll den Plan der Prüfung ausgeben. Es startet nicht: Nicht einmal die erste Zeile erscheint. In welcher Zeile ist der Fehler?
Wähle die Zeile mit dem Fehler.
); für einen Teil des Textes und erreicht das Zeilenende ohne schließendes Anführungszeichen: SyntaxError: Invalid or unexpected token („ein Zeichen, das ich nicht erwartet habe“). Deshalb erscheint nicht einmal „Uhrzeit: 10:30“ aus Zeile 1. Die Korrektur ist console.log("Raum: 204");.Übung
Deine ersten Programme
Löse die Aufgaben in deinem Editor. Jede ist ein eigenes Programm. Vergleiche deine Ausgabe mit dem Beispiel, Zeichen für Zeichen.
1. Hello World. Das traditionelle erste Programm. Gib aus:
Hello, World!2. Visitenkarte. Gib eine Visitenkarte aus drei Zeilen aus: Name, Beruf und E-Mail. Du kannst auch deine eigenen Daten nehmen.
Maria IvanovaWebentwicklerinmaria@example.com3. Rahmen. Gib das heutige Menü der Kantine in einem Rahmen aus Sternchen aus. Achte auf die Leerzeichen, damit die rechte Seite gerade wird.
***************** Heute: Suppe ** 5,40 € *****************Weitere Aufgaben
- Ein Satz in drei Teilen. Gib mit drei Befehlen
process.stdout.writeund einemconsole.login einer Zeile „Der Shop hat von 9:00 bis 19:00 geöffnet.“ aus. - Ein Stundenplan mit Kommentar. Gib einen Stundenplan mit vier Stunden aus. Schalte dann die dritte Zeile mit
//ab, ohne sie zu löschen, und füge einen Kommentar hinzu, warum.
- Ein Fehler mit Absicht. Entferne das
;aus einer Zeile von Aufgabe 1: Das Programm funktioniert trotzdem. Entferne dann eine Klammer, dann ein Anführungszeichen, dann schreibConsole.logmit großem Anfangsbuchstaben. Lies jedes Mal, was Node.js sagt.
Test