This article constitutes section 2, part A, chapter 3 of the CIW Website design manager course briefly covers: a JavaScript Functions, Methods and Events

Defining JavaScript Functions

A function is a specific block of code designed to do a certain task. You may create functions to do tasks appropriate to your application, or you can use one of the many built-in JavaScript functions.

A function is defined by using the keyword “function” followed by the name you wish to give to the function. The following is a very simple example:

function welcomeMessage()
alert(“Thank you for visiting this site!”);

Note the parentheses after the function name. In this example they contain nothing, this function has no parameters. Another function, however, may have parameters. These are values, passed to the function, that the function may process.

function avgVal(num1, num2)
var num3;
num3 = num1 + num2 / 2;
return num3;

The function avgVal takes 2 parameters, num1 and num2 and returns the average of the two numbers. A very simple function, but it demonstrates the use of parameters and the use of the return keyword to assign the value back to the function.

Calling JavaScript Functions

alert(avgVal(12, 6));

The line, above, which calls the avgVal function will now display a message box with the number “9” in it. It should be observed that functions do nothing until they are called from elsewhere in your program code.

Amazon Suggested Reading JavaScript Functions

JavaScript: Interactive Front-End Web Development

JavaScript: The Good Parts

Get Coding! Learn HTML, CSS, and JavaScript

Operator Precedence

Each type of operator has a precedence which determines the order of evaluation. For example, in the expression 10 / 5 + 2 the division takes precedence over the addition so the expression evaluates to 4.

Operator Precedence
Operator Description
 () Parentheses
 ++ or — Unary increment or decrement
 * or / Multiplication or division
 + or – Addition or Subtraction

Local and Global Variables

Variables in JavaScript have a certain scope, an area of code within which they are valid. The position of the variable declaration will determine the scope. A variable declared within a function will be local to that function. It will be valid and available only to code that is also in the function.


A variable declared outside any function will be global and available to the code in all functions.

<!–var myGlobal = 20;function myOne()
var myLocal = 10;
alert(myLocal * myGlobal);
}function myTwo()
alert(myLocal * myGlobal);

If the function myOne is called, a message box will be displayed with the value 200. But, if function myTwo is called, a message box will be displayed with the value 0. This is because within the scope of the function myTwo, the variable myLocal does not exist and so will evaluate to zero.

User Events and Event Handlers

A visitor to your web page will generate user events. Because they will be taking action. An Event Handler is the JavaScript code that will respond to the action.

JavaScript event handlers can handle a wide number of events.

However, different elements of the page generate separate events.

For example, the Load event occurs when a Web page is first loaded by the browser, the onLoad event handler can respond to this.

<BODY onLoad=”welcomeMessage();”>

The above example show the use of a function to display a message box. It is the user action of loading the form that will trigger this action.

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.