BACK

Part 2 - Simple arithmetic! (Some things don't change!)

Contents

How did you do that? Creating and using variables C what I can do! Bodmas and friends Typing (no, not that type) Binary, schminary (with a touch of Logic) Arrays Trigonometry & stuff Putting it together

How did you do that?

How did we do this? Well, there were three components:

1. You filled in your name and clicked on a button;
2. Your name was magically transferred to this page; and
3. We wrote your name (and a 'Hello') at the top of the page!

Let's look at each of these in turn:

1. Filling in information

<FORM name='myform'> 
      What is your name?  
       <input type="text" name="yourName" size="30"> 
       <input type="reset" onClick='GoThere(myform.yourName)'
          value="Visit the next tutorial page">
</FORM> 

  <script language='JavaScript'> 
    <!-- 
   function GoThere(yourname) 
        { 
        location="part2j.htm" + "#" + yourname.value; 
        } 
   //--> 
  </script> 

  <script language='JavaScript'> 
    <!-- 
   function GoThere(yourname) 
        { 
        location="part2j.htm" + "#" + yourname.value; 
        } 
   //--> 
  </script> 

 <script language='JavaScript'> 
 <!-- 
 yourname = window.location.hash.substring(1);   //pull out the name 
   document.write("<div align='center'><h1>");   //write header 
   document.write("Hello " + yourname);          //write greeting 
   document.write("</h1></div><hr>");            //finish off 
   }; 
 //--> 

 <script language='JavaScript'> 
 <!-- 
 yourname = window.location.hash.substring(1);      //pull out the name 
 posn = yourname.indexOf("%20");                    //find the first %20 
 while (posn > -1)                                  //while there is a %20 
     { yourname = yourname.substring(0,posn) + " " + yourname.substring(posn+3); 
       posn = yourname.indexOf("%20");              //find next %20 
     }; 
     // here fill in rest of code 
 //--> 

    document.write("<a name='" + yourname + "'>");

 whoyou = yourname.value; 
 posn = whoyou.indexOf(" "); 
 while ( posn > -1) 
     { whoyou = whoyou.substring(0,posn) + "_" + whoyou.substring(1+posn); 
       posn = whoyou.indexOf(" "); 
     }; 

 function Replace ( target, todo, withwhat) 
  { var fixme = target;                // load string to alter (into fixme) 
    var atpos = fixme.indexOf(todo);   // find position of string to replace 
    while ( atpos > -1)                // while still to replace.. 
      { fixme = fixme.substring(0,atpos)  
                + withwhat 
                + fixme.substring(todo.length + atpos); //replace 
        atpos = fixme.indexOf(todo);     // find next position (if exists) 
      };                                // .. end while 
    return fixme;                       // return altered string 
  } 

   function GoThere(yourname) 
        { 
        whoyou = yourname.value; 
        whoyou = Replace(whoyou, ":", "_");     // replace colon, 
        whoyou = Replace(whoyou, "/", "_");     // and slash      
        whoyou = Replace(whoyou, " ", "_");     // and spaces. 
        whoyou = Replace(whoyou, "'", "");      //clip out single quotes 
        location="part2.htm" + "#" + whoyou; 
        } 

In addition, we lied to you. Well, perhaps that's a bit strong. We concealed the truth. For (as you might have guessed) we couldn't resist the temptation to use our previous IE3 detecting code, and so we actually passed control from our first page to an intermediate page (called part2.htm) which traps IE3. You can visit this page by clicking here.

Note how on the first page, we had a little cop-out below our fancy "Visit the next page" button - to at least allow non-JavaScript enabled browsers to visit our explanatory page.

Note that our page construction is a teaching exercise - you shouldn't do this sort of thing in a 'real' web-page without extensive modification! For example, if yo use our #information trick, then perhaps it would be a good idea to take a tip from Microsoft, and translate unwanted characters to their hex codes, preceded by a % (Later we'll encounter two functions - escape and unescape that you can use to do the translation for you)! And use tricks like hijacking reset buttons sparingly, if at all! (There's a better way of making a button that we'll explore when we make our JavaScript calculator at the end of this page). By the way, can you think of any other potential problems with the way we've done things above? (Heh)!

Creating and using variables

1. You can use the var keyword; or
2. You can merely use a new name, and JavaScript automagically creates a variable to fit.

For example, you can define a variable thus:

var my_version = parseInt(navigator.appVersion);

(where have we seen this before?), or you can simply say something like:

yourname = window.location.hash.substring(1);

where we've never used the variable yourname before, yet JavaScript somehow decides that (a) this is indeed a variable, and (b) it must assign it the value provided.

Hmm, think about this. Firstly, why should there be two ways of creating variables, and secondly what are the consequences of wildly creating variables just by using their names?

