CS2020:   Web Science, Sytems and Design

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.
Event Handler
Cause/Event
Objecst can Apply to
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

<A

HREF="http://xxxx.csuhayward.edu/CS3520/index.htm"

 onMouseOver="window.status='Web Site Development Homepage'; return

true">

CS 3520</A>

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:

<HTML>

<HEAD><TITLE>The Amazing Status Line Changer</TITLE>

</HEAD>

<BODY>

<H1>Change the Status Line</H1>

<HR>

Enter the text for the status line in the space below, then

press the CHANGE button to change it.<HR>



<FORM NAME="statform">

<INPUT TYPE="text" SIZE="65"

NAME="input1"><BR>

<INPUT TYPE="button" VALUE="CHANGE"

onClick="window.status=document.statform.input1.value;">

</FORM>



<HR>

end.

</BODY>

</HTML>

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)

 
 
© Lynne Grewe