Abstract: Definition of functions, instructions for creating and using functions, and some key string 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.
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.
You can play with a sample page that includes this function.
// 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
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.
string.charAt(position) extracts
a particular character from a string.
string.subString(firstPos,lastPos)
extracts a substring of a string.
string.indexOf(pattern) searches
for a pattern within a string, and returns the index of the first
instance within the string.
string.lastIndexOf(pattern) searches
backwards
for a pattern within a string (starting in the end), and returns the
offset of the beginning of that pattern.
string.length gives the length of (number of
characters in) a string
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.
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>
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.