web development -2

sri999

t11.pptx

Home >Information Systems homework help >web development -2

HTML5, CSS3, and JavaScript

6th Edition

Working with Events and Styles

Tutorial 11

Carey

Objectives

Create an event handler

Reference an attribute from a page element

Change the inline style of a page element

Create code for mouse events

Create code for keyboard events

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Objectives (continued)

Design and apply custom cursors

Create and apply anonymous functions

Work with alert, confirm, and prompt dialog boxes

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Introducing JavaScript Events

JavaScript programs run in response to events

Events: Actions initiated by the user or by the browser

Example:

Clicking an object on a form

Closing a web page

JavaScript events can be used to build a Hanjie puzzle, i.e., a grid in which each grid cell is either filled or left empty

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Introducing JavaScript Events (continued)

The Hanjie puzzle app contains three puzzles named puzzle1, puzzle2, and puzzle3

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating an Event Handler

Event handler: A property that controls how an object will respond to an event

Event handler waits until the event occurs and then responds by running a function or command block to execute an action

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating an Event Handler (continued 1)

Event handlers can be added to a page element using the following attribute:

where element is the element in which the event occurs, event is the name of the event, and script are the commands that the browser runs in response to the event

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating an Event Handler (continued 2)

Event handlers can also be defined as object properties using the command

object.onevent = function;

