integrating javascript and html5 html5 & css 7 th edition
TRANSCRIPT
Integrating JavaScriptand HTML5
HTML5 & CSS
7th Edition
• Describe JavaScript and how it can be integrated with HTML5
• Describe how the <div> tag container is used to display text
• Describe a valid JavaScript user-defined function• Write the code to create a <script> section on a
Web page
Chapter 9: Integrating JavaScript and HTML5 2
Chapter Objectives
• Define and describe JavaScript variable• Extract the current system date • Calculate the number of days from the current
date to a future date• Use the innerHTML property to display a dynamic
message to a Web page
Chapter 9: Integrating JavaScript and HTML5 3
Chapter Objectives
• Write a user-defined JavaScript function that changes the color of the browser’s scroll bar
• Write a user-defined JavaScript function to open a Web page from a <select> tag <option> value
• Use the lastModified property to display the date the document was last modified
• Use an event handler to invoke a JavaScript user-defined function when a Web page is loaded
Chapter 9: Integrating JavaScript and HTML5 4
Chapter Objectives
• Determine what you want the code to accomplish• Determine where on the Web page you want the
code to appear• Determine where you want to store the Web page
during development
Chapter 9: Integrating JavaScript and HTML5 5
Plan Ahead
Chapter 9: Integrating JavaScript and HTML5 6
Built-In JavaScript Objects
Chapter 9: Integrating JavaScript and HTML5 7
Built-In JavaScript Objects
Chapter 9: Integrating JavaScript and HTML5 8
JavaScript
Chapter 9: Integrating JavaScript and HTML5 9
Entering a <div> Tag Container
• User-defined functions are normally written in the <head> section so that this code is loaded before the remainder of the Web page
Chapter 9: Integrating JavaScript and HTML5 10
Writing User-Defined Functions
Chapter 9: Integrating JavaScript and HTML5 11
Writing User-Defined Functions
• Although JavaScript code can be placed anywhere in the HTML code in a <script> section, developers follow the coding practice and place user-defined functions and variables in the <head> section
Chapter 9: Integrating JavaScript and HTML5 12
Inserting <script> Tags in the <head> Section
Chapter 9: Integrating JavaScript and HTML5 13
Entering the Start <script> and Comment Tags
• JavaScript uses variables to store values temporarily in internal memory
• A variable’s value can change, depending on the results of an expression or data entered by a user from a form
Chapter 9: Integrating JavaScript and HTML5 14
Using JavaScript Variables
Chapter 9: Integrating JavaScript and HTML5 15
Using JavaScript Variables
Chapter 9: Integrating JavaScript and HTML5 16
Extracting the Current System Date Using the Date() Object
Chapter 9: Integrating JavaScript and HTML5 17
Calculating the Number of Days to a Future Date
Chapter 9: Integrating JavaScript and HTML5 18
Displaying Text and Variable Values to a Web Page Using innerHTML
Chapter 9: Integrating JavaScript and HTML5 19
Entering the User-Defined Function to Change the Browser Scroll Bar Color
Chapter 9: Integrating JavaScript and HTML5 20
Using the selectedIndex Property and the Location Object to Link to a New URL
Chapter 9: Integrating JavaScript and HTML5 21
Entering the User- Defined Function to Link to a New URL Using the Drop-Down Menu
Chapter 9: Integrating JavaScript and HTML5 22
Including the Date Last Modified and a Copyright Message in a Text String
Chapter 9: Integrating JavaScript and HTML5 23
Including the Date Last Modified and a Copyright Message in a Text String
Chapter 9: Integrating JavaScript and HTML5 24
Entering the End Comment and </script> Tags
Chapter 9: Integrating JavaScript and HTML5 25
Associating User-Defined Functions with the onload Event
Chapter 9: Integrating JavaScript and HTML5 26
Associating a User-Defined Function with the OnChange Event
• Describe JavaScript and how it can be integrated with HTML5
• Describe how the <div> tag container is used to display text
• Describe a valid JavaScript user-defined function• Write the code to create a <script> section on a
Web page
Chapter 9: Integrating JavaScript and HTML5 27
Chapter Summary
• Define and describe JavaScript variable• Extract the current system date • Calculate the number of days from the current
date to a future date• Use the innerHTML property to display a dynamic
message to a Web page
Chapter 9: Integrating JavaScript and HTML5 28
Chapter Summary
• Write a user-defined JavaScript function that changes the color of the browser’s scroll bar
• Write a user-defined JavaScript function to open a Web page from a <select> tag <option> value
• Use the lastModified property to display the date the document was last modified
• Use an event handler to invoke a JavaScript user-defined function when a Web page is loaded
Chapter 9: Integrating JavaScript and HTML5 29
Chapter Summary
Chapter 9 Complete
HTML7th Edition