IT130 -- Final Exam
                           March 9, 2009
                            
1. (10  points) Explain, to someone that does not understand 
   programming, how static web pages differ from dynamic web pages.  
   What sorts of dynamic effects are possible on web pages?  
   How does JavaScript make them possible?

   Ans: Whereas static web pages, that use only HTML and CSS do not
        change their content (until they are edited), pages that include
        JavaScript can change their content, based on user input,
        random number generators, or time of day clock.  Such new 
        content can include the results of calculations or post new 
        images to replace default images on a page,

2. (5 points) What are source code comments and why are they used?  
   How are they designated in HTML, CSS, and JavaScript?

   Ans: Source code comments are used to explain how a page works or
        any special features on a page to persons reading the source
        code.  Here are three classs of comments commonly used:
        <!-- HTML comment. -->
        /* CSS comment, also used for JavaScript. */
        // JavaScript comment (goes until end of line).

3. (10 points) What are some common mistakes to watch out for in 
   completing projects involving JavaScript like Projects 4, 5, and 6?

   Ans: 1. Misspelling variable names, including capitalization.
        2. HTML tag name or ID doesn't match the variable name.
        3. Function name in head does not match function name in
               onclick statement.
        4. Missing end ;, }, , or > symbols.
        5. Missing end style or script tags.
        6. Variables not initialized correctly.
        7. Using = instead of == or vice versa.
        8. Radio button subscripts out of range. 
        9. Image file or target or hyperlink in wrong location.
       10. Double version problem: editing one file and testing
               another.
        
4. (2 points each) Explain what these items mean. You can use 
   an example in your explanation if you wish.

a. Assignment Operator in JavaScript.

   Ans: The symbol = for assigning a value to a variable. 
        Example: x = 5; assigns the value 5 to the variable x.

b. CSS Class

   Ans: A class is like a style, but it has a user-defined name 
        starting with a dot.  Use the style c like this:
        <span class=c>......</span>

c. CSS Property

   Ans: A property is an aspect or attribute of an HTML element that
        you wish to change with CSS.  Here is the CSS syntax:
        element { property:value }

d. External CSS Style

   Ans: Styles that are kept in a .css file separate from the actual
        HTML document.  The HTML document can use a link tag to
        specify that a certain external style is to be used.

e. Domain Name Service

   Ans: A service built into the Internet that obtains the IP address
        of a URL that a browser or other software submits.

f. Event Handler

   Ans: A function specified in an onclick or onload statement.  This
        function then executes when a button is clicked or the page 
        is loaded.

g. getElementById JavaScript Function
   Ans: A function that obtains a control, given its ID.  Define
        a control with ID like this:
        <input class=text id=txtInput size=25 />
        Then use that control like this:
        v = document.getElementById(txtInput).value;

h. Variable Initialization in JavaScript
   Ans: To declare a variable and set its value in one line:
        var x = 5;

5. (2 points each) What does each of these color codes represent?

a. rgb(0,255,255)    Ans: Cyan or aqua.
b. rgb(255,255,0)    Ans: Yellow.
c. rgb(130,0,0)      Ans: Maroon.
d. rgb(215,215,215)  Ans: Silver or light gray.
e. rgb(255,128,0)    Ans: Orange.

6. (5 points each) A web page randomly displays one of the images 
   1.jpg, 2.jpg, or 3.jpg when the page is loaded.  It randomly 
   changes the image when a button is clicked.

a. Write HTML code for a page that displays the image, the button 
   and a heading for the page.  You choose the names for the image, 
   the button, and the form.  Don’t forget the onclick attribute 
   for the button and the onload attribute for the body.   Ans:

   <html>
   <body onclidk=showRandomImage>
   <h1>Display Random Image</h1>
   <p><img name=imgRandom src=1.jpg /></p>
   <p><input class=button value=Show Random Image
             onclick=showRandomImage( ); />
   </body>
   </html>

b. Write an event handler for the button that randomly displays one 
   of the images 1.jpg, 2.jpg, or 3.jpg.

   function showRandomImage( )
   {
       var n = 1 + Math.floor(3 * Math.random( ));
       if (n == 1)
       {   
           document.images.imgRandom.src = 1.jpg;
       }
       else if (n == 2)
       {   
           document.images.imgRandom.src = 2.jpg;
       }
       else
       {   
           document.images.imgRandom.src = 3.jpg;
       }
   }

   or

   function showRandomImage( )
   {
       var n = 1 + Math.floor(3 * Math.random( ));
       document.images.imgRandom.src = n + .jpg;
   }

c. Write an external style that (i) sets the width of both the image 
   and the button to 1 inch, (ii) sets the font for the heading and 
   the button to bold Georgia, (iii) sets the background color of 
   the body to PaleTurquoise.

   img, input { width:1in; }
   h1, input  { font-family:Georgia; font-weight:bold; }
   body       { background-color:PaleTurquoise; }

7. (5 points each) Predict the output for each of these code fragments.  
   Explain briefly how you obtained your answer.

a. This JavaScript code is supposed to compute the real estate tax 
   for a house (in an unusual way).  What is the tax if the house 
   value is $528,193?

   var v, t;
   v = parseFloat(document.frmA.txtHouseValue.value);
   t = 100 * Math.floor(v / 1000);
   document.frmMain.txtTax.value = t;

   Ans: 52,810.  Here is how to obtain the answer:
        100 * Math.floor(v / 1000) ==
        100 * Math.floor(528193 / 1000) ==
        100 * Math.floor(528.193) ==
        100 * 528 == 52800

