Schrödinger lernt HTML5, CSS3 und JavaScript

Kai Günster ist Web- und Softwareentwickler. Im Beruf lässt er verteilte Java-Anwendungen Wirklichkeit werden und hält das Web User Interface eines Media Content Management Systems up to date. Privat hat er Spaß an Brettspielen und schreibt darüber online im Meople's Magazine .

  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 Stapelfix™-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