GCSE Information and
Communication Technology

.: Home .: Web Page Design .: Client Side Code and JavaScript

 

Client Side Scripts with JavaScript

Sometimes you want your web pages to do a little more than just display text and graphics. If you want your pages to offer some sort of interaction with the user then you need to add a piece of program code (or script) that either runs on the computer that the user is using (a client-side script) or runs on the main computer belonging to the ISP (a server-side script).

There are different programming languages for writing these scripts ... this page deals with a language called JavaScript (originally developed by Netscape Communications).

JavaScript is an interpreted language. You type the script in as part of the HTML code for that web page and the browser interprets that script (along with the HTML tags) to produce a finished web page.

The HTML code that you type in is interpreted by the browser to produce a web page. The same HTML code will always produce the same page: so, generally speaking, to change the web page you have to change the underlying HTML.
A piece of JavaScript, however, will allow you to change small parts of the web page without having to change the HTML. This means that the page can respond to the user without having to reload.

JavaScript Fortune Cookie:

 

How the Fortune Cookie works

The yellow box shown above contains a button and an image that are controlled by a small piece of JavaScript placed just after the </head> tag and just before the <body> tag in the HTML for this page (if you don't believe me click on view and source and have a look).

JavaScript code for the Cookie machine

The text shown here is very similar to the JavaScript used to run the Fortune Cookie machine shown above.

  1. The first line of code <script> indicates that the following lines will be in JavaScript.
  2. The line function Fortune() { defines the start of a module of code called Fortune.
  3. Then var rn_value=0; defines a special container in the computer's memory and calls it rn_value.
  4. Then a random number (between 0 and 1) is generated and stored in the rn_value container: rn_value = Math.random();

The remaining lines all do similar things. The value of the random number is checked - and depending on its size a different fortune cookie is chosen:

  1. The line if (rn_value < 0.2) { tests the random number to see if it is less than 0.2
  2. If it is less than 0.2 then the next line, document.frm.fort_image.src="fort1.jpg", is run and the flow of control jumps to the </script> line.
    This line selects the cookie image and changes it to one containg an appropriate piece of text.
  3. If the value is greater or equal to 0.2 then the program jumps to the next else line and so on.

The Tell My Fortune button at the bottom of the yellow box is made using this piece of HTML:

<input type="button" onClick="Fortune()" value="Tell My Fortune">

This states that the browser needs to make a button, and when it is clicked run the script function called Fortune(), and the writing on the button should say Tell My Fortune.

Of course, if you want to learn JavaScript there are two things that you must do: get a decent book; and look at how other people do it (view and source) when you see their interactive web pages.

© 2003 J Ewart | S Peters