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 Section

Output of the JavaScript Function Being Called from the 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 tag The tag creates input fields that interact with users The 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

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 My Web Site )

HTML Document with Anchors

The 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 to start a preformatted text container Press Enter and type 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, and 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

To create an image map,you must include the following tags on your Web page: –An tag that contains an SRC attribute specifying name of image and a NAME attribute specifying the name of the … tag pair that contains mapping coordinates –A … tag pair including NAME attribute used by tag – tags within the … tag pair that identify coordinates within image recognized as hot zone Creating an Image Map

Pixel References

Creating an Image Map Use the 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 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 tag