Was heißt Programmieren?

Wenn du aufschreibst, was ein Computer tun soll, nennt man das Programmieren‌. Das Tolle daran ist, dass du selbst bestimmen kannst, was getan werden soll. Lässt du dein Programm laufen, macht der Computer das, was du ausgeheckt hast. Natürlich wird er nicht dein Zimmer aufräumen und dir auch keine Tasse Kakao ans Bett bringen. Aber beherrschst du erst mal das Programmieren, kannst du den Computer sozusagen nach deiner Pfeife tanzen lassen.

Allerdings passiert es gerade beim Programmieren, dass der Computer nicht so will, wie du es gerne hättest. Meistens ist das ein Fehler im Programm. Das Problem kann aber auch irgendwo anders im Computer oder im Betriebssystem liegen. Das Dumme bei Fehlern ist, dass sie sich gern so gut verstecken, dass die Suche danach schon manchen Programmierer zur Verzweiflung gebracht hat.

Vielleicht hast du nun trotzdem Lust bekommen, das Programmieren zu erlernen. Dann brauchst du ja nur noch eine passende Entwicklungsumgebung‌, und schon kann es losgehen.

Was ist eine Entwicklungsumgebung?

Um ein Programm zu erstellen, musst du erst einmal etwas eintippen. Das ist wie bei einem Brief oder einer Geschichte, die man schreibt. Das Textprogramm dafür kann sehr einfach sein, weil es ja nicht auf eine besondere Schrift oder Darstellung ankommt wie bei einem Brief oder einem Referat. So etwas wird Editor‌ genannt.

Ist das Programm eingetippt, kann es der Computer nicht einfach lesen und ausführen. Jetzt muss es so übersetzt werden, dass der PC versteht, was du von ihm willst. Weil er aber eine ganz andere Sprache spricht als du, muss ein Dolmetscher her.

Ein solcher Dolmetscher (= Interpreter) steckt in jedem Browser, JavaScript funktioniert sogar unter mehreren Betriebssystemen. Dein Computer kann also ein Windows-PC oder ein Linux-PC sein, ein Android-Smartphone oder irgendein anderes System. Ein und dasselbe JavaScript-Programm kann so (eventuell mit kleinen Abweichungen) auf fast jedem Computer oder Smartphone funktionieren.

Schließlich müssen Programme getestet, überarbeitet, verbessert, wieder getestet und weiterentwickelt werden. Da ist man froh, wenn man einige zusätzliche Hilfen hat. Daraus wird dann ein ganzes System, die Entwicklungsumgebung.

Warum gerade JavaScript?

Leider kannst du nicht so programmieren, wie dir der Schnabel gewachsen ist. Eine Programmiersprache‌ muss so aufgebaut sein, dass möglichst viele Menschen in möglichst vielen Ländern einheitlich damit umgehen können.

Weil in der ganzen Welt Leute zu finden sind, die wenigstens ein paar Brocken Englisch können, besteht auch fast jede Programmiersprache aus englischen Wörtern. Es gab auch immer mal Versuche, z.B. in Deutsch zu programmieren, aber meistens klingen die Wörter dort so künstlich, dass man lieber wieder aufs Englische zurückgreift.

Eigentlich ist es egal, welche Programmiersprache du benutzt. Am besten eine, die möglichst leicht zu erlernen ist. Wie du weißt, bekommst du es in diesem Buch mit der Programmiersprache JavaScript zu tun, die mittlerweile sehr weit verbreitet ist. (Willst du mal in andere Sprachen hineinschnuppern, dann empfehle ich dir z.B. eines der anderen Kids-Bücher über Python, Java oder C++.)

Der Weg zum guten Programmierer kann ganz schön steinig sein. Nicht selten kommt es vor, dass man die Lust verliert, weil einfach gar nichts klappen will. Das Programm tut etwas ganz anderes, man kann den Fehler nicht finden und man fragt sich: Wozu soll ich eigentlich programmieren lernen, wo es doch schon genug Programme gibt?

Gute Programmierer werden immer gesucht, und dieser Bedarf wird weiter steigen. Und JavaScript gehört dabei durchaus zu den erwünschten Sprachen. Wirklich gute Programmierer werden auch wirklich gut bezahlt. Es ist also nicht nur einen Versuch wert, es kann sich durchaus lohnen, das Programmieren in JavaScript zu erlernen.

