ITSE 1411 Beginning Web
Assignment 6

Reading

JavaScript Text, Chapter 5, pgs 240 - 244 (Radio Buttons)
JavaScript Text, Repeat Chapter 3, pg 121 - 124 (Understanding Variable Scope, Using Built-in JavaScript Functions)
JavaScript Text, Chapter 3, pgs 130 - 145 (Making Decisions)

Discussion

• Radio Buttons
  • Create an assignment6 folder (no spaces in the name, no uppercase) in your public_html folder.
  • Click on radioButtonsExample.htm
  • View the source.
  • Save in your assignment6 folder in the public_html folder.
  • Open radioButtonsExamle.htm in LTS.
  • Resize this page on the left of your screen.
  • Resize the radioButtonsExample.htm page on the right of your screen.
  • Explanation of the radio buttons on the radioButtonsExample.htm page
    • When a web page has radio buttons, the intent is that only one button can be selected at a time. Usually, all radio buttons in a group have the same name. However, the difference is that each radio button has a different value.
    • When a radio button is selected the checked attribute is set to true.
    • When no checked attribute is included, then the checked attribute defaults to false.
    • When form elements share the same name, JavaScript creates an array of the elements with the same name.
    • To access one of the radio buttons, you access it in the order that it is defined. For example the checked attribute of the second radio button with the value $40.95 uses:
      • document.forms[0].delivery[1].checked

Practice

• Radio Buttons
  • Subscription page
    • Open your subscription.htm page from your assignment5 folder in your editor.
    • Save as subscription.htm in your assignment6 folder.
    • The coding on pages 237 - 239 is not included now because it contains examples from chapter 4 that we haven't covered.
    • Add the coding from pages 241 and 242 of the text. It appears that the value for 4 weeks is off, but that won't hurt your page.
    • Save the document.
    • Compare your page to Figure 5-10 page 242 (you will not have the password field).
    • Add the coding from pages 243 - 244 of the text. There is a typo on page 244 step 4. The second value should be monthly. Also, the label Sundays only ($3.50) doesn't make a lot of sense. But go ahead and leave it.
    • The functions noDelivery and noSunday refer to each other. When a user selects a radio button from buttons named delivery, the function noSunday() is called. This function deselects any radio button that may have been set in the Sunday buttons. When a user selects a radio button from buttons named sunday, the function noDelivery() is called. This function deselects any radio button that may have been set in the delivery buttons.
    • Save the document.
• if Statements
  • if is a conditional statement that evaluates a condition to determine if the condition is true
    • when the condition is true the statement (or block of statements contained in curly braces) is executed.
  • Click on ConcertAds2.html
  • Look at the slide show.
  • Right click on the page and View Source.
  • Resize the window of the source code to the right half of the screen.
  • There are three variables declared above function curImage.
    • run is used to set the interval for the slideshow (discussed later).
    • curImage is to initialize the variable that determines which image is shown first.
    • numberImages which is assigned the number of images in the slide show.
    • As you enter the function changeAd() the first time, the value of curImage is 1 and the numberImages is 5.
  • The first line of code
    curImage++;
    means add one to curImage.
  • You can test the contents of a variable by using the selection if
    if(condition)
    {
    do something
    }
    When there is only one statement to be executed, the block curly braces are not needed.
  • The next line uses the if to test to see if curImage is larger than numberImages
    when it is larger (and only when it is larger) the next line of code is executed.
    • curImage is restarted to 1 because you have displayed all of your images.
  • The last line of code in the function assigns the src a new value, but that value is built each time you come through the code.
  • The value is a string (which means text) using the "+" (concatenation operator).
  • You can build a string that consists of the name of the image, concatenate the number of the image, and concatenate the extension. In this example all images must have the same extension.
  • Since you want to restart the images after you display all of the images, you can test to see when you have displayed all of the images.
• PilotQuiz1 page using if statement
  • Open your template.htm page in your editor.
  • Save as pilotQuiz1.htm in your assignment6 folder.
  • Add the coding from pages 132 - 135 of the text.
  • Save the document.
  • Compare your page to Figure 3-6 on page 135 of the text.
• if ... else Statements
  • if ... else is a conditional statement that evaluates a condition to determine if the condition is true (and performs a set of instructions for the true condition) or false (and performs a different set of instructions for the false condition)
• PilotQuiz2 page
  • If necessary, open your pilotQuiz1.htm page in your editor.
  • Save as pilotQuiz2.htm in your assignment6 folder.
  • Add the coding from page 137 of the text.
  • Save the document.
• Nested if and if ... else Statements
  • The statements in the block following the if may have another if or if ... else statement.
  • the statements in the block following the else may have another if or if ... else statement.
