Project 7: Understanding Functions Essentials for Design JavaScript Level One Michael Brooks.

Project 7: Understanding Functions

Essentials for DesignJavaScript

Level OneMichael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 2

Objectives

Use a simple function Pass information to a

function Return information from

a function


Objectives (continued)

Use a function in an external file Use local and global scope variables Implement object inheritance and

properties Create a custom method for a custom

object


Why Would I Do This?

A function: Is simply a block of code that can be named and

reused repeatedly Is often defined in the head section of the HTML

document Can also be stored in an external file, for

situations where we want to share it among multiple Web pages


Why Would I Do This? (continued)

You can think of a function as a method you can create

You can call the function by name to invoke it

Depending on what you've designed the function to do: You can pass it information It may complete some action or actions It may return information back to you


Visual Summary

Functions are created by declaring them using the function keyword followed by a name for the function

Instructions for the function to execute are included in a code block

Example


Visual Summary (continued)

Functions are an important part of an object oriented environment

Functions are essentially methods which we can create and reuse

By using more advanced techniques, we can create custom objects using functions


Use a Simple Function

Functions: Are normally created in the head section of an

HTML document Can placed anywhere in the document or even

in external files Consists solely of the:

keyword function the name of the function a code block of commands to be executed when the

function is called


Use a Simple Function (continued)

It is often useful to use a function to perform an action when an event occurs Event handlers can be used for this purpose

function addThem() {var total=2+3; document.write(total);

}

<a href="#" onClick="addThem()">Add the numbers</a>



Create a Simple Function in the Head of the Document You can create a simple function in the head

section of an HTML document This is:

the most common place for functions to appear the preferred place to create functions for most Web

developers Example



Create a Simple Function in the Body of the Document

You can create a function in the body of the document Although less common, this is perfectly

acceptable under modern ECMAScript standards

Example



Invoke a Function Using an Event Handler You can use an event handler to invoke a

function Most practical examples of useful functions

require some user action such as: the submission of a form the rolling over of an image the press of a hyperlink

Example


Pass Information to a Function

It is often useful to pass information to a function

This can be done in the same way that information is passed to methods The function would need a receptacle for

storing the information being passed to the function

This can be done by creating a variablefunction createWindow(page) {

window.open(page); }


Pass Information to a Function (continued)

The information could also be passed to the function using a variable value The interpreter will still pass the information as

before

URL="http://www.againsttheclock.com";createWindow(URL);}


Pass Information to a Function(continued)

Send A Text String to a Function You can pass a text string to a function Like methods, functions may or may not

have arguments passed to them the function definition will determine how many

pieces of information are sent to the function

Example


Pass Information to a Function(continued)

Send Variable Information to a Function You can pass variable information to a

function in the form of a string value It is also acceptable to send:

boolean values numbers other types of variable information

Example


Pass Information to a Function(continued) Send Multiple Values to a Function

You can pass multiple pieces of information to a function to complete a calculation

Example


Pass Information to a Function(continued) Test A Function Trigger

You can: create a function use an online event to test the function to make sure it

was being triggered properly Example


Pass Information to a Function(continued) Send Information from Inline

Events You can pass multiple pieces

of information to functions when an event was detected

Example


Return Information from a Function Functions may or may not return values

The keyword, return, can be used to tell JavaScript to return data to the statement that called the function

function computeTax(amount) {var tax=amount*.06;return tax;}


Return Information from a Function

Functions may or may not return values The keyword, return, can be used to tell JavaScript to

return data to the statement that called the function

Example

function computeTax(amount) {var tax=amount*.06;return tax;}


Return Information from a Function (continued) Assign Function Results to a Variable

You can assign function results to a variable Data from functions can be assigned to variables

in the same way that data from methods can be assigned to variables

Example


Use a Function in an External File JavaScript allows the placement of functions

in external files The ability to place JavaScript functions in

external files can be very useful: It further eliminates the need for redundant code

by eliminating the need for multiple pages to declare the same functions

It allows multiple pages or even multiple Web sites to share functions


Use a Function in an External File (continued)

Functions are the only type of JavaScript code that can be placed in an external file External JavaScript files are simply text files, like

HTML files, and can be created in any text editor

Functions in external files can often be shared among different languages, especially if the languages are ECMAScript compliant



Most developers use a .js file extension to name an external JavaScript file but this is not required by the interpreter

