Writing and Testing JavaScript

One mistake that many beginners make in writing JavaScript is that they try to write the entire script in one go and then have great difficulty in actually getting it to work. They are taking the wrong approach to writing JavaScript. The best way to write JavaScript is to write it in small pieces and test each piece before moving on to write the next. This is of course true of any programming language and is particularly true when it is a language that you do not know all that well. As you become more expert at a language the size of the pieces that you write can be bigger because you know the language better and also you will have a larger collection of existing code that can be reused.

There are two approaches to designing, writing and testing your code piece by piece - top down or bottom up.

Designing the way that you intend for your code to work is best done from the top down. You can work out how your code is supposed to work by breaking the overall functionality up into a series of functions and objects each of which will provide a part of the overall functionality required. Designing from the top down makes sure that you have at least a general idea of what is going to be required to provide the full functionality and that the pieces will fit together.

When it comes to actual coding and testing it is easier for a beginner to start at the bottom and work their way up. What you need to do is to select one of the functions or objects that your design has identified and write the code that you hope will make that function (or object) do what it is supposed to do. Once you have that code written you then test it before moving on to write any more code. By testing each piece of code separately as it is written and making sure that it works before moving on to the next piece you keep to a minimum the piece of code you need to look at if it doesn't work.

So how do we test a function if the rest of our script that will use it hasn't been written yet? The answer is that we create dummy calls to the function that pass in various values that will test all the different paths through the function and run those one after the other. For calling the function all we need to do is to specify fixed values for each parameter where we know which path that value should cause the function to use. For seeing what the function returns we can use the JavaScript alert() call. In fact now that all browsers have a built in debugger about the only use left for the alert call is as a placeholder for the subsequent processing that hasn't been written yet.

For each function (or object) where you have tested all of the different possible paths through the code and ensured that they produce the correct result, you now have an additional statement that you can use in the subsequent code that you write.

Now let's consider an example of how we can use this approach. One of the most common uses for JavaScript in a web page where custom code needs to be written (particularly for beginners to JavaScript) is form validation. Of course you probably already have (or can easily obtain) functions to validate all of the common form fiends such as name, address, email etc. Let's suppose that we have a form that we are creating for an Australian bank or Superannuation Fund where one of the fields that we are asking the person to enter is their Australian Tax File Number (something where you are not likely to have a validation function).

The first thing you are going to need to do in order to write a validation function is to find out how to determine whether the field is valid or not. For this particular field it will be valid if it numeric, nine digits long and contains the correct check digit. We specifically want an individual's tax file number so we don't need to worry about the eight digit ones issued to companies.

We will write a function that takes a string containing the value to be validated as its input and which returns true if it is valid and false if it is not. The code to actually extract the field from the form to pass to the function and the code that will do something with the result can be written later. For the moment we just want to test our function to make sure that it does the validation correctly.

So here's the code for our function:

validTFN9 = function(tfn) {
/* returns true if the value supplied is a valid nine digit tax file number */
"use strict";
var a, w;
if (tfn.length !== 9 || tfn != +tfn) return false;
w = [1,4,3,7,5,8,6,9,10];
a = tfn.split('');
w.forEach(function(v,i) {a[i] *= v;});
a = a.reduce(function(x,y) {return x+y;});
return (!(a%11));

We have specified what should be a valid value as the parameter that is being passed to the function we are testing and wrapped the call inside of an alert() so that we can confirm that the value that gets returned is 'true'. We will also need to add additional statements like that call which pass each of the possible types of invalid values (not numeric, not nine digits and with an invalid checkdigit) to make sure that each of those returns false and should also obtain a few more valid values to test with to make sure that the check digit test is correctly written and didn't just return true for our first correct value by accident.

If you test a function such as this thoroughly you should be confident that it actually does what it is supposed to do and can be reasonably certain that if the code fails to work after you incorporate it into a larger piece of code that the problem probably lies elsewhere.

In fact if you test this particular function thoroughly enough you may realise that the length and numeric tests between them do not reject a value that is nine characters long including leading or trailing spaces but that we still don't have a problem with this as the check digit calculation will give the correct result in those cases. In fact the test for numeric is really also superfluous as any non-numeric values will cause the result of the check digit test to be false.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow