COMP284 Practical 8
JavaScript (3)

Introduction

• This worksheet contains further exercises that are intended to familiarise you with JavaScript
Programming. While you work through the tasks below compare your results with those
of your fellow students and ask for help and comments if required.

• This worksheet can be found at

http://cgi.csc.liv.ac.uk/~ullrich/COMP284/notes/practical08.pdf

and you might proceed more quickly if you cut-and-paste code from that PDF file. Note
that a cut-and-paste operation may introduce extra spaces into your code. It is important
that those are removed and that your code exactly matches that shown in this worksheet.

• The exercises and instructions in this worksheet assume that you use the Department’s
Linux systems to experiment with JavaScript.

If you want to use the Department’s Windows systems instead, then you can do so.

• To keep things simple, we will just use a text editor, a terminal, and a web browser. You
can use whatever text editor and web browser you are most familiar or comfortable with.

• If you do not manage to get through all the exercises during this practical session, please
complete them in your own time. Note, however, that this is the last scheduled COMP284
practical.

Exercises

1. Dialog boxes are a quick way of obtaining user input, but from an interface design point
they are almost always the wrong choice for doing so. Forms are a much better way to
build user interfaces.

a. Open a text editor and enter the following HTML markup:

JavaScript and Forms

b. Save the code to a file named js08A.html in $HOME/public_html/. Make sure that the
access rights js08A.html are set correctly.

c. Open js08A.html in your web browser. You can enter a number into the first text
field, but if you click on the ‘Convert’ button, then in the JavaScript console you will
see a TypeError. This is because the function FahrenheitToCelsius does not return
anything yet.

d. Add code to FahrenheitToCelsius so that the function returns a value that is the
equivalent in Celsius of the parameter temperature given in Fahrenheit. Save the file,
reload it in the web browser, enter a number into the first text field, then click on the
‘Convert’ button. In the second text field you should then see result of the conversion.

e. Enter a sequence of letters into the first text field instead of a number and click on
the ‘Convert’ button. You should again see a TypeError in the JavaScript console. The
problem obviously is that while we expect a number to be entered into the first text
field, there is nothing that prevents the user from entering whatever they like.

f. Try to rectify this problem by replacing the first text field with a HTML5 form control
that (only) allows to enter numbers.

g. Have you solved the problem? Enter the letter ‘e’ or ‘E’ into the first field. Is it accepted
as input? If so, what is the result of converting it?
Make sure that you understand what is going on.

h. To rectify the problem we discovered in Exercise 1g, first create another function
processInput that provides the same functionality as the code in the onclick attribute
of the Convert button. Replace the code in the onclick attribute of the Convert button
with a call of processInput, possibly with appropriate argument(s).
Now, within processInput check the user’s input for correctness, say, using a regular
expression. If the user’s input is correct, proceed with the calculation of temperature
in degrees Celsius and display result as before. If the user’s input is incorrect, then
display an error message in the div element with id error and put the focus back into
the

2

2. In the following we want to develop a small two-player board game using JavaScript.

a. Copy the file

http://cgi.csc.liv.ac.uk/~ullrich/COMP284/examples/js08B.html

to your $HOME/public_html/ directory.

b. Define a function checkWin that checks whether one of the two players has managed
to place three of his/her own pieces in a row, column, or diagonal on the board. If
so, the function should return the number identifying that player (1 or 2) as result,
otherwise it should return 0.

c. Define a function showWin that takes the number identifying a player as an argument
and displays nicely styled message declaring that player to be the winner of the game,
e.g. ”Player 1 has won!”. The function should make it impossible that the players
can place further pieces on the board. This can be done either by removing the event
handlers from all table cells or by establishing an end game state in which the play
function does not make any more changes.

d. Within the play function add code at the appropriate point that calls the checkWin and
showWin functions.

e. Within the play function add code at the appropriate point that checks whether there
are free positions left on the board, calls an endGame function if there are not, and
otherwise proceeds with the processing of the event.

f. Define a function endGame that ends the game with an appropriate message, e.g.
”Game Over!”. Again, the function should make it impossible that the players can
place further pieces on the board. This can be done either by removing the event
handlers from all table cells or by establishing an end game state in which the play
function does not make any more changes.

3. Create a new file js08C.html with HTML and JavaScript code that provides the following
functionality. Initially, the page shows the user a two-dimensional table with 3 columns
and 3 rows where every cell of the table contains the number zero. Below the table should
be a clickable HTML element with the label ‘Calculate’.

Whenever the user clicks on a cell, the number currently in the cell is replaced by a new
random number between 1 and 9.

If the user clicks on ‘Calculate’ a message box will be shown with the message ‘The sum of
all the numbers on the board is X ’ where X is the sum of all the numbers currently in the
cells of the table.

3

http://cgi.csc.liv.ac.uk/~ullrich/COMP284/examples/js08B.html