1 / 50

Chapter 2: Variables, Functions, Objects, and Events

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

btracey
Download Presentation

Chapter 2: Variables, Functions, Objects, and Events

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 2: Variables, Functions, Objects, and Events JavaScript - Introductory

  2. Previewing the NorthAmericaImageMap.html File

  3. Section A: Working with Variables, Functions, and Events

  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

  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

  6. JavaScript Reserved Words

  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

  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

  9. Image Map

  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

  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 function’s statements, enclosed in curly braces { }

  12. Function That Prints Name of Multiple Companies

  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 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

  14. JavaScript Function Being Called from the <BODY> Section

  15. Output of the JavaScript Function Being Called from the <BODY> Section

  16. Calling Functions • When a function performs a calculation such as an average, normally it wants to receive a return value

  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

  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

  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

  20. Two Object Definitions Extending Another Object Definition

  21. CompanyObjects.html

  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 object’s methods by adding a period

  23. 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

  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

  25. 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

  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

  27. Section B: Using Events

  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

  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

  30. JavaScript Events

  31. 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

  32. HTML Elements and Associated Events

  33. HTML Elements and Associated Events

  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

  35. Event Handlers • The prompt()method displays a dialog box with a message, a text box, an OK button, and a Cancel button

  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 <A HREF+”http://www.MyWebSite.com/index.html”>My Web Site</A>)

  37. HTML Document with Anchors

  38. 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

  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

  40. Link with a Custom OnClick Event Handler

  41. 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.”);

  42. RedPage.html and the Confirm Dialog Box

  43. 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

  44. 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

  45. Pixel References

  46. 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)

  47. HTML Document with an Image Map

  48. Output of an HTML Document with an Image Map

  49. 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

  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 <IMG> tag

More Related