1. New Perspectives on Creating Web Pages with HTML
Tutorial 9: Working with JavaScript Objects and Events
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

2. Tutorial Objectives Learn about form validation
Study the object-based nature of the JavaScript language
Work with objects, properties, methods, and events of your Web page
Create a program to calculate a value
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

3. Tutorial Objectives Continued
Copy a value into a form field
Extract a value from a selection list and radio button
Display a message box to the user
Control a form submission
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

4. Sample Order Form This figure shows a sample order form.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

5. Understanding Form Validation
A form validation is a process by which the server on the browser checks form entries and, where possible, eliminates errors.
On the Web, validation can occur on the client or server side.
Form validation is a critical aspect of data entry.
A properly designed form reduces the possibility of faulty data being entered.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

6. Server-Side and Client-Side Validation
This figure shows server-side and client-side validation.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

7. JavaScript and Client-Side Validation
A powerful use of JavaScript is to provide client-side validation.
Using a script built into the Web page form provides immediate feedback to users as they enter data.
Client-side validation can reduce the network traffic between users and the Web server.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

8. An Example of the Use of JavaScript
This figure shows an example of the use of JavaScript, which will provide users with immediate feedback.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

9. Working with JavaScript Objects
JavaScript is an object-based language.
JavaScript is based on manipulating objects by modifying an object’s properties or by applying methods to an object.
objects are items that have a defined existence
each object has properties that describe its appearance, purpose, or behavior
each object has methods, which are actions that can be performed with the object or to it
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

10. Understanding JavaScript Objects and Object Names
In JavaScript, each object is identified by an object name.
for example, when you want to use JavaScript to manipulate the current window, you use the object name “window”
operations that affect the current Web page use the “document” object name
the object name can also be based on the name assigned to the object by the user
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

11. Some JavaScript Objects and Their Object Names
This figure shows a list of the many objects available in JavaScript
and their corresponding object names.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

12. Introducing the Document Object Model
JavaScript arranges objects in a Document Object Model or DOM.
The DOM defines the logical structure of objects and the way an object is accessed and manipulated.
The document object model can be thought of as a hierarchy moving from the most general object to the most specific.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

13. A Part of the Document Object Model
This figure shows a section of the entire Document Object Model (DOM).
The full DOM would be a much larger figure.
window
document
event
frame
history
location
navigator
screen
form
image
link
style
tag
anchor
button
checkbox
radio
reset
select
input
submit
textarea
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

14. DOM Hierarchy
The topmost object in the hierarchy is the window object, which contains the other objects in the list, such as the current frame, history list, and the Web page document.
The Web page document contains its own set of objects, including links, anchors, and forms.
Within each form are form objects, such as input boxes, radio buttons, or selection lists.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

15. Object Names and Browsers
Include the DOM hierarchy when referring to an object i.e window.document.order.
Some browsers cannot interpret the object names without the complete hierarchy.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

16. Field Names in a Order Form
<form name = “order”>
product
shipping
sname
sstreet
scity
billcb
bname
bstreet
bcity
cname
ccard
cnumber
formdate
sub1
sub2
sub3
total
sstate
szip
creditcb
bstate
bzip
expmonth
expyear
qty
This figure shows that each field in the order form has been given a name.
To refer to a particular field, you attach the field name to the JavaScript reference for the form.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

17. Field Names
To refer to a particular field, attach the field name to the JavaScript reference for the form.
for example, in the order form to display the current date in the formdata field use the following JavaScript object reference: document.order.formdate
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

18. Object Collections
There is another way to reference an object and that is with an object collection.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

19. Object Collections Continued
An object collection is an array of all objects of a particular type, such as all of the hyperlinks for a single document or all of the elements within a single form.
An item from an object collection can be referenced in one of three ways:
collection[i]
collection[“name”]
collection.name
collection is the JavaScript name of the collection
i is an index number of the item in the collection
name is the name assigned to the object using the name attribute
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

