JavaScript kinderleicht!

Einfach programmieren lernen mit der Sprache des Web

Nick Morgan

• Verlag: dpunkt
• Jahr: 2015
• ISBN:
  9783864917318
• Thema: Computer Science
• Thema: Programming in JavaScript

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 programmierstAlle Kapitel bauen aufeinander auf. Die Programmieraufgaben am Ende jedes Kapitels fordern dich heraus und animieren dich, deine eigenen, tollen Programme zu schreiben.

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...

Inhaltsverzeichnis

• Cover
• Titel
• Impressum
• Vorwort
• Inhaltsverzeichnis
• Einleitung
• Teil I Grundlagen
• Teil II Javascript für Fortgeschrittene
• Teil III Der Canvas
• Anhang
• Index