Events and Handlers

JavaScript resources

Lab 12/4/12

Interactive Playlist

1. Create a Chapter17 directory on your thumbdrive.
2. Create playlist.html (content on page 87) and playlist.js files.
3. Set up a handler to handle user clicks on the Add Song button.
4. Write the handler to get the song name typed in by the user.
5. Create a new element to hold this song name.
6. Add the element to the unordered list in the page's DOM.

Enhanced Interactive Playlist

1. Modify your playlist form to include two input fields: one for the song's titleauthor.
2. Use the prompt() function to get values for these fields, if the user leaves one (or both) blank.
3. Create a span element to contain the song title.
4. Give this element a class property with value title. (Hint: use the setAttribute() method.)
5. Create another span element (with class author) for the author field.
6. Create a list item element (li) and add the two span elements as its children.
7. Attach this element to the DOM as before.
8. Use CSS to display authors in bold and titles in italics.

Persistent Interactive Playlist

If you have the chance,

1. Create the playlist_store.js file provided on page 105, and
2. Integrate this code into your playlist.html file (page 106).

Edit the index.html file in your LABS directory to have a link to the playlist.html page in a Chapter17 directory.

Pocket Calculator

1. Give each button on your calculator a unique id attribute value (such as key_0 or key_enter).
2. Cause an alert to be displayed when a key is clicked. The alert should include the name of the key being clicked.

Always turn off your computer and screen before leaving the room.