JavaScript Exercises

JavaScript Exercise #1

Create a page with JavaScript to do the following.  These can all be on one page. 

1. Prompt the user for their name.

2. Use a pop-up box to welcome the user by name.

3. Display the current date on the page in the following format: October 30, 2000.  Do not display the time.  Do not "hard code" the date; if I load the page tomorrow, I should get a different date than if I load it today.

4. Display the last modified date of the document.

5. Put some useful advice, on any subject, in the status line of the browser.

6. Display a message saying Good Morning if it is in the morning, Good Afternoon if it is in the afternoon, and Good Evening if it is in the Evening.


JavaScript Form Validation Exercise

1. Create a form that includes 2 textboxes (one for name, one for email address), a textarea, a dropdown box (<select> tag), a set of radio buttons, and a set of checkboxes.  Format the form using a table.  The ACTION attribute of the form tag should be to email the form results to your email address.  Feel free to use a preexisting form rather than creating one for this exercise.

2. Add JavaScript event handlers to the form to validate the form before it is emailed to you.  If there is a problem, display the problem with the page in some way.  Possible ways to do this are:

a) Validate that an entry has been made in each form element

b) Validate that the email address contains an @ sign.

Note: Form validation is one of the most common uses of JavaScript; I think you will learn a lot from doing this assignment.

3. If you have time and want to try something more, add a second drop down list and make this second one dynamic, i.e. make the choices that appear in the second drop down list depend on what choice is made in the first list.    


JavaScript Exercise 3 - Image Rollovers

I. Create a navigational bar with images.  When the mouse is over the image, an alternate version of the image should appear.  When the mouse moves off the image, the original image should reappear.  You may use 

1. the images below (which are taken from the website for the text at www.jsworkshop.com, or 
2. create your own at www.cooltext.com or a similar site, or 
3. create your own by using a graphics program.  

Preload the images so they will load quickly during the mouseover.

II. Add a stylesheet to the page or an external stylesheet that turns off underlining for text links, makes them a different color than black or blue, or changes the appearance of the link during a mouseover.


JavaScript Exercise 4 - DHTML to Display Hidden Text

Modify your code for the form validation exercise to display the deficiencies in the form on the same page at the top by unhiding text (deficiency messages) that is originally hidden. 

If you were unable to do the form validation exercise, write code to display text if it is before noon and hide it if it is afternoon.

The same code for this exercise will probably not work in Netscape and Internet Explorer, so try to do browser detection so that the appropriate JavaScript is executed.