JavaScript kinderleicht!: Einfach programmieren lernen mit der Sprache des Web

Von Nick Morgan

JavaScript ist die Programmiersprache des Internet, die geheime Zutat, die deine Lieblingssites so fantastisch macht und Online-Spiele zum Laufen bringt! "JavaScript kinderleicht" zeigt dir (und deinen Eltern) die Welt der Programmierung im Web.

Nick Morgan führt dich Schritt für Schritt durch die Grundlagen von JavaScript. Du experimentierst mit einzigartigen (und oft urkomischen) Beispielprogrammen, die du sofort in deinem Webbrowser ausprobieren kannst. Neue Begriffe werden erklärt; der Programmcode ist farbig dargestellt, strukturiert und mit Erklärungen versehen; witzige Abbildungen erhöhen den Lernspaß.

Du beginnst mit den Grundlagen, etwa mit Strings, Arrays und Schleifen, und gehst dann zu fortgeschrittenen Aufgaben über: Du entwickelst mit jQuery interaktive Elemente, lernst objektorientiert zu programmieren oder wie man auf Browser-Klicks reagiert. Schließlich programmierst du Spiele wie "Schatzsuche", "Hangman" und "Snake".

Du lernst auch, wie du

• Funktionen einsetzt und wie sie helfen, übersichtliche Programme zu schreiben,
• HTML schreibst und veränderst, um dynamische Webseiten zu entwickeln,
• deine Webseiten mithilfe des DOM und von jQuery auf Benutzereingaben reagieren lässt,
• mit dem Canvas-Element Grafiken zeichnest und animierst
• benutzergesteuerte Spiele mit Kollisionserkennung und Spielständen programmierst

Alle Kapitel bauen aufeinander auf. Die Programmieraufgaben am Ende jedes Kapitels fordern dich heraus und animieren dich, deine eigenen, tollen Programme zu schreiben.

• Sprache: Deutsch
• Herausgeber: dpunkt.verlag
• Erscheinungsdatum: 16. Juli 2015
• ISBN: 9783864917318

Buchvorschau

Pancake)

Vorwort

Über den Autor

Nick Morgan ist Webentwickler bei Twitter. Er liebt alle Programmiersprachen, hat aber eine besondere Schwäche für JavaScript. Nick und seine Verlobte leben mit ihrem flauschigen Hund Pancake in San Francisco. Seinen Blog findest du auf skilldrick.co.uk.

Über den Illustrator

Miran Lipovača ist der Autor des Buchs Learn You a Haskell for Great Good!. Seine Hobbys sind Boxen, Bassgitarre spielen und – natürlich – zeichnen. Er ist von tanzenden Skeletten und der Zahl 71 fasziniert; und wenn er durch Automatiktüren geht, tut er so, als würde er sie mit seinen Geisteskräften öffnen.

Über Den Fachlektor

Angus Croll ist der Autor des Buchs If Hemingway Wrote JavaScript, und er ist gleichermaßen begeistert von JavaScript und von Literatur. Er arbeitet beim Twitter-UI-Framework-Team und ist Coautor des Flight-Frameworks. Er schreibt den bekannten Blog JavaScript, JavaScript und referiert weltweit bei Konferenzen. Seine Tweets findest du auf @angustweets.

Dank

Ein großer Dank geht an meine fantastische Verlobte Philly – für ihre Ermutigung und Unterstützung in den letzten 18 Monaten. Ohne sie hätte ich es ehrlich nicht geschafft. Genauso danke ich Pancake, unserem Hund, der mir freundlicherweise erlaubte, ihn in meinen Codebeispielen zu nutzen.

Ich danke auch Angus, ohne den ich nicht hier in San Francisco wäre und dieses Buch schreiben würde. Angus empfahl mich im Jahr 2011 bei Twitter und 2013 schlug er mich Bill Pollock von No Starch Press für dieses Buch vor. Und als ob das nicht genug wäre, stimmte er auch zu, das Fachlektorat für dieses Buch zu übernehmen. Dabei fing er eine ganze Menge JavaScript-Schnitzer ab.

