Rx4AJAX   (Prescription for AJAX)

ECMA-262/Core JavaScript

ECMA-262/Core JavaScript





ECMA-262 Core: Overview of JavaScript Functions


Introduction

Presenting the topic of "functions" can be confusing with JavaScript, because the term "function" can mean many things. We use the function keyword to build class methods, instance methods and user defined methods (or custom methods). We also use the native Function class to build functions.

The The Function Class is described at our pages that discuss objects. The Function Class is one of many native objects offered with JavaScript.

The Function Statements that feature the uses of the function keyword are described on two separate pages. These two pages pertain to the two versions of the function statement. The links and descriptions are:

To summarize, we can build functions using three approaches: 1) function literal, 2) function statement declaration and 3) the Function class. The advantages and characteristics of each of the three declaration approaches is summarized in the following table.



Comparing the Characteristics of the Three Approaches


Characteristics of Function Declaration Approaches
Characteristic Description function
Statement
function
Literal
Function Class
Most
Commonly
Used
What approach is normally used? generally occasional rarely
Program
Design
Supports a program design methodology structured structured OOP
Implementation
Steps
Steps required to create and use a function 1)declare
2)invoke
1)declare
2)assign
3)invoke
1)declare
2)instantiate
3)invoke
Invoke
Technique
How do you access the declared function? call statement call statement call statement
Named
or
Anonymous
Is the function named in the declaration? named anonymous anonymous
Static
or
Dynamic
A static function is only created once when a page is loaded; a dynamic function is created each time it is invoked. static static dynamic
Memory
Utilization
The dynamic function is more memory intense since a new function object is created every time you create a new object of the Function type. best best worst
Browser
Support
Older browsers support, browser brands best worst good
JavaScript
Support
the version of JavaScript that supports all 1.2 1.1
Recursion Supportive of recursion structures? no yes no




An Example of Each of the Three Approaches

The following examples show the statements required to create a function using each of the three approaches. This example's intended purpose is to compute the amount paid for a retail transaction.

• function Statement:
function priceIt(itemPrice, quantity) { var taxRate = .05; var totAmt = itemPrice * quantity; return totAmt + (totAmt * taxRate); }

• function Literal:
var priceIt = function(itemPrice, quantity) { var taxRate = .05; var totAmt = itemPrice * quantity; return totAmt + (totAmt * taxRate); }

•  Function Class:
var priceIt = new Function("itemPrice", "quantity", "var taxRate = .05; var totAmt = itemPrice * quantity; return totAmt + (totAmt * taxRate);"); Note: In the above Function Class declaration, we both declared the function and instantiated an object (priceIt) in one effort with an assignment statement.



Ways to Invoke a Function

  1. Function Call Statements: The function call statement uses the parentheses operator. The function call statement is one of the expression statement for JavaScript. document.write(priceIt(50.00, 2));//2 items for $50 each //returns 105
  2. Event Handlers: HTML and DOM have numerous predefined events that can accept and execute JavaScript code. For example, a button can be programmed to perform some task given some interaction with the user. Forms are a great place for event handlers. A button inside a form may look like: <input type="button" onclick="alert(priceIt(50.00, 2));" value="Price It" />
  3. JavaScript URLs: You are allowed to replace any conventional URL reference in an HTML attribute that typically takes a URL value. The "href" attribute is one such attribute. The browser will execute the JavaScript code specified by the attribute. <a href="javascript:alert('Error')">
  4. Class Methods: The Function class has two instance methods that invoke functions as methods for unrelated objects. These methods are apply( ) and call( ). showboat.apply(herBoat); //herBoat is an object, showboat is a function name //apply() invokes showboat on behalf of herBoat




Techniques and Recommendations for Your Function





Function Presentation Road Map

The topics covering functions have been presented from three vantage points. Topical definitions are given; some code illustrations are given; and a detailed discussion is given. Links to these areas are provided in the following table. All links are on a separate pages.


Road Map to Function Topics
Definitions Discussions Illustrations
Function N/A N/A
N/A User Defined Functions N/A
N/A The Traditional Function N/A
Function Statement Declaration Function Statements The Function Statement Declaration
N/A FSD Components N/A
Function Literal Function Literal Statement The Function Literal Declaration
Function Class Function Class The Function Class Declaration
Function Call Statement Function Call Statement Invoking a Function with the Call Statement
Function Return Values Return Statement N/A
Nested Functions N/A N/A
N/A Ways to Invoke a Function Call Statement
Call Object The Call Object N/A
Arguments Object The Arguments Object N/A
N/A The apply( ) method The apply( ) method
N/A The call( ) method The call( ) method
Built-In Function N/A N/A
Method Overloading N/A N/A
Scope and Functions N/A N/A




Top            


Rx4AJAX        About Us | Topic Index | Contact Us | Privacy Policy | 2008 This Site Built By PPThompson