JavaScript... examples
See some JavaScript validations on ASP&VB page
Cool Clock that follows pointer... (IE only)
Snowflakes falling on Hypothermia page... (IE only)
<html>
<head>
<title>...</title>
<script language=”JavaScript”>...</script>
</head>
<body>
or <body bgcolor=”#FF0000"> to change background color for whole page
<body onLoad = "document.formname.textboxname.focus();">
<body onunLoad =”...”> ???
<script language=”JavaScript”> for language=”javascript” and more ??...
<!-- ....// –> for comments that will not appear on actual web page
var now = new Date ();
var hour = name.getHours();
document.bgColor = “#000000"; <-for page/background color
document.fgColor =” #FFFFFF”; <-for text color
document.write(“display this text on web page”);
document.write(“display this text on web page”);
if (hour > 0 && hour < 7) {document.write(“display this text on web page”);}
elsif (hour > 6 && hour < 19) {document.write(“display this text on web page”);}
else (hour > 18 && hour < 25) {document.write(“display this text on web page”);}
var now = new Date();
var thisYr = now.getYear();
var nextYr = thisYr + 1
var birthday = new Date("March 26, 2001");
if (birthday.getTime() < now.getTime()) {birthday.setYear(nextYr)}
var finalexam = new Date("December 7, 2000");
var valentines = new Date("February 14, 2001");
var timebetween = birthday.getTime() - now.getTime();
var countdown = Math.floor(timebetween / (1000 * 60 * 60 * 24));
document.write("<p align=center><img src=funimages/rafiki01lg.gif></p>");
document.write("<h1 align=center>There are only " + countdown + " days \'til my next birthday.</h1>");
var timebetween = finalexam.getTime() - now.getTime();
var countdown = Math.floor(timebetween / (1000 * 60 * 60 * 24));
document.write("<p align=center>We\'re out of this class in " + countdown + " days.</p>");
var timebetween = valentines.getTime() - now.getTime();
var countdown = Math.floor(timebetween / (1000 * 60 * 60 * 24));
document.write("<p align=center>Valentine\'s Day is only " + countdown + " days away!</p>");
</script>
<form name=”somename”> or <form action=”nameofpage.cgi” method=”get” or “post” onSubmit="return validForm(this)">
<select name=’DropDownMenus’ onChange=’goPage(this.form)’>
<option value=”white”>white
<option value=”black”>black
</select>
<textarea name="ALargeTextBox" rows=5 cols=40></textarea>
<input type=”text” name=”ATextBox” size=10>
<input type=”button” value=”Click me” onClick=”dofunction()”>
<input type=”radio” name=”ChooseOnlyOne” value=”Red”>Red
<input type=”checkbox” name=”ChooseMany” value=”Blue”>Blue
</form>
</body>
</html>
<html>
<head>
<script language="JavaScript">
<!--
// Create the array and insert the quotes
var quotes = new Array();
quotes[0] = "You must take good care of your toys,<br>because if you don't we'll find out!
<br> We toys can see everything...<br>So, Play Nice!";
quotes[1] = "Buzz Lightyear, Space Ranger,<br> Universe Protection Unit.<br>I come in peace.";
quotes[2] = "To infinity and beyond!";
quotes[3] = "You've got a friend in me!";
quotes[4] = "What do you say I get someone<br> else to watch the sheep tonight?";
quotes[5] = "You're my favorite Deputy!";
var images = new Array();
images[0] = "<img src='funimages/group01.gif'><br>";
images[1] = "<img src='funimages/buzz03.gif'>";
images[2] = "<img src='funimages/buzz01.gif'>";
images[3] = "<img src='funimages/woody-buzz01.gif'>";
images[4] = "<img src='funimages/bopeep01.gif'>";
images[5] = "<img src='funimages/woody01.gif'>";
// Define the psuedo random number generator function
function rand(n)
{
var now = new Date();
var seed = now.getTime() % 0xffffffff;
seed = (0x015a4e35 * seed) % 0x7fffffff;
return (seed >> 16) % n;
}
//-->
</script>
</head>
<body>
<script language="JavaScript">
<!--
var randnum = rand(images.length);
// A quote & corresponding image will be displayed at random...
document.write("<table border=5 bordercolor=cyan cellpadding=15><tr><td align=center valign=middle>" +
(images[randnum]) + "</td><td valign=middle>" + (quotes[randnum]) + "</td></table>");
//The images & quotes will each be displayed randomly...
// document.write(quotes[randnum]);
//-->
</script>
</body>
</html>
Links as a function...
<script language="JavaScript">
function fnHomePage()
{
document.Form.action="HomePage/index.asp";
document.Form.submit();
}
function onRequestForm()
{
document.Form.action="requestform.asp?msg=NEW";
document.Form.submit();
}
</script>
' link function used inside a table
<td><a onmouseover="window.status='Home Page'; return true;" onmouseout="window.status=''; return true;" href="javascript:fnHomePage()">HOME PAGE</a></td>
' link function used inside a button
<input TYPE="button" NAME="frmRequest" ID="frmRequest" VALUE="Request Form" onclick="onRequestForm();">
' Character Counter...
function charCount(field,cntfield,maxlimit)
{
if (field.value.length > maxlimit) // trim if too long
field.value = field.value.substring(0, maxlimit);
else // update input/display counter
cntfield.value = maxlimit - field.value.length;
}
Textarea, may enter up to 100 characters... (working example)
<TEXTAREA NAME="txtStatement" ID="" COLS="25" ROWS="3" WRAP="physical"
onKeyDown="charCount(document.form.txtStatement,document.form.charAvail,100)"
onKeyUp="charCount(document.form.txtStatement,document.form.charAvail,100)"></TEXTAREA>
<input readonly type="text" name="charAvail" size="3" maxlength="3" value="100"> characters left
* * * * * * * * * *
Event handlers...
onAbort a download is aborted
onBlur no longer the active window (element loses focus)
onClick an element is clicked with mouse *ADA also use onkeypress
onChange a form element is changed
onDblClick an element is double-clicked on with mouse
onError
onFocus becomes the active window (element has focus)
onKeyDown a key was pressed down
onKeyPress a key was pressed down and released
onKeyUp a key was released
onMouseDown a pointer button was pressed down *ADA also use onkeydown
onMouseOver mouse cursor moves over an element
onMouseOut mouse cursor moves out of an element
OnMouseUp a pointer button was released *ADA also use onkeyup
onLoad a document/webpage is opened
onReset a form is reset
onResize
onSubmit a form is submitted
onSelect an element is selected
onUnload a document/webpage is closed
Other links to more about JavaScript code:JavaScript , C|net Builder , webmonkey , developer , WebReference , webreview , and zdnet
Toolbox , JavscriptMall , Browser sniffer , another , another (use IE)...
