Goals and Objectives

tacitmarigoldInternet και Εφαρμογές Web

25 Ιαν 2014 (πριν από 3 χρόνια και 6 μήνες)

201 εμφανίσεις

1

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

and
<a>

tags


Objectives


Importance of events in web page control


Event model


Events


Event handling


<body>

and
<a>

events handling


Web page on
-
the
-
fly


Disabling XHTML actions


Practice: handle events generated by
<body>

and
<a>

tags

2

Chapter Headlines


1
Introduction


Without JavaScript, your options are limited


2
Event Model


Full control over web page behavior begins here


3
Events


Why bother knowing these events?


4
Event Handling


We are sure you can handle it


5
Navigation Events


Navigate with style

3

Chapter Headlines


6
Web page on
-
the
-
fly


Web pages can fly too


7
Web page Context


Browsers take it one step at a time


8
Nesting Web page on
-
the
-
fly


Watch out all these flying zones


9
Disabling XHTML Actions


Control what web surfers can do with your web
pages

4

Introduction


Events impart
ability to interact

with web surfers


Event is an action that occurs as a
result of an interaction


JavaScript due to 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

5

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

6

Event Model

7

http://www.cs.csubak.edu/~jmoloney/cmps211/JavaScript/Examples/link.html






8

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

9

Event Handling


Event handlers
handle and process

events


Event handler is included as an
attribute of a XHMTL

tag

<a href=“
www.neu.edu
” onClick=“alert(‘Hello’)”>


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

tag and called from the XHTML tag


Function call style is better

than inline style

10

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

11

http://www.cs.csubak.edu/~jmoloney/cmps211/JavaScript/sale.html

http://www.cs.csubak.edu/~jmoloney/cmps211/JavaScript/sale.html

http://www.cs.csubak.edu/~jmoloney/cmps211/JavaScript/Examples/sale.html


12

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

13

http://www.cs.csubak.edu/~jmoloney/cmps211/JavaScript/Examples/pizza1.html


14

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

15

http://www.cs.csubak.edu/~jmoloney/cmps211/JavaScript/Examples/pizza2.html

16

http://www.cs.csubak.edu/~jmoloney/cmps211/JavaScript//Examples/nestingOTF.html


17

http://www.cs.csubak.edu/~jmoloney/cmps211/JavaScript/nestingOTF.html

18

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

19

http://www.cs.csubak.edu/~jmoloney/cmps211/JavaScript/Examples/courses.html


20

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