Examples - HTML5 for Masterminds Revised 3rd Edition

Examples and Projects

Although writing down the examples can help you remember what you are learning, sometimes it can be time consuming. To speed up the process, you can download the codes in TXT files, all Xcode projects, or open the codes you want to see from the links below.

Download TXT Files
228.0 KBytes

Download

CHAPTER 1 — WEB DEVELOPMENT

Listing 1-1: Creating an HTML document

Listing 1-2: Declaring CSS rules

Listing 1-3: Declaring JavaScript code

Listing 1-4: Declaring server-side code in PHP

CHAPTER 2 — HTML

Listing 2-22: The pubdate attribute was removed from the <time> element and it is no longer available.
Listing 2-50: In the book, we forgot to erase the closing </label> tags after the <input> tags. The correct code is shown next.

Listing 2-1: Including the <!DOCTYPE> element

Listing 2-2: Including the <html> element

Listing 2-3: Including the <head> element

Listing 2-4: Including the <body> element

Listing 2-5: Including the <title> element

Listing 2-6: Including the <meta> element

Listing 2-7: Adding more <meta> elements

Listing 2-8: Including the document's icon

Listing 2-9: Loading a CSS file with the <link> element

Listing 2-10: Including the <header> element

Listing 2-11: Including the <nav> element

Listing 2-12: Organizing the main content

Listing 2-13: Including the <article> element

Listing 2-14: Including the <footer> element

Listing 2-15: Identifying elements with the id attribute

Listing 2-16: Identifying elements with the class attribute

Listing 2-17: Including the <h1> element

Listing 2-18: Defining lines of text with the <p> element

Listing 2-19: Displaying the text in the original format

Listing 2-20: Adding line breaks to a paragraph with the <br> element

Listing 2-21: Highlighting text

Listing 2-22: Complementing the <article> element

Listing 2-23: Complementing the <footer> element

Listing 2-24: Displaying code with the <code> and <pre> elements

Listing 2-25: Linking the document to other documents with the <a> element

Listing 2-26: Linking the document to documents in other websites with the <a> element

Listing 2-27: Opening the link in a new window

Listing 2-28: Creating links to elements in the document

Listing 2-29: Sending an email

Listing 2-30: Applying the ping and download attributes

Listing 2-31: Including an image in the document

Listing 2-32: Reducing the size of the image

Listing 2-33: Identifying a picture with the <figure> element

Listing 2-34: Creating an unordered list of items

Listing 2-35: Creating an ordered list of items

Listing 2-36: Creating a list in reverse order

Listing 2-37: Creating a list of terms and descriptions

Listing 2-38: Creating a simple list with the <blockquote> element

Listing 2-39: Disclosing information with the <details> and the <summary> elements

Listing 2-40: Creating a table

Listing 2-41: Creating a table with a header

Listing 2-42: Stretching cells

Listing 2-43: Using the translate attribute

Listing 2-44: Using contenteditable to edit content

Listing 2-45: Defining a form with the <form> element

Listing 2-46: Including tools in a form

Listing 2-47: Assigning a different name to the Submit button

Listing 2-48: Declaring initial values

Listing 2-49: Identifying form elements

Listing 2-50: Associating labels with elements using the for attribute

Listing 2-51: Setting the maximum number of characters allowed

Listing 2-52: Requesting specific types of inputs

Listing 2-53: Restricting the numbers

Listing 2-54: Using the range type

Listing 2-55: Using the radio type

Listing 2-56: Using the checkbox type

Listing 2-57: Using the date type

Listing 2-58: Using the color type

Listing 2-59: Using the image type to create a submit button

Listing 2-60: Using the <button> element to create a submit button

Listing 2-61: Using the <textarea> element

Listing 2-62: Using the <select> element

Listing 2-63: Suggesting a list of values with the <datalist> element

Listing 2-64: Using the <progress> element

Listing 2-65: Using the <meter> element

Listing 2-66: Form with the method GET

Listing 2-67: Processing data in the server with PHP (process.php)

Listing 2-68: Generating an HTML document with PHP (process.php)

Listing 2-69: Using the disabled attribute

Listing 2-70: Using the placeholder attribute

