An den Leser ... 2
Büro ... 4
Werkstatt ... 6
Wohnzimmer ... 8
Impressum ... 10
Inhaltsverzeichnis ... 12
Widmung ... 20
Vorwort ... 21
1. Fangen wir mit einem Gerüst an -- Aufbau einer Seite und die wichtigsten Elemente ... 23
Die drei ??? -- HTML, CSS und JavaScript ... 24
Der Werkzeugkasten ... 26
Webbrowser ... 27
Editor ... 28
Das erste Dokument ... 29
Markup und Tags ... 31
Struktur einer HTML-Seite ... 33
Attribute, leere Tags und Links ... 35
Links zwischen zwei Seiten -- über den Gartenzaun ... 40
Das Ziel im Auge -- das Attribut target ... 43
Tinks und Largels ... 45
Text war gestern -- Bilder ... 47
Bevor das Bild geladen wurde ... ... 49
... und hinterher ... 49
Das sollte man im Kopf haben -- mehr vom ... 52
Andere Länder, andere Zeichen: Character Encoding ... 54
Denk noch mal drüber nach: Übungen ... 58
2. Das World Wide Web, unendliche Weiten -- Serverkommunikation, Adressen, Standards ... 61
Wo finde ich denn nun meine Seite: Von Webservern und DNS ... 62
URLs -- alles an der richtigen Adresse ... 65
Ferngespräch für Herrn Web Server -- HTTP ... 69
Jetzt wird es ernst -- unser eigener Webserver ... 73
Das obligatorische Geschichtskapitel -- die Geschichte des World Wide Web ... 81
Man nehme ein ARPANET und lasse es reifen ... ... 81
... rühre etwas Hypertext unter ... ... 82
... und köchle alles, bis es bunt wird ... 84
Das Ende von Mosaic und der erste Browserkrieg ... 85
Microsofts Monopol und der zweite Browserkrieg -- der Rote Panda schlägt zurück ... 88
HTML ist nicht gleich HTML -- eine Sprache, verschiedene Dialekte ... 90
3. Jetzt kommt Farbe ins Spiel -- Einführung in CSS ... 93
Webseiten mit Stil -- Inline Styles und Farben ... 94
Welches Element hätten's denn gerne: Selektoren nach Tags, IDs und Klassen ... 100
Übungen mit dem Regenbogen ... 108
Drei Farben reichen völlig aus -- das RGB-Modell ... 112
Durchschaut: rgba() und opacity ... 116
Wir halten uns im Hintergrund -- background-image ... 118
Wohin damit? background-repeat, background-position und background-attachment ... 120
Hier war ich doch schon mal -- Pseudoklassen für Links ... 127
Farben und Selektoren: Übungen zum Abschluss ... 129
4. Kaskaden für Bossingen -- CSS-Selektoren und Typografie ... 131
Was heißt jetzt eigentlich Cascading? ... 132
CSS -- den Tätern auf der Spur ... 136
Größe zeigen -- mit font-size ... 140
Ahnenforschung für Anfänger -- Selektoren für Kinder und Nachfahren ... 145
Für Fortgeschrittene: Nachfahren-Selektoren mit mehreren Ebenen ... 150
Seichte Kost: nur die direkten Kinder selektieren ... 151
Von Schriftgrößen und Selektoren: Übungen ... 152
Es muss nicht immer Times New Roman sein -- Schriftarten ... 158
Gutenbergs Erben -- mehr von Schriften und Typografie ... 164
Die Schriftliche Prüfung: Übungen ... 168
5. Ordnung in die Plattensammlung -- Listen und Tabellen ... 171
Besser als Zeilenumbruch: Listen ... 172
Wer braucht da noch PowerPoint: CSS-Styles für Listen ... 178
Definitionssache -- Definition Lists mit ... 181
Eine Liste von Übungen zu Listen ... 184
Die Liste ist nicht genug -- Tabellen ... 187
Was steckt noch drin? Tabellen im Detail ... 191
Auch Tabellen brauchen CSS-Liebe ... 197
Gefängnisreform für größere Zellen -- rowspan und colspan ... 204
Tabellarische Übungen ... 206
6. Von der Wiege bis zur Bahre -- Formulare ... 211
Mehr als nur anfragen: endlich mitreden. ... 212
Daten eingeben und zum Server schicken -- einfaches Formular ... 215
Request ist nicht gleich Request -- post und get ... 223
Aber tippen ist anstrengend! Checkboxen und Radiobuttons ... 226
Wer ist denn nun der Auserwählte? Select-Boxen ... 230
Jetzt kommt endlich die Suche! ... 236
Das muss ja nicht jeder sehen -- versteckte Felder ... 239
Jetzt kannst du doch noch Opern quatschen -- Textarea ... 240
Formulare 2.0 -- viel Neues in HTML5 ... 243
Formulare müssen nicht nach Behörde aussehen -- CSS für Forms ... 246
Übungen! Neue Felder, neue Stile ... 251
Alle Dateien laden hoooooch -- File Upload ... 254
7. Von Rändern und Schuhkartons -- Seitenlayout in HTML und CSS ... 257
Die Grundlagen für alles -- Block- und Inline-Elemente ... 258
Das Box-Model -- stapelbares HTML ... 260
Relativ und absolut ... 264
Fünf kleine -Container ... ... 266
Das Gesetz des Kompasses ... 269
Und weiter geht's mit den fünf s ... 271
Abstände aus der Nähe betrachtet ... 272
10 Liter HTML in einem 5-Liter-: Overflow ... 274
Schrödinger in seinem Element -- Container schubsen ... 276
Genau dort -- absolute Positionierung ... 278
Der StapelfixT-Stapelplan ... 280
Mehr zu Positionierung ... 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 -- 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 -- 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
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
10. Jetzt muss es sich aber endlich bewegen -- JavaScript ... 379
JavaScript, was ist das eigentlich? ... 380
Und wie geht es jetzt? ... 383
Zählen nach Zahlen ... 385
Merk's dir für später -- Variablen ... 389
Übungen zu Variablen ... 394
Zahlentheorie ... 397
Daten rein, Daten raus I: Ausgabe ... 400
Woher weiß ich, wenn ein Fehler auftritt? ... 405
Zeichen, Zeichen, Zeichenkette ... 407
Daten rein, Daten raus II: Eingabe ... 410
Übungen zu Strings und Ausgabe ... 414
Wenn ... dann ... ... 418
Formulare -- bitte geben Sie Ihre Adresse an ... 424
Wenn die Praxis funktioniert, dann fehlt noch die Theorie ... 429
Was? Wie? Wenn? Dann? ... 432
11. Programmieren mit Bausteinen -- Funktionen ... 435
So funktioniert's mit Funktionen ... 443
Mehr Werte als man zählen kann -- Arrays ... 447
Ein Übung für zwischendurch ... 453
Von vorne bis hinten mit for ... 455
Von Dingen und Zeigern ... 461
Wie funktionieren meine Funktionen? ... 464
Manchmal geht alles schief -- Fehler ... 466
Funktionen, Bürger erster Klasse ... 471
Funktionen in Funktionen in Funktionen ... 476
12. Augen auf, du hast User! -- Eventhandler ... 481
Reaktionsfreudiges JavaScript -- Eventhandler ... 482
Die Events mit der Maus ... 489
Mehr von der Maus ... 492
Das Ziel im Auge -- event.target ... 495
Gezieltes Mausen ... 499
JavaScript im Schaumbad -- blubbernde Events ... 502
Keyboardevents ... 505
Timeout, Formevents und andere ... 508
Übungen! ... 510
13. Gerade stand das da noch nicht -- DOM-Manipulation ... 513
Ein DOM für die HTML-Seite ... 514
Gärtnern für Webentwickler -- das DOM als Baum ... 518
Des Zauberlehrlings Hausaufgabe ... 521
Mal wieder Wiederholungen -- while-Schleifen ... 530
Von einem Element zum anderen -- navigieren im DOM ... 532
Rein, rauf, runter, raus -- Elemente erzeugen, einfügen, entfernen und verschieben ... 536
Attribute und Styles ... 542
Die Meisterprüfung des DOM-Zauberlehrlings ... 544
14. Schrödingers Welt der Programmierung -- Objekte und JSON ... 549
Objektorientierung -- was und warum? ... 550
Objekte für Einsteiger ... 553
Ran an die Eigenschaften ... 556
Und jetzt mit Methoden ... 561
Das Schlüsselwort this und Function Binding ... 563
Was steckt drin? for ... in ... 567
Übungen mit Objekten ... 571
Konstruktoren und Prototypen ... 573
Vererbung -- und niemand muss dafür sterben ... 576
Übungen zu Prototypen und Vererbung ... 582
15. Halt, hiergeblieben! Cookies, WebStorage und File-API ... 587
Der Griff in die Keksdose ... 588
Cookies ganz korrekt ... 590
Cookies selbst gebacken ... 593
Jetzt wird gebacken ... 594
Daten, so weit das Auge reicht -- Web Storage ... 599
Iterieren über Web Storage ... 601
Das Beispiel am Stück -- und mit Objekt! ... 604
Mehr zu Local Storage -- Events und Limits ... 607
Von Sandbox zu Sandbox ... 608
Die große Datenhalde ... 610
Heute das Dateisystem, morgen die Welt ... 611
Was du schon immer über eine Datei wissen wolltest ... 612
Dateien lesen -- der FileReader ... 613
Dateien in der Praxis ... 618
Das switch-Statement ... 623
Dateien und Bäckereien ... 627
Dateiauswahl -- wir können auch anders ... 632
Und wir können auch noch anders -- noch mal Dateiauswahl ... 634
16. Alles kann ein Radio sein, oder ein Fernseher, oder sogar eine Leinwand -- Multimedia ... 639
Bild und Ton im Browser ... 640
Die MIME-Types ... 644
Die Details ... 644
Die Fernbedienung für alles -- und mit JavaScript ... 646
Was alles gehen und schiefgehen kann ... 651
Das ist nur ein Teil der möglichen Events: ... 652
Was war und was kommt mit Multimedia ... 653
Schrödingers Terassenradio ... 656
Picasso, Monet, Schrödinger -- zeichnen auf dem ... 659
Das JavaScript für die Grundausstattung ... 661
Ein Beispiel macht alles klar -- das erste Rechteck ... 662
Transformationen -- die Leinwand drehen und strecken ... 666
Werkzeug zur Hand, das Diagramm wird transformiert ... 668
Und jetzt mit Tabellen-Daten ... 669
Koordinatenballett ... 672
Kunst und Text ... 674
Auf dem rechten Pfad ... 680
Bild im Bild ... 684
Farbähnliche Dingsdas ... 688
Übungen mit interessanter Überschrift ... 693
Leinwand für Fortgeschrittene ... 697
17. Schrödinger will's wissen -- Ajax ... 699
Was ist Ajax? ... 700
Hallo Server, bitte kommen ... 704
Hol dir die Antwort ... 707
Die königliche POST ist da ... 710
Wie Majestät wünschen ... 713
XmlHttpRequest Level 2 -- jetzt mit Nutzlast ... 719
Der Rest ist wieder Geschichte -- History-API ... 722
Die Sache mit dem Fragment ... 726
Ich darf aber nicht mit Fremden sprechen -- die Same Origin Policy ... 729
Ja wo verbinden sie denn hin? ... 734
Jenseits von AJAX -- Web Sockets ... 736
18. Jedem das Seine -- Responsive Webdesign und Mobile Devices ... 739
Was ist Responsive Design, und wozu ist es gut? ... 740
Jedem seine Styles -- Media Types in CSS2 ... 743
Media Features -- CSS3 schafft neue Möglichkeiten ... 746
Stapelfix Responsive ... 747
Schritt 1: Zuerst wird die Sidebar umpositioniert ... 750
Schritt 2: Jetzt mit handytauglicher Navigation ... 752
All die vielen Bildschirme! ... 756
Das Kreuz mit den Bildern ... 758
Sture Bilder ... 762
Größer ... größer ... größer ... zu groß! ... 765
Sparsamer laden mit data-Attributen ... 768
Was kann so ein Mobildings sonst noch? ... 772
Fingergetatsche ... 772
Wo zum Teufel bin ich? ... 775
Schrödinger unterwegs ... 782
Der Verfolger ... 785
19. Der Blick nach vorn -- was geht noch? ... 787
CSS Bibliotheken und Frameworks ... 789
JavaScript-Bibliotheken und neue APIs ... 793
Aber es gibt auch noch andere Ansätze ... 795
Programmieren geht nicht nur im Browser ... 797
Reine Handarbeit macht auch nicht glücklich ... 801
Aber das Wichtigste ... 802
Anhang A. Zeichencodes ... 803
Zeichencodes ... 804
Tabelle 1: ASCII -- Codes für keypress ... 805
Tabelle 2: Tastencodes für keyup und keydown ... 806
Anhang B. Reguläre Ausdrücke ... 807
Muster für Zeichenketten ... 808
Reguläre Ausdrücke in JavaScript ... 812
Die wichtigsten Elemente von regulären Ausdrücken, kurz zusammengefasst ... 817
Index ... 819
