JS -- Lesson 6


Lesson 6


I've already shown you the onClick event handler, now it is time to show you the other event handlers and how they are used.

This event handler only acts when your mouse moves over something, like a link or an image.

onMouseOver


Now let me show you an example:

<A HREf="http://typojester.page.tl" onMouseOver="window.status='Typo Jesters Homepage'; return true"><u>My Homepage</u></A>

The result is below:
Move your mouse on and off the link.

My Homepage

First we create a link tag with A HREF, then we make it equal my homepage URL, so when you click it it will go to my homepage. We add the onMouseOver and use the object hierarchy window.status which is the bottom left bar, we make that equal Typo Jesters Homepage which will now appear in the status bar. Then we make what we want the link to say and underline it so we can see it better. Now if you were to move your mouse over the link it would show Typo Jesters Homepage in the status bar. If you notice the return true, try the link below and compare the two, the top one has return true, bottom one doesnt.

My Homepage




This event handler only acts when your mouse moves over something, like a link or an image.

onMouseOut


Now let me show you an example:

<A HREf="http://typojester.page.tl" onMouseOut="window.status='You moved off the link!'; return true"><u>My Homepage</u></A>

The result is below:

My Homepage

Move on and off the link above, and look at the status window at the bottom left.




This event handler acts whenever the page itself loads, so whenever you enter the page.
onLoad


Now let me show you an example:

<BODY onLoad="alert('Welcome to the lesson')">

The result was the alert you got when you entered the page, if you didnt see it add this site to your trusted list.

This one is easy it just says when the page loads make an alert box saying Welcome to the Lesson. We put it in the body because we are talking about the entire page.




This event handler acts whenever the page itself unloads, so whenever you exit the page.
onUnload


Now let me show you an example:

<BODY onUnload="alert('See ya later!')">

To see this event handler just exit this page.

It works the same way as the onLoad event, but it does it when you exit the page.




This event handler acts when you click inside a textbox.
onFocus

Now let me show you an example:

<FORM>
<INPUT TYPE="text" VALUE="Click on this textbox!" onFocus="alert('You clicked on the textbox!');">
</FORM>

Below is the result:






This event handler acts when youve already clicked on the textbox and then click out of it.
onBlur

Now let me show you an example:

<FORM>
<INPUT TYPE="text" VALUE="Click on and off this textbox!" onBlur="alert('You clicked off the textbox!');">
</FORM>

Below is the result:






This event handler acts when youre in a textbox and you change something that it says inside it, then click out of the textbox.
onChange


Now let me show you an example:

<FORM>
<INPUT TYPE="text" VALUE="Change the text in this textbox then click off the textbox!" onChange="alert('You have changed something!');">
</FORM>

Below is the result:






This event handler acts when you highlight text inside the textbox.
onSelect


Now let me show you an example:

<FORM>
<INPUT TYPE="text" VALUE="Highlight the text in this textbox" onSelect="alert('You highlighted something!');">
</FORM>

Below is the result:





This event handler is used with the tag FORM and only works when you use a submit button, which will submit your FORM's information.
onSubmit

Now let me show you an example:

<FORM METHOD="POST" ACTION="http://typojester.page.tl" onSubmit="alert('Form was sent');">
<INPUT TYPE="text" VALUE="This will get submitted to typojesters homepage">
<INPUT TYPE="submit" VALUE="Submit button">
</FORM>

The result is below:



I made it so when you click it, it wont do anything but if it were like the above code, if you clicked the submit button, all the information in anything within the FORM (which would be currently the textbox) would be submitted or sent to the place specified in the tag FORM with the ACTION and METHOD attributes, which just say send it to this place. But the eventhandler i added in the form tag say that when you submit any information it will alert you and say "Form was sent". The onSubmit button is not required for sending information, just for adding something on when it happens.




This next event handler is the onReset, it resets anything within the current form.
onReset

Now let me show you an example:

<FORM onReset="alert('Form reset');">
<INPUT TYPE="text" VALUE="This will get reset when button clicked">
<INPUT TYPE="reset" VALUE="Reset button">
</FORM>

The result is below:



This button when pushed will reset anything inside the FORM back to its original content, so if you write in the box it will get reset, then reset button needs no attributes except maybe the Value to do this because the reset button has a inborn action, to reset whatever form its in. I also added the onReset inside the FORM so that once its reset, it will alert you, go ahead and try it out.


Phew, a lot of information, if your tired reading just imagine how tired i am of writing. I hope you learned from this Lesson, currently the next lesson is under construction, but stay tuned for more, or check out the other fun stuff on this site.

Join Today
 
Join our Website's Jester Forum today!
Its FREE and easy......
Click Here
Advertisement
 
News
 
7-12-07
_____________________
Status: SITE OPENED

WELCOME!

Enjoy the STAY

If you enjoyed this page,
add 2 favorites or tell a friend

Daily Event
 
Fortune of the Day

Quick Search
 
Google:
Yahoo:
Excite:
Ads & News
 
 
39511 visitors
=> Do you also want a homepage for free? Then click here! <=