Listing 2-71: Sending a form without validation with the formnovalidate attribute

Listing 2-72: Declaring the email input as a required field

Listing 2-73: Customizing types with the pattern attribute

Listing 2-74: Declaring the email input as a multiple field

Listing 2-75: Using the autocomplete attribute

Listing 2-76: Using the autofocus attribute

Listing 2-77: Deactivating the spell check feature

Listing 2-78: Declaring form elements anywhere in the document

CHAPTER 3 — CSS

Listing 3-1: Declaring CSS properties

Listing 3-2: Declaring CSS rules

Listing 3-3: Declaring Inline Styles

Listing 3-4: Including styles in the head of the document

Listing 3-5: Applying CSS styles from an external file

Listing 3-6: Defining CSS styles in an external file

Listing 3-7: Inheriting styles

Listing 3-8: Overwriting styles

Listing 3-9: Referencing <span> elements by keyword

Listing 3-10: Declaring rules with multiple selectors

Listing 3-11: Combining selectors

Listing 3-12: Testing selectors

Listing 3-13: Applying the > selector

Listing 3-14: Applying the + selector

Listing 3-15: Applying the ~ selector

Listing 3-16: Referencing by the value of the id attribute

Listing 3-17: Identifying the element <p> by the value of its id attribute

Listing 3-18: Referencing by the value of the class attribute

Listing 3-19: Assigning styles with the class attribute

Listing 3-20: Declaring a class only for <p> elements

Listing 3-21: Referencing only <p> elements that have a name attribute

Listing 3-22: Referencing <p> elements that have a name attribute with the value mytext

Listing 3-23: Applying attribute selectors

Listing 3-24: Creating a document to test pseudo-classes

Listing 3-25: Implementing the pseudo-class :nth-child()

Listing 3-26: Changing the index to affect a different element

Listing 3-27: Creating a list with the pseudo-class :nth-child()

Listing 3-28: Implementing the values odd and even

Listing 3-29: Using :last-child to modify the last <p> element of the list

Listing 3-30: Applying styles to every element except <p>

Listing 3-31: Defining an exception using the class attribute

Listing 3-32: Testing formatting properties

Listing 3-33: Changing the font family and size of the title

Listing 3-34: Changing the font with the font property

Listing 3-35: Aligning text with the text-align property

Listing 3-36: Defining the space between words with the word-spacing property

Listing 3-37: Removing the underline in the links of our document

Listing 3-38: Loading a custom font for the title

Listing 3-39: Assigning a color to the title

Listing 3-40: Assigning a color with the rgb() function

Listing 3-41: Assigning a color with the hsl() function

Listing 3-42: Assigning a custom width

Listing 3-43: Assigning a custom height

Listing 3-44: Hiding the content that overflows

Listing 3-45: Adding scroll bars

Listing 3-46: Adding margins and paddings

Listing 3-47: Adding a background color

Listing 3-48: Adding a background image

Listing 3-49: Configuring the background

Listing 3-50: Configuring the background with the background property

Listing 3-51: Adding a border to an element

Listing 3-52: Defining a border with the border property

Listing 3-53: Generating round corners

Listing 3-54: Declaring different values for each corner

Listing 3-55: Generating elliptic corners

Listing 3-56: Adding an outline to the header

Listing 3-57: Creating a custom border for the header

Listing 3-58: Defining a border image with the border-image property

Listing 3-59: Adding a shadow to the header

Listing 3-60: Adding the blur value to the box-shadow property

Listing 3-61: Expanding the shadow

Listing 3-62: Creating an inner shadow

Listing 3-63: Adding a shadow to the title

Listing 3-64: Adding a linear gradient to the header

Listing 3-65: Setting the initial position

Listing 3-66: Creating a gradient with a direction of 30 degrees

Listing 3-67: Creating a multicolor gradient

Listing 3-68: Creating a translucent gradient

Listing 3-69: Setting color-stops

Listing 3-70: Creating a radial gradient

Listing 3-71: Creating a multicolor radial gradient

Listing 3-72: Applying a filter to the header

Listing 3-73: Scaling the header

Listing 3-74: Creating a mirror image with the scale() function

Listing 3-75: Rotating the header

