Examples - HTML5 for Masterminds 4th Edition

HOME BOOKS VIDEO COURSES

NEWSLETTER CONTACT

HTML5 for Masterminds

How to develop websites and web applications with HTML5, CSS, JavaScript, and PHP

4th Edition 2026
ISBN: 978-1-0699942-2-6

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 examples in TXT files or open the codes you want to see from the links below.

Download TXT Files
297.0 KBytes

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

CHAPTER 2 - HTML

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

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: Storing information in HTML with the data- attribute

Listing 2-18: Including the <h1> element

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

Listing 2-20: Showing the text in the original format

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

Listing 2-22: Highlighting text

Listing 2-23: Complementing the <article> element

Listing 2-24: Complementing the <footer> element

Listing 2-25: Presenting code with the <code> and <pre> elements

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

Listing 2-27: Using relative URLs

Listing 2-28: Linking to a document in another website

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

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

Listing 2-31: Sending an email

Listing 2-32: Applying the download attribute to download a file

Listing 2-33: Including an image in the document

Listing 2-34: Reducing the size of the image

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

Listing 2-36: Creating an unordered list of items

Listing 2-37: Creating an ordered list of items

Listing 2-38: Creating a list in reverse order

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

Listing 2-40: Quoting text with the <blockquote> element

Listing 2-41: Disclosing information

Listing 2-42: Creating a table

Listing 2-43: Creating a table with a header

Listing 2-44: Stretching cells

Listing 2-45: Using the translate attribute

Listing 2-46: Using contenteditable to edit content

Listing 2-47: Using the title attribute

Listing 2-48: Defining an empty form with the <form> element

Listing 2-49: Including tools in a form

Listing 2-50: Assigning a different label to the Submit button

Listing 2-51: Declaring initial values

Listing 2-52: Identifying form elements

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

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

Listing 2-55: Requesting specific types of inputs

Listing 2-56: Restricting the numbers

Listing 2-57: Using the range type

Listing 2-58: Using the radio type

Listing 2-59: Using the checkbox type

Listing 2-60: Using the date type

Listing 2-61: Using the color type

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

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

Listing 2-64: Using the <textarea> element

Listing 2-65: Using the <select> element

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

Listing 2-67: Using the <progress> element

Listing 2-68: Using the <meter> element

Listing 2-69: Using the disabled attribute

Listing 2-70: Using the placeholder attribute

Listing 2-71: Sending a form without validation

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

Listing 2-79: Using the GET method

Listing 2-80: Processing form values sent with GET (process.php)

Listing 2-81: Using the POST method

Listing 2-82: Processing form values sent with POST (process.php)

CHAPTER 3 - CSS

Listing 3-1: Declaring CSS properties

Listing 3-2: Declaring CSS rules

Listing 3-3: 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 (mystyles.css)

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 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 title attribute

Listing 3-22: Referencing <p> elements by the value of the title attribute

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 keywords 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: Loading fonts from Google Fonts

Listing 3-40: Assigning a Google Font to an element

Listing 3-41: Assigning a color to the title

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

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

Listing 3-44: Assigning a custom width

Listing 3-45: Assigning a custom height

Listing 3-46: Hiding the content that overflows

Listing 3-47: Adding scroll bars

Listing 3-48: Adding margins and paddings

Listing 3-49: Adding a background color

Listing 3-50: Adding a background image

Listing 3-51: Configuring the background

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

Listing 3-53: Adding a border to an element

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

Listing 3-55: Generating round corners

Listing 3-56: Declaring different values for each corner

Listing 3-57: Generating elliptic corners

Listing 3-58: Adding an outline to the header

Listing 3-59: Creating a custom border for the header box

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

Listing 3-61: Adding a shadow to the header

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

Listing 3-63: Expanding the shadow

Listing 3-64: Creating an inner shadow

Listing 3-65: Adding a shadow to the title

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

Listing 3-67: Setting the initial position

Listing 3-68: Creating a gradient with a direction of 60 degrees

Listing 3-69: Creating a multicolor gradient

Listing 3-70: Creating a translucent gradient

Listing 3-71: Setting color-stops

Listing 3-72: Creating a radial gradient

Listing 3-73: Creating a multicolor radial gradient

Listing 3-74: Declaring and reading a variable

