Now that you know a little about Objects, Methods and Instances, let's look into Events. Javascript, besides being Object Oriented, is an event driven language. This means that it works in response to events. An event is simply something that happens, like a mouse-click or the opening of a window, or passing your cursor over an image that has the onMouseover Event Handler coded around it. An event is an action that sets an event handler into action. I'll show you what I mean if you click the button.

Here's the code that caused the little window to appear:

<form>
<input type="button" value="PushMe"
onClick="window.open('jsex1.html','win1','left=50, top=50,width=380,height=210,status,menubar')">
</form>

First of all, I want to point out that the third line that begins with onClick is one continuous line right up the menubar')"> term at the end. This may display as a split line in your browser, depending on your resolution. When you code this, keep it on one line.

As you can see , we have mixed some HTML and "javascript" together again. And if you caught the fact that there are no <script language=""javascript""> and </script> tags here, that's because we have come to an exception to the rule that I stated in the first lesson. This example is not a complete "javascript" function, so the scripting tags are not needed. They are not needed for any of the event handlers, of which this example is only the first of a bunch.

Okay, let's dissect the script.

This should be familiar to you from HTML. The text you want to appear on your button goes in the quotes after 'value'.

'onClick' is the name of this event handler- Notice the capitalized 'C'. The 'equals' term does not mean 'is equal to' in this case, since we are not using variables, and this isn't a mathematical expression. It means that what follows the onClick command is what should happen when the user clicks. This difference is important to keep in mind. And onClick is not an object, as was the case for the first word in the code in chapter 1.

You might be able to tell an event handler from an object by using this little mental trick: objects are like nouns, they name an object... events are like verbs, they describe an action, event or a state of 'to be' as in the case of the event handler onFocus, which we'll talk about later. The object of this line is 'window'. Note again the all-important period between the object 'window' and the method 'open'.

If you look at this line of code carefully, it's not hard to see that it's saying to the browser, "On a click, open a window". The rest of the line describes where on the calling page the new window should be, it's size and what attributes it should have. In this case, the window is given the attributes of x and y positions, height and width, a status bar and a menu bar. Notice the format of the code- single quotes inside the double quotes, the commas separating the url and the attributes of width, height, status and menubar, and the parenthesis around these.

Notice too that there are no spaces around the commas; this is the structure of this type of code, and you can't deviate from it. The word win1 is the name (not url) of the window and is required not because it makes any difference here, but because it may be used in code that uses the TARGET attribute (but not often). For now, just remember that the window name goes in this position.

That's our first event handler, and you should play around with it a little to get used to it. Here are all of the attributes of the window object that you can add to your script. Just be sure to use the same format as the above.

Here is an example of code for the same window with all the attributes added, and the size figures adjusted to compensate:

<form>
<input type="button" Value="Click Me"
onClick="window.open('jsex1.html','test','left=200, top=100,width=380,height=360,toolbar,location, directories,status,menubar,scrollbars,resizable, copyhistory')">
</form>

Hit the button, to see the effect --->

For the onClick event to work properly, you'll naturally have to make a HTML document for it to open. Save this document as whatever name you give to the url in the above script. And when your new window has opened and you want to close it, you can use the onClick event handler with the window.close() method.

<form>
<input type=button" value="Close Window"
onClick="window.close()">
</form>

One of the biggest problems with making scripts is the lack of uniform support given by the different browsers, notably Netscape and Internet Explorer. Why it is that neither company has the common sense to realize that few programmers want to write anything that will work in only one or the other of these two major browsers is beyond my ken. Both have their strong points, but to take advantage of one's best effects simply insures that users of the other browser wont see that particular effect... a good argument that competition is not always desirable. Most of what is set forth in this tutorial will be applicable for both NS 3+ and IE 4+ to the best of my ability; the events listed below are applicable to both.

Okay-- we've gone into quite a bit of detail on the onClick event, so let's go on to another event handler: onFocus.

onFocus

In case you were looking over the list above and expecting us to get into the mouseover routines, don't worry; that will come later. I will go into mouseovers in a little more detail also, but it's best if we become a little more at ease with event handlers first. Sooo, On to onFocus.

Look at this code, and in case your window size makes the line begining with onFocus wrap down to 2 lines, everything from onFocus to the Focus')";> must be on One line when you write the code. Okay?

<form>
<input type="text" size="20"
onFocus="prompt('When you clicked in the box,','You gave it Focus')";>
</form>

Now click in the box below.

Okay, so I'm a little tired of popup windows too. Anyway, if you read the prompt text, you know that by clicking in the form window, you gave it focus. The onFocus event handler was waiting for you to do just that ever since you loaded this page. The onFocus command can have many uses and is well worth remembering. Again, the '=' sign means that when an event triggers this handler, what follows should be what is coded in the double quotes.

In this script we made use of the prompt() command, which just pops up an annoying window. The text between the brackets, if you haven't already figured it out, is what is written into your prompt window. The first text goes on the face of the prompt, the second text will appear in the prompt input box. If you dont want any text in the box, just don't put any in between the single quotes-- but be sure you leave the quotes in anyway. And while we're on quotes, notice how they are 'nested': you must always use single quotes inside of double quotes.

If you want to use the prompt command all by its lonesome, you would code it like so:

<script>
<!--
prompt("When you clicked in the box,","You gave it Focus")
//-->
</script>

No, I didn't forget the ...language="javascript" part; "javascript" is the default scripting language for most browsers, so that last bit doesn't have to go into the code. But for other scripts than this simple one, it's a good idea to put it into your tag. Keep in mind that this script as written above will be activated as soon as the user opens the page. If you don't want that to happen, you have to make the prompt part of a function or event handler.

onBlur

When something loses focus in "javascript" the event is called onBlur. Look at the next bit of code.

<form>
<input type="TEXT" size="40" value="Name?"
onBlur="alert('You initiated the onBlur event handler');">
</form>

Now type something in the box- then click somewhere out of the box on this page to take the focus away from the box.

As soon as you lost the focus on the box by clicking somewhere else (and thereby giving the document the focus, the alert window came up. Alerts are pretty much like prompts, except that you dont have an input box with an alert window. And there is only one set of quotes to put your message in. You can use an alert by itself like this:

<script>
<!--
alert("Whatever text tickles your fancy")
//-->
</script>

Just keep in mind that this works just like the prompt, it will open an alert window as soon as the page opens in this form.

Now you have learned a couple more event handlers, with the prompt and alert commands thrown in for good measure. Now let's try another event handler.

onChange

There's not a lot of difference between the onChange and onBlur commands, but they both have their uses.

<form>
<input type="text" size="20" value="Change this text..." onChange="window.status='You changed the text'">
</form>

Once again, notice the single quotes inside the double quotes. The event that activates this handler is the cutting or changing of the text. So go ahead and change the text below, click out of the box and then take a gander at the browser status bar.

Window.status needs a little explaining:

window is an object and status is the window's property... in other words, it belongs to window. The status part denotes where the text should go (referring to the status bar). This pattern is part of "javascript" hierarchy, which we'll get into later.