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

  1. Create a basic web page named default.htm that contains hyperlinks to each file you create in this assignment. 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. The next HTML file will have both an HTML component and several Javascript components. In the HTML component, include the answers to the following questions:   [HTML component: 4 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. Explain each of the following JavaScript terms and give an example for each item from JavaScript:   [1 mark]

      • variable:

      • constant:

    3. List and give an example for 4 of the 5 data types used in JavaScript:   [2 marks]





    4. Include a hyperlink to your second file in this assignment (which you will create in question 3 below).   [0.5 marks]

    Include the following Javascript components in this file:   [Javascript component: 10 marks]

    1. Include an HTML image tag at the top of the HTML portion of the web page (above all text). Using Javascript, turn this image into an animated "ad banner" using any images you like for this banner. There should be at least 3 images in the banner. Each individual image (as it appears in the animated banner) should also function as a hyperlink to one the following web sites:   [6 marks]


    2. At the bottom of the file, below a horizontal rule/line, include another set of script tags and use Javascript to inform the user of the date/time that this file was last updated.   [1 mark]

    3. At this point in the web page (ie. still inside the pair of script tags), use the "if" control structure to determine if the visitor has arrived at your page from a hyperlink on another web page or if the visitor has arrived "directly" at your web page (which he/she could do by typing in the full URL in the location area of your web browser).   [3 marks]

      • If he/she has arrived via a hyperlink from another web page, include a hyperlink back to that page.

      • If the person arrived "directly" at this page, include nothing.

  3. Create a final web page for this assignment that contains the following HTML and Javascript features:  [9 marks]

    1. in the HTML portion of your web page include two graphic images ... you may use some graphics from the animated graphics file (available for download from the course web site) or any other graphics you choose. Each image should be a hyperlink to any "remote" site on the Internet.   [4 marks]

      Using Javascript:

      • each image should "change" to another image when the mouse/cursor is over the image
      • each image should "change" back to its original image when the mouse is no longer over the image
      • each of the above changes should be done using Javascript functions and event handlers

    2. When the visitor first opens the page, prompt for his/her name and store that name in a javascript variable. This should be done using an event handler and a Javascript function. Welcome the visitor by name to your page ... either in a dialog box or somewhere in the middle of the HTML portion of the page, include a set of script tags and use Javascript to welcome that visitor (by name) to your web page.   [2 marks]

    3. At that same point in the web page (ie. in the middle of the web page), use Javascript to inform the visitor of the name and version of his/her web browser.   [2 marks]

    4. From the previous file in your assignment, copy/paste and include at the bottom of this page the Javascript items created for questions 2 b) and c) (above). They should work (and look) in this file just as in the previous file.   [1 mark]

Return to JavaScript Level 1 Home Page