ddpz2613 topic9 java
DESCRIPTION
TRANSCRIPT
![Page 1: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/1.jpg)
HTMLConcepts and Techniques
Fifth Edition
Chapter 9
Integrating JavaScriptand HTML
![Page 2: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/2.jpg)
Chapter 9: Integrating JavaScript and HTML 2
Chapter Objectives
• Understand the concept of JavaScript language.• Discuss how to integrate JavaScript and HTML• Insert <script> tags on a Web page• Define and describe JavaScript variables• Extract the current system date• Calculate the number of days from the current
date to a future date
![Page 3: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/3.jpg)
Chapter 9: Integrating JavaScript and HTML 3
Chapter Objectives
• Describe the write() method of the document object
• Save the HTML file and test the Web page• Write a dynamic message to a Web page• Write a user-defined function that changes the
color of the browser’s scroll bar
![Page 4: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/4.jpg)
Chapter 9: Integrating JavaScript and HTML 4
Chapter Objectives
• Construct a URL from a select list option choice• Use the document’s location property to link to
a new Web page• Use the lastModified property to display the last
modified document date
![Page 5: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/5.jpg)
Chapter 9: Integrating JavaScript and HTML 5
Introduction• JavaScript is an event driven, object-based, programming
language that provides various types of functionality to Web pages, such as the ability to interact with the user.
• An event driven programming language is one that responds to events, such as user clicking a Submit or Calculate button.
• JavaScript is object-based because it is a scripting language that uses built-in objects that belong to the browser.
• An object is a person, place, or thing
![Page 6: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/6.jpg)
Built-in JavaScript Objects• Built-in object are values that are common to a browser
(array, dates, strings etc.) and neither depend on nor belong to another object.
• Table 9-1 contains a general list of the built-in JavaScript objects common to many browsers
• JavaScript developers can create new objects based on the built-in objects and the new object inherit properties from the original objects.
• JavaScript objects have properties and methods.
Chapter 9: Integrating JavaScript and HTML 6
![Page 7: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/7.jpg)
Table 9-1 Built-in JavaScript Objects
Object DescriptionArray Return an ordered set of values
Boolean Convert objects to Boolean values
Date Accesses the system time and date
Document Represent s the content of a browser’s window
Form Represents forms created with the <form> tag
Function Accesses information about specific functions
History Keeps track of Web pages visited
Image Represents images created with the <img> tag
Location Switches to a new Web page
Math Performs calculations
Navigator Obtain information about the current Web browser
Number Support special constants
Screen Gives platform specific information about the user screen
String Represents a set of character
Windows and Frames Represent a browser windows or every frame within a browser windows
Chapter 9: Integrating JavaScript and HTML 7
![Page 8: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/8.jpg)
Object and Property
• Properties are attributes of objects and describe an object’s characteristics.
• Table 9-2 shown an object and property are written by separating the object form its property with a period.
• A specific value can be assigned to a property as shown in the following example:
dog.breed=“terrier”
where the dog is the object, breed is the property, and terrier is the value assigned to the property.
Chapter 9: Integrating JavaScript and HTML 8
![Page 9: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/9.jpg)
Table 9-2 Object and Property
General Form : object.property
Comment : Where the object is stated first, then a period, then the descriptive property. A value can be assigned to the property, or the property can return a value as shown in the example below.
Examples: document.bgColor=“lightblue”browser=navigator.appName
Chapter 9: Integrating JavaScript and HTML 9
![Page 10: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/10.jpg)
Object and Method
• Methods are actions that an object can perform• For example, methods associated with the dog object
might be eat, fetch, and sit up. An object and one of its methods would be written as:
dog.fetch()
where the dog is the object and fetch is a method of the dog object
• Methods are followed by parentheses which may be empty or may contain an argument.
Chapter 9: Integrating JavaScript and HTML 10
![Page 11: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/11.jpg)
Object and Argument• An argument is a value given to a method.• Some methods require arguments, and others do not.• For example, given a dog object and fetch() method, a
statement could be written as:
dog.fetch(“ball”)
where the argument “ball” describes what the dog fetches.
• As shown in Table 9-3, the general form of writing an object with its method is similar to writing object and properties.
Chapter 9: Integrating JavaScript and HTML 11
![Page 12: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/12.jpg)
Table 9-3 Object and MethodGeneral Form : objectname.method(argument value)
Comment : Where objectname is the object, method is the action, and parameters are optional items or instructions should use. A period separates the object name from the property or method name
Examples: document.write(“some text”)window.alert(“This is a message”)varToDayDate=Date.toString()
Chapter 9: Integrating JavaScript and HTML 12
![Page 13: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/13.jpg)
User-Defined Functions• A user-defined function is JavaScript code written by
developer to perform a particular task.• The function can be used whenever the task is needed,
eliminating the need to repeat the code several times throughout an application.
• JavaScript also contains a number of built-in functions called global functions such as:– close() – to close a window– open() – to open a window– print() – to print the contents of a windows
• Most of these functions actually belong to the window object, but because the window object is assumed, they are called built-in functions
Chapter 9: Integrating JavaScript and HTML 13
![Page 14: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/14.jpg)
• For a complete list of built-in functions, see the JavaScript Quick Reference in Appendix E.
• Most JavaScript user-defined functions are called or activated using event-handler.
• An event is the result of an action, such as mouse click or a document loading.
• An event handler is JavaScript’s way to associate an action with a function.
• In this project, you first write the functions, and then event handlers that will associate the functions with specific events, such as loading the Web page.
Chapter 9: Integrating JavaScript and HTML 14
![Page 15: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/15.jpg)
Chapter 9: Integrating JavaScript and HTML 15
Opening an HTML File
• Start Notepad, and, if necessary, maximize the window. Click Format on the menu bar. If the Word Wrap command does not have a check mark next to it, click Word Wrap
• With a USB flash drive connected to one of the computer’s USB ports, click File on the menu bar and then click Open
• If Computer is not displayed in the Favorite Links section, drag the top or bottom edge of the Open dialog box until Computer is displayed
![Page 16: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/16.jpg)
Chapter 9: Integrating JavaScript and HTML 16
Opening an HTML File• Click Computer in the Favorite Links section to display a
list of available drives• If necessary, scroll until UDISK 2.0 (G:) appears in the list
of available drives• Double-click USB drive (G:). Open the Chapter09 folder,
and then double-click the ChapterFiles folder in the list of available folders
• If necessary, click the Files of type box arrow, and then click All Files. Click chapter09.html in the list of files
• Click the Open button in the Open dialog box to display the HTML code for the chapter09.html Web page
![Page 18: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/18.jpg)
Chapter 9: Integrating JavaScript and HTML 18
Entering the Start <script> and Comment Tags
• Click the blank line (line 32) press the spacebarto indent as shown below the <p style=“margin-left:10%”> tag
• Type <script type="text/javascript"> as the beginning of the script and then press the ENTER key
• Type <!--Hide from old browsers and then press the ENTER key
![Page 19: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/19.jpg)
Chapter 9: Integrating JavaScript and HTML 19
Entering the Start <script> and Comment Tags
![Page 20: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/20.jpg)
Chapter 9: Integrating JavaScript and HTML 20
Extracting the Current System Date Using the Date() Object• If necessary, click the chapter 09 - Notepad button on the
taskbar to activate the Notepad window• Click line 41 below the <!--Hide from old browsers
statement• Enter the JavaScript code shown in Table 9–13. Press
ENTER at the end of each complete line of code. Enter the current year in the indexOf() method on line 48
• After typing the last line in Table 9–13, press the ENTER key once more to leave space for additional JavaScript code
![Page 21: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/21.jpg)
Chapter 9: Integrating JavaScript and HTML 21
Extracting the Current System Date Using the Date() Object
![Page 22: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/22.jpg)
Chapter 9: Integrating JavaScript and HTML 22
Creating a Date() Object Instance to Store a Future Date• Click line 51• Substituting the
current year for the spring date March 21, 2010, type var springDate = new Date("March 21, 2010) to set the date to the start of spring and then press the ENTER key
![Page 23: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/23.jpg)
Chapter 9: Integrating JavaScript and HTML 23
Calculating Milliseconds Between Two Dates Using the getTime() Method• Click line 52, if
necessary• Type var daysToGo = springDate. getTime()-today. getTime() to calculate the number of milliseconds and then press the ENTER key
![Page 24: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/24.jpg)
Chapter 9: Integrating JavaScript and HTML 24
Converting Milliseconds to Days and Rounding Up Using the ceil() Method• Click line 53, if
necessary• Type var daysToSpring = Math.ceil(daysToGo/(1000*60*60*24)) to convert milliseconds to days and then press the ENTER key twice
![Page 25: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/25.jpg)
Chapter 9: Integrating JavaScript and HTML 25
Writing Text and Variable Values to a Web Page• Click line 55, if necessary• Enter the JavaScript code shown in Table 9–16 to
concatenate the message text with the stored values. Press the ENTER key only at the end of each complete line of code
• Press the ENTER key an additional time after line 57
![Page 26: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/26.jpg)
Chapter 9: Integrating JavaScript and HTML 26
Writing Text and Variable Values to a Web Page
![Page 27: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/27.jpg)
Chapter 9: Integrating JavaScript and HTML 27
Entering the End Comment and </script> Tags• If necessary, click blank line 59• Enter the following JavaScript code and do not press the
ENTER key after the last line
![Page 28: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/28.jpg)
Chapter 9: Integrating JavaScript and HTML 28
Entering the End Comment and </script> Tags
![Page 29: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/29.jpg)
Chapter 9: Integrating JavaScript and HTML 29
Saving an HTML File• With a USB flash drive connected to one of the computer’s USB
ports, click File on the Notepad menu bar and then click Save As. Type chapter09westlake.html in the File name text box (do not press the ENTER key)
• If Computer is not displayed in the Favorite Links section, drag the top or bottom edge of the Save As dialog box until Computer is displayed
• Click Computer in the Favorite Links section to display a list of available drives
• If necessary, scroll until UDISK 2.0 (G:) appears in the list of available drives
• If necessary, open the Chapter09\ChapterFiles folder• Click the Save button in the Save As dialog box to save the file on
the USB flash drive with the name chapter09westlake.html
![Page 31: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/31.jpg)
Chapter 9: Integrating JavaScript and HTML 31
Testing the JavaScript on a Web Page• Click the Start button on the Windows Vista taskbar to
display the Start menu• Click Internet Explorer (or another browser icon) on the
Start menu. If necessary, click the Maximize button to maximize the browser window
• Click the Address bar to select the URL on the Address bar
• Type g:\Chapter09\ChapterFiles\chapter09westlake.html in the Address box.
• Press ENTER to display the Web page
![Page 32: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/32.jpg)
Testing the JavaScript on a Web Page
Chapter 9: Integrating JavaScript and HTML 32
![Page 33: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/33.jpg)
Chapter 9: Integrating JavaScript and HTML 33
Including the Date Last Modified in a Text String• If necessary, click the Notepad button on the taskbar to
activate the Notepad window• Click line 91 below the second <p> </p> paragraph tag
after the closing </table> tag• Enter the JavaScript code shown in Table 9–19. Press
the ENTER key after each line but not after the last </script> line
![Page 34: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/34.jpg)
Chapter 9: Integrating JavaScript and HTML 34
Including the Date Last Modified in a Text String
![Page 35: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/35.jpg)
Chapter 9: Integrating JavaScript and HTML 35
Entering User-Defined Functions in the <head> Section• If necessary, click the chapter09westlake.html –
Notepad icon on the taskbar• Click blank line 6 directly below the <title> tags• Enter the JavaScript code shown in Table 9–23• Press the ENTER key twice after the last } to leave a
blank line between user-defined functions
![Page 36: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/36.jpg)
Chapter 9: Integrating JavaScript and HTML 36
Entering User-Defined Functions in the <head> Section
![Page 37: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/37.jpg)
Entering the User-defined Function to Link to a new URL using the Drop-Down Menu List
• Click line 14 if necessary• Enter the JavaScript code shown in Table 9–26 to enter
the options and links for the drop-down menu list• Do not press the ENTER key after the last line
Chapter 9: Integrating JavaScript and HTML 37
![Page 38: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/38.jpg)
Entering the User-defined Function to Link to a new URL using the Drop-Down Menu List
Chapter 9: Integrating JavaScript and HTML 38
![Page 39: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/39.jpg)
Chapter 9: Integrating JavaScript and HTML 39
Associating a User-Defined Function with the onLoad Event• Click to the right of the y in the <body> tag in line 34• Press the SPACEBAR once and then type onLoad=“scrollColor()” within the <body> tag. Do not press the ENTER key
![Page 40: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/40.jpg)
Chapter 9: Integrating JavaScript and HTML 40
Associating a User-Defined Function with the onLoad Event
![Page 41: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/41.jpg)
Chapter 9: Integrating JavaScript and HTML 41
Associating a User-Defined Function with the Select List• Click to the right of “Menu” in line 85• Press the SPACEBAR once and then type onchange=“loadInfo(this.form)“ within the <select> tag. Do not press the ENTER key
![Page 42: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/42.jpg)
Chapter 9: Integrating JavaScript and HTML 42
Associating a User-Defined Function with the Select List
![Page 43: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/43.jpg)
Chapter 9: Integrating JavaScript and HTML 43
Saving an HTML File and Viewing and Testing the Completed Web Page• With the USB drive plugged into your computer, click File
on the menu bar• Click Save on the File menu• Click the chapter 09WestLake Landscaping – Windows
Internet Explorer button on the taskbar• Click the Refresh button on the Standard Buttons toolbar• Select Rocks and Stones in the dropdown menu list to
display the Rocks and Stones page
![Page 44: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/44.jpg)
Chapter 9: Integrating JavaScript and HTML 44
Saving an HTML File and Viewing and Testing the Completed Web Page• Click the Back button on the Standard Buttons toolbar to
return to the West Lake Landscaping page• Select Using Flowers in the drop-down menu list to
display the Use of Flowers in Landscape Design page• Click the Home link at the bottom of the page to return to
the West Lake Landscaping home page, and select Landscape Design Principles from the dropdown menu list to display the Design Principles page
• Click the Home link at the bottom of the page to return to the West Lake Landscaping home page
![Page 45: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/45.jpg)
Saving an HTML File and Viewing and Testing the Completed Web Page
Chapter 9: Integrating JavaScript and HTML 45
![Page 46: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/46.jpg)
Chapter 9: Integrating JavaScript and HTML 46
Validating a Web Page
• Open Internet Explorer and navigate to the Web site validator.w3.org
• Click the Validate by File Upload tab• Click the Browse button• Locate the chapter09westlake.html file on your storage
device and click the file name• Click the Open button on the Choose file dialog box and
the file name will be inserted into the File box• Click the Check button
![Page 47: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/47.jpg)
Chapter 9: Integrating JavaScript and HTML 47
Printing an HTML File
• If necessary, click the chapter09westlake.html - Notepad button on the taskbar
• Click File on the menu bar and then click Print. Click the Print button in the Print dialog box
![Page 48: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/48.jpg)
Chapter 9: Integrating JavaScript and HTML 48
Quitting Notepad and a Browser
• Click the Close button on the browser title bar• Click the Close button on the Notepad window title bar
![Page 49: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/49.jpg)
Chapter 9: Integrating JavaScript and HTML 49
Chapter Summary
• Discuss how to integrate JavaScript and HTML• Insert <script> tags on a Web page• Define and describe JavaScript variables• Extract the current system date• Calculate the number of days from the current
date to a future date
![Page 50: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/50.jpg)
Chapter 9: Integrating JavaScript and HTML 50
Chapter Summary
• Describe the write() method of the document object
• Save the HTML file and test the Web page• Write a dynamic message to a Web page• Write a user-defined function that changes the
color of the browser’s scroll bar
![Page 51: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/51.jpg)
Chapter 9: Integrating JavaScript and HTML 51
Chapter Summary
• Construct a URL from a select list option choice• Use the document’s location property to link to a
new Web page• Use the lastModified property to display the last
modified document date
![Page 52: Ddpz2613 topic9 java](https://reader037.vdocument.in/reader037/viewer/2022100309/5402e7ab8d7f72ed558b4772/html5/thumbnails/52.jpg)
HTMLConcepts and Techniques
Fifth Edition
Chapter 9 Complete
Integrating JavaScriptand HTML