1 Einführung

17

1.1 Was mache ich mit JavaScript?

17

1.2 Was kann JavaScript nicht?

18

1.3 Browser und mobile Browser

18

1.4 ECMAScript

19

1.5 Aufbau des Buchs

20

1.6 Einrichten der Arbeitsumgebung

21

1.7 Eine erste HTML-Datei

21

1.7.1 Die Codierung UTF-8

24

1.8 Einige Sonderzeichen

24

1.9 JavaScript innerhalb einer HTML-Datei

25

1.10 JavaScript aus externer Datei

27

1.11 Kommentare

28

1.12 Kein JavaScript möglich

29

2 Grundlagen der Programmierung

33

2.1 Speicherung von Werten

33

2.1.1 Speicherung von Zeichenketten

33

2.1.2 Namensregeln

35

2.1.3 Ein- und Ausgabe von Zeichenketten

36

2.1.4 Speichern von Zahlen

37

2.1.5 Speichern von Wahrheitswerten

39

2.1.6 Konstanten

40

2.2 Berechnungen durchführen

41

2.2.1 Rechenoperatoren

41

2.2.2 Zuweisungsoperatoren

43

2.2.3 Eingabe von Zahlen

44

2.3 Verschiedene Zweige eines Programms

46

2.3.1 Verzweigungen mit »if … else«

46

2.3.2 Bestätigung anfordern

49

2.3.3 Mehrere Bedingungen verknüpfen

50

2.3.4 Eingabe von Zahlen prüfen

52

2.3.5 Wert und Typ von Variablen prüfen

54

2.3.6 Priorität der Operatoren

55

2.3.7 Verzweigungen mit »switch … case«

56

2.4 Programmteile wiederholen

58

2.4.1 Schleifen mit »for«

58

2.4.2 Schleifen und Tabellen

61

2.4.3 Schleifen mit »while«

62

2.4.4 Schleifen mit »do … while«

63

2.4.5 Ein Spiel als Gedächtnistraining

66

2.5 Fehler finden, Fehler vermeiden

68

2.5.1 Entwicklung eines Programms

69

2.5.2 Fehler finden mit »onerror«

70

2.5.3 Ausnahmebehandlung mit »try … catch«

71

2.5.4 Ausnahmen werfen mit »throw«

72

2.5.5 Programm debuggen

74

2.6 Programme zerlegen mit eigenen Funktionen

77

2.6.1 Einfache Funktionen

77

2.6.2 Funktionen auslagern

78

2.6.3 Funktionen mit Parametern

79

2.6.4 Funktionen mit Rückgabewert

81

2.6.5 Beliebige Anzahl von Parametern

82

2.6.6 Vorgabewerte für Parameter

84

2.6.7 Restliche Parameter

85

2.6.8 Gültigkeitsbereich von Variablen

86

2.6.9 Anonyme Funktionen

87

3 Eigene Objekte

91

3.1 Objekte und Eigenschaften

91

3.2 Methoden

93

3.3 Objekt in Objekt

95

3.4 Vererbung

97

3.5 Operationen mit Objekten

100

3.5.1 Zugriffsoperatoren

101

3.5.2 Verweise auf Objekte erzeugen und vergleichen

101

3.5.3 Instanzen prüfen

102

3.5.4 Typ ermitteln

103

3.5.5 Member prüfen

104

3.5.6 Kompakter Zugriff auf Eigenschaften

104

3.5.7 Eigenschaften löschen

105

3.6 Prototypen und Konstruktorfunktionen

105

3.7 Objekte in JSON

106

4 Ereignisse

109

4.1 Techniken der Ereignisbehandlung

109

4.2 Klassische Ereignisbehandlung

110

4.2.1 Erste Eventhandler

110

4.2.2 Formulare und Ajax

113

4.2.3 Ereignisse im Formular

114

4.2.4 Maus-Ereignisse

119

4.3 Ereignisse als Eigenschaften

120

4.4 Das Ereignisobjekt

124

4.5 Event Listener

126

4.5.1 Bubbling und Capturing

126

5 Das Document Object Model (DOM)

129

5.1 Baum und Knoten

129

5.2 Knoten abrufen

131

5.3 Kindknoten

133

5.4 Knoten hinzufügen

135

5.5 Knoten ändern

138

5.6 Knoten löschen

141

5.7 Eine Tabelle erzeugen

143

6 Standardobjekte nutzen

145

6.1 Felder für große Datenmengen

145

6.1.1 Felder erzeugen und ausgeben

146

6.1.2 Mehrdimensionale Felder

150

