book

HTML5-Programmierung von Kopf bis Fuß

by Eric Freeman, Elisabeth Robson

April 2012

Intermediate to advanced

604 pages

16h 9m

German

O'Reilly Verlag

Read now

Unlock full access

Für wen ist dieses Buch?Wer sollte eher die Finger von diesem Buch lassen?Wir wissen, was Sie gerade denkenUnd wir wissen, was Ihr Gehirn gerade denktMetakognition: Nachdenken übers DenkenDas haben WIR getanUnd das können SIE tun, um sich Ihr Gehirn untertan zu machenLies mich!SoftwareanforderungenFachgutachterDanksagungenNoch mehr Danksagungen!
ECHTES HTML5 bitte vortreten ...Wie HTML5 wirklich funktioniert ...Was kann JavaScript?Richtiges JavaScriptFortsetzung: Richtiges JavaScript ...
Die Art, wie JavaScript arbeitetWas Sie mit JavaScript tun könnenVariablen deklarierenDrei Schritte für die Erstellung einer VariablenNamen für Variablen findenRegel 1: Beginnen Sie den Namen mit einem Buchstaben, einem _ oder einem $Regel 2: Danach können Sie eine beliebige Anzahl von Buchstaben, Ziffern, Unterstrichen und Dollarzeichen verwendenRegel 3: Vermeiden Sie reservierte WörterAusdrucksstärkeDinge immer wieder tun ...Entscheidungen treffen mit JavaScriptViele Entscheidungen ... und ein StandardfallWie und wo Sie JavaScript in Ihre Seiten einfügenWie JavaScript mit Ihrer Seite interagiertEin eigenes DOM backenEin Vorgeschmack auf das DOMProbefahrt mit den PlanetenSie können nicht am DOM herummachen, bevor die Seite vollständig geladen wurdeAktualisieren Sie die SeiteWofür ist das DOM überhaupt gut?Können wir nochmals über JavaScript sprechen? Oder darüber, wie man mehrere Werte speichert?Arrays erstellenWeitere Elemente dem Array hinzufügenArray-Elemente abrufenGröße eines Arrays erfahrenDer Phrasendrescher
Machen Sie sich bereit für webvilleTunesLos geht’s ...ProbefahrtEs passiert nichts, wenn ich auf »Hinzufügen« klickeAuf Events reagierenPläne schmieden ...Zugriff auf die Schaltfläche »Hinzufügen«click-Handler für die SchaltflächeEin Testlauf ...Was gerade passiert ist ...Songtitel abrufenWie fügen wir einen Song in die Seite ein?Neue Elemente erstellenElemente in das DOM einfügenSchreiben Sie alles zusammen ...... und machen Sie eine ProbefahrtWiederholung: was wir getan habenWie das Code-Fertiggericht genutzt wirdCode-Fertiggericht integrierenProbefahrt mit den gespeicherten Titeln
Erweitern Sie Ihren WortschatzEigene Funktionen hinzufügenFunktion pruefeAntwort erstellenDie Arbeitsweise einer FunktionLokale und globale VariablenWissen oder PeinlichkeitGeltungsbereich lokaler und globaler VariablenDas kurze Leben der VariablenHaben wir erwähnt, dass Funktionen auch Werte sind?Funktionen als Wert verwendenHat jemand »Objekte« gesagt?!Über Eigenschaften ...JavaScript-Objekte erstellenWas Sie mit Objekten tun könnenObjekte an Funktionen übergebenFido auf Diät!Nächste Vorstellung um ...Test am Drive-inObjekte können auch ein Verhalten habenZurück zum Webville Cinema ...Aber das kann nicht stimmen!Weg mit dem Parameter film ...Und jetzt?Das Schlüsselwort »this«Probefahrt mit »this«Einen Konstruktor erstellenUnser Konstruktor im EinsatzWie funktioniert this eigentlich?Probefahrt für Ihre FabrikWas ist überhaupt das window-Objekt?Ein genauerer Blick auf window.onloadNoch ein Blick auf das document-ObjektEin genauerer Blick auf document.getElementByIdNoch ein Objekt: das Element-Objekt
Standort, Standort, StandortLänge und Breite ...Wie die Geolocation-API Ihren Standort bestimmtWo sind Sie überhaupt?ProbefahrtWas wir gerade getan haben ...Wie alles zusammenpasstUnser geheimer Standort ...Code zum Ermitteln der EntfernungStandortsensitive ProbefahrtPosition auf der Karte darstellenKarten in Seiten einfügenBereit für die Karte ...Karte anzeigenProbefahrt mit dem neuen Head-up-DisplayEine Nadel hineinsteckenMarkertestZurück zur Geolocation-API ...Wie ist es mit der Genauigkeit?Genauigkeitstestlauf»Wohin Sie auch gehen, da sind Sie«Bewegungen mitverfolgenWeiter geht’s mit der AppDen alten Code überarbeiten ...Handler »beobachteStandort« schreibenDen stop-Handler schreibenEine kleine Änderung in zeigeStandort ...Zeit, sich zu bewegen!Sie haben Optionen ...Können wir noch mal über die Genauigkeit sprechen?Zeitlimits maximales AlterOptionen angebenVervollständigen wir die App!Die neue Funktion integrierenUnd noch mal!

