Making websites do things | Law Society of Scotland

Find a Solicitor Sign in

A guide to the basic principles of Javascript with a view to producing some practical results

1st January 2001 | Scott Cownie

In an article in August's Journal, I provided a brief guide to the basic elements required to set up websites. While that article focused on a formatting language called HTML, I hinted towards the end of it that if you wanted to get yourself into a position where you could start identifying novel ideas for solicitors’ websites, then you should have a look at another computer language called Javascript. I suppose I had better put my money where my mouse is and provide an example. The following script is an example of how Javascript can make an otherwise static page actually do something. The example given here is not the sort of thing which you would want to put on a public site, but illustrates quite well some basic principles of how Javascript works. If you bear with me, I'll give an example at the end of how the techniques illustrated here have been used to do something practical.

The script

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):

<html>
<body onLoad="javascript:document.RPI.then.focus()">
<script language=javascript>
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
}
</script>
<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
</select>
is now worth
<input type=text name=now size=9 readonly>
<input type=reset value="reset" >
</form>
</body>
</html>

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.

For that, you need a language like Javascript. update() is a function written in Javascript. A function is a set of instructions which takes information from text boxes and other form elements, then processes it through pre-defined parameters and returns a result. update() is defined from line 4 to line 10, all of which are contained within opening and closing <script> tags at lines 3 and 11, which tell the page that it's being asked to interpret a script written in Javascript as opposed to one of the several dozen other scripting languages.

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.

Next, at line 8, those two variables are multiplied together and then rounded off to a whole number, using the phrase 'Math.round-(oldvalue*chosenyear)'. Math is a Javascript 'object', which is a pre-defined set of mathematical calculations which any computer understands. Math.round is a subset of Math, which rounds off to the nearest whole number: This stops it returning a figure running to lots of decimal places. Line 8 also renames the product as a new variable, 'newvalue', which is the original award figure updated to today's prices.

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.

Summary

Is there any practical use for this sort of thing on solicitors websites? Have a look at Golds site. They have a fees calculator on it. The potential client types in the proposed purchase and sale prices and the amount of the mortgage, then presses a button and it returns the fee, vat and outlays. Click view | source from the menu bar at the top of the screen and you'll see that this effect is achieved through a script written in another language called VBScript, which operates in pretty much the same way as Javascript, by taking values from HTML form elements on screen, manipulating them and returning a result. Of course, policy questions then arise as to whether you necessarily want to tell the viewing public what your fees are at that stage of a relationship being established, but that's something you'll have to make your own mind up about. Bear in mind that the demographic is different. People using the internet want the answer there and then. They're not going to want to have to phone you. The point of all this is that webpages are not a static medium. Many solicitors’ sites suffer from being little more than brochure-ware. There are many areas of law which can be reduced to the sort of blunt logic which Javascript relies on. As lawyers, we're all familiar with the idea of, "if this is the case, then section six applies, else, it's section seven." Learn about this stuff, look for those areas and then put them on screen. Or don't bother. It's up to you. Interactive features such as this will become more common, and will have an influence on the way in which potential clients perceive your firm.

Scott Cownie, [email protected]

In this issue

Recent Issues