Listing 3-75: Declaring global variables

Listing 3-76: Modifying variables

Listing 3-77: Displaying an image to modify from CSS properties

Listing 3-78: Setting the size of the image from CSS

Listing 3-79: Assigning a different size

Listing 3-80: Configuring overflown images

Listing 3-81: Resizing the image to the size of the container

Listing 3-82: Fitting the image inside the element

Listing 3-83: Aligning the image inside the element

Listing 3-84: Applying a filter to an image

Listing 3-85: Scaling an image

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

Listing 3-87: Rotating the image

Listing 3-88: Distorting the image

Listing 3-89: Moving the image to the right

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

Listing 3-91: Adding a three-dimensional effect to the image

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

Listing 3-93: Responding to the mouse

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

Listing 3-95: Creating a complex animation

Listing 3-96: Declaring more frames for our animation

CHAPTER 4 - WEB DESIGN

Listing 4-1: Hiding HTML elements

Listing 4-2: Defining the layout with inline-block elements

Listing 4-3: Testing the float property

Listing 4-4: Floating the image to the left

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

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

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

Listing 4-8: Recovering the normal flow with the flow-root display type

Listing 4-9: Creating a document to test the float property

Listing 4-10: Floating boxes to the left

Listing 4-11: Reducing the size of the container

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

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

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

Listing 4-15: Setting the z index

Listing 4-16: Showing a slide with additional information

Listing 4-17: Styling the boxes

Listing 4-18: Animating the slide

Listing 4-19: Splitting articles into columns

Listing 4-20: Defining the columns

Listing 4-21: Adding a rule between the columns

Listing 4-22: Organizing boxes with a flexible container

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

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

Listing 4-25: Creating an uneven distribution

Listing 4-26: Combining inflexible and flexible boxes

Listing 4-27: Controlling how the elements shrink

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

Listing 4-29: Declaring a maximum size

Listing 4-30: Reversing the orientation of the boxes

Listing 4-31: Defining the position of each box

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

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

Listing 4-34: Distributing vertical space

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

Listing 4-36: Aligning the boxes to the top

Listing 4-37: Aligning the boxes by the baseline

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

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

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

Listing 4-41: Defining the document

Listing 4-42: Implementing a reset rule

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

Listing 4-44: Turning the menu into a flexible container with a maximum width

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

Listing 4-46: Assigning styles to the main content

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

Listing 4-48: Configuring the content

Listing 4-49: Assigning styles to the articles

Listing 4-50: Assigning styles to the footer

Listing 4-51: HTML document for a secondary page

Listing 4-52: New styles for additional pages

Listing 4-53: Adding submenus

Listing 4-54: Assigning styles to submenus

Listing 4-55: HTML document to test the Grid Layout model

Listing 4-56: Turning a container into a grid

Listing 4-57: Defining a gap for columns and rows

Listing 4-58: Assigning the columns size automatically

Listing 4-59: Assigning multiple values with the repeat() function

Listing 4-60: Calculating the width of the columns using fractions

Listing 4-61: Assigning different types of values to each column

Listing 4-62: Spanning an item through multiple columns

Listing 4-63: Spanning multiple items

Listing 4-64: Spanning items across rows

Listing 4-65: Simplifying the rules with the span keyword

Listing 4-66: Simplifying the rules with shorthand properties

Listing 4-67: Simplifying the rules by ignoring the starting point

Listing 4-68: Defining the height of the rows

Listing 4-69: Defining the height of new rows

Listing 4-70: Defining the width of new columns

Listing 4-71: Defining the layout with grid areas

Listing 4-72: Aligning items horizontally

Listing 4-73: Aligning individual items

Listing 4-74: Nested containers

Listing 4-75: Defining the grids

Listing 4-76: Defining a container with an image and a caption

Listing 4-77: Overlaying the items

Listing 4-78: Document for the home page

Listing 4-79: Initializing the page

Listing 4-80: Styling the header

Listing 4-81: Changing the styles for the links

Listing 4-82: Styling the main section

Listing 4-83: Displaying the main content in a grid

Listing 4-84: Styling the footer

CHAPTER 5 - RESPONSIVE WEB DESIGN

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

Listing 5-2: Loading styles with Media Queries

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

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

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

Listing 5-6: Defining multiple breakpoints