Die Entwicklungsumgebung

Um eine Entwicklungsumgebung für JavaScript musst du dich nicht weiter kümmern, wenn dir eine einfache reicht. Das ist der Editor, der mit einem Betriebssystem wie Windows mitinstalliert wird. Besser aber ist etwas mit mehr Komfort, wie Visual Studio Code von Microsoft. Dieses Paket werden wir hier ausgiebig benutzen. Du kannst es dir von dieser Seite herunterladen:

https://code.visualstudio.com/

(Im Anhang steht, wie du dieses Paket installierst, und im Buch wird erklärt, wie du es nutzen kannst.)

Wie arbeite ich mit diesem Buch?

Grundsätzlich besteht dieses Buch aus einer Menge Text mit vielen Abbildungen dazwischen. Natürlich habe ich mich bemüht, alles so zuzubereiten, dass daraus lauter gut verdauliche Happen werden. Damit das Ganze noch genießbarer wird, gibt es zusätzlich noch einige Symbole, die ich dir hier gern erklären möchte:

Was brauchst du für dieses Buch?

Installiert wird Visual Studio Code mit einem Setup-Programm in ein Verzeichnis deiner Wahl. Außerdem solltest du einen Ordner einrichten, in dem du später deine JavaScript-Projekte unterbringen kannst – z.B. D:\JScript.

Die Beispielprogramme in diesem Buch gibt es alle als Download von der Homepage des Verlages, falls du mal keine Lust zum Abtippen hast:

http://www.mitp.de/0263

Und auch die Lösungen zu den Fragen und Aufgaben sind dort untergebracht (alles im Ordner Projekte).

Hinweise für Lehrer

Dieses Buch versteht sich auch als Lernwerk für den Informatik-Unterricht in der Schule. Dort setzt natürlich jeder Lehrer seine eigenen Schwerpunkte. Benutzen Sie an Ihrer Schule bereits ein Werk aus einem Schulbuchverlag, so lässt sich dieses Buch auch als Materialienband einsetzen – in Ergänzung zu dem vorhandenen Schulbuch. Weil dieses Buch sozusagen »bei null« anfängt, ist ein direkter Einstieg in JavaScript möglich – ohne irgendwelche anderen Programmierkenntnisse.

Ein wichtiger Schwerpunkt in diesem Buch ist die objektorientierte Programmierung (OOP). Auf die wichtigsten Eigenheiten (Kapselung, Vererbung und Polymorphie) wird ausführlich eingegangen. Ein großer Schwerpunkt ist die Programmierung von Spielen.

In den Projekten werden alle wesentlichen Elemente des Wortschatzes von HTML und JavaScript wie auch die wichtigsten Grafik-Komponenten eingesetzt. In den Lösungen zu den Aufgaben finden Sie weitere Vorschläge zur Programmierung.

Ein erstes Hallo, schlicht und einfach

Eigentlich ist es ganz einfach, ein erstes Programm in JavaScript zu schreiben. Du brauchst dazu nur einen simplen Editor wie den, der stets mit Windows mitinstalliert wird, auch Notepad‌ genannt. Und du brauchst einen Browser‌, das ist das Programm, mit dem du im Internet surfst oder Dateien von dort herunterlädst. Also z.B. Chrome von Google oder Edge von Microsoft, um nur zwei zu nennen.

Probieren wir aus, wie wir den Browser zum Hallo-Sagen bringen.

• Klicke mit der rechten Maustaste auf den Desktop, ein Kontextmenü öffnet sich, klicke dort auf Neu und dann auf Textdokument.

Auf dem Desktop findest du nun ein neues Symbol.

• Wenn du auf dieses Symbol doppelklickst, öffnet sich kurze Zeit später der zugehörige Editor und bietet dir ein leeres Fenster an.

Bevor wir da etwas hineintippen, speichern wir die noch leere Datei unter einem passenden Namen:

• Klicke im Editor oben auf Datei und dann auf Speichern unter.

• Gib der Datei den Namen index.HTML und klicke dann auf Speichern.

