JavaScript Functions
When writing code, sometimes you will want to perform a certain task repeatedly. Instead of writing out the code again and again, you can create a function.
Declaring a JavaScript function
function abc() {
do_something;
}In this example, we create the function abc, with a single statement. A function declaration starts with the keyword function, then has one or more spaces, and then the function name. JavaScript is what we call whitespace insensitive;
this means that it does not care about whitespace, or spaces, new lines
and other "white space" characters. We could have written our function
like this if we wanted to:
function abc(){do_something();}The only space we need here is between function and abc, as the moment you reach a new symbol JavaScript understands that it is a new part of the declaration.
The parameter list follows, as we discussed for document.write
earlier. The parameter list is enclosed in parenthesis and can be left
empty but must remain. We then show the start of the function with a open curly brace; in this case, {. The code of the function follows, and we show the end of the function with the opposite closing curly brace, }.
Function names are roughly the same as variable names: start with a letter or underscore, then a mix of letters, numbers and underscores.
Calling a JavaScript function
When we use a JavaScript function, we say we called the function. Here's an example.
function writeToDocument(text) {
document.write(text);
}
writeToDocument("Hello World!");
writeToDocument("Here's some text.");
writeToDocument("Here's some more text.");In this example, we define the function writeToDocument. It takes one parameter: text. The function calls document.write with the value of text.
We then call our new function a few times. We can call it as many times as we like. We can also do as much as we want inside the function, and we can also call other functions.
Default parameter values
Sometimes you will want to set a default value for the function
parameter. The parameter list - the section in parenthesis after the
function name - is just like the var declaration. Just as you can use var x = "blah", y = 100; and give variables values, you can do the same for your function:
function do_something(text = "Default value for text", alert = false) {
...
}
In this way, if a parameter is not specified when the function is called it is assigned the default value.
Returning a value from a JavaScript function
Now, a function can do something, but maybe you want it to help you with a variable you have at the moment. For example, what if we have a number and we want to add 10 to it? We could write a JavaScript function that would add ten to the number.
function addTen(number) {
number = number + 10;
return number;
}
var someNum = 10;
someNum = addTen(someNum);
document.write(someNum);
This example will output:
20
The return keyword gives the function a value where it
is called. It allows you to take data from within a function and take
it outside the function. JavaScript has function scope, which means that variables within the function are not available outside of the function.
Here, we pass someNum to addTen(). addTen() takes someNum, which is 10, and adds 10 to make it 20. It then returns 20. Therefore, we say that addTen(someNum) is equal to 20. We assign addTen(someNum) to someNum, so someNum is now 20. We then output it using document.write().
JavaScript has many inbuilt functions. A common one you will encounter is alert(), which creates a popup box with text you specify (through a parameter) and an 'OK' button. Consider this example:
alert('Hello!');
The alert function is invaluable for casual debugging, or trying to identify and fix bugs (problems) in code. For example, an alert(variablename) will show you the value of a variable at a particular point in your code.
Now that we understand functions, let's look at some JavaScript condition structures.
| « JavaScript Variables | JavaScript If Statement » |
More JavaScript Tutorials:
» Hide and Display Content On Demand
» Form Input Validation and Correction
» New Browser Window Checkbox
» Search Engine Spider-Friendly JavaScript Content
» How to Disable the Submit Button
» Client Side Data Binding Using jQuery
