Docstoc

Instructor's Materials to accompany

Document Sample
Instructor's Materials to accompany Powered By Docstoc
					                      Instructor’s Materials to accompany
                                       JAVASCRIPT
                                    PROJECT THREE
         ENHANCING THE USE OF IMAGE AND FORM OBJECTS
                       LESSON PLAN

OBJECTIVES
Students will have mastered the material in this project when they can:
 Define rolling banner                               Write a user-defined function that
 Create an image object                                 changes an image when the mouse
 Write a rolling banner function                        pointer passes over a related link
 Define array                                        Write a user-defined function that
 Describe how to create an array instance               displays a menu of items and displays
 Call the rolling banner function                       the price for an item that is selected from
 Create a dynamic greeting                              the menu
 Describe the Switch statement                       Describe the onchange event handler
 Write a user-defined function that                  Write a user-defined function that
  calculates the number of days to a future              calculates the total cost of an item
  date                                                   selected from a menu
 Discuss the getMonth() and getTime()                  Write a user-defined function to format
  methods                                                the total cost as currency
 Describe the onmouseover event handler




PROJECT OVERVIEW
The Midwest Catering Web page introduces three new concepts: banners and image rollovers,
dynamic greetings, and arrays. Students will learn how to create image objects that will allow
them to change images either automatically or by dragging the mouse over an associated link.
With automatic image rollovers, students will learn how to create array objects. The dynamic
greeting uses the Date() object and introduces students to the Switch statement. Students learn
how to determine the number of days between the current date and some future date. Finally,




                                               J 3.1
J 3.2 Project 3 Enhancing the Use of Image and Form Objects


array objects are used in Selection lists for calculating prices. Students learn to pass data from
Selection lists to form text boxes using the array values.

LESSON PLAN
Project Outline                           Page       Teacher Notes and Activities

      What a Doll!                       J 3.2      Have the students visit the Barbie site
       Barbie® Doll Fans Are                         (barbie.com) before you discuss this project.
       Tickled Pink About                            Ask students to pay attention to the features of
         Custom Dolls                                the site and ask them to speculate how the site
                                                     was built. Have students discuss how the
                                                     JavaScript was used to change images and
                                                     what role the mouse plays in interactive
                                                     aspects of the Web page. Ask students to
                                                     think of other ways JavaScript could
                                                     manipulate images to enhance a Web page.

      I. Introduction                     J 3.4      Ask the students to discuss the concepts they
                                                     learned in Project 2. Give a brief overview of
                                                     the new concepts. Ask students to describe
                                                     Web sites they have visited that use banners.
                                                     Discuss the impact of the banner. Ask the
                                                     students if they have used Web sites that have
                                                     selection lists from which to select items. Ask
                                                     them what they think are the advantages and
                                                     disadvantages to such selection lists.

     II. Project Three — Creating         J 3.4      Use Figures 3-1a through 3-1d to describe the
         the Midwest Catering                        rolling banner. This banner replaces the
         Web Page                                    typical dull non-animated title. Explain that
                                                     each display is a graphic image file, and each
                                                     one displays in the same location. Tell
                                                     students the same effect basically can be
                                                     achieved through an animated GIF file, but if
                                                     students do not have access to such software,
                                                     this is one way to simulate simple animation.
                                                     Describe the form in Figure 3-1e. Tell
                                                      JavaSript Instructor’s Materials J 3.3


Project Outline                      Page    Teacher Notes and Activities

                                             students that each food service has its own
                                             form. Each of the forms perform a simple
                                             calculation to display an estimated cost for
                                             that food service. Tell students that actions
                                             will trigger through the use of the event
                                             handlers.

        Starting Notepad and         J 3.7   Use Figure 3-2 to review the steps to open the
        opening the cater.htm file           cater.htm file.

   III. Rolling banners              J 3.7   Define rolling banner. Discuss the three steps
                                             that must be followed in creating a rolling
                                             banner. Discuss the More About Rolling
                                             Banners box.

        A. Creating an image         J 3.8   Remind students how the HTML IMG SRC
            object                           tag works. Use Table 3-1 to discuss the Name
                                             attribute. Describe the general form of the tag
                                             and purpose of the Width and Height
                                             attributes. Use Table 3-2 to describe how to
                                             assign a new image to a location. Discuss the
                                             relationship of the Name attribute and how it
                                             is used in the object. Use Figures 3-3 and 3-4
                                             to create the location for the image object.

        B. Writing the rolling       J 3.9   Discuss the six steps needed in writing the
            banner function                  rolling banner function. Ask students to recall
                                             the use of the recursive function call in Project
                                             2 with the setTimeout() method. Ask the
                                             students why they might need to use a
                                             recursive call with the rolling banner. Define
                                             array and subscript and describe their
                                             relationship to each other. Use Table 3-3 to
                                             discuss the general form of writing an array
                                             and to provide examples of how to initialize
                                             the array. Use Figure 3-5 to explain how data
                                             fills an array and is accessed by the subscripts.
