| <html> <head></head> <body> <form> <input type="button" value="Click Here!" onClick="alert( 'An error of type 24-Z has occurred' )"> </form> </body> </html> |
| <html> <head></head> <body> <form> <input type="button" value="Press to Confirm" onClick="confirm( 'Did you fill out a 27B/6?' )"> </form> </body> </html> |
Structure & Placement Both scripts consist of a single line of code which is triggered when a form's button is "clicked". Unlike the previous code example, these two scripts do not need to be buried in html <script> tags and comment tags. The reason for this is that the entire code is contained within an html tag (the <input> tag) so it will never show up on an html document.
Alternatively, either script could have been written to be automatically triggered as the page was loaded, in which case the html <script> and comment tags would have been required. This is how the script would look:
| <html> <head></head> <body> <script language="JavaScript"> <!-- Hide JavaScript... alert( 'Welcome to my Web Page!' )> // End Hiding --> </script> </body> </html> |
It is important to note the placement of quotation marks in these
examples. In the examples where the code is triggered by a button click,
the entire code must by contained in quotation marks:
onClick="alert( 'Your Message Here...' )"
Without the "onClick" syntax, the outside quotation marks are
unnecesssary and will cause an error so they should be left out:
alert( 'Your Message Here...' )
JavaScript Triggers JavaScripts can be triggered by user events such as clicking on a button or loading a web page. "onClick" is an example of a Javascript event handler. In the examples 1 & 2, when a form button is pressed the "onClick" event handler executes the Javascript code following the "=" sign.
| EVENT HANDLER | EVENT |
|---|---|
| onLoad | The Document finished loading |
| onAbort | The User stopped loading the page |
| onUnload | The User left the Window |
| onClick | The User Clicked on an Object |
| onMouseOver | The curser moved over an Object |
| onMouseOut | The curser left an Object |
| onFocus | The User made an Object active |
| onBlur | The User Left the Object |
| onSelect | The contents of an Object were Selected |
| onChange | The User Changed the Object |
| onSubmit | The User Clicked a form's submit button |
| onError | A JavaScript Code Error was encountered |