Schrödinger lernt HTML5, CSS und JavaScript: Rheinwerk Computing

Kai Günster ist Softwareentwickler, Autor eines Online-Magazins und mehrerer Fachbücher. Er ist Experte für Java-Technologien in verteilten Web-Anwendungen, HTML und JavaScript. Seine Projekterfahrung reicht von E-Government über komplexe Reisereservierungssysteme bis zur IP-Telefonie. Dabei bleibt er der Java-Plattform schon seit vielen Jahren treu, lotet immer wieder gern neue Features aus und setzt HTML5 für komfortable Web-GUIs ein. Er schreibt zum Eintauchen und Mitmachen. Leser schätzen seine Fachbücher für ihre klare Sprache, ihre kompakten, lehrreichen Beispiele, und nicht zuletzt für ihren Unterhaltungswert.

  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