Listing 5-7: Making an image flexible

Listing 5-8: Assigning a maximum size to a flexible image

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

Listing 5-10: Selecting images for different screen resolutions

Listing 5-11: Document to test background images

Listing 5-12: Updating the background image

Listing 5-13: Document to work with relative font sizes

Listing 5-14: Declaring relative font sizes

Listing 5-15: Declaring font sizes relative to the browser's font size

Listing 5-16: Adapting text

Listing 5-17: Setting a minimum and maximum font size with clamp()

Listing 5-18: Document to create a landing page

Listing 5-19: Defining a landing page

Listing 5-20: Adapting the grid to mobile devices

Listing 5-21: Automatically adapting the grid to the space available

Listing 5-22: Document to test responsive web design

Listing 5-23: Defining the styles for a responsive website

Listing 5-24: Media Query to reposition the dates

Listing 5-25: Media Query to reposition the columns

Listing 5-26: Media Query to adapt the design to small screens

Listing 5-27: Showing the menu when the button is pressed

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 constant in JavaScript

Listing 6-8: Declaring a variable in JavaScript

Listing 6-9: Reading the content of a variable

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

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

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

Listing 6-13: Performing complex operations

Listing 6-14: Controlling precedence in the operation

Listing 6-15: Incrementing the value of a variable

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

Listing 6-17: Calculating the remainder

Listing 6-18: Determining the parity of a number

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

Listing 6-20: Concatenating text

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

Listing 6-22: Concatenating strings and numbers

Listing 6-23: Concatenating numbers

Listing 6-24: Escaping characters

Listing 6-25: Generating new lines

Listing 6-26: Declaring a Boolean variable

Listing 6-27: Creating arrays

Listing 6-28: Displaying the array's values

Listing 6-29: Using different types of values

Listing 6-30: Declaring a value as undefined

Listing 6-31: Declaring a null value

Listing 6-32: Working with values in arrays

Listing 6-33: Defining multidimensional arrays

Listing 6-34: Accessing multidimensional arrays

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

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

Listing 6-37: Checking a condition with if

Listing 6-38: Inverting the result of the condition

Listing 6-39: Checking multiple conditions with logical operators

Listing 6-40: Using Boolean values as conditions

Listing 6-41: Using integer numbers as conditions

Listing 6-42: Using string as conditions

Listing 6-43: Checking two conditions with if else

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

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

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

Listing 6-47: Read the values of an array

Listing 6-48: Using the while instruction

Listing 6-49: Using the do while instruction

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

Listing 6-51: Interrupting the loop

Listing 6-52: Declaring functions

Listing 6-53: Processing data with functions

Listing 6-54: Declaring global and local variables

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

Listing 6-56: Sending a value to a function

Listing 6-57: Calling the function with different values

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

Listing 6-59: Sending multiple values to a function

Listing 6-60: Returning values from functions

Listing 6-61: Returning different values from a function

Listing 6-62: Declaring anonymous functions

Listing 6-63: Executing anonymous functions

Listing 6-64: Defining arrow functions

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

Listing 6-66: Converting a string into a number

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

Listing 6-68: Creating objects

Listing 6-69: Assigning an object to a constant

Listing 6-70: Accessing properties

Listing 6-71: Accessing properties using variables

Listing 6-72: Accessing properties with invalid names

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

Listing 6-74: Creating objects inside objects

Listing 6-75: Declaring and executing methods

Listing 6-76: Returning values from methods

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

Listing 6-78: Using a factory function to create an object

Listing 6-79: Sending initial values to a factory function

Listing 6-80: Using a factory function to create multiple objects

Listing 6-81: Defining private properties

Listing 6-82: Defining a class

Listing 6-83: Instantiating an object from a class

Listing 6-84: Instantiating multiple objects with different values

Listing 6-85: Extending a class

Listing 6-86: Creating numbers from strings

Listing 6-87: Performing arithmetic operations with objects

Listing 6-88: Creating an array with a constructor

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

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

Listing 6-91: Removing space characters

Listing 6-92: Processing a string

Listing 6-93: Converting a string to uppercase

Listing 6-94: Copying characters between two indexes

Listing 6-95: Getting words from a string

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

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

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

Listing 6-99: Replacing a string by another string

Listing 6-100: Getting the amount of values in the array

