What is JavaScript?

This section starts with a bit of a diatribe (I'm afraid) and then plunges into how to put JavaScript code into your webpage. We assume that you have a good basic knowledge of HTML. We do NOT assume that you understand FORMS or FRAMES, as we teach you these in the tutorial. If you manage to read through to the end of this single page, you should be well on your way to understanding JavaScript, but you'll have to read all seven pages of the tutorial to have a decent grasp of the language. This page also does not assume you've ever programmed a computer, but if you haven't we do hope that you are bright, patient and somewhat lateral-thinking!

Java is a language created by Sun Microsystems and subsequently bastardised by Micro$oft (You may have heard some of the legal wrangling going on). JavaScript is a very simple language (often called a scripting language) that in some ways resembles Java - in fact, if you're good at JavaScript, you are well on your way to becoming reasonable at Java. Unsurprisingly, JavaScript too has been adulterated by Micro$oft - they call their version JScript. (More of this later).

What do we mean by a scripting language?

Think of a script for a television soap opera. The actor reads through the script, and says or does what the script demands. (It's also all rather artificial and silly). This is how JavaScript works - the computer takes each statement in the script, interprets it (Says "What does this tell me to do?") and then does what the statement requires. Some would argue that the name 'JavaScript' doesn't describe too well what the language does, as the idea behind a script is that there is minimal user input. We won't argue semantics!

We'll simply contrast interpreted languages like JavaScript with compiled languages. What happens with a compiled language is that a computer takes a program and translates it into the computer's native language, so that the computer doesn't have to go through each line of the script and ask itself "What should I do next?". It just does it! Going back to our soap opera analogy, it's almost as if the director could get direct access to the brains of the actors, and make them just do what he wanted them to do. A frightening analogy of how a compiled language works!

This contrast is a good one, because interpreted languages often look just a bit clunky when compared with compiled languages. They are slower, and somewhat 'artificial'. They are often less powerful too, although this is commonly merely a matter of bad design. Compiled languages zoom along, while interpreted languages crawl. (Of course, when compiled code crashes, it often does so far more spectacularly than, say a script that doesn't work properly. Think of someone having direct access to your nervous system, controlling your every action, and then dropping the control into the bathtub)!

Why then is JavaScript not a compiled language? Personally, I think this is more a matter of history than reason - JavaScript started simply, as a convenient way of knocking together a quick script, rather than going through all the tedium and pain of writing something in say, Java (which is a bugger to program in). You can also do things in JavaScript that you can't in Java, because of the intimate relationship between JavaScript and HTML. As HTML became more complex, so did JavaScript. Now we have an almost fully-fledged language on our hands, with an intimidating complexity, but not (yet) with compilation as one of its features. Many JavaScript tutorials will tell you that it's easy to program in. Yes, if you're prepared just to cut and paste other people's code, or add frills to your web-page. A full grasp of JavaScript is much more difficult to achieve, and something that has been made difficult by the incompatibilities between Netscape and Microsoft!

Why am I getting stuck into Microsoft?

The initial version of JavaScript (version 1.0) ran well on Netscape Navigator. Microsoft (MS) got into the act somewhat later, and decided that they would rapidly cobble together something similar which they introduced into Internet Explorer 3 (IE3). They called this monstrosity 'JScript'. JScript was a dog. Subsequently, MS improved things a lot, but there were still numerous incompatibilities between the Microsoft flavour and Netscape. Even more recently, things have become fairly standard, but the damage is done. If someone visits your java-enhanced website with an old MS browser, you can almost guarantee that things won't work properly! Out of respect for such users, you have to write defensive code that will still allow them to interact (simply) with your website. In addition, you should test your site with both MS and Netscape browsers, because many incompatibilities still exist (Unless you're one of those schmoes who plonks a little notice on their site with words to the effect that you should "use MS Internet Explorer 4 or piss off").

Things are made even more complex because although JavaScript now has a defined syntax, it works together with a browser, which has a completely separate "Document Object Module" (DOM) structure. Only recently has the Worldwide Web Consortium (W3C) defined standard "Document Module Levels" - the proprietary DOMs of IE 4 and Netscape 4 are often incompatible.

The Golden Rule

The golden rule of JavaScript programming is:

Write JavaScript that is friendly to all browsers
especially those which don't understand JavaScript!

Plunging in - without fear!

Provided you obey the golden rule, you don't really need to be scared. The way that you hide JavaScript code from ignorant browsers who don't understand JavaScript (from now on we will call them naïve browsers) is to simply put the JavaScript code inside a comment. There are a few tricks (and you will learn more as your knowledge of JavaScript progresses).

Try inserting the following code into a web-page that you've created, and then load the page in either Netscape or Internet Explorer:

If your browser understands JavaScript, then a box will be displayed with the message "Welcome to my JavaScript tutorial!". If your browser is naïve, then it will ignore the <script> tag (because it doesn't understand it) and it will also ignore the JavaScript within the comment (because it's simply a comment). But there is more.

By the way, Yes, the above code is what you saw when you loaded this tutorial page. If you don't believe me, then click on View   |   Source in your browser!

Probing deeper

Things unfortunately don't end with the above simple trick! (Don't worry about syntax at present, although it should be obvious what the statement

alert ("Welcome to my JavaScript tutorial!");

does!). We are more concerned with the golden rule. We have already learnt that MS and Netscape do things differently, and that MS Internet Explorer Version 3 is such a dog that it should probably be regarded as having no functional JavaScript. Before we probe much deeper, you have to make a decision. You need to decide whether you want to use JavaScript for one of two things:

  1. Frills; or
  2. Mission-critical code.
If you only want to dress-up your page with JavaScript, then you have much more leeway, and probably shouldn't be reading this tutorial. If you're serious about JavaScript, and want to do really sexy things with it, then we would suggest the following:

Identify the browser you're using. Treat IE 3 or below as if it doesn't have JavaScript.

In addition, it is often useful to use your knowledge of the browser to tailor your code to IE or Netscape. We'll show you how. First, we need to identify the browser.

Identifying the Browser

Next we will not only find out how to identify the browser being used to read your web-page, but learn an enormous amount about JavaScript as we do so. There are seven sections, after which you'll have had a good basic introduction to JavaScript:
  1. Part of a more complex script
  2. Basics - back to our first script!
  3. A full, complex script - vars and comments
  4. Deeper still - the if statement
  5. true and false
  6. OOPS - object oriented obsessions
  7. Putting it together

1. Part of a more complex script

The following is based on Netscape's Ultimate Javascript Client Sniffer. Don't click on the reference now, as it will only confuse you totally!

My second script (part of it!)
 var whoami=navigator.userAgent.toLowerCase();  //use lower case name
 var my_version = parseInt(navigator.appVersion); //get version
 var is_ie = (whoami.indexOf("msie") != -1); //does name contain 'msie'?
 var is_ie3 = (is_ie && (my_version < 4)); //is it version 3?

How do we use the above gobbledegook in a real script? Well, unfortunately we have to understand what the above does to use it really effectively. And that in turn means we have to know something about how JavaScript works.

2. Basics - back to our first script!

First, let's go back to our very first script, the one that said:

   <script language='JavaScript'>
      <!-- 
             alert ("Welcome to my JavaScript tutorial!");
      //-->
   </script>

It's clear that using the word alert in our script causes a box and message to be drawn on the screen. Note how we invoked this magical alert function - we write its name - alert - followed by something in (parenthesis). The something-in-parenthesis is in turn followed by a semicolon;

This tells you a lot about the syntax of JavaScript. A lot of JavaScript is simply invoking functions that do things. We pass (information in parenthesis) to the function, and the function does something with the information. Our function alert draws a cutesy little box with an "OK" button - we will end up using alert rather a lot (although we'll try hard to avoid it)!

Let's look a little more closely at the (thing in parenthesis). See how it starts and ends with "quotation marks". These are important because they tell us that between them there is a string. A string is simply a sequence of characters, for example "This is -- hmm - a string", or "Thisisanextralongstringofletters", or even "!&(*$#*+!@,\
DAMN!".

Finally let's remind you of how the JavaScript statement ended - with a semicolon;

No not a full stop. A semicolon;

Yes, that's right! A semicolon;

The reason we labour the point is that one of the commonest mistakes you will make in writing JavaScript is that you will leave out semicolons!

3. A full, complex script - vars and comments

You now know enough to start understanding our second script. Here it is again, combined with a modification of the first script!

My second script (complete!)
   <script language='JavaScript'>
          <!-- 
 var whoami=navigator.userAgent.toLowerCase();  //use lower case name
 var my_version = parseInt(navigator.appVersion); //get version
 var is_ie = (whoami.indexOf("msie") != -1); //does name contain 'msie'?
 var is_ie3 = (is_ie && (my_version < 4)); //is it version 3?
        if ( is_ie3 )
            { alert ("Aargh! You're using Internet Explorer 3 !");
            } else 
            { alert ("Good! Your Browser appears JavaScript-competent!"); };
          //-->
    </script>

Although the first time you looked at the above, it probably scared you witless, look again! Some order seems to emerge from the chaos. You (at least partially) understand the first two lines, because they are identical to the first two lines of our alert script. Then we come across several lines that begin with var. What do they do?

It appears that they set aside something with a name that has a value. Look at the first of these lines - it says

        var whoami=navigator.userAgent.toLowerCase(); //use lower case name

Something called whoami seems to be made equal to the complex rubbish on the right hand side, after the = equals sign. And then, to cap it all, the person who wrote this confusing line seems to have ended it off with // two slashes followed by some sort of comment.

The next line is similar. And the next. It seems clear that in JavaScript we can set aside new values (variables?) by starting a line with var and then following it with the name of the variable. In addition, on the same line we can give a variable a particular value by setting it = (equal) to someting. So it looks as if navigator.userAgent.toLowerCase is simply some sort of glorified function (After all, it's followed by parenthesis). And so is parseInt, and so indeed is whoami.indexOf ! This is not quite the whole answer - but it's a good approximation.

In addition, we have learnt at least one way of putting a comment into JavaScript. If you put // on a line, then everything afterwards is ignored (for that line alone) - it's treated as a comment. /* Just as an aside, there's another, more general, way of creating a comment in JavaScript. You start the comment with a slash followed immediately by a star, and end the comment with the reverse - a star followed by a slash */ The great thing about this sort of comment is that it can extend over several lines, or even occupy /*just a part*/ of a line!

Don't worry about the exact meaning of the lines we've just looked at - all will eventually become clear!

4. Deeper still - the if statement

We look deeper still. Ignoring (for the time being) the meaning of the lines we've examined, we look at the subsequent four lines:

        if ( is_ie3 ) 
            { alert ("Aargh! You're using Internet Explorer 3 !"); 
            } else  
            { alert ("Good! Your Browser appears JavaScript-competent!"); }; 

First, we examine their overall structure. Clearly a choice is being made. If we merely read the lines as English we can deduce that

"if the browser is Internet Explorer 3, then we
alert ("Aargh! You're using Internet Explorer 3 !")
while in all other cases we say "Good! Your Browser appears JavaScript-competent!"

So we now know how to make a decision in JavaScript - in other words, we can test for a condition, and respond according to the results of a test. Clearly, it is an if statement that does this testing. Just as clear is the format of the if statement:

if ( /*condition being tested*/ )
        { /* do this if condition is met */ }
    else
        { /* something else to do if condition NOT met */ };

See how we use curly brackets {braces} to show the start and end of the various sections. Alert readers will have noticed that in my "second script" the braces were positioned slightly differently from those in the above 'skeletonised' if statement. It doesn't really matter, as JavaScript can and often does extend over several lines. I just happen to like the way I wrote the if statement the first time around.

But there is something important in the above and this something is not immediately apparent. Notice how there is NO semicolon after the first set of braces that make up the if..else statement. This is important! If you put in a semicolon, things won't work!

you should now fully understand the above if statement, with one exception. You don't understand the part of the statment that reads

       if ( is_ie3 )

Clearly, something is being tested, and that something is the is_ie3 that was created in the line:

        var is_ie3 = (is_ie && (my_version < 4)); //is it version 3?

is_ie3 must be a variable, and it must have a value. The if statement tests whether the value of is_ie3 is true or false, and then decides what to do next based on this value. If true, then alert with a rude message about Internet Explorer 3, if false, then reassure the startled user.

5. true and false

So. If we really want to understand the value in is_ie3, we have to fully understand what's going on in the var line where it is defined, the line that reads:

        var is_ie3 = (is_ie && (my_version < 4)); //is it version 3?

Now we know what var means, and we know that is_ie3 is being made equal to something by the = equals sign. So all we need to understand is the following:

        (is_ie && (my_version < 4))

What on earth can this mean? Well, let's see. The previous line has defined is_ie and we can easily deduce from its name that is_ie probably tells us whether we're dealing with Internet Explorer (true) or not (false). Similarly, the part of the statement that reads:

        (my_version < 4)

almost certainly is true if the version of Internet Explorer is less than 4, and false if this is not the case.

It doesn't then take a great leap of imagination to deduce that the peculiar && links the two. In other words:

        (is_ie && (my_version < 4))

translates as:     it's internet explorer AND the version is under version 4

We can therefore confidently deduce that the line we've just examined sets is_ie3 to true if we're dealing with internet explorer AND the version number is under version four. Otherwise, is_ie3 becomes false. This value of is_ie3 is then used in the next line (the if statement).

The above is a very simple example of Boolean logic. Boolean logic is about statements that are either true or false. Clearly, we can combine statements together. Two statements can both be true, both can be false, or one can be true and the other false. We now know how to test in JavaScript whether both statements are true - we just use && to link the two together, and then put the whole thing in parenthesis. For example, if we want to test whether A is true AND B is true, we say

        ( A && B )

How do we test whether EITHER statement is true, in other words, whether A is true OR B is true (or, indeed, both are true)? Easy:

        ( A || B )

will do the trick. (Different keyboards have the |pipe| character in different positions. Often it's near the \ backslash character on your keyboard. Look around)! Finally, we need to know if something is NOT true. The syntax is just to use an exclamation mark:

        ( ! A )

will be true if A is false and false if A is true!

6. OOPS - object oriented obsessions

Let's look once more at our second script:

My second script
    <script language='JavaScript'> 
          <!--  
 var whoami=navigator.userAgent.toLowerCase();  //use lower case name 
 var my_version = parseInt(navigator.appVersion); //get version 
 var is_ie = (whoami.indexOf("msie") != -1); //does name contain 'msie'? 
 var is_ie3 = (is_ie && (my_version < 4)); //is it version 3? 
        if ( is_ie3 ) 
            { alert ("Aargh! You're using Internet Explorer 3 !"); 
            } else  
            { alert ("Good! Your Browser appears JavaScript-competent!"); }; 
          //--> 
    </script> 

We are just beginning to understand what's going on. We set up four variables - whoami, my_version, is_ie and is_ie3. The first presumably contains a "string" that identifies the browser being used, the second tells us the version of the browser, the third tells us if the browser is internet explorer, and the fourth whether this is version 3 (version number under four && internet explorer).

We then use an if statement to either harrass the unfortunate user, or compliment her.

Armed with this knowledge, let's look at the mysterious line:

      var whoami=navigator.userAgent.toLowerCase(); //use lower case name

in a bit more detail. Notice how we have a strange sequence of words linked together by dots, thus: navigator.userAgent.toLowerCase

This is typical of Object-Orientated Programming (OOP). The idea behind OOP is that we have things called "objects". These objects have two distinct attributes associated with them. They have:

  1. properties
  2. methods

The commonly-used analogy is to a motor car - it has properties: the paint is red, it has five wheels (including the spare), and so on; it also has methods - start the car, take off the handbrake and so on. (Can you tell the difference between a method and a function? I'm not sure I can)!

Trivially, one would suppose that you could say things like:

car.paint="red";
car.start();
and so on.

Let's put this in context.

  • navigator.userAgent refers to an object called navigator that has a property called userAgent.
  • navigator.userAgent.toLowerCase() takes that property, applies the method toLowerCase to the property, and gives it to us.

Clearly all this does is give us a string that contains the name of the internet browser we are dealing with, after this string has been converted to lower case.

If you were brought up on more traditional computer programming languages, you'll see that OOP doesn't do anything that cannot be done in traditional computer languages. It's just a different way of looking at information and how we handle it. (Later on we will explore the merits and demerits of OOP). With JavaScript, we're stuck with OOP, so it's a good idea to get to know it.

Let's now look at all of our OOP-style statements:

  1. whoami=navigator.userAgent.toLowerCase();
  2. my_version = parseInt(navigator.appVersion);
  3. is_ie = (whoami.indexOf("msie") != -1);

We can deduce a lot from these statements. The first tells us that all browsers that understand JavaScript have an object called navigator and that this has a property called userAgent. The second tells us that navigator has another property, appVersion.

The third statement is even more interesting, because it tells us that something we have created will automatically (automagically?) acquire certain methods that go with it. For we created the variable whoami but look what we can do with it - we can apply the mysterious method indexOf to it, and ultimately get an intelligible answer - the value true or false that is put into is_ie, as we discussed above!

This last observation hints at an important characteristic of OOP - objects can "inherit" properties and methods. This is both very useful (you don't have to potter around associating some commonly-used methods with an object), and also a cause of immense frustration. Why frustration? Because in any fairly complex object-oriented system (for example a web browser) there is a massive proliferation of properties and methods, that can confuse and mystify you if you want to sit down and tell the browser to do something! Later on we will try and detail every property and method of Netscape and MSIE, and you will see what I mean.

For now, let's just look at examples of the three methods we've been introduced to:

  1. toLowerCase()
  2. indexOf("string")
  3. parseInt("123abc")

With each of the above examples, we've included examples of 'arguments' that the methods expect (within parenthesis). For example, indexOf expects to be provided with a string, and parseInt should be supplied with a string that starts with a number. toLowerCase doesn't expect anything, so we've given it nothing but empty parenthesis.

It is obvious what toLowerCase does - it converts something to lower case. For example, "FrED" might become "fred". indexOf is a bit more puzzling, but let's look at how it's used (with the comment):

var is_ie = (whoami.indexOf("msie") != -1); //does name contain 'msie'?

Using our previously-acquired knowledge, we can work out the meaning of this line:

  • We define a variable called is_ie

  • We set the variable is_ie equal to something, and presumably this something is a Boolean value - either true or false

  • The suspicion that is_ie is Boolean is strengthened because the thing it is made equal to something contained in parenthesis : (whoami.indexOf("msie") != -1)

  • From our scanty knowledge of Boolean logic, we know that (! A) translates as NOT A. It seems reasonable to work out that != translates as NOT EQUALS. In other words, (whoami.indexOf("msie") != -1) means

    compare the value of whoami.indexOf("msie") with minus 1. If the value is equal to minus one, then give false, otherwise give true.

  • We therefore know that the method indexOf returns a number.

we can now deduce what indexOf does - it gives us a number, and this number presumably tells us where within a string, a particular sequence of characters is located. If the number is "-1", then presumably the desired sequence was not found.

Let's try an example. Say we have the sentence "This is not a pipe". We'll try the following thought experiment:

var fred="This is not a pipe"; // create fred and allocate a value
var findis=fred.indexOf("is"); // find where the string "is" is located

Now quick - what should the value of findis be? (No, don't cheat and page down before you've worked out the answer)!

















Full marks if you said "2". My suspicion is that you said either six, five, or perhaps three. Let's look at our experiment again:

var fred="This is not a pipe"; // create fred and allocate a value
var findis=fred.indexOf("is"); // find where the string "is" is located

Counting from the left, we see that the first character is T, the second is h, the third is i and the fourth is s. So the third and fourth characters of the string make up the string "is", which matches. So why is the answer two and not three? Simply because grown up computer languages count starting at zero!! So the 'zeroth' character is actually T, the 1st is h, the 2nd is i and the 3rd is s. (I bet at least some readers missed the "is" in "This" and jumped forward to the word "is" later on in the sentence).

Remember this method of counting when you work with computers. Start with zero!

7. Putting it together

We now know enough to create a precise English translation of our previously obscure second script:

My second script (complete!)
    <script language='JavaScript'> 
          <!--  
 var whoami=navigator.userAgent.toLowerCase();  //use lower case name 
 var my_version = parseInt(navigator.appVersion); //get version 
 var is_ie = (whoami.indexOf("msie") != -1); //does name contain 'msie'? 
 var is_ie3 = (is_ie && (my_version < 4)); //is it version 3? 
        if ( is_ie3 ) 
            { alert ("Aargh! You're using Internet Explorer 3 !"); 
            } else  
            { alert ("Good! Your Browser appears JavaScript-competent!"); }; 
          //--> 
    </script> 

.. translates as

  1. Create a string variable whoami and set it to contain a string that describes the userAgent of the navigator object that is browsing this page;
  2. Create another string called my_version that gives us the version of the navigator (By the way, we haven't yet said what parseInt does, but it's clear from the context that it takes a string and pulls out the first integer it comes across - a rather clumsy function that shows how some languages are simply thrown together!);
  3. Find out whether the string describing the userAgent contains the sub-string "msie". If it does, set the newly created variable is_ie to true, otherwise set is_ie to false;
  4. If the version number is under four, and is_ie is true, then set the new variable is_ie3 to true, but otherwise make it false;
  5. If we are dealing with Internet Explorer 3, in other words, if is_ie3 is true, then print the rude and damning message "Aargh! You're using Internet Explorer 3 !" in a cute little box, and otherwise:
  6. Congratulate the user for good taste with the message: "Good! Your Browser appears JavaScript-competent!"

A piece of cake!

Easy, isn't it? Well, if you've got this far, then the rest of JavaScript should actually be a piece of cake. For, surprisingly enough, we've covered so many vital concepts in the above, that almost everything will now slot into place. Before we rush on to our next lesson, I need some information from you (I don't mind if you lie, Ms Wstfgl!)

What is your name?

If the above button doesn't work,
then click here!
 


Webpage author jvs@anaesthetist.com Last update: 2000-10-7