Lab 5: Introduction to Programming
FIT 100, Winter 2005

Key Words: user, interation, user input, input, output, graphical user interface, GUI, Javascript, interpret, statement, invoke, execute, script, Javascript comments(/* ... */ and //), alert(), argument, ;.
 
See Wikipedia (http://www.wikipedia.org/) for a detailed description of the key words.

Preparation

You are required to have completed the objectives in Lab 3 before doing this lab.

Objectives

For this lab, you will gain some programming skills by adding Javascript code to HTML documents. Keep a record of the amount of time you have spent on every lab in hh:mm. This will also be submitted. We want this information for statistical purposes.

Remember to use the online resources! When you encounter a new HTML element, look at W3Schools XHTML tutorial and W3C's XHTML and HTML recommendations. When you encounter a Javascript function or want to find what you can do with an HTML element in you Javascript code, look at W3Schools Javascript tutorial and W3Schools DHTML/DOM (Dynamic HTML/Document Object Model) tutorial. You do not need to understand everything in their tutorials, but you should at least know where to find help.

Some Programming Terminology

To ensure that you understand the terminology used in this lab, a few key words will be defined in this section.

The goal of programming is to:

Javascript is a programming language that many web browsers can understand, or interpret. A Javascript program is a list of commands or statements that the browser runs (invokes or executes) to add features to an HTML document.

Executing Javascript

The following happens when a web browser reads an HTML document that contains Javascript:

Create a Simple HTML Document containing Javascript

In this section, you will use Javascript to generate some HTML content.

  1. Create an Initial Page.
    Using Notepad, type in the following program, which was shown in the lecture. 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 language="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.
  2. Revise the Program of Step 1.
    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:
    <html>
    <head>
    <title>My Test Page</title>
    </head>
    <body>
    The sum of 2.0 + 2.0 is
    <script language="JavaScript">
    document.write(2.0 + 2.0);
    </script>
    </body>
    </html>

  3. Edit the Program of Step 2.

    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.

    <html>
    <head>
    <title>My Test Page</title>
    </head>
    <body>
    The sum of 2.0 + 2.0 is
    <script language="JavaScript">
    var anumber = 2.0, another, answer;
    another = 2.0;
    answer = anumber + another;
    document.write(answer);
    </script>
    </body>
    </html>

    first pic

  4. Understanding the Difference between the HTML Text and the JavaScript Computation.

    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.

  5. Revising the Text and Computation
  6. Girl Scout Cookies!

    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.

HTML References

http://www.w3.org

http://www.webmonkey.com