b. This JavaScript code is supposed to compute the tip for a 
   restaurant meal.  What is the tip for a $50.00 meal?

   var m, t;
   m = parseFloat(document.frmA.txtMealPrice.value);
   if (m >= 20.00)
   {
       t = m * 0.18;
   }
       else
   {
       t = m * 0.20;
   }
   document.frmMain.txtTip.value = t;

   Ans: Since the meal is more than $50.00, use the calculation
        t = m * 0.18 = 50.00 * 0.18 = 9.00. 
        The answer is 9 dollars. 

c. This JavaScript code Show the table that is produced.

   document.write(<table>);
   var n = 1;
   while (n <= 10)
   {
       m = n * n;
       document.write(<tr><td> + n + 
           </td><td> + m + </td></tr>);
       n = n + 1;
   }
   document.write(</table>);

   Ans: The code will enter a table tag, then 10 rows that include
        n, which ranges from 1 to 10 and m = n * n (n squared).
        The resulting table looks like this:
         1   1
         2   4
         3   9
         4  16
         5  25
         6  36
         7  49
         8  64
         9  81
        10 100

8. (5 points) Write HTML code using radio buttons that will 
   implement the following:  Enter your gender:   O Female O Male
   Configure the radio buttons so that only one of them can 
   be checked at a time.

   Ans:  <p>Enter your gender: &nbsp;
            <input class=radio name=radGender /> Female &nbsp;
            <input class=radio name=radGender /> Male</p>

9. (15 points) Find as many mistakes as you can:

   <htm>  

   <title text=Choose a Color />
   <style class=txt\css />
   body          [ font:Papyrus; 
                   fontsize:130%
                   text-color:Black;
                   bgcolor:Black; ]
   input, select [ font:Veranda
                font-bold:true; ]
   h3            [ fontsize: 130%; ]
   </style>
   <script class=txt\java  script />

   function show color meaning( )
   {
      var color = document.frmColor.ddmColor.value;
      var meaning;
      if (color == blue)
      {
           meaning = wisdom and sincerity;
      {
      else if (color = green)
      {
           meaning = freshness and growth;
      {
      else if (color = purple)
      {
           meaning = power and luxury;
      {
      else if (color = red)
      {
           meaning = courage and passion;
      {
      document.formColor.txt-meaning = 
           The color  + color *  represents  + 
               meaning + .;
   </head> 

   <body>
   <h2>Choose your favorite color:</h1>
   </body>  <-- Move to below just before </html>

   <form name=frmColor>
   <p><select name=ddmColor>
         <option value=blue>Blue</option>
         <option value=green>Green</option>
         <option value=purple>Purple</option>
         <option v=red>Red</option>

   <p><input class=button name=btnSelect 
             value=Click here for meaning of this color.
             style=font-family:Verdana;
                    font-weight:bold;
             onclick=showColorMeaning; />
          
   <p><input class=text name=txtMeaning
             style:font:Papyrus;
                    font-size:130%;
                    text-color:White;
                    bgcolor:Black;
                    border:none;
                    width:12in;>
                 
   </form
   <htm />

   Here are the corrections:

   <htm>  <-- Should be <html>
          <-- Missing <head>
   <title text=Choose a Color /> <-- Should be
                                     <title>Choose a Color</title.
   <style class=txt\css />         <-- Should be text/css>
   body          [ font:Papyrus;    <-- Should be font-family
   Use { and }-->  fontsize:130%    <-- Should be font-size
   not [ and ].    text-color:Black;<-- Should be color
                   bgcolor:Black; ] <-- Should be background-color
                                    <-- color and background-color
                                        can't both be black.
   input, select [ font:Veranda  <-- Should be font-family:Verdana
                   font-bold:true; ] <-- Should be font-weight:bold
   h3            [ fontsize: 130%; ] <-- Should be font-size
   </style>
   <script class=txt\java  script /> <-- Should be text/javascript

   function show color meaning( ) <-- Should be showColorMeaning
   {
      var color = document.frmColor.ddmColor.value;
      var meaning;
      if (color == blue)
      {
           meaning = wisdom and sincerity;
      {  <-- Brace is backwards
      else if (color = green) <-- Use == not =, need double quotes
      {                                         around green.
           meaning = freshness and growth;
      {  <-- Brace is backwards
      else if (color = purple)
      {<-- Brace is backwards
           meaning = power and luxury;
      {  <-- Brace is backwards
      else if (color = red)
      {
           meaning = courage and passion;
      {  <-- Brace is backwards
      document.formColor.txt-meaning =  <-- formColor should be frmColor
                                        <-- Should be txtMeaning
           The color  + color *  represents  + <-- * should be +
               meaning + .;
         <-- Missing closing brace.
   </head> 

   <body>
   <h2>Choose your favorite color:</h1>
   </body>

   <form name=frmColor>
   <p><select name=ddmColor>
         <option value=blue>Blue</option>
         <option value=green>Green</option>
         <option value=purple>Purple</option>
         <option v=red>Red</option> <-- Should be value=

   <p><input class=button name=btnSelect 
             value=Click here for meaning of this color.
             style=font-family:Verdana;
                    font-weight:bold;
             onclick=showColorMeaning; />
          
   <p><input class=text name=txtMeaning
             style:font:Papyrus;     <-- Should be font-family
                    font-size:130%;   
                    text-color:White; <-- Should be color
                    bgcolor:Black;    <-- Should be background-color
                    border:none;
                    width:12in;>
                 
</form    <-- Should be </form>
          <-- Move <body> to here.
<htm />   <-- Should be </html>