JavaScript
Event Handlers:
- This is how JavaScript responds to user interactions ("which we call events") with the web-browser and web-page the JavaScript is embedded in.
- This is part of what makes JavaScript attractive as a Web Programming language.
onClick When mouse clicks on Object checkboxes, links, radio buttons, reset buttons, and submit buttons onMouseOver When mouse is over an object links onMouseOut When mouse leaves an object links onSubmit When a submit button in an HTML form is hit form's submit button onReset When a reset button in an HTML form is hit form's reset button onSelect When text in a text box or text area of an HTML form is selected form's text box, text area onLoad When object finishes loading images, windows onUnload When window is exited window onAbort When object stopped from loading images onBlur When object looses focus all form elements, windows onFocus When object gains focus all form elements, windows onChange When object's value changes and is then put out of focus select objects, text boxes, textareas onError When JavaScript error occurs images, windows
HOW TO USE Event Handlers
Generically, in HTML you will have an HTML tag that you will add the eventhandler and command to perform:
<tag EventHandler="statements_to_do">
Example:
<HTML>
<HEAD>
<SCRIPT Language="JavaScript">
function SayHello() {
document.writeln("<h1>Hello " + document.helloform.nametext.value + "</h1>");
//for sake of brevity only sent a single HTML line
//ideally send the complete HTML tags
}
</SCRIPT>
</HEAD>
</BODY>
<form name="helloform">
<INPUT type="text" value=" " name="nametext">
<INPUT type="button" value="Enter" onClick="SayHello();" >
</form>
</BODY>
</HTML>
Click here to see above example
Here is a variation of the above with an hyper-linked image using onMouseOver and onMouseOut
Part III: Understanding Event Handlers
1. In object-oriented programming, events are used to trigger portions of a program. In JavaScript, events trigger a response in the web page, providing a way to integrate JavaScript into the web page not possible with other languages, even PERL and other CGI scripts.
Here's a list of event handlers
onAbort Occurs when the user aborts the loading of an image onBlur Occurs when an object on the page loses focus onChange Occurs when a text field is changed by the user onClick Occurs when the user clicks on an item onError Occurs when a document of image can't load correctly onFocus Occurs when an item gains focus onLoad Occurs when a the page (or an image) finishes loading onMouseOver Occurs when the mouse pointer moves over an item onMouseOut Occurs when the mouse pointer moves off an item onSelect Occurs when the user selects text in a text area onSubmit occurs when a submit button is pressed onUnload Occurs when the user leaves the document or exits
2. You don't have to use a <SCRIPT> tag to use an event handler; they are an attribute of an HTML tag. Here's a common use of an event handler
First part of the event handler shows the message in single quotes; double quotes are used by HTML. The second part keeps the message from being erased, as long as the mouse is over the hypertext link. Note that window is a standard object in JavaScript and window.status represents the status bar at the bottom of the window. You can read and write messages there. The above means than when anyone puts there mouse over the link it will display the message
Part IV: Understanding the window Object
3. In this example, you'll use the event handler onClick along with a form to change the status line:
The event uses the input value in the form to change the status line. It uses a built-in object, called window. The window object actually has three properties, called child objects: document, history and location. In this case, the child object document is used to obtain form elements and use them interactively.
4. There are a number of methods included in the built-in window method. We'll look at two of them. First the window.open method, which let's you open a new browser window and taylor it to your needs. Here's what it looks like in general:
WindowName=window.open("URL", "WindowName", "FeatureList");WindowName is the name of the new object.
URL is any hypertext link. If this is blank, no Web page will load.
WindowName is the name used for TARGETS, as is done with Frame sites.
And Feature List is a collection of options, separated by commas.
For example, to create a small window with no toolbar or status line, try this
SmallWin = window.open ("", "small", "width=100,height=120,toolbar=0,status=0)
5. Try this page, where you'll create windows and then close them:
<HTML> <HEAD><TITLE>Create a New Window</TITLE> </HEAD> <BODY> <H1>Create a New Window</H1> <HR> Use the buttons below to test opening and closing windows in JavaScript. <HR> <FORM NAME="winform"> <INPUT TYPE="button" VALUE="Open New Window" onClick="NewWin=window.open('','NewWin', 'toolbar=no,status=no,width=200,height=100'); "> <P><INPUT TYPE="button" VALUE="Close New Window" onClick="NewWin.close();" > <P><INPUT TYPE="button" VALUE="Close Main Window" onClick="window.close();"> </FORM> <HR> </BODY> </HTML>
6. In this example, you 'll use some more methods that useful for displaying a message and interactng with the user: alert(), confirm() and prompt():
<HTML> <HEAD><TITLE>Alerts, Confirmations, and Prompts</TITLE> </HEAD> <BODY> <H1>Alerts, Confirmations, and Prompts</H1> <HR> Use the buttons below to test dialogs in JavaScript. <HR> <FORM NAME="winform"> <INPUT TYPE="button" VALUE="Display an Alert" onClick="window.alert('This is a test alert.'); "> <P><INPUT TYPE="button" VALUE="Display a Confirmation" onClick="temp = window.confirm('Would you like to confirm?'); window.status=(temp)?'confirm: true':'confirm: false'; "> <P><INPUT TYPE="button" VALUE="Display a Prompt" onClick="var temp = window.prompt('Enter some Text:','This is the default value'); window.status=temp; "> </FORM> <BR>Have fun! <HR> </BODY> </HTML>
Next : Scrolling Quotations (loops) and Form Validation (conditionals)