Head First HTML5 Programming. Building Web Apps with JavaScript - Helion

ebook

Autor: Eric Freeman, Elisabeth Robson
ISBN: 978-14-493-3151-1
stron: 610, Format: ebook
Data wydania: 2011-10-06
Księgarnia: Helion

Cena książki: 101,15 zł (poprzednio: 117,62 zł)
Oszczędzasz: 14% (-16,47 zł)

Osoby, które kupiły tę książkę, wybierały także »

HTML has been on a wild ride. Sure, HTML started as a mere markup language, but more recently HTML’s put on some major muscle. Now we’ve got a language tuned for building web applications with Web storage, 2D drawing, offline support, sockets and threads, and more. And to speak this language you’ve got to go beyond HTML5 markup and into the world of the DOM, events, and JavaScript APIs.

Now you probably already know all about HTML markup (otherwise known as structure) and you know all aboutCSS style (presentation), but what you’ve been missing is JavaScript (behavior). If all you know about are structure and presentation, you can create some great looking pages, but they’re still just pages. When you add behavior with JavaScript, you can create an interactive experience; even better, you can create full blown web applications.

Head First HTML5 Programming is your ultimate tour guide to creating web applications with HTML5 and JavaScript, and we give you everything you need to know to build them, including: how to add interactivity to your pages, how to communicate with the world of Web services, and how to use the great new APIs being developed for HTML5.

Here are just some of the things you’ll learn in Head First HTML5 Programing:

Learn how to make your pages truly interactive by using the power of the DOM.
Finally understand how JavaScript works and take yourself from novice to well-informed in just a few chapters.
Learn how JavaScript APIs fit into the HTML5 ecosystem, and how to use any API in your web pages.
Use the Geolocation API to know where your users are.
Bring out your inner artist with Canvas, HTML5’s new 2D drawing surface.
Go beyond just plugging a video into your pages, and create custom video experiences.
Learn the secret to grabbing five megabytes of storage in every user’s browser.
Improve your page’s responsiveness and performance with Web workers.
And much more.

Osoby które kupowały "Head First HTML5 Programming. Building Web Apps with JavaScript", wybierały także:

Windows Media Center. Domowe centrum rozrywki 66,67 zł, (8,00 zł -88%)
Ruby on Rails. Ćwiczenia 18,75 zł, (3,00 zł -84%)
DevOps w praktyce. Kurs video. Jenkins, Ansible, Terraform i Docker 190,00 zł, (39,90 zł -79%)
Przywództwo w świecie VUCA. Jak być skutecznym liderem w niepewnym środowisku 58,64 zł, (12,90 zł -78%)
Scrum. O zwinnym zarządzaniu projektami. Wydanie II rozszerzone 58,64 zł, (12,90 zł -78%)

Spis treści

Head First HTML5 Programming. Building Web Apps with JavaScript eBook -- spis treści

Head First HTML5 Programming building web apps with javascript
Dedication
A Note Regarding Supplemental Files
Advance Praise for Head First HTML5 Programming
Praise for other books from Eric Freeman & Elisabeth Robson
Authors of Head First HTML5 Programming
How to Use this Book: Intro
- Who is this book for?
  - Who should probably back away from this book?
- We know what youre thinking
- And we know what your brain is thinking
- Metacognition: thinking about thinking
- Heres what WE did:
- Heres what YOU can do to bend your brain into submission
- Read me
- Software requirements
- The technical review team
- Acknowledgments
- Even more Acknowledgments!
- Safari Books Online
1. Getting to Know HTML5: Welcome to Webville
- Would the REAL HTML5 please stand up...
- How HTML5 really works...
- What can you do with JavaScript?
- Writing Serious JavaScript
- Writing Serious JavaScript Revisited...
2. Introducing JavaScript and the DOM: A Little Code
- The Way JavaScript Works
- What can you do with JavaScript?
- Declaring a variable
  - Three steps of creating a variable
- How to name your variables
  - Rule#1: Start your variables with a letter, an underscore or a dollar sign
  - Rule #2: Then you can use any number of letters, numeric digits, underscores or dollar signs
  - Rule #3: Make sure you avoid all of JavaScripts reserved words
- Getting Expressive
- Doing things over and over...
- Make decisions with JavaScript
- Making more decisions... and, adding a catchall
- How and where to add JavaScript to your pages
- How JavaScript interacts with your page
- How to bake your very own DOM
- A first taste of the DOM
- Test drive the planets
- You cant mess with the DOM until the page has fully loaded
  - Reload the page
- So, what else is a DOM good for anyway?
- Can we talk about JavaScript again? Or, how to store multiple values in JavaScript
  - How to create an array
  - Adding another item to the array
  - Using your array items
  - Know the size of your array, or else
- The Phrase-O-Matic
3. Events, Handlers and All that Jazz: A Little Interaction
- Get ready for Webville Tunes
- Getting started...
  - Give it a test drive
