MSc-IT Study Material
June 2010 Edition

Computer Science Department, University of Cape Town

Chapter 16. JavaScript 3: Functions

Table of Contents

Introduction
Introduction to JavaScript Functions
Uses of Functions
Using Functions
Using built-in functions
Using user-defined functions
Defining and invoking a function in the same file
Invoking a file defined in a different file
Executing code using 'eval'
Creating user-defined functions
A simple function to display the String "hello"
Creating a function using function statements
Creating a function using the 'Function()' constructor
Creating a function using function literals
Some simple functions
Mathematical functions
Functions that RETURN a value
Defining a function that returns a value
A date Function
The today function described
Mathematical Functions
A form for calculations
A familiar calculator interface
Some Function activities
Form Validation
Testing for empty fields
The HTML defining the table
The JavaScript function to validate the form fields
Simplifying the code with a new function
Improving user interaction
Validation of multiple fields
Testing for numeric fields
Testing for invalid field combination
The remaining activities
Activity 6: Completing the colour model form
Activity 7: Avoiding Multiple Messages
Review Questions
Review Question 1
Review Question 2
Review Question 3
Review Question 4
Discussion Topic
Extension: More complex functions
Discussions and Answers
Discussion of Exercise 1
Discussion of Activity 1
Discussion of Activity 2
Discussion of Activity 3
Discussion of Activity 4
Discussion of Activity 5
Discussion of Activity 6
Discussion of Activity 7
Discussion of Review Question 1
Discussion of Review Question 2
Discussion of Review Question 3
Discussion of Review Question 4
Thoughts on Discussion Topic

Introduction

Introduction to JavaScript Functions

JavaScript functions are usually given a name, but since JavaScript functions are just objects in their own right, they can be stored in variables and object properties (see later unit). Functions are different from other objects in that they can be invoked (executed) with the use of a special operator ().

JavaScript provides many pre-written (built-it) functions, for example the function write, provided by the document object (see in a later unit how related functions can be stored inside objects; as we noted a few units ago, such functions are called methods).

An example of the write function being invoked is as follows:

document.write( "This message appears in the HTML document" );

The browser output for this code is:

An example of the alert function being invoked is as follows:

alert( "This message appears in an alert dialog" );

The browser output for this code is:

Some functions return a value. For example, mathematical functions perform calculations on the provided data and return numerical results. Other functions return true/false values, or text. Some functions return no value at all, but rather perform a side-effect; write is one such function whose side-effect is to send text to the HTML document. Functions frequently both perform a side-effect and return a value.

Uses of Functions

Functions can be used for many different purposes. In the past, JavaScript was used to create scrolling status bar messages for sites that want to give out important information that the user may miss while browsing the site (these proved to be largely irritating to the user, and have been very rarely used in the last few years). Displaying the date and time is also a common use of JavaScript. Image mouseovers, implemented using the HTML event system described in the previous chapter, are also widely used.

Functions are very useful when used in conjunction with HTML forms. Form entry can be validated, and the input of early parts of the forms might be used to invoke functions to automatically enter appropriate data in other parts of the forms.

To Do

Read up about JavaScripts Functions in your textbook.