CSc 337 - Web Programming > Assignments > Assignment 5

Due: 3 Feb 2012, 11:59pm

This assignment aims to give some practice with JavaScript, focusing both on using Javascript's callback events and on DOM manipulation.

In this assignment, you'll be creating an extremely simple HTML page (called index.html) consisting of some basic elements that will perform actions via Javascript. This means that you aren't required to style the page any more than what is laid out in the list below. Your JavaScript should be in a separate file named script.js, linked with a script tag.

1. A button labelled "Embiggen" and a nearby div containing some text. Every time you press the button, the text's font size in the div increases by 1px.
2. A button labelled "Hide", and a nearby div containing some text. When you press hide, the div should disappear, and the button's text should change to "Show". If you press the button again, the div should reappear, and the button's text should change to "Hide" and be back to the starting functionality.
3. A 300px-by-300px div (color the background so it's visible) where, every time you move the mouse over it, the div moves to the right a few pixels. It's okay if it goes off the screen after doing this several times. You will likely need to position the div absolutely.
4. An image (sized originally at 100px by 100px) which, every time you double-click it, becomes 10px taller and wider.
5. A text field, a button labelled ">> Copy >>", and another text field. Pressing the "Copy" button should copy text from the first text field into the second text field.

To get a button labelled ">> Copy >>", you can use HTML Entities by adding the attribute value=">> Copy >>" to your button.

Information about JavaScript functionality can be found at the MDN Reference. Sitepoint has a good event attributes list, several of which are relevant to this homework.

External JavaScript libraries are not allowed. The purpose of this assignment is to gain some understanding of how JavaScript is used to interact with elements on the page. Until we discuss external libraries in lecture, all JavaScript code that your project uses is expected to be entirely your own.

As detailed on the homework submission page, this homework must be on the class web server in a folder titled homework5 for it to be graded. The project itself should be in files called index.html and script.js.