J 3.4 Project 3 Enhancing the Use of Image and Form Objects


Project Outline                        Page     Teacher Notes and Activities

                                                Discuss the More About Arrays and
                                                Subscripts boxes. Use Table 3-4 and Figure 3-
                                                6 to discuss creating the array instance for the
                                                rolling banner and how the array items are
                                                used to replace the existing images.

         C. Calling the rolling       J 3.12    Use Figures 3-7 and 3-8 to describe entering
             banner function                    the onload event handler to call the rolling
                                                banner function when the Web page loads.
                                                Review how the three steps to complete a
                                                rolling banner were followed.

    IV. Creating a dynamic            J 3.13    Explain the purpose of the dynamic greeting
        greeting                                and why it is important to have greetings that
                                                change. Discuss the seven steps in creating the
                                                dynamic greeting. Explain the need for a
                                                variable to contain a generic greeting and how
                                                the greeting changes and replaces the generic
                                                greeting. Direct students to the More About
                                                The Switch Statement box for more
                                                information.

         A. The Switch statement      J 3.13    Define the Switch statement. Use the
                                                flowchart in Figure 3-9 and Table 3-5 to
                                                explain how the Switch statement works.
                                                Discuss the general form and the example in
                                                Table 3-5 and ask students to think of other
                                                instances or items that can be tested using the
                                                Switch statement.

         B. The getMonth() and        J 3.14    Describe how the getMonth() and getTime()
             getTime() methods                  methods work. Explain the importance of
                                                using the Date() object to extract the system
                                                date first. Explain why the getTime() method
                                                returns the number of milliseconds from
                                                January 1, 1970 at 00:00:00. Describe the
                                                expression needed to convert the milliseconds
                                                     JavaSript Instructor’s Materials J 3.5


Project Outline                    Page     Teacher Notes and Activities

                                            to days. Discuss the More About The Date()
                                            Object and getTime() boxes.

        C. Creating the            J 3.15   Use the flowchart in Figure 3-10 to explain
            HolidaysDays()                  the logic of the HolidayDays() user-defined
            function                        function. Explain the JavaScript code in Table
                                            3-6 to determine the greeting for the St.
                                            Patrick's Day holiday. Use Figure 3-11 to
                                            explain how to enter the code for the St.
                                            Patrick's day section of the HolidayDays()
                                            function. Discuss the More About Math ceil()
                                            Method box. Point out to the students that a
                                            negative -2.89 returns a -2. Use Tables 3-7
                                            and 3-8 to describe the code to set the greeting
                                            for the 4th of July holiday and Halloween. Use
                                            Figures 3-12 and 3-13 to describe how to
                                            enter the JavaScript code for the
                                            Independence Day and Halloween dynamic
                                            messages. Use Table 3-9 to discuss the
                                            JavaScript code to calculate the number of
                                            days until Christmas. Use Figure 3-14 to
                                            explain how to enter the JavaScript code for
                                            the steps to count down to Christmas. Tell
                                            students to use the current year as they enter
                                            their code for Figures 3-11 through 3-13.

        D. Calling the             J 3.20   Use Table 3-10 to explain the placement of
            HolidayDays()                   the JavaScript code to call the HolidayDays()
            function                        function. Use Figure 3-15 to enter the
                                            JavaScript section to call the HolidayDays()
                                            function.

        E. Saving the HTML         J 3.21   Remind students to double check their code
            file and viewing the            before they save and test the Web page.
            Web page                        Review the steps to save the HTML file and
                                            test the Web page. Use Figure 3-16 to point
J 3.6 Project 3 Enhancing the Use of Image and Form Objects


