Examples will be given on the assumption that a Mozilla Browser is being used on a Windows system. If you are using Linux you are probably aleady `computer literate' enough to work out the differences. If you're using a Mac, I'm afraid I can't help, but most things should be similar.
The aim is to get you writing simple programs quickly, not to teach you all about writing complex programs. If you want to find out more about the language and `real' programming, we will provide hypertext links and a bibliography which you can follow up.
<script> document.write('Hello world!') </script>Click here to run this program. It will pop up in a new window.
On the browser window you can use the pulldown `View' and `Page source' to confirm that that the program is indeed exactly as above.
document.write('Hello world!')What this does is to write into a web document the text:
`Hello world!'The browser displays this web document. This instruction is sometimes called a `function call'. It causes something to be done; what is does is predefined by the words `document.write'.
What is written is determined by the programmer-supplied text included between the two quote symbols. (NB these are both the same single closing quote on the keyboard.) Any text (except for another single quote!) which appears there will be displayed. A piece of text in quotes is refered to as a `text string' or `character string' or sometimes just a `string'.
We will explain the purpose of the other two lines shortly.
document.writeln('Some message')This prints the message followed by a new line. Try it. Did it do what you expected?
Go back to the web document you created earlier to see how how this could be done, open it with Notepad and type in some text which includes blank lines. Now open it in a browser. See what has happened?!
Now insert the text:
<pre>At the top of the document, and open it again.
Explanation: The HTML language in which Web documents are written ignores all multiple spaces, new and blank lines, unless told not to do so. One way to make it recognise these in the `preformat' instruction <pre>.
It should be fairly obvious how we can do this. this program does it. Use View Page Source to check how it was done.
<script> // program to do a calculation document.writeln('<pre>') document.writeln('This program calculates 23.6*(1-4.2)/(3.0+2.1)') document.writeln(23.6*(1-4.2)/(3.0+2.1)) </script>You can run and copy it from here.
Important Point! Notice the difference between how 23.6*(1-4.2)/(3.0+2.1) is treated:
In the second it is treated as an expression and is evaluated using the computer's rules for arithmetic. These are mor-or-less the same as the conventional rules but include the following:
These may appear in expressions but their names must generally be preceded by Math. to indicate that this is a mathematical function. Thus:
Document.write document.wRite math.sin MathsinAnother possible pitfall lurks for the unwary:
(Calculate say, log10(3) which is a bit less than 0.5)
Consider the following program which you should copy from here:
<script> // program to do a calculation var x // This defines a variable called x x = 23.6*(1-4.2)/(3.0+2.1) // This gives it a value document.write('x is ') document.write(x) // This displays the value </script>The overall effect of this is essentially the same as the previous program, except that it involves a new kind of entity, vital to effective programming, called a variable. It is so called because the value which it takes can be changed by equating it to different expressions on the right hand side of an instruction which always takes the form:
variable_name = expressionThe form of this assignment instruction is identical to that of evaluating a formula. It is convenient to think of a variable in this context as being the same as a variable in a set of equations, although it is in fact a more general and flexible concept than that. At the very least, the use of variables facilitates the writing and developing of programs, and makes them easier to understand.
Consider the use of a program to evaluate expressions involving variables, whose values depend on other variables, i.e. a set of equations. This involves a slightly modified version of the previous program:
<script> // program to solve two equations var x, y // This defines variables called x and y y = Math.sqrt(23.6) // calculate y x = 23.6*Math.log(1.0+y)/(3.0+y) // calculate x which involves y document.write('<pre>') document.writeln('x is ', x) document.write('y is ', y) // This displays the values </script>You can run and copy this program here.
var x, yis called a declaration of the variables x and y. It consists of the word var followed by a list of the names to be given to the variables. These can be any combination of letters or numbers, but must start with a letter. The names may not include spaces, but the underscore character `_' may be used and is very useful in improving readability. Upper and lower case letters are different.
You should try to choose variable names which help the readers understanding of the program. In general you should not use meaningless name like `x' and `y', unless these have been used in the sepcification of the problem. Where standard symbols exist, e.g. `P' for pressure or `T' for temperature, use these with variants, e.g. T1, T2 or use descriptive names, e.g. T_reactor, Column_Pressure. Names can be up to 256 characters long, but typing very long names becomes tedious (and they can be mis-spelled).
Take time and care to write your programs. It is actually easier to get a program correct first time than to find an error once you nave written it!
Write your program down on paper, then type it in to the computer. This (a) forces you to think what you are doing and (b) gives you two chances to spot any mistakes.
There are two kinds of error which can occur.
To check program operation, before you load the .html fiule
with the program in it go on the browser menu bar to:
Click `Clear' to remove messages already in the window. Then load the program.
Error messages refer to line numbers in the program file. If you have this open in Notepad at the same time you can use its `Edit..Goto.. line number' feature to go to the line that appears to be incorrect. However, it is often the case that the instruction(s) that the debugger thinks are incorrect appear so as a consequence of another error which it may or may not have detected.
To give you practice in `debugging' programs, here is one which contains two errors.
And here is another which runs, but incorrectly.
Copy these, try them and correct them.