20. Some JavaScript Object Collections
Description
Browser Support
Netscape IE
document.all
All HTML elements in the document
4.0
document.anchors
All anchor elements in the document
3.0
document.applets
All Java applets in the document. The applet must be started before being recognized as part of the DOM
document.embeds
All embedded objects in the document
document.form.elements
All of the elements in the form named form.
document.forms
All forms in the document
2.0
document.frames
All internal frames in the document
document.images
All inline images in the document
document.links
All hyperlinks in the document
document.plugins
All plug-ins in the document
document.scripts
All scripts (created with the <script> tag) in the document
This figure lists some of the more commonly used JavaScript object collections.
Not all object collections are supported by all browsers or browser versions.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

21. Working with Object Properties
Each object in JavaScript has properties associated with it.
The number of properties depends on the particular object; some objects have only a few properties, while others have many.
As with object names, certain keywords identify properties.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

22. JavaScript Objects and Properties
This figure shows a partial list of objects and their properties.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

23. JavaScript Properties
There are several ways of working with properties.
the value of a property can be changed
store the property’s value in a variable
test whether the property equals a specified value in an If…Then expression
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

24. Modifying a Property’s Value
The syntax for changing the value of a property is:
object.property = expression
object is the JavaScript name of the object you want to manipulate
property is a property of that object
expression is a JavaScript expression that assigns a value to the property
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

25. Setting an Object’s Property Value
This figure shows how you can use objects and properties to modify a Web page and Web browser.
JavaScript commands
resulting Web page
document.fgColor
document.bgColor
window.defaultStatus
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

26. Changing Properties Not all properties can be changed.
Some properties are read-only, which means that you can read the property value, but cannot modify it.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

27. Displaying Some Read-Only Browser Properties
This figure shows how you can use JavaScript to display
additional read-only information about your browser.
JavaScript commands
resulting Web page
browser code name
browser version
browser name
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

28. Assigning a Property to a Variable
Although you cannot change the value of read-only properties, you can assign a value to a variable in your JavaScript program.
The syntax for assigning a property to a variable is:
variable = object.property
variable is the variable name
object is the name of the object
property is the name of its property
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

29. Assigning Property Values to Variables
This figure shows three examples of property values being assigned to JavaScript variables.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

30. Using Property Values to Variables
A conditional statement changes how the Web page behaves based on the value of an object property.
The following JavaScript code shows how you can incorporate object properties into a simple conditional expression:
If (document.bgColor==“black”) {
document.fgColor=“white”;
} else {
document.fgColor=“black”; }
Using objects, properties, and conditional statement provides a great deal of control over the appearance of a Web page.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

31. Working with Object Methods
Another way to control a Web page is to use methods.
Methods are either actions that objects perform or actions applied to objects.
The syntax for applying a method to an object is:
object.method(parameters);
object is the name of the object
method is the method to be applied
parameters are any values used in applying the method to the object
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

32. Examples of JavaScript Objects and Methods
This figure shows three examples of objects and methods.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

33. JavaScript Objects and Their Methods
This figure lists some additional JavaScript objects and some of the methods associated with them.
A more complete list of objects, properties, and methods is included in Appendix G.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

34. Managing Events
An event is a specific occurrence within the Web browser. For example:
opening up a Web page
positioning the mouse pointer over a location on that page
Events are an important part of JavaScript programming, you can write scripts that run in response to the actions of the user, even after the Web page has been opened.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

35. Working with Event Handlers
Events are controlled in JavaScript using event handlers that indicate what actions the browser takes in response to an event.
Event handlers are created as attributes added to the HTML tags in which the event is triggered.
The general syntax is:
< tag onevent = “JavaScript commands;”>
tag is the name of the HTML tag
onevent is the name of the event that occurs within the tag
JavaScript commands are the commands the browser runs in response to the event
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