Project Outline                        Page     Teacher Notes and Activities

                                                out the rolling banner and the dynamic
                                                greeting. Remind students as they enter their
                                                JavaScript code for Figures 3-11 through 3-13
                                                to enter the current year.

     V. The onmouseover event         J 3.22    Describe how the onmouseover event handler
        handler                                 is used to change an image. Discuss the need
                                                for Web developers to be careful when using
                                                mouse event handlers. Use Table 3-11 to
                                                discuss some of the other mouse event
                                                handlers available.

         A. Entering the              J 3.23    Use Figure 3-17 to discuss the placement of
             onmouseover event                  the three onmouseover event handlers in the
             handler                            anchor tags. Use Figures 3-17 through 3-19 to
                                                enter the onmouseover event handlers that
                                                will call the functions that will change the
                                                images. Direct student to the URL listed in the
                                                More About Mouse Event Handlers box.

         B. Entering the functions    J 3.25    Use Figures 3-20a and 3-20b to point out the
                                                location of the images in the HTML code and
                                                on the Web page. Use Table 3-12 to discuss
                                                the JavaScript code needed to change the
                                                image. Remind students about the IMG SRC
                                                object used in the function that displays the
                                                rolling banner. Tell students the same concept
                                                applies here, except the image does not "roll."
                                                Use Figure 3-21 to enter the JavaScript code
                                                to change the images for the Picnics category.
                                                Use Table 3-13 and Figure 3-22 to enter the
                                                function to change images for the Dinner
                                                Parties category. Use Table 3-14 and Figure
                                                3-23 to enter the JavaScript code to change
                                                the images for the Weddings category.
                                                Remind students it is a good practice to save
                                                    JavaSript Instructor’s Materials J 3.7


Project Outline                   Page     Teacher Notes and Activities

                                           and test their Web pages. Review the four
                                           steps to save and test the Web page. Use
                                           Figure 3-24 to show the new images when the
                                           mouse is moved over the Picnics link
                                           category.

   VI. Using selection lists to   J 3.29   Discuss the Picnics section shown in Figure 3-
       display menu items                  25. Point out the selection list. Explain that
                                           when a choice is selected a price displays in
                                           the Extended price text box. The insertion
                                           point is positioned in the Enter number of
                                           guests text box and when the user presses the
                                           TAB key, the extended price displays in the
                                           Extended price text box. Explain how the
                                           selectedIndex property is used to determine
                                           which item was selected from the list. Direct
                                           students to the URL in the More About Select
                                           Lists box. Use Figure 3-26 to point out the
                                           relationship between the items in the selection
                                           list and prices in the array and how the
                                           selectedIndex property is used to set the
                                           subscript in the array item. Direct students to
                                           the URL in the More About Passing Form
                                           Names (this, form) box.

        A. The onchange event     J 3.30   Describe how the onchange event handler
            handler                        works. Remind the students that the price for
                                           an item in the selection list displays in the
                                           Extended price text box when the selection
                                           list changes. Explain to the students that each
                                           selection list for each food category must have
                                           an onchange event handler to call the
                                           appropriate function that displays the price.
                                           Use Figures 3-27 through 3-29 to enter the
                                           onchange event handlers for the Picnics,
J 3.8 Project 3 Enhancing the Use of Image and Form Objects


Project Outline                        Page     Teacher Notes and Activities

                                                Dinner Parties, and Weddings selection lists.

         B. Entering the user-        J 3.32    Use Table 3-15 to explain the function to set
             defined functions for              the price for the Ppicnics sSelection list. Ask
             the onchange event                 students to point out the array and identify the
                                                different items. Ask students to explain the
             handler
                                                use of the selectedIndex property and how it is
                                                used to set the subscript. Use Figure 3-30 to
                                                enter the function to assign the prices for the
                                                picnics. Use Tables 3-16 and 3-17 to explain
                                                the JavaScript code for the functions that set
                                                the dinner parties prices and weddings prices.
                                                Use Figures 3-31 and 3-32 to enter the
                                                functions to assign the prices for the dinner
                                                parties and weddings.

    VII. Calculating the extended     J 3.38    Use Figure 3-33 to point out the instructions
         price function                         in the Picnics category for entering the
                                                number of guests and displaying the extended
                                                price. Explain why the onchange event
                                                handler is used to call the functions to
                                                calculate the prices. Use Figures 3-34 through
                                                3-36 to enter the onchange event handlers to
                                                call the functions to calculate the extended
                                                price for the picnics, dinner parties, and
                                                weddings functions.

         Calculating the extended     J 3.40    Remind students how the insertion point is
         price                                  placed in the Enter number of guests text box.
                                                Use Table 3-18 to explain how the price that
                                                displays in the Extended price text box
                                                contains text and that only the numeric
                                                portion can be used in the calculation of the
                                                extended price in line 150. Emphasize that the
                                                students must calculate the location of the
                                                price exactly or errors will occur. Explain the
                                                JavaSript Instructor’s Materials J 3.9


