1: <html>
2: <head>
3: <title>js10</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <script language=javascript>
7: document.write("<h4>");
8:
9: var first=prompt("Enter the first integer:", 0);
10:
11: var second=prompt("Enter the second integer:", 0);
12:
13: document.write("You entered " + first + " and " + second);
14:
15: document.write("</h4>");
16: </script>
17: </body>
18: </html>
In the above program the variables "first" and "second" are declared in line 9 and 11 respectively, and are then assigned the values entered in response to the prompt dialog box. These values are then echoed by line 13.
In the next program we illustrate simple arithmetical operations on two given integers. We use + for addition, * for multiplication, - for subtraction, and / for division.
1: <html>
2: <head>
3: <title>js10b</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <script language=javascript>
7: document.write("<h4>");
8:
9: var number1=5, number2=7;
10: document.write("The numbers are " + number1 + " and " + number2+"<br>");
11: document.write("Their sum is: " + (number1+number2) +"<br>");
12: document.write("Their product is: " + (number1*number2)+"<br>" );
13: document.write("Their difference is: " + (number1-number2)+"<br>" );
14: document.write("Their quotient is: " + (number1/number2) );
15:
16: document.write("</h4>");
17: </script>
18: </body>
19: </html>
Two variables, "number1" and "number2", are declared in line 9 and are assigned values of 5 and 7 respectively. These numbers, and their sum, product, difference, and quotient are then written to the screen with appropriate messages by lines 10-14.
The next program requests the user to enter two integers and then the displays their sum. But unfortunately the wrong answer is obtained. This because the numbers are treated as strings and strings are "added" or concatanated by the + sign by appending the second string to the first. We show how to correct this in the following program.
1: <html>
2: <head>
3: <title>js11a</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <script language=javascript>
7: document.write("<h4>");
8:
9: var first=prompt("Enter the first integer:", 0);
10: var second=prompt("Enter the second integer:", 0);
11: document.write("You entered " + first + " and " + second +"<br>");
12: document.write("Their sum is " + (first+second) );
13:
14: document.write("</h4>");
15: </script>
16: </body>
17: </html>
The result of the last program is corrected by using the eval() function to convert numbers from string format to numerical format.
1: <html>
2: <head>
3: <title>js11b</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <script language=javascript>
7: document.write("<h4>");
8:
9: var first=prompt("Enter the first integer:", 0);
10: var second=prompt("Enter the second integer:", 0);
11: document.write("You entered " + first + " and " + second +"<br>");
12: document.write("Their sum is " + ( eval(first) + eval(second) ) );
13:
14: document.write("</h4>");
15: </script>
16: </body>
17: </html>
Please note the use of the eval() function in line 12. The next program extends the previous one.
1: <html>
2: <head>
3: <title>js12</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <script language=javascript>
7: document.write("<h4>");
8:
9: var first=prompt("enter the first integer:", 0);
10:
11: var second=prompt("enter the second integer:", 0);
12:
13: document.write("you entered " + first + " and " + second);
14: document.write("<br>");
15:
16: document.write("their sum is " + ( eval(first) + eval(second) ) );
17: document.write("<br>");
18:
19: document.write("their product is " + ( eval(first) * eval(second) ) );
20: document.write("<br>");
21:
22: document.write("their difference is " + ( eval(first) - eval(second) ) );
23:
24: document.write("</h4>");
25: </script>
26: </body>
27: </html>
Lines 9 and 10 ask the user to enter two integers and then echoes the numbers and writes their sum, product, and difference to the screen. Division is omitted in case the user entered a zero for the second integer, since division by zero is not allowed. The next program tests the users arithmetical skill.
1: <html>
2: <head>
3: <title>js12b</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <script language=javascript>
7: document.write("<h4>");
8:
9: var first=7, second=17;
10: var sum=first+second;
11: var answer=prompt("What is the sum of "+first+" and "+17+" ?", 0);
12: if(answer==sum)
13: document.write("Correct");
14: else
15: document.write("Incorrect");
16:
17: document.write("</h4>");
18: </script>
19: </body>
20: </html>
In this program two integers, "first" and "second", are declared and given values in line 9. And in line 11 the variable "sum" is declared and assigned the sum of the two integers. The user is then asked in line 11, using a prompt dialog box, to enter the sum of the two given integers. The proposed answer is then assigned to the variable "answer" which is then compared to the actual answer "sum" in line 12. Using a "if-else" descision proceedure the answer is then checked as to its correctness and the user is informed of the result by printing the appropriate result by either line 13 or line 15.
The next program modifies the previous one by using the variable "m" to represent the message in the prompt function.
1: <html>
2: <head>
3: <title>js12c</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <script language=javascript>
7: document.write("<h4>");
8:
9: var first=7, second=17;
10: var sum=first+second;
11: var m="What is the sum of " + first + " and " +second + "?" ;
12: var answer=prompt(m, 0);
13: if(answer==sum)
14: document.write("Correct");
15: else
16: document.write("Incorrect");
17:
18: document.write("</h4>");
19: </script>
20: </body>
21: </html>
Line 9 declares first and second to be variables and assigns them the values of 7 and 17 respectively. Then line 10 finds the sum of a and b and assigns it to the variable sum. Line 11 declares m to be a variable and is assigned a string. m is then used in the prompt dialog box in line 12. The correctness of the sum entered in line 12 by the user is then checked by the "if-else" routine in lines 13-16. The appropriate response as to the correctness of the the user's answer is then printed to the screen.
A modification to the previous program prompts the user to enter two integers and then enter their sum which is then checked for its correctness.
1: <html>
2: <head>
3: <title>js12d</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <script language=javascript>
7: document.write("<h4>");
8:
9: var first=prompt("Enter the first integer", 0);
10: var second=prompt("Enter the second integer", 0);
11: var sum=eval(first)+eval(second);
12: var m="What is the sum of " + first + " and " +second + "?" ;
13: var answer=prompt(m, 0);
14:
15: if(answer==sum)
16: document.write("Correct");
17: else
18: document.write("Incorrect");
19:
20: document.write("</h4>");
21: </script>
22: </body>
23: </html>
Lines 9 and 10 ask the user to enter two integers and assigns them to the variables first and second respectively. Line 11 calculates their sum using the eval() function. This is necessary to convert them to numerical quantities. Line 13 asks the user to enter the proposed answer which is then assigned to the variable answer. This quantity is then compared with the actual solution in line 15. If the user's answer is correct then line 16 prints "Correct" to the page, otherwise line 18 prints "Incorrect" to the page.
We make the previous program user friendly so that if the proffered answer is incorrect then the correct answer is given to the user.
1: <html>
2: <head>
3: <title>js12e</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <script language=javascript>
7: document.write("<h4>");
8:
9: var first=prompt("Enter the first integer", 0);
10: var second=prompt("Enter the second integer", 0);
11: var sum=eval(first)+eval(second);
12: var m="What is the sum of " + first + " and " +second + "?" ;
13: var answer=prompt(m, 0);
14: if(answer==sum)
15: document.write("Correct");
16: else
17: document.write("Incorrect. The correct answer is " + sum );
18:
19: document.write("</h4>");
20: </script>
21: </body>
22: </html>
The only modification made to the previous program is in line 17 which in addition to printing "Incorrect" also prints the sum given by the variable sum.
If the user wants to run the previous program several times then he/she could reload the program for each try. Or if the user knows how often he/she wants to run the program then a "for loop" can be introduced for that purpose as in the following program.
1: <html>
2: <head>
3: <title>js12f</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <script language=javascript>
7: document.write("<h4>");
8: for(var i=1; i<=5; i++)
9: {
10: var first=prompt("Enter the first integer", 0);
11: var second=prompt("Enter the second integer", 0);
12: var sum=eval(first)+eval(second);
13: var m="What is the sum of " + first + " and " +second + "?" ;
14: var answer=prompt(m, 0);
15: if(answer==sum)
16: alert("Correct");
17: else
18: alert("Incorrect. The correct answer is " + sum );
19: }
20: document.write("</h4>");
21: </script>
22: </body>
23: </html>
The "for loop" runs from line 8 to line 19. The block of commands that is repeated is contained between the braces of lines 9 and 19.
But suppose we want to allow the user to decide, while the program is running, whether to run the program again. For this purpose we introduce the "while loop". The "while loop" will allow the execution of a block of statements as long as a certain condition is satisfied. We illustrate this in the following program. Here the condition for the "while loop" is choice==true. As long as the user clicks the OK button in the confirm dialog box thereby assigning the value of true to the variable choice the program continues to run. The "while loop" terminates when the user clicks the Cancel button. We illustrate this with the simple following program:
1: <html>
2: <head>
3: <title>js12g_0</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <script language=javascript>
7: document.write("<h4>");
8:
9: var choice=confirm("Do you wish to start");
10: while(choice==true)
11: {
12: document.write("JavaScript is great."+"<br>");
13: choice=confirm("Do you wish to continue?");
14: }
15:
16: document.write("</h4>");
17: </script>
18: </body>
19: </html>
The "while loop" (line 10) will execute the commands inside the braces (lines 11 - 14) as long as the condition in line 10, choice==true, is true. Please note that we use the double equality sign. If the user responds to line 9 by clicking OK, then choice is assigned the value true, the condition in line 10 is satisfied, and the block of lines 12 - 13 is executed. If the user responds to the prompt in line 13 by clicking on OK then the condition of the "while loop" in line 10 is satisfied and lines 12 - 13 are again executed. This continues until the user clicks on cancel which assigns a value of "false" to choice. Then the condition in line 10 is not satisfied and the "while loop" is terminated.
We introduce a counter into the above program for counting the number of times the "while loop" is executed. This will be usefull to us in subsequent work.
1: <html>
2: <head>
3: <title>js12g_1</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <script language=javascript>
7: document.write("<h4>");
8:
9: var count=0;
10: var choice=confirm("Do you wish to start");
11:
12: while(choice==true)
13: {
14: count++;
15: document.write("JavaScript is great."+"<br>");
16: choice=confirm("Do you wish to continue?");
17: }
18:
19: document.write("You printed "+count+" times.");
20:
21: document.write("</h4>");
22: </script>
23: </body>
24: </html>
Line 9 declares count to be a variable and sets it equal to zero. Then every time the while loop is executed, count is incremented by one. When the "while loop" has terminated the value of count equals the number of times the "while loop" has run its final value is printed to the web page by line 19.
The above idea is implemented in the next two programs.
1: <html>
2: <head>
3: <title>js12g</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <script language=javascript>
7: document.write("<h4>");
8:
9: var choice=confirm("Do you wish to start");
10:
11: while(choice==true)
12: {
13: var first=prompt("Enter the first integer", 0);
14: var second=prompt("Enter the second integer", 0);
15: var sum=eval(first)+eval(second);
16: var m="What is the sum of " + first + " and " +second + "?" ;
17: var answer=prompt(m, 0);
18: if(answer==sum)
19: choice=confirm("Correct. Continue?");
20: else
21: choice=confirm("Incorrect. Answer is " +sum+". continue?");
22: }
23:
24: document.write("</h4>");
25: </script>
26: </body>
27: </html>
The initial descision to execute the "while loop" is made by the user in response to line 9. If the user clicks on OK then the condition in line 11 is satisfied and the block of commands, lines 12 - 22, is executed. Each time after the user answers a problem, whether correctly or incorrectly, he/she is asked whether he/she wishes to continue (lines 19 and 21).If the response is OK then the block of the "while loop" is executed, otherwise the "while loop" is terminated.
The next program is a modification of the previous one by the introduction of a counter problem that counts how often a particular process was executed. Each time the "while loop" is executed the variable problem is incremented by one. When the user decides to end the program he/she clicks the Cancel button and then the alert dialog box prints out the final value of problem. The variable problem plays the same role in the next program as count played in the previous program (js12g_1).
1: <html>
2: <head>
3: <title>js12h</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <script language=javascript>
7: var problem=0;
8: document.write("<h4>");
9:
10: var choice=confirm("Do you wish to start");
11:
12: while(choice==true)
13: {
14: problem++;
15: var first=prompt("Enter the first integer", 0);
16: var second=prompt("Enter the second integer", 0);
17: var sum=eval(first)+eval(second);
18: var m="What is the sum of " + first + " and " +second + "?" ;
19: var answer=prompt(m, 0);
20:
21: if(answer==sum)
22: choice=confirm("Correct. Continue?");
23: else
24: choice=confirm("Incorrect. Answer is " +sum+". continue?");
25: }
26:
27: alert("You answered "+problem +" problems");
28:
29: document.write("</h4>");
30: </script>
31: </body>
32: </html>
Line 7 declares the variable problem and sets it equal to zero. Each time the "while loop" runs, the variable problem is incremented by line 14. At the end the final value of problem is printed by line 27.
The previous program, in addition to keeping a record as to the number of problems posed, can by the addition of a few lines, keep a record as to the number of problems correctly solved. The new variable introduced for this purpose is called correct.
1: <html>
2: <head>
3: <title>js12i</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <script language=javascript>
7: var problem=0, correct=0;
8: document.write("<h4>");
9:
10: var choice=confirm("Do you wish to start");
11:
12: while(choice==true)
13: {
14: problem++;
15: var first=prompt("Enter the first integer", 0);
16: var second=prompt("Enter the second integer", 0);
17: var sum=eval(first)+eval(second);
18: var m="What is the sum of " + first + " and " +second + "?" ;
19: var answer=prompt(m, 0);
20:
21: if(answer==sum)
22: {
23: choice=confirm("Correct. Continue?");
24:
correct++;
25: }
26: else
27: choice=confirm("Incorrect. Answer is " +sum+". Continue?");
28: }
29:
30: alert("You answered "+correct+" correct out of "+problem+" problems.");
31:
32: document.write("</h4>");
33: </script>
34: </body>
35: </html>
In line 7 the new variable correct is declared and set to zero. Then each time the problem is answered correctly, lines 23 and 24 are executed, and correct is incremented in line 24. Finally, the number of problems and the number of problems answered correctly is printed by line 30.
We now illustrate how the prompt dialog box can be used in a general knowledge quiz.
1: <html>
2: <head>
3: <title>js12l</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <script language=javascript>
7:
8: var mark, correct=0;
9: var ans=prompt("Q1: In what year did Columbus discover America?");
10:
11: if(ans=="1492")
12: {
13: mark="Correct. ";
14: correct++;
15: }
16: else
17: mark="Incorrect. The correct answer is 1492. ";
18:
19: ans=prompt(mark+"Q2: Who was the first president of the U.S.A.?");
20:
21: if(ans.toUpperCase()=="Washington".toUpperCase())
22: {
23: mark="Correct. ";
24: correct++;
25: }
26: else
27: {
28: mark="Incorrect. The correct answer is Washington. ";
29: }
30:
31: ans=prompt(mark+"Q3: What is the country immediately north of the U.S.A.?");
32:
33: if(ans.toUpperCase()=="Canada".toUpperCase())
34: {
35: mark="Correct. ";
36: correct++;
37: }
38: else
39: {
40: mark="Incorrect. The correct answer is Canada. ";
41: }
42:
43: ans=prompt(mark+"Q4: What is the region at the south pole called ?");
44:
45: if(ans.toUpperCase()=="antartica".toUpperCase())
46: {
47: mark="correct. ";
48: correct++;
49: }
50: else
51: {
52: mark="Incorrect. The correct answer is Antartica. ";
53: }
54:
55: ans=prompt(mark+"Q5: The 3-4-5 triangle is associated with what Greek mathematician?");
56:
57: if(ans.toUpperCase()=="pythagores".toUpperCase())
58: {
59: mark="Correct. ";
60: correct++;
61: }
62: else
63: {
64: mark="Incorrect. The correct answer is Pythagores. ";
65: }
66:
67: ans=prompt(mark+"Q6: How many strings does a violin have?");
68:
69: if(ans=="4" || "four".toUpperCase()==ans.toUpperCase())
70: {
71: mark="Correct. ";
72: correct++;
73: }
74: else
75: {
76: mark="Incorrect. The correct answer is 4. ";
77: }
78:
79: alert(mark + "You answered "+correct+" questions correctly");
80:
81: </script>
82: </body>
83: </html>
Click to see run of program