36. JavaScript Event Holders
Category
Event Handler
Description
Netscape IE
Window and Document events
onload
The browser has completed loading the document.
2.0
3.0
onunload
The browser has completed unloading the document.
onabort
The transfer of an image as been aborted.
4.0
onerror
An error has occurred in the JavaScript program.
onmove
The user has moved the browser window.
onresize
The user has resized the browser window.
onscroll
The user has moved the scrollbar.
Form events
onfocus
The user has entered an input field.
onblur
The user has exited an input field.
onchange
The content of an input field has changed.
onselect
The user has selected text in an input or textarea field.
onsubmit
A form has been submitted.
onreset
The user has clicked the Reset button.
Keyboard and Mouse events
onkeydown
The user has begun pressing a key.
onkeyup
The user has released a key.
onkeypress
The user has pressed and released a key.
onclick
The user has clicked the mouse button.
ondblclick
The user has double-clicked the mouse button.
onmousedown
The user has begun pressing the mouse button.
onmouseup
The user has released the mouse button.
onmousemove
The user has moved the mouse pointer.
onmouseover
The user has moved the mouse over an element.
onmouseout
The user has moved the mouse out from an element.
This figure describes event handlers that JavaScript provides.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

37. Using the Onclick Event Handler
This figure shows an example of the onclick event handler used with a collection of radio buttons.
When the user clicks a radio button, the click event is initiated and the onclick event handler instructs the browser to run a JavaScript command to change the background color of the Web page.
JavaScript commands
initial Web page
users clicks the green button
users clicks the red button
users clicks the blue button
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

38. Events Initiated by the User During Data Entry
This figure shows that events often take place in rapid succession.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

39. This figure shows JavaScript events.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

40. Browser and Event Handlers
Generally, Internet Explorer and Netscape 6.0 can apply event handlers to most HTML tags.
Versions of Netscape prior to 6.0 apply event handlers to a smaller number of HTML tags.
Test Web pages with a variety of browsers and browser versions, especially if the Web page relies on JavaScript functions to operate correctly.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

41. Running JavaScript Commands as Hyperlinks
To run a command in response to the click event, an easy way of doing this is to create a hyperlink around the object to receive the mouse click.
The syntax for doing this is:
<a href=“javascript:JavaScript commands”>Hypertext</a>
JavaScript commands are the commands you want to run when the text link Hypertext is clicked by the user
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

42. Running JavaScript Commands as Hyperlinks Continued
The following code changes the Web page’s background color to red when the hypertext “Change background to red” is clicked.
<a href=“javascript:document.bgcolor= ‘red’;”>
Change background to red
</a>
One advantage of this technique is that you can apply it to objects that might not support the onclick event handler in all browsers or browser versions.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

43. Using the onload Event Handler
The event handler for loading the Web page is the onload event handler.
This handler is associated with the document object and must be placed in the <body> tag of the HTML file.
When the browser encounters the load event, it runs the startform() function.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

44. Events Initiated by the User During Data Entry
This figure shows events initiated by the user during data entry.
event handler
function to run when the page is loaded by the browser
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

45. The startform() Function
The startform() function relies on another JavaScript function named todaytxt().
The code for the todaytxt() function is as follows:
function todaytxt() {
var Today=new Date();
return today.getMonth()+1+”/”+Today.getDate()+”/”+Today.
getFullYear(); }
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

46. Creating The startform() Function
This figure shows that one of the purposes of the startform() function, is to retrieve the date string and display it in the formdate field of the order form.
current date
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

47. Properties, Methods, and Event Handlers of Input Fields
This figure shows additional properties and methods that can be associated with fields.
Property
Description IE
Netscape
defaultvalue
Default value of the field
3.0
2.0
maxlength
Maximum number of characters in the field
4.0
6.0
name
The name of the field
size
The width of the field in characters
type
The type of input field
value
The value of the input field
Method
blur()
Remove the focus from the field
focus()
Give focus to the field
select()
Select the field
Event Handler
onfocus()
Run when the field receives the focus
onblur()
Run when the field loses the focus
onchange()
Run when the value of the field changes
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

48. Initiating Events and JavaScript
When using JavaScript to initiate an event, you are instructing the Web page to perform an action that a user would normally do.
for example, such as moving the cursor to a specific field in the form
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

49. Initiating an Event with JavaScript
This figure shows three examples of JavaScript commands that initiate events in a order form.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

50. Moving the Focus to the Product Field
This figure shows an example of moving the focus to the product field.
the product field receives the focus of the cursor after the current date is entered in the formdate field
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

51. Emulating an Event with Event Methods
This figure shows additional events you can emulate in forms.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

