Kai Günster

Schrödinger lernt HTML5, CSS und JavaScript

Das etwas andere Fachbuch. Mit Syntax-Highlighting. Inkl. Downloads

• Broschiertes Buch

Produktbeschreibung

Auch in der dritten Auflage 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 zu schade wäre. Mit viel Witz, der nötigen Theorie, Unmengen an Code, Tipps, Übungen und den verdienten Pausen. Von "Hallo Webwelt" über AJAX bis zu Responsive Webdesign und Touchscreens: alles auf dem neuesten Stand und, wenn du willst, mit deinem eigenen Webserver. Umwerfende Beispiele, fantastisch illustriert.

Aus dem Inhalt:

Ausführlicher Einstieg in HTML, CSS und JavaScriptDesigns umsetzen und gute GUIs erstellenEreignisse behandeln und Funktionen einsetzenServerkommunikation, AJAX und Websockets nutzenMit oder ohne HTML5 und CSS3Karten einbinden und GPS-Daten auswertenResponsive Webdesign und Touch-EventsWebseiten für einfach alles, was einen Bildschirm hatVideo- und Audiomaterial einbindenZeichnenmit Canvas

Produktdetails

• Rheinwerk Computing
• Verlag: Rheinwerk Verlag
• Artikelnr. des Verlages: 459/06825
• 3., überarb. Aufl.
• Seitenzahl: 854
• Erscheinungstermin: 23. November 2018
• Deutsch
• Abmessung: 234mm x 205mm x 54mm
• Gewicht: 2024g
• ISBN-13: 9783836268257
• ISBN-10: 3836268256
• Artikelnr.: 54135811

Autorenporträt

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.

Inhaltsangabe

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 ... 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 ... 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 -Container ... ... 264

Das Gesetz des Kompasses ... 267

Und weiter geht's mit den fünf s ... 269

Abstände aus der Nähe betrachtet ... 270

10 Liter HTML in einem 5-Liter- -- 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 -- 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 -- und 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 ... 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

Rezensionen

»Auf amüsante Art Webtechnologien spielend lernen.« Akademie Druck + Medien Nord-West e.V. 201901