MSc-IT Study Material
June 2010 Edition

Computer Science Department, University of Cape Town

Discussions and Answers

Discussion of Exercise 1

The browser output now has the details of whatever day and time you opened the document in the status bar.

Discussion of Activity 1

We can define this function easiest using a function statement:

	function displayDouble( num )
	{
	var result = num * 2;
	document.write( num + " * 2 = " + result );
	}
      

The function can be invoked with statements such as:

	displayDouble( 2 );
	document.write("<p>");
	displayDouble( 10 );
      

Discussion of Activity 2

We can define this function easiest using a function statement:

	function fourTimes ( num )
	{
	var result = num * 4;
	return result;
	}
      

Discussion of Activity 3

The simplest solution to this is to multiple the number by 100, round this value, then divide by 100 again.

The function is as follows:

	function twoDP( num )
	{
	var rouded = Math.round( num * 100 );
	return rounded / 100;
	}
      

An example of the function being invoked is as follows:

    document.write(" 3.1415627 to 2 decimal places is " + twoDP( 3.1415627 ) );

The browser output should appear as follows:

Discussion of Activity 4

The code for the form should look similar to the following:

	<form name="form2">
	The square root of
	<INPUT TYPE="text" NAME="number" VALUE="" SIZE=10>
	= <INPUT TYPE="text" NAME="square" VALUE="" SIZE=10><br>
	<input type="button" value="Click here for answer" onClick="display()">
	</form>
      

The code for the function should look similar to the following:

	function display( square )
	{
	var num = document.form2.number.value;
	document.form2.square.value = Math.sqrt( num );
	}
      

Discussion of Activity 5

This is straightforward — all that needs to be done is to add another three rows of buttons to the form (with appropriate onClick event handlers). The existing functions can be left unchanged.

The extra HTML lines are

	<TR>
	<TD><INPUT TYPE=button VALUE=" 4 " onclick="put(this.form, 4)"></TD>
	<TD><INPUT TYPE=button VALUE=" 5 " onclick="put(this.form, 5)"></TD>
	<TD><INPUT TYPE=button VALUE=" 6 " onclick="put(this.form, 6)"></TD>
	<TD><INPUT TYPE=button VALUE=" - " onclick="put(this.form, '-')"></TD>
	</TR>
	<TR>
	<TD><INPUT TYPE=button VALUE=" 7 " onclick="put(this.form, 7)"></TD>
	<TD><INPUT TYPE=button VALUE=" 8 " onclick="put(this.form, 8)"></TD>
	<TD><INPUT TYPE=button VALUE=" 9 " onclick="put(this.form, 9)"></TD>
	<TD><INPUT TYPE=button VALUE=" / " onclick="put(this.form, '/')"></TD>
	</TR>
      

Discussion of Activity 6

We need to add a new section to the validate() function, testing to see if neither are selected:

	if( !modelform.standard.checked && !modelform.deluxe.checked )
	{
	alert( "You must choose either standard or deluxe - form not submitted" );
	fieldsValid = false;
	}
      

Note the use of the exclamation mark ! — this is a logical not in JavaScript.

Discussion of Activity 7

One solution is to only display an alert for an invalid field if all previous fields have been valid. For example, we could amend the testing of the multiple colour fields to the following:

	if( modelform.blue.checked && modelform.green.checked )
	{
	if (fieldsValid)
	alert( "Please either blue or green (not both) - form not submitted" );
	fieldsValid = false;
	}
      

The same approach needs to be taken for all but the first invalid field.

Discussion of Review Question 1

There are three functions referred to in this code:

  1. The user-defined function displayMessage()

  2. The built-in write() function (part of object document — see later unit)

  3. The built-in sqrt() function (part of class Math — see later unit)

Generally, wherever you see parentheses, either function arguments are being defined, or a function is being invoked.

The browser output for the above code is:

Discussion of Review Question 2

This function should be named triangleArea.

triangleArea takes two arguments, which we shall call height and width.

The function needs to calculate the are of a triangle (1/2 * (width * height) ). We can write a statement that assigns the result of this calculation into a variable called area:

	var area = 0.5 * (height * width);
	The function is to return the area:
	return area;
      

The specification looks as follows:

Table 16.11. Function to return the area of a triangle

Name (optional)triangleArea
Arguments (optional)height, width
body
var area = 0.5 * (height * width);
	      return area;
Returns (optional)Returns triangle area (0.5 * (height * width) )


	function triangleArea
	{
	var area = 0.5 (heigth * width)
	return area;
	}
      

Discussion of Review Question 3

This function is most easily created using a function statement as follows:

	function multiply( n1, n2 )
	{
	var result = n1 * n2;
	return result;
	}
      

Discussion of Review Question 4

The function is invoked, the expression inside write() is evaluated to -8, and then the document.write() function is executed adding -8 to to the browser window.

Thoughts on Discussion Topic

While in most cases it is convenient to define functions using function statements, there are situations when function literals and the Function constructor offer advantages.

For example, it is possible to have collections of functions that do not require names (see later unit on arrays and objects), in which case it is frequently convenient never to have to name them.

The Function constructor offers far more power in defining functions, since it defines the arguments and body of a function using Strings, and Strings are very easy to manipulate in JavaScript. This makes it possible to have the script itself create new functions as they are needed. Consider the browser output below:

This output is possible using a String entry from the user to define a function that can then be invoked through a button press. The code for the above is as follows:

	<HTML> <HEAD> <SCRIPT> <!--
	function userFunction()
	{
	alert( "no function yet defined" )
	}

	function buildFunction( theForm )
	{
	// DEFINE new function and replace existing 'userFunction'
	userFunction = new Function( theForm.functionbody.value );
	}

	// --> </SCRIPT> </HEAD>
	<BODY>
	<FORM>

	Function body: <INPUT TYPE=text NAME=functionbody SIZE=30><br>

	<INPUT TYPE=button VALUE="define new function"

	onClick="buildFunction( this.form )">
	<INPUT TYPE=button VALUE="Click to invoke function" onClick="userFunction()">
	</FORM>
	</BODY>
	</HTML>
      

Although this particular page could have been more simply implemented using eval, it illustrates the flexibility of the Function constructor approach to function definition — a script can be written to define functions using statements not known when the script was written.