Listing 3-76: Distorting the header

Listing 3-77: Moving the header to the right

Listing 3-78: Moving, scaling and rotating the element with one property

Listing 3-79: Adding a three-dimensional effect to the header

Listing 3-80: Declaring a different origin for the viewer

Listing 3-81: Responding to the mouse

Listing 3-82: Creating a complete animation using the transition property

Listing 3-83: Creating a complex animation

Listing 3-84: Declaring more frames for our animation

CHAPTER 4 — WEB DESIGN

Listing 4-1: Defining HTML5 elements as block elements

Listing 4-2: Testing the float property

Listing 4-3: Floating the image to the left

Listing 4-4: Recovering the normal flow with the overflow property

Listing 4-5: Adding an empty element to apply the clear property

Listing 4-6: Recovering the normal flow with the clear property

Listing 4-7: Creating a document for testing the float property

Listing 4-8: Floating boxes to the left

Listing 4-9: Reducing the size of the container

Listing 4-10: Floating boxes to the left and right

Listing 4-11: Setting the relative position of an element

Listing 4-12: Setting the absolute position of an element

Listing 4-13: Setting the z index

Listing 4-14: Displaying a slide with additional information

Listing 4-15: Styling the boxes

Listing 4-16: Animating the slide

Listing 4-17: Splitting articles into columns

Listing 4-18: Defining the columns

Listing 4-19: Adding a rule between the columns

Listing 4-20: Defining a document for the Traditional Box Model

Listing 4-21: Implementing a reset rule

Listing 4-22: Assigning styles to the header

Listing 4-23: Assigning styles to the navigation area

Listing 4-24: Assigning styles to the options of the menu

Listing 4-25: Assigning styles to the main content

Listing 4-26: Creating the columns for the main content

Listing 4-27: Setting the position and styles of the <time> element

Listing 4-28: Assigning styles to the articles

Listing 4-29: Assigning styles to the footer

Listing 4-30: Calculating the size of the sections with percentages

Listing 4-31: Adding submenus

Listing 4-32: Assigning styles to submenus

Listing 4-33: Organizing boxes with a flexible container

Listing 4-34: Declaring the element parentbox as a flexible container

Listing 4-35: Making the boxes flexible with the flex property

Listing 4-36: Creating an uneven distribution

Listing 4-37: Combining inflexible and flexible boxes

Listing 4-38: Controlling how the elements shrink

Listing 4-39: Defining flexible boxes with a preferred size

Listing 4-40: Declaring a maximum size

Listing 4-41: Reversing the orientation of the boxes

Listing 4-42: Defining the location of each box

Listing 4-43: Distributing empty space in a flexible container

Listing 4-44: Distributing empty space with justify-content

Listing 4-45: Distributing vertical space

Listing 4-46: Stretching the boxes to occupy the vertical space available

Listing 4-47: Aligning the boxes to the top

Listing 4-48: Aligning the boxes by the baseline

Listing 4-49: Changing the alignment for the box-2 element

Listing 4-50: Creating two lines of boxes with the flex-wrap property

Listing 4-51: Aligning multiple lines with the align-content property

Listing 4-52: Defining a document for the Flexible Box Model

Listing 4-53: Turning the header into a flexible container

Listing 4-54: Turning the menu into a flexible container

Listing 4-55: Turning the columns into flexible containers

Listing 4-56: Configuring the content

Listing 4-57: Turning the footer into a flexible container

CHAPTER 5 — RESPONSIVE WEB DESIGN

Listing 5-1: Loading styles with Media Queries

Listing 5-2: Defining the styles by default (responsiveall.css)

Listing 5-3: Defining the styles for small devices (responsivephones.css)

Listing 5-4: Declaring Media Queries with the @media at-rule (responsiveall.css)

Listing 5-5: Adding multiple breakpoints

Listing 5-6: Adding the viewport <meta> tag

Listing 5-7: Creating flexible elements with percentages

Listing 5-8: Adding margins and paddings to flexible elements

Listing 5-9: Including padding and border in the size of the element

Listing 5-10: Declaring flexible and fixed columns

Listing 5-11: Moving the fixed column to the left