Listing 6-101: Iterating through the array

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

Listing 6-103: Filtering the values of an array

Listing 6-104: Using the condition to filter the elements

Listing 6-105: Checking the values of an array

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

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

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

Listing 6-109: Adding values to an array

Listing 6-110: Adding multiple values to an array

Listing 6-111: Concatenating two arrays

Listing 6-112: Removing values from an array

Listing 6-113: Removing values from an array

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

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

Listing 6-116: Sorting the values in alphabetical order

Listing 6-117: Sorting the values in numerical order

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

Listing 6-119: Creating a Date object

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

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

Listing 6-122: Reading the components of a date

Listing 6-123: Reading the month

Listing 6-124: Incrementing a date

Listing 6-125: Calculating an interval

Listing 6-126: Calculating an interval in seconds

Listing 6-127: Calculating an interval in days

Listing 6-128: Comparing two dates

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

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

Listing 6-131: Getting a random number

Listing 6-132: Defining a new location

Listing 6-133: Refreshing the page

Listing 6-134: Opening a new window

Listing 6-135: Using timers to execute functions

Listing 6-136: Cancelling a timer

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

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

Listing 6-139: Accessing elements by keyword

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

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

Listing 6-142: Assigning new styles to an element

Listing 6-143: Reading CSS styles from JavaScript

Listing 6-144: Replacing the element's class

Listing 6-145: Turning classes on and off

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

Listing 6-147: Assigning content to an element

Listing 6-148: Modifying the content of an element

Listing 6-149: Inserting HTML code into the document

Listing 6-150: Adding HTML code inside an element

Listing 6-151: Creating Element objects

Listing 6-152: Adding content to an Element object

Listing 6-153: Reading the value inserted by the user

Listing 6-154: Defining event attributes from JavaScript code

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

Listing 6-156: Running code when the document finishes loading

Listing 6-157: Using Event objects

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

Listing 6-159: Reporting the position of the mouse

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

Listing 6-161: Detecting the key pressed

Listing 6-162: Detecting special keys

Listing 6-163: Generating an error

Listing 6-164: Showing messages on the console with the log() method

Listing 6-165: Responding to errors

Listing 6-166: Throwing exceptions

Listing 6-167: Defining asynchronous functions

Listing 6-168: Throwing errors from asynchronous functions

CHAPTER 7 - BACK-END DEVELOPMENT

Listing 7-1: Integrating PHP code

Listing 7-2: Using PHP to add HTML elements to a document

Listing 7-3: Initializing and reading variables in PHP

Listing 7-4: Changing the value of a variable

Listing 7-5: Concatenating variables

Listing 7-6: Concatenating strings

Listing 7-7: Shortcut to concatenate strings

Listing 7-8: Interpolating values in a string

Listing 7-9: Interpolating complex values

Listing 7-10: Escaping special characters

Listing 7-11: Using arithmetic operators

Listing 7-12: Using incremental operators

Listing 7-13: Declaring a constant

Listing 7-14: Using conditionals

Listing 7-15: Comparing two values

Listing 7-16: Strict comparison

Listing 7-17: Checking multiple conditions

Listing 7-18: Selecting which conditions to check first

Listing 7-19: Checking multiple conditions with elseif

Listing 7-20: Checking multiple conditions with switch

Listing 7-21: Checking a condition with a ternary operator

Listing 7-22: Providing a value with the null operator

Listing 7-23: Defining a function

Listing 7-24: Passing values to a function

Listing 7-25: Returning values from a function

Listing 7-26: Defining variables in different scopes

Listing 7-27: Accessing global variables from a function

Listing 7-28: Formatting integers in a string

Listing 7-29: Specifying the total amount of digits

Listing 7-30: Rounding floating-point numbers

Listing 7-31: Getting a random value between a minimum and a maximum

Listing 7-32: Defining and reading arrays

Listing 7-33: Adding a value to an array

Listing 7-34: Removing a value from an array

Listing 7-35: Filtering values

Listing 7-36: Defining associative arrays

Listing 7-37: Extracting the keys from an associative array

Listing 7-38: Defining a multidimensional array

Listing 7-39: Defining a multidimensional associative array

Listing 7-40: Editing a string

Listing 7-41: Finding and subtracting characters from a string

