1 Einführung

16

1.1 Was mache ich mit JavaScript?

16

1.2 Was kann JavaScript nicht?

17

1.3 Browser und mobile Browser

18

1.4 ECMAScript

18

1.5 Aufbau des Buchs

19

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

24

1.7 Einige Sonderzeichen

27

1.8 JavaScript im Dokument

28

1.9 JavaScript aus externer Datei

30

1.10 Kommentare

31

1.11 Kein JavaScript möglich

33

2 Grundlagen der Programmierung

35

2.1 Speicherung von Werten

35

2.1.1 Speicherung von Zeichenketten

35

2.1.2 Namensregeln

38

2.1.3 Ein- und Ausgabe von Zeichenketten

39

2.1.4 Speicherung von Zahlen

41

2.1.5 Speicherung von Wahrheitswerten

43

2.2 Berechnungen durchführen

44

2.2.1 Rechenoperatoren

44

2.2.2 Kombinierte Zuweisung

47

2.2.3 Eingabe von Zahlen

49

2.3 Verschiedene Zweige eines Programms

51

2.3.1 Verzweigungen mit »if«

51

2.3.2 Bestätigung anfordern

54

2.3.3 Mehrere Bedingungen verknüpfen

55

2.3.4 Eingabe von Zahlen prüfen

57

2.3.5 Wert und Typ prüfen

60

2.3.6 Priorität der Operatoren

62

2.3.7 Verzweigungen mit »switch«

62

2.4 Programmteile wiederholen

64

2.4.1 Schleifen mit »for«

64

2.4.2 Schleifen und Tabellen

68

2.4.3 Schleifen und Felder

70

2.4.4 Schleifen mit »while«

72

2.4.5 Schleifen mit »do … while«

73

2.4.6 Ein Spiel als Gedächtnistraining

76

2.5 Fehler finden, Fehler vermeiden

78

2.5.1 Entwicklung eines Programms

79

2.5.2 Fehler finden mit »onerror«

80

2.5.3 Ausnahmebehandlung mit »try … catch«

82

2.5.4 Ausnahmen werfen mit »throw«

83

2.5.5 Programm debuggen

85

2.6 Eigene Funktionen

88

2.6.1 Einfache Funktionen

88

2.6.2 Funktionen auslagern

89

2.6.3 Funktionen mit Parametern

91

2.6.4 Parameter ändern

92

2.6.5 Funktionen mit Rückgabewert

95

2.6.6 Destrukturierende Zuweisung

96

2.6.7 Auswertung mit Short-Circuit

98

2.6.8 Beliebige Anzahl von Parametern

100

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

110

3 Eigene Objekte

112

3.1 Objekte und Eigenschaften

113

3.2 Methoden

115

3.3 Objekt in Objekt

117

3.4 Vererbung

119

3.5 Operationen mit Objekten

122

3.5.1 Zugriffsoperatoren

123

3.5.2 Verweise auf Objekte erzeugen und vergleichen

123

3.5.3 Instanzen prüfen

124

3.5.4 Typ ermitteln

125

3.5.5 Member prüfen

126

3.5.6 Objekte und Funktionen

126

3.5.7 Eigenschaften löschen

127

3.6 Prototypen und Konstruktorfunktionen

128

3.7 Objekte in JSON

128

4 Formulare und Ereignisse

130

4.1 Erstes Formular und erstes Ereignis

130

4.2 Senden und Zurücksetzen

133

4.2.1 Der Ablauf beim Senden

134

4.2.2 Webserver als Alternative

135

4.2.3 Code zum Senden

136

4.2.4 Code zum Empfangen

138

4.3 Pflichtfelder und Kontrolle

139

4.4 Radiobuttons und Checkboxen

142

4.5 Auswahlmenüs

145

4.6 Weitere Formular-Ereignisse

148

4.7 Maus-Ereignisse

152

4.8 Wechsel des Dokuments

154

4.9 Weitere Typen und Eigenschaften

156

4.9.1 Texteingaben, Suchfelder und Farben

157

4.9.2 Elemente für Zahlen

161

4.9.3 Elemente für Zeitangaben

167

4.9.4 Validierung von Formularen

171

4.10 Dynamisch erstelltes Formular

176

5 Das Document Object Model (DOM)

179

5.1 Baum und Knoten

179

5.2 Knoten abrufen

181

5.3 Kindknoten

184

5.4 Knoten hinzufügen

186

5.5 Knoten ändern

189

5.6 Knoten löschen

193

5.7 Eine Tabelle erzeugen

194

6 Standardobjekte nutzen

197

6.1 Felder für große Datenmengen

197

6.1.1 Eindimensionale Felder

198

6.1.2 Mehrdimensionale Felder

201

6.1.3 Felder als Parameter und als Rückgabewerte

205

6.1.4 Callback-Funktionen

208

6.1.5 Elemente hinzufügen und entfernen

211

6.1.6 Felder verändern

213

6.1.7 Sortieren von Zahlenfeldern

216

6.1.8 Elemente in einem Feld finden

218

6.1.9 Destrukturierung und Spread-Operator

219

6.1.10 Felder von Objekten

222

6.1.11 Felder und Objekte in JSON

224

6.2 Zeichenketten verarbeiten

226

6.2.1 Zeichenketten erzeugen und prüfen

226

6.2.2 Elemente einer Zeichenkette

228

6.2.3 Suche und Teilzeichenketten

230

6.2.4 Zeichenketten ändern

232

6.2.5 Prüfen eines Passworts

235

6.3 Zahlen und Mathematik

238

6.3.1 Objekt »Math«

238

6.3.2 Winkelfunktionen

240

6.3.3 Zufallsgeneratoren und Typed Arrays

242

6.3.4 Ganze Zahlen

244