Any text file with valid functions will work for this purpose, despite the filename and extension

Functions in external files are linked using the src attribute of the <script> tag



Create an External JavaScript Code File You can create an

external JavaScript code file, using the .js file extension in any text editor



Link External Files to HTML Documents You can create JavaScript code that is placed

in an external file You can also create a link to an HTML file that

would make the functions available in that document

Example


Use Local and Global Scope Variables

The scope of a variable defines where a variable can be used in a script

Variables defined (or declared) outside of functions are global in scope This means they can be used or changed

anywhere in the script Variables with global scopes are known as

global variables


Use Local and Global Scope Variables (continued)

Variables declared within a function using the var keyword are local in scope

Variables that have a local scope can only be used within the function where they are created Local scope variables are known as local

variables



Variables created outside of functions have a global scope

Variables created inside functions with the var keyword have a local scope only and are inaccessible outside the function

Variables created inside functions without using the var keyword have a global scope


Use Local and Global Scope Variables (continued) Variables created inside functions without

using the var keyword have a global scope Variables with a local scope will override the

global scope variables within a function The variable ceases to exist when:

the function is complete the global variable with the same name then

becomes accessible again



Use a Local Scope Variable It is possible to have local and global scope

variables with the same name

Examples



Distinguish Between Local and Global Scope Variables It is very important to distinguish between local

and global scope variables Any variable created with the var keyword in a

function is inaccessible outside the function

Example


Use Custom Objects and Properties

A class: Is the definition of the object including the

properties, methods and events available to the object

Is usually created by a constructor function a few constructor functions are built into the

JavaScript language: the Date() function the Array() function the Object() function


Use Custom Objects and Properties (continued)

Objects inherit the properties and methods of the class, or constructor function from which they are created When an object is created from a parent class

we say the object is instantiated Custom objects are objects you can

create in the code by creating a class and instantiating (creating) an object based on the class



Constructor functions consist of properties and methods A property of a custom object is a variable

that exists within the constructor function A method of a custom object is a function

that is called within the constructor function these methods can be methods that are built into

JavaScript or other functions



The Object() method can be used to create an object:

In the above example, the Object() function is the constructor method which creates a new object By using dot syntax, the other statements

create properties for the person object

person= new Object();person.name="Joe"person.age=32; person.weight=160;



Basically, we have created an object and then created properties for the object

The keyword this can be used to refer to the object that calls a function

By using the this keyword, we can use a

function to create a class



This constructor function is used to create a bank account object Example of creating a new

object of this class:

myAccount=newAccount("checking",500,10);

function Account(type, minimum, fee) {

// type means the type of account (such checking or savings)

this.account_type=type;

// minimum is the minimum balance

this.account_minimum=minimum;// fee is the monthly feethis.account_fee=fee;

}



JavaScript objects inherit all the variables and statements of the constructor function on which they are based This is known as inheritance

The keyword this refers to the current object that called the constructor function



After creating a new object based on a constructor function, you can add additional properties to the object by using a period

myAccount=new Account("checking",500,6);myAccount.balance="1000";


Use Custom Objects and Properties (continued) The prototype property is a built-in property

that: specifies the constructor from which an object was

created allows the property to extend to all objects created

from the constructor The balance property can be created and

added to the constructor function by using the following code:

Account.prototype.balance=1500;



You can also create a new constructor function which is based on an existing function and adds additional properties Example of creating a CheckingAccount objec

t which inherits the properties of the Account object



A secondary type of object could be created for savings accounts

function SavingsAccount(classification, number) {// classification is type of account (personal or business)this.account_class=classification;// number is account numberthis.account_number=number;

}SavingsAccount.prototype=new Account();



Create a Custom Object You can use the Object() method to create a

new object The Object() method:

can be used with the keyword new for this purpose has limited usefulness since we cannot reuse the

code to create additional similar objects



In JavaScript, all built in functions can be used as constructor functions by using the new keyword

This is especially useful when working with: Dates Arrays Images

where practical applications of the technology often require us to create these types of objects


Use Custom Objects and Properties (continued) Create an Object with a User Defined

Function You can use the this keyword to create an object

using a user defined function This allows multiple objects to be created from the

same code Example

Project 7: Understanding Functions Essentials for Design JavaScript Level One Michael Brooks.

Documents

Transcript of Project 7: Understanding Functions Essentials for Design JavaScript Level One Michael Brooks.