Ein Dankeschön auch an Bill Pollock, Seph Kramer, Riley Hoffman, Tyler Ortman und alle bei No Starch Press, die mich mich geduldig berieten, während ich dieses Buch schrieb. Besonders möchte ich mich bei Bill und Seph bedanken, die meine Texte in ihre jetzige Form brachten.

Ein weiterer Dank geht an meine jungen Leser River Bradley, Damien Champ and Alex Chu, die mir zu den frühen PDFs ein großartiges Feedback lieferten.

Zum Schluss möchte ich Miran Lipovača danken. Seit Jahren bin ich ein Fan von Miran – sein Buch Learn You a Haskell for Great Good ist eines meiner Lieblings-Programmierbücher und seine Illustrationen sind fantastisch. Als ich erfuhr, dass er mein Buch illustrieren würde, wurde ein Traum wahr. Seine Bilder für dieses Buch sind besser, als ich es mir jemals vorstellen konnte; und es ist mir eine große Ehre, dass ich mit ihm zusammenarbeiten durfte.

Inhaltsübersicht

             Einleitung

Teil I     Grundlagen

1         Was ist JavaScript?

2         Datentypen und Variablen

3         Arrays

4         Objekte

5         HTML-Grundlagen

6         Bedingte Anweisungen und Schleifen

7         Ein Galgenmännchen-Spiel programmieren

8         Funktionen

Teil II    Javascript für Fortgeschrittene

9         Das DOM und jQuery

10       Interaktive Programmierung

11       Schatzsuche!

12       Objektorientierte Programmierung

Teil III   Der Canvas

13       Das canvas-Element

14       Bewegte Objekte auf dem Canvas erzeugen

15       Animationen mit der Tastatur steuern

16       Das Spiel »Snake« programmieren – Teil 1

17       Das Spiel »Snake« Programmieren – Teil 2

Anhang

A         Nachwort – So geht es weiter

B         Glossar

            Index

Inhaltsverzeichnis

         Einleitung

         Für wen ist dieses Buch gedacht?

         So solltest du das Buch lesen

         Was findest du in diesem Buch?

         Viel Spass!

Teil I         Grundlagen

1        Was ist JavaScript?

1.1     Eine Begegnung mit JavaScript

1.2     Warum solltest du gerade JavaScript lernen?

1.3      JavaScript-Code schreiben

1.4      Die Struktur eines JavaScript-Programms

Syntax

Kommentare

1.5      Das hast du gelernt

2         Datentypen und Variablen

2.1      Zahlen und Operatoren

2.2      Variablen

Variablennamen

Neue Variablen ausrechnen

Hoch- und runterzählen

+= (plus-gleich) und –= (minus-gleich)

2.3      Strings

Strings zusammenfügen

Die Länge eines Strings herausfinden

Ein einzelnes Zeichen aus einem String herausholen

Strings zerschneiden

Strings in Gross- oder Kleinbuchstaben umwandeln

2.4      Boolesche Werte

Logische Operatoren

Zahlen mit booleschen Werten vergleichen

2.5      undefined und null

2.6      Das hast du gelernt

3         Arrays

3.1      Warum solltest du dich mit Arrays beschäftigen?

3.2      Ein Array erzeugen

3.3      Auf die Elemente des Arrays zugreifen

3.4      Elemente im Array definieren oder ändern

3.5      Datentypen in einem Array mischen

3.6      Mit Arrays arbeiten

Die Länge eines Arrays herausfinden

Elemente zum Array hinzufügen

Elemente aus einem Array entfernen

Arrays zusammenfügen

Den Index eines Elements in einem Array suchen

Ein Array in einen String umwandeln

3.7      Wozu sind Arrays gut?