6.3.5 Zahlen mit Nachkommastellen

245

6.3.6 Eigene Erweiterung für Zahlen

248

6.4 Arbeiten mit Zeitangaben

250

6.4.1 Zeitangaben erzeugen

250

6.4.2 Zeitangaben ausgeben

252

6.4.3 Erweiterung des »Date«-Objekts

254

6.4.4 Mit Zeitangaben rechnen

256

6.4.5 Zweite Erweiterung des »Date«-Objekts

259

6.4.6 Können Sie Zeiten schätzen?

260

6.4.7 Feiertage in Nordrhein-Westfalen

263

6.5 Zeitliche Abläufe

264

6.5.1 Abläufe zeitgesteuert starten

264

6.5.2 Abläufe zeitgesteuert starten und beenden

266

6.5.3 Abläufe kontrollieren

268

6.5.4 Diashow und Einzelbild

270

6.6 Weitere Datenstrukturen

273

6.6.1 Mengen

274

6.6.2 Assoziative Felder

276

7 Änderungen mit Ajax

279

7.1 Hallo Ajax

280

7.2 Parameter senden

283

7.3 XML-Datei lesen

286

7.3.1 Einzelnes Objekt

287

7.3.2 Sammlung von Objekten

290

7.3.3 Vorschläge beim Suchen

292

7.4 JSON-Datei lesen

297

7.4.1 Einzelnes Objekt

297

7.4.2 Sammlung von Objekten

299

8 Gestaltung mit Cascading Style Sheets (CSS)

302

8.1 Aufbau und Regeln

303

8.1.1 Orte und Selektoren

303

8.1.2 Kombinationen

306

8.1.3 Kaskadierung und Überlagerung

309

8.2 Ändern von Eigenschaften

310

8.2.1 Position

311

8.2.2 Größe

314

8.2.3 Lage in z-Richtung

317

8.2.4 Transparenz

319

8.2.5 Sichtbarkeit

322

8.2.6 Farbe

323

8.3 Weitere Möglichkeiten

326

8.3.1 Transparenz bei Bildwechsel

326

8.3.2 Sichtbarkeit eines Menüs

329

8.3.3 Animierter Wurf

332

8.3.4 Sternenhimmel

333

8.3.5 Weitere Eigenschaften

334

9 Zweidimensionale Grafiken und Animationen mit SVG

336

9.1 Eine SVG-Datei erstellen

336

9.2 Grundformen

339

9.2.1 Rechtecke

339

9.2.2 Kreise und Ellipsen

340

9.2.3 Linien, Polylinien und Polygone

341

9.3 Pfade

343

9.3.1 Gefüllte Pfade

343

9.3.2 Gruppen und Pfade

345

9.3.3 Pfade mit Kurven

346

9.4 Animationen

347

9.4.1 Ablauf

348

9.4.2 Zeitsteuerung

349

9.4.3 Ereignissteuerung

351

9.5 Rotationen

352

9.6 SVG und JavaScript

354

9.7 Dynamische SVG-Elemente

355

9.7.1 Ablauf der Animation

356

9.7.2 Startzustand erstellen

357

9.7.3 Animationen erzeugen

359

10 Dreidimensionale Grafiken und Animationen mit Three.js

361

10.1 Eine erste 3D-Grafik

362

10.1.1 3D-Koordinatensystem

362

10.1.2 Aufbau des Programms

364

10.1.3 Zeichnungsfläche und Grafikszene

365

10.1.4 3D-Objekt mit Geometrie und Material

365

10.1.5 Kamera

366

10.1.6 Lichtquelle und Darstellung

367

10.2 Animation

367

10.3 Position, Perspektive und Licht

369

11 jQuery

372

11.1 Aufbau

372

11.2 Selektoren und Methoden

375

11.3 Ereignisse

379

11.4 Animationen

382

11.5 Beispiel: sinusförmige Bewegung

386

11.6 jQuery und Ajax

388

12 Mobile Apps mit Onsen UI

393

12.1 Aufbau einer Seite

394

12.1.1 Erste Seite

394

12.1.2 Liste von Elementen

396

12.1.3 Tabelle mit Elementen

399

12.2 Elemente innerhalb einer Seite

400

12.2.1 Icons und Fabs

401

12.2.2 Standarddialoge

404

12.2.3 Eingabefelder

408

12.2.4 Auswahlfelder

414

12.2.5 Auswahl aus Zahlenbereich

419

13 Mathematische Ausdrücke mit MathML und MathJax

423

13.1 Grundelemente

423

13.2 Klammern und Tabellen

426

13.3 Zusammenfassende Ausdrücke

429

13.4 Brüche

431

13.5 Mathematische Zeichen

432

13.6 Dynamisch erzeugte Ausdrücke

435

14 Cookies

439

14.1 Cookies schreiben

440

14.1.1 Cookies verwalten

442

14.1.2 Cookies ausschalten

443

14.2 Cookies lesen

443

14.3 Cookies löschen

445

14.4 Adresse speichern

446

15 Beispielprojekte

451

15.1 Geldanlage

452

15.2 Fitnesswerte

452

15.3 Volkslauf

453

15.4 Kreditkarte prüfen

454

15.5 Patience

455

15.6 Memory

456

15.7 Snake

457

16 Medien, Zeichnungen und Sensoren

459

16.1 Mediendateien abspielen

459

16.1.1 Audiodateien

459

16.1.2 Videodateien

463

16.2 Canvas

465

16.2.1 Zeichnungen

465

16.2.2 Bilder

471

16.2.3 Formatierte Texte

473

16.3 Sensoren

475

16.3.1 Aufruf des Programms

476

16.3.2 Standort

477

16.3.3 Waytracking

480

16.3.4 Lagesensor

482

16.3.5 Beschleunigungssensor

486