Lecture 9 JavaScript: DOM and Dynamic HTML

1
Lecture 9JavaScriptDOM and Dynamic HTML

• Updated by
• Dr Suthikshn Kumar
• Suthikshn.kumar_at_pes.edu

2
Overview

• The Document Object Model (DOM)
• Element Access in JavaScript
• Events and Event Handling
• Handling events from Body Elements
• Handling events from Button Elements
• Handling events from Text Box and Password
  Elements
• Dynamic XHTML
• Element positioning and moving
• Changing Colours and Fonts
• Dynamic Content
• Reacting to a Mouse Click

3
JavaScript Execution Environment

• The Window object provides the largest enclosing
  referencing environment for scripts
• Implicitly defined Window properties
• document - a reference to the Document object
  that the window displays
• frames - an array of references to the frames of
  the document
• Every Document object has
• forms - an array of references to the forms of
  the document
• Each forms object has an elements array, which
  has references to the forms elements
• Document also has property arrays for anchors,
  links, images

4
The Document Object Model

• DOM 0 is supported by all JavaScript-enabled
  browsers (no written specification)
• DOM 1 was released in 1998
• DOM 2 is the latest approved standard
• Nearly completely supported by NS7
• IE6s support is lacking some important things
• DOM 3 is a Working Draft
• The DOM is an abstract model that defines the
  interface between HTML documents and application
  programsan API

5
DOM

• DOM is an application programming interface (
  API) between XHTML documents and application
  programs
• It is an abstract model because it must apply to
  variety of programming languages
• The actual DOM specification consists of
  collection of interfaces, includingone for each
  document tree node type.
• With the DOM, users can write code to create
  documents, move around in their structures, and
  change, add, or delete elements and their content.

6
The Document Object Model

• A language that supports the DOM must have a
  binding to the DOM constructs
• In the JavaScript binding, XHTML elements are
  represented as objects and element attributes are
  represented as properties
• e.g., ltinput type "text" name "address"gt
• would be represented as an object with two
  properties, type and name, with the values "text"
  and "address"

7
DOM Structure

• Documents in the DOM have a tree like structure

lthtml xmlns "http//www.w3.org/1999/xhtml"gt
ltheadgt lttitlegt A simple document lt/titlegt
lt/headgt ltbodygt lttablegt lttrgt
ltthgtBreakfastlt/thgt lttdgt0lt/tdgt
lttdgt1lt/tdgt lt/trgt lttrgt
ltthgtLunchlt/thgt lttdgt1lt/tdgt
lttdgt0lt/tdgt lt/trgt lt/tablegt
lt/bodygt lt/htmlgt
8
Element Access in JavaScript

• There are several ways to do it
• 1. DOM address
• Example (a document with just one form and one
  widget)
• ltform action ""gt
• ltinput type "button" name "pushMe"gt
• lt/formgt
• document.forms0.element0
• Problem document changes

9
Element Access in JavaScript

• 2. Element names
• requires the element and all of its ancestors
  (except body) to have name attributes
• Example
• ltform name "myForm" action ""gt
• ltinput type "button" name "pushMe"gt
• lt/formgt
• document.myForm.pushMe
• Problem XHTML 1.1 spec doesnt allow the name
  attribute in form elements
• Only validation problem, no difficulty for
  browsers

10
Element Access in JavaScript

• 3. getElementById Method (defined in DOM 1)
• Example
• ltform action ""gt
• ltinput type "button" id "pushMe"gt
• lt/formgt
• document.getElementById("pushMe")
• Form elements often have ids and names both set
  to the same value

11
Element Access in JavaScript

• Checkboxes and radio button have an implicit
  array, which has their name
• ltform id "toppingGroup"gt
• ltinput type "checkbox" name "toppings"
• value "olives" /gt
• ...
• ltinput type "checkbox" name "toppings"
• value "tomatoes" /gt
• lt/formgt
• ...
• var numChecked 0
• var dom document.getElementById("toppingGroup")
  
