1 Einführung

15

1.1 Was mache ich mit JavaScript?

15

1.2 Was kann JavaScript nicht?

16

1.3 Browser und mobile Browser

17

1.4 ECMAScript

17

1.5 Aufbau des Buchs

17

1.6 Einrichten der Arbeitsumgebung

19

1.7 Eine erste HTML-Datei

19

1.7.1 Die Codierung UTF-8

21

1.8 Einige Sonderzeichen

22

1.9 JavaScript innerhalb einer HTML-Datei

23

1.10 JavaScript aus externer Datei

25

1.11 Kommentare

26

1.12 Kein JavaScript möglich

27

2 Grundlagen der Programmierung

29

2.1 Speicherung von Werten

29

2.1.1 Speicherung von Zeichenketten

29

2.1.2 Namensregeln

31

2.1.3 Ein- und Ausgabe von Zeichenketten

32

2.1.4 Speichern von Zahlen

33

2.1.5 Speichern von Wahrheitswerten

35

2.1.6 Konstanten

36

2.2 Berechnungen durchführen

37

2.2.1 Rechenoperatoren

37

2.2.2 Zuweisungsoperatoren

39

2.2.3 Eingabe von Zahlen

40

2.3 Verschiedene Zweige eines Programms

42

2.3.1 Verzweigungen mit »if … else«

42

2.3.2 Bestätigung anfordern

45

2.3.3 Mehrere Bedingungen verknüpfen

46

2.3.4 Eingabe von Zahlen prüfen

47

2.3.5 Wert und Typ von Variablen prüfen

49

2.3.6 Priorität der Operatoren

50

2.3.7 Verzweigungen mit »switch … case«

51

2.4 Programmteile wiederholen

53

2.4.1 Schleifen mit »for«

53

2.4.2 Schleifen und Tabellen

56

2.4.3 Schleifen mit »while«

57

2.4.4 Schleifen mit »do … while«

58

2.4.5 Ein Spiel als Gedächtnistraining

61

2.5 Fehler finden, Fehler vermeiden

63

2.5.1 Entwicklung eines Programms

63

2.5.2 Fehler finden mit »onerror«

64

2.5.3 Ausnahmebehandlung mit »try … catch«

66

2.5.4 Ausnahmen werfen mit »throw«

67

2.5.5 Firebug, Programm debuggen

68

2.6 Programme zerlegen mit eigenen Funktionen

71

2.6.1 Einfache Funktionen

71

2.6.2 Funktionen auslagern

72

2.6.3 Funktionen mit Parametern

73

2.6.4 Funktionen mit Rückgabewert

75

2.6.5 Beliebige Anzahl von Parametern

76

2.6.6 Vorgabewerte für Parameter

78

2.6.7 Restliche Parameter

79

2.6.8 Gültigkeitsbereich von Variablen

80

2.6.9 Anonyme Funktionen

81

2.7 Objektunabhängige Funktionen nutzen

83

2.7.1 Die Funktion »eval()«

83

3 Eigene Objekte

85

3.1 Objekte und Eigenschaften

85

3.2 Methoden

87

3.3 Objekt in Objekt

89

3.4 Vererbung

91

3.5 Operationen mit Objekten

94

3.5.1 Zugriffsoperatoren

95

3.5.2 Verweise auf Objekte erzeugen und vergleichen

96

3.5.3 Instanzen prüfen

97

3.5.4 Typ ermitteln

97

3.5.5 Eigenschaften prüfen

98

3.5.6 Kompakter Zugriff auf Eigenschaften

99

3.5.7 Eigenschaften löschen

99

3.6 Klassen in ECMAScript 2015

100

3.7 Objekte in JSON

101

4 Ereignisse

103

4.1 Techniken der Ereignisbehandlung

103

4.2 Klassische Ereignisbehandlung

104

4.2.1 Erste Eventhandler

104

4.2.2 Formulare und Ajax

107

4.2.3 Ereignisse im Formular

108

4.2.4 Maus-Ereignisse

113

4.3 Ereignisse als Eigenschaften

115

4.4 Das Ereignisobjekt

118

4.5 Event Listener

121

4.5.1 Bubbling und Capturing

122

4.5.2 Externer Event Listener

124

5 Das Document Object Model (DOM)

127

5.1 Baum und Knoten

127

5.2 Knoten abrufen

129

5.3 Kindknoten

131

5.4 Knoten hinzufügen

133

5.5 Knoten ändern

136

5.6 Knoten löschen

139

5.7 Eine Tabelle erzeugen

141

6 Standardobjekte nutzen

143

6.1 Felder für große Datenmengen

143

6.1.1 Felder erzeugen

144

6.1.2 Elemente hinzufügen und entfernen

148

6.1.3 Weitere Methoden

150

6.1.4 Felder und Funktionen

152

6.1.5 Sortieren von Zahlenfeldern

153

6.1.6 Elemente in einem Feld finden

155

6.1.7 Felder von Objekten

157

6.1.8 Felder und Objekte in JSON

159

6.2 Zeichenketten verarbeiten

160

6.2.1 Operationen mit Zeichenketten

161

6.2.2 Hyperlinks und Anker

167

6.2.3 Reguläre Ausdrücke

168

6.3 Zahlen und Mathematik

168

6.3.1 Objekt »Number«

168

6.3.2 Erweiterung des »Number«-Objekts

171

6.3.3 Objekt »Math«

173

6.3.4 Winkelfunktionen

175

6.4 Datum und Uhrzeit nutzen

177

6.4.1 Zeitangaben erzeugen

177

6.4.2 Zeitangaben ausgeben

179

6.4.3 Erweiterung des »Date«-Objekts

181

6.4.4 Mit Zeitangaben rechnen

183

6.4.5 Zweite Erweiterung des »Date«-Objekts

186

6.4.6 Abläufe zeitlich steuern

187

6.4.7 Können Sie Zeiten schätzen?

189

6.4.8 Feiertage in NRW

192

7 Browserobjekte nutzen

193

7.1 Das Browserfenster, Objekt »window«

193

7.1.1 Größe und Position

193

7.1.2 Fenster öffnen und schließen

194

7.1.3 Zeitliche Abläufe starten und stoppen

198

7.2 Die Historie, Objekt »history«

201

7.3 Die Adresse, Objekt »location«

202

7.3.1 Eigenschaften und Methoden

202

7.3.2 Senden von Datei zu Datei

205

7.4 Das Dokument, Objekt »document«

208

7.5 Alle Anker, Eigenschaft »anchors«

209

7.6 Alle Hyperlinks, Eigenschaft »links«

211

7.7 Alle Bilder, Eigenschaft »images«

213

7.7.1 Eigenschaften

214

7.7.2 Diashow und Einzelbild

216

7.8 Alle Formulare, Eigenschaft »forms«

219

7.8.1 Zugriff auf Formulare

220

7.8.2 Formulare kontrollieren, Textfelder

222

7.8.3 RadioButtons und CheckBoxen

226

7.8.4 Auswahlmenüs

230

7.8.5 Versteckte Formularelemente

233

7.8.6 Lernspiel: Hauptstädte der Europäischen Union

234

7.8.7 Dynamische Änderung von Auswahlmenüs

235

7.9 Der Bildschirm, Objekt »screen«

236

8 Ajax

237

8.1 Hallo Ajax

238

8.1.1 Ein wenig Theorie

240

8.2 Parameter senden

241

8.3 XML-Datei lesen

244

8.3.1 Einzelnes Objekt

244

8.3.2 Sammlung von Objekten

246

8.3.3 Vorschläge beim Suchen

248

8.4 JSON-Datei lesen

252

8.4.1 Einzelnes Objekt

252

8.4.2 Sammlung von Objekten

254

9 Cascading Style Sheets (CSS)

257

9.1 Aufbau und Regeln

258

9.1.1 Orte und Selektoren

258

9.1.2 Kombinationen

262

9.1.3 Kaskadierung und Überlagerung

264

9.2 Position und verwandte Eigenschaften

266

9.2.1 Position und Größe

266

9.2.2 Lage in z-Richtung

268

9.2.3 Bildausschnitt

269

9.2.4 Transparenz

271

9.3 CSS und JavaScript

272

9.3.1 CSS-Eigenschaften ändern

273

9.3.2 Regeln vorhandener Styles ändern

275

9.3.3 Name der Eigenschaften für CSS und JavaScript

279

9.3.4 Position und verwandte Eigenschaften ändern

281

9.3.5 Sichtbarkeit ändern

284

9.4 Animation

287

9.4.1 Fünf Animationen, Aufbau

288

9.4.2 Animierte Änderung der Position

290

9.4.3 Animierte Änderung des Ausschnitts

291

9.4.4 Animierte Änderung der Transparenz

292

9.4.5 Animierte Änderung der Farbe

292

9.4.6 Animierter Bildwechsel

293

9.4.7 Animierter Wurf

294

9.4.8 Animierter Sternenhimmel

295

10 Zweidimensionale Grafiken und Animationen mit SVG

297

10.1 Eine SVG-Datei erstellen

297

10.2 Grundformen

300

10.2.1 Rechteck

300

10.2.2 Kreis und Ellipse

301

10.2.3 Linie, Polylinie und Polygon

302

10.3 Pfade

304

10.3.1 Gefüllte Pfade

304

10.3.2 Gruppen, nicht gefüllte und geschlossene Pfade

306

10.3.3 Pfade mit Kurven

307

10.4 Animationen

308

10.4.1 Ablauf der Beispielanimationen

308

10.4.2 Zeitgesteuerte Animationen

310

10.4.3 Ereignisgesteuerte Animationen

311

10.5 Rotationen

312

10.6 Zugriff auf SVG-Elemente mit JavaScript

314

10.7 Erzeugen von SVG-Elementen mit JavaScript

316

11 Dreidimensionale Grafiken und Animationen mit Three.js

321

11.1 Eine erste 3D-Grafik

322

11.1.1 Das 3D-Koordinatensystem

322

11.1.2 Der Aufbau des Programms

323

11.1.3 Die Zeichnungsfläche und die Grafikszene

324

11.1.4 Das 3D-Objekt mit Geometrie und Material

325

11.1.5 Die Kamera

325

11.1.6 Die Lichtquelle und die Darstellung

326

11.2 Eine Animation

327

11.3 Position, Perspektive und Licht

328

11.4 Verschiedene Formen

330

11.4.1 Rechteck

331

11.4.2 Quader

332

11.4.3 Kegel

332

11.4.4 Kugel

334

11.4.5 Torus

334

12 jQuery

337

12.1 Aufbau

338

12.2 Selektoren und Methoden

340

12.3 Ereignisse

344

12.4 Animationen

347

12.5 Beispiel: sinusförmige Bewegung

351

12.6 jQuery und Ajax

353

13 jQuery UI

357

13.1 Aufbau

357

13.2 Elemente verschieben

358

13.3 Elemente zu einem Ziel verschieben

359

13.4 Elemente im Raster verschieben

361

13.5 Menü mit Untermenü

362

13.6 Bereiche auf- und zuklappen

364

14 jQuery mobile

367

14.1 Aufbau

367

14.2 Bereiche auf- und zuklappen

370

14.3 Ereignisse auf mobilen Geräten

372

14.4 Reaktionstraining

375

14.5 Formulare senden

376

14.6 Elemente eines E-Mail-Formulars

379

14.7 Weitere Formularelemente

381

15 Cookies

387

15.1 Cookies schreiben

387

15.2 Cookies lesen

388

15.3 Cookies löschen

390

15.4 Werden Cookies akzeptiert?

390

15.5 Beispiel für die Nutzung

391

16 Beispielprojekte

395

16.1 Geldanlage

396

16.2 Fitnesswerte

396

16.3 Volkslauf

397

16.4 Nummer der Kreditkarte prüfen

398

16.5 Patience

398

16.6 Memory

399

16.7 Snake

400

16.8 Kopfrechnen

401

17 HTML5

403

17.1 HTML5-Fähigkeit testen

403

17.2 Allgemeine Formularelemente

404

17.3 Elemente für Zahlen

410

17.4 Elemente für Zeitangaben

414

17.5 Validierung von Formularen

418

17.6 Audiodateien abspielen

421

17.7 Videodateien abspielen

425

17.8 Zeichnungen im Canvas

426

17.9 Bild im Canvas

431

17.10 Text im Canvas

433

17.11 Standortdaten nutzen

435

17.12 Waytracking

439

17.13 Lagesensoren nutzen

442

17.14 Beschleunigungssensoren nutzen

446

Anhang

451

A.1 Installation des Pakets »WAMP Stack«

451

A.2 Liste der Schlüsselwörter

452