CSC 551: Web Programming
Fall 2001

HW4: Event-driven JavaScript


Part 1

As we discussed in class, one of the advantages of text boxes and text areas over prompts is persistence and modifiability. If the user enters input into several text boxes, those values persist in the boxes. If the user changes their mind or wants to re-execute code based on new values, they can simply edit the appropriate text boxes and re-execute.

Create a new 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. The output of your program, which should include the total credit hours, total grade points, and grade point average, should appear in a separate text area.

To handle tabs and carriage returns within the text area, you will need to update the Arrayify function so that it correctly handles all whitespace characters.

function IsWhiteSpace(ch) // Returns: true if ch is a whitespace character, else false { return (ch == " " || ch == "\t" || ch == "\n" || ch == "\r"); } function Arrayify(str) // Assumes: str is a sequence of words, separated by whitespace // Returns: an array containing the individual words { var items = new Array(); var count = 0; while (str != "") { var index = 0; while (index < str.length && IsWhiteSpace(str.charAt(index))) { index++; } if (index < str.length) { var item = ""; while (index < str.length && !IsWhiteSpace(str.charAt(index))) { item += str.charAt(index); index++; } items[count] = item count++; } str = str.substring(index+1, str.length); } return items; }

Part 2

The team project for this course will involve writing a Web-based JavaScript program for playing BlackJack. If you are not familiar with the game, the rules are as follows:

Without writing any code, design the layout of a page for playing the game. That is, draw a picture of the page and identify the individual page elements that make up the page. Be sure to annotate those elements with a brief description of what event-handling should occur with respect to the elements. For example, if there is a button on the page, describe what should happen when the user clicks on that button. Be sure to consider:

Note: To familiarize yourself with the game, you are allowed to find and play with existing BlackJack games on the Web. However, the design of your page should not rely on these pages, most of which are terribly designed and/or rely on language features that you are not familiar with. Use your understanding of form elements and JavaScript to produce your own design. Under no circumstances are you allowed to view source code of existing BlackJack programs.

Repeat: you are not allowed to view the source code of any existing BlackJack page.