JavaScript - Set 4 - Event HandlersJavaScript Tool Box (Command Set)
Event Handlers -onclick, onload, onfocus, onblur, onmouseover,
onmouseout, onmousemove,
onsubmit, onrset.
Sorting - ascending and descending.
onclick:
<html>
<head>
<title>DHTML Event Model - onclick</title>
<!-- The for attribute declares the script for -->
<!-- a certain element, and the event for a -->
<!-- certain event. -->
<script type = "text/javascript" for = "para"
event = "onclick">
<!--
alert( "Hi there" );
// -->
</script>
</head>
<body>
<!-- The id attribute gives a unique identifier -->
<p id = "para">Click on this text!</p>
<!-- You can specify event handlers inline -->
<input type = "button" value = "Click Me!"
onclick = "alert( 'Hi again' )" />
</body>
</html>
onload:
<html>
<head>
<title>DHTML Event Model -
onload</title>
<script type = "text/javascript">
<!--
var seconds = 0;
function startTimer() {
// 1000 milliseconds = 1 second
window.setInterval( "updateTime()", 1000 );
}
function updateTime() {
seconds++;
soFar.innerText = seconds;
}
// -->
</script>
</head>
<body onload = "startTimer()">
<p>Seconds you have spent viewing this page so far:
<a id = "soFar"><strong>0</strong></a></p>
</body>
</html>
onmousemove:
<html>
<head>
<title>DHTML Event Model - onmousemove event</title>
<script type = "text/javascript">
<!--
function updateMouseCoordinates()
{
coordinates.innerText = event.srcElement.tagName +
" (" + event.offsetX + ", " + event.offsetY + ")";
}
// -->
</script>
</head>
<body style = "background-color: wheat" onmousemove = "updateMouseCoordinates()">
<span id = "coordinates">(0, 0)</span><br />
<img src = "deitel.gif" style = "position: absolute;
top: 100; left: 100" alt = "Deitel" />
</body>
</html>
onmouseover and onmouseout, Image objects:
<html>
<head>
<title>
DHTML Event Model - onmouseover and onmouseout
</title>
<script type = "text/javascript">
<!--
captionImage1 = new Image();
captionImage1.src = "caption1.gif";
captionImage2 = new Image();
captionImage2.src = "caption2.gif";
function mOver()
{
if ( event.srcElement.id == "tableCaption" ) {
event.srcElement.src = captionImage2.src;
return;
}
// If the element which triggered onmouseover has
// an id, change its color to its id.
if ( event.srcElement.id )
event.srcElement.style.color =
event.srcElement.id;
}
function mOut()
{
if ( event.srcElement.id == "tableCaption" ) {
event.srcElement.src = captionImage1.src;
return;
}
// If it has an id, change the text inside to the
// text of the id.
if ( event.srcElement.id )
event.srcElement.innerText = event.srcElement.id;
}
document.onmouseover = mOver;
document.onmouseout = mOut;
// -->
</script>
</head>
<body style = "background-color: wheat">
<h1>Guess the Hex Code's Actual Color</h1>
<p>Can you tell a color from its hexadecimal RGB code
value? Look at the hex code, guess the color. To see
what color it corresponds to, move the mouse over the
hex code. Moving the mouse out will display the color
name.</p>
<table style = "width: 50%; border-style: groove;
text-align: center; font-family: monospace;
font-weight: bold">
<caption>
<img src = "caption1.gif" id = "tableCaption"
alt = "Table Caption" />
</caption>
<tr>
<td><a id = "Black">#000000</a></td>
<td><a id = "Blue">#0000FF</a></td>
<td><a id = "Magenta">#FF00FF</a></td>
<td><a id = "Gray">#808080</a></td>
</tr>
<tr>
<td><a id = "Green">#008000</a></td>
<td><a id = "Lime">#00FF00</a></td>
<td><a id = "Maroon">#800000</a></td>
<td><a id = "Navy">#000080</a></td>
</tr>
<tr>
<td><a id = "Olive">#808000</a></td>
<td><a id = "Purple">#800080</a></td>
<td><a id = "Red">#FF0000</a></td>
<td><a id = "Silver">#C0C0C0</a></td>
</tr>
<tr>
<td><a id = "Cyan">#00FFFF</a></td>
<td><a id = "Teal">#008080</a></td>
<td><a id = "Yellow">#FFFF00</a></td>
<td><a id = "White">#FFFFFF</a></td>
</tr>
</table>
</body>
</html>
onfocus and onblur:
<html>
<head>
<title>DHTML Event Model - onfocus
and onblur</title>
<script type = "text/javascript">
<!--
var helpArray =
[
"Enter your name in this input box.",
"Enter your email address in this input box, " +
"in the format user@domain.",
"Check this box if you liked our site.",
"In this box, enter any comments you would " +
"like us to read.",
"This button submits the form to the " +
"server-side script",
"This button clears the form",
"This textarea provides context-sensitive " +
"help. Click on any input field or use the TAB " +
"key to get more information about the " +
"input field." ];
function helpText( messageNum )
{
myForm.helpBox.value = helpArray[ messageNum ];
}
// -->
</script>
</head>
<body>
<form id = "myForm" action = "">
Name: <input type = "text" name = "name"
onfocus = "helpText(0)" onblur = "helpText(6)" /><br />
Email: <input type = "text" name = "email"
onfocus = "helpText(1)" onblur = "helpText(6)" /><br />
Click here if you like this site
<input type = "checkbox" name = "like" onfocus =
"helpText(2)" onblur = "helpText(6)" /><br /><hr />
Any comments?<br />
<textarea name = "comments" rows = "5" cols = "45"
onfocus = "helpText(3)" onblur = "helpText(6)">
</textarea><br />
<input type = "submit" value = "Submit" onfocus =
"helpText(4)" onblur = "helpText(6)" />
<input type = "reset" value = "Reset" onfocus =
"helpText(5)" onblur = "helpText(6)" />
<textarea name = "helpBox" style = "position: absolute;
right: 0; top: 0" rows = "4" cols = "45">
This textarea provides context-sensitive help. Click on
any input field or use the Tab key to get more information
about the input field.</textarea>
</form>
</body>
</html>
Bubbleing (Inheritance), canceling and blocking:
<html>
<head>
<title>DHTML Event Model - Event
Bubbling</title>
<script type = "text/javascript">
<!--
function documentClick()
{
alert( "You clicked in the document" );
}
function paragraphClick( value )
{
alert( "You clicked the text" );
if ( value )
event.cancelBubble = true;
}
document.onclick = documentClick;
// -->
</script>
</head>
<body>
<p onclick = "paragraphClick( false )">Click here!</p>
<p onclick = "paragraphClick( true )">Click here, too!</p>
</body>
</html>
onsubmit and onreset:
<html>
<head>
<title>
DHTML Event Model -
onsubmit and onreset events
</title>
<script type = "text/javascript">
<!--
var helpArray =
[
"Enter your name in this input box.",
"Enter your email address in this input box, " +
"in the format user@domain.",
"Check this box if you liked our site.",
"In this box, enter any comments you would " +
"like us to read.",
"This button submits the form to the " +
"server-side script",
"This button clears the form",
"This textarea provides context-sensitive " +
"help. Click on any input field or use the Tab " +
"key to get more information about " +
"the input field." ];
function helpText( messageNum )
{
myForm.helpBox.value = helpArray[ messageNum ];
}
function formSubmit() {
window.event.returnValue = false;
if ( confirm ( "Are you sure you want to submit?" ) )
window.event.returnValue = true;
}
function formReset() {
window.event.returnValue = false;
if ( confirm( "Are you sure you want to reset?" ) )
window.event.returnValue = true;
}
// -->
</script>
</head>
<body>
<form id = "myForm" onsubmit = "formSubmit()"
onreset = "formReset()" action = "">
Name: <input type = "text" name = "name"
onfocus = "helpText(0)" onblur = "helpText(6)" /><br />
Email: <input type = "text" name = "email"
onfocus = "helpText(1)" onblur = "helpText(6)" /><br />
Click here if you like this site
<input type = "checkbox" name = "like" onfocus =
"helpText(2)" onblur = "helpText(6)" /><hr />
Any comments?<br />
<textarea name = "comments" rows = "5" cols = "45"
onfocus = "helpText(3)" onblur = "helpText(6)">
</textarea><br />
<input type = "submit" value = "Submit" onfocus =
"helpText(4)" onblur = "helpText(6)" />
<input type = "reset" value = "Reset" onfocus =
"helpText(5)" onblur = "helpText(6)" />
<textarea name = "helpBox" style = "position: absolute;
right:0; top: 0" rows = "4" cols = "45">
This textarea provides context-sensitive help. Click on
any input field or use the Tab key to get more
information about the input field.</textarea>
</form>
</body>
</html>
Sorting Data:
Contents of "searcmaterial.txt":
@Song@|@Performer@|@Copyright@|@Producer@|@Type@
@Great Big Stupid World@|@Randy Stonehill@|@2000@|@Word@|@Contemporary@
@Christmas at Dennys@|@Randy Stonehill@|@1999@|@Sparrow@|@Folk@
@Breakfast@|@Newsboys@|@1998@|@Benson@|@Alternative@
@Jesus Freak@|@DC Talk@|@1998@|@Word@|@Hip Hop@
@Agnus Dei@|@Michael W. Smith@|@2001@|@Sparrow@|@Worship@
@Altar of Pain@|@REZ@|@1991@|@Lighthouse@|@Rock@
|
<html>
<head>
<title>Data Binding - Sorting and Filtering</title>
<object id = "Publications"
classid = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name = "DataURL" value = "DBPublications.txt" />
<param name = "UseHeader" value = "TRUE" />
<param name = "TextQualifier" value = "@" />
<param name = "FieldDelim" value = "|" />
<param name = "Sort" value = "+Title" />
</object>
<style type = "text/css">
a { font-size: 9pt;
text-decoration: underline;
cursor: hand;
color: blue }
caption { cursor: hand; }
span { cursor: hand; }
</style>
<script type = "text/javascript">
<!--
var sortOrder;
function reSort( column, order )
{
if ( order )
sortOrder = "";
else
sortOrder = "-";
if ( event.ctrlKey ) {
Publications.Sort += "; " + sortOrder + column;
Publications.Reset();
}
else {
Publications.Sort = sortOrder + column;
Publications.Reset();
}
spanSort.innerText = "Current sort: " +
Publications.Sort;
}
function filter( filterText, filterColumn )
{
Publications.Filter = filterColumn + "=" +
filterText;
Publications.Reset();
spanFilter.innerText =
"Current filter: " + Publications.Filter;
}
function clearAll()
{
Publications.Sort = " ";
spanSort.innerText = "Current sort: None";
Publications.Filter = " ";
spanFilter.innerText = "Current filter: None";
Publications.Reset();
}
// -->
</script>
</head>
<body>
<h1>Advanced Sorting</h1>
<p>Click the link next to a column head to sort by that
column. To sort by more than one column at a time, hold
down Ctrl while you click another sorting link. Click
any cell to filter by the data of that cell. To clear
filters and sorts, click the green caption bar.</p>
<table datasrc = "#Publications" border = "1"
cellspacing = "0" cellpadding = "2" style =
"background-color: papayawhip;">
<caption style = "background-color: lightgreen;
padding: 5" onclick = "clearAll()">
<span id = "spanFilter" style = "font-weight: bold;
background-color: lavender">Current filter: None
</span>
<span id = "spanSort" style = "font-weight: bold;
background-color: khaki">Current sort: None</span>
</caption>
<thead>
<tr>
<th>Title <br />
(<a onclick = "reSort( 'Title', true )">
Ascending</a>
<a onclick = "reSort( 'Title', false )">
Descending</a>)
</th>
<th>Authors <br />
(<a onclick = "reSort( 'Authors', true )">
Ascending</a>
<a onclick = "reSort( 'Authors', false )">
Descending</a>)
</th>
<th>Copyright <br />
(<a onclick = "reSort( 'Copyright', true )">
Ascending</a>
<a onclick = "reSort( 'Copyright', false )">
Descending</a>)
</th>
<th>Edition <br />
(<a onclick = "reSort( 'Edition', true )">
Ascending</a>
<a onclick = "reSort( 'Edition', false )">
Descending</a>)
</th>
<th>Type <br />
(<a onclick = "reSort( 'Type', true )">
Ascending</a>
<a onclick = "reSort( 'Type', false )">
Descending</a>)
</th>
</tr>
</thead>
<tr>
<td><span datafld = "Song" onclick =
"filter( this.innerText, 'Song' )"></span>
</td>
<td><span datafld = "Performer" onclick =
"filter( this.innerText, 'Performer')"></span>
</td>
<td><span datafld = "Copyright" onclick =
"filter( this.innerText, 'Copyright' )"></span>
</td>
<td><span datafld = "Producer" onclick =
"filter( this.innerText, 'Producer' )"></span>
</td>
<td><span datafld = "Type" onclick =
"filter( this.innerText, 'Type' )"></span>
</td>
</tr>
</table>
</body>
</html>
Using the Image object:
<html>
<head>
<title>Binding to a img</title>
<object id = "Images"
classid = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name = "DataURL" value = "images.txt" />
<param name = "UseHeader" value = "True" />
</object>
<script type = "text/javascript">
<!--
recordSet = Images.recordset;
function move( whereTo )
{
switch( whereTo ) {
case "first":
recordSet.MoveFirst();
break;
case "previous":
recordSet.MovePrevious();
if ( recordSet.BOF )
recordSet.MoveLast();
break;
case "next":
recordSet.MoveNext();
if ( recordSet.EOF )
recordSet.MoveFirst();
break;
case "last":
recordSet.MoveLast();
break;
}
}
// -->
</script>
</head>
<body>
<img datasrc = "#Images" datafld = "image" alt = "Image"
style = "position: relative; left: 45px" /><br />
<input type = "button" value = "First"
onclick = "move( 'first' );" />
<input type = "button" value = "Previous"
onclick = "move( 'previous' );" />
<input type = "button" value = "Next"
onclick = "move( 'next' );" />
<input type = "button" value = "Last"
onclick = "move( 'last' );" />
</body>
</html>
|
Contact
