alert(message);
where message is any string. For instance, the program
1: <html>
2: <head>
3: <title>js5_0</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <h4><center>Illustrating the use of the alert dialog box</center>
7: <script language=javascript>
8:
9: alert("Watch your step.");
10:
11: </script>
12: <h4>
13: </body>
14: </html>
when executed produces the display
The next program again illustrates the use the alert dialog box:
1: <html>
2: <head>
3: <title>js5</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <h4><center>Illustrating the use of the alert dialog box</center>
7: <script language=javascript>
8: document.write("<h4>");
9:
10: alert("Watch out for the bears!");
11: document.write("Have a good trip.");
12:
13: document.write("</h4>");
14: </script>
15: </h4>
16: </body>
17: </html>
We have here used document.write() and the alert dialog box to write to the web page. The reader might try substituting
alert("Have a good trip.");
for line 11 in the above program.
The alert dialog box also allows for arithmetical calculations as illustrated by the next program.
1: <html>
2: <head>
3: <title>js5b</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <h4><center>Illustrating the use of the alert dialog box for arithmetical use</center>
7: <script language=javascript>
8:
9: var a=7, b=9;
10: alert(a+"+"+b+"="+(a+b));
11: alert(a+"*"+b+"="+(a*b));
12: alert(a+"-"+b+"="+(a-b));
13: alert(a+"/"+b+"="+(a/b));
14:
15: </script>
16: </h4>
17: </body>
18: </html>
Compare the notation of lines 10 - 13 with those of lines 10 - 13 of program js4c in the previous part.
We next discuss the confirm dialog box whose code is:
confirm(message);
where message is any string. For instance,
1: <html>
2: <head>
3: <title>js6_0</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <h4><center>Illustrating the use of the confirm dialog box</center></h4>
7: <script language=javascript>
8:
9: confirm("Are you leaving?");
10:
11: </script>
12: </body>
13: </html>
produces the following display on the screen
Any other message can be entered into the confirm code in line 9. If the user clicks on the OK button then the confirm dialog box returns the value of true or yes, and if the user clicks on the Cancel button then the confirm dialog box returns the value false or no. We use this return value in the next program where we also introduce the "if" and "if-else" control.
An "if" structure
if(condition1)
action1;
works as follows. If the condition1 is true then the action1 is executed. If the condition1 is not true then the action1 is not executed. If several actions are to be executed if condition1 is true then we write:
if(condition1)
{
action1;
action2;
action3;
.....
}
Different alternatives can be allowed in an "if" structure by writing:
if(condition1)
{
action1;
action2;
}
else if(condition2)
{
action3;
action4;
....
}
else
{
action20;
action21;
}
We assume that the two conditions are mutually exclusive. If condition1 is true then the first block of actions is executed. If condition2 is true then the second block of actions is executed. If neither conditions is true then the third block of actions is executed. This structure can be generalized to allow for several mutually exlusive conditions with their corresponding blocks of actions. We use the "if" structure together with the confirm dialog box in the next program.
1: <html>
2: <head>
3: <title>js7a</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <h4>
7: <center>Illustrating the use of the confirm dialog box and its return value</center>
8: </h4>
9:
10: <script language=javascript>
11: document.write("<h4>");
12:
13: var answer=confirm("Are you leaving?");
14:
15: if(answer==true)
16: document.write("Have a good trip.");
17:
18: document.write("</h4>");
19: </script>
20: </body>
21: </html>
Line 13 prints the confirm dialog box on the screen. If the user clicks on OK then the value true is assigned to answer. Line 15 tests the value of answer and if the condition inside the parenthesis is true then the command in line 16 is executed. If the user clicks on Cancel, which returns false and assigns that value to answer then the condition in line 15 is not satisfied and line 16 is not executed.
Suppose we wish to take a different action depending on the user's reply. Then we use a "if-else" structure as illustrated in the next program. Please note that the == sign in line 13 below signifies equality. A single equality sign = is used when assigning values.
1: <html>
2: <head>
3: <title>js7b</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <h4><center>Illustrating the use of the confirm dialog box and its return value</center></h4>
7:
8: <script language=javascript>
9: document.write("<h4>");
10:
11: var answer=confirm("Are you leaving?");
12:
13: if(answer==true)
14: document.write("Have a good trip.");
15: else
16: document.write("I'm glad you are staying.");
17:
18: document.write("</h4>");
19: </script>
20: </body>
21: </html>
In line 11 the variable "answer" is declared, and is assigned the return value of confirm, which is either true or false. In line 13 the value of the answer is compared to true using the double equality sign (==). If the expression inside the parenthesis is true, namely that the value of "answer" is true then line 14 is enacted. If however the value of "answer" is false then line 16 is executed. That is the signifigance of the "else".
We next introduce the prompt dialog box and make extensive use of it in the next part. It allows the web page to send the user a message and in turn the user can return a message that can be used by the web page. Its code is:
prompt(outgoing message, default);
The outgoing message is any message we choose. And the default value is any value but its inclusion is optional. In our case we write
var name=prompt("What is your name?", "Phil");
Here we first declare the variable "name" and then assign it the return value of the prompt dialog box. The above command produces a prompt dialog box and an area for the input of the user and has a default value of "Phil" if nothing is entered into its input area.
In the following program the prompt dialog box is used to request a name from the user which is then echoed on the screen.
1: <html>
2: <head>
3: <title>js8b</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <h4><center>The prompt dialog box I</center></h4>
7: <script language=javascript>
8: document.write("<h4>");
9:
10: var name=prompt("What is your name?", "Phil");
11:
12: document.write("Hello " + name);
13:
14: document.write("<h4>");
15: </script>
16: </body>
17: </html>
In the above program the variable "name" is declared in line 10 and is then assigned the value entered in response to the prompt dialog box. This value is then echoed by line 12.
We next use the prompt dialog box to request an integer from the user and then echoing it. We use 0 as the default value.
1: <html>
2: <head>
3: <title>js9b</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <h4><center>The prompt dialog box II</center></h4>
7: <script language=javascript>
8:
9: document.write("<h4>");
10:
11: var value=prompt("Enter a integer:", 0);
12:
13: document.write("You entered " + value);
14:
15: document.write("</h4>");
16: </script>
17: </body>
18: </html>
In the above program the variable "value" is declared in line 11 and is then assigned the value entered in response to the prompt dialog box. This value is then echoed by line 13.