Genießen Sie von Millionen von eBooks, Hörbüchern, Zeitschriften und mehr - mit einer kostenlosen Testversion

Nur $11.99/Monat nach der Testversion. Jederzeit kündbar.

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

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

Bewertung: 0 von 5 Sternen

()

Vorschau lesen

Über dieses E-Book

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.
SpracheDeutsch
Herausgeberdpunkt.verlag
Erscheinungsdatum16. Juli 2015
ISBN9783864917318
JavaScript kinderleicht!: Einfach programmieren lernen mit der Sprache des Web
Vorschau lesen

Ähnlich wie JavaScript kinderleicht!

Ähnliche E-Books

Ähnliche Artikel

Rezensionen für JavaScript kinderleicht!

Bewertung: 0 von 5 Sternen
0 Bewertungen

0 Bewertungen0 Rezensionen

Wie hat es Ihnen gefallen?

Zum Bewerten, tippen

Die Rezension muss mindestens 10 Wörter umfassen

    Buchvorschau

    JavaScript kinderleicht! - Nick Morgan

    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

    Gefällt Ihnen die Vorschau?
    Seite 1 von 1