Javascript: first lesson

Now let's see our first script. In order to use Javascript, you have to use the <SCRIPT> </SCRIPT> tag. In fact, all web browser which can interpret Javascript, can know the beginning of a script by means of the <SCRIPT> HTML tag. However there is another reason to use the >SCRIPT> tag: you have to tell to the browser which Javascript version is embedded inside of the HTML page. In fact:

Netscape Navigator versions previous than 2.0 can't interpret Javascript
Netscape Navigator 2.0 executes code within the <SCRIPT LANGUAGE="Javascript"> and </SCRIPT> tags (Javascript version 1.0).

It ignores code within the <SCRIPT LANGUAGE="Javascript1.1"></SCRIPT> tags and code within the <SCRIPT LANGUAGE="Javascript1.2"></SCRIPT> tags
Netscape Navigator 3.0 executes code within the <SCRIPT LANGUAGE="Javascript1.1"></SCRIPT> tags and it ignores code within the <SCRIPT LANGUAGE="Javascript1.2"></SCRIPT> tags
Netscape Navigator 4.0 executes all Javascript versions up to 1.2 (<SCRIPT LANGUAGE="Javascript1.2"></SCRIPT> tags)

Now you are wondering : 'How can I know which browser version will read my HTML page?' Look here:

<SCRIPT LANGUAGE="Javascript">

if (navigator.userAgent.indexOf ("4.0" != -1))

jsVersion = "1.2";

else

if (navigator.userAgent.indexOf ("3.0" != -1))

jsVersion = "1.1";

else

jsVersion = "1.0";

</SCRIPT>

What does it means?

If means: 'Please, browser, test this condition within parenthesis if it is true or if it is false...if it is true, then execute the red code!'

(navigator.userAgent.indexOf ("4.0" != -1))is the condition which has to be verified by the browser. In this case it means: 'You, browser, are the Navigator 4.0 version...'

jsVersion = "1.2" means: 'Ok, browser: you are Navigator 4.0, so you can surely execute Javascript 1.2! Go!'

else means: 'if the condition is false, then, you have to do this other thing...'

So, more or less, all the previous code means: 'If you are Navigator 4.0 then execute Javascript 1.2, else, if you are Navigator 3.0 then execute Javascript 1.1, else, execute Javascript 1.0.

However don't worry if you can't understand these things very well: I will explain you them better later...

Hiding Javascript to old browsers

Now another thing: there are browser which can't interpret Javascript. So, what's happen if you put some Javascript statements inside an HTML page and a browser which doesn't know Javascript reads them? Well, nothing: the browser will interpret them as a normal text, and it will show them. In other words, if you write something like this:

<SCRIPT LANGUAGE="Javascript"> these are Javascript statements, blah blah...</SCRIPT>

the browser will show: these are Javascript statements, blah, blah...

That's: garbage...

So, you have to hide these statements to all browsers that don't know Javascript.

Let's see...as browsers usually ignore unknown tags, they will ignore the <SCRIPT> and </SCRIPT> tags. But they won't ignore all things written within these tags!

So you have to hide them by placing the script within '' as it was a comment:

// means the beginning of a comment in Javascript.

Ok, just another thing before starting with our first script: you can put the script inside of a file which isn't an HTML page. This file should have the file name suffix '.js' and it must contain only Javascript statements: it can't contains any HTML tags. You can specify the file so:

Where myfile.js is the file which contains the script.

Ok, finally the script

Click here!

This script uses a method. A method is a function associated to an object. You can handle objects by changing their properties or by means of their associated methods. In this case the object was 'window', and its method was 'alert'. In other words, a method is a 'way' to handle objects. Objects have a certain collection of things that they can do. Each object can do different things, just as a door can open and close, while a light can turn on and off. Window - as well as Navigator - is the top level element within the object hierarchy, and you have not to specify it, because it is assumed by default.

This is the source of the HTML page:

<HTML><HEAD>
<!-- Hide script from old browser

function myfunction() {

alert("Hello, net!") ;

}

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

<BODY> < A HREF="javascript:myfunction()">Click here!
</BODY>

</HTML>

Code within HEAD tags is loaded before the rest of the document. You have to put that code there. In the above example, If you put it after '< A HREF= "javascript:myfunction()"> Click here!' tag, and if the user perform an action (e.g.,clicking) while the page is still loading, the browser won't be able to execute 'myfunction'. In this case, the browser will attempt to execute an undefined function, and an error it will occur. In fact, you have to define your function before use it! What's a function? Don't worry, I will explain you that later. This is a bad script to begin our lessons, because you can't understand really so much by means of it. In fact this is a third way to put Javascript statements inside of an HTML page: you can put a Javascript expression as the value of an HTML attribute. In fact, in the previous example, the value of HREF attribute is "javascript:myfunction()". However I used it just to show you how much easy Javascript is...

Finally, another tag: <NOSCRIPT></NOSCRIPT>. You could use this tag to specify an alternate content for browsers that non support Javascript. Just put the alternate HTML page within these tags.