Week 5 Lecture 1

1
Week 5 - Lecture 1
COMP233B-09(HAM) Internet Applications

• CSS Ordering
• DHTML / DOM
• Documents, Elements, Nodes
• Element Text Nodes
• Event Handling

2
CSS and JavaScript Ordering

• When including CSS and JavaScript files be
  careful of the order of your link or script
  elements
• CSS
• Later rules overwrite earlier ones
• JavaScript
• Variables and functions may not be defined

3
Firebug CSS pane is live and editable

• Interactively change CSS properties
• Up/down cursor keys for numeric or restricted
  values

4
Document Object Model (DOM)

• document.getElementById() is just one of the many
  DOM functions
• http//www.w3schools.com/dom/default.asp
• All relate to the Document Tree or DOM
• Elements, attributes, children, parents
• DOM is common to many languages
• Used to manipulate XML
• e.g. SVG Scalable Vector Graphics
• http//www.functionx.com/vcsharp/xml/Lesson06.htm

5
Simplified Graphical DOM Tree Fragment
div
ltdivgt lth1gtlt/h1gt ltpgtltspangtlt/spangtlt/pgt ltpgtlt/pgt
ltpgtlt/pgt lt/divgt
p
p
p
h1
span
6
Firebug DOM view

• Best way to understand the DOM tree
• Lists the properties you can use
• id, tagName, class, nodeType etc
• Also works in Inspect mode

7
Simple DOM Example

• Sample file dom.html
• Just changing one specific part of the document
• Reads data from the HTML document
• Uses document.getElementsByTagName('p')
• to calculate the number of paragraphs
• Writes it back into the HTML document
• Create a Text Node
• Append the Text Node as a child node to part of
  the existing DOM structure
• Located by an id attribute in a span element
• Browser notices the appendChild to the current
  DOM and updates the display (if necessary)

8
Sample file dom2-error.html

• 1st click of doesnt remove a
  paragraph
• Its easy to miss this as you can think that you
  didnt click the button correctly and the 2nd
  time it works perfectly
• But if the add button only adds paragraphs to the
  div
• And the delete button only deletes children of
  the div
• What is the delete button deleting if not a
  paragraph element?

9
DOM Debugging Strategies

• DOM debugging strategies
• Use alerts
• Write out values and data structures to a
  debugging part of the page
• Easy to introduce new errors
• Use a DOM viewer (such as the one in Firebug)
• However, firstly
• Check error console (if using Firefox)
• Validate your HTML
• Validate your CSS

10
dom2-error.html div1 (in Firebug DOM viewer)
HTML Source
Stray text Node causes 1st call of
delFunction() To delete this child of div1
11
After 2 clicks of
div1.removeChild(div1.firstChild)
firstChild \n childNodes.length 3
12
Realistic DOM Trees Text Nodes

• DOM tree structure
• Element structure
• and
• Text nodes
• As well as Nodes representing HTML elements
• There are Text Nodes
• Representing text fragments

13
DOM Tree in dom2-error.html

• After 3 calls to addFunction()

Element node
div1

Text node
\n
p
p
p



div1.removeChild( div1.firstChild)
14
The Firebug HTML view is live!
15
DOM API

• http//www.w3.org/TR/DOM-Level-2-Core/ecma-script-
  binding.html

16
Node Types

• node.nodeType (node Constants)
• Returns an integer which tells you about the type
  of element
• 1 element
• 3 text node
• 8 comment
• 9 document
• function isTextNode(node)
• return node.nodeType 3
• Sample file dom4.html

17
IE 7 v Firefox 2 (using dom4.html)
(nodeType) nodeName
18
Document Object Model (DOM)

• Common functions
• document.getElementByid(), document.getElementsByT
  agName()
• document.createTextNode()
• node.nodeType
• node.appendChild(child), node.hasChildNodes()
• node.childNodes, nodeList.length,
  nodeList.item(i)
• node.removeChild(child), node,replaceChild(old,
  new)
• node.firstChild, node.lastChild, node.parentNode
• element.setAttribute(name, value),
  element.getAttribute(name)
• element.eventtype eventHandlerFunction

19
DOM JS CSS HTML API

• The combination of these 3 technologies means
  that we have access to all the content and
  presentational aspects of a HTML document
• and a programming language in which to do input
  and output
• This amounts to an API for HTML documents
• Application Programming Interface
• Not as rich as .NET or Java
• And more dependant on variable browser support
• But you can do a lot with it, e.g.
• http//www.walterzorn.com/

20
Xtreme DOM

• If we can change part of a document with the DOM
• Q Can we change the entire document?
• Or at least the entire body?
• A yes
• Usually more complex and less reliable than
  writing simple HTML
• Sample file dom3.html

21
Simple Event handling

• dom3.html shows the programmatic way of assigning
  event handlers
• button1.setAttribute('onclick', 'addFunction()')
• Doesnt work in IE
• button1.onclick addFunction
• To delete the event handler
• button1.onclick null
• Beyond this there are differences between IE and
  most other browsers

22
Tips

• Firebug DOM - View Selection Source (actually DOM
  Source)
• Look for the ECMA Script Binding in the DOM
  specifications
• http//www.w3.org/TR/DOM-Level-2-Core/ecma-script-
  binding.html
• View Source Chart (Firefox Extension)
• http//addons.mozilla.org/en-US/firefox/addon/655
• Indentation colouring to View Source
• JavaScript Tutorials
• http//jennifermadden.com/index.html
• Test in multiple browsers!
• CSS Redundancy checker
• http//services.immike.net/css-checker/