Breadcrumbs

Too Easy JavaScript - Functions [5]

Repetition is a fact of life. When you're programming there will be many situations where a repetition of common code will be required. Functions allow you to specify your own reusable blocks of code. In JavaScript, functions are a piece of JavaScript code that can be used as many times as needed throughout the web page.

JavaScript has many of its own built-in functions, although we will only learn two global ones not belonging to a JavaScript object in this lesson, to demonstrate using functions. JavaScript also allows you to declare your own functions.

Function Basics

A function is a reusable block of code that can be executed multiple times. To declare our own function we start with the function keyword followed by an identifier name. Two parentheses follow the identifier, the importance of these we will discuss later. The code to be executed is held within a pair of curved braces succeeding the identifier name.

Code: JavaScript

function myFunction() {
    // code to be processed
}

Within the curved braces we can add close to any coding, which includes calling other functions. When a function is called it executes its code. Calling a function is done by simply using its identifier name followed by two parentheses.

Code: JavaScript

function myFunction() {
    alert("This is a function.");
}
myFunction();

Functions can return a result using a return statement. A return statement specifies a value that the function transmits back. Returning a value can be useful in passing a processed value to a variable, or another function.

Code: JavaScript

function addTwo() {
    var num = 2 + 2;
    // Any other processing
    return num;
}
alert("The function returns: " + addTwo());

A good practice when designing functions is to never have them output directly, rather for them to return a result, using a return statement. This practice makes functions more usable, and gives you more control over them in any given situation.

Function Arguments

A powerful ability of JavaScript is to accept a passed value, which is accessible to a function's code. These passed values are referred to as arguments, and sometimes parameters. Argument declarations are placed within the parentheses following a function's identifier.

Code: JavaScript

function myFunction(string) {
    return string;
}

Functions can have multiple arguments, with each one separated using a comma.

Code: JavaScript

function myFunction(string,string2) {
    return string + string2;
}

You pass arguments to a function when it is called. This is done by placing the values within the parentheses following the function identifier. Each time the function is called you can change the arguments that you pass to it.

Code: JavaScript

myFunction("This is an argument",".");
myFunction("This is an argument"," too.");

Argument values are used throughout the function as if they were normal variables. Like variables, arguments are an undefined data type until they are filled. For example, in order to make an argument's value a string you must enclose it in quotes. You'll find passing values to a function is efficient when you have user defined input.

alert() and confirm()

Both the alert() and confirm() functions work quite similar. Technically, they both belong to the window object, although they have the ability to be called globally. Both use dialog boxes to obtain user input.

The only difference between alert() and confirm() is that confirm() generates buttons for "Yes" and "Cancel," while alert() only possesses a button for "OK."

You have observed alert() used in umpteen examples throughout this series, because document.write() is ineffective with XHTML - where alert() is not. JavaScript's alert() function triggers a web browser to open a dialog box containing your specified message. The argument that you pass to alert() is printed within the dialog box.

Code: JavaScript

alert("This is an alert() box.");

Note: Adding a backslash in front of a character will cause JavaScript to print the exact character succeeding it. Backslashes are useful for characters used by JavaScript's syntax, such as parentheses. Do not forget escape sequences, which are a combination of a backslash and alphabetic character. Escape sequences will not print the literal character.

When you use confirm() the dialog box will have two buttons, and return a boolean value. For "Yes" confirm() will return true, and false for "Cancel." You should assign the return of confirm() to a variable for later processing. Similar to the alert() function, the argument that you pass to confirm() is printed within the dialog box.

Code: JavaScript

var confirm = confirm("Do you wish to continue?");
if (confirm == true) {
    document.write("You continued.");
}
else {
    document.write("You chose not to continue.");
}

Note: JavaScript does not interpret "TRUE" the same as "true." Most keywords in JavaScript are case sensitive.

Summary

In Part 5 of Too Easy JavaScript you have learned how to create and call your own functions. You've also learned two basic functions globally built into JavaScript - alert() and confirm(). In Part 6 we will look into the document object model in JavaScript.