Assignment title: Management
CS100 Winter 2017
Assignment #2 - JavaScript
Due: 1:00pm March 17, 2017
You do not attend a lab session during the week of March 13 to March 15, 2017.
Instead, please upload your completed Assignment #2 to your Hyperion account by the date and time shown
above. As described below, that means that you are updating your original page1.html and placing all of your
JavaScript in a file called assign2.js that you will add to your public_html directory.
You are to add a set of JavaScript effects to the first page (page1.html) of your existing Assignment #1. If you
wish to retain your original page1.html, then you may want to save a copy under a different filename.
JavaScript Requirements:
The objective of this assignment is to introduce you to the use of JavaScript in adding interactive elements to
web pages without getting into the complexities of JavaScript. Consequently, you are being asked to utilize the
examples from the Lab Notes and w3schools.com (see http://www.w3schools.com/jsref/dom_obj_event.asp) to
add some of the effects seen in those examples to your existing web site. I estimate that the time requirements
will be less than the time it took you to add styles to your original assignment. But, be very careful in copying
and pasting examples from the Lab Notes or from w3schools.com as simple errors such as a missing brace will
not be as easy to spot as was the case when style effects went wrong.
Place all of your JavaScript in the single file, assign2.js. To keep this as straightforward as possible, complete
all of the requirements (see the mark distribution that follows) using only your page1.html file. You will need
to expand your original page1.html to include the elements as described in the following requirements.
1. ____/10 Add a "Click me" button that, when clicked, causes the name and invention year of a historical
technology invention to appear as an h3 heading just below the button.
2. ____/10 Add a paragraph saying "Alternating Text Colour" where the text colour starts alternating
between red and green using onmousedown and onmouseup events.
3. ____/10 Add a paragraph saying "Watch the Font Change" and cause the font size, colour and font
family to change when a button called "Go" is clicked. Choose what you like for the size, colour and
font but make it easy for the marker to notice the changes.
4. ____/10 Use onmouseover and onmouseout to expand and contract your home page image from your
navigation bar. http://www.w3schools.com/jsref/event_onmouseover.asp takes you to a happy face
example that has what you need. If you didn't originally include height and width attributes to control
your images, you will need to add them for your home page image.
5. ____/10 Incorporate the example from the bottom of the page
http://www2.cs.uregina.ca/~cs100/index.php?page=how_to_do/javapage so that you can enter your first
and last names and click the submit button to display the message Firstname Lastname has finished
Assignment 2.
TOTAL out of _______/50
Student Name: Student Number:Note:
• All three assignments must be completed in order to pass CS100. They are required elements of the
class. If you fail to submit an assignment, you will not receive a passing grade in the class.
• Unlike Assignment #1, the due date and time for Assignment #2 is the same for everyone.