INTERNET PROGRAMMING 1

MODULE CODE: WAT1116C

P KANAKSABEE
SITE BUILDING, 2ND FLOOR
2075250 EXT.155

Week 11
pkanaksabee@umail.utm.ac.mu

LEARNING OUTCOMES
In this chapter, you will learn how to

Use the DOM to manipulate document content

Use a Developer tool
View a DOM Tree
Access DOM style sheets in Firebug
Access DOM properties in Firebug
Use the DOM methods
Perform TableStriping using JavaScript
Using a console
Use Jquery to perform TableStriping
Use a Jquery Plugin
Use Jquery to separate markup from programming logic
Work with Jquery attributes

DOCUMENT OBJECT MODEL (DOM)

A portion of the

DOM is shown at the

left.
Defines every object
and element on a web
page
Hierarchical structure
Accesses page
elements and apply
styles to page
elements

PROPERTY
A property is a characteristic or attribute of an

object.

The background color of a web page document

The date the web page file was last modified
The src file of an image object

METHOD
A method is an action
Writing text to a web page document
Submitting a form
Searching for a substring

Viewing a documents DOM Tree

Each element in the tree is addressed in order of the

hierarchy beginning with document.

The different elements in a web page are the different

properties or methods (built-in

document separated by a dot (.).

functions)

of

the

Current browsers provide developer tools that can display

a visual representation of a documents DOM tree.

The tool in Chrome is shown in slide 9, the tool in IE is

shown in slide 10 and the tool in Safari is shown in slide 11.

DEVELOPER TOOL
Features of a developer tool:
Inspect and edit HTML
Tweak CSS to perfection
Visualize CSS metrics

Debug JavaScript
Quickly find errors
Explore the DOM

10

11

Viewing A Documents DOM Tree

Lets focus a bit on the tool as it appears in the Opera

browser.
A node in the DOM tree can be expanded and collapsed

using the and arrows next to a given node.

The html node is the root of the tree since it has no

parent. Notice that if the cursor is placed on the html

node, the entire document is highlighted in the top window.

12

Viewing A Documents DOM Tree

When you select a node in the left side of the developers tools

Elements tab, the nodes details are displayed in the right side.
In the next slide, this can be seen by selecting the <p> element

just before the start of the unordered list.

In the Properties section (right pane) you can see the values for

the <p> element.

In addition to viewing a document s DOM structure, the

developer tools in each browser typically allow you to view and

modify styles, view and debug JavaScripts used in the document,
view the resources (such as images) used by the document, and
so on.

13

14

NODE METHODS
CREATE ELEMENT
SWITCHTO
CREATETEXTNODE
APPENDCHILD
INSERTBEFORE
SETATTRIBUTE

ATTR
GETATTRIBUTE
FIRSTCHILD
ETC

15

JAVASCRIPT AND DOM: BUILDING

CONTENT

16

JAVASCRIPT AND DOM: BUILDING

CONTENT USING ARRAYS
Using an array
var seasons =['Spring','Summer','Autumn','Winter'];
Use the forEach loop to access element from the

array

17

TABLE STRIPING WITH JAVASCRIPT

Use Document Object Model to access parts of the page
Basic flow:
Get the table to stripe (getElementById)
Get the table body (getElementsByTagName)
Get the rows within the table body

(getElementsByTagName)
Go through each row, and assign an "evenRow" or
"oddRow" class attribute
(for loop and setAttribute DOM method)

18

JAVASCRIPT CONSOLE
console.log() allows you output messages to a console.

19

YOUR WORK EASIER WITH JAVASCRIPT

LIBRARIES
jQuery
Prototype / Scriptaculous
Mootools
Yahoo! UI
Dojo
Sencha Ext JS

20

WHAT IS JQUERY?
jQuery is a fast, small, and feature-rich JavaScript library. It makes things

like HTML document traversal and manipulation, event handling,

animation, and Ajax much simpler with an easy-to-use API that works
across a multitude of browsers. With a combination of versatility and
extensibility, jQuery has changed the way that millions of people write
JavaScript.

21

JQUERY TABLE STRIPING

Include some Javascript libraries (jquery.js)
Write a function that selects the table rows and

applies a class.
Note that the jQuery selectors are like CSS

selectors

22

JQUERY AND $(DOCUMENT).READY();

23

USING A JQUERY PLUGIN

Tables are constructed with thead and tbody.
Simply by giving them a class="sortable,

while the jQuery Tablesorter Plugin makes them 'sortable'

and 'striped':
Javascript
jQuery (jquery.js)
jQuery Tablesorter Plugin (jquery.tablesorter.js)
CSS
Using a theme from the tablesorter plugin

24

SEPARATION FROM MARKUP

In an earlier example, we used the "onclick" attribute to specify a

javascript function to call:

<a href="#"
onclick="hidedesc()">Hide</a>
<a href="#"
onclick="showdesc()">Show</a>

25

SEPARATION FROM MARKUP

Things to note while using JQuery:
Separation: The "click" handler is bound via

JavaScript and not the onclick attribute.

Fancier: jQuery provides many "effects" and
"animations" (basic ones here are fadeOut and
fadeIn)
Default Behavior Stopped: The default behavior
for event propagation can be stopped.

26

WORKING WITH JQUERY ATTRIBUTES

You may retrieve and set attributes values or
Completely remove attributes
To access an attribute:
Use the attribute value selector ([name=how])
Iterate through each of the attribute if required.

27