| |
REQUIRED:
- Read and do the practice
work in Chapter 10 and Chapter 11
|
Current Date
<html>
<head>
<script language="Javascript" type="text/javascript">
<!-- Hide script
from old browsers
dayName = new Array
("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
monName = new Array ("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December")
now = new Date;
// End hiding script
from old browsers -->
</script>
</head>
<body>
<script language="Javascript" type="text/javascript">
<!-- Hide script
from old browsers
document.write("<h1>Today
is " + dayName[now.getDay()] + ", " + monName[now.getMonth()]
+ " " + now.getDate() + ".<\/h1>")
// End hiding script
from old browsers -->
</script>
</body>
</html>
Show the Time - static
<html>
<head>
<script language="Javascript" type="text/javascript">
<!-- Hide script from old browsers
now = new Date();
second = now.getSeconds();
minute = now.getMinutes();
hour = now.getHours();
var ampm;
if (hour >= 12) ampm = "pm";
else ampm = "am";
var hourname;
if (hour > 12) hourname = hour - 12;
else hourname = hour;
if (hour == 0) hourname = 12
var minutename;
if (minute < 10) minutename = ':0' + minute;
else minutename = ":" + minute;
// End hiding script
from old browsers -->
</script>
</head>
<body>
<h3>The current time is......</h3>
<script language="javascript">
<!-- hide from
non-javascript browsers
document.write ("<h3>" hourname
+ minutename + " " + ampm + "<\/h3>"
);
// End hiding script-->
</script>
</body>
</html>
Show the Time - dynamic
<html>
<head>
<script language="Javascript" type="text/javascript">
<!-- Hide script from old browsers
function showTheTime()
{
now = new Date();
second = now.getSeconds();
minute = now.getMinutes();
hour = now.getHours();
second = now.getSeconds();
var ampm;
if (hour >= 12) ampm = "pm";
else ampm = "am";
var hourname;
if (hour > 12) hourname = hour - 12;
else hourname = hour;
if (hour == 0) hourname = 12
var minutename;
if (minute < 10) minutename = ':0' + minute;
else minutename = ':' + minute;
var showseconds;
if (second < 10) showseconds = ':0' + second;
else showseconds = ':' + second;
document.theForm.showTime.value
= hourname + minutename + showseconds + " " +
ampm;
setTimeout("showTheTime()",1000);
}
// End hiding script
from old browsers -->
</script>
</head>
<body onLoad="showTheTime()">
<form name="theForm" action="#">
<input type="text" name="showTime" sieze="15" style="border:none">
</form>
</body>
</html>
|
<HTML>
<HEAD>
<SCRIPT LANGUGE="JavaScript">
function goodbye(){
alert("Thanks for Visiting!");
}
</SCRIPT>
</HEAD>
<BODY onUnLoad="goodbye()">
<H3>Example of onUnload Event Handler</H3>
Look what happens when you try to leave this page...
</BODY></HTML>
In this example, the onUnload event handler calls
the goodbye() function as user exits a document.
|
|
<html>
<head>
<script type="text/javascript"
language="Javascript">
<!-- Hide code from older browsers
window.onblur=moveUp
function moveUp() {
self.focus()
}
// Stop hiding code -->
</script>
</head>
<body>
<h1>Important content that
should always be in front</h1>
</body>
</html>
|
|
<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.
|
|
<html>
<head>
<script type="text/javascript"
language="Javascript">
<!-- Hide code from older browsers
window.onfocus=moveBack
function moveBack() {
self.blur()
}
// Stop hiding code -->
</script>
</head>
<body>
<h1>Unimportant content that
should never be in front</h1>
</body>
</html> |
|
<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().
|
|
<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!"
|
|
<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!!"
|
|
<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.
|
|
<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. |
|
|
|
- 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.
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.
|
Back to Top |