Using Notepad or NotePad2, type in the following program, which was shown in the lecture. As you enter the HTML and JavaScript, notice which parts are HTML and which are JavaScript.
<?xml version="1.0" encoding="utf-8"?>Save and run the program, and notice that the browser is not finished loading when it stops to print out the alert() message.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<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>
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 revision was also shown in class. The text should be:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<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 from lecture 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.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<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 a mint background (#CCFFCC) and chocolate text (#990000). The text should read, “The price of 1,000 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.
- Use your knowledge of HTML to give the page a bit of style.
- The result will look something like:
- Do not forget to VALIDATE your code as valid XHTML 1.0 Transitional when you've completed your lab. To do so, reference and follow the directions from Lab04 (http://www.cs.washington.edu/education/courses/100/08wi/labs/lab04.html#validate).
- For 2 points extra credit, include a dollar sign ($) before the total using
document.write(). - Create a folder inside your
fit100directory calledlab06. Save you work in thelab06folder as lab06.html. It should be viewable by your TA from this address after you replace yourUWnetID with your own UW NetID:
http://www.students.washington.edu/yourUWnetID/fit100/lab06/lab06.html