Listing 7-42: Finding a number in a string with a regular expression

Listing 7-43: Capturing a specific match

Listing 7-44: Replacing characters in a text using regular expressions

Listing 7-45: Defining a for loop to iterate over an array

Listing 7-46: Defining a foreach loop to iterate over an array

Listing 7-47: Using a foreach loop to read the value of an associative array

Listing 7-48: Creating a while loop

Listing 7-49: Getting the current date

Listing 7-50: Getting the current year

Listing 7-51: Defining a custom date

Listing 7-52: Generating a date from a string

Listing 7-53: Form to send values with the GET method (index.php)

Listing 7-54: Document to show the values sent by the user (account.php)

Listing 7-55: Reading values from a POST request

Listing 7-56: Checking if the values were sent

Listing 7-57: Checking if the form was sent

Listing 7-58: Checking for errors

Listing 7-59: Validating the values

Listing 7-60: Displaying the values inserted by the user in the form

Listing 7-61: Displaying different content after a form submission

Listing 7-62: Redirecting the user to a new document (index.php)

Listing 7-63: Processing the values inserted by the user (account.php)

Listing 7-64: Starting a session (index.php)

Listing 7-65: Reading values from a session (account.php)

Listing 7-66: Closing the session (account.php)

Listing 7-67: Storing cookies

Listing 7-68: Reading cookies

Listing 7-69: Sending emails

Listing 7-70: Defining a class

Listing 7-71: Reading the property of an object

Listing 7-72: Implementing a method

Listing 7-73: Instantiating multiple objects

Listing 7-74: Initializing an object with a constructor

Listing 7-75: Defining getters and setters

Listing 7-76: Filtering the values

Listing 7-77: Creating a subclass

Listing 7-78: Accessing methods from the parent class

Listing 7-79: Using static properties

Listing 7-80: Defining the classes in a separate file (classes.php)

Listing 7-81: Including code from another file (process.php)

Listing 7-82: Throwing an exception (classes.php)

Listing 7-83: Catching an error (process.php)

Listing 7-84: SQL to insert a record

Listing 7-85: Inserting multiple values

Listing 7-86: SQL query to retrieve values from a table

Listing 7-87: SQL query to retrieve specific values from a table

Listing 7-89: SQL query to filter records

Listing 7-90: Search for a string

Listing 7-91: Limit a query

Listing 7-92: Modifying a record

Listing 7-93: Deleting a record

Listing 7-94: Connecting to the database (index.php)

Listing 7-95: Moving the connection to a separate file (database.php)

Listing 7-96: Connecting to the database from a separate file

Listing 7-97: Searching for values in a database (index.php)

Listing 7-98: Retrieving a single record (details.php)

Listing 7-99: Showing main content (index.php)

Listing 7-100: Creating new user accounts (signup.php)

Listing 7-101: Signing in users (signin.php)

Listing 7-102: Product details (details.php)

Listing 7-103: Showing the user's shopping cart (account.php)

Listing 7-104: Specifying the default file

Listing 7-105: Responding to errors

Listing 7-106: Rewriting a URL

Listing 7-107: Rewriting a URL with parameters

Listing 7-108: Rewriting conditions

Listing 7-109: Rewriting a domain

CHAPTER 8 - FORMS API

Listing 8-1: Submitting a form from JavaScript

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

Listing 8-3: Checking the validity of the form

Listing 8-4: Setting custom error messages

Listing 8-5: Creating a custom validation system

Listing 8-6: Validation in real time

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

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

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

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

CHAPTER 9 - MEDIA

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

Listing 9-2: Activating the controls by default

Listing 9-3: Defining the display area

Listing 9-4: Including a placeholder for the video

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

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

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

Listing 9-8: Creating a custom video player

Listing 9-9: Designing the video player

Listing 9-10: Initializing the application

Listing 9-11: Playing and pausing the video

Listing 9-12: Updating the progress bar

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

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

Listing 9-15: Controlling the volume

Listing 9-16: Listening to the DOMContentLoaded event to start the application

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

Listing 9-18: Defining a WebVTT file

Listing 9-19: Including tags in a WebVTT file

Listing 9-20: Declaring styles for WebVTT

Listing 9-21: Configuring cues

Listing 9-22: Getting the TextTrack object