Listing 5-12: Creating a flexible document with two fixed columns

Listing 5-13: Defining two fixed columns on the sides

Listing 5-14: Declaring relative font sizes

Listing 5-15: Declaring relative sizes for elements and containers

Listing 5-16: Declaring relative sizes for the elements with rem units

Listing 5-17: Adapting the size of the images

Listing 5-18: Setting a maximum size for the images

Listing 5-19: Selecting the image with the <picture> element

Listing 5-20: Selecting images for different resolutions

Listing 5-21: Declaring the size of an image with high resolution

Listing 5-22: Declaring the maximum size of an image with high resolution

Listing 5-23: Including the element to show the background image

Listing 5-24: Updating the background image

Listing 5-25: Defining flexible elements with the Traditional Box Model

Listing 5-26: Repositioning the <time> element

Listing 5-27: Rearranging the columns

Listing 5-28: Creating a mobile menu

Listing 5-29: Adding a menu button for small screens

Listing 5-30: Hiding the menu button

Listing 5-31: Replacing the menu with the button

Listing 5-32: Displaying the menu when the button is pressed

Listing 5-33: Displaying the menu as a flexible container

Listing 5-34: Designing a responsive document with the Flexible Box Model

Listing 5-35: Moving the <time> element

Listing 5-36: Moving from a two-column to a one-column design

Listing 5-37: Adapting the menu and the footer

CHAPTER 6 — JAVASCRIPT

Listing 6-1: Defining inline JavaScript

Listing 6-2: Implementing multiple event attributes

Listing 6-3: Responding to the load event

Listing 6-4: Embedding JavaScript in the document

Listing 6-5: Introducing JavaScript code from an external file

Listing 6-6: Creating a JavaScript file (mycode.js)

Listing 6-7: Declaring a variable in JavaScript

Listing 6-8: Using the content of a variable

Listing 6-9: Assigning a new value to a variable

Listing 6-10: Assigning the value of a variable to another variable

Listing 6-11: Performing an operation with the value stored in a variable

Listing 6-12: Performing complex operations

Listing 6-13: Controlling precedence in the operation

Listing 6-14: Incrementing the value of a variable

Listing 6-15: Incrementing the value of a variable by a specific value

Listing 6-16: Calculating the remainder

Listing 6-17: Determining the parity of a number

Listing 6-18: Assigning a string of characters to a variable

Listing 6-19: Concatenating text

Listing 6-20: Adding text at the beginning of the value

Listing 6-21: Concatenating strings and numbers

Listing 6-22: Concatenating numbers

Listing 6-23: Escaping characters

Listing 6-24: Generating new lines

Listing 6-25: Declaring a Boolean variable

Listing 6-26: Creating arrays

Listing 6-27: Displaying the array's values

Listing 6-28: Using different types of values

Listing 6-29: Declaring a value as undefined

Listing 6-30: Declaring a null value

Listing 6-31: Working with values in arrays

Listing 6-32: Defining multidimensional arrays

Listing 6-33: Accessing multidimensional arrays

Listing 6-34: Assigning an empty array as the value of another array

Listing 6-35: Assigning an empty array to a variable

Listing 6-36: Checking a condition with if

Listing 6-37: Inverting the result of the condition

Listing 6-38: Checking multiple conditions with logical operators

Listing 6-39: Using Boolean values as conditions

Listing 6-40: Using integer numbers to set a condition

Listing 6-41: Using strings to set a condition

Listing 6-42: Checking two conditions with if else

Listing 6-43: Checking a value with the switch instruction

Listing 6-44: Creating a loop with the for instruction

Listing 6-45: Iterating over the values of an array

Listing 6-46: Using the while instruction

Listing 6-47: Using the do while instruction

Listing 6-48: Jumping to the next cycle of the loop

Listing 6-49: Interrupting the loop

Listing 6-50: Declaring and executing functions

Listing 6-51: Processing data with functions

Listing 6-52: Declaring global and local variables

Listing 6-53: Declaring two variables with the same name

Listing 6-54: Sending a value to a function

Listing 6-55: Calling the function with different values

Listing 6-56: Sending the value of a variable to a function

Listing 6-57: Sending multiple values to a function

