JavaScript: Functions



Author: Ronald S. Holland
at
Total Application Works





To contact us



HOME] Consulting Design Maintenance Project Testing Training Turnkey Java C++ SQL HTML JavaScript ]

© 2002 - 2014 All Rights Reserved Total Application Works


  • Tell a friend about this site (copy and paste the following HTML page into a file (e.g., using Notepad).)
  • <html>
    <head>
    <title>Example of a link </title>
    </head>
    <body>
    <a href="http://sumtotalz.com/TotalAppsWorks/JavaScript/JS_Functions.html">
    Functions </a>
    </table>
    </body>
    </html>

Introduction

The purpose of this tutorial is to introduce and explore JavaScript functions. This tutorial assumes that you have read and mastered my tutorials on:

  1. Table Tags
  2. Form Tags
  3. Introduction to JavaScript
  4. JS: basic Calculator
This tutorial assumes that you have some prior programming experience. It is not intended to be a comprehensive discussion on JavaScript or programming. In this tutorial, we will briefly discuss functions, as we ease into JavaScript, and build on what we learned in JS: basic Calculator (see ref. 3 above). In the next section, we will briefly describe JavaScript basics.

What is JavaScript?

JavaScript is a scripting language developed by Netscape that enables Web designers to create interactive sites/web pages. JavaScript and Java have many features and structures in common, however, they were developed independently. When JavaScript embedded within HTML source code, it enables Web designers to spice up their sites with dynamic content. JavaScript is used in Web pages designers to:

  • Improve the Web page dynamic content design;
  • Add interactivity to HTML pages;
  • Validate forms and gather data from users;
  • Detect browsers;
  • Create cookies;
  • Etc.
JavaScript is a scripting/interpreted language, which can execute without having to compile the source code. Java and JavaScript are similar but are not the same. They are two completely different languages in both concept and design. It runs on the client's computer and does not require constant downloads from your web site.

What is a JavaScript function?

A JavaScript function is a block of code that can be called and that block of code is then executed. The block of code that forms a function might look like:

 
function aFunction {
   Statement 1
   Statement 2
   ...
   Statement n
}
 
Figure 1: A JavaScript function


In Figure 1,

  • function - indicates that the following block of code is a function. A function always atarts with the keyword: function.
  • aFunction - the name of the function. This is an addressable reference.
  • { } - the braces that enclose the code to be executed.

How can we call a function?

There are several ways to call a function. Consider the following examples.

  1. You can simply call the function, as in the following example.

    Example Code Demo: Example Code
      
    <head>
    <script LANGUAGE="JavaScript">
    function evaluate( b , c ) {
       alert("The value of 3 + 4 is " + ( b + c) );
    }
    </script>
    </head>
    <body>
    <a HREF="JavaScript:calc( 3 , 4 )"> Calculating 
    </body>
     
                                
    Calculating
    Figure 2: A JavaScript function


  2. You can use the Onclick attribute of the Form tag, as in the following example.

    Example Code Demo: Example Code
      
    <head>
    <script LANGUAGE="JavaScript">
    function calc( b , c ) {
       alert("The value of 3 + 4 is " + ( b + c) );
    }
    </script>
    </head>
    <body>
    <form>
    <script type="text/JavaScript">
    <INPUT TYPE="BUTTON"  NAME=bIsEval
                    OnClick="calc( 3 , 4 );" 
    a = evaluate( 3 , 4 )
    </script>
    </form>
    </body>
     
                                   
    Figure 3: Using the OnClick attribute to call a JavaScript function


    In Figure 3, the invoking of calc( 3 , 4 ) with integers 3 and 4 is called passing parameters, where 3 and 4 are the parameters.
  3. Calling a Function From Another Function

    Functions can also call other functions. Simply enter the name of the function to be called, with its parentheses, like so:

    Example Code Demo: Example Code
     
    <html>
    <head>
    <script type="text/JavaScript">
    function firstFunct() {
       alert("Entering first function. About to call second function.");
    
       secondFunct() ;
    }
    function secondFunct() {
       alert("Entering Second function. About to finish...");
    }</script>
    </head>  
    
    <body>
    <form NAME=fWinVer>
    <INPUT TYPE="BUTTON"  NAME=bIsBrow
                    OnClick="firstFunct();" 
                    VALUE="Call Function"> 
    </form>
    </body>
    </html>
     
    Figure 4: Function called from another function

Local variables

What are local variables? Local variables are those variables that are defined within the function. In Figure 4 below, the following are local variables.

  1. var items
  2. var sum
  3. var total
You'll note that the keyword var precedes the variable name.

Example Code Demo: Example Code
  
<html>
<head>
<script type="text/JavaScript">
function average() {
   var items = average.arguments.length
   var sum = 0

   for (i = 0; i < items;i++) {
      sum += average.arguments[i]
   }
   return ( sum/items )
}

function sum() {
   var items = sum.arguments.length
   var total = 0

   for (i = 0; i < items;i++) {
      total += sum.arguments[i]
   }
   return ( total )
}

document.write("The average is " 
       + average(15,21,33,64,95,87,42,55,77,88,10))  

document.write("

The total is " + sum(15,21,33,64,95,87,42,55,77,88,10)) </script> </head> <body> </body>
Figure 5: A JavaScript function


In Figure 5, the keyword return will return a value to the statement that invoked the function call. For example,
  • The call to the function average returns the value of sum/items, and

  • The call to the function sum returns the value of total.

Definitions

Scripting language

function

    Functions are self-contained modules that perform a specific task. For those who have some familiarity with programming, some functions that you've had experience with are:

    Function Description Example
    sqrt(x) square root of x 30 = sqrt(900)
    exp(x) exponential function ex 2.178282 = exp(1.0)
    log(x) natural logarithm of x (base e) 1.0 = log(2.178282)
    log10(x) logarithm of x (base 10) 1.0 = log10(10.0)
    pow(x , y) x raised to the power of y 128 = pow(2 , 7)














HOME] Consulting Design Maintenance Project Testing Training Turnkey Java C++ SQL HTML JavaScript ]


To contact us

© 2002 - 2014 All Rights Reserved Total Application Works