Labs

Lab 5.6: Objects of Attention

JavaScript provides us with a variety of objects and arrays that can be used to enhance our scripting efforts. We already make use of a couple of objects in our order form script. In particular, the document object is used to produce our confirmation page and the Math object is used in function convertToMoney. Arrays are used in our getSelection and getRadio functions to manipulate groups of form elements. We can extend the page further still using the Date and String objects, and some homegrown arrays, as follows.

  1. Add code to function "submitForm" to:
    1. create a Date object
    2. create variables to store the month, date, and year from the Date object
    3. add the month, date, and year to the confirmation page.


  2. JavaScript's String object provides a number of useful methods for manipulating strings of text. One useful-and realistic-manipulation in the context of our order form would be to "blank out" most of the credit card number so that it does not appear intact on the confirmation page.

    Edit function "submitForm" now so that, instead of printing out the entire credit card number on the confirmation page, it prints out something like: XXXX-XXXX-XXXX-1234. In this case, X's are used except for the last four digits entered, which appear as entered on the order form. String method "subString" and String property "length" will come in handy in your coding.

  3. If you successfully completed exercise 1, you probably saw some unusual results. On our browser, the confirmation page displayed a month, date, and year of 7, 20, and 101, respectively (corresponding to August 20, 2001). From this we gleaned that the getYear method returned a number relative to the year 1900 (1900 + 101 = 2001). Also, it appeared to us that months are "zero-indexed" - that is, January is month 0, February is month 1, . . ., and August is month 7. Edit your program (for almost the last time:-)) to display the date on the confirmation page in a nice, readable fashion - for example, as August 20, 2001.

    Cleaning up the presentation of the year is easy - just add 1900 to the value returned by Date's getYear method. Fixing the month is a bit trickier. To do so, you can create an array of Strings, corresponding to the names of the months. Then, you can use the value returned by Date's getMonth method as an index into your array to retrieve the name of the current month.

  4. One last change to function "submitForm" will not result in any new or improved behavior. It will show you how scripting problems can be attacked in a variety of ways, each with its own tradeoffs. Back in Lab 5.4, exercise 3, we had you write code to check that each quantity value entered was legitimate. Eventually (in Lab 5.5), you wrote a function that was invoked six times to validate all of the quantities.

    Here is another approach to this problem. You could create an array of the quantity values (six numbers), and then use a for-each loop to iterate through the array, checking each number one at a time. As before, if any of the values is invalid, an alert box appears and processing is discontinued. Make this last change to function "submitForm" now.

Labs

MODULES:



© 2004 Thomson/Brooks Cole, All Rights Reserved.