Network Applications

1
Network Applications

• Lecture 5
• Client-side programming for the WWW
• More on DOM 1
• For more, see the following Tutorials
• Online Tutorial 1 Online Tutorial 2 Online
  Tutorial 3

2
Review

• Document Object Model provides standard way that
  HTML page is described as a set of objects.
• DOM provides objects with attributes and methods
  that allow us to inspect and modify the contents,
  appearance and structure of a page.
• So far looked mostly at DOM level 0 a fairly
  simple way of accessing many, but not all the
  elements on an HTML page.
• Now look at DOM level 1 and DOM level 2

3
DOM 1 and 2

• DOM level 1 and 2 are W3C standards that provide
  very general ways to access and modify elements
  on a page.
• They apply both to HTML and XML.
• Modern browsers now support at least DOM 1, and
  we should be moving to using these.

4
W3C DOM Level 1

• DOM 1 consists of two main parts -
• A Core part which contains very general methods
  applicable to all elements.
• An HTML specific part containing methods and
  properties specific to particular HTML elements.
• You can do most things with the Core part, but
  there are certain operations which are at least
  more convenient with HTML specific methods.

5
W3C DOM Level 2

• DOM Level 2 (the latest version) also provides
  standards for manipulating styles and handling
  events.
• I'll show how the style attribute can be used,
  and mention events.
• Simple style/event features are supported by
  current browsers.
• Not all features in DOM 2 spec are supported!

6
DOM 1 Methods and Properties

• DOM 1 (Core) lets you access, modify and/or
  create any HTML elements and their properties.
• E.g.,
• Create a new list item.
• Change contents of an input element in a form.
• Validate contents of an input element
• Allows any attributes to be accessed and changed

7
DOM (Core) Methods

• Using DOM we can traverse and get hold of
  specific elements in the document.
• We noted that we could get hold of an element
  with an ID using getElementById
• (or by tag name with getElementsByTagName)
• We can then examine it further using properties
  such as
• firstChild
• nodeName
• nodeValue Only text "nodes" can have a value
• childNodes

8
The DOM Tree

• To use the DOM you have to think of document as a
  tree

lthtmlgt ltheadgt .. lt/headgt ltbodygt ltpgt Stuff lt/pgt
ltulgt ltligt Junk lt/ligt ltligt Hello lt/ligt
lt/ulgt lt/bodygt lt/htmlgt
9
DOM Tree

• A node in a tree will have some child nodes (e.g,
  the body node in the example has two child nodes,
  p and ul).
• Nodes containing text (e.g., paragraphs) will
  have have special child nodes called text
  nodes.
• A node will have a name (e.g., body).
• Text nodes will have a value corresponding to
  that actual text content.

10
Example
ltul id"t1"gt ltligt Item 1 lt/ligt lt/ulgt
HTML fragment
1. document.getElementById('t1').nodeName 2.
document.getElementById('t1').nodeValue 3.
document.getElementById('t1').firstChild.nodeName
4. document.getElementById('t1').firstChild.firstC
hild.nodeName 5. document.getElementById('t1').fir
stChild.firstChild.nodeValue
Example 1 returns "ul" Example 2 returns
"null as it isnt a text node. Example 3 returns
"li" Example 4 returns "text There is a text
node below the "li which holds the actual text
data as its value. Example 5 returns " Item 1 "
Try It
11
Changing and Adding..

• We can
• createElement(elementName)
• createTextNode(text)
• appendChild(newChild)
• removeChild(node)
• Example Add a new list item

var list document.getElementById('t1') var
newitem document.createElement('li') var
newtext document.createTextNode(text)
list.appendChild(newitem) newitem.appendChild(ne
wtext)
Try It
12
Attributes

• We can get hold of the values of attributes using
  node.attributes property or node.getAttribute(attn
  ame) method.

var yourimage document.getElementById('i1')
var imagesrc yourimage.getAttribute("src")
imagesrcvalue imagesrc.Nodevalue alert("The
source file is " imagesrc) . ltimg id "i1"
src"http//www.macs.hw.ac.uk/alison/alison.gif"
alt"smile" /gt
Try It
13
Revisiting Form Validation (DOM-HTML)

• Certain HTML elements have special properties
  available (partly for backward compatibility with
  DOM 0).
• Form input elements include the following
  properties value, checked, name, size..
• If our input element has an ID we can thus
  inspect using expressions like
• document.getElementByID('in1').value

14
Form example

• Functions to display input

function show() var inp1 document.getElementByI
d('in1') var val inp1.value var inp2
document.getElementById('in2') var val2
inp2.checked alert("textbox contains" val "
and checkbox is " val2)
Try It
15
Modifying the style (DOM2-Style)

• Each node has a style property. This in turn has
  properties such as backgroundColor, left
• Example Try It

Note all the different ways we can specify
background colour!
ltstyle type"text/css"gt t1 position relative
left 100px background-color red lt/stylegt ltscri
pt type"text/javascript"gt function
MoveIt(amount) var list
document.getElementById('t1')
list.style.left "200px" function
ColourIt(amount) var list
document.getElementById('t1')
list.style.backgroundColor "blue" lt/scriptgt
16
Events

• We should mention more recent event models
• Current event models separate out event handlers
  from HTML code.
• A much supported, but not W3C standard model
  allows statements like following in JavaScript
• element.onclick doSomething
• This calls function doSomething() if element is
  clicked on.
• We can add event handlers to any element.
• We get hold of an element using the DOM.

17
DOM2-Events

• The W3C standard event model provides methods to
  add event handlers to elements via the DOM

element.addEventListener('click', doSomething,
false)

• This will call "doSomething()" when you click on
  the element in question.
• By adding event handlers using JavaScript your
  HTML can be "pure" content and structural markup.

18
DOM2 Event Example
function setup() MyEl document.getElementById(
'in1') MyEl.addEventListener("click", show,
false) function show() alert("You clicked
on my heading!") ltbody onload"setup()"gt lth1
id"in1"gt My Heading lt/h1gt

• Note Browser specific - Mozilla example

Try It
19
Summary

• Modern DOM complex!
• Core DOM allows access to elements/attributes.
• HTML DOM provides HTML specific
  methods/properties.
• Style and Event additions provide properties
  which let you access and modify style and event
  properties.
• Old DOM still supported, but worth using W3C DOM
  now as all major browsers support it.