• for (index 0 index lt dom.toppings.length
  index)
• if (dom.toppingsindex.checked
• numChecked

12
Events and Event Handling

• An event is a notification that something
  specific has occurred, either with the browser or
  an action of the browser user
• An event handler is a script that is implicitly
  executed in response to the appearance of an
  event
• The process of connecting an event handler to an
  event is called registration
• Dont use document.write in an event handler,
  because the output may go on top of the display

13
Events and their Tag Attributes

• Event Tag Attribute
• blur onblur
• change onchange
• click onclick
• focus onfocus
• load onload
• mousedown onmousedown
• mousemove onmousemove
• mouseout onmouseout
• mouseover onmouseover
• mouseup onmouseup
• select onselect
• submit onsubmit
• unload onunload

14
Events, Attributes and Tags

• The same attribute can appear in several
  different tags
• e.g., The onclick attribute can be in ltagt and
  ltinputgt
• A text element gets focus in three ways
• When the user puts the mouse cursor over it and
  presses the left button
• When the user tabs to the element
• . By executing the focus method

15
(No Transcript)
16
Registration of Event Handler

• The process of connecting an event handler to an
  event is called registration.
• By assigning the event handler script to an event
  tag attribute
• ltinput type button name myButton onclick
  "alert('Mouse click!') /gt
• ltinput type button name myButton onclick
  "myHandler()" /gt

17
Handling Events from Body Elements

• Events most often created by body elements are
  load and unload
• Example
• the load event - triggered when the loading of a
  document is completed
• http//www.cs.nott.ac.uk/bnk/WPS/load.html

18
Handling Events from ButtonElements

• Plain Buttons use the onclick property
• Radio Buttons
• Example 1
• http//www.cs.nott.ac.uk/bnk/WPS/radio_click.html
  
• The handler is registered in the markup, so the
  particular button that was clicked can be sent to
  the handler as a parameter
• Exampe 2
• http//www.cs.nott.ac.uk/bnk/WPS/radio_click2.htm
  l
• The handler is registered by assigning it to a
  property of the JavaScript objects associated
  with the XHTML elements
• This registration must follow both the handler
  function and the XHTML form

19
Handling Events from Textbox and Password Elements

• Checking Form Input
• A good use of JavaScript, because it finds errors
  in form input before it is sent to the server for
  processing
• Things that must be done
• Detect the error and produce an alert message
• Put the element in focus (the focus function) -
  puts the cursor in the element
• Select the element (the select function) -
  highlights the text in the element
• To keep the form active after the event handler
  is finished, the handler must return false

20
Handling Events from Textbox and Password Elements

• Example 1 comparing passwords
• The form just has two password input boxes and
  Reset and Submit buttons
• The event handler is triggered by the Submit
  button
• http//www.cs.nott.ac.uk/bnk/WPS/pswd_chk.html
• Example 2 checking the format of a name and
  phone number
• The event handler will be triggered by the change
  event of the text boxes for the name and phone
  number
• http//www.cs.nott.ac.uk/bnk/WPS/validator.html

21
DOM 2 Event Model

• DOM2 event model does not include the features of
  the DOM 0 event model.
• DOM 2 event model is more sophisticated and
  powerful than DOM 0
• The drawback of using the DOM 2 model is that
  Microsoft has yet to provide support for it in
  its browsers.
• The DOM 2 model is a modularized interface.

22
Event Propagation

• The connection between an event and the handler
  that deals with it is very simple in DOM 0 event
  model.
• When the browser senses an event has occurred,
  the object associated with the element that
  caused the event is checked for event handlers.
• If that object has a registered handler for the
  particular event that occurredm that handler is
  executed.
• The event-handler connection for the DOM 2 event
  model is much more complicated.
• An event object is created at a node in the
  document tree.
• For that event, that node is called the target
  node.
• Event creation causes a three-phase process to
  begin.
• Capturing phase
• Second Phase similar to DOM 0
• Bubbling Phase
• StopPropagation method

23
Event Handler Registration

• Handler registration in the DOM 2 event model is
  performed by the method addEventListener
• The addEventListener method takes three
  parameters, the first of which is the name of the
  event as a string literal,.
• The second parameter is the handler function
• The third parameter is the name of the function
  that is defined elsewhere.
• Document.custName.addEventListener(change,
  chkName, false)
• We want the handler to be called at the target
  node, which is custName,
• The removeEventListener method deletes the
  registration of an event handler.

24
Dynamic XHTML

• A XHTML document whose tag attributes, tag
  contents, or element style properties can be
  changed after the document has been and is still
  being displayed by a browser
• Such changes are made with an embedded script
  (JavaScript) that accesses the elements of the
  document as objects in the associated DOM
  structure
• Changes to the documents can occur when
  explicitly requested by user interactions or at
  regular timed intervals.

25
Element Positioning

• The position of any element is dictated by the
  three style properties position, left, and top
• The three possible values of position are
  absolute, relative, and static
• ltp style "position absolute left 50px
• top 100px"gt
• If position is set to either absolute or
  relative, the element can be moved after it is
  displayed
• Just change the top and left property values with
  a script
• http//www.cs.nott.ac.uk/bnk/WPS/mover.html

26
Moving Elements

• Moving an element is simple
• Changing the top or left property values causes
  the element to move within the display.
• If its position was set to absolute, the element
  moves to the new values of top and left
• If its position was set to relative, it moves
  from its original position by the new values of
  top and left.

27
Element Visibility

• Document elements can be specified to be visible
  or hidden with the value of visibility property.
• The two possible values for visibility are,
  visible and hidden.
• The appearance or disappearance of an element can
  be controlled by the user through a button.

28
Changing Colours and Fonts

• Colour example
• http//www.cs.nott.ac.uk/bnk/WPS/dynColors.html
• The actual parameter this.value works because at
  the time of the call, this is a reference to the
  text box (the element in which the call is made
• So, this.value is the name of the new colour
• Changing fonts example
• http//www.cs.nott.ac.uk/bnk/WPS/dynLink.html
• We can change the font properties of a link by
  using the mouseover and mouseout events to
  trigger a script that makes the changes

29
this variable

• Javascript this variable is a reference the
  object that represents the element in which it is
  referenced.
• A reference to such an object is its DOM address.
• In a text element, the value of this is the DOM
  address of the text element.
• This.value is used an actual parameter to the
  handler function.
• The call is in an input element, this.value is
  the DOM address of the value of the input element.

30
Dynamic Content

• The content of an XHTML element is addressed with
  the value property of its associated JavaScript
  object
• http//www.cs.nott.ac.uk/bnk/WPS/dynValue.htm
  l
• Assistance to a user filling out a form can be
  provided by an associated text area often called
  as help box.
• The content of the help box can change depending
  on the placement of mouse cursor.

31
Reacting to a Mouse Click

• A mouse click can be used to trigger an action,
  no matter where the mouse cursor is in the
  display
• http//www.cs.nott.ac.uk/bnk/WPS/anywhere.html
  
• Uses event handlers for onmousedown and onmouseup
  to change the visibility attribute of the message

32
Slow Moving Elements

• Javascript has two window methods that are
  capable of slow movement
• SetTimeout( mover(), 20)
• SetInterval
• SetTimeout takes two parameters a string of
  javascript code to be executed and number of
  milliseconds of delay.
• SetInterval takes two parameters similar to
  SetTimeout but executes the code repeatedly.

33
Summary

• The Document Object Model (DOM)
• Element Access in JavaScript
• Events and Event Handling
• Handling events from Body Elements
• Handling events from Button Elements
• Handling events from Text Box and Password
  Elements
• Dynamic XHTML
• Element positioning and moving
• Changing Colours and Fonts
• Dynamic Content
• Reacting to a Mouse Click