Schrödinger lernt HTML5, CSS3 und JavaScript

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