Home » Online Computer Education » Learn Java Script, Streamlining Your Scripts with Functions and Calling Functions , Lesson No. 28

Learn Java Script, Streamlining Your Scripts with Functions and Calling Functions , Lesson No. 28

A function is a collection of statements that performs a given task. Most functions are defined in the head section of HTML pages. Putting your functions in the head section is a good idea for two reasons: The first is that you’ll always know where your functions are because they’re in a common location. The second reason is that the head section always executes first, ensuring that functions are available when needed later in the script. If a JavaScript statement attempts to call a function before the browser has loaded it, an error will occur because the function is technically still undefined. I also recommend putting your functions in a common location in your WSH JScript files.

NOTE
You may be wondering what the difference is between a function and a method.The answer is not much. Methods are simply functions that have been predefined. Methods are associated with specific objects, meaning that each object provides its own collection of methods that you can call from within your scripts.
Defining a Function
The first step in working with a function is to define it, which is accomplished using the syntax outlined below.

function FunctionName (p1, p2,….pn) {
statements;
return
}
The function statement defines a new function with the name you specify. The function’s name is followed by a pair of parentheses that may contain a list of optional arguments that the function can use as input. Commas separate multiple arguments. All function statements are placed within the curly braces {}. Functions can end with an optional return statement, which enables optional information to be returned to the statement that called the function.

For example, the following example shows a function named SayHello() that accepts a single argument, a person’s name. It then uses the name argument to display a welcome message with the user’s name. The return statement returns control of the script to the script statement that called the function.

function SayHello(visitorName) {
window.alert(“Hello and welcome, ” + visitorName);
return
}
Defining a function in a script does not cause it to execute. Functions must be called by another script statement in order to execute. The nice thing about functions is that you can call them repeatedly as needed.

Calling Functions
Now that you know what a function is and how to define one, the question remains: How do you call it? The calling statement can take either of two forms. The first form calls the function but does not accept any returned results from the function. The following two function calls demonstrate this form of call. The first example calls a function named SayHello() without passing any arguments. The second example calls a function named SayGoodbye() and passes a single argument. When the function finishes executing, control is returned to the statement immediately following the function call.

SayHello();
SayGoodbye(“William”);
NOTE
It’s up to you to make sure that the function is capable of handling the number of arguments that are passed to it.
Alternatively, you can make a call to a function in the form of an expression. This enables the function to return a value to the calling statement. For example, the following statement calls a function named GetUserName() and stores the result returned by the function in a variable named UserName.

UserName = GetUserName();
The following example shows a function named SayHello() in the head section of the HTML page. It is executed by a SayHello() statement in the body section of the HTML page and receives a single argument called name. The name argument is a variable established by the statement that precedes the function call. The function takes the name argument and uses it to display a greeting message to the user in a pop-up dialog. The script pauses until the user clicks on OK, at which time the function terminates and returns control to the statement that immediately follows the function call in the body section.

<HTML>
<HEAD>
<TITLE>Script 2.20 – A simple function</TITLE>
<SCRIPT LANGUAGE=”JavaScript” TYPE=”Text/JavaScript”>
<!– Start hiding JavaScript statements

function SayHello(visitorName) {
window.alert(“Hello and welcome, ” + visitorName);
}

// End hiding JavaScript statements –>
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”JavaScript” TYPE=”Text/JavaScript”>
<!– Start hiding JavaScript statements

var name;

name = window.prompt(“What is your name?”,””);
SayHello(name);

// End hiding JavaScript statements –>
</SCRIPT>
</BODY>
</HTML>
hows how the script interacts with the user when it executes.

 

11

The following example shows how to write a function that returns a value to the calling statement. This example is actually just a rewrite of the previous example, and the results are the same. The only difference is that the function call does not supply an argument this time and instead receives the name of the user from the function.

<HTML>
<HEAD>
<TITLE>Script 2.21 – Returning values from
functions</TITLE>
<SCRIPT LANGUAGE=”JavaScript” TYPE=”Text/JavaScript”>
<!– Start hiding JavaScript statements

var name;
var result;

function SayHello() {
name = window.prompt(“What is your name?”,””);
return name;
}

// End hiding JavaScript statements –>
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”JavaScript” TYPE=”Text/JavaScript”>
<!– Start hiding JavaScript statements

result = SayHello();

window.alert(“Hello and welcome, ” + result);

// End hiding JavaScript statements –>
</SCRIPT>
</BODY>
</HTML>

About

The main objective of this website is to provide quality study material to all students (from 1st to 12th class of any board) irrespective of their background as our motto is “Education for Everyone”. It is also a very good platform for teachers who want to share their valuable knowledge.

Leave a Reply

Your email address will not be published.