CS 131       Fall 1998

Lab 8: User Interface

In this lab, you will compare and contrast three different versions of the same JavaScript program. In the first version, you will write and execute your code in the JavaScript interpreter, as you have been doing throughout this course. Next, you will embed that same code in an HTML page so that it can be directly executed by the browser. Finally, you will incorporate form elements to make the program event-driven. Having implemented these three versions, you will then analyze the advantages and disadvantages of the different user interfaces.

The JavaScript Interpreter

Up to this point in the course, you have been executing all of your JavaScript code in the provided interpreter. As has been mentioned, the interpreter is a Web page that was written specifically for this course in order to introduce you to programming. It provides a simple environment in which you can write and repeatedly execute your code. It also provides easy access to turtle graphics routines.

Because of its ease of use, the JavaScript interpreter can be used for solving a wide variety of simple problems. For example, consider the task of computing your final average for this course. Recall the grading scheme for this course, as defined in the course syllabus:

online lessons 10 %
12 lab assignments 35 %
2 50-minute tests 30 %
cumulative final exam 25 %

Letter grades will be assigned at the end of the semester according to your weighted average. An average of 90 or above is guaranteed no worse than an "A", 80 or above a "B", and so on. Of course, some additional curving may occur to raise grades beyond this minimal assignment.



Exercise 1:     Within the JavaScript interpreter, write code which prompts the user for their individual grades: lesson average, lab average, test 1 score, test 2 score, and final exam score. It should display each of these values and the resulting average in a user-friendly form. In addition, it should display the minimum letter grade earned.

In writing this code, you must define and make use of the following functions:

function computeAverage(lessons, labs, test1, test2, exam) // Given : lessons <= 100, labs <= 20, test1 <= 50, test2 <= 50, exam <= 100 // Returns: the final average given these individual grades function letterGrade(average) // Given : 0 <= average <= 100 // Returns: the corresponding letter grade ("A", "B", "C", "D", or "F") Save your code in a document called Lab8.




Exercise 2:     In order to determine whether your code from the previous exercise worked correctly, you may have been tempted to just pick random numbers for the individual grades and then see if the resulting average looked "reasonable". While this haphazard approach to testing might work for simple pieces of code, it can fail miserably when the computation becomes complex. For example, can you accurately predict what the average would be given a lesson average of 87.8, a lab average of 18.2, test scores of 36 and 42, and a final exam score of 88?

When testing complex code, you should always strive to:

In addition to the perfect scores example, list two other cases in which it is easy to predict the final average of a student. Verify that your code produces the correct answer in these cases.






List a set of grades which produces an average just below a letter grade cutoff (within 1 point), and another set which produces an exact cutoff average (e.g., 90). Verify that your code produces the correct answer in these cases.






List a set of grades picked completely at random and use a calculator or the JavaScript interpreter to compute the average. Verify that your code produces this same average.






Embedding JavaScript in HTML

The JavaScript interpreter was designed to provide beginning programmers with a simple programming environment. The interpreter itself is a Web page, containing a text area for your code and buttons for executing the code and opening the Turtle Graphics window. The page is divided into two frames, with the top frame containing the code and the bottom frame displaying the output of that code. Of course, you didn't need to know all of this in order to user the interpreter. You simply saw it as an environment in which you entered code, clicked on a button, and viewed the results.

While the interpreter page makes editing and executing JavaScript code easy, it is not necessary for programming. The interpreter is nothing more than a middleman, providing you with a simple interface to the Web browser which is ultimately responsible for executing the code. As such, it is possible to place JavaScript code directly into a Web page and execute it using only the browser. This is done, not surprisingly, through HTML tags. Recall that tags are used in HTML to specify elements that are to be treated in a special way. For example, text enclosed within the tags <B> and </B> are to be displayed in bold. To specify JavaScript code, the tags <SCRIPT LANGUAGE="JavaScript"> and </SCRIPT> are used to enclose the code.

For example, the following HTML document contains a single line of JavaScript code:

<HTML> <HEAD> <TITLE> Lucky Number Generator</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> document.write("Today's lucky number is " + Math.ceil(Math.random()*100)); </SCRIPT> </BODY> </HTML>

When this page is loaded into the browser, the code inside of the SCRIPT tags will be executed as JavaScript code and the output of that code will be displayed on the page. In this case, the code will generate a random integer between 1 and 100 and display it as the lucky number of the day.

Any collection of JavaScript code can be placed inside SCRIPT tags and executed by the browser. When executing code that contains both function definitions and executable code, it is standard practice to split the code into those two distinct parts. The function definitions are included in the HEAD section of the page so that they will be loaded first. Since the BODY of a page is loaded only after the HEAD is completed, calls to those functions will be made only after the functions have been defined.

For example, the following HTML document could serve as the framework for your grading program. If you placed the definitions of the functions computeAverage and letterGrade in the HEAD section and the code which prompts the user and displays the grade in the BODY, then this code could be executed simply by loading this page into the browser.

<HTML> <HEAD> <TITLE> CS131 Grade Calculator </TITLE> <SCRIPT LANGUAGE="JavaScript"> /////////////////////////////////////////////////////////// // YOUR DEFINITIONS OF computeAverage AND letterGrade HERE /////////////////////////////////////////////////////////// </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> /////////////////////////////////////////////////////////// // YOUR CODE FOR READING IN INDIVIDUAL GRADES AND // DISPLAYING THE AVERAGE AND LETTER GRADE HERE /////////////////////////////////////////////////////////// </SCRIPT> </BODY> </HTML>


