HTML 5 and CSS 3, Illustrated Complete Unit L: Programming Web Pages with JavaScript

Objectives Explore the Document Object Model Add content using a script Trigger a script using an event handler Create a function HTML 5 and CSS 3 – Illustrated Complete

Objectives (continued) Store and compare data in variables Generate Web page content dynamically Script fallback options with Modernizr Integrate an existing script HTML 5 and CSS 3 – Illustrated Complete

Exploring the Document Object Model Document Object Model (DOM): standardized way of referring to parts of a Web page  Creates a hierarchical arrangement known as a DOM tree  Each part of HTML document represented by a node Object: HTML element in DOM  Specific object must be identified in order to manipulate it using JavaScript HTML 5 and CSS 3 – Illustrated Complete

Exploring the Document Object Model (continued) Property: piece of a standard set of information associated with DOM node  Attributes are considered their own nodes and are associated with their own properties Method: action that can be performed for a node  Method names are followed by parentheses between which you specify information specific to the method HTML 5 and CSS 3 – Illustrated Complete

Exploring the Document Object Model (continued) Combination of objects, properties, and methods used to specify element in DOM  Reference to DOM node begins with the document object getElementById method can specify nodegetElementById method can specify node innerHTML property can get value of nodeinnerHTML property can get value of node  Dot notation: connects all parts of statement into a single string Objects, properties, and methods are listed in sequence, separated by a periodObjects, properties, and methods are listed in sequence, separated by a period HTML 5 and CSS 3 – Illustrated Complete

Exploring the Document Object Model (continued) A DOM Tree HTML 5 and CSS 3 – Illustrated Complete

Adding Content Using a Script Scripts can be used to add content to a Web page  Statement: single script instruction Some goals can be achieved with one statement scriptsSome goals can be achieved with one statement scripts  Specify element and value using the getElementById method and innerHTML property  Script is placed in tags Spaces outside of quoted text are ignoredSpaces outside of quoted text are ignored HTML 5 and CSS 3 – Illustrated Complete

Adding Content Using a Script (continued) Code containing script and the resulting page HTML 5 and CSS 3 – Illustrated Complete

Triggering a Script Using an Event Handler Event: user action defined for Web pages  Can be linked to a script Event handler: HTML attribute that specifies a type of user action  Used to indicate that code should execute in response to specific type of user action  Allows Web page to respond to user activities HTML 5 and CSS 3 – Illustrated Complete

Triggering a Script Using an Event Handler (continued) Code containing event handler and resulting Web page HTML 5 and CSS 3 – Illustrated Complete

Creating a Function Function: chunk of script code with a name assigned to it  Code lines in function called as a single unit  Characters after // treated as comment Syntax: function name() { statement; } Function can be stored in external file  src attribute in script tag indicates location of script HTML 5 and CSS 3 – Illustrated Complete

Creating a Function (continued) Function code and code referencing function HTML 5 and CSS 3 – Illustrated Complete

Storing and Comparing Data in Variables Operators: symbols used to compare or change the values of objects or properties  Assignment operator (=)  Comparison operators: determine the size relationship between two values  Logical operators: logically connect multiple variables in a comparison Variable: used to store a value  Can be used in subsequent statements HTML 5 and CSS 3 – Illustrated Complete

Storing and Comparing Data in Variables (continued) JavaScript operators HTML 5 and CSS 3 – Illustrated Complete

Storing and Comparing Data in Variables (continued) Code using a variable when validating form input HTML 5 and CSS 3 – Illustrated Complete

Generating Web Page Content Dynamically JavaScript can be used to reconfigure Web pages based on user activities or inputs  Done by accessing, storing, manipulating, and writing values that are based on user input  Helps create Web pages customized in response to user inputs Example: specifying a user’s name, taken from a form field, when displaying a thank- you or greeting messageExample: specifying a user’s name, taken from a form field, when displaying a thank- you or greeting message HTML 5 and CSS 3 – Illustrated Complete

Generating Web Page Content Dynamically (continued) HTML 5 and CSS 3 – Illustrated Complete Code for customizing text based on user input and resulting page

Scripting Fallback Options with Modernizr Fallback options for some newer CSS and HTML features can be provided using JavaScript code  You can use Modernizr script elements to identify whether the current browser supports specific attributes Example: Modernizr.input.placeholderExample: Modernizr.input.placeholder Use conditional clauses, such as if statements, to cause fallback statements to be executed only if desired feature is not supported by current browserUse conditional clauses, such as if statements, to cause fallback statements to be executed only if desired feature is not supported by current browser HTML 5 and CSS 3 – Illustrated Complete

Scripting Fallback Options with Modernizr (continued) HTML 5 and CSS 3 – Illustrated Complete Code including script statements that generate placeholder text for older browsers

Integrating an Existing Script Many scripts for common tasks exist on the Web  Developers maintain Web sites where such scripts can be downloaded and are explained  It is possible to customize an existing script to perform a task rather than write a totally new one Make sure downloaded script comes from a reliable source and be sure you know exactly what it does before using itMake sure downloaded script comes from a reliable source and be sure you know exactly what it does before using it HTML 5 and CSS 3 – Illustrated Complete

Summary DOM is a way of referring to parts of a Web page Script code is created by combining DOM objects, properties, and methods, often using the dot notation Code for a single instruction in a script is known as a statement Scripts can be used to add contents to a page HTML 5 and CSS 3 – Illustrated Complete

Summary (continued) Scripts can be triggered in response to events Event handlers are used to link a script with a specific event A function is a block of code which is called as a single unit and has a name assigned to it  Has specific syntax  Used to simplify script structure HTML 5 and CSS 3 – Illustrated Complete

Summary (continued) Operators and variables are used to create more complex scripts JavaScript can be used to dynamically generate Web page content  In response to user actions or input JavaScript can be used to provide fallback options for older browsers Scripts for many common tasks are available on the Web HTML 5 and CSS 3 – Illustrated Complete