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

19

1.4 ECMAScript

19

1.5 Aufbau des Buchs

20

1.6 Erstes Beispiel mit HTML und CSS

21

1.6.1 Ausgabe des Programms

21

1.6.2 HTML-Datei

22

1.6.3 Codierung UTF-8

24

1.6.4 Responsives Webdesign

25

1.7 Einige Sonderzeichen

28

1.8 JavaScript im Dokument

29

1.9 JavaScript aus externer Datei

31

1.10 Kommentare

32

1.11 Kein JavaScript möglich

33

2 Grundlagen der Programmierung

37

2.1 Speicherung von Werten

37

2.1.1 Speicherung von Zeichenketten

37

2.1.2 Namensregeln

40

2.1.3 Ein- und Ausgabe von Zeichenketten

41

2.1.4 Speicherung von Zahlen

43

2.1.5 Speicherung von Wahrheitswerten

45

2.2 Berechnungen durchführen

46

2.2.1 Rechenoperatoren

46

2.2.2 Kombinierte Zuweisung

48

2.2.3 Eingabe von Zahlen

50

2.2.4 Zahlensysteme

52

2.3 Verschiedene Zweige eines Programms

53

2.3.1 Verzweigungen mit »if«

54

2.3.2 Bestätigung anfordern

57

2.3.3 Mehrere Bedingungen verknüpfen

58

2.3.4 Verknüpfen und zuweisen

59

2.3.5 Eingabe von Zahlen prüfen

60

2.3.6 Wert und Typ prüfen

63

2.3.7 Priorität der Operatoren

64

2.3.8 Verzweigungen mit »switch«

65

2.4 Programmteile wiederholen

67

2.4.1 Schleifen mit »for«

67

2.4.2 Schleifen und Tabellen

70

2.4.3 Schleifen und Felder

72

2.4.4 Schleifen mit »while«

74

2.4.5 Schleifen mit »do … while«

75

2.4.6 Ein Spiel als Gedächtnistraining

78

2.5 Fehler finden, Fehler vermeiden

80

2.5.1 Entwicklung eines Programms

80

2.5.2 Fehler finden mit »onerror«

81

2.5.3 Ausnahmebehandlung mit »try … catch«

83

2.5.4 Ausnahmen werfen mit »throw«

84

2.5.5 Programm debuggen

85

2.6 Eigene Funktionen

89

2.6.1 Einfache Funktionen

89

2.6.2 Funktionen auslagern

90

2.6.3 Funktionen mit Parametern

91

2.6.4 Parameter ändern

93

2.6.5 Funktionen mit Rückgabewert

95

2.6.6 Destrukturierende Zuweisung

97

2.6.7 Auswertung mit Short Circuit

99

2.6.8 Beliebige Anzahl von Parametern

101

2.6.9 Vorgabewerte für Parameter

102

2.6.10 Gültigkeitsbereich von Variablen

103

2.6.11 Rekursive Funktionen

105

2.6.12 Anonyme Funktionen

107

2.6.13 Callback-Funktionen

109

3 Eigene Objekte

113

3.1 Objekte und Eigenschaften

113

3.2 Methoden

116

3.3 Private Member

118

3.4 Setter und Getter

120

3.5 Statische Member

122

3.6 Statische Blöcke

124

3.7 Verweis auf Nichts

125

3.8 Objekt in Objekt

127

3.9 Vererbung

129

3.10 Operationen mit Objekten

131

3.10.1 Zugriffsoperatoren

132

3.10.2 Verweise auf Objekte erzeugen und vergleichen

133

3.10.3 Instanzen prüfen

134

3.10.4 Typ ermitteln

134

3.10.5 Member prüfen

135

3.10.6 Objekte und Funktionen

135

3.10.7 Eigenschaften löschen

136

3.11 Objekte kopieren

137

4 Formulare und Ereignisse

141

4.1 Erstes Formular und erstes Ereignis

141

4.2 Senden und Zurücksetzen

144

4.2.1 Der Ablauf beim Senden

144

4.2.2 Webserver als Alternative