Nach Hause finden

Entscheidungen treffen

Einen Generator für zufällige Beleidungen erzeugen

3.8      Das hast du gelernt

4         Objekte

4.1      Objekte erzeugen

Schlüssel ohne Anführungszeichen

4.2      Auf Werte von Objekten zugreifen

4.3      Werte zu Objekten hinzufügen

Schlüssel in Punktschreibweise hinzufügen

4.4      Arrays und Objekte kombinieren

Ein Array voller Freunde

4.5      Objekte in der Konsole untersuchen

4.6      Sinnvolle Verwendungen für Objekte

Verliehenes Geld verwalten

Informationen über Filme abspeichern

4.7      Das hast du gelernt

5         HTML-Grundlagen

5.1      Texteditoren

5.2      Unser erstes HTML-Dokument

5.3      Tags und Elemente

Überschriftelemente

Das p-Element

Leerraum in HTML und Blockelemente

Inline-Elemente

5.4      Ein komplettes HTML-Dokument

5.5      HTML-Hierarchie

5.6      Links zur HTML-Seite hinzufügen

Link-Attribute

Title-Attribute

5.7      Das hast du gelernt

6         Bedingte Anweisungen und Schleifen

6.1      JavaScript in HTML einbetten

6.2      Bedingte Anweisungen

if-Anweisungen

if…else-Anweisungen

if…else-Anweisungen verketten

6.3      Schleifen

while-Schleifen

for-Schleifen

6.4      Das hast du gelernt

7         Ein Galgenmännchen-Spiel programmieren

7.1      Mit einem Spieler kommunizieren

Ein Prompt erzeugen

Mit der Funktion confirm eine Ja- oder Nein-Frage stellen

Den Spieler mit Alerts informieren

Warum solltest du alert statt console.log verwenden?

7.2      Das Spiel entwickeln

Das Spiel mit Pseudocode entwickeln

Den Zustand des Worts speichern

Die Schleife entwickeln

7.3      Das Spiel programmieren

Ein Zufallswort auswählen

Das Antwort-Array erzeugen

Die Spielschleife programmieren

Das Spiel beenden

7.4      Der Spielcode

7.5      Das hast du gelernt

8         Funktionen

8.1      Der Grundaufbau einer Funktion

8.2      Eine einfache Funktion erstellen

8.3      Eine Funktion aufrufen

8.4      Argumente an Funktionen übergeben

Katzengesichter zeichnen!

Mehrere Argumente an eine Funktion übergeben

8.5      Werte aus Funktionen zurückgeben

8.6      Funktionsaufrufe als Werte verwenden

8.7      Code vereinfachen mit Funktionen

Eine Funktion zum Herauspicken eines zufälligen Worts

Ein Generator für zufällige Beleidigungen

Aus dem Beleidigungsgenerator eine Funktion machen

8.8      Eine Funktion vorzeitig verlassen mit return

8.9      Mehrmals return anstelle von if...else-Anweisungen verwenden

8.10    Das hast du gelernt

Teil II       Javascript für Fortgeschrittene

9         Das DOM und jQuery

9.1      DOM-Elemente auswählen

Elemente mit id identifizieren

Ein Element mit getElementById auswählen

Den Überschrifttext mithilfe des DOM ersetzen

9.2      jQuery und die Arbeit mit dem DOM-Baum

jQuery in deine HTML-Seite laden

Den Überschrifttext mit jQuery ersetzen

9.3      Neue Elemente mit jQuery erzeugen

9.4      Elemente mit jQuery animieren

9.5      jQuery-Animationen verketten

9.6      Das hast du gelernt

10      Interaktive Programmierung

10.1    Codeausführung mit setTimeout verzögern

10.2    Ein Timeout abbrechen

10.3    Code mehrfach aufrufen mit setInterval

10.4    Elemente mit setInterval animieren

10.5    Auf Benutzereingaben reagieren