• PilotQuiz3 page
  • If necessary, open your pilotQuiz2.htm page in your editor.
  • Save as pilotQuiz3.htm in your assignment6 folder.
  • Add the coding from page 139 - 142 of the text. Heads up:
    Step 9 shows the way the code should look after entering steps 1 - 8. But, it looks different!
    For step 9, just add the closing curly brace } for the function and that should be all you need to do for that step.
  • Save the document.
• switch Statements
  • switch is a conditional statement that performs different code depending on the condition. It is sometimes called switch case.
  • Click on ConcertAds1.html
  • Look at the slide show.
  • Right click on the page and View Source.
  • Resize the window of the source code to the right half of the screen.
  • ConcertAds1.html switch example
    • There are two variables declared above function curImage. run is used to set the interval for the slideshow (discussed later). curImage is to initialize the variable that determines which image is shown first.
    • The function changeAd() assigns an image to the src attribute of the first image (there are no validation images on this page) of the document. If a name had been assigned to the img tag, the name could have been used instead of image[0].
    • The switch condition compares the value of curImage to the value after the case label.
    • Control goes to the case label and executes all code until either the switch ends or a break statement is executed.
    • The first time the function is called, curImage is a l, so control goes to case 1.
    • The image is assigned to the src and the value of curImage is assigned a 2.
• PilotQuiz4 page using the switch conditional statement
  • If necessary, open your pilotQuiz3.htm page in your editor.
  • Save as pilotQuiz4.htm in your assignment6 folder.
  • Add the coding from page 144 - 145 of the text. On page 145, the answers are incorrect. The answers on page 140 are correct.
  • Save the document.

Case Project:

• Complete Case Project 3-1 found on page 169 of your text that you started in assignment 5.
  • Open calcShipping.htm in your assignment5 folder as save as calcShipping.htm in your assignment6 folder.
  • You are to add the conditional statement and do your calculations.
  • Warning: All text is entered as a string. In order to use the value as a number you must parse the number.
    • purchasePrice = parseInt(purchasePrice);
    will convert a text purchasePrice to an integer purchasePrice.
    
    • purchasePrice = parseFloat(purchasePrice);
    will convert a text purchasePrice to a float (number with a decimal point) purchasePrice.
  • Calculate the cost of shipping depending on the appropriate criteria. If nothing is entered, do not make a calculation.
  • Either display the calculated amount of the item including shipping either in the text box replacing the value that was entered by the user, or use an alert box to display the calculated amount. Be sure and put an appropriate message with the value if you use the alert box.
• Complete Case Project 3-3 found on pages 169 - 170 of your text.
  • Open your template.htm page.
  • Save as gasMileage.htm in your assignment6 folder.
  • Follow the steps described in the text but start with the template so that you will have the validation icons on your page.
  • Create a form to calculate gas mileage
    • Create 4 text boxes
      Starting Mileage
      Ending Mileage
      Gallons Used
      Miles Per Gallon
    • Hint:
      • In the first 3 text boxes use the onchange event handler to call the function calcMPG().
        onchange="calcMPG();"
        Do not use the onchange event handler in the milesPerGallon text box. That is used for output, not input.
      • Assign the value 0 as the default value for each of the 4 text boxes.
        
  • Write the function calcMPG() with no arguments in the parameter list
    1. Declare 4 variables startMiles, endMiles, galsUsed, and MPG. Assign the first three variables with the values from the form. (Remember to use DOM to refer to those values and remember those values must be parsed.)
    2. Next check to make sure that a numerical value has been entered. For example:
       The method isNaN will test to see if a value is numeric. A true is returned if the value is not a number. You can test to make sure every variable and if any return a true, then one of the fields has a non-numeric number
       if(isNaN(startMiles) || isNan(endMiles) || isNan(galsUsed)
       {
          window.alert("You must enter a numerical value.");
          return;
       }
       
    3. Use the conditional operator to test if any of the parsed values are 0 because if they are, you have not entered all of the data
       Use either if statements or the conditional operator.
       MPG=(startMiles == 0 || endMiles == 0 || galsUsed == 0)?0:(endMiles-startMiles)/galsUsed;
    4. Assign MPG to the 4th text box.
    5. You usually test that you do not divide by 0 (zero). If you try to divide by 0, you will crash your computer. Since you are already returning from the function when a value is 0, you do not have to worry about division by 0.
       

Update your index page:

• Add links on your index page to the pages in your assignment6 folder that are to be graded:
  • subscription.htm
  • pilotQuiz4.htm
  • gasMileage.htm
  • calcShipping.htm

Uploading:

• Upload your revised index.htm page to the public_html folder.
• Upload your assignment6 folder with the files:
  • subscription.htm
  • pilotQuiz4.htm
  • gasMileage.htm
  • calcShipping.htm

Testing uploaded pages

• Follow the checklist for grading shown on the schedule page.
• Make any corrections for any page that does not validate or display correctly.