Using Notepad, type in the following program. As you enter the HTML/JS, notice which parts are HTML and which are JavaScript.
<html> <head> <title>My Test Page</title> </head> <body> The sum of 2.0 + 2.0 is <script type="text/javascript"> alert(2.0 + 2.0); </script> </body> </html>Save and run the program, and notice that the browser is not finished loading when it stops to print out the alert() message.
Change the alert() command of the above program to a document.write(), an operation that inserts into the source file the result of executing (running) the computation of its argument (the stuff inside the parentheses). This example was shown in lecture. The text should be:
<html> <head> <title>My Test Page</title> </head> <body> The sum of 2.0 + 2.0 is <script type="text/javascript"> document.write(2.0 + 2.0); </script> </body> </html>
- Run the program and notice that the browser completes loading the image this time because it completes the task of computing 2.0 + 2.0 and puts the result into the source file.
- Check the source file and notice that it is the same file you typed in. That is, the addition of the “4” is internal to the Browser’s operation, and so you do not see it.
The third program of importance uses declarations to create variables. The variables were anumber, another, and answer. They illustrate that we can name the numbers that we work with when we perform a computation. Add the declaration line
var anumber=2.0, another, answer;
to the program of Step 2. They should appear right after the JavaScript tag.
Add an assignment statement to initialize the value of another to 2.0. The assignment statement is
another = 2.0;
Add an assignment to compute the answer, that is,
answer = anumber + another;
Finally, revise the document.write() operation so that it simply writes out the answer. That is, it becomes
document.write(answer);
The resulting program looks as follows.
<html> <head> <title>My Test Page</title> </head> <body> The sum of 2.0 + 2.0 is <script type="text/javascript"> var anumber = 2.0, another, answer; another = 2.0; answer = anumber + another; document.write(answer); </script> </body> </html>
The text says “The sum of 2.0 + 2.0 is” and then the JavaScript supplies the answer. But, the right answer is produced only because we have set things up correctly. We will emphasize this by making changes that will produce the incorrect answer.
- Edit the text so that it reads “The sum of 2.0 and 3.0 is”.
- Save and reload the page and get
- The result is wrong because the text changed, but the computation that supplies the answer has not changed.
- Edit the HTML text so that it reads “The product of 2.0 * 3.0 is”
- Change the computation so that the assignment to the variable another changes from 2.0 to 3.0.
- Change the assignment to answer so that it multiplies the two numbers
together, that is, the statement is
answer = anumber * another;
- Save the result and run it, verifying that everything is OK.
Now put all of the knowledge together to produce a new page. The page will compute the cost of 1000 boxes of Thin Mint Girl Scout Cookies at $3.50 per box.
- Begin by creating the HTML page. The page should have the title “Girl Scout Cookies”, the heading “Thin Mints” and it should have brown background and lime text. The text should read, “The price of 1000 boxes of Thin Mints is ”.
- Set up the JavaScript to compute the solution. Declare three variables using the var declaration: numboxes, price, answer.
- Initialize price in the declaration to be 3.50.
- Write an assignment statement that sets the variable numboxes to the value 1000.
- Write an assignment statement that computes the answer by multiplying numboxes times price.
- Using a document.write() command, display the answer.
- Show the result to your TA.
The result will be