Listing 6-58: Returning values from functions

Listing 6-59: Returning different values from a function

Listing 6-60: Declaring anonymous functions

Listing 6-61: Executing anonymous functions

Listing 6-62: Checking whether a value is a number or not

Listing 6-63: Converting a string into a number

Listing 6-64: Encoding a string to include it in a URL

Listing 6-65: Creating objects

Listing 6-66: Accessing properties

Listing 6-67: Accessing properties using variables

Listing 6-68: Accessing properties with invalid names

Listing 6-69: Updating values and adding new properties to the object

Listing 6-70: Creating objects inside objects

Listing 6-71: Declaring and executing methods

Listing 6-72: Returning values from methods

Listing 6-73: Referencing the object's properties with the this keyword

Listing 6-74: Using a constructor to create an object

Listing 6-75: Sending initial values to a constructor

Listing 6-76: Using constructors to create multiple objects

Listing 6-77: Defining private properties

Listing 6-78: Creating objects with the new operator

Listing 6-79: Defining initial values for the object

Listing 6-80: Creating objects from other objects

Listing 6-81: Adding a new method to the prototype

Listing 6-82: Testing the prototype chain

Listing 6-83: Creating numbers with a constructor

Listing 6-84: Creating numbers from strings

Listing 6-85: Performing arithmetic operations with objects

Listing 6-86: Creating an array with a constructor

Listing 6-87: Creating an empty array with a constructor

Listing 6-88: Counting the number of characters in a string

Listing 6-89: Iterating through the characters of a string

Listing 6-90: Removing space characters

Listing 6-91: Processing a string

Listing 6-92: Converting a string to uppercase

Listing 6-93: Copying a set of characters

Listing 6-94: Copying all the characters from a specific index to the end of the string

Listing 6-95: Referencing characters with negative indexes

Listing 6-96: Copying characters between two indexes

Listing 6-97: Getting words from a string

Listing 6-98: Searching for a string at the beginning of another string

Listing 6-99: Searching for a string inside another string

Listing 6-100: Finding the location of a string inside another string

Listing 6-101: Replacing a string with another string

Listing 6-102: Getting the number of values in the array

Listing 6-103: Iterating through the array

Listing 6-104: Creating an array from the values of another array

Listing 6-105: Filtering the values of an array

Listing 6-106: Returning a condition to filter the elements

Listing 6-107: Checking the values of an array

Listing 6-108: Creating a string with the values of an array

Listing 6-109: Getting the index of a value in an array

Listing 6-110: Searching for multiple values in an array

Listing 6-111: Adding values to an array

Listing 6-112: Adding multiple values to an array

Listing 6-113: Concatenating two arrays

Listing 6-114: Removing values from an array

Listing 6-115: Removing values from an array

Listing 6-116: Adding values to an array in a specific position

Listing 6-117: Sorting the values of an array in reverse order

Listing 6-118: Sorting the values in alphabetical order

Listing 6-119: Sorting the values in numerical order

Listing 6-120: Processing the values and storing the results

Listing 6-121: Creating a Date object

Listing 6-122: Creating a Date object from a string

Listing 6-123: Creating a Date object from date components

Listing 6-124: Reading the components of a date

Listing 6-125: Reading the month

Listing 6-126: Incrementing a date

Listing 6-127: Calculating an interval

Listing 6-128: Calculating an interval in seconds

Listing 6-129: Calculating an interval in days

Listing 6-130: Comparing two dates

Listing 6-131: Comparing only the date without the time

Listing 6-132: Performing arithmetic operations with the Math object

Listing 6-133: Getting a random number

Listing 6-134: Defining a new location

Listing 6-135: Refreshing the page

Listing 6-136: Opening a new window

Listing 6-137: Using timers to execute functions

Listing 6-138: Cancelling a timer

Listing 6-139: Getting a reference to the Element object that represents an element

Listing 6-140: Reading the element's attributes from JavaScript

Listing 6-141: Accessing elements by keyword

Listing 6-142: Accessing an element by keyword

Listing 6-143: Finding an element with the querySelector() method

Listing 6-144: Searching for an element inside another element

Listing 6-145: Assigning new styles to an element

