INFO BIN36: JavaScript, Level 1
Assignment Two — 25 Marks

  1. In the file named default.htm, be sure that it contains hyperlinks to each HTML file you create in this assignment (in addition to the hyperlinks to the files from assignment one). Upload this file and all other HTML and graphic files for this assignment to your "nexus" web account (which is assigned to you by your instructor). Place all image files in a sub-folder called "images". Place all HTML files in the "main" folder of your web account.     [2 marks]

    You will create 2 HTML files for this assignment (in addition to the default.htm file).

  2. In the first HTML file, include the following HTML and Javascript components:   [total: 11  marks]

    1. Include a meta tag (in the correct position in your HTML coding) indicating your name and student number. Include this tag in EVERY file you create in this assignment.    [0.5 marks]

    2. Using Javascript and a pair of script tags, include the date at the top of the web page. The date should show the month, the date and the year -- properly formatted so that the month is in "text" (not a number) and the year appears correctly (ie. Y2K compliant)   [1.5 marks]

    3. Using HTML, create a form which will receive the visitor's name. Using Javascript, take that name and store it in an Internet "cookie" when the visitor clicks on a button. This will require a Javascript "function" to complete this task. In your Javascript coding, check to see if there is a cookie set already. If there is a cookie set already, delete the cookie before you create this "new" cookie.     [3 marks]

    4. Inside the form, include 2 "buttons" which will be used to navigate this assignment.     [2 marks]
      • Make the first button "go to" the second web page in this assignment (which you will create in question 3 below).
      • Make the second button go to the file "default.htm".
      • Neither of these should be a hyperlink, but use Javascript to change to the other web page.

    5. Also inside this form, create a "select list" (or "drop down" list). Each item in the list will point to 4 graphic images. You may use any 4 images for this question. Using Javascript, when the visitor selects an image from the list and clicks on a button, that image should appear in a new, smaller browser window. Do not include a menu or toolbar in that new browser window. Size the window so that it is slightly larger than the image file.     [4 marks]

      Hint: This form should not have a "submit" button (it does not require a submit button).

  3. In the second file for this assignment, include the following components:  [total: 12  marks]

    1. When the page opens, get the visitor's name from the cookie and welcome the visitor in an "alert" dialog box. If there is no cookie, alert the visitor that there is no cookie set (although, there should be a cookie set from the previous web page).     [2 marks]

    2. Create an "Order Inquiry" HTML form. This form will include the pricing for some image files (which are available in the "animated" graphic file you may download from the course web site). The form should include the following features:      [10 marks]

      • obtain the name and e-mail address of the visitor completing the form     [1 mark]
      • create a select list with the following parts and pricing information:     [1 mark]
        • dancing bear, cost: $3.50
        • devil dan, cost: 2.75
        • devil, cost: 2.00

      • When the visitor selects an item from the list:     [3 marks]
        • display the cost in one text output box
        • display the GST in another output box
        • display the PST in another output box
        • display the total cost in another output box

      • send the output to     [1 mark]

      • before submitting the data collected in the form, write a Javascript function that will check the form to ensure that:     [4 marks]

        • both the name and e-mail fields have data entered in them (ie. that neither field is blank)
        • that the e-mail address contains both "@" and "." characters
        • ensure that all the numeric "output" fields contain "numeric" data

Return to JavaScript Level 1 Home Page