Project Outline               Page     Teacher Notes and Activities

                                       need to create the string object instance in line
                                       151. Indicate the call to the dollarFormat()
                                       function in line 152. Use Figure 3-37 to
                                       describe entering the picPrice() function.
                                       Using the same logic as Table 3-18 discuss
                                       the code in Table 3-19 and use Figure 3-38 to
                                       enter the dinPrice() function. Use Table 3-20
                                       to explain the code for the wedPrice()
                                       function and Figure 3-39 to enter the
                                       JavaScript code.
  VIII. The dollarFormat()    J 3.43   Remind students of the dollarFormat() user-
        function                       defined function from Project 2. Review the
                                       seven basic steps the dollarFormat() function
                                       performs. Ask students to explain various
                                       steps in the code in Table 3-21. Use Figure 3-
                                       40 to enter the dollarFormat() function. Use
                                       Table 3-22 to discuss the sample test data.
                                       Use Figure 3-41 to review the steps to save
                                       and test the Web page using the data in Table
                                       3-22.

        Printing the HTML     J 3.46   Review the step to print the HTML file using
        Notepad file                   Notepad.

   IX. Project summary        J 3.47   Briefly review the material presented in this
                                       project.

    X. What you should know   J 3.47   Encourage students to use this section in
                                       preparing for tests and quizzes.

   XI. Test your knowledge    J 3.48   These exercises test students on their mastery
                                       of the material presented in this project.
                                       Exercises 1 through 4 can be reviewed and
                                       assigned at this time.
   XII. Use Help              J 3.52   These exercises ask students to use JavaScript
                                       Help to find out more about working with
J 3.10 Project 3 Enhancing the Use of Image and Form Objects


Project Outline                        Page     Teacher Notes and Activities

                                                JavaScript. Exercises 1 and 2 can be reviewed
                                                and assigned at this time.

   XIII. Apply your knowledge         J 3.53    This exercise gives students a chance to apply
                                                their knowledge to a document on the
                                                JavaScript Data Disk. Exercise 1 can be
                                                reviewed and assigned at this time.

   XIV. In the lab                    J 3.55    These exercises provide students with practice
                                                in using the skills developed in this project.
                                                Exercises 1 through 3 can be reviewed and
                                                assigned at this time.

   XV. Cases and places               J 3.60    These exercises offer students the opportunity
                                                to learn more about JavaScript through open-
                                                ended activities with varying degrees of
                                                difficulty. Students can be assigned one or
                                                more exercises, or allowed to choose the
                                                exercises in which they are most interested.
                     Instructor’s Materials to accompany
                                        JavaScript
                                    PROJECT THREE
           ENHANCING THE USE OF IMAGE AND FORM OBJECTS
                                  ANSWER MANUAL

                           TEST YOUR KNOWLEDGE
1   True/False
      1.       F          3.        T          5.        F          7.        T          9.      F
      2.       T          4.        F          6.        F          8.        T          10.     F


2   Multiple Choice
      1.       c          3.        b          5.        d          7.        b          9.      d
      2.       c          4.        c          6.        a          8.        d          10.     b



3   Understanding JavaScript Code Statements
    1. ClassStanding = new Array("Freshman", "Sophomore", "Junior", "Senior")
    2. document.Schedule.Class.value = Course[4]
    3. Anniversary = Date("June 19, 2001")
    4. curDay = new Date()
       AnnivReminder = Anniversary.getTime() - curDay.getTime()
    5. If (AnnivReminder > 0) {
              numberDays = Math.ceil(AnnivReminder / (1000 * 60 * 60 * 24))
        }
    6. itemNum = CategoryList.Category.selectedIndex


4   Using onmouseover, onmouseout, onmousedown, and onmouseup to Simulate
    Animation
    9. The completed project for this assignment is supplied in the Instructor’s Lab Solutions
       section on the Instructor’s Resource Kit CD-ROM as the mousesolution.htm file.



                                             J 3.11
J 3.12 Project 3 Enhancing the Use of Image and Form Objects


                                        USE HELP

