Events are controlled using event handlers that specify the action the browser should take in response to the event. Event handlers are created as attributes added to the HTML tag that triggers the event. Event handlers are categorized as follows:
window and document event handlers: onload, onunload, onabort, onerror, onmove, onresize, onscroll;
form event handlers: onfocus, onblur, onchange, onselect, onsubmit, onreset;
keyboard and mouse event handlers: onkeydown, onkeyup, onkeypress, onclick, ondblclick, onmousedown, onmouseup, onmousemove, onmouseover, onmouseout.
The syntax for calling an event handler is:
<tag onevent = "JavaScript commands;">
You can run a command as a link:
<a href="javascript:JavaScript commands">Hypertext</a>
Practice working with Events
Continue with the HTML document previously created, edit it as follows:
Delete the script previously made.
Add the following code in the <body>
<p>Change background color to:</p>
<form>
<input type="radio" name="colors" onclick="document.bgcolor='Red'">Red<br>
<input type="radio" name="colors" onclick="document.bgcolor='Green'">Green<br>
<input type="radio" name="colors" onclick="document.bgcolor='Blue'">Blue
</form>
<p><a href="javascript:window.close();">Close the window</a></p>
Save and test in the browser.
The onload event handler causes the event to occur when the page loads. You place the handler as an attribute of the <body> tag:
<body onload="JavaScript commands;">
Edit ordertxt.html. Add a function that returns today's date. Add another function that you'll with the onload event handler that inserts today's date into the formdate field of the form named order and moves the curser to the next field (parts of the script have been created for you):
Examine the todaytxt() function and be prepared to discuss what it does.
Add the following function below below todaytxt() function:
function startform() {
document.order.formdate.value=todaytxt();
document.order.product.focus();
}
Add the onload event handler to the <body> tag:
<body onload="startform();">
Save and refresh in the browser. Explain how the functions and the event handler affect the brower's behavior.Create a Calculated Field
JavaScript treats input values as text strings, which is a problem when you want to calculate numeric values. To do so, you need to use the eval() function, which converts the text string to a numeric value. For example, in the order form, there are three sub total and one total field:
eval(sub1)+eval(sub2)+eval(sub3)
JavaScript also does not round neatly into 2 decimal monetary values, so you need to do some rounding to get it to display correctly. Examine the following function:
function dollars(n) {
n = eval(n);
n = Math.round(n*100)/100;
return (n == Math.round(n)) ? n += ".00" :
(n*10 == Math.round(n*10)) ? n+= "0" :
n;
}Add the following function to calculate the total price just above the </script> tag.
function total_price() {
s1=eval(document.order.sub1.value);
s2=eval(document.order.sub2.value);
s3=eval(document.order.sub3.value);
document.order.total.value=dollars(s1+s2+s3);
}
Call the Function from a Selection List
The above function needs to be called from a selection list based on the structure of the form. To do so, it's important to understand that JavaScript treats a selection list as an array of option values. The selection list itself does not have a value property, but each option within the list does. You use the selectedIndex property to return the value of each option:
item_index = document.order.product.selectedIndex;
item_value = document.order.product.options[item_index].value;
item_text = document.order.product.options[item_index].text;Add the following function to ordertxt.htm just above the </script> tag.
function order_price() {
item_index = document.order.product.selectedIndex;
item_value = document.order.product.options[item_index].value;
qty_ordered = document.order.qty.selectedIndex;
document.order.sub1.value = dollars(item_value*qty_ordered);
document.order.sub2.value = dollars(item_value*qty_ordered*.05);
total_price();
}
In the product AND qty select tags add the onchange event handler:
onchange="order_price()"Of coure, the total price still needs to include shipping, which requires working with radio buttons for this form. To reference a radio button, use the following syntax:
document.form.field[i]
document.order.shipping[0]
document.order.shipping[1]
document.order.shipping[2]Using "this" keyword
It's often easier to use the "this" keyword when your event handler references the active object:
<input type="radio" name="shipping" value="7.95" onclick="shipping_price(this)">Add the following function just above the </script> tag.
function shipping_price(field) {
document.order.sub3.value = dollars(field.value);
total_price();
}
Add the event handler to all three shipping fields:
onclick="shipping_price(this)"
Save and test in the browser.