Another ugliness in JavaScript. The answer to our first question is that there are two different classes of variables, called global and local variables. Generally you should always use local variables - these are the ones you were first introduced to, the ones you created by using the word var. Local variables are just that - they only have meaning 'locally' - for example, in the function in which they were defined. This is a good thing! Occasionally you might want to have a variable that can be seen anywhere and everywhere. Then you would use a global variable, which you create by simply using its name! (It is a complete mystery to us why the makers of JavaScript didn't have some formal way of defining a global by, for example, using a keyword like global, or something!) We should also possibly say something about variable names..

Variable names

• Case is IMPORTANT. The variable Important is different from the variable important. Be warneD, i mean, warned!
• Variables names must begin with a letter (or an _underscore);
• Variables names can contain digits (0..9) but cannot begin with them.
• Variables names can contain _underscores_;
• Variables names cannot contain any other characters.

And that's pretty much it!

Later on we'll talk about the values contained in variables, and the different types of variables.

C what I can do!

(By the way, unary minus takes a single argument and changes the sign, for example - fred gives the negative of the number contained in the variable fred)

Where were we? Aha, we also have the following very C-like operators:

Don't be intimidated by these. Use will make them familiar - you'll find that these are often very powerful operators. Not, of course, as powerful as say, regular expressions in Perl, but powerful nevertheless. Intermittently even more convenient than the above are the following:

Bodmas and friends

a + b * c

and this is translated as

a + (b * c)

In other words, the rules of precedence are those you would expect - Brackets come before division and multiplication, which in turn take precedence over addition and subtraction. (In junior school you possibly learnt about this rule as 'Bodmas')! Here are the (slightly more formal) rules of precedence for JavaScript:

You can see that things rapidly become 'non-trivial' and confusing. Don't worry about all the strange <=>!@#&$%^ stuff! We'll gradually introduce you to the important things as we work through our tutorial. For the time being, just remember that operators on the same level have no precedence over one another! For example, * and / are on the same level, so expressions containing both are simply 'parsed' from left to right. We suggest that where there is possible ambiguity you:

Use parentheses liberally .. they generally make things crystal clear. (But not nearly as clear as our favourite, Polish notation, which most programming languages understand about as well as they understand Polish. Go learn Lisp)!

Typing (no, not QWERTY)!

JavaScript is a weakly typed language. This means that the variable fred (for example) can, at different times, contain a number, a string, a Boolean value (true/false) or even a floating-point number. It can even become an object! Which, incidentally, is an almost complete list of the different data types in JavaScript. Here they are, in a list:

( The example 0xff simply refers to a hexadecimal number. Don't worry about this for now, and never worry about octal, which can also be represented in JavaScript, but is obsolete)!

This approach of being able to change the type of content in a variable on-the-fly may seem sexy, but it carries with it a host of problems. One of the most irritating is the following:

1. What does "ABC" + "silly" give you? (Answer: the string "ABCsilly")

2. What does 3 + 5 give you? (Answer: 8)

3. OKay, how about 3 + "5" (Quickly now, what's the answer?)

Point made. JavaScript will automatically coerce a variable of a particular type into an appropriate one. This seems fine, but where something has an ambivalent value ("5" is both a string, and a number) unexpectedly horrible things can happen. In yet other circumstances, where there is no "correct" answer, an error may result.

The 'rules' state that strings are (generally) favoured over other data types, so, if you want to work out what 3 + "5" is, then the answer is "35" and not eight, as you might expect! (Next after strings come floating point, then integers, and finally logical operators). So numbers are converted to strings, and logical values to 0 or 1 (for false or true).

It is thus important to be able to explicitly convert between types (to be able to force such conversions). How do we do this? We use conversion functions. Here they are:

Earlier documentation says that if parseInt doesn't find a number at the start of the string, it returns zero. In fact on more recent browsers, both parseInt and parseFloat return "NaN" (which stands for "Not a Number") if they don't find what they're looking for.

Even more confusing than NaNs are nulls and null strings:

Null strings and null

""

Simply two quotes, with nothing in between. You might thing that such a peculiar animal has no use whatsoever, but we've already used a null string above, extracted for your pleasure here:

  whoyou = Replace(whoyou, "'", "");      //clip out single quotes

in our final incarnation of the GoThere function we defined. We replace a single quote with - yes - the null string (that is, nothing).

null is a very special (and confusing) thing. If I say something like:

  alert("The value of fred is " + fred);

.. and I haven't yet allocated a value to fred, then an error will result. Depending on how your browser is set up, you'll either get a mildly confusing error message, or the browser will simply stop interpreting the JavaScript!

The correct solution is to prevent this sort of error by checking your script carefully. Okay, occasionally you might need a distinct value (different from all others) that you can initialise a variable to, but the JavaScript value of null which acts as this sort of 'place-filler' to prevent an error, is likely to be more of a problem than it's worth. I would avoid it. An example of how null might mess you around is provided when we look at automatic type conversions - null is converted to "null" for string operations, false for logical operations, and 0 for numerical operations!

Escaping confusion

   document.write("<div align='center'><h1>"); //write header 

Another is to escape the character. We could have rendered the above as:

   document.write("<div align=\"center\"><h1>"); //write header

You choose the method you want. For certain characters, an escape is extremely useful. Here are a few more characters - you need only remember the first:

Much later on we'll encounter another quite different 'escape' - there's actually a function called escape() which does what Microsoft did above - turns all the funny characters in a string into percentage signs. There's even an unescape() which turns things back again. At several points we'll find that, with the whole English language to choose from, our JavaScript developers had such an impoverished vocabulary that they had to use the same word for somewhat different concepts!

Binary, schminary (with a touch of Logic)

On the previous page we explored the if { } else { }; statement. We therefore know a little about Boolean logic - how statements can be either true or false, and how we can combine such 'truths and falsehoods' using the || and && operators, as well as the ! operator which turns things around (false becomes true, true becomes false).

What we have not yet told you is that similar logic can be applied to numbers .. we can for example take the number 3 (binary 11) and perform an AND operation on it with, say, the number 1 (binary 01). We could say something like:

   var fred = 3; 
   var jane = 1; 
   var robin = fred & jane; //logical AND of the two numbers 
   alert ("The answer is " + robin); 

What is the answer, and what does it mean? When we AND two numbers together, what is done is that corresponding bits are ANDed together. A "1" is regarded as being true, and a "0" as being false. The usual Boolean rules apply, so 1 & 1 gives 1, all other possibilities give zero. Anding 3 (Boolean "11") bit-by-bit with 1 (Boolean "01") gives us "01", as you would expect.

Similarly | is used to OR together two numbers. For example, (hexadecimal)
0x13 | 0xC gives us 0x1F. Can you see why? (Ox13 is 0001 0011 in binary, 0xC is 0000 1100, so if we OR these numbers bit-by-bit, we get 0001 1111, which is the same as 0x1F).

There is one other Boolean operator you occasionally might come across. It's called XOR (or 'exclusive or'). In a similar way to A AND B (which means BOTH A AND B), A XOR B translates as "this is true only if either A is true or B is true, but not both". It's like one of those passages with a light switch at both ends - if both switches are off, the light is OFF. At one end of the passage you flip the switch on and - Presto! - the light goes on. You then go to the other end and flip that switch into the 'ON' position and what happens? The light goes OFF again!

An example of XOR on two hexadecimal numbers:
0x12 ^ 0x11 gives you 3 (Try converting to binary and performing an exclusive OR, bit-by-bit).

As if this weren't enough, JavaScript allows you to perform other bit-orientated operations on numbers. For example, you can shift every bit in a number ONE BIT LEFT, so that binary 0111 would become binary 01110. There are two operations to shift things right (can you think why this might be?) Here is a summary of bit-related JavaScript operations:

The reason why we have two right shift operators is related to the peculiar (but logical) way that computers store numbers. Negative numbers are generally stored in two's complement notation. (The way this works is that, taking the binary value of the number, we change all zeroes to ones and vice versa, and then add one). It turns out that when we store negative numbers in two's complement notation, the leftmost (highest) bit of the number is always a one, and with positive numbers, this bit is zero .. we therefore call this the sign bit. You can see that right shifting such a number and not preserving the sign bit will muck things up rather. But, in a manner vaguely reminiscent of the Y2K problem, one can also store a larger positive number in the same space if we just ignore 2's complement. Here it makes no sense whatsoever to preserve the leftmost bit (it isn't a sign bit), so we have two different shifts. Chaos rules!

Arrays

Brad = new Array(5);

We don't have to know beforehand how many elements there are in the array. We could have just said Brad = new Array(), and then created elements on-the-fly, as we will shortly learn. What's the difference? Well, if we specify the number of elements, then each element starts off with the offensive, nasty little value null, which we discussed above. Watch out for this, especially as some versions of JavaScript will return "undefined" rather than "null" as the value of these elements.

Okay, how do we put something into an array? Easy:

Brad[0] = "Any old string";

See how we use [ square brackets ] to refer to an element of Brad. This gives you a hint of how you pull something out of an array:

var Janet = Brad[0];

will extract the value we put into Brad[0] and copy it into a variable called Janet. Note how the first element of an array has the index 0 - remember than in JavaScript, we count starting at zero! If the element you refer to doesn't exist, don't worry - JavaScript will create not only that element, but all the undefined elements 'lower than' it!

There are still more tricks up our sleeves. We will next look at "pre-defined" arrays (otherwise known as "Dense Arrays"), and then at multi-dimensional arrays.

Dense Arrays

Dwarfs = new Array ("Happy", "Sleepy", "Dopey", "Sneezy", "Oin", "Gloin", "Frodo", "Glod");

Multidimensional Arrays

square = new Array (  
    new Array(1,2,3,4), 
    new Array(1,4,9,16), 
    new Array(1,8,27,64), 
    new Array(1,16,81,256) ); 
alert ("element row 3, column 2 = " +  square [3] [2]);

Here we create an array called square, with each element a separate array. The shorthand way of accessing each element is to refer to the element of the main array in the first square brackets and then the sub-array as the second. So square[3][2] gives us 81. (The real reason why JavaScript arrays can contain a variety of different data types is that they are actually Objects. For a detailed consideration of objects, see the third page of our tutorial).

Trig and stuff!

Note how each and every one of these functions must be preceded by Math. - otherwise you'll get a confusing error message (or JavaScript will stop being interpreted). This is also true for constants: