Functions


Before you can work with Dreamweaver extensions, you need to know about more than variables . You must also know your way around JavaScript functions. This includes defining functions, using function calls, adding parameters to your functions, and returning values from functions.

Functions and Function Calls

When code statements are placed inside a <script> tag, they are executed as soon as the tag loads. A more powerful and efficient way to write JavaScript code is to put the statements inside functions. A function is like a recipe for action. It contains all the script statements that need to be executed, but it won't be executed until it's called by a function call statement. Functions are usually placed inside <script> tags in the <head> of an HTML document. Function call statements can be placed anywhere , but are often placed in the <body> section, attached to page elements like text links or form buttons and set to execute when certain events take place, like when the user clicks on or mouses over the page element.

A <script> tag containing a simple function looks like this:

 <script language="JavaScript">  function addMe() {  var a = 3;  var b = 6;  var c =  a + b;  alert("The sum of these numbers is " + c + ".");  }  </script> 

Any one-word name can be used as the function's name ( testMe , myFunction , and so forth). All function names must end with the opening and closing parentheses ( ) . The statements contained in the function must be enclosed in the opening and closing curly braces { } .

A function call, like other JavaScript statements, can be placed anywhere within a <script> tag. When it's attached to a page element, it is used in conjunction with an event handler that specifies the event that will trigger the function call. Typical event handlers and function calls might look like this:

 <a href="#" onClick="addMe()">Click here</a>  <img src="myImage.gif" onMouseOver="addMe()">  <body onLoad="addMe()"> 

Different page elements can have different event handlers attached to them. Only the <body> tag can be used with onLoad , for instance. Only certain form elements can use the onChange and onBlur event handlers. Some page elements (such as plain text) can't have any event handlers attached.

Function Parameters

Information can be passed to a function from its function call by using a parameter. A parameter is a special kind of variable that gets defined between the parentheses of the function name when it's defined, and can be used within the function. The value that should go into the parameter is put between the parentheses of the function name when it's called. The <script> tag is where the function is defined and looks like this:

 <script language="JavaScript">  function addMe(a) {  var b = 6;  var c =  a + b;  alert("The sum of these numbers is " + c + ".");  }  </script> 

If you compare this and the previous example of a function definition, you'll see that the parameter replaces the line of code where the variable was defined and assigned a value.

The function call, complete with parameter, then looks like this:

 <a href="#" onClick="addMe(3)">Click me</a> 

Like other variables, parameters can hold numbers, strings, and other kinds of data. Note that when the parameter value is a text string, it must be enclosed within single or double quotes so that the JavaScript interpreter will know that it is a string. If the function call itself is enclosed in double quotes (as in the preceding example), the string inside the function call must be enclosed in single quotes. This is so that the interpreter can determine which quotes belong with which string.

A function can also accept more than one parameter. Multiple parameters are specified in the function's definition as items separated by commas, like this:

 <script language="JavaScript">  function addMe(a,b) {  var c =  a + b;  alert("The sum of these numbers is " + c + ".");  }  </script> 

Multiple parameters must be similarly specified in the function call:

 <a href="#" onClick="addMe(3,6)">Click me</a> 

All expected parameters should be present, in the same order as they are specified in the function definition, in the function call. If a particular parameter isn't present in the call, a null or empty value is passed to the function.

Practice Session #3

In this exercise, you'll build on the same practice file you've been creating. This time you'll put the alert statement in a function and call it from a function call. Then you'll practice adding parameters to the function and its call.

  1. Open the practice2.htm file and save it as practice3.htm.

  2. Change the script statements in your document <head> into a function by adding a few lines to your code, like this (new code is in bold):

     <script language="JavaScript">  function greetMe() {  var person = "Fred";  var greeting = "Hello, " + person + "!";  alert(greeting);  }  </script> 
  3. Try viewing your page in a browser now. All you'll see is a blank page. No alert window will appear, because the script statements aren't being executed. Code within a function will not execute until the function is called.

  4. Revise your document's <body> section to include the following (new code is in bold):

     <body>  <a href="#" onClick="greetMe()">Click here for a greeting.</a>  </body> 
  5. Preview in a browser again. Your page includes a text link. Click the text link, and the alert window should appear (see Figure A.3). If the page doesn't work as expected, check your code against the code shown here. Are there any minor misspellings in the function's defined name and the name you used in the function call?

    Figure A.3. The practice3.htm file, with a text link containing an event handler and function call triggering the greetMe() function.

    graphics/apafig03.gif

  6. Back in your text editor, try rewriting the function to accept a parameter. Revise the function definition to look like this (new code is in bold):

     <script language="JavaScript">  function greetMe(  person  ) {  var greeting = "Hello, " + person + "!";  alert(greeting);  }  </script> 

    Note that the parameter has been added between the function name's parentheses and the statement assigning a value to the person variable has been removed from the code.

  7. Preview your page in a browser now. When you click the text link, a message window appears but with an undefined value where the person parameter should be used (see Figure A.4).

    Figure A.4. The practice3.htm file, showing what happens when an expected parameter hasn't been defined.

    graphics/apafig04.gif

    Not all parameter situations have happy endings like this. Depending on how your parameter is used in the function's statements, trying to execute the function without defining the parameter may result in a syntax error.

  8. Now revise the function call so that it passes the correct parameter to the function (new code is in bold):

     <body>  <a href="#" onClick="greetMe(  'Fred'  )">Click here for a greeting.</a>  </body> 

    Pay attention to the double and single quotes in this statement, or your code won't work. Because the function call is in double quotes, the enclosed text string must be in single quotes.

  9. Preview your page in a browser and try clicking the text link. If all is well, your result will look just like the one shown in Figure A.3.

    To experiment a little bit more with this, try altering the function call slightly by playing with the quotes, like this:

     <a href="#" onClick="greetMe(  "  Fred  "  )">Click here for a greeting.</a> 

    and this:

     <a href="#" onClick=  '  greetMe(  "  Fred  "  )  '  >Click here for a greeting.</a> 

    You'll see that the second code change works fine, but the first doesn't. This demonstrates that double and single quotes must be alternated when one text string is nested inside anotherbut it doesn't matter whether double or single quotes are used for the outermost string.

  10. Try rewriting the function and its call to use multiple parameters. Revise the <script> tag so that the function looks like this (new code is in bold):

     <script language="JavaScript">  function greetMe(person,  salutation  ) {  var greeting =  salutation + ", "  + person + "!";  alert(greeting);  }  </script> 

    Rewrite the function call to look like this (new code is in bold):

     <a href="#" onClick="greetMe('Fred'  ,'Hello'  )">Click here for a  greeting.</a> 
  11. Try this latest revision in the browser. The result should look exactly like the alert window you created earlier.

  12. Finally, learn the flexibility of functions and function calls by adding a second function call to your page. Revise the <body> section of your document like this (new code is in bold):

     <body>  <a href="#" onClick="greetMe('Fred'  ,'Hello'  )">Click here for a greeting.</a>  <br>  <a href="#" onClick="greetMe('Barney','Good-bye')">Click here for another greeting.</a>  </body> 
  13. Test this page in a browser. You now have two text links. Clicking each link calls up an alert window with a different message inside (see Figure A.5).

    Figure A.5. The practice3.htm file with two text links, both calling the same function but with different parameters.

    graphics/apafig05.gif



Dreamweaver MX Extensions
Dreamweaver MX Extensions
ISBN: 0735711828
EAN: 2147483647
Year: 2001
Pages: 141
Authors: Laura Gutman

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net