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
Objectives (continued) Store and compare data in variables Generate Web page content dynamically Script fallback options with Modernizr Integrate an existing script
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
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
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 node innerhtml 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 period
Exploring the Document Object Model (continued) A DOM Tree
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 scripts Specify element and value using the getelementbyid method and innerhtml property Script is placed in <script> tags Spaces outside of quoted text are ignored
Adding Content Using a Script (continued) Code containing script and the resulting page
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
Triggering a Script Using an Event Handler (continued) Code containing event handler and resulting Web page
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
Creating a Function (continued) Function code and code referencing function
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
Storing and Comparing Data in Variables (continued) JavaScript operators
Storing and Comparing Data in Variables (continued) Code using a variable when validating form input
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 thankyou or greeting message
Generating Web Page Content Dynamically (continued) 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.placeholder Use conditional clauses, such as if statements, to cause fallback statements to be executed only if desired feature is not supported by current browser
Scripting Fallback Options with Modernizr (continued) 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 it
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
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
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