Auf Klicks reagieren

Das mousemove-Ereignis

10.6    Das hast du gelernt

11      Schatzsuche!

11.1    Das Spiel entwickeln

11.2    Die Webseite in HTML erzeugen

11.3    Eine zufällige Stelle für den Schatz auswählen

Zufallszahlen auswählen

Die Schatzkoordinaten festlegen

11.4    Der Klick-Handler

Klicks zählen

Die Entfernung zwischen Klick und Schatz berechnen

Den Satz des Pythagoras verwenden

Dem Spieler mitteilen, wie nahe er am Ziel ist

Prüfen, ob der Spieler gewonnen hat

11.5    Alles zusammensetzen

11.6    Das hast du gelernt

12      Objektorientierte Programmierung

12.1    Ein einfaches Objekt

12.2    Methoden zu Objekten hinzufügen

Das Schlüsselwort this verwenden

Eine gemeinsame Methode in mehreren Objekten verwenden

12.3    Objekte erzeugen mit Konstruktoren

Aufbau des Konstruktors

Einen Auto-Konstruktor erzeugen

12.4    Die Autos zeichnen

12.5    Die Funktion zeichneAuto testen

12.6    Prototypen für massgeschneiderte Objekte

Dem Auto-Prototyp eine zeichnen-Methode hinzufügen

Eine schiebeNachRechts-Methode hinzufügen

Die Methoden Links, Hoch und Runter hinzufügen

12.7    Das hast du gelernt

Teil III      Der Canvas

13      Das canvas-Element

13.1    Einen Canvas erzeugen

13.2    Auf dem Canvas zeichnen

Das canvas-Element auswählen und speichern

Den Zeichenbereich erstellen

Ein Quadrat zeichnen

Mehrere Quadrate zeichnen

13.3    Die Zeichenfarbe ändern

13.4    Rechteckige Umrisse zeichnen

13.5    Linien oder Pfade zeichnen

13.6    Gefüllte Pfade

13.7    Bögen und Kreise zeichnen

Einen Viertelkreis oder einen Bogen zeichnen

Einen Halbkreis zeichnen

Einen vollen Kreis zeichnen

13.8    Viele Kreise mit einer Funktion zeichnen

13.9    Das hast du gelernt

14      Bewegte Objekte auf dem Canvas erzeugen

14.1    Ein Quadrat animieren

Den Canvas leeren

Das Quadrat zeichnen

Die Position ändern

Die Animation im Browser betrachten

14.2    Die Grösse eines Quadrats animieren

14.3    Eine Zufallsbiene

Eine neue Kreisfunktion

Die Biene zeichnen

Die Koordinaten der Biene ändern

Die Biene animieren

14.4    Einen Ball hüpfen lassen!

Der Ball-Konstruktor

Den Ball zeichnen

Den Ball bewegen

Den Ball springen lassen

Den Ball animieren

14.5    Das hast du gelernt

15      Animationen mit der Tastatur steuern

15.1    Tastaturereignisse

Die HTML-Datei einrichten

Den keydown-Event-Handler hinzufügen

Tastencodes mithilfe eines Objekts in Namen konvertieren

15.2    Einen Ball mit der Tastatur bewegen

Den Canvas einrichten

Die Kreisfunktion definieren

Den Ball-Konstruktor erzeugen

Die Methode move definieren

Die Methode draw definieren

Die Methode setDirection erzeugen

Reaktion auf die Tastatur

Den Ball animieren

15.3    Alles zusammenbauen

15.4    Den Code ausführen

15.5    Das hast du gelernt

16      Das Spiel »Snake« programmieren – Teil 1

16.1    Das Spiel

16.2    Die Spielstruktur

Das Spiel mit setInterval animieren

Die Spielobjekte erzeugen

Die Tastatursteuerung einrichten

16.3    Das Spiel einrichten

Den HTML-Code erzeugen

