Javascript For Beginners

Basic Concepts

Events

1. Events are things that can be used to trigger Javascript into action.

2. Most events are initiated by some user action (onMouseover, onClick, onLoad, onMouseout)

3. Example of onMouseover/onMouseout:

Run your cursor over the image below:

In the link tag we simply say:

onMouseover=document.mySwitch.src='on.gif'
onMouseout=document.mySwitch.src='off.gif'

Also we gave our graphic a name:

name="mySwitch"

Now YOU try. Type your image tag first:

Now give your image a name to help the Javascript find it easier:

Now for the link, which will enable the "handlers". Since we don't want it to actually go anywhere, our href will equal "#". You can substitute a URL here if you want. Then add the part for the onMouseover and onMouseout handlers:

Be careful about the quotes!!! They are nested.
There is a single quote before the double quote after .gif.
You can use either single or double quotes, but you must be consistent!

Some commonly used events are listed below:

onLoad -- The page has completed its loading of all elements

onUnload -- The user leaves the page

onChange -- When the user leaves a text field and it has been changed

onMouseOver -- The user moves the cursor over a specified element on the page

onMouseOut -- The user moves the cursor off a specified element on the page

onMouseDown -- The user depresses a mouse button.

onMouseMove -- The user moves the cursor.

onClick -- The user clicks on a link or image

onDblClick -- The user double-clicks a form element or a link.

onKeyDown -- The user depresses a key.

onKeyPress -- The user presses or holds down a key.

onKeyUp -- The user releases a key.

onFocus -- The user brings an element such as a form field into focus

onBlur -- When a form element, frame, or window loses focus

onSubmit -- When the user submits a form

onResize -- When the user resizes the browser window

onAbort -- When the user aborts the loading of an image (for example by clicking a link or clicking the Stop button).

onDragDrop -- The user drops an object onto the browser window, such as dropping a file on the browser window.

onError -- The loading of a document or image causes an error.

On to objects