Listing 9-23: Displaying the track’s information on the screen

Listing 9-24: Displaying cues on the screen

Listing 9-25: Displaying information about cues

Listing 9-26: Adding tracks and cues from JavaScript

Listing 9-27: Accessing the webcam

Listing 9-28: Showing stream information

Listing 9-29: Stopping the stream

Listing 9-30: Taking a <video> element full screen

Listing 9-31: Taking any element full screen

CHAPTER 10 - CANVAS API

Listing 10-1: Including the <canvas> element

Listing 10-2: Getting the drawing context for the canvas (canvas.js)

Listing 10-3: Drawing rectangles

Listing 10-4: Changing colors

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

Listing 10-6: Starting and ending a path

Listing 10-7: Creating a path

Listing 10-8: Completing the triangle

Listing 10-9: Drawing a solid triangle

Listing 10-10: Using a triangle as a mask

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

Listing 10-12: Open circle with the arc() method

Listing 10-13: Creating complex curves

Listing 10-14: Testing properties for lines

Listing 10-15: Drawing text

Listing 10-16: Measuring text

Listing 10-17: Applying shadows to text

Listing 10-18: Translating, rotating and scaling

Listing 10-19: Cumulative transformation of the matrix

Listing 10-20: Saving and restoring the canvas state

Listing 10-21: Testing the globalCompositeOperation property

Listing 10-22: Drawing an image

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

Listing 10-24: Extracting, resizing and drawing

Listing 10-25: Adding a pattern to our paths

Listing 10-26: Generating the negative of an image

Listing 10-27: Enabling cross-origin access

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

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

Listing 10-30: Creating an animation

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

Listing 10-32: Creating a 2D video game

Listing 10-33: Showing video on canvas

Listing 10-34: Programming a snapshot application

CHAPTER 11 - WEBGL

Listing 11-1: Loading the Three.js library

Listing 11-2: Importing the Three.js library

Listing 11-3: Including the Three.js library in the document

Listing 11-4: Creating a wireframe sphere

Listing 11-5: Rotating a cube with the mouse

Listing 11-6: Adding light to the scene

Listing 11-7: Adding texture to an object

Listing 11-8: Loading textures with a TextureLoader object

Listing 11-9: Loading multiple textures with a loading manager

Listing 11-10: Applying a different texture for each face of the cube

Listing 11-11: Including 3D text in our scene

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

Listing 11-13: Importing a 3D loader

Listing 11-14: Loading and displaying a 3D model

Listing 11-15: Creating the document for a 3D video game

Listing 11-16: Defining elemental properties

Listing 11-17: Defining the initiate() method

Listing 11-18: Defining the loading() method

Listing 11-19: Creating the scene

Listing 11-20: Controlling user's input

Listing 11-21: Processing input

Listing 11-22: Rendering the scene

Listing 11-23: Detecting collisions

Listing 11-24: Defining the game's loop

CHAPTER 12 - POINTER LOCK API

Listing 12-1: Taking control of the mouse

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

Listing 12-3: Checking the condition of the mouse

Listing 12-4: Locking and unlocking the mouse

Listing 12-5: Calculating the position with movementX and movementY

CHAPTER 13 - STORAGE

Listing 13-1: Creating a document to work with the Storage API

Listing 13-2: Storing and retrieving data

Listing 13-3: Listing all the items in the storage space

Listing 13-4: Deleting items in the storage space

Listing 13-5: Using Local Storage

Listing 13-6: Requesting persistent storage

Listing 13-7: Listening to the storage event to keep the list of items updated

Listing 13-8: Accessing the event's properties

Listing 13-9: Creating a document to test the IndexedDB API

Listing 13-10: Opening the database

Listing 13-11: Reporting errors and getting a reference to the database

Listing 13-12: Declaring Object Stores and indexes

Listing 13-13: Adding objects to our Object Store

Listing 13-14: Reading the new object

Listing 13-15: Initiating the application

Listing 13-16: Listing objects

Listing 13-17: Listing objects by year in descending order

Listing 13-18: Deleting objects

Listing 13-19: Creating a document to search for movies

Listing 13-20: Searching for movies by year

Listing 13-21: Creating a document to load files

Listing 13-22: Reading a text file

Listing 13-23: Loading images

Listing 13-24: Working with blobs and the slice() method

