Introduction To Javascript
Functions

Introduction

A function is a section of code that can be run at any time when it is called by the a Javascript statement.

An example function

The following function adds two numbers together.

function toAdd() {
var a = 5
var b = 10
var answer = a + b
alert("The answer is " + answer)
}

The code held within the function is delineated by the curly braces. This function is called toAdd() and its code is run when the following statement is run in Javascript.

toAdd()

Exercise 8

Add the code for the function to the head part of a web page. Place the statement which runs the code in script tags in the body of the page. Load the page.

Exercise 9

Now create a script which will prompt the user for the values a and b before adding them together.

Functions with Arguments

The function that you have used in the previous exercises can be refined. The variables a and b do not necessarily have to be defined within the function. The main purpose of the function is to add 2 numbers together and display the result. Since our page does nothing else it seems logical to prompt for input in the same function. Suppose that your script was more complex and that you often needed to perform the tasks listed in the function. It is possible that you might want to define the numbers in a variety of ways (user input, the result of another part of the javascript etc.) and want to use the function whenever you need it. The following modification to the script would allow this to happen.

function toAdd(a,b) {
var answer = a + b
alert("The answer is " + answer)
}

When you want to call this function you must specify values for a and b. For example,

toAdd(20,50)

The values in the brackets are the values that the function will use for a and b. You can do this with text as well, as long as string values are enclosed in quotation marks.

Exercise 10 - Worked Example

Create 4 functions which will add, subtract, multiply, divide 2 numbers. Prompt the user for the two numbers once before running all 4 functions to return the results.

This code is a bit harder than you think. Your first instinct may be to use the function above and add the following lines. Try them out.

var c = prompt("Enter first number",10)
var d = prompt("Enter second number",10)
toAdd(c,d)

Looks good until you run it. If you enter 10 and 10 at the prompts, you get the answer 1010. This shows us that Javascript assumes that the prompt has returned a string (letters and numbers) when you thought you were getting a number. Doing its job as it thinks it should, it has added the two strings together to make a longer string. You need to show the Javascript Interpreter that the input is a number and not a string.

The parseFloat() function can be used to convert the string to a number, assuming nothing too wacky is entered at the prompt. The full code should read,

function toAdd(a,b) {
var answer = a + b
alert("The answer is " + answer)
}
var c = parseFloat(prompt("Enter first number",10))
var d = parseFloat(prompt("Enter second number",10))
toAdd(c,d)