1. The person located in New York State.
2. The person is located in New York City.
3. The person is located in Manhattan.
4. The person is located at 445 West 59" Street.
5. The person is located on the fourth floor.
6. The person is located in room 4215.
We write this as
ny.nyc.manhattan.455w59st.4thfloor.4215
where we have used the period (.) to indicate "belongs to" or "is contained in". Using the same idea for the form snippet:
<form name=jack>
<input type=text name=first value="" size=20>
<input type=text name=second value="" size=20>
<input type=text name=answer value="" size=20>
</form>
We can access the value of the text data field "first" in the form called "jack" which is in our document by writing
document.jack.first.value
Likewise for the value of the text data field "second" we write:
document.jack.second.value
and for the value of the text data field "answer" we write
document.jack.answer.value
The value of a text data field can be accessed and assigned to a variable b by writing
var b=document.jack.first.value;
We can also assign values to a text data field, i.e.
document.jack.first.value=7;
assigns 7 to the data field "first". We can also assign the value of one data field to another:
document.jack.first.value=document.jack.second.value;
where we have assigned the value of the "second" data text field to the "first" text data field. We use the function eval() to convert the number in the text data field from a string format to a numerical format:
var b=eval( document.jack.first.value );
Naturally, if the name of the form is "sally" then obvious changes need to be made.
The values in the text data fields "first" and "second" can be added and assigned to a text data field called "answer" by the command
document.jack.answer.value=
eval(document.jack.first.value)+eval(document.jack.second.value);
The assignment of values is not restricted to numerical values, but is also valid for text. For instance,
document.jack.mark.value="correct";
will place the word correct into the text data field "mark" which is in the form called jack which is in our document.
In the subsequent programs we use an auxiliary form named label to print column headings for the form jack. There are several ways we can write column headings for the form jack but we use this method for its ease and consistency with respect to browsers.
We use the above ideas in the following program whereby the user enters a simple arithmetical expression such as 7+2, 5-8, 9*7.2, and 3.1/4.5, and then by clicking on the calculate button generate the answer and print it in the "answer" text data box.
1: <html>
2: <head>
3: <title>cal1</title>
4: <script language=javascript>
5: function calculate()
6: {
7: document.jack.answer.value=eval(document.jack.problem.value);
8: }
9:
10: </script>
11: </head>
12: <body bgcolor=yellow text=black>
13: <h3><center>Enter arithmetical problem and then click on calculate to find answer.</center></h3><p>
14:
15: <form name=label>
16: <input type=text size=15 name=label1 value="problem">
17: <input type=text size=15 name=label2 value="answer"><p>
18: </form>
19:
20: <form name=jack>
21: <input type=text size=15 name=problem >
22: <input type=text size=15 name=answer ><p>
23:
24: <input type=button name=c value="Calculate" onClick="calculate()">
25: <input type=reset name=d value=reset>
26:
27: </form>
28: </h4>
29: </body>
30: </html>
Please note the inclusion of the form label given by the lines 15-18 which provide the column headings for the form jack.
The user enters a mathematical expression in the "problem" text data box. Then by clicking on the "Calculate" button calls the function calculate(). The right side of line 7 accesses the expression from the "problem" text data box, evaluates it, and then assigns it to the "answer" text data box.
In the next program we ask the user to click on the "fill" button which calls the "fill1()" function. It assigns the expression 4+"*"+3 to the "problem" text data box. Then the user, by clicking on the "calculate" button, calls the calculate() function which accesses the expression in the "problem" text data box, evaluates it, and then assigns it to the "answer" text data box.
1: <html>
2: <head>
3: <title>cal2</title>
4: <script language=javascript>
5:
6: function fill1()
7: {
8: document.jack.problem.value=4+"*"+3;
9: }
10:
11: function calculate()
12: {
13: document.jack.answer.value=eval(document.jack.problem.value);
14: }
15:
16: </script>
17: </head>
18: <body bgcolor=yellow text=black>
19: <h3><center>Click on fill to enter problem and then click on calculate to find answer.</center><p>
20:
21: <form name=label>
22: <input type=text size=15 name=label1 value="problem">
23: <input type=text size=15 name=label2 value="answer"><p>
24: </form>
25:
26: <form name=jack>
27:
28: <input type=text size=15 name=problem>
29: <input type=text size=15 name=answer><p>
30:
31: <input type=button name=fill value=Fill onClick="fill1()">
32: <input type=button name=c value=Calculate onClick="calculate()">
33: <input type=reset name=d value=reset>
34:
35: </form>
36: </h4>
37: </body>
38: </html>
Lines 31 and 32 create the "fill" and "calculate" buttons. Line 8 assigns the expression 4+"*"+3 to the "problem" text data box. Line 13 accesses that expression, evaluates it, and assigns the value to the "answer" text data box.
We digress to introduce the function Math.random(); that generates random numbers which will be necessary in later work. The next program generates ten numbers in decimal format lying between 0 and 1.
1: <html>
2: <head>
3: <title>js16d</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <h4><center>Generating ten random decimal numbers lying between 0 and 1.</center></h4>
7: <script language=javascript>
8: document.write("<h4>");
9:
10: for(var i=1; i<=10; i++)
11: {
12: document.write(Math.random()+"<br>");
13: }
14:
15: </script>
16:
17: </body>
18: </html>
In line 12 the Math.random() function generates random decimal numbers between 0 and 1.
We next show how to generate numbers in decimal format lying between 1 and 51. Since Math.random(); generates decimal numbers between 0 and 1, then Math.random()*50 will generate numbers between 0 and 50. But then Math.random()*50+1 will generate decimal numbers between 1 and 51. We use this last expression in the following program.
1: <html>
2: <head>
3: <title>js16e</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <h4><center>
7: Generating ten decimal numbers lying between 1 and 51
8: </center></h4>
9: <script language=javascript>
10: document.write("<h4>");
11:
12: for(var i=1; i<=10; i++)
13: {
14: document.write(Math.random()*50+1 + "<br>");
15: }
16:
17: </script>
18: </body>
19: </html>
We now take the previous program one step further. The function Math.floor(any number) returns the largest integer contained in the variable any number. For example:
| Math.floor(5) | -> | 5 |
| Math.floor(5.1) | -> | 5 |
| Math.floor(5.5) | -> | 5 |
| Math.floor(5.999) | -> | 5 |
So that the expression
Math.floor( Math.random()*50+1 )
will generate integers from 1 to 50 inclusive. We use this fact in the next program to generate ten integers lying between 1 and 50. See line 12 in the next program.
1: <html>
2: <head>
3: <title>js16f</title>
4: </head>
5: <body bgcolor=yellow text=black>
6: <h4><center>Generating ten random integers lying between 1 and 50.</center></h4>
7: <script language=javascript>
8: document.write("<h4>");
9:
10: for(var i=1; i<=10; i++)
11: {
12: document.write( (Math.floor( Math.random()*50+1 ) ) );
13: document.write("<br>");
14: }
15:
16: document.write("</h4>");
17: </script>
18: </body>
19: </html>
We can also assign a random integer to a text data field by writing
document.jack.first.value=Math.floor( Math.random()*50+1) );
Using this fact in the next program we can assign random integers to the text data field "first" when the user clicks on the fill button.
1: <html>
2: <head>
3: <title>js16r</title>
4: <script language=javascript>
5:
6: function fill()
7: {
8: document.jack.first.value=Math.floor( Math.random()*50+1 );
9: }
10:
11: </script>
12:
13: </head>
14: <body bgcolor=yellow text=black>
15: <h4><center>Click on the fill button to enter random integer values into the text data field.</center></h4>
16: <form name=jack>
17:
18: <input type=text value=0 size=10 name=first>
19:
20: <br><br><br>
21:
22: <input type=reset value=reset>
23: <input type=button size=10 value=fill onClick="fill()">
24: </form>
25: </h4>
26:
27: </body>
28: </html>
Line 23 creates the "fill" button, which when clicked, calls the "fill1()" function. Then the right side of line 8 generates the random integer which is then assigned to the "first" text data box.
In the next program we generate two random integers, a and b with which we construct the expression a+"+"+b which is then evaluated. All this is done by clicking appropriate buttons.
1: <html>
2: <head>
3: <title>cal3</title>
4: <script language=javascript>
5: var a, b;
6:
7: function fill1()
8: {
9: a=Math.floor(Math.random()*50+1);
10: b=Math.floor(Math.random()*50+1);
11:
12: document.jack.problem.value=a+"+"+b;
13:
14: document.jack.answer.value="";
15: }
16:
17: function cal()
18: {
19: document.jack.answer.value=eval(document.jack.problem.value);
20: }
21:
22: </script>
23: </head>
24: <body bgcolor=yellow text=black>
25: <h3><center>
26: Click on fill to enter arithmetical problem and then click on calculate to find the sum.
27: </center><p>
28:
29: <form name=label>
30: <input type=text size=15 name=label1 value="Problem">
31: <input type=text size=15 name=label2 value="Answer"><p>
32: </form>
33:
34: <form name=jack>
35: <input type=text size=15 name=problem>
36: <input type=text size=15 name=answer><p>
37:
38: <input type=button name=fill value=fill onClick="fill1()">
39: <input type=button name=c value=calculate onClick="cal()">
40:
41: <input type=reset name=d value=reset>
42: </form>
43: </h4>
44: </body>
45: </html>
Line 38 creates the "fill" button which when clicked calls the "fill1()" function. Lines 9 and 10 generate two random integers a and b and then line 12 assigns the expression a+"+"+b to the "problem" text data box. Line 14 erases any previous entry in the "answer" text data box. Then clicking the "calculate" button created in line 39 calls the "calculate()" function which by line 19 evaluates the expression in the "problem" text data box and assigns it to the "answer" text data box.