What's an event? An event is when something happens. Such as a mouse over, mouse click, page loading, etc.
We could make a simple alert box pop up when the page loads using the onLoad event handler in the body tag...
<html>
<head>
<title></title>
<script type="text/javascript">
function HelloWorld()
{
alert("Hello World!");
}
</script>
</head>
<body onLoad="HelloWorld()">
Hello
</body>
</html>
Every time you load the page, the onLoad event handler is triggered.
What else is there? Lots of people use onMouseOver event handlers in links. Here is the same example with a couple minor changes...
<html>
<head>
<title></title>
<script type="text/javascript">
function HelloWorld()
{
alert("Hello World!");
}
</script>
</head>
<body>
<a href="" onMouseOver="HelloWorld()">Hello</a>
</body>
</html>
You'll notice that the link doesn't point to anything. That's not something we'd want to leave in a finished page, but for now, since we're just learning, we'll let it slide.
We can also do an onMouseOut. The alert doesn't pop up until the mouse moves off of the link.
<html>
<head>
<title></title>
<script type="text/javascript">
function HelloWorld()
{
alert("Hello World!");
}
</script>
</head>
<body>
<a href="" onMouseOut="HelloWorld()">Hello</a>
</body>
</html>
Yet another event handler is onClick...
<html>
<head>
<title></title>
<script type="text/javascript">
function HelloWorld()
{
alert("Hello World!");
}
</script>
</head>
<body>
<a href="" onClick="HelloWorld()">Hello</a>
</body>
</html>
Exercise: Now it's your turn... make a page that uses the onLoad event handler to prompt you for your name, then says Hello Yourname!.
Can you have more than one function? Sure! You can have as many as you want. Just so you stay sane you might want to keep it as neat and organized as possible...
function HelloWorld()
{
alert("Hello World");
}
function HelloStinky()
{
alert("Hello Stinky!");
}
Exercise: Now, knowing this, I want you to make a web page with two functions and those three red buttons. The first function asks for the user's name onLoad. Then, when the mouse passes over one of the three red buttons, a second function triggered by the mouseOver causes an alert to pop up with something like "Hello Joe. You moused over number 1".
You'll notice that once a value is assigned to a variable, it will stay in memory until it's either changed, or you exit the web page.
Now I suppose is a good time to explain the semicolon (;) at the end of some of the lines. The semi-colon should be used at the end of each instruction. It helps the browser know when one instruction ends and another one begins. You could also place multiple instructions on one line, separating each with a semi-colon...
instruction1; instruction2; instruction3;
is the same as
instruction1; instruction2; instruction3;
| Javascript Tutor |
| Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
| Javascript Authoring Guide JavaScript FAQ |
| HTML 4.0 Reference Google Groups (Advanced Search) |
|
|
|
|