Den Canvas und die Variablen canvas, ctx, breite und hoehe definieren

Den Canvas in Blöcke unterteilen

Die Variable für den Punktestand definieren

16.4    Den Rahmen zeichnen

16.5    Den Punktestand anzeigen

Die Textgrundlinie einrichten

Grösse und Schriftart festlegen

Die Funktion punktstandZeichnen schreiben

16.6    Das Spiel beenden

16.7    Das hast du gelernt

17      Das Spiel »Snake« Programmieren – Teil 2

17.1    Den Block-Konstruktor erstellen

Die Methode quadratZeichnen hinzufügen

Die Methode kreisZeichnen hinzufügen

Die Methode equal hinzufügen

17.2    Die Schlange erzeugen

Den Schlangen-Konstruktor schreiben

Die Schlange zeichnen

17.3    Die Schlange bewegen

Die Methode move hinzufügen

Die Methode kollisionCheck hinzufügen

17.4    Die Richtung der Schlange mit der Tastatur festlegen

Den keydown-Event-Handler hinzufügen

Die Methode setDirection hinzufügen

17.5    Den Apfel erzeugen

Den Apfel-Konstruktor schreiben

Den Apfel zeichnen

Den Apfel verschieben

17.6    Alles zusammensetzen

17.7    Das hast du gelernt

Anhang

A       Nachwort – So geht es weiter

A.1    Mehr JavaScript

A.2    Webprogrammierung

HTML

CSS

Serverseitiger Code mit Node.js

A.3    Grafische Programmierung

Canvas

SVG mit Raphaël

A.4    3D-Programmierung

A.5    Roboter programmieren

A.6    Audioprogrammierung

A.7    Spieleprogrammierung

A.8    Deinen Code per JSFiddle teilen

B       Glossar

          Index

Einleitung

Willkommen zu »JavaScript – kinderleicht!«. In diesem Buch lernst du, wie du mit JavaScript, der Sprache des Web, programmierst. Noch besser ist aber, dass du selbst ein Programmierer wirst – jemand, der Computer nicht einfach nur nutzt, sondern sie auch steuert. Sobald du programmieren kannst, werden Computer deinem Willen folgen und tun, was du ihnen sagst!

JavaScript ist eine fantastische Programmiersprache, weil sie überall im Einsatz ist. Webbrowser wie Chrome, Firefox und Internet Explorer arbeiten mit JavaScript. Mit JavaScript können Webprogrammierer einfache Webseiten in komplette interaktive Anwendungen und Spiele verwandeln.

Mit JavaScript kannst du jedoch noch mehr machen, als nur Webseiten zu entwickeln. Wenn JavaScript auf einem Webserver läuft, kannst du damit ganze Websites erzeugen. Sogar Roboter und andere Hardware können damit gesteuert werden!

Für wen ist dieses Buch gedacht?

Dieses Buch eignet sich für alle, die JavaScript lernen möchten oder zum ersten Mal programmieren. Es ist kinderfreundlich geschrieben, kann aber auch Einsteigern jedes Alters als erstes Programmierbuch dienen.

Mit diesem Buch baust du deine JavaScript-Kenntnisse Schritt für Schritt auf. Du beginnst mit den einfachen JavaScript-Datentypen und arbeitest dich zu komplexen Typen, Kontrollstrukturen und Funktionen vor. Danach lernst du, wie dein Code auf die Maus oder die Tastatur reagiert. Schließlich erfährst du, was es mit dem Canvas-Element auf sich hat: Du kannst mit JavaScript alles zeichnen und animieren, was du dir nur vorstellen kannst!

Nebenher programmierst du ein paar Spiele, um deine Programmierkenntnisse zu üben und das Gelernte in die Praxis umzusetzen.

So solltest du das Buch lesen

