Widmung ... 2
An den Leser ... 3
Schrödingers Büro ... 4
Schrödingers Werkstatt ... 6
Schrödingers Wohnzimmer ... 8
Impressum ... 10
Inhaltsverzeichnis ... 12
Vorwort ... 20
1. Fangen wir mit einem Gerüst an -- Aufbau einer Seite und die wichtigsten Elemente ... 21
Die drei ??? -- HTML, CSS und JavaScript ... 22
Der Werkzeugkasten ... 24
Webbrowser ... 25
Editor ... 26
Das erste Dokument ... 27
Markup und Tags ... 29
Struktur einer HTML-Seite ... 31
Attribute, leere Tags und Links ... 33
Links zwischen zwei Seiten -- über den Gartenzaun ... 38
Das Ziel im Auge -- das Attribut target ... 41
Tinks und Largels ... 43
Text war gestern -- Bilder ... 45
Bevor das Bild geladen wurde ... ... 47
... und hinterher ... 47
Das sollte man im Kopf haben -- mehr vom <head> ... 50
Andere Länder, andere Zeichen: Character Encoding ... 52
Denk noch mal drüber nach: Übungen ... 56
2. Das World Wide Web, unendliche Weiten -- Serverkommunikation, Adressen, Standards ... 59
Wo finde ich denn nun meine Seite? Von Webservern und DNS ... 60
URLs -- alles an der richtigen Adresse ... 63
Ferngespräch für Herrn Web Server -- HTTP ... 67
Jetzt wird es ernst -- unser eigener Webserver ... 71
Hier geht's weiter für alle Systeme ... 77
Das obligatorische Geschichtskapitel -- die Geschichte des World Wide Web ... 79
Man nehme ein ARPANET und lasse es reifen ... ... 79
... rühre etwas Hypertext unter ... ... 80
... und köchle alles, bis es bunt wird ... 82
Das Ende von Mosaic und der erste Browserkrieg ... 83
Microsofts Monopol und der zweite Browserkrieg -- der Rote Panda schlägt zurück ... 86
HTML ist nicht gleich HTML -- eine Sprache, verschiedene Dialekte ... 88
3. Jetzt kommt Farbe ins Spiel -- Einführung in CSS ... 91
Webseiten mit Stil -- Inline Styles und Farben ... 92
Inline ist out -- Stylesheets ... 95
Welches Element hätten's denn gerne? Selektoren nach Tags, IDs und Klassen ... 98
Übungen mit dem Regenbogen ... 106
Drei Farben reichen völlig aus -- das RGB-Modell ... 110
Durchschaut: rgba() und opacity ... 114
Wir halten uns im Hintergrund -- background-image ... 116
Wohin damit? background-repeat, background-position und background-attachment ... 118
Hier war ich doch schon mal -- Pseudoklassen für Links ... 125
Farben und Selektoren: Übungen zum Abschluss ... 127
4. Kaskaden für Bossingen -- CSS-Selektoren und Typografie ... 129
Was heißt jetzt eigentlich Cascading? ... 130
CSS -- den Tätern auf der Spur ... 134
Größe zeigen -- mit font-size ... 138
Ahnenforschung für Anfänger -- Selektoren für Kinder und Nachfahren ... 143
Für Fortgeschrittene: Nachfahren-Selektoren mit mehreren Ebenen ... 148
Seichte Kost, nur die direkten Kinder selektieren ... 149
Von Schriftgrößen und Selektoren: Übungen ... 150
Es muss nicht immer Times New Roman sein -- Schriftarten ... 156
Gutenbergs Erben -- mehr von Schriften und Typografie ... 162
Die Schriftliche Prüfung: Übungen ... 166
5. Ordnung in die Plattensammlung -- Listen und Tabellen ... 169
Besser als Zeilenumbruch: Listen ... 170
Wer braucht da noch PowerPoint? CSS-Styles für Listen ... 176
Definitionssache -- Definition Lists mit <dl> ... 179
Eine Liste von Übungen zu Listen ... 182
Die Liste ist nicht genug -- Tabellen ... 185
Was steckt noch drin? Tabellen im Detail ... 189
Auch Tabellen brauchen CSS-Liebe ... 195
Gefängnisreform für größere Zellen -- rowspan und colspan ... 202
Tabellarische Übungen ... 204
6. Von der Wiege bis zur Bahre -- Formulare ... 209
Mehr als nur anfragen: endlich mitreden ... 210
Daten eingeben und zum Server schicken -- einfaches Formular ... 213
Request ist nicht gleich Request -- post und get ... 221
Aber tippen ist anstrengend! Checkboxen und Radiobuttons ... 224
Wer ist denn nun der Auserwählte? Select-Boxen ... 228
Jetzt kommt endlich die Suche! ... 234
Das muss ja nicht jeder sehen -- versteckte Felder ... 237
Jetzt kannst du doch noch Opern quatschen -- Textarea ... 238
Formulare 2.0 -- viel Neues in HTML5 ... 241
Formulare müssen nicht nach Behörde aussehen -- CSS für Forms ... 244
Übungen! Neue Felder, neue Stile ... 249
Alle Dateien laden hoooooch -- File Upload ... 252
7. Von Rändern und Schuhkartons -- Seitenlayout in HTML und CSS ... 255
Die Grundlagen für alles -- Block- und Inline-Elemente ... 256
Das Box-Model -- stapelbares HTML ... 258
Relativ und absolut ... 262
Fünf kleine <div>-Container ... ... 264
Das Gesetz des Kompasses ... 267
Und weiter geht's mit den fünf <div>s ... 269
Abstände aus der Nähe betrachtet ... 270
10 Liter HTML in einem 5-Liter-<div> -- Overflow ... 272
Schrödinger in seinem Element -- Container schubsen ... 274
Genau dort -- absolute Positionierung ... 276
Der StapelzeugTM-Stapelplan ... 278
Mehr zu Positionierung ... 283
Eiskalt berechnet ... 285
Elemente im Fluss -- float und clear ... 287
Floatende Layouts ... 291
Von Boxen und Stapeln ... 292
Und so sieht der Stylesheet am Ende aus: ... 297
Semantik statt <div> -- was gibt's Neues in HTML5? ... 298
Die CSS-Eigenschaft display -- warum? ... 300
Wer verdeckt wen? z-index ... 303
Das Fenster im Fenster ... 306
8. ENTlich, eine Website! Schrödinger setzt das Gelernte zusammen -- Eine Website von Anfang an ... 309
Eine Website von Anfang an ... 310
Die Seitenstruktur ... 313
Die Organisation des Stylesheets ... 318
Für die Kunst -- die Entengalerie ... 320
Entengalerie plus -- es geht noch cooler ... 326
9. Schöner wohnen mit CSS3 ... 329
Zum Schutz vor blauen Flecken -- runde Ecken ... 330
Rahmenbilder für Bilderrahmen ... 334
Urlaubsfotos aus den 80ern ... 338
Licht und Schatten ... 341
Die Kiste im Licht -- box-shadow ... 347
Schlüsselmomente ... 350
Und es bewegt sich doch ... 355
Und es bewegt sich noch etwas ... 359
Die Farbe des Kaffees ... 362
Gerade war gestern -- CSS-Transformationen ... 364
Jetzt bist du dran mit Drehen und Schieben ... 367
Auf in die dritte Dimension! ... 370
Gemeinsam sehen sie stark aus -- Effekte mit CSS3 ... 372
Wie in der Zeitung -- mehrspaltiges Layout ... 379
Die richtige Textverteilung ... 383
10. Jetzt muss es sich aber endlich bewegen -- JavaScript ... 385
JavaScript, was ist das eigentlich? ... 386
Und wie geht es jetzt? ... 389
Zählen nach Zahlen ... 391
Merk's dir für später -- Variablen ... 395
Übungen zu Variablen ... 400
Zahlentheorie ... 403
Daten rein, Daten raus I: Ausgabe ... 406
Woher weiß ich, wenn ein Fehler auftritt? ... 411
Zeichen, Zeichen, Zeichenkette ... 413
Daten rein, Daten raus II: Eingabe ... 416
Übungen zu Strings und Ausgabe ... 420
Strings besser zusammenbauen ... 424
Wenn ... dann ... ... 426
Variablen, solange wir sie brauchen -- Block-Scope ... 431
Formulare -- bitte geben Sie Ihre Adresse an ... 433
Wenn die Praxis funktioniert, dann fehlt noch die Theorie ... 437
Was? Wie? Wenn? Dann? ... 440
11. Programmieren mit Bausteinen -- Funktionen ... 443
Funktionen fürs Kochrezept ... 444
So funktioniert's mit Funktionen ... 451
Mehr Werte, als man zählen kann -- Arrays ... 455
Eine Übung für zwischendurch ... 461
Von vorne bis hinten mit for ... 463
Parameter-Überschuss ... 468
Parameter für Fortgeschrittene ... 469
Gut verteilt mit dem Spread-Operator ... 471
Einfach mal anders schleifen -- die for-of-Schleife ... 472
Mehr Zuweisung fürs gleiche Geld ... 473
Von Dingen und Zeigern ... 475
Wie funktionieren meine Funktionen? ... 478
Manchmal geht alles schief -- Fehler ... 480
Funktionen, Bürger erster Klasse ... 485
Funktionen in Funktionen in Funktionen ... 492
12. Augen auf, du hast User! -- Eventhandler ... 497
Reaktionsfreudiges JavaScript -- Eventhandler ... 498
Die Events mit der Maus ... 505
Mehr von der Maus ... 508
Das Ziel im Auge -- event.target ... 511
Gezieltes Mausen ... 515
JavaScript im Schaumbad -- blubbernde Events ... 518
Keyboardevents ... 521
Timeout, Formevents und andere ... 524
Übungen! ... 526
13. Gerade stand das da noch nicht -- DOM-Manipulation ... 529
Ein DOM für die HTML-Seite ... 530
Gärtnern für Webentwickler -- das DOM als Baum ... 534
Des Zauberlehrlings Hausaufgabe ... 537
Mal wieder Wiederholungen -- while-Schleifen ... 546
Von einem Element zum anderen -- navigieren im DOM ... 548
Rein, rauf, runter, raus -- Elemente erzeugen, einfügen, entfernen und verschieben ... 552
Attribute und Styles ... 558
Die Meisterprüfung des DOM-Zauberlehrlings ... 560
14. Schrödingers Welt der Programmierung -- Objekte und JSON ... 565
Objektorientierung -- was und warum? ... 566
Objekte für Einsteiger ... 569
Ran an die Eigenschaften ... 572
Und jetzt mit Methoden ... 577
Das Schlüsselwort this und Function Binding ... 579
Was steckt drin? for ... in ... 583
Übungen mit Objekten ... 587
Map macht's leichter ... 589
Konstruktoren und Prototypen ... 590
Vererbung -- und niemand muss dafür sterben ... 593
Übungen zu Prototypen und Vererbung ... 599
Klassen in JavaScript -- ja, die gibt's jetzt ... 603
Alles wird super ... 606
Statische Felder ... 608
15. Halt, hiergeblieben! Cookies, WebStorage und File-API ... 611
Der Griff in die Keksdose ... 612
Cookies ganz korrekt ... 614
Cookies selbst gebacken ... 617
Jetzt wird gebacken ... 618
Daten, so weit das Auge reicht -- Web Storage ... 623
Iterieren über Web Storage ... 625
Das Beispiel am Stück -- und mit Objekt! ... 628
Mehr zu Local Storage -- Events und Limits ... 631
Von Sandbox zu Sandbox ... 632
Die große Datenhalde ... 634
Heute das Dateisystem, morgen die Welt ... 635
Was du schon immer über eine Datei wissen wolltest ... 636
Dateien lesen - der FileReader ... 637
Dateien in der Praxis ... 642
Das switch-Statement ... 647
Dateien und Bäckereien ... 651
Dateiauswahl -- wir können auch anders ... 656
Und wir können auch noch anders -- noch mal Dateiauswahl ... 658
16. Alles kann ein Radio sein, oder ein Fernseher, oder sogar eine Leinwand -- Multimedia ... 663
Bild und Ton im Browser ... 664
Die MIME-Types ... 668
Die Details ... 668
Die Fernbedienung für alles -- <audio> und <video> mit JavaScript ... 670
Was alles gehen und schiefgehen kann ... 675
Was war und was kommt mit Multimedia ... 677
Schrödingers Terassenradio ... 680
Picasso, Monet, Schrödinger -- zeichnen auf dem <canvas> ... 683
Das JavaScript für die Grundausstattung ... 685
Ein Beispiel macht alles klar -- das erste Rechteck ... 686
Transformationen -- die Leinwand drehen und strecken ... 690
Werkzeug zur Hand, das Diagramm wird transformiert ... 692
Und jetzt mit Tabellen-Daten ... 693
Koordinatenballett ... 696
Kunst und Text ... 698
Auf dem rechten Pfad ... 704
Bild im Bild ... 708
Farbähnliche Dingsdas ... 712
Übungen mit interessanter Überschrift ... 717
Leinwand für Fortgeschrittene ... 721
17. Schrödinger will's wissen -- Ajax ... 723
Was ist Ajax? ... 724
Hallo Server, bitte kommen ... 728
Hol dir die Antwort ... 731
Die königliche POST ist da ... 734
Wie Majestät wünschen ... 737
XmlHttpRequest Level 2 -- jetzt mit Nutzlast ... 743
Der Rest ist wieder Geschichte -- History-API ... 746
Die Sache mit dem Fragment ... 750
Ich darf aber nicht mit Fremden sprechen -- die Same Origin Policy ... 753
Ja wo verbinden sie denn hin? ... 758
Jenseits von AJAX -- Web Sockets ... 760
18. Jedem das Seine -- Responsive Webdesign und Mobile Devices ... 763
Was ist Responsive Design, und wozu ist es gut? ... 764
Jedem seine Styles -- Media Types in CSS2 ... 767
Media Features -- CSS3 schafft neue Möglichkeiten ... 770
Stapelzeug Responsive ... 771
Schritt 1: Zuerst wird die Sidebar umpositioniert ... 774
Schritt 2: Jetzt mit handytauglicher Navigation ... 776
All die vielen Bildschirme! ... 780
Das Kreuz mit den Bildern ... 782
Sture Bilder ... 786
Größer ... größer ... größer ... zu groß! ... 789
Sparsamer laden mit data-Attributen ... 792
Was kann so ein Mobildings sonst noch? ... 796
Fingergetatsche ... 796
Wo zum Teufel bin ich? ... 799
Schrödinger unterwegs ... 806
Der Verfolger ... 809
Internationalisierung -- Formatieren für überall ... 811
Internationalisierung -- gut sortiert, und das überall ... 817
19. Der Blick nach vorn -- was geht noch? ... 819
CSS Bibliotheken und Frameworks ... 821
JavaScript-Bibliotheken und neue APIs ... 825
Aber es gibt auch noch andere Ansätze ... 827
Programmieren geht nicht nur im Browser ... 829
Reine Handarbeit macht auch nicht glücklich ... 833
Aber das Wichtigste ... 834
Anhang: Reguläre Ausdrücke und Zeichencodes ... 835
Muster für Zeichenketten ... 836
Reguläre Ausdrücke in JavaScript ... 840
Die wichtigsten Elemente von regulären Ausdrücken, kurz zusammengefasst ... 845
Zeichencodes ... 847
Tabelle 1: ASCII-Codes für keypress ... 848
Tabelle 2: Tastencodes für keyup und keydown ... 849
Index ... 850