Listing 6-146: Reading CSS styles from JavaScript

Listing 6-147: Replacing the element's class

Listing 6-148: Turning classes on and off

Listing 6-149: Turning classes on and off with the toggle() method

Listing 6-150: Assigning content to an element

Listing 6-151: Modifying the content of an element

Listing 6-152: Inserting HTML code into the document

Listing 6-153: Adding HTML code inside an element

Listing 6-154: Creating Element objects

Listing 6-155: Adding content to an Element object

Listing 6-156: Defining event attributes from JavaScript code

Listing 6-157: Listening to events with the addEventListener() method

Listing 6-158: Using Event objects

Listing 6-159: Responding to an event with an anonymous function

Listing 6-160: Passing values to a listener

Listing 6-161: Passing values to a listener with anonymous functions

Listing 6-162: Reporting the position of the mouse

Listing 6-163: Calculating the position of the mouse on an element

Listing 6-164: Detecting the key pressed

Listing 6-165: Detecting special keys

Listing 6-166: Generating an error

Listing 6-167: Displaying messages on the console with the log() method

Listing 6-168: Responding to errors

Listing 6-169: Throwing exceptions

Listing 6-170: Detecting features with Modernizr

CHAPTER 7 — FORMS API

Listing 7-1: Submitting a form from JavaScript

Listing 7-2: Getting a reference to the <form> element from the forms property

Listing 7-3: Checking the validity of the form

Listing 7-4: Setting custom error messages

Listing 7-5: Creating a custom validation system

Listing 7-6: Validation in real time

Listing 7-7: Reading validity states to display a customized error message

Listing 7-8: Using the :valid and :invalid pseudo-classes

Listing 7-9: Using the :required and :optional pseudo-classes

Listing 7-10: Using the :in-range and :out-of-range pseudo-classes

CHAPTER 8 — MEDIA

Listing 8-1: Playing video with the <video> element

Listing 8-2: Activating the browser's controls

Listing 8-3: Defining the display area

Listing 8-4: Including a placeholder for the video

Listing 8-5: Creating a cross-browser video player with default controls

Listing 8-6: Playing audio with the <audio> element

Listing 8-7: Creating a cross-browser audio player with default controls

Listing 8-8: Creating a video player with HTML

Listing 8-9: Designing the video player

Listing 8-10: Initializing the application

Listing 8-11: Playing and pausing the video

Listing 8-12: Updating the progress bar

Listing 8-13: Playing from the position selected by the user

Listing 8-14: Switching to sound or silence with the muted property

Listing 8-15: Controlling the volume

Listing 8-16: Listening to the load event to start the application

Listing 8-17: Adding subtitles with the <track> element

Listing 8-18: Defining a WebVTT file

Listing 8-19: Including tags in a WebVTT file

Listing 8-20: Declaring styles for WebVTT

Listing 8-21: Configuring cues

Listing 8-22: Getting the TextTrack object

Listing 8-23: Displaying the trackÕs information on the screen

Listing 8-24: Displaying cues on the screen

Listing 8-25: Displaying information about cues

Listing 8-26: Adding tracks and cues from JavaScript

CHAPTER 9 — STREAM API

Listing 9-1: Accessing the webcam

Listing 9-2: Displaying the information of the stream

Listing 9-3: Stopping the stream

CHAPTER 10 — FULLSCREEN API

Listing 10-1: Taking a <video> element full screen

Listing 10-2: Taking any element full screen

CHAPTER 11 — CANVAS API

Listing 11-1: Including the <canvas> element

Listing 11-2: Getting the drawing context for the canvas

Listing 11-3: Drawing rectangles

Listing 11-4: Changing colors

Listing 11-5: Applying a linear gradient to the canvas

Listing 11-6: Starting and ending a path

Listing 11-7: Creating a path

Listing 11-8: Completing the triangle

Listing 11-9: Drawing a solid triangle

Listing 11-10: Using a triangle as a mask

Listing 11-11: Drawing circles with the arc() method

Listing 11-12: Drawing an arc of 45 degrees

Listing 11-13: Creating complex curves

Listing 11-14: Testing properties for lines

Listing 11-15: Drawing text

