Slide 1

Chapter 2: Variables, Functions, Objects, and Events JavaScript - Introductory Slide 2 Previewing the NorthAmericaImageMap.html File Slide 3 Section A: Working with Variables, Functions, and Events Slide 4 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 Slide 5 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 Slide 6 JavaScript Reserved Words Slide 7 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 Slide 8 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 Slide 9 Image Map Slide 10 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 Slide 11 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 functions statements, enclosed in curly braces { } Slide 12 Function That Prints Name of Multiple Companies Slide 13 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 functions 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 programs logic and assist in the debugging process Slide 14 JavaScript Function Being Called from the Section Slide 15 Output of the JavaScript Function Being Called from the Section Slide 16 Calling Functions When a function performs a calculation such as an average, normally it wants to receive a return value Slide 17 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 Slide 18 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 Slide 19 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 Slide 20 Two Object Definitions Extending Another Object Definition Slide 21 CompanyObjects.html Slide 22 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 objects methods by adding a period Slide 23 Variable Scope Variable scope refers to where in your program a declared variable can be used A variables 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 Slide 24 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 Slide 25 Section A: Chapter Summary Sending variables or values to a called functions 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 Slide 26 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 Slide 27 Section B: Using Events Slide 28 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 Slide 29 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 Slide 30 JavaScript Events Slide 31 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 Slide 32 HTML Elements and Associated Events Slide 33 Slide 34 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 Slide 35 Event Handlers The prompt()method displays a dialog box with a message, a text box, an OK button, and a Cancel button Slide 36 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 ) Slide 37 HTML Document with Anchors Slide 38 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 Slide 39 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 Slide 40 Link with a Custom OnClick Event Handler Slide 41 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.); Slide 42 RedPage.html and the Confirm Dialog Box Slide 43 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 Slide 44 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 Slide 45 Pixel References Slide 46 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 shapes pixels The SHAPE attribute can be set to circle, rect (for rectangle), or poly (for polygon) Slide 47 HTML Document with an Image Map Slide 48 Output of an HTML Document with an Image Map Slide 49 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 Slide 50 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