52. Calculate the Cost of a Customer’s Order
You can use JavaScript to calculate the cost of a customer’s order based on product purchased, quantity, sales tax, and shipping costs.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

53. Creating a Calculated Field
JavaScript:
treats the values of input fields as text strings
does not round off the values to nice digits
displays calculated values to several digits
The dollar() function takes a value, n, and rounds it to two digits to the right of the decimal point.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

54. Inserting the total_cost() Function
This figure shows the function to calculate the total cost of a customer’s order.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

55. Working with a Selection List
JavaScript treats a selection list as an array of option values.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

56. Select List Array Text and Values
This figure shows the JavaScript object references and property values for the items in a product selection list. The array of selection options starts with an index value of 0.
Object
Object Properties
.text
.value
document.order.product.options[0]
Products from GPS-ware
document.order.product.options[1]
GoMap 1.0 ($19.95)
19.95
document.order.product.options[2]
Drive Planner 2.0 ($29.95)
29.95
document.order.product.options[3]
Hiker 1.0 ($29.95)
document.order.product.options[4]
G-Receiver I ($149.50)
149.50
document.order.product.options[5]
G-Receiver II ($199.50)
199.50
document.order.product.options[6]
G-Receiver III ($249.50)
249.50
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

57. The selectedIndex Property
There is no value property for the selection list itself, only for the options within the list.
The selectedIndex property indicates the index number of the selected option.
The index number of the selected item is stored in the item_index variable.
The item_index variable is then used to determine the value of the selected item and stores the value in the item_value variable.
The text of the selected item is stored in the item_text variable.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

58. Selection Lists and Selection Options
This figure shows some of the other properties and methods
associated with selection lists and selection options.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

59. Creating the order_price() Function
This figure shows the order_price() function.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

60. Working with Radio Buttons
The JavaScript reference for a radio button is:
document.form.field[i]
form is the name of the Web page form
field is the name assigned to the radio button
i is the index number of specific radio button
The first radio button has an index value of 0, the second button has an index value of 1, and so on.
the JavaScript object references for three shipping radio buttons are:
document.order.shipping[0]
document.order.shipping[1]
document.order.shipping[2]
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

61. Properties, Methods, and Event Handlers of Radio Buttons
This figure describes some of the properties, methods, and
event handlers associated with radio buttons.
Property
Description IE
Netscape
checked
A Boolean value indicating whether the radio button has been checked
3.0
2.0
name
The name of the radio button field
value
The value of radio button
Method
focus()
Give focus to the radio button
blur()
Remove focus from the radio button
click()
Click the radio button
Event Handler
onfocus()
Run when the radio button receives the focus
onblur()
Run when the radio button loses the focus
onclick()
Run when the radio button is clicked
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

62. Working with Radio Buttons Continued
For example, the values of the three shipping radio buttons can be expressed as follows in JavaScript:
document.order.shipping[0].value = “7.95”;
document.order.shipping[1].value = “9.95”;
document.order.shipping[2].value = “12.95”;
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

63. A Problem with Radio Buttons
There is no JavaScript object that refers to the entire collection of radio buttons; thus there is no single value property that tells us which button was selected.
There are only value properties for the individual radio buttons.
You could treat each radio button as a different field and run a different function for each button.
You could use an If…Then statement to test which radio button was selected.
There is an easier way: use the “this” keyword.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

64. Working the “this” Keyword
The “this” keyword is a JavaScript object name that refers to the currently selected object.
Useful in situations where several different objects on the page might access the same function.
in that situation, the “this” keyword can pass along information about the object that initiated the function
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

65. Properties, Methods, and Event Handlers of Check Boxes
This figure lists some of the properties, methods, and event handlers of check box objects.
Property
Description IE
Netscape
checked
A Boolean value indicating whether the check box has been checked
3.0
2.0
name
The name of the check box field
value
The value of the check box
Method
focus()
Give focus to the check box
blur()
Remove focus from the check box
click()
Click the check box
Event Handler
onfocus()
Run when the check box receives the focus
onblur()
Run when the check box loses the focus
onclick()
Run when the check box is clicked
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

66. Submitting a Form
If a condition of the form is not met, the browser should refuse the form submission and indicate to the user why the form was not submitted.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

