Functions

Functions are just collections of JavaScript statements which wait to be executed until they're called on. Think paragraphs. You can give them their own names, too. But functions should be pretty focused (just like a well-focused paragraph with a thesis sentence) so they do only one clear task.

There are two types of functions (just like there are two types of objects): built-in functions (provided to you by JS) and custom functions (ones you can build yourself). You can click on this sentence to see a table of built-in JavaScript functions.

Usually functions are defined at the beginning of a JS block, so if you refer to the function later the program will know exactly what you're talking about--just like you need to define variables early so they can be used.

Calling functions

A function definition begins with the keyword function followed by the name you've assigned to it, and a pair of parentheses. To call the function later you have to enter the name of the function and parentheses.

For example:

<html>

<head>

function error_message(){

var Message = "Your input is incorrect; try again."

alert(Message)

}

</script>

</head>

<body>

<form>

</form>

</body>

</html>

This script creates a little error message function, then summons it in the HTML page. I know we haven't talked about forms yet, but this just creates a button which then calls the error_message function. Copy this into Text Editor, save it, and run it in Netscape.

Passing parameters

Functions often get passed values that they then go to work on; these are called passed parameters. Let's modify that simple little function above and give it a parameter:

<html>

<head>

function e_message(Message){

alert(Message)

}

</script>

</head>

<body>

<form>

</form>

</body>

</html>

You might want to notice that we had to use single quotes inside the double quotes when we called the function error_message. onClick, by the way, is an event handler; see the lecture note on that topic. So when the button is clicked, the message "Big mistake" gets passed to the e_message function, and the alert box pops up.

Here's another slightly more complicated example. This one just asks the user for the number of items purchased, then calculates the total bill, including tax. Notice, though, how the value entered (the number of items) is passed to the bill_calc function. Copy and paste, save it, and run it in Netscape.

function bill_calc(numItems){

var unit_price = 3.15

var tax = .07

var total_bill= 0

total_bill = (numItems * unit_price) + ((numItems * unit_price) * tax)

return total_bill

}

var numItems=parseFloat(prompt("# of items", ""))

var total = bill_calc(numItems)

document.write("Total is " + total)

</script>

</html>

Built-in JavaScript Functions

Function Name	What it does
eval( string)	Used to evaluate strings which are JavaScript expressions or statements. This function will return the output of the JS expression, if all works.
escape(string)	This function converts a special JS character (like && or {) into the code which creates it. This function is reversed by unescape( ).
parseInt(string, radix)	parseInt converts a string to an integer. The radix feature is optional; if you include it, it will convert the string into the base system you indicate (e.g., binary, octal, decimal, hex, etc.) If the string includes a character that won't convert, it will return either the number up to that point, or NaN (not a number)
parseFloat(string)	Does about the same thing as parseInt( ), except it converts the string into a float (decimal) number, and does not convert to other base systems.
unescape("string")	The reverse of escape( )