A Brief Look at JavaScript - Web Development and Design Foundations with XHTML - page 554

Functions
The Hands-On Practice 14.6 pops up the prompt box as soon as the page loads. What
if we prefer to allow the user to decide when a particular script should be interpreted or
run by the browser? Perhaps we could use an onmouseover event handler and run the
script when the user moves the mouse pointer over a link or image. Another method,
perhaps more intuitive for the user, is to make use of a button and direct the user to
click the button to run the script. The Web page visitor doesn't need to be aware that a
script will run, but can click a button to initiate some sort of functionality.
Three types of buttons were introduced in Chapter 9:
● A submit button <input type="submit" /> is used to submit a form.
● A reset button <input type="reset" /> is used to clear values entered on a
form.
● The third type of button <input type="button" /> does not have any default
action related to forms.
In this section we will make use of the button <input type="button" /> and the
onclick event handler to run a script. The onclick event handler can run a single
command or multiple commands. A sample follows:
<input type="button" value="Click to see a message"
onclick="alert('Welcome!');" />
In this sample, the button will display the text “Click to see a message.” When the user
clicks the button, the click event occurs and the onclick event handler executes the
alert('Welcome!'); command. The message box appears. This method is very effec-
tive when there is only one JavaScript statement to execute. It quickly becomes unman-
ageable when there are more statements to execute. When that happens, it makes sense
to place all JavaScript statements in a block and somehow point to the block to exe-
cute. If the statement block has a name, we can execute the block by pointing to the
name. In addition to providing a shortcut name, this code is also easily reused. We can
provide a name for a statement block by creating a function.
A function is a block of JavaScript statements with a specific purpose, which can be run
when needed. A function can contain a single statement or a group of statements, and is
defined as follows:
function function_name()
{
... JavaScript statements
}
The function definition starts with the keyword function followed by the name of the
function. The parentheses are required, and more advanced functions make use of them.
You can choose a name for the function, just like you choose a name for a variable. The
function name should indicate the purpose of the function somehow. The statements are
contained within the brackets. The block of statements will execute when the function
is called.