Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

(Nora) #1

  • for Visual Studio CHAPTER 1 Getting started with Visual Studio 2012 and Blend

  • CHAPTER 2 Getting started with HTML5

  • CHAPTER 3 Getting started with JavaScript

  • CHAPTER 4 Getting started with CSS3

  • CHAPTER 5 More HTML5

  • CHAPTER 6 Essential JavaScript and jQuery

  • CHAPTER 7 Working with forms

  • CHAPTER 8 Websites and services

  • CHAPTER 9 Asynchronous operations

  • CHAPTER 10 WebSocket communications

  • CHAPTER 11 HTML5 supports multimedia

  • CHAPTER 12 Drawing with HTML5

  • CHAPTER 13 Drag and drop

  • CHAPTER 14 Making your HTML location-aware

  • CHAPTER 15 Local data with web storage

  • CHAPTER 16 Offline web applications

    • Index

      • Exercise 1: Hello World with Visual Studio Express

      • for Windows

      • Exercise 2: Hello World with Visual Studio Express

      • for Web

      • Exercise 3: Hello World with Blend



    • Suggested practice exercises

    • Answers



  • Chapter 2 Getting started with HTML5

    • Lesson 1: Introducing HTML5

      • Understanding HTML, XHTML, and HTML5

      • Introducing semantic markup

      • Working with elements

      • Creating an HTML document

      • Lesson summary

      • Lesson review



    • Lesson 2: Embedding content

      • Embedding HTML by using inline frames

      • Working with hyperlinks

      • Adding images to your HTML document

      • Embedding plug-in content

      • Lesson summary

      • Lesson review



    • Practice exercises

      • Express for Web Exercise 1: Create a simple website by using Visual Studio

      • Exercise 2: Create additional pages

      • Exercise 3: Embedding Content



    • Suggested practice exercises

    • Answers



  • Chapter 3 Getting started with JavaScript

    • Lesson 1: Introducing JavaScript

      • Understanding JavaScript

      • Understanding the role of data Contents vii

      • Using statements

      • Working with functions

      • Scoping variables

      • Nesting functions and nested local variable scoping

      • Converting to a different type

      • Conditional programming

      • Implementing code loops

      • Handling errors

      • Lesson summary

      • Lesson review



    • Lesson 2: Writing, testing, and debugging JavaScript

      • Hello World from JavaScript

      • Using the script tag

      • Handling browsers that don’t support JavaScript

      • Inline JavaScript vs. external JavaScript files

      • Placing your script elements

      • Using the Visual Studio .NET JavaScript debugger

      • Lesson summary

      • Lesson review



    • Lesson 3: Working with objects

      • Working with arrays

      • Accessing DOM objects

      • Lesson summary

      • Lesson review



    • Practice exercises

      • Exercise 1: Create a calculator webpage

      • Exercise 2: Add the QUnit testing framework



    • Suggested practice exercises

    • Answers



  • Chapter 4 Getting started with CSS3

    • Lesson 1: Introducing CSS3

      • Defining and applying a style



    • Adding comments within a style sheet viii Contents

    • Creating an inline style

    • Creating an embedded style

    • Creating an external style sheet

    • Lesson summary

    • Lesson review



  • Lesson 2: Understanding selectors, specificity, and cascading

    • Defining selectors

    • Understanding the browser’s built-in styles

    • Extending browser styles with user styles

    • Working with important styles

    • How do styles cascade?

    • Using specificity

    • Understanding inheritance

    • Lesson summary

    • Lesson review



  • Lesson 3: Working with CSS properties

    • Working with CSS colors

    • Working with text

    • Working with the CSS box model

    • Setting the border, padding, and margin properties

    • Positioning
      elements

    • Using the float property

    • Using the clear property

    • Using the box-sizing property

    • Centering content in the browser window

    • Lesson summary

    • Lesson review



  • Practice exercises

    • Exercise 1: Add a style sheet to the calculator project

    • Exercise 2: Clean up the web calculator



  • Suggested practice exercises

  • Answers

  • Chapter 5 More HTML5 Contents ix

    • Lesson 1: Thinking HTML5 semantics

      • Why semantic markup?

      • Browser support for HTML5

      • Creating semantic HTML5 documents

      • Creating an HTML5 layout container

      • Controlling format by using the
        element

      • Adding thematic breaks

      • Annotating content

      • Working with lists

      • Lesson summary

      • Lesson review



    • Lesson 2: Working with tables

      • Table misuse

      • Creating a basic table

      • Adding header cells

      • Styling the table headers

      • Declaring the header, footer, and table body

      • Creating irregular tables

      • Adding a caption to a table

      • Styling columns

      • Lesson summary

      • Lesson review



    • Practice exercises

      • Exercise 1: Add a page layout to the calculator project

      • Exercise 2: Add styles to the calculator layout

      • Exercise 3: Cleaning up the web calculator



    • Suggested practice exercises

    • Answers



  • Chapter 6 Essential JavaScript and jQuery

    • Lesson 1: Creating JavaScript objects

      • Using object-oriented terminology

      • Understanding the JavaScript object-oriented caveat x Contents

      • Using the JavaScript object literal pattern

      • Creating dynamic objects by using the factory pattern

      • Creating a class

      • Using the prototype property

      • Debating the prototype/private compromise

      • Implementing namespaces

      • Implementing inheritance

      • Lesson summary

      • Lesson review



    • Lesson 2: Working with jQuery

      • Introducing jQuery

      • Getting started with jQuery

      • Using jQuery

      • Enabling JavaScript and jQuery IntelliSense

      • Creating a jQuery wrapper for a DOM element reference

      • Adding event listeners

      • Triggering event handlers

      • Initializing code when the browser is ready

      • Lesson summary

      • Lesson review



    • Practice exercises

      • Exercise 1: Create a calculator object



    • Suggested practice exercises

    • Answers



  • Chapter 7 Working with forms

    • Lesson 1: Understanding forms

      • Understanding web communications

      • Submitting form data to the web server

      • Sending data when submitting a form

      • Using the

      • Specifying the parent forms

      • Triggering the form submission

      • Serializing the form Contents xi

      • Using the autofocus attribute

      • Using data submission constraints

      • Using POST or GET

      • Lesson summary

      • Lesson review



    • Lesson 2: Form validation

      • Required validation

      • Validating URL input

      • Validating numbers and ranges

      • Styling the validations

      • Lesson summary

      • Lesson review



    • Practice exercises

      • Exercise 1: Create a Contact Us form

      • Exercise 2: Add validation to the Contact Us form



    • Suggested practice exercises

    • Answers



  • Chapter 8 Websites and services

    • Lesson 1: Getting started with Node.js

      • Installing Node.js

      • Creating Hello World from Node.js

      • Creating a Node.js module

      • Creating a Node.js package

      • Fast forward to express

      • Starting with express

      • Lesson summary

      • Lesson review



    • Lesson 2: Working with web services

      • Introducing web services

      • Creating a RESTful web service by using Node.js

      • Using AJAX to call a web service

      • Cross-origin resource sharing

      • Lesson summary xii Contents

      • Lesson review



    • Practice exercises

      • Exercise 1: Create a website to receive data

      • Exercise 2: Create a web service to receive data



    • Suggested practice exercises

    • Answers



  • Chapter 9 Asynchronous operations

    • Lesson 1: Asynchronous operations using jQuery and WinJS

      • Using a promise object

      • Creating jQuery promise objects by using $.Deferred()

      • Handling failure

      • Handling completion cleanup

      • Subscribing to a completed promise object

      • Chaining promises by using the pipe method

      • Parallel execution using $.when().then()

      • Updating progress

      • Conditional asynchronous calls

      • Lesson summary

      • Lesson review



    • Lesson 2: Working with web workers

      • Web worker details

      • Lesson summary

      • Lesson review



    • Practice exercises

      • Exercise 1: Implement asynchronous code execution



    • Suggested practice exercises

    • Answers



  • Chapter 10 WebSocket communications

    • Lesson 1: Communicating by using WebSocket

      • Understanding the WebSocket protocol

      • Defining the WebSocket API

      • Implementing the WebSocket object Contents xiii

      • Dealing with timeouts

      • Handling connection disconnects

      • Dealing with web farms

      • Using WebSocket libraries

      • Lesson summary

      • Lesson review



    • Practice exercises

      • Exercise 1: Create a chat server

      • Exercise 2: Create the chat client



    • Suggested practice exercises

    • Answers



  • Chapter 11 HTML5 supports multimedia

    • Lesson 1: Playing video

      • Video formats

      • Implementing the

      • Setting the source

      • Configuring the

      • Accessing tracks

      • Lesson summary

      • Lesson review



    • Lesson 2: Playing audio

      • Audio formats

      • The

      • Setting the source

      • Configuring the

      • Lesson summary

      • Lesson review



    • Lesson 3: Using the HTMLMediaElement object

      • Understanding the HTMLMediaElement methods

      • Using HTMLMediaElement properties

      • Subscribing to HTMLMediaElement events

      • Using media control

      • Lesson summary xiv Contents

      • Lesson review



    • Practice exercises

      • Exercise 1: Create a webpage that displays video



    • Suggested practice exercises

    • Answers



  • Chapter 12 Drawing with HTML5

    • Lesson 1: Drawing by using the element

      • The element reference

      • CanvasRenderingContext2D context object reference

      • Implementing the canvas

      • Drawing rectangles

      • Configuring the drawing state

      • Saving and restoring the drawing state

      • Drawing by using paths

      • Drawing text

      • Drawing with images

      • Lesson summary

      • Lesson review



    • Lesson 2: Using scalable vector graphics

      • Using the element

      • Displaying SVG files by using the element

      • Lesson summary

      • Lesson review



    • Practice exercises

      • Exercise 1: Create a webpage by using a canvas



    • Suggested practice exercises

    • Answers



  • Chapter 13 Drag and drop

    • Lesson 1: Dragging and dropping

      • Dragging

      • Understanding drag events

      • Dropping Contents xv

      • Using the DataTransfer object

      • Lesson summary

      • Lesson review



    • Lesson 2: Dragging and dropping files

      • Using the FileList and File objects

      • Lesson summary

      • Lesson review



    • Practice exercises

      • Exercise 1: Create a number scramble game

      • Exercise 2: Add drag and drop to the game

      • Exercise 3: Add scramble and winner check



    • Suggested practice exercises

    • Answers



  • Chapter 14 Making your HTML location-aware

    • Lesson 1: Basic positioning

      • Geolocation object reference

      • Retrieving the current position

      • Handling errors

      • Addressing privacy

      • Specifying options

      • Lesson summary

      • Lesson review



    • Lesson 2: Monitored positioning

      • Where are you now? How about now?

      • Calculating distance between samples

      • Lesson summary

      • Lesson review



    • Practice exercises

      • Exercise 1: Map your current positions



    • Suggested practice exercises

    • Answers



  • Chapter 15 Local data with web storage xvi Contents

    • Lesson 1: Introducing web storage

      • Understanding cookies

      • Using the jQuery cookie plug-in

      • Working with cookie limitations

      • Alternatives to cookies prior to HTML5

      • Understanding HTML5 storage

      • Exploring localStorage

      • Using short-term persistence with sessionStorage

      • Anticipating potential performance pitfalls

      • Lesson summary

      • Lesson review



    • Lesson 2: Handling storage events

      • Sending notifications only to other windows

      • Using the StorageEvent object reference

      • Subscribing to events

      • Using events with sessionStorage

      • Lesson summary

      • Lesson review



    • Practice exercises

      • Exercise 1: Create a contact book by using localStorage



    • Suggested practice exercises

    • Answers

      • Lesson

      • Lesson





  • Chapter 16 Offline web applications

    • Lesson 1: Working with Web SQL

      • Considering the questionable longevity of Web SQL

      • Creating and opening the database

      • Performing schema updates

      • Using transactions



    • Lesson summary Contents xvii

    • Lesson review



  • Lesson 2: Working with IndexedDB

    • Using browser-specific code

    • Creating and opening the database

    • Using object stores

    • Using transactions

    • Inserting a new record

    • Updating an existing record

    • Deleting a record

    • Retrieving a record

    • Understanding cursors

    • Dropping a database

    • Lesson summary

    • Lesson review



  • Lesson 3: Working with the FileSystem API

    • Assessing browser support

    • Opening the file system

    • Creating and opening a file

    • Writing to a file

    • Reading a file

    • Deleting a file

    • Creating and opening a directory

    • Writing a file to a directory

    • Deleting a directory

    • Lesson summary

    • Lesson review



  • Lesson 4: Working with the offline application HTTP cache

    • Browser support

    • The cache manifest file

    • Updating the cache

    • Understanding events



Free download pdf