where object is the object in which the event occurs, event is the name of the event, and function is the name of a function run in response to the event

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating an Event Handler (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating an Event Handler (continued 4)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating an Event Handler (continued 5)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating an Event Handler (continued 6)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Add an event handler to the buttons in the Figure 11-8

Apply the following onclick event handler to respond to a mouse click:

object.onclick = function;

where object is the page element that is being clicked and function is the function run in response to the click event

Creating an Event Handler (continued 7)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating an Event Handler (continued 8)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The challenge lies in determining which button was clicked

There is no way of knowing which puzzle to load into the page without knowing which button activated the onclick event handler

This information can be determined using the event object

Using the Event Object

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Event object is an object that contains properties and methods associated with an event

Example: The action of clicking a mouse button generates an event object containing information such as which mouse button was clicked, where in the page it was clicked, the time at which it was clicked, and so forth

Using the Event Object (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Event object is passed as an argument to the function handling the event to retrieve the information contained in the event object

Example:

function myFunction(evt) {

function code

}

where evt is the name assigned to the parameter receiving the event object from the event handler

Using the Event Object (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Using the Event Object (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring Object Properties

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

JavaScript object properties that mirror HTML attributes follow certain conventions

All JavaScript properties must begin with a lowercase letter

If the HTML attribute consists of multiple words, JavaScript property follows a format known as camel case, i.e., the initial word is in lowercase and the first letter of each subsequent word is in uppercase

Exploring Object Properties (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

If the name of the HTML attribute is a reserved JavaScript name or keyword, the corresponding JavaScript property is often prefaced with the text string html

class attribute is an exception to this convention because the class name is reserved by JavaScript for other purposes

References to the HTML class attribute use the className property

Object Properties and Inline Styles

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Inline styles for each page element can be applied using the following style attribute:

<element style = “property:value”> …

where

element is the page element

property is a CSS style property

value is the value assigned to that property

Object Properties and Inline Styles (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The equivalent command in JavaScript is

object.style.property = “value”;

with the property style written in camel case

Inline styles have precedence over style sheets

Creating Object Collections with CSS Selectors

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Change the background color of all table cells by applying the following CSS style rule for all td elements:

table#hanjieGrid td {

background-color: rgb(233, 207, 29);

}

Creating Object Collections with CSS Selectors (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

In JavaScript, to change the background color of all table cells, you must first define an object collection based on a CSS selector using the following querySelectorAll() method:

document.querySelectorAll(selector)

where selector is the CSS selector that the object collection is based on

Creating Object Collections with CSS Selectors (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Once the object collection has been defined, change the background-color style of each td element by applying the backgroundColor property to the objects in the object collection

Reference only the first element that matches a selector pattern using the following JavaScript method:

document.querySelector(selector)

where selector is a CSS selector

Creating Object Collections with CSS Selectors (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating Object Collections with CSS Selectors (continued 4)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Mouse Events

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

JavaScript supports events associated with the mouse such as clicking, right-clicking, double-clicking, and moving the pointer over and out of page elements

Working with Mouse Events (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

A mouse action can be comprised of several events

The action of clicking the mouse button is comprised of three events, fired in the following order:

mousedown (the button is pressed down)

mouseup (the button is released)

click (the button has been pressed and released)

Working with Mouse Events (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The event object for mouse events has a set of properties that can be used to give specific information about the state of the mouse

Working with Mouse Events (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Introducing the Event Model

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Event model: Describes how events and objects interact within the web page and web browser

The process in which a single event is applied to a hierarchy of objects is part of the event model

Introducing the Event Model (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Once an event has been initiated, it propagates through the object hierarchy in three phases

Capture phase: The event moves down the object hierarchy starting from the root element (the browser window) and moving inward until it reaches the object that initiated the event

Target phase: The event has reached the target of the event object and no longer moves down the object hierarchy

Introducing the Event Model (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Bubbling phase: The event propagates up the object hierarchy back to the root element (browser window) where the propagation stops

Introducing the Event Model (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Limitations of event handlers

Event handlers, such as onclick and onmousedown, respond to events during the target phase, but they do not recognize the propagation of events through the capture and bubbling phases

Only one function can be applied to an event handler at a time

Adding an Event Listener

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Event listener: Listens for events as they propagate through the capture, target, and bubble phases, allowing the script to respond to an event within any phase

Unlike event handlers, more than one function can be applied to an event using event listeners

Adding an Event Listener (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Add an event listener to an object by applying the addEventListener()method

object.addEventListener(event, function [, capture = false]);

where

object is the object in which the event occurs

event is the event

function is the function that is run in response to the event

Adding an Event Listener (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

capture is an optional Boolean value

true indicates that the function is executed during the capture phase

false (the default) indicates that the function is run during the bubbling phase

Removing an Event Listener

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The event model allows to remove event listeners from the document by applying removeEventListener() method object.removeEventListener(event, function [, capture = false]);

where object, event, function, and capture have the same meanings as the addEventListener() method

Removing an Event Listener (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Controlling Event Propagation

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The browser has its own default responses to events

Apply the following preventDefault() method to the event object to prevent the occurrence of the browser’s default actions:

evt.preventDefault()

Controlling Event Propagation (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Alternatively, you can prevent the browser’s default action by returning the value false from the event handler function

The return false; statement does not prevent default actions if event listeners are used in place of event handlers

Controlling Event Propagation (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring Keyboard Events

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

JavaScript supports the keydown, keypress, and keyup events that allow users to interact with the web page and browser through the keyboard

Exploring Keyboard Events (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The keydown and keypress events are similar in name; the difference between them is as follows:

The keydown and keyup events are fired in response to the physical act of pressing the key down and of a key moving up when it is no longer held down

The keypress event is fired in response to the computer generating a character

Exploring Keyboard Events (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring Keyboard Events (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The value associated with a key event property is affected by the event itself

For the keypress event, the charCode, keyCode, and which properties all return a Unicode character number

Sample values of the charCode, keyCode, which, and key properties for different keyboard keys and events are shown in Figure 11-29

Exploring Keyboard Events (continued 4)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Exploring Keyboard Events (continued 5)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Modifier keys: Alt, Ctrl, Shift, and Command keys

In addition to character keys, JavaScript supports the modifier keys through the use of the altKey, ctrlKey, shiftKey, and metaKey properties

Exploring Keyboard Events (continued 6)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Changing the Cursor Style

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Cursors can be defined using the following CSS cursor style:

cursor: cursorTypes;

where cursorTypes is a comma-separated list of cursor types

Changing the Cursor Style (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

JavaScript command to define cursors is as follows:

object.style.cursor = cursorTypes;

where object is the page object that will display the cursor style when hovered over by the mouse pointer

Changing the Cursor Style (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Create a customized cursor from an image file using url(image)where image is an image file

Example: cursor: url(jpf_pencil.png), pointer;

Changing the Cursor Style (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

By default, the click point for a cursor is located in the top-left corner of the cursor image at the coordinates (0, 0)

Specify a different location by adding the (x, y) coordinates of the click point to the cursor definition as follows:

url(image) x y

where x is the x-coordinate and y is the y-coordinate of the click point in pixels

Working with Functions as Objects

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Everything in JavaScript is an object, including functions

Anything that can be done with an object can be done with a function, including

Storing a function as variable

Storing a function as an object property

Working with Functions as Objects (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Using one function as a parameter in another function

Nesting one function within another function

Returning a function as the result of another function

Modifying the properties of a function

Function Declarations and Function Operators

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The following hello() function is created using the function declaration format:

function hello(){

alert(“Welcome to Hanjie!”);}

Function operator: The definition of the function becomes the variable’s “value”

var hello = function (){

alert(“Welcome to Hanjie!”);

}

Function Declarations and Function Operators (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The two ways of defining the hello() function differ in how they are stored

Functions defined with a function declaration are created and saved as the browser parses the code prior to the script being run

Since the function is already stored in memory, the statements that run the function can be placed prior to the statement that declares the function

Function Declarations and Function Operators (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Function operators are evaluated as they appear in the script after the code has been parsed by the browser

Function operators are more flexible than function declarations, allowing a function to be placed anywhere a variable can be placed

Anonymous Functions

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Anonymous function has function declaration without the function name

Example: The following structure is an anonymous function:

function() {

commands

}

An anonymous function can be inserted into any expression where a function reference is required

Anonymous Functions (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Functions that are named are called named functions

Anonymous functions are more concise and easier to manage because the function is directly included with the expression that invokes it

Anonymous functions limit the scope of the function to exactly where it is needed

Anonymous Functions (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Passing Variable Values into Anonymous Functions

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

JavaScript supports two types of variables:

Global variables: Declared outside of any function and thus are accessible throughout the app

Local variables: Declared within a function and are only accessible to code within that function

Passing Variable Values into Anonymous Functions (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Global variables should be avoided when possible because

global variables are accessible to every function in the application

the task of tracking which functions are using and modifying the global variables becomes increasingly difficult as the application grows in size and complexity

Passing Variable Values into Anonymous Functions (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

An advantage of using anonymous functions is that they reduce the need for global variables because they perform their actions locally within a function

One of the challenges of anonymous functions is keeping track of all of the nested levels of functions and procedures

Passing Variable Values into Anonymous Functions (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Displaying Dialog Boxes

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Alert dialog box can be created using the following alert() method:

alert(text)

where text is the message displayed in the alert dialog box

When an alert dialog box is displayed, the execution of the program code halts until the user clicks the OK button in the dialog box

Displaying Dialog Boxes (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

JavaScript supports confirmation and prompt dialog boxes

Displaying Dialog Boxes (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Displaying Dialog Boxes (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition