HTML and CSS Reference
In-Depth Information
Writing a JavaScript Function
So far, in writing code for the staff directory page, you've focused on the e-mail address
of only one person. However, five other individuals are listed in the staff directory. If
you wanted to use JavaScript to write the e-mail links for the rest of the directory, you
could duplicate the code you used for Catherine Adler's entry five more times. However,
JavaScript provides a simpler way of repeating multiple instances of code that share a
common pattern and structure.
When you want to reuse the same JavaScript commands throughout your Web page,
you store the commands in a function. A function is a collection of commands that per-
forms an action or returns a value. Every function includes a function name that identi-
fies it, and a set of commands that are run when the function is called. Some functions
also require parameters, which are variables associated with the function. The general
syntax of a JavaScript function is
functionƒ
function_name
(
parameters
){
ƒƒƒ
JavaScriptƒcommands
}
where
function_name
is the name of the function,
parameters
is a comma-separated
list of variables and values used in the function, and
JavaScriptƒcommands
is the set of
statements run by the function. Function names, like variable names, are case sensitive.
For example, weekDay and WEEKDAY are treated as different function names. As with
variable names, a function name must begin with a letter or underscore (_) and cannot
contain any spaces. The following code is an example of a function named showMsg()
that writes a paragraph to a Web document:
functionƒshowMsg()ƒ{
ƒƒƒdocument.write(“<p>WelcomeƒtoƒtheƒMonroeƒLibrary</p>”);
}
Note that there are no parameters to this function, so it always writes the same text
string to the Web page. However, you could store the name of the library as a parameter
of the function. For example the following code stores the name of the library in the
libName parameter and then references that parameter value in writing the text string to
the Web page:
functionƒshowMsg(libName)ƒ{
ƒƒƒdocument.write(“<p>Welcomeƒtoƒtheƒ“ƒ+ƒlibNameƒ+”</p>”);
}
Thus, if the libName parameter contained the text string
Monroe Public Library
, then
the following HTML code would be written to the Web document.
<p>WelcomeƒtoƒtheƒMonroeƒPublicƒLibrary</p>
If you alter the value of the libName parameter, the HTML code would be altered
to match.
Rather than rewriting the code for generating the e-mail link for each person in the
staff directory, you'll put the commands in the following showEM() function:
Organize your functions
by placing them all within
the document head rather
than scattered throughout
the Web page.
functionƒshowEM(userName,ƒemServer)ƒ{
ƒƒƒvarƒemLinkƒ=ƒuserNameƒ+ƒ”@”ƒ+ƒemServer;
ƒƒƒdocument.write(“<aƒhref='mailto:”ƒ+ƒemLinkƒ+ƒ“'>”);
ƒƒƒdocument.write(emLink);
ƒƒƒdocument.write(“</a>”);
}
Compare the code for this function to the script you created in Figure 10-15. Note
that userName and emServer variables from that earlier code appear here as parameters
of the showEM() function. You'll add the showEM() function to the document head of the
mpl.htm file now.