Listing 11-16: Measuring text

Listing 11-17: Applying shadows to text

Listing 11-18: Translating, rotating and scaling

Listing 11-19: Cumulative transformation of the matrix

Listing 11-20: Saving and restoring the canvas state

Listing 11-21: Testing the globalCompositeOperation property

Listing 11-22: Drawing an image

Listing 11-23: Adjusting the image to the size of the canvas

Listing 11-24: Extracting, resizing and drawing

Listing 11-25: Adding a pattern to our paths

Listing 11-26: Generating the negative of an image

Listing 11-27: Enabling cross-origin access

Listing 11-28: Creating a document to show an image with the canvas' content

Listing 11-29: Creating an image with the canvas' content

Listing 11-30: Creating an animation

Listing 11-31: Creating the document to show a professional animation

Listing 11-32: Creating a 2D video game

Listing 11-33: Displaying video on canvas

Listing 11-34: Programming a snapshot application

CHAPTER 12 — WEBGL

Listing 12-1: Including the Three.js library in the document

Listing 12-2: Creating a wireframe sphere

Listing 12-3: Rotating a cube with the mouse

Listing 12-4: Adding light to the scene

Listing 12-5: Adding texture to an object

Listing 12-6: Applying a different texture for each face of the cube

Listing 12-7: Including 3D text in our scene

Listing 12-8: Introducing video in a 3D world

Listing 12-9: Loading 3D models

Listing 12-10: Creating the document for a 3D video game

Listing 12-11: Defining basic properties

Listing 12-12: Defining the initiate() method

Listing 12-13: Defining the loading() method

Listing 12-14: Defining the create() method

Listing 12-15: Defining the control() method

Listing 12-16: Defining the process() method

Listing 12-17: Defining the draw() method

Listing 12-18: Defining the detect() method

Listing 12-19: Defining the loop() method

CHAPTER 13 — POINTER LOCK API

Listing 13-1: Taking control of the mouse

Listing 13-2: Reporting a change in the condition of the mouse

Listing 13-3: Checking the condition of the mouse

Listing 13-4: Locking and unlocking the mouse

Listing 13-5: Calculating the position of the mouse with movementX and movementY

CHAPTER 14 — WEB STORAGE API

Listing 14-1: Creating a document for testing the Web Storage API

Listing 14-2: Designing the interface

Listing 14-3: Storing and retrieving data

Listing 14-4: Using a shortcut to work with items

Listing 14-5: Listing all the items in the storage space

Listing 14-6: Deleting items from the storage space

Listing 14-7: Using Local Storage

Listing 14-8: Listening to the storage event to keep the list of items updated

Listing 14-9: Accessing the event's properties

CHAPTER 15 — INDEXEDDB API

Listing 15-1: Creating a document for testing the IndexedDB API

Listing 15-2: Defining the styles for the boxes

Listing 15-3: Opening the database

Listing 15-4: Reporting errors and getting a reference to the database

Listing 15-5: Declaring Object Stores and indexes

Listing 15-6: Adding objects to our Object Store

Listing 15-7: Reading the new object

Listing 15-8: Initiating the application

Listing 15-9: Listing objects

Listing 15-10: Listing objects by year in descending order

Listing 15-11: Deleting objects

Listing 15-12: Creating a document to search for movies

Listing 15-13: Searching for movies

CHAPTER 16 — FILE API

Listing 16-1: Creating a document to load files

Listing 16-2: Defining the styles for the form and the databox element

Listing 16-3: Reading a text file

Listing 16-4: Loading images

Listing 16-5: Working with blobs and the slice() method

Listing 16-6: Assigning a blob to an <img> element

Listing 16-7: Using events to control the process

CHAPTER 17 — DRAG AND DROP API

Listing 17-1: Creating a document to experiment with the Drag and Drop API

Listing 17-2: Defining the styles for the boxes

Listing 17-3: Processing a drag and drop operation

Listing 17-4: Providing feedback to the user

Listing 17-5: Designing a document to drag and drop from multiple sources

Listing 17-6: Filtering images by the id attribute

Listing 17-7: Using a <canvas> element as a drop box

Listing 17-8: Configuring the thumbnail