Zuallererst: Lies es in der richtigen Reihenfolge! Das klingt vielleicht ziemlich selbstverständlich; aber viele Leute wollen sich möglichst schnell mit den amüsanten Dingen beschäftigen, zum Beispiel der Programmierung von Spielen. Jedes Kapitel baut jedoch darauf auf, was in den vorherigen Kapiteln besprochen wurde. Wenn du also von vorne beginnst, tust du dich leichter, wenn du schließlich zu den Spielen kommst.

Programmiersprachen sind wie gesprochene Sprachen: Du musst Grammatik und Vokabeln lernen – und das braucht Zeit. Die einzige Möglichkeit, dich hier zu verbessern, besteht darin, eine Menge Code zu schreiben (und zu lesen). Je mehr JavaScript du schreibst, desto eher werden bestimmte Teile der Sprache zu deiner zweiten Natur und schließlich kannst du JavaScript flüssig schreiben.

Ich empfehle dir, beim Lesen den Code einzugeben und zu testen. Wenn dir nicht ganz klar ist, was vor sich geht, probiere kleine Änderungen aus und prüfe, welche Auswirkungen sie haben. Wenn die Änderungen unerwartete Auswirkungen haben, versuche herauszufinden, woran es liegt.

Vor allem solltest du die Abschnitte »Probiere es selbst!« und »Programmieraufgaben« durcharbeiten. Es ist ein wichtiger erster Schritt, den Code in diesem Buch einzugeben. Wenn du aber erst einmal deinen eigenen Code schreibst, werden sich deine Programmierkenntnisse vertiefen. Wenn du eine Aufgabe interessant findest, dann bleibe dran! Denke dir eigene Aufgaben aus, um noch weitere Programme auf den von dir bereits geschriebenen aufzubauen.

Beispiellösungen für die Programmieraufgaben (sowie die Codedateien für die Spiele und anderen Beispiele) findest du auf http://nostarch.com/javascriptforkids/. Am besten siehst du dir die Lösungen erst dann an, wenn du eine Aufgabe gelöst hast. Dann kannst du deinen Ansatz mit meinem vergleichen. Auch wenn du steckenbleibst, kannst du dir die Lösung ansehen. Denke aber daran, dass es sich lediglich um Beispiel-Lösungen handelt – es gibt oft sehr viele verschiedene Möglichkeiten, um in JavaScript ein bestimmtes Ziel zu erreichen. Wundere dich also nicht, wenn du schließlich eine komplett andere Lösung gefunden hast als ich!

Wenn du auf ein Wort stößt und nicht weißt, was es bedeutet, schlage im Glossar hinten im Buch nach. Dieses enthält Definitionen für viele der in diesem Buch benutzten Programmierbegriffe.

Was findest du in diesem Buch?

Kapitel 1 bietet eine Kurzeinführung in JavaScript und zeigt dir, wie du in Google Chrome JavaScript schreibst.

Kapitel 2 erläutert Variablen und die grundlegenden JavaScript-Datentypen: Zahlen, Strings und boolesche Werte.

In Kapitel 3 dreht sich alles um Arrays, in denen man Listen mit Daten speichern kann.

In Kapitel 4 geht es um Objekte, die Schlüssel-Wert-Paare enthalten.

Kapitel 5 ist eine Einführung in HTML, die Sprache, die zum Erzeugen von Webseiten verwendet wird.

Kapitel 6 zeigt dir, wie du mit if-Anweisungen, for-Schleifen und anderen Kontrollstrukturen mehr Einfluss auf deinen Code nehmen kannst.

Kapitel 7 fügt alles bisher Gelernte zusammen: Wir erzeugen ein einfaches Galgenmännchen-Spiel.

Kapitel 8 zeigt dir, wie du deine eigenen Funktionen schreibst, mit denen du Codeblöcke gruppieren und wiederverwenden kannst.

Kapitel 9 enthält eine Einführung in jQuery, ein Werkzeug, das dir die Kontrolle über Webseiten mit JavaScript erleichtert.