- But nothing happens when I click Add Song
- Handling Events
- Making a Plan...
- Getting access to the Add Song button
- Giving the button a click handler
  - Putting it to a test...
- A closer look at what just happened...
- Getting the song name
- How do we add a song to the page?
- How to create a new element
- Adding an element to the DOM
- Put it all together...
- ...and take it for a test drive
- Reviewwhat we just did
- How to add the Ready Bake Code...
- Integrating your Ready Bake Code
  - Test drive the saved songs
4. JavaScript Functions and Objects: Serious JavaScript
- Expanding your vocabulary
- How to add your own functions
  - Create a checkGuess function
- How a function works
- Local and Global Variables
  - Know the difference or risk humiliation
- Knowing the scope of your local and global variables
- The short lives of variables
- Oh, did we mention functions are also values?
- What you can do with functions as values
- Did someone say Objects?!
- Thinking about properties...
- How to create an object in JavaScript
- Some things you can do with objects
- Lets talk about passing objects to functions
  - Putting Fido on a diet....
- Our next showing is at....
- Testing at the drive-in
- Objects can have behavior too...
- Meanwhile back at Webville Cinema...
- But we know that cant be quite right...
- Lets get the movie parameter out of there...
- Now what?
- Adding the this keyword
- A test drive with this
- How to create a constructor
- Now lets use our constructor
- How does this really work?
- Test drive your constructor right off the factory floor
- What is the window object anyway?
- A closer look at window.onload
- Another look at the document object
- A closer look at document.getElementById
- One more object to think about: your element objects
5. Making Your HTML Location Aware: Geolocation
- Location, Location, Location
- The Lat and Long of it...
- How the Geolocation API determines your location
- Just where are you anyway?
- Test drive your location
- What we just did...
- How it all fits together
- Revealing our secret location...
- Writing the code to find the distance
- Location-enabled test drive
- Mapping your position
- How to add a Map to your Page
  - Getting ready to create a map...
- Displaying the Map
- Test drive your new heads-up display
- Sticking a Pin in it...
- Testing the marker
- Meanwhile back at the Geolocation API...
- Can we talk about your accuracy?
- Accuracy Test
- Wherever you go, there you are
  - How were going to track your movements
- Getting the app started
- Reworking our old code...
  - Writing the watchLocation handler
  - Writing the clearWatch handler
  - We still need to make a small update to displayLocation...
- Time to get moving!
- Youve got some Options...
  - Can we talk about your accuracy, again?
- The world of timeouts and maximum age...
- How to specify options
- Lets finish this app!
- Integrating our new function
- And one more time...
6. Talking to The Web: Extroverted Apps
- Mighty Gumball wants a Web app
- A little more background on Mighty Gumball
- Just a quick start...
  - Turn the engine over...
- So how do we make requests to web services?
- How to make a request from JavaScript
- Move over XML, meet JSON
- A quick example using JSON
- Lets get to work!
  - Writing an onload handler function
- Displaying the gumball sales data
- Watch Out, Detour Ahead!
- How to set up your own Web Server
- How to set up your own Web Server, continued
- Back to the code
- Lets test this already!
- Impressing the client...
- Reworking our code to make use of JSON
- The Home Stretch...
- Moving to the Live Server
- A Live Test Drive...
- Its a cliffhanger!
- Remember, we left you with a cliffhanger? A bug
- So, what do we do now?!
- What Browser Security Policy?
  - Acceptable Behavior for JavaScript code
  - Unacceptable Behavior for JavaScript code
- So, what are our options?
- Meet JSONP
- But what is the P in JSONP for?
- Lets update the Mighty Gumball web app
- Test drive your new JSONP-charged code
- Improving Mighty Gumball
- Step 1: Taking care of the script element...
- Step 2: Now its time for the timer
- A time-driven test drive
- Step 3: Reimplementing JSONP
  - First, lets set up the JSONP URL
  - Next, lets create a new script element
  - How do we insert the script into the DOM?
  - Now lets write the code to insert the script into the DOM
- We almost forgot: watch out for the dreaded browser cache
- One more TIME test drive
- How to remove duplicate sales reports
- Updating the JSON URL to include the lastreporttime
- Test drive lastReportTime
- A Special Message from Chapter 7...
7. Bringing Out Your Inner Artist: The Canvas
- Our new start-up: TweetShirt
- Checking out the comps
- Lets drop in on the TweetShirt crew...
- How to get a canvas into your web page
- Test drive your new canvas
- How to see your canvas
- Drawing on the Canvas
- A little Canvas test drive...
- A closer look at the code
- Failing gracefully
- TweetShirt: the Big Picture
- First, lets get the HTML in place
- Now, lets add the <form>
- Time to get computational, with JavaScript
- Writing the drawSquare function
- Time for a test drive!
  - Why are we seeing the old squares and the new squares when we preview?
- Add the call to fillBackgroundColor
  - Another quick test drive to make sure our new fillBackgroundColor function works...
