Schrödinger lernt HTML5, CSS und JavaScript

Kai Günster ist Web- und Softwareentwickler und hat Spaß an immer neuen Details. Er hält HTML5 für die beste Erfindung seit der Laugenbrezel und JavaScript für die Zukunft der GUI-Entwicklung. Um Schrödinger und seine Leser zu guten Webentwicklern zu machen, hat er sogar seine eigene Katze verpixelt. Sicherheitskritische Backends entwickelt er genauso unerschrocken wie komplexe Webanwendungen. Er schreibt neben Webentwicklung und Java auch über Brettspiele – online im Meople's Magazine.

lt;br> 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

»Sehr lesefreundlich, abwechslungsreich, dabei gut strukturiert und durchdacht gegliedert. Hervorragend erklärt, alles Schritt für Schritt. Besorgen, lesen, machen!« infotechnica.de 202307

»Buchtipp!«