An Abbreviated Introduction to JavaScript

[Overview] [Basics] [More] [Fun] [Class 2] [If] [Functions] [Timing] [Queries] [References] [Examples] [Libraries] [Assignments]


Functions

Abstract: Definition of functions, instructions for creating and using functions, and some key string functions.


About Functions

As we begin to write larger and larger programs, we often find that we rewrite similar sets of instructions again and again and again. Most programming languages provide functions (sometimes called methods or procedures) that name and parameterize a set of instructions.

By "name a set of instructions", I mean that we give a name for the set of instructions and then allow the name to substitute for the set of functions. For example, if we frequently want to put up a dialogue box asking for a name and then insert the name into the document, we might name the code for that askForAndInsertName.

By "parameterize a set of instructions", I mean that we can provide values that customize the way the set of instructions work. These parameters are similar to the arguments we give to mathematical functions.

Defining Functions

JavaScript allows you to define your own functions. By writing functions, you can better test and reuse your code. The normal structure of a function is

function function-name ( parameters )
{
  commands
} // function-name

The left brace indicates the beginning of the function body, and the right brace indicates the end of the function body.

You use return expression to return a value from a function.

Here's a function that selects an image name based on a history of which image has appeared recently. It can be useful for extending our changing image scripts to do more interesting things.

// Variable:
//   fishimg
// Description:
//   The most recent image we used for our "fishie"
var fishimg = "bob1.gif";

// Function:
//   selectFish()
// Parameters:
//   (none)
// Description:
//   Computes the next image to use for our "fishie"
// Note:
//   Uses variable fishimg to keep track of which one we used last.
function selectFish()
{
  if (fishimg == "bob1.gif") {
    fishimg = "fillmor1.gif";
  }
  else if (fishimg == "fillmor1.gif") {
    fishimg = "hawthor1.gif";
  }
  else {
    fishimg = "bob1.gif";
  }
  document.fishie.src = "Images/" + fishimg;
} // selectFish()

As an example with parameters, I might write a simple function that adds "arro" to the end of a name.

// Function:
//   mungeName(name)
// Parameters:
//   Someone's name
// Returns:
//   Someone's name, appropriately "munged"
// Example:
//   mungeName("Sam") return "Samaroo"
//   mungeName("Anna") returns "Annaaroo"
function mungeName(person)
{
  return person + "aroo";
} // mungeName

You can play with a sample page that includes this function.

String Functions

JavaScript provides a number of useful built-in functions. Many of these relate to strings. As you've already noted, strings in JavaScript are usually surrounded by double quotation marks. You can also surround them by single quotation marks (which may be useful when you need quotation marks within your strings).

Here are some of the more useful string functions.

In JavaScript, the initial character in a string is character 0, rather than character 1. In addition, the length property seems to give the index of the last character, rather than the length of the string.

Libraries of Functions

Often, you will create one or more JavaScript functions that you will want to use again and again and again. Rather than retyping them again and again and again, you can store them in a library and then load them into pages using a variant of the script tag.

The script tag can take a src parameter which loads a library. you reuse your JavaScript code. We can extend that simple JavaScript program to incorporate a library file as follows. Note that we need two sets of <SCRIPT> tags: one set to load the library and another to call a function from that library.

<script language="javascript1.1" src="greet.js"> </script> <script language="javascript1.1"> greet(); </script>

A Random Number Library

I've supplied a random number generator library that some of you may find useful. Among other things, it includes randomInRange(N) which returns a random number between one and N. We'll use it to call on a "random" student.


[Overview] [Basics] [More] [Fun] [Class 2] [If] [Functions] [Timing] [Queries] [References] [Examples] [Libraries] [Assignments]

Source text written by Samuel A. Rebelsky.

Source text last modified Wed Apr 8 10:13:17 1998.

This page generated on Wed Apr 8 10:45:18 1998 by SiteWeaver.