Exercise 3:     Cut-and-paste this HTML code into a document called grade1.html. Insert your code from Exercise 1 into the appropriate places in this page, and then load the page to execute it. Note: to load a page that is stored as a local document on your computer, select "Open Page" from the File menu in the browser.

Test this new version on the same input values as before (see Exercise 2).





Event-driven JavaScript

While the previous exercise demonstrated that JavaScript code can be directly executed in a browser, it still utilizes the same simple routines (prompt and write) for interacting with the user as before. When working within a Web page, the entire world of HTML is opened up to the JavaScript programmer. In particular, form elements such as text boxes and buttons are available and can be controlled by JavaScript code.

The following HTML document is intended to show you an alternative interface to the grading program. Instead of prompting the user for input when needed, the page provides text boxes for the user to enter grades into. Each time a grade is entered or modified, the corresponding average is automatically computed and displayed on the page. Don't panic -- you are not expected to fully understand the details of this document at this time.

<HTML> <HEAD> <TITLE> CS131 Grade Calculator </TITLE> <SCRIPT LANGUAGE="JavaScript"> /////////////////////////////////////////////////////////// // YOUR DEFINITIONS OF computeAverage AND letterGrade HERE /////////////////////////////////////////////////////////// function updateForm(whichInput, max) // Given : whichInput is the form element that has just been changed, // max is a positive number (upper bound on score) // Results: if the new input is OK, the average and letter grade are updated { if (isNaN(whichInput.value) || whichInput.value < 0 || whichInput.value > max) { alert("The number must be between 0 and " + max); whichInput.value = 0; // reset the illegal input value whichInput.focus(); // return the cursor to the illegal input } else { document.Grades.average.value = computeAverage(parseFloat(document.Grades.lessons.value), parseFloat(document.Grades.labs.value), parseFloat(document.Grades.test1.value), parseFloat(document.Grades.test2.value), parseFloat(document.Grades.exam.value)); document.Grades.letter.value = letterGrade(parseFloat(document.Grades.average.value)); } } </SCRIPT> </HEAD> <BODY> Enter your individual grades in the boxes below, and your final average will be automatically computed and displayed. <HR> <FORM NAME="Grades"> <TABLE> <TR> <TD> Enter your lesson average (out of 100): <TD> <INPUT TYPE="Text" NAME="lessons" SIZE=5 VALUE=0 ONCHANGE="updateForm(document.Grades.lessons, 100);"> </TR> <TR> <TD> Enter your lab average (out of 20): <TD> <INPUT TYPE="Text" NAME="labs" SIZE=5 VALUE=0 ONCHANGE="updateForm(document.Grades.labs, 20);"> </TR> <TR> <TD> Enter your score on Test 1 (out of 50): <TD> <INPUT TYPE="Text" NAME="test1" SIZE=5 VALUE=0 ONCHANGE="updateForm(document.Grades.test1, 50);"> </TR> <TR> <TD> Enter your score on Test 2 (out of 50): <TD> <INPUT TYPE="Text" NAME="test2" SIZE=5 VALUE=0 ONCHANGE="updateForm(document.Grades.test2, 50);"> </TR> <TR> <TD> Enter your score on the final exam (out of 100): <TD> <INPUT TYPE="Text" NAME="exam" SIZE=5 VALUE=0 ONCHANGE="updateForm(document.Grades.exam, 100);"> </TR> <TR> <TD COLSPAN=2> <HR> </TR> <TR> <TD> Your average for the course is: <TD> <INPUT TYPE="Text" NAME="average" SIZE=5 VALUE=0 ONFOCUS="this.blur()"> </TR> <TR> <TD> Your letter grade will be no worse than: <TD> <INPUT TYPE="Text" NAME="letter" SIZE=1 VALUE="F" ONFOCUS="this.blur()"> </TR> </TABLE> </FORM> </BODY> </HTML>


Exercise 4:     Cut-and-paste this HTML code into a document called grade2.html. Insert your function definitions into the appropriate places in this page, and then load the page to execute it.

Note that each input box has a default value of 0 to start with. You can modify any of these values by clicking in the appropriate box and typing the desired value. When you remove the cursor from that box (either by clicking elsewhere or by hitting the tab key), the grade is automatically recomputed. Test this new version on the same input values as before (see Exercise 2).

What happens if you enter a grade or average outside of the expected range?







Can you manually change the average or the letter grade by entering values in the corresponding boxes? Just by looking at the HTML code, what is different about these two INPUT boxes as opposed to the INPUT boxes for the grades?








Comparing User Interfaces

While the three different versions of your grading program all perform the same basic task, they present very different interfaces to the user. In the first version, the user executes the code by loading it into the interpreter and clicking the Execute button. Values are read in using prompt boxes and output is displayed in a separate frame. In the second, the user loads the Web page containing the code and views the resulting output in the browser. As before, input is obtained using prompt boxes. In the third version, the user enters input into text boxes on the page, and sees the corresponding average and letter grade in other text boxes.


Exercise 5:     In the text, the authors refer to several characteristics of a good computer system. Among others, they argue that a system should be transparent, forgiving, and visually oriented. Compare the user interfaces of your three versions of the grading program. How does each of them rate based on these criteria? What further improvements could be made in the design of such a program?

























Hand in a printout of the Lab8, grade1.html, and grade2.html documents, attached to these sheets.