JavaScript ist die Programmiersprache des Internet, die geheime Zutat, die deine Lieblingssites so fantastisch macht und Online-Spiele zum Laufen bringt! Mit "JavaScript kinderleicht" erlernst du anhand von Schritt-für-Schritt-Anleitungen und witzigen Abbildungen ganz entspannt und locker das Einmaleins der Programmierung.
Du beginnst mit den Grundlagen, zum Beispiel der Arbeit mit Strings, Arrays und Schleifen, und gehst dann zu fortgeschrittenen Aufgaben über: Zum Beispiel entwickelst du mit jQuery interaktive Elemente oder zeichnest mit Canvas eigene Grafiken. Dabei schreibst du Spiele wie "Schatzsuche", "Hangman" und "Snake".
Alle Kapitel bauen aufeinander auf. Die Programmieraufgaben am Ende jedes Kapitels trainieren dein Gehirn und animieren dich, deine eigenen, tollen Programme zu schreiben.
Quelle: Verlagstext
/ AUS DEM INHALT: / / /
Inhaltsverzeichnis:
Einleitung 1
Teil 0 ©pooffudDeagera 5
1 Was ist JavaScript? 7
2 Datentypen und Variablen 15
3 Arrays 39
4 Objekte 59
5 HTML-Grundlagen 73
6 Bedingte Anweisungen und Schleifen 85
7 Ein Galgenmännchen-Spiel programmieren 99
8 Funktionen 115
Teil OB J)csveis€e>iß& Gür FepftgesefoFsfefeeune 131
9 Das DOM und jOuery 133
10 Interaktive Programmierung 143
11 Schatzsuche! 153
12 Objehtorientierte Programmierung 165
Teil III Der Canvas 179
13 Das canvas-Element 181
14 Bewegte Objekte auf dem Canvas erzeugen 197
15 Animationen mit der Tastatur steuern 213
16 Das Spiel "Snabe" programmieren - Teil 1 227
17 Das Spiel "Snabe" Programmieren - Teil 2 241
Anhang 265
A Nachwort - So geht es weiter 267
B Glossar 273
Index 277
Einleitung 1
Für wen ist dieses Buch gedacht? 1
So solltest du das Buch lesen 2
Was findest du in diesem Buch? 3
Viel Spass! 4
Teil i Grundlagen
1 Was ist JavaScript? 7
1.1 Eine Begegnung mit JavaScript 7
1.2 Warum solltest du gerade JavaScript lernen? 10
1.3 JavaScript-Code schreiben 10
1.4 Die Struktur eines JavaScript-Programms 11
Syntax 13
Kommentare 13
1.5 Das hast du gelernt 14
2 Datentypen und Variablen 15
2.1 Zahlen und Operatoren 16
2.2 Variablen 18
Variablennamen 20
Neue Variablen ausrechnen 20
Hoch- und runterzählen 22
+= (plus-gleich) und -= (minus-gleich) 23
2.3 Strings 24
Strings zusammenfügen 25
Die Länge eines Strings herausfinden 26
Ein einzelnes Zeichen aus einem String herausholen 27
Strings zerschneiden 27
Strings in Gross- oder Kleinbuchstaben umwandeln 28
2.4 Boolesche Werte 30
Logische Operatoren 30
Zahlen mit booleschen Werten vergleichen 33
2.5 undefined und null 37
2.6 Das hast du gelernt 38
3 Ärra ys 39
3.1 Warum solltest du dich mit Arrays beschäftigen? 39
3.2 Ein Array erzeugen 40
3.3 Auf die Elemente des Arrays zugreifen 41
3.4 Elemente im Array definieren oder ändern 42
3.5 Datentypen in einem Array mischen 43
3.6 Mit Arrays arbeiten 44
Die Länge eines Arrays herausfinden 44
Elemente zum Array hinzufügen 45
Elemente aus einem Array entfernen 46
Arrays zusammenfügen 48
Den Index eines Elements in einem Array suchen 50
Ein Array in einen String umwandeln 51
3.7 Wozu sind Arrays gut? 52
Nach Hause finden 52
Entscheidungen treffen 54
Einen Generator für zufällige Beleidungen erzeugen 56
3.8 Das hast du gelernt 58
4 Objekte 59
4.1 Objekte erzeugen 59
Schlüssel ohne Anführungszeichen 61
4.2 Auf Werte von Objekten zugreifen 61
4.3 Werte zu Objekten hinzufügen 62
Schlüssel in Punktschreibweise hinzufügen 63
4.4 Arrays und Objekte kombinieren 64
Ein Array voller Freunde 64
4.5 Objekte in der Konsole untersuchen 66
4.6 Sinnvolle Verwendungen für Objekte 67
Verliehenes Geld verwalten 67
Informationen über Filme abspeichern 68
4.7 Das hast du gelernt 70
5 HTML-Grundlagen 73
5.1 Texteditoren 74
5.2 Unser erstes HTML-Dokument 74
5.3 Tags und Elemente 75
Überschriftelemente 75
Das p-Element 76
Leerraum in HTML und Blockelemente 77
Inline-Elemente 78
5.4 Ein komplettes HTML-Dokument 78
5.5 HTML-Hierarchie 80
5.6 Links zur HTML-Seite hinzufügen 81
Link-Attribute 82
Title-Attribute 82
5.7 Das hast du gelernt 83
6 Bedingte Anweisungen und Schleifen 85
6.1 JavaScript in HTML einbetten 85
6.2 Bedingte Anweisungen 87
i f-Anweisungen 87
i f...el se-Anweisungen 88
i f...el se-Anweisungen verketten 89
6.3 Schleifen 91
whi 1 e-Schleifen 91
for^Schleifen 93
6.4 Das hast du gelernt 97
7 Ein Galgenmännchen-Spiel programmieren 99
7.1 Mit einem Spieler kommunizieren 100
Ein Prompt erzeugen 100
Mit der Funktion confi rm eine Ja- oder Nein-Frage stellen 101
Den Spieler mit Alerts informieren 102
Warum solltest du alert statt console.log verwenden? 103
7.2 Das Spiel entwickeln 103
Das Spiel mit Pseudocode entwickeln 103
Den Zustand des Worts speichern 104
Die Schleife entwickeln 105
7.3 Das Spiel programmieren 106
Ein Zufallswort auswählen 106
Das Antwort-Array erzeugen 106
Die Spielschleife programmieren 107
Das Spiel beenden 110
7.4 Der Spielcode 110
7.5 Das hast du gelernt 112
8 Funktionen 115
8.1 Der Grundaufbau einer Funktion 115
8.2 Eine einfache Funktion erstellen 116
8.3 Eine Funktion aufrufen 116
8.4 Argumente an Funktionen übergeben 117
Katzengesichter zeichnen! 118
Mehrere Argumente an eine Funktion übergeben 119
8.5 Werte aus Funktionen zurückgeben 120
8.6 Funktionsaufrufe als Werte verwenden 121
8.7 Code vereinfachen mit Funktionen 122
Eine Funktion zum Herauspicken eines zufälligen Worts 122
Ein Generator für zufällige Beleidigungen 123
Aus dem Beleidigungsgenerator eine Funktion machen 124
8.8 Eine Funktion vorzeitig verlassen mit return 125
8.9 Mehrmals return anstelle von if..else-Anweisungen verwenden 126
8.10 Das hast du gelernt 127
Teil II Javascript für Fortgeschrittene
9 Das DOM und jQuery 133
9.1 DOM-Elemente auswählen 134
Elemente mit id identifizieren 134
Ein Element mit getElementByld auswählen 134
Den Überschrifttext mithilfe des DOM ersetzen 135
9.2 jQuery und die Arbeit mit dem DOM-Baum 136
jQuery in deine HTML-Seite laden 137
Den Überschrifttext mit jQuery ersetzen 137
9.3 Neue Elemente mit jQuery erzeugen 138
9.4 Elemente mit jQuery animieren 139
9.5 jQuery-Animationen verketten 140
9.6 Das hast du gelernt 141
10 Interaktive Programmierung 143
10.1 Codeausführung mit setTimeout verzögern 143
10.2 Ein Timeout abbrechen 144
10.3 Code mehrfach aufrufen mit setlnterval 145
10.4 Elemente mit setlnterval animieren 147
10.5 Auf Benutzereingaben reagieren 149
Auf Klicks reagieren 149
Das mousemove-Ereignis 150
10.6 Das hast du gelernt 152
11 Schatzsuche! 153
11.1 Das Spiel entwickeln 153
11.2 Die Webseite in HTML erzeugen 154
11.3 Eine zufällige Stelle für den Schatz auswählen 155
Zufallszahlen auswählen 155
Die Schatzkoordinaten festlegen 156
11.4 Der Klick-Handler 156
Klicks zählen 157
Die Entfernung zwischen Klick und Schatz berechnen 157
Den Satz des Pythagoras verwenden 158
Dem Spieler mitteilen, wie nahe er am Ziel ist 159
Prüfen, ob der Spieler gewonnen hat 160
11.5 Alles zusammensetzen 161
11.6 Das hast du gelernt 163
12 Objebtorientierte Programmierung 165
12.1 Ein einfaches Objekt 165
12.2 Methoden zu Objekten hinzufügen 166
Das Schlüsselwort this verwenden 167
Eine gemeinsame Methode in mehreren Objekten verwenden 167
12.3 Objekte erzeugen mit Konstruktoren 168
Aufbau des Konstruktors 169
Einen Auto-Konstruktor erzeugen 169
12.4 Die Autos zeichnen 171
12.5 Die Funktion zei chneAuto testen 172
12.6 Prototypen für massgeschneiderte Objekte 173
Dem Auto-Prototyp eine zeichnen-Methode hinzufügen 174
Eine schiebeNachRechts-Methode hinzufügen 175
Die Methoden Links, Hoch und Runter hinzufügen 176
12.7 Das hast du gelernt 177
Teil III Der Canvas
13 Das canvas-Element 181
13.1 Einen Canvas erzeugen 181
13.2 Auf dem Canvas zeichnen 182
Das canvas-Element auswählen und speichern 182
Den Zeichen bereich erstellen 182
Ein Quadrat zeichnen 183
Mehrere Quadrate zeichnen 183
13.3 Die Zeichenfarbe ändern 184
13.4 Rechteckige Umrisse zeichnen 186
13.5 Linien oder Pfade zeichnen 187
13.6 Gefüllte Pfade 188
13.7 Bögen und Kreise zeichnen 189
Einen Viertelkreis oder einen Bogen zeichnen 190
Einen Halbkreis zeichnen 191
Einen vollen Kreis zeichnen 191
13.8 Viele Kreise mit einer Funktion zeichnen 192
13.9 Das hast du gelernt 194
14 Bewegte Objekte au? dem Canvas erzeugen 197
14.1 Ein Quadrat animieren 197
Den Canvas leeren 198
Das Quadrat zeichnen 199
Die Position ändern 199
Die Animation im Browser betrachten 199
14.2 Die Grösse eines Quadrats animieren 200
14.3 Eine Zufallsbiene 201
Eine neue Kreisfunktion 201
Die Biene zeichnen 202
Die Koordinaten der Biene ändern 203
Die Biene animieren 204
14.4 Einen Ball hüpfen lassen! 206
Der Ball-Konstruktor 207
Den Ball zeichnen 207
Den Ball bewegen 208
Den Ball springen lassen 209
Den Ball animieren 210
14.5 Das hast du gelernt 211
15 Ämimefeionen mit de? Tastatur steuern 213
15.1 Tastaturereignisse 213
Die HTML-Datei einrichten 214
Den keydown-Event-Handler hinzufügen 214
Tastencodes mithilfe eines Objekts in Namen konvertieren 215
Inhaltsverzeichnis xvii
15.2 Einen Ball mit der Tastatur bewegen 216
Den Canvas einrichten 217
Die Kreisfunktion definieren 217
Den Ball-Konstruktor erzeugen 218
Die Methode move definieren 218
Die Methode draw definieren 219
Die Methode setDirection erzeugen 220
Reaktion auf die Tastatur 221
Den Ball animieren 222
15.3 Alles zusammenbauen 223
15.4 Den Code ausführen 225
15.5 Das hast du gelernt 225
16 Das Spiel "Snabe" programmieren - Teil 1 227
16.1 Das Spiel 227
16.2 Die Spielstruktur 228
Das Spiel mit setlnterval animieren 229
Die Spielobjekte erzeugen 229
Die Tastatursteuerung einrichten 230
16.3 Das Spiel einrichten 230
Den HTML-Code erzeugen 230
Den Canvas und die Variablen canvas, ctx, breite und
hoehe definieren 231
Den Canvas in Blöcke unterteilen 231
Die Variable für den Punktestand definieren 232
16.4 Den Rahmen zeichnen 233
16.5 Den Punktestand anzeigen 234
Die Textgrundlinie einrichten 235
Grösse und Schriftart festlegen 236
Die Funktion punktstandZeichnen schreiben 237
16.6 Das Spiel beenden 238
16.7 Das hast du gelernt 239
17 Das Spiel "Snabe" Programmieren - Teil 2 241
17.1 Den Block-Konstruktor erstellen 241
Die Methode quadratzeichnen hinzufügen 242
Die Methode kreisZeichnen hinzufügen 244
Die Methode equal hinzufügen 245
xviii Inhaltsverzeichnis
17.2 Die Schlange erzeugen 246
Den Schlangen-Konstruktor schreiben 246
Die Schlange zeichnen 247
17.3 Die Schlange bewegen 248
Die Methode move hinzufügen 248
Die Methode kolIisionCheck hinzufügen 251
17.4 Die Richtung der Schlange mit der Tastatur festlegen 253
Den keydown-Event-Handler hinzufügen 253
Die Methode setDirection hinzufügen 254
17.5 Den Apfel erzeugen 255
Den Apfel-Konstruktor schreiben 255
Den Apfel zeichnen 255
Den Apfel verschieben 256
17.6 Alles zusammensetzen 257
17.7 Das hast du gelernt 262
Anhang
A Nachwort - So geht et weiter 267
A.l Mehr JavaScript 267
A.2 Webprogrammierung 268
HTML 268
CSS 268
Serverseitiger Code mit Node.js 269
A.3 Grafische Programmierung 269
Canvas 269
SVG mit Raphael 269
A.4 3D-Programmierung 270
A.5 Roboter programmieren 270
A.6 Audioprogrammierung 270
A.7 Spieleprogrammierung 271
A.8 Deinen Code per JSFiddle teilen 271
B Glossar 273
Index 277