Schrödinger lernt HTML5, CSS3 und JavaScript
Das etwas andere Fachbuch. Der volle Durchmarsch für alle, die HTML, CSS und JavaScript lernen wollen. Mit Syntax-Highlighting!
2nd Edition
Published on 28. October 2016
Book
Paperback/Softback
864 pages
978-3-8362-4257-8 (ISBN)
Description
Eine runde Sache: Schrödinger wird Webentwickler! Zum Glück hat er einen Kumpel, der auf jede Frage eine Antwort weiß, wenn er nur genug Kaffee bekommt: Zusammen lernt ihr HTML, CSS und JavaScript, ohne das Buch zu wechseln - was auch viel zu schade wäre. Mit Witz, der nötigen Theorie, Unmengen an Code und Tipps, Übungen und den verdienten Pausen. Von "Hallo Webwelt" bis zu Geolocation und Touchscreens: alles auf dem neuesten Stand, und wenn Du willst, mit Deinem eigenen Webserver.
Aus dem Inhalt:
Ausführlicher Einstieg in HTML, CSS und JavaScript
Designs umsetzen und gute GUIs erstellen
Ereignisse behandeln und Funktionen einsetzen
Serverkommunikation, AJAX und Websockets nutzen
Mit oder ohne HTML5 und CSS3
Karten einbinden und GPS-Daten auswerten
Responsive Webdesign und Touch-Events
Webseiten für einfach alles, was einen Bildschirm hat
Video- und Audiomaterial einbinden
Zeichnen mit Canvas
Die Fachpresse zur Vorauflage:
c't: »Das Buch vermittelt entspannt und augenzwinkernd, wie man zeitgemäß eine Webseite gestaltet.«
Mac Life: »Kein stures Schulbuch, sondern ein Werk zum Mitmachen!«
iX - Magazin für professionelle Informationstechnik: »Für Webdesign-Einsteiger eine vergnügliche Lektüre!«
More details
Other editions
New editions
Book
07/2023
4th Edition
Rheinwerk
€49.90
Available immediately
Kai Günster
Schrödinger lernt HTML5, CSS und JavaScript
Das etwas andere Fachbuch. Der volle Durchmarsch für alle, die HTML5, CSS3 und JavaScript lernen wollen
Book
11/2018
3rd Edition
Rheinwerk
€44.90
Article exhausted; check for reprint
Previous edition
Book
08/2013
1st Edition
Galileo Computing
€44.90
Article exhausted; check for reprint
Person
Author
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. Seine Fachbücher werden für ihre klare Sprache, ihren Unterhaltungswert und ihre kompakten, lehrreichen Beispiele geschätzt.
Content
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 StapelfixTM-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 -- 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
Wenn ... dann ... ... 424
Formulare -- bitte geben Sie Ihre Adresse an ... 430
Wenn die Praxis funktioniert, dann fehlt noch die Theorie ... 435
Was? Wie? Wenn? Dann? ... 438
11. Programmieren mit Bausteinen -- Funktionen ... 441
So funktioniert's mit Funktionen ... 449
Mehr Werte als man zählen kann -- Arrays ... 453
Eine Übung für zwischendurch ... 459
Von vorne bis hinten mit for ... 461
Von Dingen und Zeigern ... 467
Wie funktionieren meine Funktionen? ... 470
Manchmal geht alles schief -- Fehler ... 472
Funktionen, Bürger erster Klasse ... 477
Funktionen in Funktionen in Funktionen ... 482
12. Augen auf, du hast User! -- Eventhandler ... 487
Reaktionsfreudiges JavaScript -- Eventhandler ... 488
Die Events mit der Maus ... 495
Mehr von der Maus ... 498
Das Ziel im Auge -- event.target ... 501
Gezieltes Mausen ... 505
JavaScript im Schaumbad -- blubbernde Events ... 508
Keyboardevents ... 511
Timeout, Formevents und andere ... 514
Übungen! ... 516
13. Gerade stand das da noch nicht -- DOM-Manipulation ... 519
Ein DOM für die HTML-Seite ... 520
Gärtnern für Webentwickler -- das DOM als Baum ... 524
Des Zauberlehrlings Hausaufgabe ... 527
Mal wieder Wiederholungen -- while-Schleifen ... 536
Von einem Element zum anderen -- navigieren im DOM ... 538
Rein, rauf, runter, raus -- Elemente erzeugen, einfügen, entfernen und verschieben ... 542
Attribute und Styles ... 548
Die Meisterprüfung des DOM-Zauberlehrlings ... 550
14. Schrödingers Welt der Programmierung -- Objekte und JSON ... 555
Objektorientierung -- was und warum? ... 556
Objekte für Einsteiger ... 559
Ran an die Eigenschaften ... 562
Und jetzt mit Methoden ... 567
Das Schlüsselwort this und Function Binding ... 569
Was steckt drin? for ... in ... 573
Übungen mit Objekten ... 577
Konstruktoren und Prototypen ... 579
Vererbung -- und niemand muss dafür sterben ... 582
Übungen zu Prototypen und Vererbung ... 588
15. Halt, hiergeblieben! -- Cookies, WebStorage und File-API ... 593
Der Griff in die Keksdose ... 594
Cookies ganz korrekt ... 596
Cookies selbst gebacken ... 599
Jetzt wird gebacken ... 600
Daten, so weit das Auge reicht -- Web Storage ... 605
Iterieren über Web Storage ... 607
Das Beispiel am Stück -- und mit Objekt! ... 610
Mehr zu Local Storage -- Events und Limits ... 613
Von Sandbox zu Sandbox ... 614
Die große Datenhalde ... 616
Heute das Dateisystem, morgen die Welt ... 617
Was du schon immer über eine Datei wissen wolltest ... 618
Dateien lesen - der FileReader ... 619
Dateien in der Praxis ... 624
Das switch-Statement ... 629
Dateien und Bäckereien ... 633
Dateiauswahl -- wir können auch anders ... 638
Und wir können auch noch anders -- noch mal Dateiauswahl ... 640
16. Alles kann ein Radio sein, oder ein Fernseher, oder sogar eine Leinwand -- Multimedia ... 645
Bild und Ton im Browser ... 646
Die MIME-Types ... 650
Die Details ... 650
Die Fernbedienung für alles -- <audio> und <video> mit JavaScript ... 652
Was alles gehen und schiefgehen kann ... 657
Was war und was kommt mit Multimedia ... 659
Schrödingers Terassenradio ... 662
Picasso, Monet, Schrödinger -- zeichnen auf dem <canvas> ... 665
Das JavaScript für die Grundausstattung ... 667
Ein Beispiel macht alles klar -- das erste Rechteck ... 668
Transformationen -- die Leinwand drehen und strecken ... 672
Werkzeug zur Hand, das Diagramm wird transformiert ... 674
Und jetzt mit Tabellen-Daten ... 675
Koordinatenballett ... 678
Kunst und Text ... 680
Auf dem rechten Pfad ... 686
Bild im Bild ... 690
Farbähnliche Dingsdas ... 694
Übungen mit interessanter Überschrift ... 699
Leinwand für Fortgeschrittene ... 703
17. Schrödinger will's wissen -- Ajax ... 705
Was ist Ajax? ... 706
Hallo Server, bitte kommen ... 710
Hol dir die Antwort ... 713
Die königliche POST ist da ... 716
Wie Majestät wünschen ... 719
XmlHttpRequest Level 2 -- jetzt mit Nutzlast ... 725
Der Rest ist wieder Geschichte -- History-API ... 728
Die Sache mit dem Fragment ... 732
Ich darf aber nicht mit Fremden sprechen -- die Same Origin Policy ... 735
Ja wo verbinden sie denn hin? ... 740
Jenseits von AJAX -- Web Sockets ... 742
18. Jedem das Seine -- Responsive Webdesign und Mobile Devices ... 745
Was ist Responsive Design, und wozu ist es gut? ... 746
Jedem seine Styles -- Media Types in CSS2 ... 749
Media Features -- CSS3 schafft neue Möglichkeiten ... 752
Stapelfix Responsive ... 753
Schritt 1: Zuerst wird die Sidebar umpositioniert ... 756
Schritt 2: Jetzt mit handytauglicher Navigation ... 758
All die vielen Bildschirme! ... 762
Das Kreuz mit den Bildern ... 764
Sture Bilder ... 768
Größer ... größer ... größer ... zu groß! ... 771
Sparsamer laden mit data-Attributen ... 774
Was kann so ein Mobildings sonst noch? ... 778
Fingergetatsche ... 778
Wo zum Teufel bin ich? ... 781
Schrödinger unterwegs ... 788
Der Verfolger ... 791
19. Der Blick nach vorn -- was geht noch? ... 793
CSS Bibliotheken und Frameworks ... 795
JavaScript-Bibliotheken und neue APIs ... 799
Aber es gibt auch noch andere Ansätze ... 801
Programmieren geht nicht nur im Browser ... 803
Reine Handarbeit macht auch nicht glücklich ... 807
Aber das Wichtigste ... 808
20. Alles neu macht ECMAScript 2015 -- ECMAScript 2015 ... 809
Variablen, solange wir sie brauchen -- Block-Scope ... 810
Die Unveränderlichen ... 812
Vereinfachte Syntax für anonyme Funktionen ... 813
Viel Neues bei Parametern ... 816
Gut verteilt mit dem Spread-Operator ... 818
Einfach mal schleifen lassen -- neue Syntax der for-Schleife ... 819
Neue Datentypen: Sets und Maps ... 820
Mehr Zuweisung fürs gleiche Geld ... 822
Strings besser zusammenbauen ... 826
Klassen in JavaScript -- ja, die gibt's jetzt ... 827
Alles wird super ... 830
Statische Felder ... 832
Neue Tricks an alten Typen ... 833
Internationalisierung -- Formatieren für überall ... 837
Internationalisierung -- gut sortiert, und das überall ... 843
Anhang. Reguläre Ausdrücke und Zeichencodes ... 845
Muster für Zeichenketten ... 846
Reguläre Ausdrücke in JavaScript ... 850
Die wichtigsten Elemente von regulären Ausdrücken, kurz zusammengefasst ... 855
Zeichencodes ... 857
Tabelle 1: ASCII -- Codes für keypress ... 858
Tabelle 2: Tastencodes für keyup und keydown ... 859
Index ... 860