Forms and Functions
Operators

Discussion

• Operators
  • See W3Schools Arithmetic Operators
  • The modulus operator may be new to you. You are responsible for working with the modulus operator. Consider 5/2. The answer is 2 because 5 divided by 2 is 2. Consider 5%2. The answer is 1 because after you divide 5 by 2, you have a remainder of 1.
  • See W3Schools Comparison and Logical Operators
  • See W3Schools Reserved Characters
  • See Operator Precedence Table
• Prefix and Postfix operators
  • Not all browsers recognize all prefix and postfix operators. Use caution when using these operators.
• Conditional Operator Syntax
  • variablename=(condition)?value1:value2

Practice:

• Start all of your pages with your template.
• Remember to save as and rename your page.

1. Create a form for temperature conversion.
   • An input text box for the user to enter celsius temperature.
   • An input text box to use for output to the screen.
   • A button with a value "Convert" to call a function convertTemperature().
   • Write the function convertTemperature
     • create two varialabes temp1 and temp2.
     • Assign temp1 the value in the input text box
       (remember to use DOM)
     • parse the temp1 to be either Integer or Float.
     • Compute the Fahrenheit temperature.
       temp2 = (9.0/5.0)* temp1 + 32;
     • Write the Fahrenheit temperature into the second text box.
2. Change your form to allow the user to select either Centigrade or Fahrenheit and convert the temperature
   • Add a selection box that has the options F and C.
   • Use the conditional operator to determine if you are calculating Centigrade or Fahrenheit.
   • The formula to convert Fahrenheit to Celsius.
     temp2 = (temp1 - 32) * (5.0 / 9.0);
   • Write the result in the second text box.
3. Create a form to calculate gas mileage
   • Create 4 textboxes
     Starting Mileage
     Ending Mileage
     Gallons Used
     Miles Per Gallong
   • Assign the value 0 as the default value for each text box.
   • In the first 3 text boxes use the onchange event handler to call the function calcGasMileage().
     onchange="calcMPG();"
   • Write the function calcGasMileage()
     • Declare 4 variables and assign the first three variables with the values from the form. (Remember to parse.)
     • Use the conditional operator to test if any of the parsed values are 0
       milesPerGallon=(startMiles == 0 || endingMiles == 0 || gallonsUsed == 0)?0:(endingMiles-startingMiles)/gallonsUsed;
     • Assign milsPerGallon to the 4th text box.
   

• Make sure that your pages validate. In LTS, click Tools, W3C Validate. Make any corrections necessary.