146

4.2.3 Code zum Senden

147

4.2.4 Code zum Empfangen

148

4.3 Pflichtfelder und Kontrolle

149

4.4 Radiobuttons und Checkboxen

153

4.5 Auswahlmenüs

155

4.6 Weitere Formular-Ereignisse

158

4.7 Maus-Ereignisse

161

4.8 Wechsel des Dokuments

164

4.9 Weitere Typen und Eigenschaften

166

4.9.1 Texteingaben, Suchfelder und Farben

166

4.9.2 Elemente für Zahlen

170

4.9.3 Elemente für Zeitangaben

175

4.9.4 Validierung von Formularen

179

4.10 Dynamisch erstelltes Formular

183

5 Das Document Object Model (DOM)

187

5.1 Baum und Knoten

187

5.2 Knoten abrufen

189

5.3 Kindknoten

191

5.4 Knoten hinzufügen

193

5.5 Knoten ändern

196

5.6 Knoten löschen

200

5.7 Eine Tabelle erzeugen

201

6 Standardobjekte nutzen

205

6.1 Felder für große Datenmengen

205

6.1.1 Eindimensionale Felder

205

6.1.2 Mehrdimensionale Felder

210

6.1.3 Felder als Parameter und als Rückgabewerte

214

6.1.4 Callback-Funktionen

217

6.1.5 Elemente hinzufügen und entfernen

220

6.1.6 Felder ändern

222

6.1.7 Felder kopieren

225

6.1.8 Sortieren von Zahlenfeldern

226

6.1.9 Elemente in einem Feld finden

228

6.1.10 Destrukturierung und Spread-Operator

230

6.1.11 Felder von Objekten

233

6.2 Zeichenketten verarbeiten

234

6.2.1 Zeichenketten erzeugen und prüfen

235

6.2.2 Elemente einer Zeichenkette

236

6.2.3 Suche und Teilzeichenketten

238

6.2.4 Zeichenketten ändern

240

6.2.5 Prüfen eines Passworts

242

6.2.6 Unicode-Zeichen

245

6.3 Zahlen und Mathematik

246

6.3.1 Objekt »Math«

246

6.3.2 Winkelfunktionen

248

6.3.3 Zufallsgeneratoren und Typed Arrays

249

6.3.4 Ganze Zahlen

251

6.3.5 Zahlen mit Nachkommastellen

253

6.3.6 Eigene Erweiterung für Zahlen

256

6.4 Arbeiten mit Zeitangaben

257

6.4.1 Zeitangaben erzeugen

258

6.4.2 Zeitangaben ausgeben

259

6.4.3 Erweiterung des »Date«-Objekts

262

6.4.4 Mit Zeitangaben rechnen

263

6.4.5 Zweite Erweiterung des »Date«-Objekts

266

6.4.6 Feiertage in Nordrhein-Westfalen

267

6.5 Zeitliche Abläufe

268

6.5.1 Abläufe zeitgesteuert starten

269

6.5.2 Abläufe zeitgesteuert starten und beenden

270

6.5.3 Abläufe kontrollieren

272

6.5.4 Diashow und Einzelbild

274

6.6 Weitere Datenstrukturen

277

6.6.1 Mengen

277

6.6.2 Assoziative Felder

279

6.7 JSON

282

6.7.1 JSON-Format und JSON-Objekt

282

6.7.2 Eigene Klassen und JSON-Methoden

284

6.7.3 JSON-Objekt und Felder

285

6.7.4 JSON-Format und Felder

286

6.7.5 Eigene Klassen und Felder

287

7 Änderungen mit Ajax

291

7.1 Hallo Ajax

291

7.2 Parameter senden

295

7.3 XML-Datei lesen

298

7.3.1 Einzelnes Objekt

298

7.3.2 Sammlung von Objekten

301

7.3.3 Vorschläge beim Suchen

304

7.4 JSON-Datei lesen

308

7.4.1 Einzelnes Objekt

308

7.4.2 Sammlung von Objekten

310

8 Gestaltung mit Cascading Style Sheets (CSS)

