JavaScript - Functions, Methods and Events
CIW Website Design Manager Course Section 2, Part A1, Chapter 3
Defining 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 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.
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. This scope is determined by where the variable is declared. 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.
| <SCRIPT LANGUAGE="JavaScript"> <!-- var myGlobal = 20; function myOne() { var myLocal = 10; alert(myLocal * myGlobal); } function myTwo() { alert(myLocal * myGlobal); } //--> </SCRIPT> |
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
User events are actions performed by a visitor to your Web site. An Event Handler is the JavaScript code that will respond to the action.
There are a number of events that can be handled by JavaScript event handlers, and these apply to different elements on the page.
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 line of code utilises the earlier function example to display a message box when the Web page is loaded.