Mastering the Internet, XHTML, and JavaScript

1
Mastering the Internet, XHTML, and JavaScript

• Chapter 21
• Handling Events

2
Outline

• Goals and Objectives
• Chapter Headlines
• Introduction
• Event Model
• Events
• Event Handling
• Navigation Events
• Web pages on-the-fly
• Web page Context
• Nesting Web pages on-the-fly
• Disabling XHTML Actions
• Summary

3
Goals and Objectives

• Goals
• Understand how JavaScript makes it possible to
  interact with web pages, minimizes client/server
  traffic, enables verification of user input, and
  process events generated by the ltbodygt and ltagt
  tags
• Objectives
• Importance of events in web page control
• Event model
• Events
• Event handling
• ltbodygt and ltagt events handling
• Web page on-the-fly
• Disabling XHTML actions
• Practice handle events generated by ltbodygt and
  ltagt tags

4
Chapter Headlines

• 21.1 Introduction
• Without JavaScript, your options are limited
• 21.2 Event Model
• Full control over web page behavior begins here
• 21.3 Events
• Why bother knowing these events?
• 21.4 Event Handling
• We are sure you can handle it
• 21.5 Navigation Events
• Navigate with style

5
Chapter Headlines

• 21.6 Web page on-the-fly
• Web pages can fly too
• 21.7 Web page Context
• Browsers take it one step at a time
• 21.8 Nesting Web page on-the-fly
• Watch out all these flying zones
• 21.9 Disabling XHTML Actions
• Control what web surfers can do with your web
  pages

6
Introduction

• Events impart ability to interact with web
  surfers
• Event is an action that occurs as a result of an
  interaction
• JavaScript due it events and event handling
  ability minimizes client/server traffic
  considerably
• An event handler is the processing of an event to
  make decisions
• Example of interactions that generate events and
  need event handlers are
• Clicking a hyperlink
• Clicking a hot spot on an image map
• Filling a form

7
Event Model

• Event model is based on interaction between a web
  surfer and a web page
• Events can be classified into two broad groups
• Navigation clicking on links to browse through
  web pages
• Filling a form Entering data and checking form
  elements
• JavaScript event model is based on event object
• event object connects event source to event
  handler
• When an event occurs, JavaScript sends event
  object to event handler
• The properties of event object may be type,
  target, width, height, layerX, layerY, pageX,
  pageY,screenX, screenY, data, modifiers, which

8
Event Model
9
Event Model

• Example 21.1 JavaScript event object properties
• Program that prints all the properties of event
  object

10
Events

• JavaScript has a unique event for each event
  source
• Event name Event Source Event handler
• abort image onAbort
• click text field/area, list onChange
• dragDrop window onDragDrop
• error image, window onError
• keyDown doc, image, link onKeyDown
• keyPress doc, image, link onKeyPress
• mouseMove nothing onMouseMove
• mouseOut link, image map onMouseOut
• mouseOver link, image map onMouseOver
• reset form reset button onReset
• resize window onResize
• submit form submit button onSubmit

11
Event Handling

• Event handlers handle and process events
• Event handler is included as an attribute of a
  XHMTL tag
• lta hrefwww.neu.edu onClickalert(Hello)gt
• Event handlers must be enclosed in quotes
• Handlers are executed first, then XHTML content
  is rendered
• Event handlers can be written as
• Inline script ? JavaScript code is included
  inside XHTML tag
• Function call ? event handlers are written as
  functions in ltscriptgt tag and called from the
  XHTML tag
• Function call style is better than inline style

12
Navigation Events

• Navigation events include
• Clicking a hyperlink
• Opening a new URL
• Quitting a browser window
• Clicking an hyperlink generates the following
  events
• click ? when the link is clicked
• mouseOver ? when the mouse is moved over the link
• mouseOut ? when the mouse is moved away from the
  link
• Loading and unloading web pages are also separate
  events
• Appropriate event handling grabs attention of the
  surfer because it makes the page dynamic

13
Navigation Events

• Example 21.2 click event of ltagt tag

14
Web pages on-the-fly

• Web pages can be created in two ways
• Using the server
• Using the client
• Using the server is not recommended as in
  increases the server traffic
• Using the client utilizes the concept of creating
  web page on-the-fly
• This concept uses two web pages and the second
  web page is rendered based on the decision taken
  for event from the first web page
• Web pages on-the-fly can be used as part of any
  event handler

15
Web pages on-the-fly

• Example 21.5 Use web pages on-the-fly
• Create a web page on-the-fly using JavaScript
  program

16
Web page Context

• A web browser can have only one active web page
  at a time
• Any code or handlers that the browser needs must
  be included in the code of active web page
• The browsers uses web page context to respond to
  interactions
• This concept is important when dealing with web
  pages on-the-fly

17
Web page Context

• Example 21.6 Web page context

18
Nesting Web pages on-the-fly

• We can embed a web page on-the-fly inside a
  parent web page for any number of levels for
  create nested web pages
• We usually do not require more than 2 levels of
  nesting

19
Nesting Web pages on-the-fly

• Example 21.7 Nesting web page on-the-fly
• Two level nesting of web pages

20
Disabling XHTML Actions

• Some XHTML elements have actions associated with
  them
• For example hyperlinks, image maps, and forms
• Without JavaScript, these actions are executed
  upon clicking
• This execution can be made conditional by using
  event handler functions
• If the condition is true execution takes place or
  else it is stopped

21
Disabling XHTML Actions

• Example 21.8 Disable XHTML actions

22
Summary

• JavaScript interacts with surfers through events
  and event handlers
• Event model is based on event object that
  connects event source with event handler
• JavaScript has an event for each event source
• Event handlers are functions that process and
  handle events
• JavaScript also provides navigation events
• Web pages can be created on-the-fly on
  client-side itself
• Improper web page context may result in errors
• Web pages on-the-fly can be nested
• XHTML actions can be disabled conditionally