313

8.1 Aufbau und Regeln

314

8.1.1 Orte und Selektoren

314

8.1.2 Kombinationen

317

8.1.3 Kaskadierung und Überlagerung

319

8.2 Ändern von Eigenschaften

321

8.2.1 Position

321

8.2.2 Größe

324

8.2.3 Lage in z-Richtung

327

8.2.4 Transparenz

329

8.2.5 Sichtbarkeit

332

8.2.6 Farbe

333

8.3 Weitere Möglichkeiten

336

8.3.1 Transparenz bei Bildwechsel

336

8.3.2 Sichtbarkeit eines Menüs

338

8.3.3 Animierter Wurf

341

9 Zweidimensionale Grafiken und Animationen mit SVG

343

9.1 Eine SVG-Datei erstellen

343

9.2 Grundformen

346

9.2.1 Rechtecke

346

9.2.2 Kreise und Ellipsen

347

9.2.3 Linien, Polylinien und Polygone

348

9.3 Pfade

349

9.3.1 Gefüllte Pfade

350

9.3.2 Gruppen und Pfade

352

9.3.3 Pfade mit Kurven

352

9.4 Animationen

354

9.4.1 Ablauf

354

9.4.2 Zeitsteuerung

355

9.4.3 Ereignissteuerung

357

9.5 Rotationen

358

9.6 SVG und JavaScript

360

9.7 Dynamische SVG-Elemente

361

9.7.1 Ablauf der Animation

361

9.7.2 Startzustand erstellen

363

9.7.3 Animationen erzeugen

364

10 Dreidimensionale Grafiken und Animationen mit Three.js

367

10.1 Eine erste 3D-Grafik

368

10.1.1 3D-Koordinatensystem

368

10.1.2 Aufbau des Programms

369

10.1.3 3D-Objekt mit Geometrie und Material

370

10.1.4 Kamera

371

10.1.5 Zeichnungsfläche und Grafikszene

372

10.2 Verschieben der Kamera

373

10.3 Animation

375

10.4 Verschiedene Formen

376

11 jQuery

377

11.1 Aufbau

377

11.2 Selektoren und Methoden

380

11.3 Ereignisse

383

11.4 Animationen

386

11.5 Beispiel: sinusförmige Bewegung

390

11.6 jQuery und Ajax

392

12 Mobile Apps mit Onsen UI

397

12.1 Aufbau einer Seite

397

12.1.1 Erste Seite

397

12.1.2 Liste von Elementen

400

12.1.3 Tabelle mit Elementen

402

12.2 Elemente innerhalb einer Seite

404

12.2.1 Icons und Fabs

404

12.2.2 Standarddialoge

407

12.2.3 Eingabefelder

411

12.2.4 Auswahlfelder

415

12.2.5 Auswahl aus Zahlenbereich

420

13 Mathematische Ausdrücke mit MathML und MathJax

425

13.1 Grundelemente

425

13.2 Klammern und Tabellen

428

13.3 Zusammenfassende Ausdrücke

430

13.4 Brüche

432

13.5 Mathematische Zeichen

434

13.6 Dynamisch erzeugte Ausdrücke

436

14 Beispielprojekte

441

14.1 Geldanlage

441

14.2 Fitnesswerte

442

14.3 Volkslauf

443

14.4 Kreditkarte prüfen

445

14.5 Patience

445

14.6 Memory

446

14.7 Snake

447

15 Medien, Zeichnungen und Sensoren

449

15.1 Mediendateien abspielen

449

15.1.1 Audiodateien

449

15.1.2 Videodateien

453

15.2 Canvas

455

15.2.1 Zeichnungen

455

15.2.2 Bilder

460

15.2.3 Formatierte Texte

462

15.3 Sensoren

464

15.3.1 Standort

464

15.3.2 Waytracking

467

15.3.3 Lagesensor

469

15.3.4 Beschleunigungssensor

473

Anhang

481

A Installation und Schlüsselwörter

481

A.1 Installation des Pakets XAMPP

481

A.2 Liste der Schlüsselwörter

485