67. Creating the check_form() Function
test that a product, quantity, and shipping method has been selected
test that a shipping address has been entered
test whether a billing address has been entered
test whether a card name and number has been entered
test whether a credit card type has been selected
test whether the user has entered a billing address or complete credit information
test whether the entire form has been completed properly
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

68. Controlling Form Submission
When a user completes a form and then clicks the submit button, a submit event is initiated.
JavaScript provides the onsubmit event handler that allows you to run a program in response to this action.
The submit event is associated with the form object, the event handler must be placed within the <form> tag.
The onsubmit event handler must be able to override the act of submitting the form if the form fails a validation test.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

69. The onsubmit Event Handler
The syntax for doing this is:
<form onsubmit=“return function();”>
function is the name of the function that validates your form
the function must return a value of true or false
if the value is true, the form is submitted
if the value is false, the submission is canceled, and the user is returned to the form
the keyword return in this syntax.
if the return keyword is not included, the browser submits the form whether or not it passes the validation test
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

70. Using the onsubmit Event Handler
This figure shows the code to return the value of the form_ok variable that indicates whether or not the form was completed properly.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

71. Dialog Boxes
You may want to use a dialog box to display a message to the user to indicate that the form was not properly completed.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

72. Creating a Dialog Box
JavaScript supports three types of dialog boxes: alert, prompt, and confirm.
an alert dialog box displays a message, usually alerting the user to a problem.
the prompt dialog box displays both a message and a text box.
the confirm dialog box display a message along with OK and Cancel buttons.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

73. The Dialog Boxes Syntax
The syntax for creating these dialog boxes is:
alert(“message”);
prompt (“message”, “default”);
confirm (“message”);
message is the text displayed in the dialog box
default is the default text for the prompt dialog box
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

74. JavaScript Dialog Boxes Displayed by Internet Explorer
alert(“Form Completed”)
prompt(“User Name”, “Enter your name”)
confirm(“Continue Program?”)
alert dialog box
prompt dialog box
confirm dialog box
This figure shows examples of JavaScript dialog boxes.
Different browsers display their dialog boxes with subtle differences, but all dialog boxes share the common features of a title bar, default value, OK button, and Cancel button.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

75. Responses to Dialog Boxes
You can store the response of the user for both the prompt and the confirm dialog boxes.
The syntax is:
variable = prompt(“message”, “default”);
variable = confirm(“message”);
variable is a variable that stores the user’s response
in the case of the prompt dialog box, this is the contents of the text box
for the confirm dialog box, variable has a value of true if the user clicks the OK button and false if the user clicks the Cancel button
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

76. Creating Alert Dialog Boxes
This figure shows how to create an alert dialog box.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

77. Displaying an Alert Dialog Box
This figure shows an example of an alert dialog box.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

78. Resetting a Form
When designing a form, it is important to allow the user to reset the form.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

79. Resetting a Form Resetting a form does not load the page.
Use JavaScript to reload the page.
this has the effect of resetting all field values and rerunning the startform() function that inserts the current date.
use the location object to reload a Web page
One of the methods associated with the location object is the reload()method, which reloads the current page.
The syntax is simply:
location.reload();
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

80. Resetting a Form Continued
Use JavaScript to load a different page, the command is:
location=“URL”;
URL is the address of the Web page you want to display in the browser
To control the reset event, use the onreset handler and apply it to the <form> tag.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

81. Specifying an Action for the Form Reset
This figure shows how specify an action for the form reset.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

82. Tutorial 9 Summary
Learned the object-oriented nature of the JavaScript language.
Used JavaScript as a validation tool for online forms.
Learned the basic concepts of form validation.
Introduced to object-based programming concepts i.e. objects, properties, and methods.
Learned about events, and how to run programs in response to events.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9

83. Tutorial 9 Summary Continued
Used event handlers and simulating events with event methods.
Learned about form elements.
Learned how to request information from the user by creating dialog boxes.
Learned how to create calculated fields by working with a field’s value property.
Creating Web Pages with HTML, 3e
Prepared by: C. Hueckstaedt, Tutorial 9