Günster Schrödinger lernt HTML5, CSS und JavaScript

Das etwas andere Fachbuch
4. Auflage 2023
ISBN: 978-3-8362-9598-7
Verlag: Rheinwerk
Format: PDF
Kopierschutz: 0 - No protection

E-Book, Deutsch, 858 Seiten

Reihe: Rheinwerk Computing

Der beliebteste Schrödinger-Band in vierter Auflage! Schrödinger braucht Know-how in der Webentwicklung. 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 und erstellt Webauftritte für den Verein und für die Firma. Mit viel Witz, der nötigen Theorie, Unmengen an Code, Tipps, Übungen und den verdienten Pausen. Von 'Hallo Webwelt' über Maus- und Touchevents bis zum Responsive Webdesign: 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 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
• Zeichnen mit Canvas
• Responsive Webdesign und Touchevents
• Webseiten für einfach alles, was einen Bildschirm hat
• Video- und Audiomaterial einbinden

Autoren/Hrsg.

Günster, Kai

Inhaltsverzeichnis

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