// Stop hiding code -->
</script>
</head>
<body>
<h1>Important content that
should always be in front</h1>
</body>
</html>
onBlur
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function valid(form){
var input=0;
input=document.myform.data.value;
if (input<0){
alert("Please enter a value that is greater than 0");
}
}
</SCRIPT>
</HEAD>
<BODY>
<H3>Example of onBlur Event Handler:</H3>
Try entering a value less than zero:<BR>
<form name="myform">
<input type="text" name="data" value=""
size="10" onBlur='valid(this.form)'>
</form>
</BODY>
</HTML>
In this example, 'data' is a text field. When a user
attempts to leave the field, the onBlur event handler
calls the valid() function to confirm that 'data' has
a legal value. Note that the keyword this is used to
refer to the current object.
// Stop hiding code -->
</script>
</head>
<body>
<h1>Unimportant content that
should never be in front</h1>
</body>
</html>
onClick
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function valid(form){
var input=0;
input=document.myform.data.value;
alert("Hello " + input + "! Welcome...");
}
</SCRIPT>
</HEAD>
<BODY>
<H3>Example of onClick Event Handler</H3>
Click on the button after entering your
name into the text box:<BR>
<form name="myform">
<input type="text" name="data" value="" size=10>
<INPUT TYPE="button" VALUE="Click Here"
onClick="valid(this.form)">
</form>
</BODY>
</HTML>
In an onClick event handler, a JavaScript function
is called when an object in a button (regular, radio,
reset and submit) is clicked, a link is pushed, a checkbox
is checked or an image map area is selected. Except
for the regular button and the area, the onClick event
handler can return false to cancel the action.
In this example, when the user clicks the button "Click
Here", the onClick event handler calls the function
valid().
onReset
<HTML>
<BODY>
<H3>Example of onReset Event Handler</H3>
Please type something in the text box and press the reset button:<BR>
<form name="myform" onReset="alert('This will reset the form!')">
<input type="text" name="data" value=" " size="20" value="" >
<input type="reset" Value="Reset Form" name="myreset">
</form>
</BODY></HTML>
In the above example, when you push the button, "Reset
Form" after typing something, the alert method
displays the message, "This will reset the form!"
onSelect
<HTML>
<BODY>
<H3>Example of onSelect Event Handler</H3>
Select the text from the text box:<br>
<form name="myform">
<input type="text" name="data" value="Select This" size=20
onSelect='alert("This is an example of onSelect!!")'>
</form>
</BODY></HTML>
In the above example, when you try to select the text
or part of the text, the alert method displays the
message, "This is an example of onSelect!!"
onSubmit
<HTML>
<BODY>
<H3>Example of onSubmit Event Handler</H3>
Type your name and press the button<BR>
<form name="myform" onSubmit='alert("Thank you "
+ myform.data.value +"!")'>
<input type="text" name="data">
<input type="submit" name ="submit"
value="Submit this form">
</form>
</BODY></HTML>
In this example, the onSubmit event handler calls
an alert() function when the button "Sumbit this
form" is pressed.
onChange
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function valid(form){
var input=0;
input=document.myform.data.value;
alert("You have changed the value from 10 to " + input );
}
</SCRIPT>
</HEAD>
<BODY>
<H3>Example of onChange Event Handler</H3>
Try changing the value from 10 to something else:<BR>
<form name="myform">
<input type="text" name="data" value="10" size=10
onBlur='valid(this.form)'>
</form>
</BODY>
</HTML>
The onChange event handler executes JavaScript code
when input focus exits the field after the user modifies
its text. In this example, 'data' is a text field.
When a user attempts to leave the field after a change
of the original value, the onChange event handler calls
the valid() function which alerts the user about value
that has been entered.
Lesson
8 -
Assignment
Create a single HTML file that contains the following:
the static unformatted date and time
the static formatted date and time
dynamic time
an alert message thanking the user when the document unloads
Save the file as CIS166AA08.HTM
Upload the file and any images used to your CIS166aa folder
on Gecko.
Send in Your Assignment to be Graded
After you have read these instructions, click on the link "Submit
my assignment for grading" below. This will create
a message for you to use to send in your assignment to the
CIS166AA grader. It already will have the message address and
the subject line filled in. DO NOT CHANGE THE ADDRESS
OR THE SUBJECT LINE. Enter the following required
information as the message text:
your full name
your palette account username
If you do not know your palette username, use your
student ID card at a palette account lookup station in
HTC1 or HTC2. If you are off campus, call the Student
Help Desk at 623.845.HELP (4357) or
send an email message to student-helpdesk@student.gc.maricopa.edu to
request your palette username.
you email address
course section number
Include the full URL to lesson 8 ( ie.
http://gecko.gc.maricopa.edu/~palette_username/cis166aa/cis166aa08.htm
)
Only by following this process can you be guaranteed that your
assignment will get graded and the score recorded correctly.
623.845.3000 