Kapitel 10 zeigt, wie dein Code mit Zeitverzögerungen, Intervallen und Event-Handlern noch interaktiver wird.

In Kapitel 11 nutzen wir Funktionen, jQuery und Event-Handler, um das Spiel »Schatzsuche« zu programmieren.

Kapitel 12 bringt dir einen Programmierstil namens »Objektorientierte Programmierung« nahe.

Kapitel 13 erläutert dir das canvas-Element, mit dem du in JavaScript Grafiken auf einer Webseite zeichnen kannst.

Kapitel 14 baut auf den in Kapitel 10 erläuterten Techniken auf. Du lernst, wie du mit canvas Animationen erzeugen kannst.

Kapitel 15 zeigt dir, wie du diese canvas-Animationen mit der Tastatur kontrollierst.

In den Kapitel 16 und 17 programmierst du ein komplettes Snake-Spiel und verwendest hierbei alles, was du in den vorigen 15 Kapiteln erlernt hast!

Das Nachwort vermittelt dir ein paar Ideen, wie du noch mehr über Programmierung lernen kannst.

Das Glossar enthält Erläuterungen für viele der neuen Begriffe, denen du begegnen wirst.

Viel Spass!

Zuletzt das Wichtigste: Programmieren kann genau wie Zeichnen oder Spielen eine unterhaltsame und kreative Aktivität sein (tatsächlich wirst du in diesem Buch viel mit JavaScript zeichnen und spielen). Sobald du den Dreh heraus hast, wie man Code schreibt, ist deine Fantasie die einzige Grenze. Willkommen in der wunderbaren Welt der Computerprogrammierung – ich wünsche dir eine schöne Zeit damit!

Teil I

Grundlagen

1

Was ist JavaScript?

Computer sind enorm leistungsfähige Maschinen. Sie können die erstaunlichsten Dinge, zum Beispiel Schach spielen, Tausende von Webseiten zur Verfügung stellen oder Millionen komplexer Berechnungen in ein paar Sekunden ausführen. Aber tief drinnen sind Computer, ehrlich gesagt, ziemlich einfältig. Sie können nur genau das, was wir Menschen ihnen befehlen. Was ein Computer tun soll, sagen wir ihm mithilfe eines Computerprogramms. Das ist einfach eine Abfolge von Anweisungen, die der Computer abarbeitet. Ohne Programme könnten Computer gar nichts!

1.1 Eine Begegnung mit JavaScript

Es kommt sogar noch schlimmer: Computer verstehen weder Deutsch noch Englisch noch irgendeine andere gesprochene Sprache. Computerprogramme sind in Programmiersprachen wie etwa JavaScript geschrieben. Auch wenn du noch nie etwas von JavaScript gehört hast, hast du es ganz sicher schon benutzt. Mit der Programmiersprache JavaScript werden Programme geschrieben, die auf Webseiten laufen. JavaScript kann kontrollieren, wie eine Webseite aussieht oder wie sie reagiert, sobald der Benutzer auf einen Button klickt oder die Maus bewegt.

Sites wie Gmail, Facebook und Twitter ermöglichen mit JavaScript den Versand von E-Mails, das Posten von Kommentaren oder die Suche nach Websites. Wenn du beispielsweise auf Twitter Tweets liest, dann herunterscrollst und am Ende der Seite weitere Tweets angezeigt bekommst – dann siehst du JavaScript in Aktion.

Du brauchst nur ein paar Websites zu besuchen, damit dir klar wird, warum JavaScript so spannend ist.

Mit JavaScript kannst du Musik abspielen und fantastische visuelle Effekte erzeugen. Zum Beispiel fliegst du auf http://lights.helloenjoy.com durch ein interaktives Musikvideo, das HelloEnjoy für Ellie Gouldings Song »Lights« programmiert hat (siehe Abb. 1–1).

