You are previewing Programming in HTML5 with JavaScript and CSS3: Training Guide.
O'Reilly logo
Programming in HTML5 with JavaScript and CSS3: Training Guide

Book Description

Designed to help experienced programmers develop real-world, job-role-specific skills—this Training Guide focuses on creating applications with HTML5, JavaScript, and CSS3. Build hands-on expertise through a series of lessons, exercises, and suggested practices—and help maximize your performance on the job.

  • Provides in-depth, hands-on training you take at your own pace

  • Focuses on job-role-specific expertise for using HTML5, JavaScript, and CSS3 to begin building modern web and Windows 8 apps

  • Features pragmatic lessons, exercises, and practices

  • Creates a foundation of skills which, along with on-the-job experience, can be measured by Microsoft Certification exams such as 70-480

  • Coverage includes: creating HTML5 documents; implementing styles with CSS3; JavaScript in depth; using Microsoft developer tools; AJAX; multimedia support; drawing with Canvas and SVG; drag and drop functionality; location-aware apps; web storage; offline apps; writing your first simple Windows 8 apps; and other key topics

  • Table of Contents

    1. Programming in HTML5 with JavaScript and CSS3: Training Guide
    2. A Note Regarding Supplemental Files
    3. Introduction
      1. Backward compatibility and cross-browser compatibility
      2. System requirements
      3. Hardware requirements
      4. Software requirements
      5. Practice exercises
      6. Acknowledgments
      7. Errata and book support
      8. We want to hear from you
      9. Stay in touch
    4. 1. Getting started with Visual Studio 2012 and Blend for Visual Studio 2012
      1. Before you begin
      2. Lesson 1: Visual Studio 2012
        1. Visual Studio 2012 editions
        2. Visual Studio 2012 support for HTML5
        3. CSS3 support
        4. JavaScript support
        5. Exploring Visual Studio Express 2012 for Windows 8
          1. Examining the Blank App template
        6. Exploring Visual Studio Express 2012 for Web
          1. Examining ASP.NET Empty Web Application
        7. Lesson summary
        8. Lesson review
      3. Lesson 2: Blend for Visual Studio 2012
        1. Exploring Blend
          1. Projects panel
          2. Assets panel
          3. Device panel
          4. Style Rules panel
          5. Live DOM panel
        2. Lesson summary
        3. Lesson review
      4. Practice exercises
        1. Exercise 1: Hello World with Visual Studio Express 2012 for Windows 8
        2. Exercise 2: Hello World with Visual Studio Express 2012 for Web
        3. Exercise 3: Hello World with Blend
      5. Suggested practice exercises
      6. Answers
        1. Lesson 1
        2. Lesson 2
    5. 2. Getting started with HTML5
      1. Before you begin
      2. Lesson 1: Introducing HTML5
        1. Understanding HTML, XHTML, and HTML5
        2. Introducing semantic markup
        3. Working with elements
          1. Element reference
          2. Adding attributes to elements
          3. Working with Boolean attributes
          4. HTML5 global attribute reference
          5. Working with self-closing tags
          6. Working with void elements
          7. Adding expando attributes
          8. Adding comments
          9. Adding conditional comments
        4. Creating an HTML document
          1. Basic document structure
          2. Using special characters (HTML entities)
            1. Nonbreaking Space
        5. Lesson summary
        6. Lesson review
      3. Lesson 2: Embedding content
        1. Embedding HTML by using inline frames
          1. Sandboxing embedded content
          2. Seamless content embedding
        2. Working with hyperlinks
          1. Specifying the hyperlink target
          2. Sending email with hyperlinks
        3. Adding images to your HTML document
          1. Image file types
          2. Creating image links
          3. Creating an image map
        4. Embedding plug-in content
          1. The <embed> tag
          2. The <object> tag
          3. Passing parameters to an object
          4. Using the object tag to create a browser context
        5. Lesson summary
        6. Lesson review
      4. Practice exercises
        1. Exercise 1: Create a simple website by using Visual Studio Express for Web
        2. Exercise 2: Create additional pages
        3. Exercise 3: Embedding Content
      5. Suggested practice exercises
      6. Answers
        1. Lesson 1
        2. Lesson 2
    6. 3. Getting started with JavaScript
      1. Before you begin
      2. Lesson 1: Introducing JavaScript
        1. Understanding JavaScript
        2. Understanding the role of data
          1. Using expressions to produce data
          2. Understanding the number type
            1. Special Values
            2. Arithmetic
            3. Operator Precedence
            4. Modulo
          3. Understanding the string type
          4. Using unary operators
          5. Understanding the Boolean type
            1. Logical Operators
            2. Short-Circuiting Operators
        3. Using statements
          1. Using variables
          2. Rules for naming variables
          3. Naming variables
          4. Creating the environment
        4. Working with functions
          1. Using function declarations
          2. Using function expressions
          3. Deciding which arguments
          4. Using the browser’s built-in alert, prompt, and confirm functions
        5. Scoping variables
        6. Nesting functions and nested local variable scoping
        7. Converting to a different type
          1. Using the Number function
          2. Using the String function
        8. Conditional programming
          1. Using the if/else keywords
          2. Using the switch keyword
          3. Determining whether a variable has a value
          4. No value coalescing operators
          5. Determining whether two values have the same type and are equal
        9. Implementing code loops
          1. Implementing the while loop
          2. Implementing the do loop
          3. Implementing the for loop
          4. Breaking out of a loop
        10. Handling errors
        11. Lesson summary
        12. Lesson review
      3. Lesson 2: Writing, testing, and debugging JavaScript
        1. Hello World from JavaScript
          1. Writing test-driven code
          2. Setting up QUnit with ASP.NET applications
          3. Setting up QUnit-Metro with Windows 8 applications
        2. Using the script tag
        3. Handling browsers that don’t support JavaScript
        4. Inline JavaScript vs. external JavaScript files
        5. Placing your script elements
        6. Using the Visual Studio .NET JavaScript debugger
          1. Setting a breakpoint
          2. Examining variables
          3. Stepping through the code
        7. Lesson summary
        8. Lesson review
      4. Lesson 3: Working with objects
        1. Working with arrays
          1. Creating and populating an array
          2. Accessing the array items
          3. Modifying the array items
          4. Understanding array properties
          5. Using array methods
        2. Accessing DOM objects
          1. Navigating the DOM
          2. Working with events
          3. Event capturing and event bubbling
          4. Subscribing to an event
          5. Unsubscribing from an event
          6. Canceling event propagation
          7. Preventing the default operation
          8. Working with “this”
          9. Window event reference
          10. Form event reference
          11. Keyboard event reference
          12. Mouse event reference
          13. Media event reference
        3. Lesson summary
        4. Lesson review
      5. Practice exercises
        1. Exercise 1: Create a calculator webpage
        2. Exercise 2: Add the QUnit testing framework
      6. Suggested practice exercises
      7. Answers
        1. Lesson 1
        2. Lesson 2
        3. Lesson 3
    7. 4. Getting started with CSS3
      1. Before you begin
      2. Lesson 1: Introducing CSS3
        1. Defining and applying a style
        2. Adding comments within a style sheet
        3. Creating an inline style
        4. Creating an embedded style
        5. Creating an external style sheet
          1. Using media to specify the target device
          2. Specifying the character encoding of the style sheet
          3. Imported style sheets from other style sheets
          4. Using @font-face rule to import fonts
        6. Lesson summary
        7. Lesson review
      3. Lesson 2: Understanding selectors, specificity, and cascading
        1. Defining selectors
          1. Creating an element type selector
          2. Creating an id selector
          3. Creating a class selector
          4. Using the universal selector
          5. Using descendant selectors
          6. Using child selectors
          7. Using pseudo-class and pseudo-element selectors
          8. Grouping selectors
          9. Using subsequent adjacent sibling selectors
          10. Using the subsequent sibling selector
          11. Using an attribute selector
          12. Using an attribute value selector
          13. Using the attribute contains value selector
          14. Using the attribute value starts with selector
          15. Using the attribute value ends with selector
          16. Using the attribute contains value in list selector
        2. Understanding the browser’s built-in styles
        3. Extending browser styles with user styles
        4. Working with important styles
        5. How do styles cascade?
        6. Using specificity
        7. Understanding inheritance
          1. Using the inherit value
        8. Lesson summary
        9. Lesson review
      4. Lesson 3: Working with CSS properties
        1. Working with CSS colors
          1. Using the rgb function
          2. Using transparency
          3. Using the rgba function
          4. Using the hsl function
        2. Working with text
          1. Setting the font-family property
          2. Specifying the font size
        3. Working with the CSS box model
        4. Setting the border, padding, and margin properties
        5. Positioning <div> elements
          1. Using the static position
          2. Using the relative position
          3. Using the absolute position
          4. Using the fixed position
          5. More absolute positioning
        6. Using the float property
        7. Using the clear property
        8. Using the box-sizing property
        9. Centering content in the browser window
        10. Lesson summary
        11. Lesson review
      5. Practice exercises
        1. Exercise 1: Add a style sheet to the calculator project
        2. Exercise 2: Clean up the web calculator
      6. Suggested practice exercises
      7. Answers
        1. Lesson 1
        2. Lesson 2
        3. Lesson 3
    8. 5. More HTML5
      1. Before you begin
      2. Lesson 1: Thinking HTML5 semantics
        1. Why semantic markup?
        2. Browser support for HTML5
        3. Creating semantic HTML5 documents
        4. Creating an HTML5 layout container
          1. Using the <header> element
          2. Using the <footer> element
          3. Using the <nav> element
          4. Using the <aside> element
          5. Using roles
        5. Controlling format by using the <div> element
        6. Adding thematic breaks
        7. Annotating content
          1. Using the <b> element
          2. Using the <strong> element
          3. Using the <i> element
          4. The <em> element
          5. Using the <abbr> element for abbreviations and acronyms
          6. The <address> element
          7. Quotations and citations
          8. Documenting code by using the <code> and <samp> elements
          9. Displaying preformatted content by using the <pre> element
          10. Using the <var> element
          11. Using the <br /> and <wbr /> elements
          12. Using the <dfn> element to define a term
          13. Working with figures
          14. Working with the <summary> and <details> elements
          15. Understanding other annotations
          16. Using language elements
        8. Working with lists
          1. Ordered lists
          2. Unordered lists
          3. Description lists
          4. Custom lists
        9. Lesson summary
        10. Lesson review
      3. Lesson 2: Working with tables
        1. Table misuse
        2. Creating a basic table
        3. Adding header cells
        4. Styling the table headers
        5. Declaring the header, footer, and table body
        6. Creating irregular tables
        7. Adding a caption to a table
        8. Styling columns
        9. Lesson summary
        10. Lesson review
      4. Practice exercises
        1. Exercise 1: Add a page layout to the calculator project
        2. Exercise 2: Add styles to the calculator layout
        3. Exercise 3: Cleaning up the web calculator
      5. Suggested practice exercises
      6. Answers
        1. Lesson 1
        2. Lesson 2
    9. 6. Essential JavaScript and jQuery
      1. Before you begin
      2. Lesson 1: Creating JavaScript objects
        1. Using object-oriented terminology
        2. Understanding the JavaScript object-oriented caveat
        3. Using the JavaScript object literal pattern
        4. Creating dynamic objects by using the factory pattern
        5. Creating a class
        6. Using the prototype property
        7. Debating the prototype/private compromise
        8. Implementing namespaces
        9. Implementing inheritance
        10. Lesson summary
        11. Lesson review
      3. Lesson 2: Working with jQuery
        1. Introducing jQuery
        2. Getting started with jQuery
        3. Using jQuery
        4. Enabling JavaScript and jQuery IntelliSense
        5. Creating a jQuery wrapper for a DOM element reference
        6. Adding event listeners
        7. Triggering event handlers
        8. Initializing code when the browser is ready
        9. Lesson summary
        10. Lesson review
      4. Practice exercises
        1. Exercise 1: Create a calculator object
      5. Suggested practice exercises
      6. Answers
        1. Lesson 1
        2. Lesson 2
    10. 7. Working with forms
      1. Before you begin
      2. Lesson 1: Understanding forms
        1. Understanding web communications
          1. The web server
          2. The web browser
          3. Understanding HTTP protocol basics
          4. Understanding the HTTP method
        2. Submitting form data to the web server
        3. Sending data when submitting a form
        4. Using the <label> element
        5. Specifying the parent forms
        6. Triggering the form submission
        7. Serializing the form
        8. Using the autofocus attribute
        9. Using data submission constraints
        10. Using POST or GET
        11. Lesson summary
        12. Lesson review
      3. Lesson 2: Form validation
        1. Required validation
        2. Validating URL input
        3. Validating numbers and ranges
        4. Styling the validations
        5. Lesson summary
        6. Lesson review
      4. Practice exercises
        1. Exercise 1: Create a Contact Us form
        2. Exercise 2: Add validation to the Contact Us form
      5. Suggested practice exercises
      6. Answers
        1. Lesson 1
        2. Lesson 2
    11. 8. Websites and services
      1. Before you begin
      2. Lesson 1: Getting started with Node.js
        1. Installing Node.js
        2. Creating Hello World from Node.js
        3. Creating a Node.js module
        4. Creating a Node.js package
          1. Creating an aggregate module
          2. Creating the README.md file
          3. Creating the package.json file
          4. Publishing the package
          5. Installing and using the package
          6. Uninstalling a package
        5. Fast forward to express
        6. Starting with express
          1. Using Visual Studio 2012 Express for Web
          2. Creating a Hello web application with express
          3. Adding a webpage to the application
          4. Parsing posted form data
        7. Lesson summary
        8. Lesson review
      3. Lesson 2: Working with web services
        1. Introducing web services
          1. Understanding Representational State Transfer (REST)
          2. Understanding arbitrary web services
        2. Creating a RESTful web service by using Node.js
        3. Using AJAX to call a web service
          1. Using XMLHttpRequest
          2. Handling progress
          3. Handling errors
          4. Using jQuery XMLHttpRequest wrappers
          5. Using jQuery promises
        4. Cross-origin resource sharing
        5. Lesson summary
        6. Lesson review
      4. Practice exercises
        1. Exercise 1: Create a website to receive data
        2. Exercise 2: Create a web service to receive data
      5. Suggested practice exercises
      6. Answers
        1. Lesson 1
        2. Lesson 2
    12. 9. Asynchronous operations
      1. Before you begin
      2. Lesson 1: Asynchronous operations using jQuery and WinJS
        1. Using a promise object
        2. Creating jQuery promise objects by using $.Deferred()
        3. Handling failure
        4. Handling completion cleanup
        5. Subscribing to a completed promise object
        6. Chaining promises by using the pipe method
        7. Parallel execution using $.when().then()
        8. Updating progress
        9. Conditional asynchronous calls
        10. Lesson summary
        11. Lesson review
      3. Lesson 2: Working with web workers
        1. Web worker details
        2. Lesson summary
        3. Lesson review
      4. Practice exercises
        1. Exercise 1: Implement asynchronous code execution
      5. Suggested practice exercises
      6. Answers
        1. Lesson 1
        2. Lesson 2
    13. 10. WebSocket communications
      1. Before you begin
      2. Lesson 1: Communicating by using WebSocket
        1. Understanding the WebSocket protocol
        2. Defining the WebSocket API
        3. Implementing the WebSocket object
        4. Dealing with timeouts
        5. Handling connection disconnects
        6. Dealing with web farms
        7. Using WebSocket libraries
          1. SignalR
          2. Socket.IO
        8. Lesson summary
        9. Lesson review
      3. Practice exercises
        1. Exercise 1: Create a chat server
        2. Exercise 2: Create the chat client
      4. Suggested practice exercises
      5. Answers
        1. Lesson 1
    14. 11. HTML5 supports multimedia
      1. Before you begin
      2. Lesson 1: Playing video
        1. Video formats
        2. Implementing the <video> element
        3. Setting the source
        4. Configuring the <video> element
        5. Accessing tracks
          1. Using the WebVTT format
          2. Adding support for WebVTT to IIS Express
        6. Lesson summary
        7. Lesson review
      3. Lesson 2: Playing audio
        1. Audio formats
        2. The <audio> element
        3. Setting the source
        4. Configuring the <audio> element
        5. Lesson summary
        6. Lesson review
      4. Lesson 3: Using the HTMLMediaElement object
        1. Understanding the HTMLMediaElement methods
        2. Using HTMLMediaElement properties
        3. Subscribing to HTMLMediaElement events
        4. Using media control
        5. Lesson summary
        6. Lesson review
      5. Practice exercises
        1. Exercise 1: Create a webpage that displays video
      6. Suggested practice exercises
      7. Answers
        1. Lesson 1
        2. Lesson 2
        3. Lesson 3
    15. 12. Drawing with HTML5
      1. Before you begin
      2. Lesson 1: Drawing by using the <canvas> element
        1. The <canvas> element reference
        2. CanvasRenderingContext2D context object reference
        3. Implementing the canvas
        4. Drawing rectangles
        5. Configuring the drawing state
          1. Setting fillStyle
          2. Setting lineWidth
          3. Setting lineJoin
          4. Setting strokeStyle
        6. Saving and restoring the drawing state
        7. Drawing by using paths
          1. Drawing lines
          2. Drawing rectangles
          3. Ordering the fill and the stroke method calls
          4. Drawing arcs by using the arcTo method
          5. Drawing arcs by using the arc method
        8. Drawing text
        9. Drawing with images
        10. Lesson summary
        11. Lesson review
      3. Lesson 2: Using scalable vector graphics
        1. Using the <svg> element
          1. Creating a path
          2. Drawing circles
        2. Displaying SVG files by using the <img> element
          1. Making the SVG scalable
        3. Lesson summary
        4. Lesson review
      4. Practice exercises
        1. Exercise 1: Create a webpage by using a canvas
      5. Suggested practice exercises
      6. Answers
        1. Lesson 1
        2. Lesson 2
    16. 13. Drag and drop
      1. Before you begin
      2. Lesson 1: Dragging and dropping
        1. Dragging
        2. Understanding drag events
        3. Dropping
        4. Using the DataTransfer object
        5. Lesson summary
        6. Lesson review
      3. Lesson 2: Dragging and dropping files
        1. Using the FileList and File objects
        2. Lesson summary
        3. Lesson review
      4. Practice exercises
        1. Exercise 1: Create a number scramble game
        2. Exercise 2: Add drag and drop to the game
        3. Exercise 3: Add scramble and winner check
      5. Suggested practice exercises
      6. Answers
        1. Lesson 1
        2. Lesson 2
    17. 14. Making your HTML location-aware
      1. Before you begin
      2. Lesson 1: Basic positioning
        1. Geolocation object reference
        2. Retrieving the current position
        3. Handling errors
        4. Addressing privacy
        5. Specifying options
        6. Lesson summary
        7. Lesson review
      3. Lesson 2: Monitored positioning
        1. Where are you now? How about now?
        2. Calculating distance between samples
        3. Lesson summary
        4. Lesson review
      4. Practice exercises
        1. Exercise 1: Map your current positions
      5. Suggested practice exercises
      6. Answers
        1. Lesson 1
        2. Lesson 2
    18. 15. Local data with web storage
      1. Before you begin
      2. Lesson 1: Introducing web storage
        1. Understanding cookies
        2. Using the jQuery cookie plug-in
        3. Working with cookie limitations
        4. Alternatives to cookies prior to HTML5
          1. Looking beyond plug-ins
        5. Understanding HTML5 storage
          1. Considering security
          2. Using browser support
        6. Exploring localStorage
          1. Using the localStorage object reference
          2. Very high browser support
          3. Determining whether the user’s browser supports web storage
          4. Amount of data that can be kept in web storage
          5. Reaching the storage limit
          6. Storing complex objects
        7. Using short-term persistence with sessionStorage
        8. Anticipating potential performance pitfalls
          1. Synchronously reading and writing to the hard drive
          2. Anticipating slow search capabilities
          3. No transaction support
        9. Lesson summary
        10. Lesson review
      3. Lesson 2: Handling storage events
        1. Sending notifications only to other windows
        2. Using the StorageEvent object reference
          1. Bubbling and canceling events
        3. Subscribing to events
          1. Considering Internet Explorer 8 performance with storage events
          2. Binding to storage events by using jQuery
        4. Using events with sessionStorage
        5. Lesson summary
        6. Lesson review
      4. Practice exercises
        1. Exercise 1: Create a contact book by using localStorage
      5. Suggested practice exercises
      6. Answers
        1. Lesson 1
        2. Lesson 2
    19. 16. Offline web applications
      1. Before you begin
      2. Lesson 1: Working with Web SQL
        1. Considering the questionable longevity of Web SQL
        2. Creating and opening the database
        3. Performing schema updates
          1. Adding a table
        4. Using transactions
          1. Inserting a new record
          2. Updating an existing record
          3. Deleting a record
          4. Reading values from the database
          5. Filtering results
          6. Using JOIN commands
          7. Aggregating functions
        5. Lesson summary
        6. Lesson review
      3. Lesson 2: Working with IndexedDB
        1. Using browser-specific code
        2. Creating and opening the database
        3. Using object stores
          1. Understanding versioning
          2. Using the keypath property
          3. Adding indexes
          4. Removing indexes
          5. Removing object stores
        4. Using transactions
        5. Inserting a new record
        6. Updating an existing record
        7. Deleting a record
        8. Retrieving a record
        9. Understanding cursors
          1. Indexing cursors
          2. Applying key range limits
        10. Dropping a database
        11. Lesson summary
        12. Lesson review
      4. Lesson 3: Working with the FileSystem API
        1. Assessing browser support
        2. Opening the file system
        3. Creating and opening a file
        4. Writing to a file
        5. Reading a file
        6. Deleting a file
        7. Creating and opening a directory
        8. Writing a file to a directory
        9. Deleting a directory
        10. Lesson summary
        11. Lesson review
      5. Lesson 4: Working with the offline application HTTP cache
        1. Browser support
        2. The cache manifest file
          1. Understanding structure
        3. Updating the cache
        4. Understanding events
        5. Lesson summary
        6. Lesson review
      6. Practice exercises
        1. Exercise 1: Modify a contact book to use IndexedDB
      7. Suggested practice exercises
      8. Answers
        1. Lesson 1
        2. Lesson 2
        3. Lesson 3
        4. Lesson 4
    20. A. About the author
    21. B. Training Guide: Programming in HTML5 with JavaScript and CSS3 and Exam 70-480
    22. Index
    23. About the Author
    24. Copyright