JavaScript Exercises 2

Timers, Images, Sniffing and Validation

This simple tutorial covers some hugely important apects of Web programming. Do not underestimate the complexity or significance of the questions asked here!

1. Create an HTML form and experiment with form validation. You can submit your forms to this this PHP script to see what arrives back on the server. Either copy this fully qualified URL into your form element;
   action="~doc/web/PHP/GPC.php" or install the source code for GPC.php onto your server
   • Try using POST and GET to submit your form. What is the difference?
   • How can your form simultaneouly submit both GET and POST data?
   • Make sure that you fully understand the relative merits of the GET and POST methods of HTTP. A simple Google search of 'get vs post' returns a wealth of information. (While the W3C resources are definitive they are in places dangerously open to misinterpretation - beware.)
2. Change mailingList.html to improve the data input validation. Research the use of the string object and its associated methods (e.g. indexOf(), lastIndexOf(), substring()). Try to validate the email address so that it contains a @ somewhere within it (i.e. not as the first or last character).
   • Make sure that your forms are valid against your doctype
3. This lecture has discussed the important issue of browser compatibility problems and browser sniffing. It has also briefly looked at client-side versus server-side programming.
   • Note the opening disclaimer and briefly read through http://www-archive.mozilla.org/docs/web-developer/sniffer/browser_type.html. Don't worry if you don't understand every line of code.
   • What differences and similarities can you see between client-side and server-side browser sniffing? What are their relative advantages and disadvantages?
4. The page tut2-1.html sets the background colour to a new random colour that it generates each time it is loaded.
   • Make sure you understand how it works.
   • Add a button which when clicked will ask the user (via a "prompt box") for an interval in seconds. Use a timer to keep changing to new random colour after the interval has elapsed.
   • Add another button that the user can click to stop the colour changing.
5. tut2-2.html will display a blue rectangle made up of 80 separate square blue images arranged in 8 rows each of 10 images. As the user moves the mouse over the images in the rectangle they will flip to display a white image.
   • Study the code and make sure that you understand how it works then amend it so that each blue square only flips to a white square for 10 seconds before it flips back to blue.
   • Change the code again to convert it into a simple game so that if the user manages to get ALL the squares flipped to white they get messages telling them that they've won the game.
   • Try this in different browsers. If you are brave you may consider how to get this to look identical in each browser
6. Try to understand prairieDog.html.
   • Change the code so that instead of the dog moving to the right the cacti gradually slide to the left so that the dog appears to be moving through the scenery.
   • Make the cacti reappear from the right when they have scrolled off the screen.
   • Try offsetting the cacti by different amounts each time they appear so that scenery appears to change.
   • Are your solutions valid XHTML 1.1?
   • Do your solutions work in all browsers?

. .