COSC 106 A, Web Programming Exam 3 Study Guide Answers
Tom Linton, Spring 2004

The exam will cover chapters 9,10, and 11 of our text. If you can do most of the following problems in a timely fashion, with little help from the book, you should be well prepared for the exam.

  1. Write the JavaScript fragments (just what is asked for, no surrounding tags needed) described below:

    1. Write a JavaScript function named newBackground, which has three input parameters named red, green, and blue. The body of the function should set the background color of the web-page equal to the result of concatenating the three input parameters (so the function call newBackground("AA"," 08"," F6") would set the background color to #AA08F6).

      function newBackground(red, green, blue)
      {
         document.bgColor = "#" + red + green + blue;
      }

    2. Assuming that the source document has a form named formy, with one textbox named fahrenheitBox, and another named celsiusBox, write the JavaScript fragment that takes the value in fahrenheitBox, converts it to Celsius (use C = (F -32)*(5 / 9) to convert Fahrenheit temperatures to Celsius), displays the result in celsiusBox, and then places the focus on fahrenheitBox and selects the text displayed in fahrenheitBox.

      with (document.formy)
      {
         var f = parseFloat(fahrenheitBox.value);
         var c = (f - 32)*(5 / 9);
         celsiusBox.value = c;
         fahrenheitBox.focus();
         fahrenheitBox.select();
      }

    3. Write a JavaScript function named randomScore which returns a random integer from 50 to 100 (no input parameters).

      function randomScore()
      {
         var score = Math.random()*51;
         score = Math.floor(score) + 50;
         return score;
      }

    4. Change the source of the third image on the page to be the file batman.jpg (which is stored in the same folder as the source code document).

      document.images[2].src = batman.jpg;
       

    5. Round down the (number) variable named x, and multiply the result by the (number) variable y to the third power (storing the result in the variable x).

      x = Math.floor(x)*Math.pow(y,3);
       

  2. What is the final value of the variable x after the following script is executed?
       <script type="text/javascript" language="JavaScript">
          var x = 11;
          x++;
          x *= 2 + 6 / 3 + 2;
       </script>

    x starts out at 11, then 12, the last line is equivalent to x *= 6 (2+(6/3)+2=6), so x=72.
     

  3. Consider the web-page shown below. It consists of a single form (name it formy) with 3 textboxes and a normal button. It is shown exactly as it would look when first loaded into a browser. Use the names (or ids) ageBox, yearsBox, and resultsBox for the names or ids of the three textboxes.

    1. Write the HTML for this form.

      <form name="formy" id="formy">
      <p>Enter your current age: <input type="text" name="ageBox" id="ageBox" value="18" size="5" /></p>
      <p>Enter a number of years: <input type="text" name="yearsBox" id="yearsBox" value="5" size="5" /></p>
      <p>Click this button: <input type="button" value="Click me!" onclick="someFunction()" /></p>
      <p>Results: <input type="text" name="results" id="results" size="30" />
      </form>

       
    2. Use the onload attribute of the body tag to make sure that the first textbox has the focus and is selected when the page loads.

      <body onload="document.formy.ageBox.focus(); document.formy.ageBox.select();">
       
    3. What (exactly) gets displayed (and where does it appear) if the user clicks the button (with the values shown above in the textboxes), and the button's onclick attribute executes the JavaScript commands below?
         with (document.formy)
         {
            resultsBox.value= "In " + yearsBox.value +
            " you will be " + ageBox.value +
            yearsBox.value + " years old.\r";
         }

      In the textbox named resultsBox, the string "In 5 years you will be 185 years old." will appear with a newline after it.
       
    4. What does the \r at the end of the code above accomplish?

      It adds a return or newline.
       
  4. What is the difference between the event handlers onblur and onchange?

    Both occur when a form field loses focus, but onchange also requires that the field's value has been changed.
     
  5. Consider the following script:
    <script type="text/javascript" language="JavaScript">
    function eraseMe(fred)
    {
       fred.value="";
    }
    function doubleMe(barney)
    {
       barney = barney*2;
       return barney;
    }
    var wilma = 5;
    var betty = doubleMe(wilma);
    eraseMe(document.myForm.textBox1);
    </script>
    1. Is the variable fred a formal or actual parameter? How about wilma?

      fred is formal, wilma is actual.
       
    2. Is the variable wilma local or global?

      global
       
    3. After the script executes, what is the value of the variable wilma? How about betty?

      wilma will equal 5, since it is passed by value (just a copy is sent to the doubleMe function). betty will end up with the value 10.
       
    4. Is the call to the function eraseMe using pass-by-value or pass-by-address parameters? What is the difference?

      It uses pass-by-address since the parameter is an object. The difference is that changes to the formal parameter in pass-by-address will also alter the actual parameter's values, while pass-by-value makes no changes to the actual parameter.
       
    5. Will the value of textBox1 actually be changed by the script above?

      Yes, it will be reset to the empty string.
       
  6. Is a variable declared inside a function local or global? What is the difference?

    It is local. Local variables will disappear as soon as the function's body is done executing. They can only be used in the body of the function where they are declared. Global variables can be used in multiple places within the source document.