6.1.3 Felder mit Funktionen bearbeiten

152

6.1.4 Elemente hinzufügen und entfernen

154

6.1.5 Felder verändern

156

6.1.6 Felder an Funktionen übergeben

158

6.1.7 Sortieren von Zahlenfeldern

160

6.1.8 Elemente in einem Feld finden

162

6.1.9 Felder von Objekten

163

6.1.10 Felder und Objekte in JSON

164

6.2 Zeichenketten verarbeiten

166

6.2.1 Zeichenketten erzeugen und prüfen

166

6.2.2 Elemente einer Zeichenkette

168

6.2.3 Suche und Teilzeichenketten

170

6.2.4 Zeichenketten ändern

172

6.2.5 Reguläre Ausdrücke

174

6.3 Zahlen und Mathematik

175

6.3.1 Objekt »Number«

175

6.3.2 Erweiterung des »Number«-Objekts

177

6.3.3 Objekt »Math«

179

6.3.4 Winkelfunktionen

181

6.4 Datum und Uhrzeit nutzen

183

6.4.1 Zeitangaben erzeugen

183

6.4.2 Zeitangaben ausgeben

185

6.4.3 Erweiterung des »Date«-Objekts

187

6.4.4 Mit Zeitangaben rechnen

189

6.4.5 Zweite Erweiterung des »Date«-Objekts

192

6.4.6 Abläufe zeitlich steuern

193

6.4.7 Können Sie Zeiten schätzen?

195

6.4.8 Feiertage in NRW

197

6.5 Weitere Datenstrukturen

198

6.5.1 Mengen

199

6.5.2 Assoziative Felder

201

7 Browserobjekte nutzen

205

7.1 Das Browserfenster, Objekt »window«

205

7.1.1 Größe und Position

205

7.1.2 Fenster öffnen und schließen

206

7.1.3 Zeitliche Abläufe starten und stoppen

208

7.2 Die Historie, Objekt »history«

211

7.3 Die Adresse, Objekt »location«

212

7.3.1 Eigenschaften und Methoden

213

7.3.2 Senden von Datei zu Datei

215

7.4 Das Dokument, Objekt »document«

218

7.5 Alle Anker, Eigenschaft »anchors«

220

7.6 Alle Hyperlinks, Eigenschaft »links«

222

7.7 Alle Bilder, Eigenschaft »images«

224

7.7.1 Eigenschaften

224

7.7.2 Diashow und Einzelbild

227

7.8 Alle Formulare, Eigenschaft »forms«

230

7.8.1 Zugriff auf Formulare

231

7.8.2 Formulare kontrollieren, Textfelder

233

7.8.3 RadioButtons und CheckBoxen

237

7.8.4 Auswahlmenüs

241

7.8.5 Versteckte Formularelemente

244

7.8.6 Bedienung mit Return-Taste

245

7.8.7 Lernspiel: Hauptstädte der Europäischen Union

247

7.8.8 Dynamische Änderung von Auswahlmenüs

248

7.9 Der Bildschirm, Objekt »screen«

249

8 Ajax

251

8.1 Hallo Ajax

251

8.2 Parameter senden

254

8.3 XML-Datei lesen

257

8.3.1 Einzelnes Objekt

258

8.3.2 Sammlung von Objekten

260

8.3.3 Vorschläge beim Suchen

263

8.4 JSON-Datei lesen

268

8.4.1 Einzelnes Objekt

268

8.4.2 Sammlung von Objekten

269

9 Cascading Style Sheets (CSS)

273

9.1 Aufbau und Regeln

273

9.1.1 Orte und Selektoren

274

9.1.2 Kombinationen

278

9.1.3 Kaskadierung und Überlagerung

280

9.2 Position und verwandte Eigenschaften

281

9.2.1 Position und Größe

282

9.2.2 Lage in z-Richtung

284

9.2.3 Bildausschnitt

285

9.2.4 Transparenz

287

9.3 CSS und JavaScript

288

9.3.1 CSS-Eigenschaften ändern

288

9.3.2 Regeln vorhandener Styles ändern

291

9.3.3 Name der Eigenschaften für CSS und JavaScript

295

9.3.4 Position und verwandte Eigenschaften ändern

297

9.3.5 Sichtbarkeit ändern

300

9.4 Animation

303

9.4.1 Fünf Animationen, Aufbau

304

9.4.2 Animierte Änderung der Position

305

9.4.3 Animierte Änderung des Ausschnitts

306

9.4.4 Animierte Änderung der Transparenz

307

9.4.5 Animierte Änderung der Farbe

308

9.4.6 Animierter Bildwechsel

