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 CallsWhen 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 ParametersInformation 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 #3In 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.
 |
EAN: 2147483647
Pages: 141