6Lesson 6: JavaScript Events, Functions and Methods - Certification Prep

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

OBJECTIVE 6.1: User events and JavaScript event handlers

NOTE: You have the opportunity to use event handlers in Optional Lab 6-1: Using JavaScript event handlers.

NOTE: As you gain more experience with JavaScript, you will see that learning how and when to use event handlers is one of the most important JavaScript skills you can acquire.

User Events and JavaScript Event Handlers

Before you begin using JavaScript methods and functions, it is helpful to understand the role of events in JavaScript and how JavaScript handles them.

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. The examples in this table are not a complete listing.

Event

abort blur

click change error focus load mouseOver

mouseOut

reset select submit unload

Table 6-1: JavaScript user event examples

Description

Occurs when the loading of an image is aborted Occurs when input focus is removed from a form element (e.g., when a user clicks the mouse button outside of a particular field) Occurs when the user clicks on a link or form element Occurs when a user changes the value of a form field Occurs when an error takes place while a page or image is loading Occurs when a user gives input or focus to a form element Occurs when a page is loaded into the browser (i.e., opened) Occurs when the user moves the mouse pointer over a link, image or other visible element on a page Occurs when the mouse pointer leaves a link, image or other visible element on a page Occurs when a form's Reset button is clicked Occurs when the user selects the text in a form field Occurs when a form's Submit button is clicked 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.

Table 6-2: JavaScript event handlers

Object

button reset submit radio checkbox link form

Event Handler(s)

onclick onclick onclick onclick, onblur, onfocus onclick, onblur, onfocus onclick, onmouseover, onmouseout 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

text textarea select image area window

Event Handler(s)

onchange, onfocus, onblur, onselect onchange, onfocus, onblur, onselect onchange, onfocus, onblur onabort, onerror, onload onclick, onmouseover, onmouseout 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 to watch a movie clip about this topic.

Lesson 6: JavaScript Events and Functions

OBJECTIVE 6.2: Functions in JavaScript

function A named set of statements that performs a task or calculates a value.

? CIW Online Resources ? Online Exercise

Visit CIW Online at to complete an interactive exercise that will reinforce what you have learned about this topic.

Exercise 6-1: JavaScript user events

Introduction to JavaScript Functions

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

To take full advantage of such values, you must be able to define your own processes, called functions. A user-defined function is a named set of statements that performs a task or 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: JavaScript makes no distinction between a function that returns a value and a function that does not. Some programming languages require different syntax for procedures that simply perform actions, and functions that perform actions and return a value.

OBJECTIVE 6.3: Defining JavaScript functions

6.4: Calling JavaScript functions

calling statement A statement that transfers program execution to a subroutine, procedure or function. When the subroutine is complete, execution transfers back to the command following the call statement.

NOTE: This example demonstrates how to create a userdefined function. You will apply this info in the next lab. You will not copy code. This example is your reference point if you need to see how to perform this task.

Generally speaking, all methods are functions, but not all functions are necessarily methods. In most programming, methods belong to an object or class, whereas functions do not.

In JavaScript, you can use several built-in functions to improve your program's efficiency and readability. In addition, you can create your own functions to make your programs scalable.

To use functions effectively, you need to know how to:

? Define (or declare) functions.

? Pass arguments to them.

? Call them.

? Return function results.

Defining a Function

You define a function when you encompass a group of script statements into a function block. A function definition consists of the following in this order:

? The function keyword

? 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 { }

A function's statements are processed when the function is called by a calling statement. A function can be called by:

? Another function.

? A script block.

? An event, such as a mouse click, or a page loading or unloading.

The generic syntax for a function is as follows:

function functionName(argument1, argument2, ...) { //statement(s) here }

The keyword function must be typed as shown, in all lowercase letters. The user defines the function name in this example. Function names must be unique for each particular page. As with variable names, function names should reflect the function's intended purpose. Also, the naming rules that apply to variables also apply to function names:

? The function name must begin with a letter or underscore character

? Subsequent characters can be letters, numbers, underscore ( _ ) characters or a 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

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download