Saturday, August 28, 2010

JavaScript Functions

Functions

We will use functions in most of our JavaScript programs. Therefore I will talk about this important concept already now. Basically functions are a way for bundling several commands together. Let’s write a script which outputs a certain text three times. Consider the following
approach:

<html>
<script language="JavaScript">

<!-- hide

document.write("Welcome to my homepage!<br>");
document.write("This is JavaScript!<br>");

document.write("Welcome to my homepage!<br>");
document.write("This is JavaScript!<br>");

document.write("Welcome to my homepage!<br>");
document.write("This is JavaScript!<br>");

// -->
</script>
</html>

This will write out the text

Welcome to my homepage!
This is JavaScript!

three times. Look at the source code - writing the code three times brings out the right result.
But is this very efficiently? No, we can solve this better. How about this code which does the same:

<html>
<script language="JavaScript">
<!-- hide

function myFunction() {

document.write("Welcome to my homepage!<br>");

document.write("This is JavaScript!<br>");
}

myFunction();
myFunction();
myFunction();

// -->
</script>
</html>

In this script we define a function. This is done through the lines:

function myFunction() {

document.write("Welcome to my homepage!<br>");

document.write("This is JavaScript!<br>");
}

The commands inside the {} belong to the function myFunction(). This means that our two do- cument.write() commands are bundled together and can be executed through a function call. In our example we have three function calls. You can see that we write myFunction() three times

just below the definition of the function. These are the three function calls. This means that the contents of the function is being executed three times. This is a very easy example of a function.
You might wonder why functions are so important. While reading this tutorial you will certainly realize the benefits of functions. Especially variable passing makes our scripts really flexible we will see what this is later on.

Functions can also be used in combination with event-handlers. Please consider this example:

<html>
<head>

<script language="JavaScript">
<!-- hide

function calculation() {

var x= 12;

var y= 5;

var result= x + y;

alert(result);
}

// -->
</script>

</head>
<body>

<form>
<input type="button" value="Calculate" onClick="calculation()">
</form>

</body>
</html>

(The online version lets you test this script immediately)

The button calls the function calculation(). You can see that the function does certain calculations. For this we are using the variables x, y and result. We can define a variable with the keyword var. Variables can be used to store different values -like numbers, text strings etc. The line var result= x + y; tells the browser to create a variable result and store in it the result of x + y (i.e. 5 + 12). After this operation the variable result is 17. The command alert(result) is in this case the same as alert(17). This means we get a popup window with the number 17 in it.

No comments:

Post a Comment