Flow

Variables

example

   var q;
   
   q = 135;
   drawCircle(q,200,20);
   
   q = 400;
   drawCircle(q,200,20);

Variables are named values, they are called variables because they can vary their value as the program runs. In the example the first line makes a variable called q. The first circle is drawn as drawCircle(135,200,20); the second circle will appear as if it is drawCircle(400,200,20);

Calulating values

example

   var q; 
   q = 135;  
   
   drawCircle(500,200,10+30);  
   
   drawCircle(q-10,200,20);

In JavaScript, anywhere that accepts a value can also accept a calcultion that has a result of the same type. The example shows the first drawCircle calculating the size. This will run as if it were drawCircle(400,200,40);

The second drawCircle does a calculation using a variable. This will run as if it were drawCircle(125,200,40);

Because you can calculate values wherever the program accepts a value, you can also change variables in the same manner

   var q; 
   q = 135;  
   q = q-10;

This works in the same way as q-10 works in the drawCircle. It calculates q-10 to be 125 and then places that value into the variable q.

Choosing what code to run

if ( ? ) { ... }

example

   if ( i > 100 ) {
     drawCircle(i,145,20);
   }

if perfoms a check and runs the accompanying code An if statement contains two parts. The condition, contained within round brackets, and and the code block that will run if that condition is true. In the example the drawCircle will only happen if the variable i is greater than 100.

if ( ? ) { ... } else { ... }

example

   if ( myage > 90 ) {
     setColour("brown");
   } else {
     setColor("green");
   }
   drawCircle(30,30,20);

An if/else statement contains two blocks of code. It only runs one of the blocks. If the condition is true the first block of code is run, if the condition is not true the second block is run. The example shows an if/else statement that checks to see if the variable myage is greater than 90. If it is, the code line to set the colour brown is run otherwise it sets the colour green. The circle will then be drawn in whichever colour was set.

Loops

Getting a program to run the same code more than once is called a loop. There are three main types of loop in JavaScript.

do {...} while ( ? );

example

   var i=0;  
   do {
     i=i+30;
     drawCircle(i,145,20);
   } while (i < 100);

The do/while loop is the simplest form of doing something several times. The program runs whatever is inside the curly brackets { } repeatedly while a paticular condition is true. In the example above that condition is 'i is less than 100'. When the running program reaches the while line it checks to see if i is less than 100 and if it is the program jumps back up to the start of the block. If the value is not less than 100 the program will continue on to the next line.

while ( ? ) {...}

example

   var i=0;  
   while (i < 100) {
     i=i+30;
     drawCircle(i,145,20);
   }

The while loop is similar to the do/while loop except the check is performed at the start. The main difference in behaviour is that a do/while loop will always do the loop code at least once. A while loop has the possibilty of never running the code inside.

for ( ... , ???, ... ) {...}

example

   var i;  
   for (i=0; i < 100; i=i+30) {
     drawCircle(i,145,20);
   }

In JavaScript a for loop performs very much like a while loop. It is more or less the same thing witten in a more compact form. The example given here performs exactly the same way as the while loop example above. for can help as a way to bundle things to make it easier to read.

Curiosities

In JavaScript, and indeed most programming languages, * is used for multiplication and / is used for division. This is because there is no simple way to type × and ÷. This means that 6 * 2 is the same as 6 × 2 and 12 / 2 is the same as 12 ÷ 2

JavaScript doesn't need to have only one command per line. You can place your entire program on one line if you wish, it just becomes difficult to read. semicolons are used to separate commands. This is why most lines end in a semicolon. You do not need a semicolon after a { ... } block though. The } is enough to for the computer to know that what follows is separate.

JavaScript uses more than one kind of bracket. They get used for different jobs.

( ) Round brackets. You'll see these holding the condition check in if while and for statements. Round brackets are also used for holding function parameters
{ } Curly brackets. These are used for grouping several commands into a single block
[ ] Square brackets. These are used for accessing arrays. (good grief, what are arrays?)

Other things to look at

There is an online book on JavaScript at http://eloquentjavascript.net/contents.html. This book goes into much more detail than these pages.

At the moment Google Chrome is the best performing web browser for running JavaScript. It can be downloaded from http://www.google.com/chrome

Mozilla FireFox isn't quite so fast as Google Chrome but many people prefer testing JavaScript with FireFox because of error reporting tools and extensions available. FireFox can be downloaded from http://firefox.com