o    A function is a named set of JavaScript statements that perform a task and appear inside the standard <script> tags. The task can be simple or complex, and the name of the function is up to you, within similar constraints to the naming of variables.

o     JavaScript functions are declared before they are used. The declaration looks like this:

     function name_of_function( )

  {

    …your code here… }

o       Unlike all the JavaScript instructions we have looked at so far, the code inside a function will not be run until specifically requested. Such a request is called a function call.

o       Functions can be called from anywhere on the page that JavaScript can live, but must be called after the function has been declared. For example, if you declare a function in the body of a document and then call it from the head of the document, you may find that the browser returns an error message. For this reason, most JavaScript programmers define any functions they are going to use between <script> tags in the head section of their pages to ensure that they are all defined before they are used.

o        Functions are to object methods as variables are to object properties – they are also called in a similar manner. To run the code contained in the name_of_function function above, we would use the following line of code:

     name_of_function();

Note the parentheses after the function name. This lets JavaScript know that we are dealing with a function and not a variable. The parentheses also allow us to “pass” extra information to the function, which can alter its behaviour.

Consider the following function:

        function greet_user( username )

    {

       message = “Hello “ + username;   alert(message); }

o         Whenever the function is called, it will greet the user named.

How can we pass this information through? Consider:

      greet_user(“Anisa”);

or

   var_1 = prompt(“Name?”, “”); greet_user(var_1);

o   We should use functions in our code as often as possible. Whenever we perform an action that isn’t accomplished by the use of a method or an assignment operator, we should try to build a function that can accomplish the task.

o      For example, we can build a function to check email addresses:

   function check_email( address )

   {   var_1 = false;

   if ( address.match(/^.+@.+..+$/) )

   {     var_1 = true;

   } }

o       The above function will take a string that is passed to it (often called the function’s argument), and will alter the value of var_1 depending on what it finds. However, the function is lacking an important ability – the ability to communicate its findings back out to the rest of the script.

We have mentioned return values a few times in the notes. Now we see a situation that requires a function to return its findings to the rest of the code. Ideally, we’d like to be able to use the above function as follows:

   if ( check_email(address) )

  {

   …do some email things… }

o         In order for this to work, the return value from check_email would have to be a Boolean value. We can arrange this quite simply:

        function check_email( address )

   {   var_1 = false;

   if ( address.match(/^.+@.+..+$/) )

   {     var_1 = true;   }   return var_1; }

o        Since var_1 is either true or false, the returned value will be Boolean. We can even skip the use of the variable here and be more direct: 

  function check_email( address )

  {

   if ( address.match(/^.+@.+..+$/) )

   {     return true;   }   return false;

  }

Or even better, since address.match() will return a Boolean value of its own:

     function check_email( address )

    {

     return address.match(/^.+@.+..+$);

    }

The above function may not seem like a great saving. After all, we are using four lines of code to define a function that performs only one line of code. Compare:

       function check_email( address )

    {

      return address.match(/^.+@.+..+$);

    }

      if ( check_email(address) )

   {

     …do some email things…

   }

   with:

  if ( address.match(/^.+@.+..+$/) )

 {

   …do some email things… }

o       While the benefits here are not obvious, consider the case where, at some point in the future, you discover a better method of checking for email addresses. In the second case above, you will have to search your code for each and every instance of that method, and replace it with your new method, which may not be one line of code. In the first case, you will just have to change the underlying function definition, and the “upgrade” will be effective throughout your code without you having to update each occurrence.

Project 

o      Open your previous project file, and save it under the name chapter_19.html. o Clear all JavaScript code from your script tags.

o     Ensure that you have a script element in the head area of your document, and one in the body area.

o       In the head area, define a function called show_message. This function should take one argument, called message, and should use an alert box to display the contents of the argument.

o      In the body area, call the function with various messages as arguments.

o    Now use a variable in the body area to store the return value of a prompt asking the user for a message. Use this variable as the argument to a single instance of show_message.

o      Define a new function in the head area called get_message. It should take no argument, but should replicate the function of your prompt in the body area and ask the user for a message via a prompt box.

o       Make sure that get_message returns a sensible value. We are aiming to replace our prompt statement in the body area with the following code:

message = get_message();

so consider what you will have to return to enable this to work.

o      Once you are happy with your get_message definition, try replacing your prompt code in the body area with the statement above.

o     To demonstrate the power of functions, change the action of show_message to write the message to the page without changing any code in the body area of the page.