Mit JavaScript kannst du Werkzeuge erstellen, mit denen andere Anwender ihre eigenen Kunstwerke gestalten können. Patatap ist eine Art virtuelle »Drum machine« (http://www.patatap.com), die alle Arten von tollen Sounds erzeugt – und dabei auch gleich coole Animationen. Du siehst sie in Abbildung 1–2.

Abb. 1–1 Im Musikvideo »Lights« von HelloEnjoy kontrollierst du den funkelnden Cursor.

Abb. 1–2 Drücke auf Patatap einfach verschiedene Tasten, um unterschiedliche Geräusche hervorzubringen!

Mit JavaScript kannst du witzige Spiele spielen. CubeSlam ist eine 3D-Variante des Spieleklassikers Pong (https://www.cubeslam.com/). Spiele gegen einen Freund oder gegen einen computergenerierten Bären (siehe Abb. 1–3)!

Abb. 1–3 Das Spiel CubeSlam ist komplett in JavaScript programmiert.

1.2 Warum solltest du gerade JavaScript lernen?

JavaScript ist nicht die einzige Programmiersprache – in Wirklichkeit gibt es Hunderte von Programmiersprachen. Es gibt aber viele Gründe, gerade JavaScript zu lernen. Zum einen ist es viel einfacher (und unterhaltsamer) zu erlernen als viele andere Programmiersprachen. Das Beste ist aber vielleicht, dass du nur einen Webbrowser wie den Internet Explorer, Mozilla Firefox oder Google Chrome brauchst, um JavaScript-Programme zu schreiben und auszuführen. Jeder Webbrowser hat einen JavaScript-Interpreter, der JavaScript-Programme lesen kann.

Sobald du ein JavaScript-Programm geschrieben hast, kannst du deinen Freunden einen Link dazu schicken, sodass sie es ebenfalls im Webbrowser auf ihrem eigenen Computer ausführen können (siehe Abschnitt »Deinen Code per JSFiddle teilen« auf Seite 271).

1.3 JavaScript-Code schreiben

Schreiben wir einfach einmal in Google Chrome (http://www.google.com/chrome/) ein wenig einfachen JavaScript-Code. Falls du diesen Browser noch nicht hast, installierst du ihn auf deinem Computer. Öffne ihn dann und gib about:blank in die Adresszeile ein. Wenn du jetzt Enter drückst, siehst du eine leere Seite (wie in Abb. 1–4).

Zunächst programmieren wir in der JavaScript-Konsole von Chrome. Das ist eine versteckte Möglichkeit, mit der Programmierer kurze JavaScript-Programme testen können. Unter Microsoft Windows oder Linux hältst du die Tasten Strg und Umschalt gedrückt und drückst J. Am Mac hältst du die Befehlsund die Options-Taste gedrückt und drückst ebenfalls J.

Wenn du alles richtig gemacht hast, siehst du jetzt eine leere Webseite mit einem blinkenden Cursor (|) neben einer spitzen Klammer (>), wie in Abbildung 1–4 gezeigt. Nun kannst du JavaScript schreiben!

Hinweis

Die Chrome-Konsole gibt deinem Code verschiedene Farben. Zum Beispiel erscheinen Texteingaben blau, die Ausgabe erhält je nach Typ unterschiedliche Farben. Wenn wir in diesem Buch die Konsole verwenden, siehst du im Codetext ähnliche Farben.

Abb. 1–4 Die JavaScript-Konsole von Google Chrome

Wenn du an der Cursorposition Code eintippst und dann die Enter-Taste drückst, führt JavaScript deinen Code aus und gibt das Ergebnis (falls es ein solches gibt) in der nächsten Zeile aus. Gib beispielsweise Folgendes in die Konsole ein:

3 + 4;

Jetzt drückst du Enter. JavaScript gibt die Antwort (7) auf diese einfache Addition in der folgenden Zeile aus:

3 + 4;

7

Das war ziemlich einfach. JavaScript ist