Javascript: second lesson

In this lesson we are going to know more about objects, properties, methods, events and events-handlers. First of all you have to consider your page's visitors as users. Each user can do something, and we could call this something as an event. However an event may be due to something which isn't an user's action, for example an error occurred while an HTML page is loading. Objects are things which can be modified by means of Javascript. Objects have their properties. For example, a car is an object. Make and model are properties of that car. The color is a property of that car. The engine is another property of that car and so on. To identify an object's property, you have to name the object followed by a point and its property. In order to identify the color of a car for example, you have to write so: mycar.color. Hence you can define its property by assigning a value. So, in the previous example, you could write: mycar.color ="red". However when we talk about Javascript's objects, we aren't obviously talking about cars...We are talking about particular objects. There is an object hierarchy as shown here:

In the table above, an object's descendants are properties of the object. For example, an image named image1, is an object, but it is also a property of document, and is referred as document.image1. There are 2 main object in Javascript: Navigator and Window. Well, it isn't really so, because we should also consider server-side objects for example, but we are talking about client-side only. Well, let's see our second script:

Second script: the status property

In this second script, we are going to see an object and its property, an event and its event-handler. The object is Window, that's the browser's window. The property of the window object is Status, that's the status bar at the bottom of the browser's window. The event is MouseOver, and its event-handler is OnMouseOver. The MouseOver event means that the cursor moves over an object or area. Let's see:

Place the mouse here, but DON'T CLICK!

Now look at the bottom of your browser's window (the status bar)...

And this is the HTML page:

<HTML><HEAD><SCRIPT LANGUAGE="JavaScript1.2">
<!-- Hide script from old browser

function myfunctionvariable1) {

windows.status=variable1;

}

// End the hiding here. -->
</SCRIPT></HEAD>

<BODY> < A HREF="" OnMouseOver="myfunction('This is a fake link!);
return true"> Place the mouse here, but don't click!
</BODY>

</HTML>

As you can see, inside the Anchor tag you use an event-handler: OnMouseOver. In this case you are saying to the browser: 'When the user moves the cursor on this link, perform the function named myfunction', giving a string of characters to her, by passing it inside of an area (variable) named variable1. What's a function? A function is a procedure by means of which Javascript can perform something. For example, when you use your car, you perform always the same function! In fact you have to :

take the key of the door of your car
turn it inside of the door-lock
open the door of your car
sit-down
close the door
turn the key inside of the ignition-lock
press down the clutch
change gear
turn on the direction indicator
look at the driving mirror
notice if other cars are arriving
finally go!

Well, the example above is the 'take-the-car' function...

Ok, the curly brackets { } define the beginning and end of the function. The string which you were passing to the function is: 'This is a fake link!'. The 'myfunction' function, take the string contained inside of the area named variable1, and assign it to the status property of the window object.

Well, but what's a variable? A variable is a 'black box' which can contain something. For example, your wallet is a variable. In fact it can contains money, little pieces of paper, your driving license, and so on. In this case, the variable 'variable1' contains the string 'This is a fake link!'.

Notice that there is another statement: return true. If you omit that statement, the browser will show the URL contained inside of the anchor tag before showing 'This is a fake link!'. Try this HTML page without that statement :

Place the mouse here, but don't click!

<HTML><HEAD><SCRIPT LANGUAGE="JavaScript1.2">
<!-- Hide script from old browser
function myfunction(variable1) {

windows.status=variable1;

}

// End the hiding here. -->
</SCRIPT></HEAD>

<BODY> < A HREF="" OnMouseOver="myfunction('This is a fake link!)"> Place the mouse here, but don't click!
</BODY>

</HTML>

Finally, another thing: by using these scripts, you can't delete your phrase from the status bar. So people put a timer to delete that phrase after a while. However, by means of Javascript 1.2, you can use the OnMouseOut event-handler. Now you can delete the phrase checking the MouseOut event. Just try this:

Move and remove the cursor from here

And this is the HTML page:

<HTML><HEAD><SCRIPT LANGUAGE="JavaScript1.2">
<!-- Hide script from old browser
function myfunction(variable1) {

windows.status=variable1;

}

// End the hiding here. -->
</SCRIPT></HEAD>

<BODY> < A HREF="" OnMouseOver="myfunction('This is a fake link!);
return true" OnMouseOut="show('');return true"> Place the mouse here, but don't click!
</BODY>

</HTML>

Oh, I was forgetting: while passing the phrase, you haven't to use double quotes! You have to use single quotes...