Chapter 2: How to code a JavaScript application

This chapter presents a subset of JavaScript and DOM scripting that will soon have you writing significant applications. If you don't have any programming experience, this chapter also makes a great aptitude test. If you read it and can do the exercises at the end of the chapter, you're ready for the rest of this book.

How to create and use functions

When you develop JavaScript applications, you often need to create and call your own functions. This lets you handle events, get data from a field on a form, and display data in a field on a form. The next topics show how.

How to create and call a function

A function is a named block of statements that can receive parameters and return a value by using a return statement. Once you've defined a function, you can call it from other portions of your JavaScript code.

The benefit that you get from using functions is that you don't have to type the statements for the function each time you want to use them. This saves time and reduces the chance of introducing errors into your applications. Also, if you need to change the function, you only have to change it in one place.

Figure 2-17 shows one way to create and use functions. This lets you create a function value and store it in a variable. In chapter 10, though, you'll learn three other ways to create them.

To create a function this way, you code the keyword var followed by the name of the variable that will store the function. Then, you code an assignment operator, the keyword function, a list of parameters in parentheses, and a block of code in braces. The parentheses are required even if the function has no parameters.

To call a function, you code the function name followed by the function's parameters (or arguments) in parentheses. Then, the function uses the parameters as it executes its block of code. Here again, the parentheses are required even if the function has no parameters.

In the first example, you can see the code for a function named showYear that doesn't require any parameters and doesn't return a value. This function displays a dialog box that shows the current year.

The second example shows a function named $ that finds and returns the object for an XHTML element. This function's one parameter is the id for the element. In effect, this function is a shortcut for the document.getElementById method.

When you call a function that returns a value, you treat the function and its parameters as if it were the value it was returning. In this example, the XHTML object returned by the function will be stored in a variable named taxRate.

The third example shows a function named displayEmail. It takes two parameters, but doesn't return a value. The parameters are the username and domain name for an e-mail address. They are joined together with an @ sign and written into the document to prevent spammers from finding the e-mail address in your web page. A function like this can be defined in the head section of a page and used in the body section.

The fourth example shows a function named calculateTax. This function has two parameters separated by commas and returns a value. It calculates sales tax and rounds it to two decimal places.

A function with no parameters that doesn't return a value

var showYear = function () {
var today = new Date();
alert( today.getFullYear() );
}

How to call a function that doesn't return a value

showYear(); // displays the current year

A function with one parameter that returns a value

var $ = function ( id ) {
return document.getElementById( id );
}

How to call a function that returns a value

var taxRate = $("taxRate");

A function with two parameters that doesn't return a value

var displayEmail = function ( username, domain ) {
document.write( username + "@" + domain);
}

How to call a function with two parameters that doesn't return a value

displayEmail( "mike", "murach.com");

A function with two parameters that returns a value

var calculateTax = function ( subtotal, taxRate ) {
var tax = subtotal * taxRate;
tax = parseFloat( tax.toFixed(2) );
return tax;
}

How to call a function with two parameters that returns a value

var subtotal = 74.95;
var taxRate = 0.07;
var salesTax = calculateTax( subtotal, taxRate ); // returns 5.25

Description

• A function is a block of code that you can use multiple times in an application. It can require one or more parameters.
• A function can return a value to the code that called it by using the return statement. When a return statement is executed, the function returns the specified value and ends.
• The code that calls a function may discard the returned value, store it in a variable, or use it in an expression.
• If a function ends without encountering a return statement, it returns a special value called undefined.

Figure 2-17 How to create and call a function