Die Kaukugel & Co. KG möchte eine Web-AppHintergrundfakten zu Kaukugel & Co.Schnelleinstieg ...Drehen Sie um ...Wie nutzen wir einen Webservice?Requests mit JavaScriptZur Seite, XML, hier kommt JSONEin kurzes JSON-BeispielAn die Arbeit!Noch ein onload-HandlerKaugummi-Verkaufszahlen anzeigenVorsicht, Umleitung!Einen eigenen Webserver einrichtenEigenen Webserver einrichten – FortsetzungZurück zum CodeTesten wir schon mal!Den Kunden beeindrucken ...Code für JSON überarbeitenAuf der Zielgeraden ...Umzug auf den Live-ServerLive-Probefahrt ...Cliffhanger!Erinnern Sie sich an den Cliffhanger? Ein BugWas machen wir jetzt?!Welche Browsersicherheitsrichtlinien?Zulässiges Verhalten für JavaScript-CodeNicht zulässiges Verhalten für JavaScript-CodeWas sind unsere Optionen?Darf ich vorstellen: JSONPWofür steht das »P«?Neue Version der Kaukugel & Co.-AppProbefahrt mit dem JSONP-CodeKaukugel & Co. optimierenSchritt 1: Das script-Element ...Schritt 2: Zeit für den TimerZeitgesteuerte ProbefahrtSchritt 3: JSONP neu implementierenZuerst die JSONP-URLEin neues script-ElementWie fügen wir das Skript in das DOM ein?Code zum Einfügen des Skripts in das DOMFast vergessen: Vorsicht mit dem gefürchteten BrowsercacheNoch EINE ProbefahrtDoppelte Verkaufsberichte entfernenJSON-URL mit lastreporttimeProbefahrt mit letzteBerichtsZeitEilnachricht aus Kapitel 7 ...
Unser neues Start-up: TweetShirtEin Blick auf den EntwurfIn der Zwischenzeit bei der TweetShirt-Crew ...Canvas in Seiten einfügenProbefahrt mit dem neuen CanvasCanvas sichtbar machenZeichnen auf dem CanvasKleine Canvas-Probefahrt ...Ein genauer Blick auf den CodeAnmutiger FunktionsabbauTweetShirt: das große GanzeZuerst das HTMLUnd jetzt das <form>Zeit zum Rechnen – mit JavaScriptFunktion zeichneQuadratZeit für eine Probefahrt!Wir sehen alte und neue QuadrateAufruf von hintergrundFarbeFuellenNoch eine schnelle Probefahrt mit hintergrundFarbeFuellen ...In der Zwischenzeit bei TweetShirt.com ...Ein paar Stunden später ...Zeichnen für GeeksDie arc-Methode im EinzelnenEin kleiner Vorgeschmack auf arcIch sage Grad, du sagst RadiantZurück zum TweetShirt-KreiscodeFunktion zeichneKreis schreiben ...... und Probefahrt!Willkommen zurück!Holen Sie sich Ihre TweetsProbefahrt mit TweetsProbelauf mit zeichneTextFunktion zeichneText vervollständigenSchnelle Probefahrt und dann LAUNCH!Und noch eine ProbefahrtWir haben einen Pfad! Und jetzt?Kurze Pause, Lösung
Brandneu: Webville TVBringen wir das HTML hinter uns!Anschließen und testen ...Wie funktioniert das Video-Element?Genauer Blick auf die Videoattribute ...Was Sie über Videoformate wissen müssenDie KontrahentenMit den Formaten jonglieren ...Genauere Angaben zum VideoformatIch dachte, es gibt APIs?»Programmplanung« für Webville TVPlaylist für Webville TVWas ist mit dem Event-Handler los?Der »Ende des Videos«-HandlerEine Probefahrt ...Wie canPlayType funktioniertcanPlayType im EinsatzFunktion dateiEndung integrierenUnd Probefahrt ...Wir brauchen Ihre Hilfe!Kommen Sie in die Kabine ...Packen wir das Demogerät aus!Inspektion des werksseitigen CodesZum JavaScript ...Handler für die SchaltflächenwaehleEffekt und waehleVideoHier kommen die HilfsfunktionenDer Duft des neuen Demogeräts ... Probefahrt!Demovideos an den Start ...Videosteuerelemente implementierenDie restlichen Steuerelemente implementierenNächste Probefahrt!Das lose Ende ...Und noch eine ...Testvideos umschaltenFahrerwechsel und Probefahrt!Zeit für SpezialeffekteDer FX-PlanZeit für die EffekttastenVideoverarbeitungVideoverarbeitung mit PufferCanvas-Puffer implementierenVideo- und Canvas-Elemente positionierenCode für die Videoverarbeitung schreibenDen Puffer erstellenDen Puffer verarbeitenWir haben einen Frame verarbeitet. Was nun?Effekte programmierenFilm Noir-ProbefahrtGroße ProbefahrtWenn die Welt perfekt wäre ...Wie error-Events genutzt werdenCrashtest!Wie es weitergeht?
Der Browserspeicher (1995–2010)Wie Web Storage funktioniertEigene NotizenZeit für eine Probefahrt!Local Storage und Array bei der Geburt getrennt?Es gibt noch mehr!Jetzt wird’s ernstDie BenutzeroberflächeUnd nun das JavaScriptZeit für eine Probefahrt!BenutzeroberflächeUnd noch eine Probefahrt!Planmäßige WartungsarbeitenDo-it-yourself-WartungWir haben die Technologie ...Neue Version mit ArrayVorher ...Neu und verbessertnotizErstellen auf ein Array umstellenWas müssen wir ändern?Alles zusammenFortsetzung: Alles vereint ...Probefahrt!Haftnotizen löschenDie Funktion notizLoeschenAuswahl der zu löschenden HaftnotizZu löschende Notiz ermittelnNotizen auch aus dem DOM löschenOkay, testen Sie ...Aber natürlich!Benutzeroberfläche in FarbeJSON.stringify funktioniert nicht nur mit ArraysDas neue notizObjProbefahrt in FarbeJetzt kennen Sie localStorage – was machen Sie damit?
Das gefürchtete langsame SkriptWomit JavaScript seine Zeit verbringtWenn ein Thread nicht reichtNoch ein Thread zu Hilfe!Wie Web Workers arbeitenIhr erster Web Worker!Web Worker erstellenmanager.js schreibenNachrichten vom Worker empfangenJetzt schreiben wir den WorkerNachrichten-Handler für den WorkerAufschlag: Probefahrt!Virtueller LandraubSehen Sie sich umMandelbrot-Mengen berechnenVerwendung mehrerer WorkersWir schreiben die Fraktal Explorer-AppHTML-Markup für den Fraktal ExplorerWorkers erstellen und einteilen ...Den Code schreibenWorkers startenImplementierung des WorkerKleiner Boxenstopp ...Zurück auf die Straße ...Zurück zum Code: Worker-Ergebnisse verarbeitenPsychedelische ProbefahrtAuf click-Events reagierenNoch eine ProbefahrtCanvas an das Browserfenster anpassenDer ordnungsbedürftige Koch ProgrammiererLetzte Probefahrt!
#1 ModernizrModernizr in Seiten einbindenUnterstützung überprüfen#2 AudioStandard für Audiocodierung#3 jQuery#4 XHTML ist tot, lang lebe XHTML#5 SVG#6 Offline-Web-Apps#7 Web Sockets#8 Mehr zur Canvas-API#9 Selectors-API#10 Es gibt noch mehr!Indexed Database-API und Web SQLDrag and DropCross-Document MessagingWir könnten noch mehr schreiben ...Der HTML5-Führer für neue BauweisenNeuer Stil für neue Bauten mit CSS3

Content preview from HTML5-Programmierung von Kopf bis Fuß

Wie man dieses Buch benutzt: Einführung

In diesem Abschnitt beantworten wir die brennende Frage: »Und? Warum STEHT so was in einem HTML5-Buch?«

Für wen ist dieses Buch?

Wenn Sie alle folgenden Fragen mit »Ja« beantworten können ...

Haben Sie einen Computer mit einem Webbrowser und einem Texteditor?
Möchten Sie lernen, verstehen und behalten, wie Sie Webanwendungen mit den besten Techniken und neuesten Standards entwickeln?
Ziehen Sie eine anregende Unterhaltung beim Abendessen einer trockenen, langweiligen Vorlesung vor?

... dann ist dieses Buch etwas für Sie.