1   Exploring Online Documentation
    1. The predefined core objects are Array, Boolean, Date, Function, Math, Number, RegExp,
       and String.
    2. An array is an ordered set of values that you refer to with a name and an index. For
       example, you could have an array called emp that contains employees' names indexed by
       their employee number. So emp[1] would be employee number one, emp[2] employee
       number two, and so on.
    3. In Navigator 2.0 and Navigator 3.0, arrayLength is the initial length of the array. In
       Navigator 4.0, if the <SCRIPT> tag does not specify "JavaScript1.2" as the value of the
       LANGUAGE attribute, this is still true. However, if it does specify "JavaScript1.2", then
       Array(arrayLength) creates an array of length one with arrayLength as its only element.
       That is, it no longer considers a single integer argument as a special case.
    4. a. concat joins two arrays and returns a new array.
       b. pop removes the last element from an array and returns that element.
       c. push adds one or more elements to the end of an array and returns that last element
          added.
       d. reverse transposes the elements of an array: the first array element becomes the last
          and the last becomes the first.
       e. sort sorts the elements of an array.
    5. You can refer to an array's elements by using the element's value or ordinal number. For
       example, suppose you define the following array: myArray = new
       Array("Wind","Rain","Fire")
       You then can refer to the first element of the array as myArray[0] or myArray["Wind"].
       a. The Date object has a large number of methods for setting, getting, and manipulating
          dates. It does not have any properties.
       b. Currently, you cannot work with dates prior to January 1, 1970.
       c. No parameters use the current system date. To provide parameters, allows the
          developer to assign a specific date.
       d. The Date object methods for handling dates and times fall into these broad categories:
              "set" methods, for setting date and time values in Date objects.
              "get" methods, for getting date and time values from Date objects.
              "to" methods, for returning string values from Date objects.
              parse and UTC methods, for parsing Date strings.
                                                         JavaScript Instructor’s Materials J 3.13


          With the "get" and "set" methods you can get and set seconds, minutes, hours, day of
          the month, day of the week, months, and years separately. There is a getDay method
          that returns the day of the week, but no corresponding setDay method, because the day
          of the week is set automatically. These methods use integers to represent these values
          as follows:
          Seconds and minutes: 0 to 59
          Hours: 0 to 23
          Day: 0 to 6 (day of the week)
          Date: 1 to 31 (day of the month)
          Months: 0 (January) to 11 (December)
          Year: years since 1900
          For example, suppose you define the following date:
               Xmas95 = new Date("December 25, 1995")
          Then Xmas95.getMonth() returns 11, and Xmas95.getYear() returns 95.
          The getTime and setTime methods are useful for comparing dates. The getTime
          method returns the number of milliseconds since January 1, 1970, 00:00:00 for a Date
          object.


2   Exploring Links to Other JavaScript Sites
    1. Students should submit a printout of the Web development Web page.
    2. Students should submit a printout of the Image flipping or banners Web page.
    3. Students should submit a printout of the first page of the image rollovers tutorial Web
       page.
    4. Students should submit a printout of the first page of the Date and Time tutorial Web
       page.
    5. Students should submit a printout of the first page of the arrays and loops Web page.
    6. Students should submit a printout of the image changing and cause a button to look
       repressed with onmousedown and up Web page.
    7. Students should submit a printout of the how to add extra zeroes at the end of 2.2 to
       get 2.20 for an answer Web page.
J 3.14 Project 3 Enhancing the Use of Image and Form Objects


                           APPLY YOUR KNOWLEDGE

1   Using the onmouseover Event Handlers to Change Images
    10. The completed project for this assignment is supplied in the Instructor’s Solutions section
        on the Instructor’s Resource Kit CD-ROM as the travelsolution.htm file.


                                        IN THE LAB

1   Using the Arrays Selection List Prices to Calculate a Total Price
    7. The completed project for this assignment is supplied in the Instructor’s Lab Solutions
       section on the Instructor’s Resource Kit CD-ROM as the computersolution.htm file.


2   Using Arrays to Create a Rolling Banner and Display Prices for a Selection List
    10. The completed project for this assignment is supplied in the Instructor’s Lab Solutions
        section on the Instructor’s Resource Kit CD-ROM as the floristsolution.htm file.


3   Creating Rolling Banners, Selection Lists, and Displaying Messages.
    13. The completed project for this assignment is supplied in the Instructor’s Lab Solutions
        section on the Instructor’s Resource Kit CD-ROM as the fencesolution.htm file.
                      Instructor’s Materials to accompany
                                       JAVASCRIPT
                                     PROJECT THREE
            ENHANCING THE USE OF IMAGE AND FORM OBJECTS
                                         TEST BANK
   Test Bank Answers are on page J 3.24.

Multiple Choice
266. What do you call a set of images, all the same size, that display in the location for a few
     seconds, one after the other?
     a. scrolling message
     b. animated GIF
     c. mouseover event handler
     d. rolling banner or image rollover

267. Which of the following is not a step in creating a rolling banner?
       a.   create an image object
       b.   create an animated GIF
       c.   write the function
       d.   add the event handler to call the function

268. Which HTML tag attribute is used to identify image objects?
     a. IMAGE
       b. SRC
       c. NAME
       d. FORM

269. The Width and Height attributes in an IMG SRC tag set the size in __________.
     a. pixels
     b. inches
     c. centimeters
     d. milliseconds
270. What is an array?
     a. a collection of graphic images used for animation


                                               J 3.15
