Schrödinger lernt HTML5, CSS und JavaScript

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
Die Spezialisten - Formularfelder für alle Lebenslagen . . . 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 divs . . . 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 -- dranschreiben, was drinsteckt . . . 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 . . . 504
Mehr von der Maus . . . 507
Das Ziel im Auge -- event. target . . . 510
Gezieltes Mausen . . . 513
JavaScript im Schaumbad -- blubbernde Events . . . 516
Keyboardevents . . . 519
Timeout, Formevents und andere . . . 522
Übungen! . . . 524

13. Gerade stand das da noch nicht -- DOM-Manipulation . . . 527
Ein DOM für die HTML-Seite . . . 528
Gärtnern für Webentwickler -- das DOM als Baum . . . 532
Des Zauberlehrlings Hausaufgabe . . . 535
Mal wieder Wiederholungen -- while-Schleifen . . . 544
Von einem Element zum anderen -- navigieren im DOM . . . 546
Rein, rauf, runter, raus -- Elemente erzeugen, einfügen, entfernen und verschieben . . . 550
Attribute und Styles . . . 556
Die Meisterprüfung des DOM-Zauberlehrlings . . . 558

14. Schrödingers Welt der Programmierung -- Objekte und JSON . . . 563
Objektorientierung -- was und warum? . . . 564
Objekte für Einsteiger . . . 567
Ran an die Eigenschaften . . . 570
Und jetzt mit Methoden . . . 575
Das Schlüsselwort this und Function Binding . . . 577
Was steckt drin? for . . . in . . . 581
Übungen mit Objekten . . . 585
Map macht's leichter . . . 587
Konstruktoren und Prototypen . . . 588
Vererbung -- und niemand muss dafür sterben . . . 591
Übungen zu Prototypen und Vererbung . . . 597
Klassen in JavaScript -- ja, die gibt's jetzt . . . 601
Alles wird super . . . 604
Statische Felder . . . 606

15. Halt, hiergeblieben! Cookies, WebStorage und File-API . . . 609
Der Griff in die Keksdose . . . 610
Cookies ganz korrekt . . . 612
Cookies selbst gebacken . . . 615
Jetzt wird gebacken . . . 616
Daten, so weit das Auge reicht -- Web Storage . . . 621
Iterieren über Web Storage . . . 623
Das Beispiel am Stück -- und mit Objekt! . . . 626
Mehr zu Local Storage -- Events und Limits . . . 629
Von Sandbox zu Sandbox . . . 630
Die große Datenhalde . . . 632
Heute das Dateisystem, morgen die Welt . . . 633
Was du schon immer über eine Datei wissen wolltest . . . 634
Dateien lesen - der FileReader . . . 635
Dateien in der Praxis . . . 640
Das switch-Statement . . . 645
Dateien und Bäckereien . . . 649
Dateiauswahl -- wir können auch anders . . . 654
Und wir können auch noch anders -- noch mal Dateiauswahl . . . 656

16. Alles kann ein Radio sein, oder ein Fernseher, oder sogar eine Leinwand -- Multimedia . . . 661
Bild und Ton im Browser . . . 662
Die MIME-Types . . . 666
Die Details . . . 666
Die Fernbedienung für alles -- audio und video mit JavaScript . . . 668
Was alles gehen und schiefgehen kann . . . 673
Schrödingers Terassenradio . . . 676
Picasso, Monet, Schrödinger -- zeichnen auf dem canvas . . . 679
Das JavaScript für die Grundausstattung . . . 681
Ein Beispiel macht alles klar -- das erste Rechteck . . . 682
Transformationen -- die Leinwand drehen und strecken . . . 686
Werkzeug zur Hand, das Diagramm wird transformiert . . . 688
Und jetzt mit Tabellen-Daten . . . 689
Koordinatenballett . . . 692
Kunst und Text . . . 694
Auf dem rechten Pfad . . . 700
Bild im Bild . . . 704
Farbähnliche Dingsdas . . . 708
Übungen mit interessanter Überschrift . . . 713
Leinwand für Fortgeschrittene . . . 717

17. Schrödinger will's wissen -- Ajax . . . 719
Was ist Ajax? . . . 720
Hallo Server, bitte kommen . . . 724
Hol dir die Antwort . . . 727
Die königliche POST ist da . . . 730
Wie Majestät wünschen . . . 733
XmlHttpRequest Level 2 -- jetzt mit Nutzlast . . . 739
Der Rest ist wieder Geschichte -- History-API . . . 742
Die Sache mit dem Fragment . . . 746
Ich darf aber nicht mit Fremden sprechen -- die Same Origin Policy . . . 749
Ja wo verbinden sie denn hin? . . . 754
Jenseits von AJAX -- Web Sockets . . . 756

18. Verwandlungskunst . . . 759
Was ist Responsive Design, und wozu ist es gut? . . . 760
Jedem seine Styles -- Media Types in CSS2 . . . 763
Media Features -- CSS3 schafft neue Möglichkeiten . . . 766
Stapelzeug Responsive . . . 767
Schritt 1: Zuerst wird die Sidebar umpositioniert . . . 770
Schritt 2: Jetzt mit handytauglicher Navigation . . . 772
All die vielen Bildschirme! . . . 776
Das Kreuz mit den Bildern . . . 778
Sture Bilder . . . 782
Größer . . . größer . . . größer . . . zu groß! . . . 785
Sparsamer laden mit data-Attributen . . . 788
HTML im Regal - Grid-Layout . . . 792
Was kann so ein Mobildings sonst noch? . . . 798
Fingergetatsche . . . 798
Wo zum Teufel bin ich? . . . 801
Schrödinger unterwegs . . . 808
Der Verfolger . . . 811
Internationalisierung -- Formatieren für überall . . . 813
Internationalisierung -- gut sortiert, und das überall . . . 819

19. Der Blick nach vorn -- was geht noch? . . . 821
CSS Bibliotheken und Frameworks . . . 823
JavaScript-Bibliotheken und neue APIs . . . 827
Aber es gibt auch noch andere Ansätze . . . 829
Programmieren geht nicht nur im Browser . . . 831
Type Script . . . 835
Reine Handarbeit macht auch nicht glücklich . . . 837
Aber das Wichtigste . . . 838

Anhang: Reguläre Ausdrücke und Zeichencodes . . . 839
Muster für Zeichenketten . . . 840
Reguläre Ausdrücke in JavaScript . . . 844
Die wichtigsten Elemente von regulären Ausdrücken, kurz zusammengefasst . . . 849
Zeichencodes . . . 851
Tabelle 1: ASCII-Codes für keypress . . . 852
Tabelle 2: Tastencodes für keyup und keydown . . . 853

Index . . . 854