|Here's the first object that you will meet - document. This refers to the main screen in the browser itself, the part where the text and images appear. The document has a property (among others) called bgColor, which specifies what the background colour of the screen is (note the capital C in the middle of that. It's important. Also note that 'Color' is spelled the American way). We can use this to set the background colour of the screen. Open your text editor and create a plain text file called test1.htm containing the following text:|
document.bgColor = "YELLOW";
You can add some more text and/or HTML tags here, of course.
bgColor is an example of a document property. An example of its methods is write() and you can tell that it is a method by the fact that the name of the method is followed by a pair of brackets. write() displays text on the screen. The thing that you want displayed on the screen is enclosed inside the brackets. If it is a piece of text, then remember to place it within double quotation marks:
You will see that you can include as many document.write() instructions as you like, and that write() is again separated from the word document with a full stop. Note also the semicolon ; at the end of each program line.
The second instruction writes a paragraph break on the screen (i.e. a blank line). The tag <P> in HTML causes a blank line to be inserted and enclosing the HTML tag within a document.write() statement, it has the same effect. In fact, document.write() can duplicate the effect of any HTML tag:
You do still need to enclose the tags within quotation marks. The following would not work at all:
Another property of document is the lastModified property. This contains the date that the document was last edited - it corresponds to the file-edit date. You can't change this in the same way that you could with the bgColor property, but you can display it on the screen:
Again, the word lastModified should be written with all lower case letters except for the M in the middle which should be upper case. lastModified is what we call a read-only property - it can be displayed, and its value "read" by the program (for example, when testing conditions), but it can't be altered by the program. The only way of altering the lastModified property is by editing the file so that the date changes.
|A variable represents a piece of data stored in a computer program. All variables have a name and a value. We can think of them as being like small boxes, each of which can contain one item. The name of the variable is how we refer to the box, and the value is the item stored in the box. The diagram shows a variable called x, and the value stored in it is 14.|
Variable names can consist of any number of upper or lower case letters, digits and underscore characters _ but they must start with a letter. Also, variable names are case sensitive, which means that the variables names myName, MYNAME and Myname would all refer to different variables. Variables are set to values using an equals sign:
age = 37;
You can also display the values of variables on the screen using document.write(). In this case, put the variable inside the brackets but don't surround it with quotation marks:
This will display the number 37. If you had put the word age in quotation marks, as follows,
then the word age would have been displayed on the screen. The value of variables can be changed at any point. Indeed, they can even be set to the value of other variables:
The first number displayed on the screen is 26 (the value of x). The second number displayed is 45.7 (the updated value of x - I didn't say the numbers had to be whole numbers, did I?) and the last number displayed is -109 (after x is set to the same value as y - I didn't say the numbers had to be positive either!) All these numbers are produced by the same instruction - it's just the value of x that changes.
Variables can also be set to values at the same time that they are initialised. For instance, the following two instructions
var temporary_value; temporary_value = 26.09;
can be rewritten in one line:
var temporary_value = 26.09;
You can also declare more than one variable in one line, by separating the variable names with commas (not semicolons - they only come at the end of lines). For instance, the following two lines:
var a; var second; var third_variable; a = 7; third_variable = 19; second = 2400;
can be rewritten as
var a, second, third_variable; a = 7; third_variable = 19; second = 2400;
or even as
var a = 7, second = 2400, third_variable = 19;
var first = 12, second = 4; var sum = first + second; document.write(sum); document.write("<P>"); var difference = first - second; document.write(difference); document.write("<P>"); var product = first * second; document.write(product); document.write("<P>"); var quotient = first / second; document.write(quotient); document.write("<P>");
The value of sum is set to 16 (= 12 + 4), difference is set to 8 (=12 - 4), product is set to 48 (=12 * 4) and quotient is set to 3 (=12 / 4). If the division had not produced a whole number then quotient would have been set to a decimal value (so if second had been set to 5, then quotient is set to 2.4).
If you want to, you can put the arithmetic entirely within the document.write() statements, although that would not set any variable values, of course. The following would produce the same four numbers as the program segment that you see above, except that the variables sum, difference etc. are not set:
var first = 12, second = 4; document.write(first + second); document.write("<P>"); document.write(first - second); document.write("<P>"); document.write(first * second); document.write("<P>"); document.write(first / second); document.write("<P>");
You can also mix numbers and variable values in longer arithmetic expressions:
var answer; answer = 14 + sum - product; second = 10 * quotient - answer;
The value of answer is set to 14 + 16 - 48 = -18. The (new) value of second is set to 10 * 3 - (-18) = 30 + 18 = 48.
document.write(2 + 3 * 5);
If you said "25", then you would be wrong. Instead of doing the arithmetic operations in the order in which it meets them (2 + 3 = 5, then 5 * 5 = 25), the multiplication is done first and then the add (3 * 5 = 15, 15 + 2 = 17) so the answer 17 is displayed on the screen.
The rule is that multiplication and division are more important than addition and subtraction (we say they have a higher precedence) even if they come after the addition or subtraction. Take a look at this:
document.write(40 - 5 * temp1 + 100 / temp2);
In this case, the value of 5 * temp1 is calculated first, and then the value of 100 / temp2. The program then subtracts the first of these values from 40 and adds the second of the values. If temp1 had the value 7.5 and temp2 had the value 50, then the number displayed would be 40 - 5 * 7.5 + 100 / 50 = 40 - 37.5 + 2 = 4.5.
As in normal mathematics, we can change the order in which the arithmetic is done by enclosing the addition or subtraction within brackets. Brackets mean "do me first", so the following
new_answer = (2 + 3) * 5;
really would set the value of new_answer to 25. Similarly, the following
document.write((x + 2) / (x * 2 - 5));
would calculate x + 2 first, then the value of x * 2 - 5 (doing the multiplication before the subtraction) and then divide the first number by the second, displaying the answer.
var proverb = "Every mushroom cloud has a strontium lining."; document.write(proverb);
This code segment declares a variable and sets it to the string specified. Again, no quotation marks are used in the document.write() statement as otherwise it would display the word proverb rather than the value of proverb. Variables can be re-assigned to different strings just as they can be with different numbers:
proverb = "A rolling stone gathers much speed.";
Indeed, variables can be assigned to a number, then to a string and then back to another number if you want:
proverb = 399; proverb = "Pride comes before private in the dictionary."; proverb = -1000;
You can also use the + operator with strings, or variables that have been assigned to strings. Consider the following:
var name = "Richard" + "Bowles"; myVariable = "X@X#X$X"; document.write("This is a string" + myVariable + ".");
The first of those instructions sets the variable name to RichardBowles and the second statement displays This is a stringX@X#X$X. This joining of one string on to the end of another is called concatenation. Note that I had forgotten to include any spaces in that, so the strings produced had no spaces. If I had wanted spaces, I should have written the statements as follows:
var name = "Richard " + "Bowles"; myVariable = " X@X#X$X "; document.write("This is a string" + myVariable + ".");
var x = 123; var temp_var = "Hello" + 123;
Similarly, the following instruction displays the string The answer is 1004:
first = 1000; second = 4; answer = first + second; document.write("The answer is " + answer);
However, please be careful. You might think that the following would display the string I have 8 children:
document.write("I have " + 5 + 3 + " children");
document.write("I have " + (5 + 3) + " children");
Here is an example where I have mixed a string with one of the document properties:
document.write("Web page last changed on " + document.lastModified);