J 3.16 Project 3 Enhancing the Use of Image and Form Objects


        b. a collection of file names used for a history list
        c. a collection of data items represented by one variable name
        d. a collection of objects used for an image map

  271. What does the subscript designate in an array?
       a. the size of the array
       b. the length of the array
       c. the number of individual items in the array
       d. an individual item or occurrence in the array

  272. Subscripts follow the array variable name in __________.
        a.   braces { }
        b.   square brackets [ ]
        c.   parentheses ( )
        d.   a set of less than and greater than signs < >

  273. Which of the following is not a valid example of a subscript?
       a. [2]
       b. [12]
       c. [J 2]
       d. [item] (where item is a JavaScript variable)

  274. Besides the If…Else statement, what JavaScript statement is another way to multiple
       conditions?
       a. Case
       b. &&
       c. ||
       d. Switch

  275. In the Switch statement, the comparisons begin with the first Case statement and
       __________.
       a. automatically stop execution on the first True condition
        b. continue until all conditions are tested
        c. stop and execute all True conditions
        d. stop on first True condition and then execute the Default statement

  276. Which statement passes control to the first statement after the closing brace for the
       Switch statement?
       a. Break
       b. Case
                                                       JavaScript Instructor’s Materials J 3.17


      c. Default
      d. Next

277. Which statement is optional and is executed if none of the conditions are True?
     a. Break
     b. Case
     c. Default
     d. Next

278. The getMonth() method of the Date object, returns the __________.
     a. number of the current month
      b. name of the current month
      c. number of days left in the current month
      d. number of days in the current month

279. If the getMonth() method returned an 8, which month does that represent?
     a. none, it returns the actual month name
     b. August
     c. September
     d. October

280. The getTime() method returns the number of __________ that have elapsed since January
      1, 1970 00:00:00.
      a. microseconds
      b. milliseconds
      c. nanoseconds
      d. seconds

281. Given the following statement: var count = Math.ceil(5.72), what is the value of count?
     a. 4
     b. 5
     c. 6
      d. 5.8

282. Given the following statement: var count = Math.ceil(-5.72), what is the value of count?
     a. -4
     b. -5
     c. -6
     d. -5.7
J 3.18 Project 3 Enhancing the Use of Image and Form Objects


  283. Which mouse event handler triggers JavaScript when the mouse pointer is dragged off an
       object?
       a. onmouseover
       b. onmouseout
       c. onmouseoff
       d. onmousedown

  284. Which mouse event handler triggers JavaScript when the mouse button is pressed?
       a. onmouseover
       b. onmouseout
        c. onmousepress
        d. onmousedown
  285. Which mouse event handler triggers JavaScript when the mouse button is released?
       a. onmouserelease
       b. onmouseup
       c. onmouseoff
       d. onmousedown

  286. Which mouse event handler triggers JavaScript when the user moves the mouse?
       a. onmousemove
        b. onmouseout
        c. onmouseoff
        d. onmousedown

  287. What is the disadvantage to using mouse event handlers?
       a. users might not know how to use the mouse
       b. users might not know where to look for the event handler
       c. users might be using a Web page with event handlers
       d. before a web page is loaded, a user might drag the mouse over an object triggering an
          event they were not expecting

  288. The __________ provides the position of the item selected in the HTML Select Option
       List tags.
       a. selectedList property
       b. selectedList() method
       c. selectedIndex property
       d. selectedIndex() method

  289. How is the value of the selectedIndex property determined?
                                                           JavaScript Instructor’s Materials J 3.19


      a.    the location in the option list determines the value in the selectedIndex
      b.    the location in the corresponding array
      c.    the JavaScript Web developer must determine in advance
      d.    by the onchange event handler

290. Which event handler triggers an event whenever the object it is associated with changes?
     a. onevent
     b. ontrigger
     c. onmove
     d. onchange

True/False
T F        291. A rolling banner is a set of images, all the same size, that display in the same
                location one after the other.

T F        292. Rolling banners are not the same as image rollovers or dynamic images.

T F        293. Rolling banner images should pause for a few seconds to allow viewers to see a
                graphic or read a message.

T F        294. To create an image object, add the Name attribute to the <FORM> tag.

T F        295. To create an image object, add the Name attribute to the <IMG SRC> tag.

T F        296. The Name attribute provides JavaScript with the x and y coordinate location of
                the new image.

T F        297. The Name attribute provides JavaScript with a variable name, which is used to
                assign the new image and replace the original image.

T F        298. The Width and Height attributes in the <IMG SRC> tag indicate the size of the
                image in pixels.

T F        299. The Width and Height attributes in the <IMG SRC> tag indicate the size of the
                 image in centimeters.

T F        300. The object name in the JavaScript code must match the object name in the <IMG
                SRC> tag

T F        301. An array is a collection of data items, represented by one variable name.

T F        302. An array variable must have a subscript to identify an individual item.

T F        303. A subscript is a number that designates an individual item or occurrence in an
J 3.20 Project 3 Enhancing the Use of Image and Form Objects


                array.

T F       304. The first item of a JavaScript array is element one.

T F       305. The first item of a JavaScript array is element zero.

