Newsletter sign-up
View all newsletters

Sign up for our technology specific newsletters.

Enterprise Java
Email Address:
JavaWorld.com

'Personalized JavaScript': User-defined functions, objects, and methods

How to take full advantage of JavaScript by moving beyond its built-in commands

By Gordon Mccomb, JavaWorld.com, 09/01/96

  • Digg
  • Reddit
  • SlashDot
  • Stumble
  • del.icio.us
  • Technorati
  • dzone

Page 3 of 7

To call the function above, just include the text basicFunction() -- note the empty parentheses, as they are required. Here's a working example of the Hello JavaScripters program. 

<HTML>
<HEAD>
<TITLE>Basic Function Example</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function basicFunction () {
    alert ("Hello JavaScripters!");
}

basicFunction();

</SCRIPT>
</HEAD>
<BODY>
Page has loaded.
</BODY>
</HTML>


The browser processes the contents of the <SCRIPT> tag as the document loads. When it encounters the basicFunction() function call, it pauses momentarily to process the function, and an alert box appears. Click OK and the remainder of the page finishes loading.

Calling a function with an event handler

A common way of calling a function is to include a reference to it in a form button or hypertext link. Processing a user-defined function when the user clicks a form button is perhaps the easiest of all. You use the onClick event handler to tell JavaScript that when the user clicks on the button, the function specified should be processed. Here's a revised version of the previous example, showing how basicFunction is called when the form button is clicked. 

<HTML>
<HEAD>
<TITLE>Basic Function Example</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function basicFunction () {
    alert ("Hello JavaScripters!");
}

</SCRIPT>
</HEAD>
<BODY>
Click to call function. 
<FORM>
<INPUT TYPE="button" VALUE="Click" onClick="basicFunction()">
</FORM>
</BODY>
</HTML>


Notice the onClick syntax in the <INPUT> tag. The event you want to process on a click is a call to basicFunction. This event is surrounded by double quotes.

Passing a value to a function

JavaScript functions support passing values -- or parameters -- to them. These values can be used for processing within the function. For instance, rather than having the alert box say "Hello JavaScripters!" whenever you call it, you can have it say anything you like. The text to display can be passed as a parameter to the function.

To pass a parameter to a function, provide a variable name as the parameter in the function definition. You then use that variable name elsewhere in the function. For example: 

function basicExample (Text) {
    alert (Text);
}


The variable name is Text, and is defined as the parameter for the function. That variable is then used as the text to display in the alert box. When calling the function, provide the text you want to show as a parameter of the function call: 

basicExample ("This says anything I want");


Passing multiple values to a function

You can pass multiple parameters to a function. As with built-in JavaScript functions and methods, separate the parameters with commas: 

multipleParams ("one", "two");
...
function multipleParams (Param1, Param2) {
...


When you define a function with multiple parameters, be sure the parameters are listed in the same order in the function call. Otherwise, your JavaScript code may apply the parameters to the wrong variables, and your function won't work right.

Here's a working example of a function with multiple parameters. It takes two parameters: an input string and a number value. The number value indicates how many characters on the left of the string you want to display in the alert box. When you run the following script, the alert box displays "This is" -- the first seven characters of the input string.

  • Digg
  • Reddit
  • SlashDot
  • Stumble
  • del.icio.us
  • Technorati
  • dzone
Comment
Login
Forgot your account info?
Add comment
Anonymous comments subject to approval. Register here for member benefits.
Have a JavaWorld account? Log in here. Register now for a free account.
Resources