CSC 551: Web Programming
Spring 2004

HW3: Event-driven JavaScript


Part 1: Talk Like a Pirate

In 1995, John Baur and Mark Summers invented a new holiday, International Talk Like a Pirate Day. As they proposed it, on every September 19th, people around the world are encouraged to talk like a pirate (with lots of "Arrrrs" and "Ahoys" and the like). At the official Talk Like a Pirate Day Web site, www.talklikeapirate.com, you can read about the history of the holiday, order official merchandise, and even experiment with a simple Web page that translates simple English phrases into pirate talk.

You are to design and implement a better Web page for translating English text into Pirate talk. The JavaScript code for performing the translation is provided below. The PHRASES array contains English words/phrases and their pirate translations. The array is used by the Translate function, which takes a string as input, searches that string for substrings from PHRASES, and replaces the English phrases with their pirate translations. Your Web page should include a text area where the user can enter text, a button or clickable image to initiate the translation, and another text area where the translated text will appear. Feel free to be creative, adding images or embelleshments to the page and expanding the English-Pirate vocabulary in PHRASES.

PHRASES = [["hello", "ahoy"], ["hi", "yo-ho-ho"], ["pardon me", "avast"], ["excuse me", "arrr"], ["my", "me"], ["friend", "me bucko"], ["sir", "matey"], ["madam", "proud beauty"], ["miss", "comely wench"], ["stranger", "scurvy dog"], ["officer", "foul blaggart"], ["where", "whar"], ["is", "be"], ["the", "th'"], ["you", "ye"], ["tell", "be tellin'"], ["know", "be knowin'"], ["how far", "how many leagues"], ["old", "barnacle-covered"], ["attractive", "comely"], ["happy", "grog-filled"], ["nearby", "broadside"], ["restroom", "head"], ["restaurant", "galley"], ["hotel", "fleabag inn"], ["pub", "Skull & Scuppers"], ["bank", "buried trasure"] ]; function Capitalize(str) // Returns: a copy of str with the first letter capitalized { return str.charAt(0).toUpperCase() + str.substring(1); } function Translate(text) // Returns: a copy of text with English phrases replaced by piratey equivalemts { for (var i = 0; i < PHRASES.length; i++) { var toReplace = new RegExp("\\b"+PHRASES[i][0]+"\\b", "i"); var index = text.search(toReplace); while (index != -1) { if (text.charAt(index) >= "A" && text.charAt(index) <= "Z") { text = text.replace(toReplace, Capitalize(PHRASES[i][1])); } else { text = text.replace(toReplace, PHRASES[i][1]); } index = text.search(toReplace); } } return text; }

Part 2: GPA Revisited

Create an event-driven version of your gpa.html page that uses a single text area for inputting the information for all courses. As before, each course should have its name, grade, and credit hours listed on a single line, in that order. When the user clicks on a button, the courses should be read from the text area and the grades processed. Each value output by the program: total credit hours, total grade points, and grade point average, should appear in a separate text box with appropriate text label. For example:

GPA form example