Chapter 2
advertisement
Chapter 2: Variables, Functions,
Objects, and Events
JavaScript - Introductory
Previewing the
NorthAmericaImageMap.html File
Section A:
Working with
Variables, Functions,
and Events
Objectives
In this section, you will learn how to:
• Declare and use variables
• Define functions
• Call functions
• Use JavaScript objects
• Use object inheritance and prototypes
• Use object methods
• About variable scope
Variables
• Values stored in computer memory locations are
called variables
• In JavaScript, use the reserved keyword var to
create variables
• Reserved words, or keywords, are part of the
JavaScript syntax
• Reserved words cannot be used for variable
names
• When you use the reserved word var to create a
variable, you declare the variable
JavaScript Reserved Words
Variables
• You can declare multiple variables in the same
statement using a single var keyword followed
by a series of variable names and assigned
values separated by commas
• The name assigned to a variable is an identifier
• Identifiers must begin with an uppercase or
lowercase ASCII letter (ex. ($) or (_)
• Reserved words cannot be used for variable
names, and there should be no spaces within a
variable name
Variables
• Common practices in variable names:
– Use an (_) to separate individual words
– Use a lowercase letter for the first letter of first word
• Variable names, like other JavaScript code, are
case-sensitive
Image Map
Defining Functions
• A function allows you to treat a related group of
JavaScript statements as a single unit
• Lines that compose a function within an HTML
document are called the function definition
• The syntax for defining a function is:
function name_of_function (parameters) {
statements;
}
• A parameter, or argument, is a variable that will
be used within a function
Function Definitions - Three Parts
1. The reserved word function followed by the
function name. The reserved word function
notifies the JavaScript interpreter that the code
following is a function. As with variables,the
name assigned to a function is called an
identifier. The same rules and conventions that
apply to variable names, apply to function names
2. Any parameters required by the function are
contained within parentheses following the
function name
3. The function’s statements, enclosed in curly
braces { }
Function That Prints Name
of Multiple Companies
Calling Functions
• A function definition does not execute
automatically
• To execute a function, you must invoke, or call, it
from elsewhere in the program
• Sending variables or values to a called function’s
arguments is called passing arguments
• You are not required to return a value from a
function
• Using unique names to identify specific variables
makes it easier to understand a program’s logic
and assist in the debugging process
JavaScript Function Being Called
from the <BODY> Section
Output of the JavaScript Function
Being Called from the <BODY> Section
Calling Functions
• When a function
performs a
calculation such
as an average,
normally it wants
to receive a
return value
Understanding JavaScript Objects
• Objects are based on classes
• Data, procedures, and other attributes are
contained in a structure known as a class
• A function that is used as the basis for an object
is called an object definition, or constructor
function
• A constructor function is more like a template on
which an object is based than a class
• Property is a variable within a constructor
function
Understanding JavaScript Objects
• A method is a function - whether a built-in
JavaScript function or a function you create that is called from within an object
• Properties are also called fields
• Class names in traditional object-oriented
programming languages usually begin with an
uppercase letter
• Objects are created from constructor functions
using the new keyword
• Object now has three properties: type, sound,
and transport_mode
Object Inheritance
• Objects inherit the properties and methods of the
constructor functions from which they are
instantiated
• Constructor functions do not require arguments
• A prototype property is a built-in property that
specifies the constructor from which an object
was extended
• Object definitions can extend other object
definitions
• JavaScript, however, only allows objects to
inherit from a single object definition
Two Object Definitions Extending
Another Object Definition
CompanyObjects.html
Object Methods
• Object methods are functions associated
with a particular object
• The methodName following the this
reference is the name that is being
assigned to the function within the object
• After you instantiate an object based on
object definition, call the object’s methods
by adding a period
Variable Scope
• Variable scope refers to where in your program a
declared variable can be used
• A variable’s scope can be either global or local
• Global variable is one that is declared outside of a
function and available to all parts of the program
• Local variable is declared inside a function and is
only available within the function
• The arguments within the parentheses of a function
declaration are considered to be local variables
• To declare a global variable, the use of the var
keyword is optional
Section A: Chapter Summary
• The values stored in computer memory locations
are called variables
• Use the reserved word var to declare a variable
• Words that are part of JavaScript language
syntax are called reserved words or keywords
• Before you can use a function in JavaScript
program, first create, or define, the function
• A parameter, or argument, is a variable that will
be used within a function
Section A: Chapter Summary
• Sending variables or values to a called function’s
arguments is called passing arguments
• To return a value, include the return statement
within the called function
• Two types of elements are found within
constructor functions: properties and methods
• The this keyword refers to the current object that
called the constructor function
• Object definitions can extend other object
definitions
Section A: Chapter Summary
• The prototype property is a built-in property
that specifies the constructor from which an
object was extended
• Object methods are essentially functions
associated with a particular object
• The syntax for calling an object method is
objectiveName.methodName (arguments);
• Variable scope refers to where in your program
a declared variable can be used
Section B:
Using Events
Objectives
In this section, you will learn:
• About events
• About HTML tags and events
• How to use event handlers
• About links
• How to use link events
• How to create an image map
Understanding Events
• One way JavaScript makes HTML
documents dynamic is through events
• An event is a specific circumstance that is
monitored by JavaScript
• Most common events are actions that
users take
JavaScript Events
HTML Tags and Events
• Most commonly used HTML tag that
allows users to generate events is the
<INPUT> tag
• The <INPUT> tag creates input fields that
interact with users
• The <INPUT> tag has a number of
attributes, including the TYPE attribute
• Unlike most HTML code, the NAME
attribute is case-sensitive
HTML Elements and
Associated Events
HTML Elements and
Associated Events
Event Handlers
• When an event occurs, a program executes
JavaScript code that responds to the event
• Code that executes in response to a specific
event is called an event handler
• Event handler names are the same as the name of
the event itself
• JavaScript code for event handler is contained
within quotation marks following the name of the
JavaScript event handler
• JavaScript alert()method displays a pop up dialog
box with an OK button
Event Handlers
• The
prompt()method
displays a dialog
box with a
message, a text
box, an OK
button, and a
Cancel button
Links
• HTML documents contain hypertext links
• The text or image used to represent a link in an
HTML document is called an anchor
• An anchor uses the Uniform Resource Locator
(URL) to specify the name and location of an
HTML document
• Absolute URL refers to a specific drive and
directory or to the full Web address of an HTML
document
HREF+”http://www.MyWebSite.com/index.html”>My Web Site</A>)
<A
HTML Document with Anchors
The <SCRIPT> Tag
• A relative URL specifies the location of a file
according to the location of the currently loaded
HTML document
• Relative URLs are used to load HTML documents
located on the same computer as the currently
displayed HTML document
Link Events
• Primary event used with links is the click event
• A value of true indicates that you want the Web
browser to continue and open the URL referenced
by the link
• A value of false indicates that you do not want the
Web browser to open the link
• The confirmed()method displays a dialog box that
contains a Cancel button and an OK button
• MouseOver event occurs when the mouse is
moved over a link
Link with a Custom
OnClick Event Handler
To Create a JavaScript Document
• Start your text editor or HTML editor and create a
new document
• Type <PRE> to start a preformatted text container
• Press Enter and type <SCRIPT
LANGUAGE=“JavaScript1.2”> to begin the
JavaScript document
• Press Enter and type document.writeIn(“This is
the first line in my JavaScript file.”);
• Press Enter again and type document.
writeIn(“This is the second line in my JavaScript
file.”);
RedPage.html and the
Confirm Dialog Box
Creating an Image Map
• An image map consists of an image that is
divided into regions
• Use the <IMG>, and <AREA> tags to create an
image map on a Web page
• A pixel (short for picture element) represents
a single point on a computer screen
• A VGA monitor contains 640 columns by 480
rows of pixels; Super VGA contains 1024
columns by 768 rows of pixels
Creating an Image Map
• To create an image map,you must include the
following tags on your Web page:
– An <IMG> tag that contains an SRC attribute
specifying name of image and a NAME attribute
specifying the name of the <MAP>…</MAP> tag
pair that contains mapping coordinates
– A <MAP>…</MAP> tag pair including NAME
attribute used by <IMG> tag
– <AREA> tags within the <MAP>…</MAP> tag
pair that identify coordinates within image
recognized as hot zone
Pixel References
Creating an Image Map
• Use the <AREA> tag to define a region as a hot
zone on an image map, use the SHAPE attribute
to specify the shape of region, and COORDS
attribute to specify coordinates of shape’s pixels
• The SHAPE attribute can be set to circle, rect (for
rectangle), or poly (for polygon)
HTML Document with an Image Map
Output of an HTML Document
with an Image Map
Section B: Chapter Summary
• An event or trigger is a specific circumstance that
is monitored by JavaScript
• The <INPUT> tag, which is used for creating input
fields that users interact with, generates events
• An event handler name is the same as the name
of the event itself, but with a prefix of on
• The built-in JavaScript alert()method displays a
pop up dialog box with an OK button
• The prompt () method displays a dialog box with
a message, a text box, a Cancel button, and an
OK button
Section B: Chapter Summary
• There are two types of URLs in an HTML
document: absolute and relative
• The confirm () method displays a dialog box with
a message, a Cancel button, and an OK button
• The MouseOver event occurs when the mouse is
moved over a link
• You can use the JavaScript status property to
display custom messages in the status bar
• You include the USEMAP attribute to use an
image map with an image rendered by the
<IMG> tag