Listing 17-9: Creating a simple document to drop files

Listing 17-10: Processing the data contained in the files property

CHAPTER 18 — GEOLOCATION API

Listing 18-1: Creating a document for testing the Geolocation API

Listing 18-2: Getting the location

Listing 18-3: Displaying error messages

Listing 18-4: Configuring the Geolocation system

Listing 18-5: Testing the watchPosition() method

Listing 18-6: Representing the location on a map using the Google Maps API

CHAPTER 19 — HISTORY API

Listing 19-1: Navigating back in the browser history

Listing 19-2: Creating a document to experiment with the History API

Listing 19-3: Defining the styles for the boxes and the <span> elements

Listing 19-4: Generating a new URL and content

Listing 19-5: Keeping track of the userÕs location in the browser history

Listing 19-6: Creating the main document for our application

Listing 19-7: Manipulating history

CHAPTER 20 — PAGE VISIBILITY API

Listing 20-1: Reporting the visibility state

Listing 20-2: Responding to the visibility state

Listing 20-3: Combining the blur, focus and visibilitychange events

CHAPTER 21 — AJAX LEVEL 2

Listing 21-1: Creating a document to process Ajax requests

Listing 21-2: Defining the styles to shape the boxes on the screen

Listing 21-3: Reading a file

Listing 21-4: Reading an image from the server

Listing 21-5: Displaying the progress of the request

Listing 21-6: Sending a virtual form to the server

Listing 21-7: Responding to a POST request (process.php)

Listing 21-8: Creating a document to upload files

Listing 21-9: Uploading a file with FormData()

Listing 21-10: Defining the dropping area to upload files

Listing 21-11: Uploading files one by one

CHAPTER 22 — WEB MESSAGING API

Listing 22-1: Including an iframe inside a document for testing the Web Messaging API

Listing 22-2: Defining the boxes (messaging.css)

Listing 22-3: Sending a message to the iframe (messaging.js)

Listing 22-4: Creating a document for the iframe (iframe.html)

Listing 22-5: Processing messages in the target (iframe.js)

Listing 22-6: Communicating with specific origins/targets

Listing 22-7: Communicating with specific origins (messaging.js)

Listing 22-8: Responding to the main document (iframe.js)

CHAPTER 23 — WEBSOCKET API

Listing 23-1: Adapting the onMessage() function to our application (demo.php)

Listing 23-2: Creating the document to insert commands

Listing 23-3: Defining the styles for the boxes

Listing 23-4: Sending messages to the server

Listing 23-5: Informing the user about the state of the connection

CHAPTER 24 — WEBRTC API

Listing 24-1: Responding to offers and answers from the WebSocket server (demo.php)

Listing 24-2: Creating a document to make video calls

Listing 24-3: Connecting with the WebSocket server and getting the media streams

Listing 24-4: Starting the peer-to-peer connection

Listing 24-5: Getting the Session Description

Listing 24-6: Sending an offer to a remote peer

Listing 24-7: Sending signals to the remote peer

Listing 24-8: Processing the signals

Listing 24-9: Responding to the addstream and icecandidate events

Listing 24-10: Listening to the load event to start the application

Listing 24-11: Creating a document to test data channels

Listing 24-12: Creating the peer-to-peer connection with a data channel

CHAPTER 25 — WEB AUDIO API

Listing 25-13: The requestAnimationFrame() method doesn't require the vendor prefix anymore. The instruction webkitRequestAnimationFrame(showgraphic); should be written as requestAnimationFrame(showgraphic);

Listing 25-1: Creating a document to play sounds

Listing 25-2: Playing an audio buffer

Listing 25-3: Playing the audio source node in a loop

Listing 25-4: Turning down the volume using a GainNode

Listing 25-5: Introducing delay

Listing 25-6: Getting an echo effect with the DelayNode

Listing 25-7: Adding a filter with the BiquadFilterNode

Listing 25-8: Adding a dynamic compressor

Listing 25-9: Applying a convolution effect

Listing 25-11: Calculating the position of the sound in a 3D scene

Listing 25-12: Creating a document to experiment with the AnalyserNode

Listing 25-13: Drawing the chart on a <canvas> element