CpSc 217 - Structured and Dynamic Web Programming

The notes found on these pages all reference the textbook given above. Unless otherwise stated, the citation of the information on these web pages is that text.

Defining Functions

• name - Use same rules for naming variable identifiers
• Optional paramters
• Body of Code - any Javascript statement
• Template
  function functionName (params)
  {
  FunctionBody
  }

  function distance(x1, y1, x2, y2)
  {
    var dx = x2 -x1;
    var dy = y2 - y1;
    return Math.sqrt(dx*dx + dy+dy);
  }
  

• Note: Javascript permits the nesting of function definitions

Invoking Functions

functionName (paramValues); //
• var = functionName (paramValues);
• ans = distance ( 3, 8, 4, 9);

Function Semantics

• The function call
1. Control is transferred from the caller to callee
2. Parameters are passed in in-order
3. Memory is allocated for local variables (including parameters passed by value)
• The body of the function is executed
• Function Return
1. If there is a return value, it is calculated and returned to caller
2. Memory for local variables is deallocated
3. Control is transferred back to the caller
• Can set methods to functions and invoke using method
  o.m = f; // f is a function, o is an object, m is a method
  o.m();
  See page 168 for example

   var calculator = {
      operand1: 1,
      operand2: 1,
      add: function() {
            this.result = this.operand1 + this.operand2;
           }
   };
   calculator.add();
   alert (calculator.result);
  

• Method Chaining - when method returns object, you can use the return value of one invocation to call another method (page 169)

Arguments and Parameters

• A copy of the value of the actual argument is placed in the memory location for the formal parameter
• Default type of passing parameters
• Value arguments are like local variables, but function gets them automatically
  function fee(hoursWorked, minutesWorked)
• Choosing Formal Parameter Names
  Use a meaningful name within the function
  It does not need to be the same name as the calling function
• Be careful of types of arguments - passed in order
• Variable-length arument list

  function f (x, y, z)
  {
    if (arguments.length != 3){
  	throw new Error ("function called with " + arguments.length +
  	   " arguments, but expected 3")
    }
    // function code
  }
  

Using functions to store values implicitly

• Consider

  function square(x) { return x*x; }
  var s = square; // s refers to function square
  square(4); // 16
  s(4);	   // 16
  

• See Page 177 for a more interesting example

Scope (Closures)

• lexical scoping - where the are defined, not where they are invoked from
• Consider the following example - perhaps we shouldn't code this way

  function counter () {
    var n = 0;
    return {
  	count: function() {return n++: },
  	reset: function() {return 0; }
    };
  }
  
  var c=counter(), d=counter(); // two SEPARATE counters
  c.count()	// 0 - note it is a post increment
  d.count()	// 0, they count independently
  c.reset()	// set c to 0
  c.count()	// 0
  d.count()	// 1
  

Function Properties, Methods, and Constructors

• arguments.length // number of arguments passed in
• arguments.callee.length // number of arguments expected
• toString() applied to functions usually returns the code of the function
  Different in some browsers
• functions are usually defined with the function keyword, but can also be created with the new Function constructor
  var f = new Function("x", "y", "return x*y;");