Events and Handlers

JavaScript resources

• W3CSchools JavaScript tutorial.
• Douglas Crockford's JavaScript web site.
• The JavaScript Object Notation JSON.
• The worlds most misunderstood programming language.
• JavaScript the good parts (talk).
• JavaScript style tool JSLint.
• JavaScript debugger FireBug (Firefox).

Hello World

• Lab 1 hello.html
• Lab 2 hello.html
• Lab 3 hello.html
• Lab 4 hello.html
• Lab 5 hello.html
• Lab 6 hello.html
• Lab 7 hello.html
• Lab 8 hello.html
• Lab 9 hello.html
• Lab 10 hello.html
• Lab 11 hello.html

Lab 17

Interactive Playlist

1. Download and extract lab17.zip in your LABS directory.
2. Examine playlist.html in a browser. Enter a song name in the text input field. Chick the Add Songs button.
3. In playlist.js files, modify handleButtonClick function to post an alert when the button gets pushed (pages 90-93).
4. Modify this function to get the song name typed in by the user (pages 94-96). Use the alert function to complain if no song name has been entered.
5. Create a new li element to hold this song name (pages 97-99).
6. Add the element to the unordered list in the page's DOM (pages 100-102).
7. Uncomment the link to playlist.css in playlist.html and reload your browser page to see the effect. Examine the source for this CSS file.
8. Use playlist_store.js to create a persistent store for your playlist (page 103-106). If this does not work in your browser, try a different one. (Adoption of this, and other, HTML5 functionality varies across browsers.)
9. Edit the index.html file in your LABS directory to link to the playlist.html page in a LAB17 directory.

Extra Credit

Enhanced Interactive Playlist

1. Modify your playlist form to include two input fields: one for the song's title and another one for its author.
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. Add the two span elements (and some appropriate text between them) as children of the li element.
7. Attach this element to the DOM as before.
8. Save the content of this element in the persistent store.
9. Modify the CSS to display authors in bold and titles in italics.

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