T F       306. Subscripts are designated by placing pairs of braces {} after the variable name.

T F       307. Subscripts are designated by placing pairs of brackets [ ] after the variable name.

T F       308. A subscript may be any valid JavaScript variable name or numeric literal.

T F       309. Subscript values always must be greater than zero.

T F       310. A numeric literal is not acceptable as an array subscript.

T F       311. An object instance, like an array, is an object created from a built-in object.

T F       312. In JavaScript, three ways exist to add items to an array.

T F       313. The data in an array is stored sequentially.

T F       314. In the array, Banners[3], the number three is the size of the array.

T F       315. In the array, Banners[3], the number three is the subscript and indicates the third
               item in the array.

T F       316. The Switch statement is a way of testing multiple conditions.

T F       317. The only way to test multiple conditions is with nested If…Else statements.

T F       318. The conditional testing in a Switch statement begins with the first Case statement
               and continues until all the conditions are tested.

T F       319. Only numbers can be used in Case conditions in the Switch statement.

T F       320. The BREAK statement is used to cease all further testing of Case conditions
               when a True condition has been found.

T F       321. The default condition statement is required.

T F       322. The default condition statement executes if none of the Case condition
               statements are True.

T F       323. The default condition statement executes if one of the Case condition statements
               is False.

T F       324. The Date() object returns the current system date to an object instance.

T F       325. The setTime() method returns the number of microseconds that have elapsed
                                                      JavaScript Instructor’s Materials J 3.21


             since January 1, 1970 at 00:00:00.

T F   326. Using the number of milliseconds since January 1, 1970 is easier to calculate the
           number of days that have elapsed than keeping track of the number of days in
           each month.

T F   327. To determine the number of days from the current date, divide the number of
           milliseconds returned by the getTime() method by the product of
           1000*60*60*24.

T F   328. In the expression 1000*60*60*24, the first 60 represents the number of seconds
           in a minute and the second 60 represents the number of minutes in an hour.

T F   329. The Date() object can be used to specify a different date other than the current
           system date.

T F   330.   The Math ceil() method returns a value rounded up to the nearest integer.

T F   331. The Math ceil() method returns a value rounded down to the nearest integer.

T F   332. Given a number, 3.02, Math.ceil(3.02) returns 3.

T F   333. Given a number, -2.99, Math.ceil(-2.99) returns 2.

T F   334. Web designers must be careful when writing onmouseover event handlers.

T F   335. The onmouseout event handler triggers JavaScript code when the mouse pointer
           is dragged off an associated object.

T F   336. The onmousedown event handler triggers JavaScript code when the mouse
           button is released.

T F   337. The onmouseup event handler triggers JavaScript code when the mouse button is
           released.

T F   338. The onmousemove event handler triggers JavaScript code when the user moves
           the mouse pointer.

T F   339. The selectedIndex property provides the position of the item selected in a Select
           option list.

T F   340. The onchange event handler triggers an event whenever an object that is
           associated with the event handler changes.
J 3.22 Project 3 Enhancing the Use of Image and Form Objects


Short Answer
  341. A(n) __________ is a set of images all the same size that display in the same location,
       one after another.

  342. Another name for rolling banners is dynamic images or __________.

  343. For a rolling banner or image rollover to work, it must be assigned to the same
       __________ as the previous images.

  344. To create an image object, add the __________ attribute to the IMG SRC tag.

  345. The __________ used in the IMG SRC tag allows JavaScript code to reference the image
        object as a variable name.
  346. The Width and Height attributes in the IMG SRC tag are measured in __________.

  347. When assigning a new image to an image object, the object name in the __________
       must match the object name in the IMG SRC tag.

  348. A(n) __________ is a collection of data items, represented or referenced by a single
       variable name.

  349. A(n) __________ is a number that designates an individual item or occurrence in an
       array.

  350. The first item in an array is element __________.

  351. Subscripts are placed after the array name in __________.

  352. A subscript can be any valid JavaScript variable or __________.

  353. Arrays are __________ objects.

  354. To create an array, use the __________ keyword to create an object instance.

  355. __________ are useful for storing large quantities of items.

  356. In JavaScript the default first element in an array is element __________.

  357. In a simulated array, the first item (element zero) indicates the __________ in the array.

  358. The data in an array is stored __________.

  359. The __________ is another way to test multiple conditions.

  360. The Switch statement starts testing with the first __________ and continues until all
       conditions are tested.
                                                       JavaScript Instructor’s Materials J 3.23


361. The __________ statement passes control to the first statement after the closing brace for
     the Switch statement.

362. The __________ statement is __________ and executes if none of the case conditions are
     True.

363. After creating a Date object, the __________ method returns the number of the current
     month.

364. The __________ method returns the number of milliseconds that have elapsed since
     January 1, 1970 00:00:00.

365. To determine the number of days from the current date to a given future date, divide the
     number of milliseconds by the product of __________.
366. The Math ceil() method returns the __________.

367. Given the following: var days = Math.ceil(8.09), the amount returned is __________.

368. A common error that may occur with mouse event handlers is the user might __________
     over an object associated with an event handler before the page is loaded fully.

369. In the event of an error with a mouse event handler, simply __________ the Web page.

370. The __________ event handler triggers JavaScript code when the mouse pointer is
      dragged off an object.

371. The __________ event handler triggers JavaScript code when the mouse button is
     pressed.

372. The __________ event handler triggers JavaScript code when the mouse button is
     released.

373. The __________ event handler triggers JavaScript code when the user moves the mouse
     pointer.

374. The selectedIndex property can be used to associate __________ items with
      corresponding array items.

375. The onchange event handler triggers an event whenever a(n) __________, such as a text
     box, changes.
J 3.24 Project 3 Enhancing the Use of Image and Form Objects


TEST BANK ANSWERS FOR PROJECT 3
USING OBJECTS TO CREATE A SHOPPING CART APPLICATION

Multiple Choice

  266. d [J 3.7]        271. d [J 3.9]        276. a [J 3.14]       281. c [J 3.16]     286. a [J 3.23]
  267. b [J 3.7]        272. b [J 3.9]        277. c [J 3.14]       282. b [J 3.16]     287. d [J 3.23]
  268. c [J 3.8]        273. c [J 3.9]        278. a [J 3.14]       283. b [J 3.23]     288. c [J 3.29]
  269. a [J 3.8]        274. d [J 3.13]       279. c [J 3.14]       284. d [J 3.23]     289. a [J 3.30]
  270. c [J 3.9]        275. b [J 3.13]       280. b [J 3.14]       285. b [J 3.23]     290. d [J 3.30]


True/False

  291. T [J 3.7]        301. T [J 3.9]        311. T [J 3.9]        321. F [J 3.14]     331. F [J 3.16]
  292. F [J 3.7]        302. T [J 3.9]        312. F [J 3.10]       322. T [J 3.14]     332. F [J 3.16]
  293. T [J 3.7]        303. T [J 3.9]        313. T [J 3.10]       323. F [J 3.14]     333. F [J 3.16]
  294. F [J 3.8]        304. F [J 3.9]        314. F [J 3.10]       324. T [J 3.14]     334. T [J 3.23]
  295. T [J 3.8]        305. T [J 3.9]        315. F [J 3.10]       325. F [J 3.14]     335. T [J 3.23]
  296. F [J 3.8]        306. F [J 3.9]        316. T [J 3.13]       326. T [J 3.14]     336. F [J 3.23]
  297. T [J 3.8]        307. T [J 3.9]        317. F [J 3.13]       327. T [J 3.14]     337. T [J 3.23]
  298. T [J 3.8]        308. T [J 3.9]        318. T [J 3.13]       328. T [J 3.14]     338. T [J 3.23]
  299. F [J 3.8]        309. F [J 3.9]        319. F [J 3.14]       329. T [J 3.14]     339. T [J 3.29]
  300. T [J 3.8]        310. F [J 3.9]        320. T [J 3.14]       330. T [J 3.16]     340. T [J 3.30]


Short Answer

  341. rolling banner [J 3.7]             350. zero (0) [J 3.9]                 359. switch [J 3.13]
  342. image rollover [J                  351. square brackets [J               360. condition [J 3.13]
        3.7]                                    3.9]                            361. Break [J 3.14]
  343. location [J 3.8]                   352. numeric value [J                 362. default, optional [J
  344. Name [J 3.8]                             3.9]                                  3.14]
  345. Name attribute [J                  353. built-in [J 3.9]                 363. getMonth() [J 3.14]
        3.8]                              354. new [J 3.9]                      364. getTime() [J 3.14]
  346. pixels [J 3.8]                     355. Arrays [J 3.9]                   365. 1000*60*60*24 [J
  347. JavaScript code [J                 356. zero (0) [J 3.9]                       3.14]
        3.8]                              357. number of elements               366. highest integer [J
  348. array [J 3.9]                            [J 3.9]                               3.16]
  349. subscript [J 3.9]                  358. sequentially [J 3.10]            367. 9 [J 3.16]
368. move the mouse [J      371. onmousedown [J       374. selectedIndex [J
      3.23]                      3.23]                     3.29]
369. reload or refresh [J   372. onmouseup [J 3.23]   375. object [J 3.30]
      3.23]                 373. onmousemove [J
370. onmouseout [J 3.23]         3.23]

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:37
posted:7/14/2011
language:English
pages:25