- Meanwhile, back at TweetShirt.com...
  - And, a couple of hours later...
- Drawing with Geeks
- Breaking down the arc method
- A little taste of using the arc
- I say degree, you say radian
- Back to writing the TweetShirt circle code
- Writing the drawCircle function...
  - ...and test drive!
- Welcome back...
- Getting your tweets
- Test driving Tweets
- Giving drawText a spin
- Completing the drawText function
- A quick test drive and then LAUNCH!
- Yet another test drive
  - So you have a path! Now what?
8. Not Your Fathers TV: Video ...With Special Guest Star Canvas
- Meet Webville TV
- The HTML, lets get it done...
- Plug that set in and test it out...
- How does the video element work?
- Closely inspecting the video attributes...
- What you need to know about video formats
- The contenders
- How to juggle all those formats...
- How to be even more specific with your video formats
- I was told there would be APIs?
- A little content programming on Webville TV
- Implementing Webville TVs playlist
- So whats up with that event handler code?
- How to write the end of video handler
- Another test drive...
- How the canPlayType method works
  - Putting canPlayType to use
  - Integrating the getFormatExtension function
  - And test drive...
- We need your help!
- Step inside the booth, lets take a look...
- Unpacking the Demo Unit
- Inspecting the rest of the factory code
  - And now the JavaScript...
  - Looking at the button handlers
- The setEffect and setVideo handlers
- And here are the helper functions
- That new demo machine smell...test drive time!
- Getting our demo videos ready...
- Implementing the video controls
- Implementing the rest of the video controls
- Another test drive!
- Taking care of a loose end...
- And another...
- Switching test videos
  - Switch drivers and test drive!
- Its time for special effects
- The FX plan
- Time to get those effects buttons working
- How video processing works
- How to process video using a scratch buffer
- Implementing a scratch buffer with Canvas
- How to position the video and canvases
- Writing the code to process the video
- How to create the buffer
- How to process the buffer
  - Weve processed one frame, what next?
- Now we need to write some effects
- A film noir test drive
- The Big Test Drive
- If only it were a perfect world...
- How to use error events
- Test Crash!
- Where can you go from here?
9. Storing Things Locally: Web Storage
- How browser storage works (1995 - 2010)
- How HTML5 Web Storage works
- Note to self...
- Time for a test drive!
- Were Local Storage and the Array separated at birth?
  - But wait, theres more!
- Getting serious about stickies
- Creating the interface
- Now lets add the JavaScript
- Time for another test drive!
- Completing the user interface
- Yet another test drive!
- We need to stop for a little scheduled service
- Do-It-Yourself maintenance
- We have the technology...
- Reworking our app to use an array
  - Before...
  - New and improved
- Converting createSticky to use an array
- What needs to change?
- Putting it all together
- Putting it all together continued...
- Test Drive!
- Deleting sticky notes
- The deleteSticky function
- How do you select a sticky to delete?
- How to get the sticky to delete from the event
- Delete the sticky from the DOM, too
  - Okay, test it...
- But of course we can!
- Update the user interface so we can specify a color
- JSON.stringify, its not just for Arrays
- Using the new stickyObj
- Test drive sticky note colors
- Now that you know localStorage, how are you going to use it?
10. Putting JavaScript to Work: Web Workers
- The Dreaded Slow Script
- How JavaScript spends its time
- When single-threaded goes BAD
- Adding another thread of control to help
- How Web Workers work
- Your first Web Worker...
  - How to create a Web Worker
- Writing Manager.js
- Receiving messages from the worker
- Now lets write the worker
  - Writing the workers message handler
- Serving up a test drive
- Virtual Land Grab
- Take a look around
- How to compute a Mandelbrot Set
- How to use multiple workers
- Lets build the Fractal Explorer app
  - Creating the Fractal Viewer HTML Markup
- Creating workers, and giving them tasks...
- Writing the code
- Getting the workers started
- Implementing the worker
- A little pit stop...
- Time to get back on the road...
- Back to the code: how to process the workers results
- Psychedelic test drive
  - Handling a click event
- Another test drive
- Fitting the canvas to the browser window
- The anal-retentive chef coder
- Time for the final test drive!
- Congratulations! You made it to the end
A. Leftovers: The Top Ten Topics (We Didnt Cover)
- #1 Modernizr
  - Including Modernizr in your page
  - How to detect support
- #2 Audio
  - A Standard for Audio Encodings
- #3 jQuery
- #4 XHTML is dead, long live XHTML
- #5 SVG
- #6 Offline web apps
- #7 Web Sockets
- #8 More canvas API
- #9 Selectors API
- #10 But, theres even more!
  - Indexed Database API and Web SQL
  - Drag and Drop
  - Cross-document Messaging
  - And we could go on...
- The HTML5 Guide to New Construction
- Adding style to your new construction with CSS3
B. This isnt goodbye
Index
About the Authors
Colophon
Copyright