Warum wir die Datei so genannt haben, erkläre ich später. Jetzt wollen wir sie mit Inhalt füllen. Aber nur mit einigen wenigen Zeilen.

• Tippe also ein:‌

  <script>
  document.write("Hallo");
  </script>

• Dann speichere das Ganze – z.B. über Datei und Speichern oder mit Strg+S.

Und nun kommen wir zu dem, was du als Symbol auf dem Desktop sehen kannst:

• Doppelklicke auf das Symbol mit dem Namen index.html. ‌

Der Browser (mit dem du normalerweise im Internet surfst) öffnet sich und zeigt ein einfaches, aber nettes »Hallo«. Womit du dein erstes Programm geschafft hast – allerdings nicht in reinem JavaScript. Das ist ja die Sprache, um die es in diesem Buch eigentlich gehen soll. Lediglich die Zeile in der Mitte ist in JavaScript geschrieben, das Drumherum ist aber nötig, damit der Browser weiß, dass es um JavaScript geht.

Jeder Internet-Browser versteht die Sprache JavaScript, weil er einen eingebauten Interpreter für diese Sprache hat. Ein Interpreter‌ ist eine Art Dolmetscher. Allerdings »spricht« ein Browser erst mal nur HTML, eine andere Sprache, in der auch anders programmiert wird als in JavaScript.

‌Mit der einleitenden Zeile <script> wird dem Browser mitgeteilt, dass gleich etwas kommt, das in einer Scriptsprache, wie man JavaScript auch nennt, verfasst ist. Das abschließende </script> – mit vorgesetztem Schrägstrich – zeigt dem Browser, dass hier die JavaScript-Anweisungen enden.

Die einzige Zeile in JavaScript‌‌

document.write("Hallo");

bedeutet, dass in das Browserfenster etwas geschrieben werden soll.

Du kannst gerne mal das »Hallo« durch einen anderen (längeren) Text ersetzen, um zu sehen, wie das im Browser aussieht.

Visual Studio Code starten

Während der einfache Texteditor am Anfang ausreichen mag, wird er zunehmend unbequem, wenn wir größere Projekte gestalten wollen. Deshalb steigen wir an dieser Stelle um auf einen sogenannten Quelltext-Editor. Ich habe mich für Visual Studio Code‌ von Microsoft entschieden (mit dem man übrigens außer in JavaScript noch in vielen anderen Sprachen programmieren kann).

‌‌Bevor wir aber damit arbeiten können, muss Visual Studio Code erst installiert werden. Genaues erfährst du im Anhang A. Hier musst du dir von jemandem helfen lassen, wenn du dir das Einrichten nicht allein zutraust.

Das Allererste aber, was erledigt werden muss, ist das Erzeugen eines Ordners, in dem alle unsere JavaScript-Projekte gespeichert werden sollen. Ich schlage vor, ihn einfach Projekte zu nennen.

Nun können wir VS Code starten. Eine Möglichkeit ist diese:

• Doppelklicke auf das Desktop-Symbol mit dem Namen VS Code. Wenn es nicht vorhanden ist, öffne den Ordner, in dem du VS Code untergebracht hast, und doppelklicke mit der Maus auf das Symbol mit dem Namen Code.exe.

Je nach Computer kann es eine Weile dauern, bis VS Code geladen ist. Einige Zeit später landest du in einem Willkommen-Fenster.

‌Ganz oben kann man die Menüleiste erkennen. Von den Menüs wirst du wahrscheinlich diese vier am meisten benutzen:

• Über das File-Menü kannst du Dateien speichern, laden (öffnen), ausdrucken, neu erstellen oder VS Code beenden.

• Die Menüs Edit und Selection helfen dir bei der Bearbeitung deines Programmtextes, aber auch bei anderen Programmelementen. Außerdem kannst du dort bestimmte Arbeitsschritte rückgängig machen oder wiederherstellen.

• Über das Run-Menü sorgst du dafür, dass dein Projekt ausgeführt wird.

• Und das Help-Menü bietet dir vielfältige Hilfsinformationen (vor allem auf Englisch) an.

‌Und nun schauen wir uns mal unter der Menüleiste um. Lass dich durch den Inhalt dieses Fensters nicht verwirren:

Uns interessiert jetzt das, was (links oben) unter Start steht. Bevor wir eine neue Datei erstellen, will VS Code wissen, welchen Ordner wir für unser Programmprojekt ausgewählt haben.

• Klicke also auf Open folder.‌‌

• Im Dialogfenster suchst du nun den Unterordner Projekte (den du vorher erstellt hast).

• Klicke abschließend auf Ordner auswählen.

Das Aussehen des Fensters von VS Code hat sich nun ein wenig geändert:

Die nötigen Erweiterungen

‌‌‌‌Bevor wir jetzt eine neue Datei erzeugen, benötigen wir das passende Hilfsmittel, damit wir später von VS Code aus direkt den Browser starten können, in dem wir das JavaScript-Programm ausführen wollen.

• Klicke dazu oben in der Menüleiste auf Run und im sich öffnenden Menü ganz unten auf Install Additional Debuggers.

Es gibt da ein reichhaltiges Angebot. Für uns interessant sind nur die Erweiterungen für einen der Browser, die wir benutzen, das sind meistens Microsoft Edge, Google Chrome und Mozilla Firefox.‌‌‌

• Blättere dich durch das Angebot und suche den Browser aus, den du verwenden willst. Dann klicke dort auf Install.

Kurze Zeit später ist VS Code bereit, deine späteren Programme im entsprechenden Browser zu starten.

Und nun fangen wir endlich an mit unserem Projekt.

• Klicke unter Start auf New File.‌‌

Die neue Datei sollte nun gleich unter dem passenden Namen gespeichert werden, damit VS Code weiß, mit welcher Art von Sprache wir arbeiten wollen.

• Klicke im Menü auf File und dann auf Save As.‌

• Gib den Namen index.html ein und klicke dann auf Speichern.‌

Der steinige Weg zum zweiten Hallo

Und nun können wir unseren Programmtext eingeben (auch Quelltext genannt).

• Tippe am besten die gleichen Zeilen ein, die wir ganz zu Anfang verwendet haben.

  <script>
    document.write("Hallo");
  </script>

Wie du siehst, wird dein Text schön bunt dargestellt, und die mittlere Zeile ist eingerückt. Sieht doch schick aus! Doch darum geht es nicht, sondern der Quelltext‌ (der ja bei großen Programmen sehr lang werden kann) soll möglichst gut lesbar sein. Unter anderem, damit du Fehler schneller findest.

Und jetzt sollten wir das Ganze speichern und dann starten.

• Klicke auf File und Save oder benutze die Tastenkombination Strg+S.

• Dann klicke auf Run und auf Start Debugging. Du kannst auch die Taste F5 benutzen.‌

Nun musst du nur noch das »Environment« auswählen, womit die Erweiterung gemeint ist, die dafür sorgt, dass der passende Browser bedient wird.

• Klicke auf einen Eintrag deiner Wahl.‌

Doch es wird kein Browser gestartet. Stattdessen erscheint auf einmal fast erdrückend viel Text auf der Bildfläche.

‌Das ist der Inhalt der Datei launch.json‌. Sieht verwirrend aus, ist aber nötig, damit VS Code dein Projekt verwalten kann. Denn dort stehen einige Hinweise, die für den Programmstart über den Browser wichtig sind. Diese Datei wird von VS Code automatisch erzeugt.

• Lass erst mal alles so, wie es ist, und versuche dann einen Neustart über Run und Start Debugging.

Bei mir führte das zu diesem Ergebnis:

Was ist da los? Nichts anderes, als dass der Browser die angegebene Adresse nicht findet. Er versucht, eine mögliche Seite von dem Computer abzurufen, findet sie aber nicht. In diesem Fall müssen wir direkt den Pfad verwenden, an dem index.html zu finden ist. Bei mir liegt sie auf Laufwerk D: im Ordner JScript und dort im Unterordner Projekte.

Statt‌

http://localhost:8080

muss es bei mir heißen:

file:///D:/JScript/Projekte/index.html

file statt http heißt, dass es sich hier um eine Datei auf einem Datenträger des eigenen Computers handelt. Beachte, dass hinter file 3 (!) Schrägstriche stehen müssen. Solltest du ein anderes Laufwerk oder andere Ordner benutzen, dann musst du die Pfadangabe entsprechend anpassen.

Bei mir sieht die Datei launch.json nun so aus:

Dabei habe ich auch noch den Text hinter "name" angepasst.

• Ändere die url-Zeile in launch.json entsprechend, damit deine index-Datei gefunden werden kann.

• Wenn du willst, kannst du diese Datei speichern (musst du aber nicht, denn VS Code macht das üblicherweise automatisch).

Visual Studio Code beenden

‌Wir machen jetzt an dieser Stelle eine Verschnaufpause. Eigentlich ist alles so weit fertig für einen Programmlauf, aber den heben wir uns fürs nächste Kapitel auf. Hier sollst du erst noch erfahren, wie man die VS-Code-Umgebung verlässt und beendet. Dazu gibt es nicht nur einen Weg:

• Klicke auf File und ganz unten auf Exit. Oder du klickst auf das kleine X oben rechts in der Titelleiste.

Solltest du vorher noch etwas am Text geändert haben, dann wird das automatisch gespeichert.

Zusammenfassung

Nun hast du dein erstes Programm-Projekt fast geschafft. Mal sehen, was du von diesem Kapitel behalten hast. Da wären zuerst mal ein paar Optionen im Umgang mit VS Code:

Du kennst die Datei launch.json – ein bisschen. Du weißt, dass ein JavaScript-Programm einen HTML-Rahmen braucht, um in einem Browser zu laufen. Dazu kennst du ein paar Wortschatzbrocken, zum einen von HTML:

Zum anderen von JavaScript:

Ein paar Fragen ...

1. Muss ein Programm immer mit <script> und </script> eingerahmt werden?

2. Wofür ist die Datei launch.json wichtig?

... aber noch keine Aufgabe

Willkommen in JavaScript

Hier wollen wir endlich das vollenden, woran uns im letzten Kapitel die Verschnaufpause gehindert hat.

• Starte also VS Code gegebenenfalls neu und dich erwartet dein letztes Programm-Projekt. Falls nicht, kannst du es über File und Open File laden.

• Dann starte das Programm über Run/Start Debugging oder mit F5.

Und das Ergebnis müsste etwa so aussehen:‌

Sieht das nicht genauso aus wie ganz am Anfang des letzten Kapitels? Ja, stimmt. Natürlich reicht uns das nicht, also wollen wir dieses kleine Programm gleich erweitern. Diesmal soll erst mal kein Hallo erscheinen, sondern eine Eingabebox, in die du etwas eintippen kannst – z.B. deinen Namen. Mit dem wirst du anschließend begrüßt:

<script>
   var eingabe = window.prompt("Wer bist du?", "");
   document.write("Hallo, " + eingabe);
</script>

• Ändere den Quelltext in index.HTML entsprechend um. Nun starte das Programm und gib deinen Namen ein, danach klicke auf OK.

Und du bekommst ein nettes Hallo mit deinem Namen:‌

Nun wollen wir uns näher anschauen, was genau wir programmiert haben. Dabei konzentrieren wir uns nur auf die beiden Zeilen in der Mitte, denn nur die sind ja in JavaScript geschrieben:

var eingabe = window.prompt("Wer bist du?", "");
document.write("Hallo, " + eingabe);

Mit window.prompt‌‌ wird ein (kleines) Fenster geöffnet, wobei die Methode prompt bewirkt, dass dort ein Eingabefeld zur Verfügung steht. Nachdem du dort etwas eingetippt hast, muss der Computer sich das natürlich merken. Und dazu ist die Variable eingabe da. Darin wird dein Text gespeichert.

‌Und später, eine Zeile weiter, wird mit der dir schon bekannten Anweisung document.write zum einen der Text »Hallo« ausgegeben und direkt dahinter der Inhalt der Variablen eingabe. Wie du siehst, kann man zwei Elemente, die ausgegeben werden sollen, durch ein Plus (+) miteinander verknüpfen.

var zahl = 5;
let zahl = 5;

Variable ← Wert;

text = "Wer bist du?";

Man hätte das aktuelle Programm auch so gestalten können:

var text = "Wer bist du?";
var eingabe = window.prompt(text, "");
document.write("Hallo, " + eingabe);

Dann hätten wir eine Variable mehr. Aber das muss nicht sein, man sollte Variablen nur da einsetzen, wo sie wirklich gebraucht werden.

