Lesson 27: JavaScript Strings & Page Design

Due by the beginning of class on Wednesday, Apr. 14

In this lesson, you will design and implement a Web page interface for the palindrome program from the previous lesson. In addition to improving the robustness of this program, you will incorporate dynamic images in the page to make the page more expressive.

Web Pages for Programs

As you have seen throughout this course, the Web provides a simple and intuitive user-interface for accessing information. The use of form elements such as text boxes, text areas, and buttons allows the user to interact easily with the page. By embedding JavaScript programs in HTML code, it is possible to make use of this attractive and intuitive interface for programs. For example, a program which uses text boxes to read input and a text area to display output is usually more attractive and easy to use than one which uses prompt and alert boxes.

When writing a Web page to provide the user-interface for a JavaScript program, it is important to design that page carefully so that the page adds to the ease of use of the program. The extraneous use of colors, unnecessary or confusing form elements, or large images can detract from the page and overwhelm the user. Recall the three guidelines for Web page design: the page should be transparent (meaning that it should be intuitive to use, with unnecessary details hidden away), forgiving (meaning that it should handle mistakes gracefully), and visually-oriented.


Exercise 1:     Design and implement a Web page for reading in a word and determining if that word is a palindrome. The layout of the page and the type of form elements used to read in the word and display the results are entirely up to you. Your final page should be attractive and intuitive to use, however.

Note: you may make use of the isPalindrome function from the previous lesson.


Exercise 2:     In addition to single words, entire phrases or sentences can be palindromes. When testing a phrase, spaces and punctuation marks should be ignored. For example, two famous palindrome phrases are:

Madam, I'm Adam. A man, a plan, a canal: Panama. Modify the JavaScript code in your Web page so that it ignores all non-letters in a phrase when testing to see if it is a palindrome. Probably the simplest way of accomplishing this is to define a function called strip which can be used to strip all non-letters out of a string. For example, the call strip("Madam, I'm Adam.") would return the string "MadamImAdam".

Dynamic Images

In Lesson 23, you learned how to display images in a Web page using the IMG element. For example, including the following tag in a page would result in a picture being displayed (specifically, the picture stored at the address: http://www.dickinson.edu/~braught/courses/cs131s99/Images/dwr.gif).

<IMG NAME="picture" SRC="http://www.dickinson.edu/~braught/courses/cs131s99/Images/dwr.gif"> Once an image has been loaded, it is possible to change its picture dynamically. This is done by accessing the src attribute of the image element. For example, the following HTML code produces a page with an image and a button. Initially, the image is the one stored in http://www.dickinson.edu/~braught/courses/cs131s99/Images/dwr.gif, as above. However, each click of the button changes the picture, toggling between the original picture and one stored at http://www.dickinson.edu/~braught/courses/cs131s99/Images/dave.gif. Note that each change in the picture is accomplished by an assignment to the src attribute of the image element. An if statement is used to determine which picture is currently being displayed, and thus determine which new picture to load. Notice that the image does not need to be a part of the form and the form name is not used when accessing the src attribute of the image element.

<HTML> <HEAD> <TITLE> Dynamic Images </TITLE> <SCRIPT LANGUAGE="JavaScript"> function toggleImage() // Given: None // Results: Toggles the image that is displayed between 1 of 2 different // images. { if (document.picture.src == 'http://www.dickinson.edu/~braught/courses/cs131s99/Images/dwr.gif') { document.picture.src = 'http://www.dickinson.edu/~braught/courses/cs131s99/Images/dave.gif'; } else { document.picture.src = 'http://www.dickinson.edu/~braught/courses/cs131s99/Images/dwr.gif'; } } </SCRIPT> </HEAD> <BODY> <CENTER> <IMG NAME="picture" SRC="http://www.dickinson.edu/~braught/courses/cs131s99/Images/dwr.gif"> <FORM NAME="PixForm"> <BR><BR> <INPUT TYPE="button" NAME="picButton" VALUE="Toggle picture" ONCLICK="toggleImage();"> </FORM> </CENTER> </BODY> </HTML>


Exercise 3:     Cut-and-paste the above HTML code into a file and load it into the browser to verify that it behaves as described. Describe the two pictures that are displayed.


Exercise 4:     Add images to your palindrome page so that it displays some "happy" image when the word/phrase is a palindrome, and some "unhappy" image when it is not. The actual images used are entirely up to you. Feel free to scour the net and find just the right images to express your own personal style.

Lesson Summary

Solutions to odd numbered exercises (posted late afternoon of due date).