var a;
a=12;
In the first statement a is declared to be a variable using var, and in the second statement a is assigned the value 12. The above two lines can be combined into one:
var a=12;
Then throughout the remaining part of the program using a is the same as using 12. Please note that each of the above statements ends with a semi-colon. Each JavaScript statement ends with a semi-colon. The name of the variable can consist of several alphanumeric characters but with the first character being alphabetic. For instance, we can write
var age=40;
Here age is declared to be a variable and then assigned the value 40. We can change the value of age later in the program by setting
age=65;
If we write
var a=15;
then a is declared to be a variable and assigned the value 15. If we now write
a=a+5;
then 5 is added the present value of a to get 20, which is then assigned to a. So a is now equal 20. Consider the statements
var b=12;
b=b+7;
As a result of the first statement b is 12, and as a result of the second statement b is now equal to 19. If we write
var i=1;
i=i+1;
then the first statement declares i to be a variable and sets it equal to 1. The second statement then increases i by 1 to set it equal to 2. We will use a shorthand notation for
i=i+1;
namely:
i++;
using the incremental operator ++.
Numerical variables and values can be added, subtracted, multiplied and divided using the usual symbols +, -, *. and / respectively. It sometimes will be convenient to use the following equivalent notations:
a +=3;
is equivalent to
a=a+3; | a -=3;
is equivalent to
a=a-3;
a *=3;
is equivalent to
a=a*3;
a /=3;
is equivalent to
a=a/3; |
A variable can also represent a collection of alphanumeric characters:
var name;
name="harry";
In the first statement name is declared to be a variable and in the second is assigned the value "harry". The above two statements can be combined into one:
var name="harry";
We can later assign another value to name. Suppose we now write
var s1="good ";
var s2="morning";
var s3=s1+s2;
then s3 is assigne the value
good morning
This use of the + sign for strings is called concatanation. If we write
var s1="good ";
s1=s1+"morning";
then s1 is now equal to
good morning
The last command can also be written as:
s1 +="morning";
A collection of alphanumeric characters like a1b2c3 can be used as the name of a variable. We will later see how the usual arithmetical operations work in JavaScript and also the concatanation of strings.
All the JavaScript commands in a HTML program must be enclosed in script tags. For instance
<script language=javascript>
...
...
...
</script>
The ... represent any JavaScript commands.
A program may sometimes need more than one script container.
To test whether a browser can handle JavaScript load the following program:
1: <html>
2: <head>
3: <title>js000</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <h2>
7:
8: <script language=javascript>
9: <!-- hide from older browsers
10: document.write("Hello world! Welcome to JavaScript.");
11: // end hiding from older browsers -->
12: </script>
13:
14: <noscript>
15: This page requires JavaScript.
16: </noscript>
17:
18: </h2>
19: </body>
20: </html>
If the browser is JavaScript enabled then
appears. Otherwise the following message appears on the screen:
Each program can include lines 9 and 11 of the above program to check whether the browser is JavaScript enabled but we will not do so in this tutorial.
The first JavaScript command we discuss is
document.write(message);
that allows us to write HTML code and other messages to the screen. Inside the parenthesis can be HTML tags or strings that are to be written to the web page. By that we mean that the effect of the tags is seen not the tags themselves. But a string, however, will appear on the screen. For instance
document.write("<h2>");
will write the <h2> tag to the page, and
document.write("<center>");
will write the <center> tag to the page, while
document.write("This is a JavaScript tutorial");
will write This is a JavaScript tutorial to the page. In the next program we use document.write(); to write tags and strings to the web page.
1: <html>
2: <head>
3: <title>js0</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <h4><center>Illustrating the use of document.write() to write to the web page</center></h4>
7: <script language=javascript>
8: document.write("<h4>");
9: document.write("<center>");
10: document.write("This is a JavaScript tutorial!");
11: document.write("</center>");
12: document.write("</h4>");
13: </script>
14: </body>
15: </html>
will write
You can include the several tags, strings, and a variable in the same document.write(); command. For instance the above series of commands, lines 8 to 12, can be combined into one:
document.write("<h2>"+"<center>"+"This is a JavaScript workshop"+"</center>"+"</h2>");
producing the same result. Please note the use of quotation marks and the plus (+) sign. Tags and string constants need to be enclosed in quotation marks while variables do not. Different expressions inside the parenthesis are connected with a + sign. We will for the sake of clarity not put too many tags into one document.write(); command.
The next program gives another illustration of document.write().
1: <html>
2: <head>
3: <title>js2</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <h4><center>
7: Another illustration of the use of document.write() to write to the web age
8: </center></h4>
9: <script language=javascript>
10: document.write("<h4>");
11: document.write("Good morning!");
12: document.write("<br>");
13: document.write("What would you like for breakfast?");
14: document.write("</h4>");
15: </script>
16: </body>
17: </html>
Line 7 tells the purpose of the program. Lines 9 and 15 are the script container tags. Lines 10 - 14 write to the web page.
We now introduce the idea of a "for-loop" which is used to repeat a block of commands several times. Suppose it is desired to write
Good morning!
Good morning!
Good morning!
Good morning!
Good morning!
to the web page. The code fragment that will produce this is
<script language=javascript>
document.write("<h4>");
document.write("Good morning!"+"<br>");
document.write("Good morning!"+"<br>");
document.write("Good morning!"+"<br>");
document.write("Good morning!"+"<br>");
document.write("Good morning!"+"<br>");
document.write("</h4>");
</script>
which requires a lot of typing. This can be accomplished more efficiently by using a "for loop". The code fragment
1: for(var i=1; i<=5; i++)
2: {
3:
document.write("Good morning!"+"<br>");
4: }
will produce the desired result. We now discuss the several parts of this "for-loop".
a: The line(s) between the braces, lines 2 and 4, is (are) called a block.In the present case there is only one command in the block. It is the block that will be repeated.
b: Line 1 controls the execution of the "for-loop". The word "for" declares this to be a "for-loop". Immediately inside the parenthesis the variable i is declared and set equal to 1. This value is then examined if it satisfies the condition i<=5. Since it does, the command between the braces is executed. Then the variable i is incremented by one, i++. This new value, i=2, is examined to see whether it satisfies the condition i<=5. Since it does, the code between the braces is executed again. This process continues until the value of i no longer satisfies the condition i<=5 which is the case when i=6. Thus the "for-loop" produces the desired result. The complete program is:
1: <html>
2: <head>
3: <title>js3</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <h4><center>Illustrating the use of a for loop</center></h4>
7: <script language=javascript>
8: document.write("<h4>");
9:
10: for(var i=1; i<=5; i++)
11: {
12: document.write("Good morning!" + "<br>");
13: }
14:
15: document.write("</h4>");
16: </script>
17: </body>
18: </html>
In the next program the variable i is included in the document.write(); command.
1: <html>
2: <head>
3: <title>js4</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <h4><center>Another illustration of the use of a for loop</center></h4>
7: <script language=javascript>
8: document.write("<h4>");
9:
10: for(var i=1; i<=5; i++)
11: {
12: document.write(i + ":" + "Good morning!" + "<br>");
13: }
14:
15: document.write("</h4>");
16: </script>
17: </body>
18: </html>
Please note the appearence of i in line 12. It is not enclosed by quotation marks.
JavaScript allows for arithmetical operations between numerical quantities. The symbols +, -, *, and / represent the usual addition, subtraction, multiplication, and division operations. Arithmetical operations can also be performed inside the document.write(); command. This is illustrated by the next two programs.
1: <html>
2: <head>
3: <title>js4b</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <h4><center>Using document.write() for calculation I</center></h4>
7: <script language=javascript>
8: var a=12, b=7;
9: document.write("<h4>");
10: document.write("Integers are:"+ a +" and "+b +"<br>");
11: document.write("Sum:"+(a+b)+"<br>");
12: document.write("Product:"+(a*b)+"<br>");
13: document.write("Difference:"+(a-b)+"<br>");
14: document.write("Quotient:"+(a/b)+"<br>");
15: </script>
16: </body>
17: </html>
The variables a and b are declared in line 8 and assigned the values 12 and 7 respectively. Note that two variables have been declared on the same line with only one var. Line 11 finds the sum of a and b and writes it to the web page.
Note that the + sign between sum: and (a+b) concatanates the two expressions while the + sign between a and b in (a+b) adds the two quantities. The same explanation holds for the lines 12 - 14. Please note the script container tags in lines 7 and 15.
In the next program we again present the arithmetical operations but in a different manner, depicting the actual operations.
1: <html>
2: <head>
3: <title>js4c</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <h4><center>Using document.write() for calculation II</center></h4>
7: <script language=javascript>
8: var a=12, b=7;
9: document.write("<h4>");
10: document.write(a+"+"+b+"="+(a+b)+"<br>");
11: document.write(a+"*"+b+"="+(a*b)+"<br>");
12: document.write(a+"-"+b+"="+(a-b)+"<br>");
13: document.write(a+"/"+b+"="+(a/b));
14: </script>
15: </body>
16: </html>
In lines 10 - 13 the quotation marks around the + sign transforms it to a character, namely "+". While the + sign without quotation marks around it leaves it as the usual addition operator.