22C5 Notes

Topics

Continue with JavaScript Functions
Then, a Form/JavaScript/Function review

Function

A function is a JavaScript construct with the following properties

each function has a name
each function has a body that is composed of a collection of JavaScript statements
when the statement definition is processed, it is not executed, only collected
a function is executed when it is called by name from some other statement
when a function is called, control passes to the function, the function executes, and then control is passed back to the calling location
parameters may be passed in the function call. These parameters act as input values for the function to operate on and may allow for different result from each call
a function may return a value on completion

One benefit of using functions is that it allows the programmer to encapsulate a behavior. This behavior may be invoked repeatedly without duplicating the code. All that is needed is to call the function.

From previous day, a function definition would be

      
      function swapcb(a,b)
      {
         var temp;
         temp = a.checked;
         a.checked = b.checked;
         b.checked = temp;
      }

And a call to this function would be

      
      swapcb(document.ex1.ppp,document.ex1.qqq)

Note how the information (object) is passed into the function and referred to by a different set of names. Demo

The general syntax is of the form

      
         function FunctionName(Param1,Param2,...)
         {
            Statements
         }

where

FunctionName is the name of the function. It must follow the same rules as variable names
Param is a parameter. There may be 0, 1, 2, or more parameters to the function. Even if there are no parameters, the () must still be used.
Statements is the body of the function and is a sequence of 1 or more JavaScript statements.

A function can return a value upon completion using the return statement.

      
      function sq_add_5(x)
      {
         x = x * x + 5;
         return x
      }
      
      z = 3;
      y = sq_add_5(z);
      alert('Value of Y is ' + y );

Function Definition

inside <SCRIPT> tags
probably in the page HEAD

the function name, the number of parameters, and the parameter names are your choice

             
            <SCRIPT LANGUAGE="JavaScript" >
            function set_box() 
            { 
               document.aform.tbox1.value = "hi"; 
               document.aform.box2.value = 81;    
            } 
             
            function is_pos(n) 
            { 
               if (n > 0) 
                  return true; 
               else 
                  return false; 
            } 
            
            function clear_tbox(abox) 
            { 
               abox.value = " "; 
            } 
            </SCRIPT>

Two function calls may have different results by supplying different arguments.

       
           function put_in_box1(in_val) 
           { 
              document.game.door1.value = in_val; 
           } 
           . . . 
           put_in_box(12); 
           . . . 
           put_in_box("words to use"); 
           . . .

The first call will put 12 in as the new value for text box door1.

The second will assign the string words to use to the box By passing objects to functions, the functions can operate on many different objects. As in the Swap-Checkbox example.