Listing 13-25: Assigning a blob to an <img> element

Listing 13-26: Using events to control the process

CHAPTER 14 - DRAG AND DROP API

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

Listing 14-2: Processing a drag and drop operation

Listing 14-3: Providing feedback to the user

Listing 14-4: Designing a document to drag and drop from multiple sources

Listing 14-5: Filtering images by the id attribute

Listing 14-6: Using a <canvas> element as a drop box

Listing 14-7: Configuring the thumbnail

Listing 14-8: Creating a simple document to drop files

Listing 14-9: Processing the data contained in the files property

CHAPTER 15 - GEOLOCATION API

Listing 15-1: Creating a document to test the Geolocation API

Listing 15-2: Getting the location's information

Listing 15-3: Showing error messages

Listing 15-4: Configuring the Geolocation system

Listing 15-5: Testing the watchPosition() method

CHAPTER 16 - NAVIGATION

Listing 16-1: Navigating the browser's history

Listing 16-2: Navigating back in the browser's history

Listing 16-3: Working with navigation entries

Listing 16-4: Loading URLs with the navigate() method

Listing 16-5: Intercepting navigation

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

Listing 16-7: Assigning content to the browser's history

Listing 16-8: Document to test the Fetch API

Listing 16-9: Downloading a text file from a single-page application

Listing 16-10: Downloading an image

Listing 16-11: Specifying the data type of the request

Listing 16-12: Downloading JSON data

Listing 16-13: Downloading a stream of data

Listing 16-14: Aborting an asynchronous operation

Listing 16-15: Sending data to a server

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

Listing 16-17: Document to upload files

Listing 16-18: Uploading a file to a server

Listing 16-19: Processing a file from the server (process.php)

Listing 16-20: Reporting the visibility state

Listing 16-21: Responding to the visibility state

Listing 16-22: Combining the blur, focus and visibilitychange events

CHAPTER 17 - COMMUNICATION

Listing 17-1: Document to test the Web Messaging API

Listing 17-2: Document to send messages (popup.html)

Listing 17-3: Receiving messages from specific origins/targets

Listing 17-4: Communicating with specific targets (popup.html)

Listing 17-5: Opening a communication channel (popup.html)

Listing 17-6: Communicating through ports (index.html)

Listing 17-7: Connecting to a WebSocket server

Listing 17-8: Programming a custom WebSocket server in PHP

Listing 17-9: Communicating with a custom WebSocket server

Listing 17-10: Responding to offers and answers (server.php)

Listing 17-11: Creating a document to make video calls

Listing 17-12: Connecting with the WebSocket server and getting the media streams

Listing 17-13: Starting the peer-to-peer connection

Listing 17-14: Creating an offer

Listing 17-15: Sending an offer to a remote peer

Listing 17-16: Sending signals to the remote peer

Listing 17-17: Processing the signals

Listing 17-18: Responding to the track and icecandidate events

Listing 17-19: Listening to the DOMContentLoaded event to start the application

Listing 17-20: Creating a document to test data channels

Listing 17-21: Creating the peer-to-peer connection with a data channel

CHAPTER 18 - WEB WORKERS API

Listing 18-1: Creating a document to experiment with Web Workers

Listing 18-2: Loading the worker (webworkers.js)

Listing 18-3: Creating the worker (worker.js)

Listing 18-4: Listening to the error event (webworkers.js)

Listing 18-5: Producing an error (worker.js)

Listing 18-6: Terminating the worker from the main code (webworkers.js)

Listing 18-7: Terminating the worker from the worker's code

Listing 18-8: Loading external JavaScript codes for the worker

Listing 18-9: Creating a document to experiment with shared workers

Listing 18-10: Creating the second document (document.html)

Listing 18-11: Connecting to the worker from the main document (webworkers.js)

Listing 18-12: Connecting to the worker from the second document (documentworker.js)

Listing 18-13: Responding from a shared worker (worker.js)

TABLE OF CONTENTS

Select Country

Paperback

$ 39.95 BUY NOW

Kindle

$ 12.99 BUY NOW

Apple Books

$ 12.99 BUY NOW

Google Books

$ 12.99 BUY NOW

Information

4th Edition 2026

ISBN: 978-1-0699942-2-6

More than 600 Codes Explained!