Inhaltsverzeichnis

Alle Kapitel aufklappen
Alle Kapitel zuklappen
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
Formulare 2.0 – viel Neues in HTML5
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 <div>s
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> – 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
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
505
Mehr von der Maus
508
Das Ziel im Auge – event.target
511
Gezieltes Mausen
515
JavaScript im Schaumbad – blubbernde Events
518
Keyboardevents
521
Timeout, Formevents und andere
524
Übungen!
526
13 Gerade stand das da noch nicht – DOM-Manipulation
529
Ein DOM für die HTML-Seite
530
Gärtnern für Webentwickler – das DOM als Baum
534
Des Zauberlehrlings Hausaufgabe
537
Mal wieder Wiederholungen – while-Schleifen
546
Von einem Element zum anderen – navigieren im DOM
548
Rein, rauf, runter, raus – Elemente erzeugen, einfügen, entfernen und verschieben
552
Attribute und Styles
558
Die Meisterprüfung des DOM-Zauberlehrlings
560
14 Schrödingers Welt der Programmierung – Objekte und JSON
565
Objektorientierung – was und warum?
566
Objekte für Einsteiger
569
Ran an die Eigenschaften
572
Und jetzt mit Methoden
577
Das Schlüsselwort this und Function Binding
579
Was steckt drin? for … in
583
Übungen mit Objekten
587
Map macht's leichter
589
Konstruktoren und Prototypen
590
Vererbung – und niemand muss dafür sterben
593
Übungen zu Prototypen und Vererbung
599
Klassen in JavaScript – ja, die gibt's jetzt
603
Alles wird super
606
Statische Felder
608
15 Halt, hiergeblieben! Cookies, WebStorage und File-API
611
Der Griff in die Keksdose
612
Cookies ganz korrekt
614
Cookies selbst gebacken
617
Jetzt wird gebacken
618
Daten, so weit das Auge reicht – Web Storage
623
Iterieren über Web Storage
625
Das Beispiel am Stück – und mit Objekt!
628
Mehr zu Local Storage – Events und Limits
631
Von Sandbox zu Sandbox
632
Die große Datenhalde
634
Heute das Dateisystem, morgen die Welt
635
Was du schon immer über eine Datei wissen wolltest
636
Dateien lesen - der FileReader
637
Dateien in der Praxis
642
Das switch-Statement
647
Dateien und Bäckereien
651
Dateiauswahl – wir können auch anders
656
Und wir können auch noch anders – noch mal Dateiauswahl
658
16 Alles kann ein Radio sein, oder ein Fernseher, oder sogar eine Leinwand – Multimedia
663
Bild und Ton im Browser
664
Die MIME-Types
668
Die Details
668
Die Fernbedienung für alles – <audio> und <video> mit JavaScript
670
Was alles gehen und schiefgehen kann
675
Was war und was kommt mit Multimedia
677
Schrödingers Terassenradio
680
Picasso, Monet, Schrödinger – zeichnen auf dem <canvas>
683
Das JavaScript für die Grundausstattung
685
Ein Beispiel macht alles klar – das erste Rechteck
686
Transformationen – die Leinwand drehen und strecken
690
Werkzeug zur Hand, das Diagramm wird transformiert
692
Und jetzt mit Tabellen-Daten
693
Koordinatenballett
696
Kunst und Text
698
Auf dem rechten Pfad
704
Bild im Bild
708
Farbähnliche Dingsdas
712
Übungen mit interessanter Überschrift
717
Leinwand für Fortgeschrittene
721
17 Schrödinger will's wissen – Ajax
723
Was ist Ajax?
724
Hallo Server, bitte kommen
728
Hol dir die Antwort
731
Die königliche POST ist da
734
Wie Majestät wünschen
737
XmlHttpRequest Level 2 – jetzt mit Nutzlast
743
Der Rest ist wieder Geschichte – History-API
746
Die Sache mit dem Fragment
750
Ich darf aber nicht mit Fremden sprechen – die Same Origin Policy
753
Ja wo verbinden sie denn hin?
758
Jenseits von AJAX – Web Sockets
760
18 Jedem das Seine – Responsive Webdesign und Mobile Devices
763
Was ist Responsive Design, und wozu ist es gut?
764
Jedem seine Styles – Media Types in CSS2
767
Media Features – CSS3 schafft neue Möglichkeiten
770
Stapelzeug Responsive
771
Schritt 1: Zuerst wird die Sidebar umpositioniert
774
Schritt 2: Jetzt mit handytauglicher Navigation
776
All die vielen Bildschirme!
780
Das Kreuz mit den Bildern
782
Sture Bilder
786
Größer … größer … größer … zu groß!
789
Sparsamer laden mit data-Attributen
792
Was kann so ein Mobildings sonst noch?
796
Fingergetatsche
796
Wo zum Teufel bin ich?
799
Schrödinger unterwegs
806
Der Verfolger
809
Internationalisierung – Formatieren für überall
811
Internationalisierung – gut sortiert, und das überall
817
19 Der Blick nach vorn – was geht noch?
819
CSS Bibliotheken und Frameworks
821
JavaScript-Bibliotheken und neue APIs
825
Aber es gibt auch noch andere Ansätze
827
Programmieren geht nicht nur im Browser
829
Reine Handarbeit macht auch nicht glücklich
833
Aber das Wichtigste
834
Anhang: Reguläre Ausdrücke und Zeichencodes
835
Muster für Zeichenketten
836
Reguläre Ausdrücke in JavaScript
840
Die wichtigsten Elemente von regulären Ausdrücken, kurz zusammengefasst
845
Zeichencodes
847
Tabelle 1: ASCII-Codes für keypress
848
Tabelle 2: Tastencodes für keyup und keydown
849
Index
850