Events
First, events are bits of code that link an action by a user, to an action performed by the computer. The action can be a mouse action or key press on the keyboard, or even loading / unloading a webpage.
There a numerous events that can be used within you webpages, its just where you would use them varies from place to place. Below are the different categories of events you will use:
- Keyboard Events
- Mouse Events
- Selection Events
- Misc./Other Events
Now im going to go a bit more in depth of each category, describe them and also provide a list of some of the most commonly used events.
Mouse Events
Whenever a user performs actions with the mouse, these are the events that will detect the specific actions, and then you can act accordingly.
- onclick - When the left mouse button has been clicked once.
- ondblclick - Detects when the left mouse button has been clicked twice very quickly.
- onmousedown - Detects when the mouse button has been held down.
- onmouseup - Will detect when the mouse button has been released.
- onmouseover - When the mouse cursor moves over the top of an element.
- onmouseout - Will detect when the mouse cursor has moved off an element.
Heres a simple example using one of the events above that should give you an idea of how you can use these in your JavaScript programs.
|
<form name="MyForm"> <input type="text" name="text1" value=""> <input type="button" name="button1" value="Press Me" onclick="document.MyForm.text1.value='You Pressed the Mouse Button';" ondblclick="document.MyForm.text1.value='You Double-Clicked!';"> </form> |
What occurs in the form above is that when you press the button (Press Me) once, the text box to the left (text1) will indicate you pressed the mouse button. And when you double-click the button, it will indicate the double-click.
Selection Events
These events detect when focus has been given to a certain control on a form.
- onselect - Will detect when an element has been selected.
- onfocus - Signals when an element has been given focus.
- onblur - Signals when an element has lost focus.
Check out this code sample below. You can use it as a guide to give you an idea of how to work with these events.
|
<form name="TheForm"> <input type="text" name="txt" value="" onfocus="document.TheForm.txt.value='This has focus';" onblur="document.TheForm.txt.value='Lost Focus';"> <br> <input type="text" name="txt2" value="" onfocus="document.TheForm.txt2.value='This has focus';" onblur="document.TheForm.txt2.value='Lost Focus';"> <br> </form> |
Miscellaneous Events
Here are a few common events used with JavaScript, but they dont necessairly fit in the outlined categories above.
- onchange - This will detect when data (within a form element) has been changed.
- onload - Detects when your webpage has finnished loading.
- onunload - Signals when a webpage has been unloaded (when someone leaves the page).
- onabort - Will detect when the loading process of a webpage is canceled.
- alert - this is sort of like window.prompt but only used to notify a user when an event has occured, and only the Ok button is displayed. (Can be displayed as alert(); or window.alert();)
Take a look at this code sample and see a few of the Miscellaneous Events in action.
|
<body onload ="alert('The Document is loaded.');"> document.write("This was an example of using the onload event."); |
Simple as that. Works the same with onabort, onunload and such.
Window Objects
In addition to the Misc., Keyboard, mouse and selection events, there are some window objects you can use to perform specific tasks. Below is a list of a few commonly used window objects you can use within your programs to make them more efficient and user friendly.
- window.print - Will print the page you see on the screen.
- window.open - Can open a new window, you can set the properties as well.
- window.close - Will close the current window.
- window.status - This can display a message in the status bar of your window.
Check out the code below and you can get an idea of using these objects in your programs.
|
<body onload="window.status('Your page has loaded.');"> <form name="form1"> <textarea> Here is some text, bla bla bla.</textarea> <br> <input type="button" name="three" value="Open" onclick="NewWindow=window.open('file.html','remote','toolbar=yes,status=yes,width=300,height=300');"> <input type="button" name="four" value="Close New Window" onclick="NewWindow.close();"> <input type="button" name="one" value="Close this" onclick="window.close();"> <input type="button" name="two" value="Print" onclick="window.print();"> |
Take a look at the "open" button. You can open files or even urls. You can set the properties, they go like this: window.open('file or url', 'open it within the current window','set toolbar to yes or no, status bar yes or no, height and then width').
Colors
If you plan on involving JavaScript a bit more in your webpages, you can set the background and foreground colors using JavaScript. The foreground wil be the color of the text on your webpage. The built-in functions below will set these properties:
- fgColor: Set your foreground like this, document.fgColor="red";
- bgColor: And set the background like this, document.bgColor="green";
You can either set the colors using the name of the color, or you can use the hexadecimal format. Im sure you've seen them before, but heres an example anyway...
|
document.bgColor="#006699"; //this is a color I use often document.fgColor="#FFFFFF"; //this color is white document.write("Check it out, look at the background and the foreground!"); <form name="select_all"><textarea rows="5" cols="46" name="text_area"> <h4>Keyboard Events </h4> <p>The most common keyboard event used is the <b>onkeypress</b> event. This even can check to see if a key is presed on the keyboard. Here's a list of some keyboard events. </p> <ul> <li><b>onkeypress</b> - Detects a keypress from the keyboard.</li> <li><b>keyCode</b> - Records the ASCII value of a letter pressed on the keyboard.</li> <li><b>onkeydown</b> - This event is triggered when a key has been pressed down. </li> <li><b>onkeyup</b> - Is triggered when a key from the keyboard is released. </li> </ul> <br> These keyboard events can get quite interesting if you're familiar with the ASCII values of the key's on the keyboard. Check out this code sample: <br> <form name="select_all"><textarea rows="5" cols="46" name="text_area"> <form name="form1"> <input type="text" name="txt1" value="" onkeypress="if(window.event.KeyCode =='65') document.form1.txt1.value="You pressed the capital A key.';"> </form> |
In order for this to work, press the capital "A" and the textbox will indicate you doing so. If you were to press anything else, the program would not work.
Conclusion
I feel that by now I have covered a wide range of the basics of programming in javascript and writing your own programs. You could go into more detail of each topic covered, but the intent is to introduce you to it, and it will be up to you to follow through with the language. I hope that the extra code samples and the sample code programs did provide additional understanding of the concepts. Javascript is relatively easy to learn and can be quite useful for your webpages. I hope that you found this tutorial helpful on your way to learning something new.
More Web Programming: 
