Schrödinger lernt HTML5, CSS und JavaScript von Kai Günster
Das etwas andere Fachbuch. Der Einstieg mit Witz für alle, die HTML5, CSS und JavaScript lernen wollen

Kategorie: Bücher
Seiten / Format: 858 S
Erscheinungsjahr: 2023
Verlag: Rheinwerk VerlagRheinwerk Computing
Sprache: Deutsch
ISBN: 9783836295963
Auflage / Bände: 4.,überarb. Aufl.

<br>Widmung ... 2<br>An den Leser ... 3<br>Schrödingers Büro ... 4<br>Schrödingers Werkstatt ... 6<br>Schrödingers Wohnzimmer ... 8<br>Impressum ... 10<br>Inhaltsverzeichnis ... 12<br>Vorwort ... 20<br>1. Fangen wir mit einem Gerüst an -- Aufbau einer Seite und die wichtigsten Elemente ... 21<br><br>Die drei ??? -- HTML, CSS und JavaScript ... 22<br>Der Werkzeugkasten ... 24<br>Webbrowser ... 25<br>Editor ... 26<br>Das erste Dokument ... 27<br>Markup und Tags ... 29<br>Struktur einer HTML-Seite ... 31<br>Attribute, leere Tags und Links ... 33<br>Links zwischen zwei Seiten --über den Gartenzaun ... 38<br>Das Ziel im Auge -- das Attribut target ... 41<br>Tinks und Largels ... 43<br>Text war gestern -- Bilder ... 45<br>Bevor das Bild geladen wurde ... ... 47<br>... und hinterher ... 47<br>Das sollte man im Kopf haben -- mehr vom head ... 50<br>Andere Länder, andere Zeichen: Character Encoding ... 52<br>Denk noch mal drüber nach: Übungen ... 56<br><br>2. Das World Wide Web, unendliche Weiten -- Serverkommunikation, Adressen, Standards ... 59<br><br>Wo finde ich denn nun meine Seite? Von Webservern und DNS ... 60<br>URLs -- alles an der richtigen Adresse ... 63<br>Ferngespräch für Herrn Web Server -- HTTP ... 67<br>Jetzt wird es ernst -- unser eigener Webserver ... 71<br>Hier geht's weiter für alle Systeme ... 77<br>Das obligatorische Geschichtskapitel -- die Geschichte des World Wide Web ... 79<br>Man nehme ein ARPANET und lasse es reifen ... ... 79<br>... rühre etwas Hypertext unter ... ... 80<br>... und köchle alles, bis es bunt wird ... 82<br>Das Ende von Mosaic und der erste Browserkrieg ... 83<br>Microsofts Monopol und der zweite Browserkrieg -- der Rote Panda schlägt zurück ... 86<br>HTML ist nicht gleich HTML -- eine Sprache, verschiedene Dialekte ... 88<br><br>3. Jetzt kommt Farbe ins Spiel -- Einführung in CSS ... 91<br><br>Webseiten mit Stil -- Inline Styles und Farben ... 92<br>Inline ist out -- Stylesheets ... 95<br>Welches Element hätten's denn gerne? Selektoren nach Tags, IDs und Klassen ... 98<br>Übungen mit dem Regenbogen ... 106<br>Drei Farben reichen völlig aus -- das RGB-Modell ... 110<br>Durchschaut: rgba() und opacity ... 114<br>Wir halten uns im Hintergrund -- background-image ... 116<br>Wohin damit? background-repeat, background-position und background-attachment ... 118<br>Hier war ich doch schon mal -- Pseudoklassen für Links ... 125<br>Farben und Selektoren:Übungen zum Abschluss ... 127<br><br>4. Kaskaden für Bossingen -- CSS-Selektoren und Typografie ... 129<br><br>Was heißt jetzt eigentlich Cascading? ... 130<br>CSS -- den Tätern auf der Spur ... 134<br>Größe zeigen -- mit font-size ... 138<br>Ahnenforschung für Anfänger -- Selektoren für Kinder und Nachfahren ... 143<br>Für Fortgeschrittene: Nachfahren-Selektoren mit mehreren Ebenen ... 148<br>Seichte Kost, nur die direkten Kinder selektieren ... 149<br>Von Schriftgrößen und Selektoren: Übungen ... 150<br>Es muss nicht immer Times New Roman sein -- Schriftarten ... 156<br>Gutenbergs Erben -- mehr von Schriften und Typografie ... 162<br>Die Schriftliche Prüfung: Übungen ... 166<br><br>5. Ordnung in die Plattensammlung -- Listen und Tabellen ... 169<br><br>Besser als Zeilenumbruch: Listen ... 170<br>Wer braucht da noch PowerPoint? CSS-Styles für Listen ... 176<br>Definitionssache -- Definition Lists mit dl; ... 179<br>Eine Liste vonÜbungen zu Listen ... 182<br>Die Liste ist nicht genug -- Tabellen ... 185<br>Was steckt noch drin? Tabellen im Detail ... 189<br>Auch Tabellen brauchen CSS-Liebe ... 195<br>Gefängnisreform für größere Zellen -- rowspan und colspan ... 202<br>TabellarischeÜbungen ... 204<br><br>6. Von der Wiege bis zur Bahre -- Formulare ... 209<br><br>Mehr als nur anfragen: endlich mitreden ... 210<br>Daten eingeben und zum Server schicken -- einfaches Formular ... 213<br>Request ist nicht gleich Request -- post und get ... 221<br>Aber tippen ist anstrengend! Checkboxen und Radiobuttons ... 224<br>Wer ist denn nun der Auserwählte? Select-Boxen ... 228<br>Jetzt kommt endlich die Suche! ... 234<br>Das muss ja nicht jeder sehen -- versteckte Felder ... 237<br>Jetzt kannst du doch noch Opern quatschen -- Textarea ... 238<br>Die Spezialisten - Formularfelder für alle Lebenslagen ... 241<br>Formulare müssen nicht nach Behörde aussehen -- CSS für Forms ... 244<br>Übungen! Neue Felder, neue Stile ... 249<br>Alle Dateien laden hoooooch -- File Upload ... 252<br><br>7. Von Rändern und Schuhkartons -- Seitenlayout in HTML und CSS ... 255<br><br>Die Grundlagen für alles -- Block- und Inline-Elemente ... 256<br>Das Box-Model -- stapelbares HTML ... 258<br>Relativ und absolut ... 262<br>Fünf kleine div-Container ... ... 264<br>Das Gesetz des Kompasses ... 267<br>Und weiter geht's mit den fünf divs ... 269<br>Abstände aus der Nähe betrachtet ... 270<br>10 Liter HTML in einem 5-Liter-div -- Overflow ... 272<br>Schrödinger in seinem Element -- Container schubsen ... 274<br>Genau dort -- absolute Positionierung ... 276<br>Der StapelzeugTM-Stapelplan ... 278<br>Mehr zu Positionierung ... 283<br>Eiskalt berechnet ... 285<br>Elemente im Fluss -- float und clear ... 287<br>Floatende Layouts ... 291<br>Von Boxen und Stapeln ... 292<br>Und so sieht der Stylesheet am Ende aus: ... 297<br>Semantik statt div -- dranschreiben, was drinsteckt ... 298<br>Die CSS-Eigenschaft display -- warum? ... 300<br>Wer verdeckt wen? z-index ... 303<br>Das Fenster im Fenster ... 306<br><br>8. ENTlich, eine Website! Schrödinger setzt das Gelernte zusammen -- Eine Website von Anfang an ... 309<br><br>Eine Website von Anfang an ... 310<br>Die Seitenstruktur ... 313<br>Die Organisation des Stylesheets ... 318<br>Für die Kunst -- die Entengalerie ... 320<br>Entengalerie plus -- es geht noch cooler ... 326<br><br>9. Schöner wohnen mit CSS3 ... 329<br><br>Zum Schutz vor blauen Flecken -- runde Ecken ... 330<br>Rahmenbilder für Bilderrahmen ... 334<br>Urlaubsfotos aus den 80ern ... 338<br>Licht und Schatten ... 341<br>Die Kiste im Licht -- box-shadow ... 347<br>Schlüsselmomente ... 350<br>Und es bewegt sich doch ... 355<br>Und es bewegt sich noch etwas ... 359<br>Die Farbe des Kaffees ... 362<br>Gerade war gestern -- CSS-Transformationen ... 364<br>Jetzt bist du dran mit Drehen und Schieben ... 367<br>Auf in die dritte Dimension! ... 370<br>Gemeinsam sehen sie stark aus -- Effekte mit CSS3 ... 372<br>Wie in der Zeitung -- mehrspaltiges Layout ... 379<br>Die richtige Textverteilung ... 383<br><br>10. Jetzt muss es sich aber endlich bewegen -- JavaScript ... 385<br><br>JavaScript, was ist das eigentlich? ... 386<br>Und wie geht es jetzt? ... 389<br>Zählen nach Zahlen ... 391<br>Merk's dir für später -- Variablen ... 395<br>Übungen zu Variablen ... 400<br>Zahlentheorie ... 403<br>Daten rein, Daten raus I: Ausgabe ... 406<br>Woher weiß ich, wenn ein Fehler auftritt? ... 411<br>Zeichen, Zeichen, Zeichenkette ... 413<br>Daten rein, Daten raus II: Eingabe ... 416<br>Übungen zu Strings und Ausgabe ... 420<br>Strings besser zusammenbauen ... 424<br>Wenn ... dann ... ... 426<br>Variablen, solange wir sie brauchen -- Block-Scope ... 431<br>Formulare -- bitte geben Sie Ihre Adresse an ... 433<br>Wenn die Praxis funktioniert, dann fehlt noch die Theorie ... 437<br>Was? Wie? Wenn? Dann? ... 440<br><br>11. Programmieren mit Bausteinen -- Funktionen ... 443<br><br>Funktionen fürs Kochrezept ... 444<br>So funktioniert's mit Funktionen ... 451<br>Mehr Werte, als man zählen kann -- Arrays ... 455<br>EineÜbung für zwischendurch ... 461<br>Von vorne bis hinten mit for ... 463<br>Parameter-Überschuss ... 468<br>Parameter für Fortgeschrittene ... 469<br>Gut verteilt mit dem Spread-Operator ... 471<br>Einfach mal anders schleifen -- die for-of-Schleife ... 472<br>Mehr Zuweisung fürs gleiche Geld ... 473<br>Von Dingen und Zeigern ... 475<br>Wie funktionieren meine Funktionen? ... 478<br>Manchmal geht alles schief -- Fehler ... 480<br>Funktionen, Bürger erster Klasse ... 485<br>Funktionen in Funktionen in Funktionen ... 492<br><br>12. Augen auf, du hast User! -- Eventhandler ... 497<br><br>Reaktionsfreudiges JavaScript -- Eventhandler ... 498<br>Die Events mit der Maus ... 504<br>Mehr von der Maus ... 507<br>Das Ziel im Auge -- event.target ... 510<br>Gezieltes Mausen ... 513<br>JavaScript im Schaumbad -- blubbernde Events ... 516<br>Keyboardevents ... 519<br>Timeout, Formevents und andere ... 522<br>Übungen! ... 524<br><br>13. Gerade stand das da noch nicht -- DOM-Manipulation ... 527<br><br>Ein DOM für die HTML-Seite ... 528<br>Gärtnern für Webentwickler -- das DOM als Baum ... 532<br>Des Zauberlehrlings Hausaufgabe ... 535<br>Mal wieder Wiederholungen -- while-Schleifen ... 544<br>Von einem Element zum anderen -- navigieren im DOM ... 546<br>Rein, rauf, runter, raus -- Elemente erzeugen, einfügen, entfernen und verschieben ... 550<br>Attribute und Styles ... 556<br>Die Meisterprüfung des DOM-Zauberlehrlings ... 558<br><br>14. Schrödingers Welt der Programmierung -- Objekte und JSON ... 563<br><br>Objektorientierung -- was und warum? ... 564<br>Objekte für Einsteiger ... 567<br>Ran an die Eigenschaften ... 570<br>Und jetzt mit Methoden ... 575<br>Das Schlüsselwort this und Function Binding ... 577<br>Was steckt drin? for ... in ... 581<br>Übungen mit Objekten ... 585<br>Map macht's leichter ... 587<br>Konstruktoren und Prototypen ... 588<br>Vererbung -- und niemand muss dafür sterben ... 591<br>Übungen zu Prototypen und Vererbung ... 597<br>Klassen in JavaScript -- ja, die gibt's jetzt ... 601<br>Alles wird super ... 604<br>Statische Felder ... 606<br><br>15. Halt, hiergeblieben! Cookies, WebStorage und File-API ... 609<br><br>Der Griff in die Keksdose ... 610<br>Cookies ganz korrekt ... 612<br>Cookies selbst gebacken ... 615<br>Jetzt wird gebacken ... 616<br>Daten, so weit das Auge reicht -- Web Storage ... 621<br>Iterierenüber Web Storage ... 623<br>Das Beispiel am Stück -- und mit Objekt! ... 626<br>Mehr zu Local Storage -- Events und Limits ... 629<br>Von Sandbox zu Sandbox ... 630<br>Die große Datenhalde ... 632<br>Heute das Dateisystem, morgen die Welt ... 633<br>Was du schon immerüber eine Datei wissen wolltest ... 634<br>Dateien lesen - der FileReader ... 635<br>Dateien in der Praxis ... 640<br>Das switch-Statement ... 645<br>Dateien und Bäckereien ... 649<br>Dateiauswahl -- wir können auch anders ... 654<br>Und wir können auch noch anders -- noch mal Dateiauswahl ... 656<br><br>16. Alles kann ein Radio sein, oder ein Fernseher, oder sogar eine Leinwand -- Multimedia ... 661<br><br>Bild und Ton im Browser ... 662<br>Die MIME-Types ... 666<br>Die Details ... 666<br>Die Fernbedienung für alles -- audio und video mit JavaScript ... 668<br>Was alles gehen und schiefgehen kann ... 673<br>Schrödingers Terassenradio ... 676<br>Picasso, Monet, Schrödinger -- zeichnen auf dem canvas ... 679<br>Das JavaScript für die Grundausstattung ... 681<br>Ein Beispiel macht alles klar -- das erste Rechteck ... 682<br>Transformationen -- die Leinwand drehen und strecken ... 686<br>Werkzeug zur Hand, das Diagramm wird transformiert ... 688<br>Und jetzt mit Tabellen-Daten ... 689<br>Koordinatenballett ... 692<br>Kunst und Text ... 694<br>Auf dem rechten Pfad ... 700<br>Bild im Bild ... 704<br>Farbähnliche Dingsdas ... 708<br>Übungen mit interessanter Überschrift ... 713<br>Leinwand für Fortgeschrittene ... 717<br><br>17. Schrödinger will's wissen -- Ajax ... 719<br><br>Was ist Ajax? ... 720<br>Hallo Server, bitte kommen ... 724<br>Hol dir die Antwort ... 727<br>Die königliche POST ist da ... 730<br>Wie Majestät wünschen ... 733<br>XmlHttpRequest Level 2 -- jetzt mit Nutzlast ... 739<br>Der Rest ist wieder Geschichte -- History-API ... 742<br>Die Sache mit dem Fragment ... 746<br>Ich darf aber nicht mit Fremden sprechen -- die Same Origin Policy ... 749<br>Ja wo verbinden sie denn hin? ... 754<br>Jenseits von AJAX -- Web Sockets ... 756<br><br>18. Verwandlungskunst ... 759<br><br>Was ist Responsive Design, und wozu ist es gut? ... 760<br>Jedem seine Styles -- Media Types in CSS2 ... 763<br>Media Features -- CSS3 schafft neue Möglichkeiten ... 766<br>Stapelzeug Responsive ... 767<br>Schritt 1: Zuerst wird die Sidebar umpositioniert ... 770<br>Schritt 2: Jetzt mit handytauglicher Navigation ... 772<br>All die vielen Bildschirme! ... 776<br>Das Kreuz mit den Bildern ... 778<br>Sture Bilder ... 782<br>Größer ... größer ... größer ... zu groß! ... 785<br>Sparsamer laden mit data-Attributen ... 788<br>HTML im Regal - Grid-Layout ... 792<br>Was kann so ein Mobildings sonst noch? ... 798<br>Fingergetatsche ... 798<br>Wo zum Teufel bin ich? ... 801<br>Schrödinger unterwegs ... 808<br>Der Verfolger ... 811<br>Internationalisierung -- Formatieren für überall ... 813<br>Internationalisierung -- gut sortiert, und dasüberall ... 819<br><br>19. Der Blick nach vorn -- was geht noch? ... 821<br><br>CSS Bibliotheken und Frameworks ... 823<br>JavaScript-Bibliotheken und neue APIs ... 827<br>Aber es gibt auch noch andere Ansätze ... 829<br>Programmieren geht nicht nur im Browser ... 831<br>Type Script ... 835<br>Reine Handarbeit macht auch nicht glücklich ... 837<br>Aber das Wichtigste ... 838<br><br>Anhang: Reguläre Ausdrücke und Zeichencodes ... 839<br><br>Muster für Zeichenketten ... 840<br>Reguläre Ausdrücke in JavaScript ... 844<br>Die wichtigsten Elemente von regulären Ausdrücken, kurz zusammengefasst ... 849<br>Zeichencodes ... 851<br>Tabelle 1: ASCII-Codes für keypress ... 852<br>Tabelle 2: Tastencodes für keyup und keydown ... 853<br><br>Index ... 854<br>»Sehr lesefreundlich, abwechslungsreich, dabei gut strukturiert und durchdacht gegliedert. Hervorragend erklärt, alles Schritt für Schritt. Besorgen, lesen, machen!« infotechnica.de 202307

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

2DE

0 Shares Tweet0 Pins