ECT 270 Clientside web application development

1
ECT 270 Client-side web application development

• Dynamic HTML

2
Cycling Banners
08_CycleBan.htm

• Used to create advertising banners that
  periodically switch between images.
• setTimeout(fctName(), of millisecond)tells
  the script how often to run the function fctName.
  The interval is measured in millisecond

function rotate()document.adBanner.srcadImages
countersetTimeout(rotate(),31000)runs
the function rotate every 3 seconds
3
Detecting browsers
08_Navigator.html

• navigator is the object representing the
  browser currently in use. Some of the properties
  for this object are
• navigator.appName the name of the browser
• navigator.appVersion the version of the browser
• navigator.platform the platform on which the
  browser is running

4
Document Object Model (DOM)

• DOM is a platform-and-language-neutral interface
  that permits scripts to access and update the
  content, structure and style of the document.
• In theory every element of the web page can be
  dynamically updated in response to input from the
  user or other programs
• HTML elements are treated as objects, their
  attributes are treated as properties of the
  objects
• The DOM has a hierarchy of elements with the
  window as the top level object

5
(No Transcript)
6
Element collections

• In JS you translate this hierarchy into reference
  names which indicate the location of the element
  in the DOM
• Elements can be grouped into element collections
  which are arrays of all the elements of a
  particular type
• document.images.myImageID.property
• document.imagesmyImageID.property

7
Only in IE
8
(No Transcript)
9
Referencing ltDIVgt tags

• Netscape (ltdivgts belong to the layers collection)
• document.layers.divID or document.divID

I.E. (ltdivgts belong to the all collection) documen
t.all.divID or divID
Browser detection var isNSfalse // True if
user has Netscape var isIEfalse // True if
user has Internet Explorer if (document.layers)is
NStrue if (document.all)isIEtrue
10
Referencing nested objects

• ID1 is an object at the top of the hierarchy
• ID2 is an object nested inside ID2
• ID3 is nested in side ID2
• Netscape
• document.ID1.document.ID2.document.ID3
• I.E. ID3
• Cross browser scripting becomes a pain!

11
W3C DOM (a farewell to DOM)

• The W3C DOM doesnt use the dot syntax to
  describe objects
• The programmers uses the ID attribute (instead of
  NAME) to name each element in advanceltIMG
  IDmyImagegt
• Use the getElementByID(tagID) tool to access that
  element document.getElementByID(myImage)
• Netscape 6, IE 5, Opera 5 etc

12
Referencing Styles
08_DropMenu.htm

• The syntax rules for changing one of the style
  attributes of an element in
• Netscape objectID.attribute
• I.E. objectID.style.attribute
• objectID is the name of the particular element
  (image, div, form field ..), style is a JS word,
  attribute is the specific attribute you are
  referring to (visibility, display )
• The attribute cant contain -!background-color
  becomes backgroundColor

13
Controlling object visibility
08_Visibility.htm
08_DropMenu.htm
08_DropText.htm

• Netscape
• document.getElementByID(id).visibilityshow
• document.getElementByID(id).visibilityhide

Internet Explorer document.getElementByID(id).vi
sibilityvisible document.getElementByID(id).
visibilityhidden
14
Before clipping
After clipping
08_PullDownPlays.htm
15
Transition (special filters)
08_Transition.htm

• A transition is a visual effect applied to an
  object over an interval of time
• blendTrans fades an object in and out. You have
  to specify a value for the Duration of the
  transitionobjectName.filters.blendTrans.Duration
  2 orobjectName.style.filterblendTrans(Dur
  ation2)
• revealTrans in addition to the Duration it allows
  you to specify the type of the transition

16
objectName.filters.revealTrans.Duration2 //
2 seconds objectName.filters.revealTrans.Transitio
n5 //Wipe down orobjectName.style.filterre
vealTrans(Duration2, Transition5)
17
Applying a transition
08_Trans1.htm
08_Trans2.htm
08_Transition.htm

• Set the initial state of the object(visibility,
  or source for an image file)
• Apply a transition effect to the object(by using
  the apply() method)objectName.filters.transition_
  type.apply()
• Specify the final state of the object
• Play the transition (use the play() method)
  objectName.filters.transition_type.play()

18
Inter-page transition

• Involves effect applied to the page when the
  browser either enters or exits a page
• Inter-page transitions are created using the
  ltMETAgt tag in the ltHeadgt section of the page
• Works only when going back to a page

ltMETA http-equivPage-Enter CONTENTtransition_
typegtltMETA http-equivPage-Exit
CONTENTtransition_typegt
ltMETA http-equivPage-Enter
CONTENTblendTrans(Duration3)gt
19
Moving objects on the screen

• Once an object is positioned in the HTML code
  using the position attribute in CSS, you can
  change the coordinates of the object using
  JavaScript attributes
• objectID.style.left or objectID.style.top
• how far the left/top edge of the object is from
  the parent element (100px).
• The value of these attributes may be changed
  dynamically

20
function moveObjectTo(objectID,x,y)
moverObjectdocument.getElementById(objectID).styl
e moverObject.left x moverObject.top y

ltIMG idmover onClickmoveObjectTo(mover,100,1
00)gt
08_MoveTo.htm
21
Moving objects on the screen

function slide() moverObject
document.getElementById(mover).style
moverObject.pixelLeft moverObject.pixelLeft 2
if (moverObject.pixelLeft lt rightDotPos)
setTimeout(slide(), 20)
ltBODY onLoadslide()gt ltIMG IDmover
srcfullmoon.jpggt
08_SlideMoon.htm
22
Window height and width

• IE document.body.clientHeight
• document.body.clientWidth
• Are the body properties that indicates the
  dimension of the browser window. They are
  available only after the page is loaded.
• Netscape window.innerHeight
• window.innerWidth
• Properties of the screen object will capture the
  dimension of the users monitor

23
Linear animation (diagonally across)
08_MoveText.htm

• function moveText()maxHeight
  document.body.clientHeight 100 moverObject
  document.getElementById(mover).stylemoverObje
  ct.pixelLeft moverObject.pixelLeft 2
  moverObject.pixelTop moverObject.pixelTop 2
• if (moverObject.pixelLeft lt maxHeight)
  setTimeout(moveText(), 20)

ltSTYLEgtmover positionabsoluteleft5pxtop5px
lt/STYLEgt
ltDIV IDmovergt On the Road again lt/DIVgt
24
Path animation

• You are not restricted to linear paths for
  animation. You can have the object move from
  point to point along a path that has any shape
  you want
• The x coordinate of each point in the path is
  stored into an array (x)
• The y coordinate of each point is stored into
  another array (y)

25
Path animation (spiral in)
08_MoveTextSpiral.htm
//store the consecutive increments in x and y
(dx, and dy)x new Array(0,20,40,80, -100,-50,
)y new Array(0,10,20,40, -150, -80,
)index0

• function moveIt(objectID,dx,dy)moverObject
  document.getElementById(objectID).stylemoverObj
  ect.pixelLeft moverObject.pixelLeft dx
  moverObject.pixelTop moverObject.pixelTop dy

Function spiral() if (index ltx.length-1)
moveIt(mover,xindex,yindex)
index setTimeout(spiral(), 100)