309

9.4.7 Animierter Wurf

310

9.4.8 Animierter Sternenhimmel

311

10 Zweidimensionale Grafiken und Animationen mit SVG

313

10.1 Eine SVG-Datei erstellen

313

10.2 Grundformen

316

10.2.1 Rechteck

316

10.2.2 Kreis und Ellipse

317

10.2.3 Linie, Polylinie und Polygon

318

10.3 Pfade

319

10.3.1 Gefüllte Pfade

320

10.3.2 Gruppen, nicht gefüllte und geschlossene Pfade

322

10.3.3 Pfade mit Kurven

323

10.4 Animationen

324

10.4.1 Ablauf der Beispielanimationen

324

10.4.2 Zeitgesteuerte Animationen

325

10.4.3 Ereignisgesteuerte Animationen

327

10.5 Rotationen

328

10.6 Zugriff auf SVG-Elemente mit JavaScript

330

10.7 Erzeugen von SVG-Elementen mit JavaScript

332

11 Dreidimensionale Grafiken und Animationen mit Three.js

337

11.1 Eine erste 3D-Grafik

338

11.1.1 Das 3D-Koordinatensystem

338

11.1.2 Der Aufbau des Programms

339

11.1.3 Die Zeichnungsfläche und die Grafikszene

340

11.1.4 Das 3D-Objekt mit Geometrie und Material

341

11.1.5 Die Kamera

341

11.1.6 Die Lichtquelle und die Darstellung

342

11.2 Eine Animation

343

11.3 Position, Perspektive und Licht

344

11.4 Verschiedene Formen

346

11.4.1 Rechteck

347

11.4.2 Quader

347

11.4.3 Kegel

348

11.4.4 Kugel

349

11.4.5 Torus

350

12 jQuery

353

12.1 Aufbau

353

12.2 Selektoren und Methoden

356

12.3 Ereignisse

359

12.4 Animationen

362

12.5 Beispiel: sinusförmige Bewegung

366

12.6 jQuery und Ajax

368

13 Mobile Apps mit Onsen UI

371

13.1 Aufbau einer Seite

371

13.1.1 Eine erste Seite

372

13.1.2 Eine Liste von Elementen

374

13.1.3 Eine Tabelle mit Elementen

376

13.2 Elemente innerhalb einer Seite

378

13.2.1 Icons und Fabs

378

13.2.2 Standarddialoge

380

13.2.3 Eingabefelder

384

13.2.4 Auswahlfelder

388

13.2.5 Auswahl aus Zahlenbereich

391

13.3 Dokumente mit mehreren Seiten

393

13.3.1 Eine Aufteilung von Seiten mit Tabs

393

13.3.2 Eine Hierarchie von Seiten mit einem Navigator

396

13.3.3 Ein Rundlauf in einem Karussell

399

14 Mathematische Ausdrücke mit MathML

403

14.1 Grundelemente

403

14.2 Klammern und Tabellen

406

14.3 Zusammenfassende Ausdrücke

408

14.4 Brüche

410

14.5 Mathematische Zeichen

412

14.6 Dynamisch erzeugte Ausdrücke

414

15 Cookies

419

15.1 Cookies schreiben

419

15.2 Cookies lesen

420

15.3 Cookies löschen

422

15.4 Werden Cookies akzeptiert?

423

15.5 Beispiel für die Nutzung

423

16 Beispielprojekte

427

16.1 Geldanlage

428

16.2 Fitnesswerte

428

16.3 Volkslauf

429

16.4 Nummer der Kreditkarte prüfen

430

16.5 Patience

431

16.6 Memory

431

16.7 Snake

432

17 HTML5

435

17.1 HTML5-Fähigkeit testen

435

17.2 Formularelemente

437

17.2.1 Elemente für Text und Farbe

437

17.2.2 Elemente für Zahlen

442

17.2.3 Elemente für Zeitangaben

446

17.2.4 Validierung von Formularen

449

17.3 Mediendateien abspielen

453

17.3.1 Audiodateien

453

17.3.2 Videodateien

456

17.4 Canvas

458

17.4.1 Zeichnungen

458

17.4.2 Bilder

463

17.4.3 Formatierte Texte

465

17.5 Standortdaten nutzen

468

17.5.1 Standort ermitteln

468

17.5.2 Waytracking

473

17.6 Sensoren nutzen

475

17.6.1 Lagesensoren nutzen

475

17.6.2 Beschleunigungssensoren nutzen

479

Anhang

485

A.1 Installation des Pakets XAMPP

485

A.2 Liste der Schlüsselwörter

486