Javascript Events, Functions and Methods
Total Page:16
File Type:pdf, Size:1020Kb
6Lesson 6: JavaScript Events, Functions and Methods Objectives By the end of this lesson, you will be able to: 6.1: Define user events, and identify and use JavaScript event handlers. 6.2: Describe the role of functions in JavaScript development. 6.3: Use JavaScript code to define functions. 6.4: Use JavaScript code to call functions. 6.5: Use methods as functions in JavaScript code. 6.6: Identify common errors in JavaScript. 6-2 Advanced HTML5 and CSS3 Specialist Pre-Assessment Questions 1. Which JavaScript event occurs when a Web page is accessed and appears in the browser? a. submit b. focus c. change d. load 2. In JavaScript, what is a function? a. A named set of statements that performs a task or calculates a value. b. A customized method that compiles a script. c. A commonly used term for a script. d. A built-in object behavior. 3. Discuss the output of the following JavaScript statements. var x = 4; var y = 8; var z = 2; var result = x + y / z; © 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0 Lesson 6: JavaScript Events, Functions and Methods 6-3 User Events and JavaScript Event Handlers OBJECTIVE Before you begin using JavaScript methods and functions, it is helpful to understand the 6.1: User events and role of events in JavaScript and how JavaScript handles them. JavaScript event handlers Whether they are submitting forms or navigating Web pages, users generate events. JavaScript contains predetermined event handlers that deal with these events. Table 6-1 describes some commonly used JavaScript events. Many others exist but are beyond the scope of this course. Many of the events described in the table can be triggered by situations other than those given in the examples. The abort event, for example, can also occur when a database transaction is canceled or when a resource has been moved. NOTE: The examples in this table are not a complete listing. You have the opportunity to use Table 6-1: JavaScript user event examples event handlers in Optional Lab 6-1: Using JavaScript Event Description event handlers. abort Occurs when the loading of an image is aborted blur Occurs when input focus is removed from a form element (e.g., when a user clicks the mouse button outside of a particular field) click Occurs when the user clicks on a link or form element change Occurs when a user changes the value of a form field error Occurs when an error takes place while a page or image is loading focus Occurs when a user gives input or focus to a form element load Occurs when a page is loaded into the browser (i.e., opened) mouseOver Occurs when the user moves the mouse pointer over a link, image or other visible element on a page mouseOut Occurs when the mouse pointer leaves a link, image or other visible element on a page reset Occurs when a form's Reset button is clicked select Occurs when the user selects the text in a form field submit Occurs when a form's Submit button is clicked unload Occurs when a page is unloaded from the browser (i.e., closed) Table 6-2 lists JavaScript event handlers designed to process events such as those listed above, with the object(s) that can support each event. Note that these are commonly used event handlers. Many others exist but are beyond the scope of this course. NOTE: Table 6-2: JavaScript event handlers As you gain more experience with Object Event Handler(s) JavaScript, you will see that learning button onclick how and when to use event handlers reset onclick is one of the most important submit onclick JavaScript skills you can acquire. radio onclick, onblur, onfocus checkbox onclick, onblur, onfocus link onclick, onmouseover, onmouseout form onsubmit, onreset © 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0 6-4 Advanced HTML5 and CSS3 Specialist Table 6-2: JavaScript event handlers (cont'd) Object Event Handler(s) text onchange, onfocus, onblur, onselect textarea onchange, onfocus, onblur, onselect select onchange, onfocus, onblur image onabort, onerror, onload area onclick, onmouseover, onmouseout window onload, onunload, onerror Almost every object in an HTML document is capable of receiving some type of event. The objects will only respond to these events if the developer adds event handlers in the appropriate places in the document's code. Remember that event handlers can be placed in script blocks within an HTML file or in an external script file. They can also be placed inline into HTML element tags, which is generally considered poor practice but may be useful in some situations. You will use several of these events and event handlers in this course. ® CIW Online Resources – Movie Clips Visit CIW Online at http://education.Certification-Partners.com/CIW to watch a movie clip about this topic. Lesson 6: JavaScript Events and Functions ® CIW Online Resources – Online Exercise Visit CIW Online at http://education.Certification-Partners.com/CIW to complete an interactive exercise that will reinforce what you have learned about this topic. Exercise 6-1: JavaScript user events OBJECTIVE Introduction to JavaScript Functions 6.2: Functions in JavaScript As you have learned, JavaScript defines some commonly used methods such as alert(), prompt(), confirm() and document.write(). Some methods return values and some do not. For example, the document.write() method does not return a value to any other variable or function. However, the prompt() method returns a value in the form of a text string, which you can then pass to a variable or to another method, such as alert(). function To take full advantage of such values, you must be able to define your own processes, A named set of statements that called functions. A user-defined function is a named set of statements that performs a performs a task or task or calculates a value. calculates a value. Functions are fundamental tools in JavaScript. By plugging data into a function, a value will return either to the screen, to a variable, or to another function. Functions enable you to write code and place it into a single unit that can perform a specific task repeatedly throughout the program, as needed. © 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0 Lesson 6: JavaScript Events, Functions and Methods 6-5 NOTE: Generally speaking, all methods are functions, but not all functions are JavaScript makes necessarily methods. In most programming, methods belong to an object or no distinction class, whereas functions do not. between a function that returns a value In JavaScript, you can use several built-in functions to improve your program's efficiency and a function that does not. Some and readability. In addition, you can create your own functions to make your programs programming scalable. languages require different syntax for procedures that To use functions effectively, you need to know how to: simply perform actions, and • Define (or declare) functions. functions that perform actions and • Pass arguments to them. return a value. • Call them. • Return function results. Defining a Function OBJECTIVE You define a function when you encompass a group of script statements into a function 6.3: Defining block. A function definition consists of the following in this order: JavaScript functions 6.4: Calling • The function keyword JavaScript functions • The name of the function (which may be defined by the user) • A list of arguments to the function, enclosed in parentheses ( ) and separated by commas • The JavaScript statements that define the function, enclosed in curly braces { } calling statement A function's statements are processed when the function is called by a calling A statement that transfers program statement. A function can be called by: execution to a subroutine, • Another function. procedure or function. When the • A script block. subroutine is complete, • An event, such as a mouse click, or a page loading or unloading. execution transfers back to the The generic syntax for a function is as follows: command following the call statement. function functionName(argument1, argument2, ...) { //statement(s) here } NOTE: This example demonstrates how The keyword function must be typed as shown, in all lowercase letters. The user defines to create a user- the function name in this example. Function names must be unique for each particular defined function. You will apply this page. As with variable names, function names should reflect the function's intended info in the next lab. purpose. Also, the naming rules that apply to variables also apply to function names: You will not copy code. This example • The function name must begin with a letter or underscore character is your reference point if you need to • see how to perform Subsequent characters can be letters, numbers, underscore ( _ ) characters or a this task. dollar sign ($). Be aware that the dollar sign ($) can also be used in JavaScript as a single-letter name for a function or as shorthand to refer to the jQuery namespace. These uses are beyond the scope of this course, but you should be aware that the $ sign has some specific uses. © 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0 6-6 Advanced HTML5 and CSS3 Specialist argument The curly braces must encompass any statements that are to execute as part of that A value or expression function. Parentheses () must follow the user-defined function name. These parentheses containing data or are used to receive arguments, but a function does not necessarily have to take or use code that is passed them. Arguments (often referred to as parameters) are pieces of data that the function on to a function or procedure.