Hier wollen wir jetzt unser Programm etwas erweitern:

var eingabe = window.prompt("Wer bist du?","");
var antwort = window.prompt
("Hallo, " + eingabe + "! Und wie geht es?","");
document.write("Dir geht es also " + antwort);

• Tippe erst den oberen Quelltext ein, probiere ihn über Run und Start Debugging Module (oder F5) aus. Dann lass das Programm erneut laufen.

Zuerst erscheint die schon bekannte Eingabebox, in die du deinen Namen eingibst. In einer weiteren Box nennt der Computer dich beim Namen und fragt dich nach deinem Befinden.

Und zuletzt zeigt er, dass er deine Antwort verstanden hat:

"use strict";
zahl = 5;

var zahl = 5;

Die if-Struktur

Wenn du dieses Programm mehrmals laufen lässt und jeweils verschiedene Antworten eingibst, fällt dir auf, wie eintönig ein solches Gespräch werden kann. Denn ob du nun »gut« oder »schlecht« als Antwort gibst, dein Gegenüber erwidert immer so ziemlich das Gleiche:

Dir geht es also gut
Dir geht es also schlecht

Der Computer wiederholt also nur, was du gesagt hast. Würdest du antworten: »nur ums Geld«, oder einfach irgendwelche Zeichen eintippen, dann könnte seine Reaktion auch so aussehen:

Dir geht es also nur ums Geld
Dir geht es also *+!?qwertz

Es wird also Zeit, dass wir dem Computer zeigen, wie man richtig auf Antworten wie »gut« oder »schlecht« eingeht! Er soll also nicht einfach nur »Dir geht es also ...« sagen, sondern sich nach unserer Antwort richten. Also könnte seine Reaktion z.B. so aussehen:

‌Wie aber bringen wir das dem Computer bei? So etwas wie »wenn« müsste es doch in JavaScript geben. Übersetzen wir das einfach mal ins Englische (→ Hallo1):

if (antwort == "gut")
  document.write("Das freut mich!");
if (antwort == "schlecht")
  document.write("Das tut mir leid!");

Der Inhalt von antwort wird mit dem Text »gut« bzw. »schlecht« verglichen. Passt er, gibt es vom Computer auch die passende Antwort.

• Öffne nun die Datei index.html des letzten Kapitels.

• Nun erweitere den alten Quelltext. Vergiss nicht, dass ganz oben <script> und ganz unten </script> stehen muss!

• Dann starte das Programm; gib beim ersten Lauf »gut«, beim zweiten »schlecht« ein und beobachte, was passiert.

Wie gewünscht (oder wie es sich gehört), gibt der Computer nun eine passende Bemerkung auf deine Antwort.

‌‌‌Werfen wir gleich einen Blick auf den Operator, der da hinter der Variablen antwort steht: Im Gegensatz zum Zuweisungsoperator (=) kommt hier das Gleichheitszeichen doppelt vor:

antwort == "gut"
antwort == "schlecht"

‌Das ist ein Vergleichsoperator‌, der überprüft, ob beide Seiten genau gleich sind. Es kann leicht passieren, dass man das bei der Eingabe übersieht, was dann zu einer fehlerhaften Ausgabe führt:‌‌

if (antwort = "gut")
  document.write("Das freut mich!");
if (antwort = "schlecht")
  document.write("Das tut mir leid!");

Hier wird von VS Code kein Fehler gemeldet, aber du kriegst am Ende beide Antworten, egal was du eingibst.

Betrachten wir jetzt einmal genauer die Struktur, die dem Computer scheinbar ein bisschen Mitgefühl verleiht. Wie wird die Antwort ausgewertet?

Verallgemeinert heißt das:

Die Bedingung‌, das ist hier:

antwort == "gut"

oder auch:

antwort == "schlecht"

Im Anweisungsblock‌ steht diese eine Anweisung:

  document.write("Das freut mich!");

oder

  document.write("Das tut mir leid!")

Das Ganze nennt man if-Struktur oder Kontrollstruktur‌. Denn der Computer bekommt die Anweisung, etwas zu kontrollieren. Hier ist es das, was als antwort eingetippt wird. Die document.write-Zeilen gehören also mit zur if-Struktur.