Making websites do things
Anyone who has used the new CD version of McEwan and Paton will be familiar with its Retail Prices Index gadget which allows you to update the value of an award made in an old case to reflect its worth at today's prices. The following script does much the same thing at a simpler level. For the purposes of this illustration, however, it shows:
- the way in which HTML can place 'form elements' on screen, such as text input areas and select menus, to allow information to be fed into the screen.
- the way in which elements on screen can have 'event handlers' attached to them, to tell the script to start processing information given to it.
- the way in which a 'function' is set up in order to manipulate information and return a result.
This is what it should like on screen:
A case worth £xxxxx in xxxx year, is now worth £xxxxx, reset.
So, here's the script (don't type the line numbers in, they're just for guidance):
- function update()
- var oldvalue=document.RPI.then.value
- var chosenyear=document.RPI.year.value
- var newvalue=Math.round(oldvalue*chosenyear)
- document.RPI.now.value="£" + newvalue
- <form name=RPI>
- A case worth £<input type=text name=then size=9> in
- <select name=year onChange=update()>
- <option value="" selected>Year?
- <option value=1.37>1990
- <option value=1.48>1989
- <option value=1.59>1988
- <option value=1.64>1987
- <option value=1.70>1986
- <option value=1.80>1985
- is now worth
- <input type=text name=now size=9 readonly>
- <input type=reset value="reset" >
How it works
Well, there's a bit more going on there than in my August article, so let's break down what's happening. At line 13, the words <input type=text name=then size=9> tell the computer to put a text input box on screen. Giving it a name, 'then', allows the script to identify this particular form element, so that when information is typed into it, the script knows where it is coming from. In this script, 'then' is the box into which the old value of the case is typed. When you type a figure into the box, the figure is referred to as its 'value'.
You should maybe also notice at this stage that 'then' and the other form elements at lines 14, 24 and 25 are all contained within an overall <form> element which opens at line 12, where it is given the name 'RPI', and closes at line 26. This idea of having a screen with a form on it and elements within the form is the basis of a heirarchical way of identifying things on screen, called the Document Object Model. For example, you'll see at line 6 that whatever figure is typed into the box 'then', is formally referred to as 'document.RPI.then.value'. The heirarchy steps down through the document as a whole, the name of the form on the screen, the name of the box within the form, and then the particular figure which is in the box at that point in time. Sticking with line 6 for a second, that unwieldy cluster is renamed as 'oldvalue', for reasons I'll explain later.
So, we've typed the old value of the case into 'then'. Next, we need to choose the year in which the case was decided. Lines 14 to 22 tell the computer to display on screen a select menu, one of those fancy little drop-down menus which you click to see a list of available options. It has opening and closing <select> tags at lines 14 and 22 and is given the name 'year' inside the opening <select> tag at line 14. Each of the options which you want to appear in the list are set up using <option> tags at lines 15 to 21. Taking line 15 as an example, <option value=1.37>1990, the format is that '1.37' is the RPI figure for the year '1990'. The year is displayed in the drop-down, but the value '1.37' is not. So, what use is the value? You can give it a name, using the heirarchy, 'document.RPI.year.value', and you'll see that this name appears at line 7, where it is renamed 'chosenyear'. Due to space restrictions, I've only included the years 1985 to 1990. You can add as many options as you want.
By now, you've told the page the sum awarded and the year it was decided in. How does the script work out its current value? In line 14, the <select> tag contains the words 'onChange=update()'. OnChange is an 'event handler'. Various 'events' can happen on screen. The most familiar is 'onClick', which occurs when you click the mouse button. The page knows that when an event happens, it should do something according to the instructions contained in the script. In this particular script, the page knows that when you run the cursor over the available options in the drop-down and then click on one, you are changing from the previous selected option, invoking the 'onChange' event handler and it should then run a function called 'update()'.
Pretty much everything to this point has been straightforward HTML. As well as allowing you to format the style, size and colour of text and pictures, HTML allows you to place form elements on screen, as with this example. HTML, simply puts them in place, but does not allow you to make the buttons, text boxes and select menus actually do anything.
First, at lines 6 and 7, the script identifies the values which have been typed in to the text box and chosen from the select menu. Remember the long heirarchies for those values were given shorter names in these lines, namely, 'oldvalue' and 'chosen year'? They were in fact being set up as what are known as 'variables'. For the purposes of this script, you can think of variables as being a piece of information which can be of any value but is identifiable by where it came from. If that seems a bit abstract, think of the way in which matrimonial assets can be worth £10,000 or £50,000, depending on the particular case, but are always calculated by reference to the provisions of the Family Law (Scotland) Act 1985.
The return has to be displayed somewhere. In line 24, HTML is used to set up another text box, called 'now'. While you want to be able to type a figure into the first text box, you don't want to accidentally mess with the returned figure, so the word 'readonly' in this line stops anything being accidentally typed into or deleted from the second box. It's just a receiver for the return from the script. To get the return into that box, line 9 specifies that the value of 'now', accessed using the heirarchy, 'document.RPI.now.value', should be the variable 'newvalue', and a pound sign, just to be fancy.
Scott Cownie, email@example.com