JavaScript: Responding to a Click

 

alert & onClick

alert() is a method of the window object that causes a small window to pop up. It offers a straightforward way of adding some interactivity to a web page. Although it is a method of 'window,' it is OK to leave off 'window' when using alert(). (It is generally OK to omit 'window' when using its methods.) If you haven't seen an alert() box before:

Here is the code behind the button:

 

<INPUT TYPE=BUTTON onClick="alert('Thanks for clicking. For your information, you are using the ' + navigator.appName + ' browser.')"; VALUE="Click Me">

The alert() method contains the text that gets displayed when the button is clicked. Note that the text inside alert() is inside single quotes. The alert() method displays 'navigator.appName,' where 'navigator' refers to the browser and 'appName' is one of the browser's properties, its name. The 'navigator.appName' property is spliced into the alert() box by the use of + signs.

The 'onClick' is an 'event handler;' it handles the 'event' of a mouse-click by specifying how the page will respond. In this case, onClick fires the alert() method. Note that the commands that are called by onClick= are inside double quotes. onClick and alert() here show a common pattern in JavaScript: a pair of single-quotes inside a pair of double-quotes.

onClick is considered a part of HTML, so it does not have to be placed inside the <SCRIPT> tag. In this context also, alert() does not have to be inside the <SCRIPT> tag.

Event handlers are a crucial part of JavaScript and we will discuss other event handlers. For WDVL's brief tutorial on event handlers, try: www.wdvl.com/Authoring/JavaScript/Tutorial/handlers.html.
For JavaScript Goodies' tutorial on event handlers, try: www.htmlgoodies.com/primers/jsp/article.php/3478461.

 

onLoad

'onLoad' is an event handler that specifies what to do once all the elements on a given page have finished loading. onLoad is placed inside the <BODY> tag. onLoad() will be demonstrated when you begin the next lesson. Following is the <BODY> line for the next lesson:

 

<BODY onLoad="alert('Welcome to this lesson on Dates!')">

Since onLoad is activated once the page has finished loading, this alert() box should pop up almost immediately.

 

Other Resources

Try these links on alert() and event handlers (in addition to the 2 links listed above):


Page Link
Writing an Event Handler www.webdeveloper.com/javascript/javascript_js_tutorial_part2.html

or check out one of our reference books, or look for other help on the Web.

 

Exercise

Work on either 1) your own web page, or 2) the eEverything.com site. Following are some instructions if you work on eEverything.com. If you work on your own site, implement something similar.

Write a brief page for the National Teachers Minute sale. List 2 items that are on sale (Panasonic Hi-Fi Stereo VHS VCR and a GE ultra-hot toaster oven) and put a button next to each item. The button, when clicked, should give the customer the current sale price for each item ($99 and $49). Use onClick and alert() to accomplish this.

Also, use an onLoad event handler to pop up an alert() box, once the page has loaded, that reminds the customer that eEverything.com accepts all major credit cards, including the eEverything.com ConvenientCard.