document object model. back to the dom… javascript and the dom originally, the document object...

Document Object ModelDocument Object Model

Back to the DOM…Back to the DOM…

Javascript and the DOMJavascript and the DOM

Originally, the Document Object Model (DOM) and Javascript were tightly bound

Each major browser line (IE and Netscape) had their own overlapping DOM implementation

There's also some jargon issues, eg. DHTML… Now, the DOM is a separate standard, and can be manipulated by other languages (eg Java, server side javascript, python, etc)

Browsers still differ in what parts of the standard they support, but things are much better now

Originally, the Document Object Model (DOM) and Javascript were tightly bound

Each major browser line (IE and Netscape) had their own overlapping DOM implementation

There's also some jargon issues, eg. DHTML… Now, the DOM is a separate standard, and can be manipulated by other languages (eg Java, server side javascript, python, etc)

Browsers still differ in what parts of the standard they support, but things are much better now

Review: DOM StructureReview: DOM Structure

Objects are in a hierarchy

The window is the parent for a given web page

Document is the child with the objects that are most commonly manipulated

Objects are in a hierarchy

The window is the parent for a given web page

Document is the child with the objects that are most commonly manipulated

window * location * frames * history * navigator * event * screen * document o links o anchors o images o filters o forms o applets o embeds o plug-ins o frames o scripts o all o selection o stylesheets o body

table from: http://www.webmonkey.com/webmonkey/97/32/index1a.html?tw=authoring

DOM TreeDOM Tree

The usual parent/child relationship between node Like any other tree, you can walk this

The usual parent/child relationship between node Like any other tree, you can walk this

diagram from http://www.w3schools.com/htmldom/default.asp

Referencing ObjectsReferencing Objects

Objects can be referenced by their id or name (this is the easiest way, but you need to make sure a name is unique in the hierarchy)

by their numerical position in the hierarchy, by walking the array that contains them

by their relation to parent, child, or sibling (parentNode, previousSibling, nextSibling, firstChild, lastChild or the childNodes array

Objects can be referenced by their id or name (this is the easiest way, but you need to make sure a name is unique in the hierarchy)

by their numerical position in the hierarchy, by walking the array that contains them

by their relation to parent, child, or sibling (parentNode, previousSibling, nextSibling, firstChild, lastChild or the childNodes array

A div exampleA div example

the div is an element with an id of mydiv

It contains a text element, which can be referenced by childNodes[0] (childNode being an array of all childen of a node

So the text in the div is not a value of the div, but rather the value of the first (and only) childNode of the div

the div is an element with an id of mydiv

It contains a text element, which can be referenced by childNodes[0] (childNode being an array of all childen of a node

So the text in the div is not a value of the div, but rather the value of the first (and only) childNode of the div

<div id="mydiv"><div id="mydiv">This is some simple html to displayThis is some simple html to display</div></div>

Zen Garden Example 1Zen Garden Example 1

A loop of code to list the links…. A loop of code to list the links….

for (var i = 0; i < document.links.length; i++)for (var i = 0; i < document.links.length; i++) {{ document.write("<b>Link number " + i + " has these properties:</b><br/>");document.write("<b>Link number " + i + " has these properties:</b><br/>"); document.write("<i>nodeName is</i> " + document.links[i].nodeName + "<br/>");document.write("<i>nodeName is</i> " + document.links[i].nodeName + "<br/>"); document.write("<i>nodeType is</i> " + document.links[i].nodeType + "<br/>");document.write("<i>nodeType is</i> " + document.links[i].nodeType + "<br/>"); document.write("<i>parentNode.nodeValue is</i> " document.write("<i>parentNode.nodeValue is</i> " + document.links[i].parentNode.nodeValue + "<br/>"); + document.links[i].parentNode.nodeValue + "<br/>"); document.write("<i>firstChild is</i> " + document.links[i].firstChild + "<br/>");document.write("<i>firstChild is</i> " + document.links[i].firstChild + "<br/>"); document.write("<i>firstChild.nodeValue is</i> " document.write("<i>firstChild.nodeValue is</i> " + document.links[i].firstChild.nodeValue + "<br/>"); + document.links[i].firstChild.nodeValue + "<br/>"); document.write("<i>href is</i> " + document.links[i].href + "<br/>"); document.write("<i>href is</i> " + document.links[i].href + "<br/>"); }}


Same as example one, but with another loop to look for all span tags….

Same as example one, but with another loop to look for all span tags….


I added a little javascript to the sample file from zen garden

This will search for a given tag using the getElementsByTagName() method

The result of this method is an array, and we can walk that array and then write out different properties and values for the elements found by getElementsByTagName()

There's also a getElementsById() method

I added a little javascript to the sample file from zen garden

This will search for a given tag using the getElementsByTagName() method

The result of this method is an array, and we can walk that array and then write out different properties and values for the elements found by getElementsByTagName()

There's also a getElementsById() method


var look_for="span";var look_for="span";document.write("<p>Looking for " + look_for + " tags</p>");document.write("<p>Looking for " + look_for + " tags</p>");var x=document.getElementsByTagName(look_for);var x=document.getElementsByTagName(look_for);for (var i = 0; i < x.length; i++)for (var i = 0; i < x.length; i++) { { document.write("<b>Tag " + look_for + " number " + i + " has these properties:</b><br/>");document.write("<b>Tag " + look_for + " number " + i + " has these properties:</b><br/>"); document.write("<i>nodeName is</i> " + x[i].nodeName + "<br/>");document.write("<i>nodeName is</i> " + x[i].nodeName + "<br/>"); document.write("<i>nodeValue is</i> " + x[i].nodeValue + "<br/>");document.write("<i>nodeValue is</i> " + x[i].nodeValue + "<br/>"); document.write("<i>nodeType is</i> " + x[i].nodeType + "<br/>");document.write("<i>nodeType is</i> " + x[i].nodeType + "<br/>"); document.write("<i>id is</i> " + x[i].id + "<br/>");document.write("<i>id is</i> " + x[i].id + "<br/>"); document.write("<i>name is</i> " + x[i].name + "<br/>");document.write("<i>name is</i> " + x[i].name + "<br/>"); document.write("<i>parentNode is</i> " + x[i].parentNode + "<br/>");document.write("<i>parentNode is</i> " + x[i].parentNode + "<br/>"); document.write("<i>parentNode.nodeValue is</i> " + x[i].parentNode.nodeValue + "<br/>");document.write("<i>parentNode.nodeValue is</i> " + x[i].parentNode.nodeValue + "<br/>"); document.write("<i>firstChild is</i> " + x[i].firstChild + "<br/>");document.write("<i>firstChild is</i> " + x[i].firstChild + "<br/>"); document.write("<i>firstChild.nodeValue is</i> " + x[i].firstChild.nodeValue + "<br/>");document.write("<i>firstChild.nodeValue is</i> " + x[i].firstChild.nodeValue + "<br/>"); }}

Learning The DOMLearning The DOM

The only way is to read and try things out

Build a test document, with things you've learned

Gecko_test.html is an example adapted from the mozilla site….

The only way is to read and try things out

Build a test document, with things you've learned

Gecko_test.html is an example adapted from the mozilla site….

Gecko Test version 1Gecko Test version 1

Notice the use of eval Notice the use of eval

function setBodyAttr(attr,value)function setBodyAttr(attr,value) {{ // eval causes a string to be executed// eval causes a string to be executed eval('document.body.' + attr + '="' + value + '"');eval('document.body.' + attr + '="' + value + '"'); document.main_form.object_manipulated.value='document.body.' document.main_form.object_manipulated.value='document.body.' + attr + '="' + value + '"';+ attr + '="' + value + '"'; }}

gecko_test01.htmlgecko_test01.html


And a select And a select

<select onChange="setBodyAttr('text',<select onChange="setBodyAttr('text', this.options[this.selectedIndex].value);"> this.options[this.selectedIndex].value);">

<option value="blue">blue<option value="blue">blue<option value="green">green<option value="green">green<option value="black">black <option value="black">black <option value="darkblue">darkblue<option value="darkblue">darkblue<option value="white">white <option value="white">white … … </select></select>



What's wrong with this? (hint: I'm violating a basic rule of coding…)

What's wrong with this? (hint: I'm violating a basic rule of coding…)



Setting a variable for the options in select (why backslashes at the EOLs?):

Setting a variable for the options in select (why backslashes at the EOLs?):

var select_string='<option value="blue">blue</option>\var select_string='<option value="blue">blue</option>\<option value="green">green</option>\<option value="green">green</option>\<option value="black">black</option>\<option value="black">black</option>\<option value="darkblue">darkblue</option>\<option value="darkblue">darkblue</option>\<option value="white">white</option>\<option value="white">white</option>\<option value="0xFF5555">0xFF5555</option>';<option value="0xFF5555">0xFF5555</option>';



And now, I can call that list with a write How could I further refine this?

And now, I can call that list with a write How could I further refine this?

<select onchange=<select onchange="setBodyAttr('bgColor', this.options[this.selectedIndex].value);">"setBodyAttr('bgColor', this.options[this.selectedIndex].value);"><script type="application/x-javascript"><script type="application/x-javascript">document.write(select_string);document.write(select_string);</script></select></p></script></select></p>


Manipulating ObjectsManipulating Objects

As said, it's easiest to reference objects by id

To do this easily, use getElementById(), which returns the element with the given id

For example, if you want to find a div with the id of "my_cool_div", usegetElementById("my_cool_div")

Keep in mind that it's the element itself that's returned, not any particular property

As said, it's easiest to reference objects by id

To do this easily, use getElementById(), which returns the element with the given id

For example, if you want to find a div with the id of "my_cool_div", usegetElementById("my_cool_div")

Keep in mind that it's the element itself that's returned, not any particular property

Using divsUsing divs

Div properties can be dynamically manipulated

You can use this to make menus more dynamic

Div properties can be dynamically manipulated

You can use this to make menus more dynamic

colors: The first version

colors: The first version

The basic div: The basic div:

colors01.htmlcolors01.html

<div id="item1" class="content" <div id="item1" class="content" onMouseOver="changeColor('item1', '#fdd');"onMouseOver="changeColor('item1', '#fdd');" onMouseOut="changeColor('item1', '#cff');">onMouseOut="changeColor('item1', '#cff');"><a href="http://www.unc.edu/">UNC</a><br><a href="http://www.unc.edu/">UNC</a><br></div></div><br><br>

colors: The First Version

colors: The First Version

And a function (notice the alert):

And a function (notice the alert):

<script><script>function changeColor(item, color)function changeColor(item, color) {{ document.getElementById(item).style.backgroundColordocument.getElementById(item).style.backgroundColor =color;=color; //alert(document.getElementById(item).childNodes[1]);//alert(document.getElementById(item).childNodes[1]); document.getElementById(item).childNodes[1].style.backgroundColordocument.getElementById(item).childNodes[1].style.backgroundColor =color;=color; }}</script></script>


In ActionIn Action

colors01.html What's wrong with this? What would be better?

colors01.html What's wrong with this? What would be better?

Version 2Version 2

The div structure, sans link: The div structure, sans link:


<div id="item1" class="content" <div id="item1" class="content" onMouseOver="changeColor('item1', change_color);"onMouseOver="changeColor('item1', change_color);" onMouseOut="changeColor('item1', start_color);"onMouseOut="changeColor('item1', start_color);" onClick="document.location='http://www.unc.edu';"onClick="document.location='http://www.unc.edu';" >> UNCUNC</div></div>

Version 2Version 2

And the function, with some vars

And the function, with some vars


<script><script>function changeColor(item, color)function changeColor(item, color) {{ document.getElementById(item).style.backgroundColor=color;document.getElementById(item).style.backgroundColor=color; }}

var start_color="#cff";var start_color="#cff";var change_color="#fdd";var change_color="#fdd";

</script></script>

Version2Version2

Much cleaner div clickable means no issues with color of link, but sacrifices visited link color(how could that be fixed?)

Use of variables for colors mean it's much easier to change them(but this could be made much easier with php in the background…)

Much cleaner div clickable means no issues with color of link, but sacrifices visited link color(how could that be fixed?)

Use of variables for colors mean it's much easier to change them(but this could be made much easier with php in the background…)

innerHTMLinnerHTML

innerHTML is a property of any document element that contains all of the html source and text within that element

This is not a standard property, but widely supported--it's the old school way to manipulate web pages

Much easier than building actual dom subtrees, so it's a good place to start

Very important--innerHTML treats everything as a string, not as DOM objects (that's one reason it's not part of the DOM standard)

innerHTML is a property of any document element that contains all of the html source and text within that element

This is not a standard property, but widely supported--it's the old school way to manipulate web pages

Much easier than building actual dom subtrees, so it's a good place to start

Very important--innerHTML treats everything as a string, not as DOM objects (that's one reason it's not part of the DOM standard)

Using These….Using These….

You can reference any named element with getElementById()

You can read from or write to that element with innerHTML

For example:getElementById("mydiv").innerHTML ="new text string";

You can reference any named element with getElementById()

You can read from or write to that element with innerHTML

For example:getElementById("mydiv").innerHTML ="new text string";

A Simple DOM exampleA Simple DOM example<div id="mydiv"><div id="mydiv"><p><p>This some <i>simple</i> html to displayThis some <i>simple</i> html to display</p></p></div></div><form id="myform"><form id="myform">

<input type="button" value="Alert innerHTML of mydiv"<input type="button" value="Alert innerHTML of mydiv" onclick="onclick=" alert(getElementById('mydiv').innerHTML)alert(getElementById('mydiv').innerHTML) " />" /></form></form>

simple_dom_example.htmlsimple_dom_example.html

Manipulating Visibility


You can manipulate the visibility of objects, this fromhttp://en.wikipedia.org/wiki/DHTML

The first part displays an element if it's hidden…

You can manipulate the visibility of objects, this fromhttp://en.wikipedia.org/wiki/DHTML

The first part displays an element if it's hidden…

31_dhtml_example.html

function changeDisplayState (id) function changeDisplayState (id) {{ trigger=document.getElementById("showhide");trigger=document.getElementById("showhide"); target_element=document.getElementById(id);target_element=document.getElementById(id); if (target_element.style.display == 'none' if (target_element.style.display == 'none' || target_element.style.display == "") || target_element.style.display == "") {{ target_element.style.display = 'block';target_element.style.display = 'block'; trigger.innerHTML = 'Hide example';trigger.innerHTML = 'Hide example'; } } ……

http://en.wikipedia.org/wiki/DHTML








And the second hides the same element if it's visible

And the second hides the same element if it's visible

31_dhtml_example.html

…… else else {{ target_element.style.display = 'none';target_element.style.display = 'none'; trigger.innerHTML = 'Show example';trigger.innerHTML = 'Show example'; }} }}

Controlling the back endControlling the back end

And you can enable or disable functionality, for example, you can disable links dynamically…

And you can enable or disable functionality, for example, you can disable links dynamically…

source from Mike Harrison via chugalug.org 35_disable_links.html

function killAll() function killAll() {{ var stuff = document.getElementsByTagName("A");var stuff = document.getElementsByTagName("A"); for (var i=0; i<stuff.length; i++)for (var i=0; i<stuff.length; i++)

{{ stuff[i].onclick=function() stuff[i].onclick=function()

{{ return false ;return false ; }}

}} } }

Controlling the back endControlling the back end

…and reenable them… …and reenable them…

source from Mike Harrison via chugalug.org 35_disable_links.html

function resurrectAll() function resurrectAll() {{ var stuff = document.getElementsByTagName("A");var stuff = document.getElementsByTagName("A"); for (var i=0; i<stuff.length; i++)for (var i=0; i<stuff.length; i++)

{{ stuff[i].onclick=function() stuff[i].onclick=function()

{{ return true ;return true ; }}

}} } }

Getting fancierGetting fancier

check out Nifty Corners Cube:http://www.html.it/articoli/niftycube/index.html

And zoom:http://valid.tjp.hu/zoom/index_en.html

check out Nifty Corners Cube:http://www.html.it/articoli/niftycube/index.html

And zoom:http://valid.tjp.hu/zoom/index_en.html

http://www.html.it/articoli/niftycube/index.html



http://valid.tjp.hu/zoom/index_en.html















What else can you do?What else can you do?

Ant Ant

Getting Started with Ajax

Getting Started with Ajax

Jesse James Garrett coined the term, Asynchronous Javascript And XML

It's not a language or program, but rather an approach

Jesse James Garrett coined the term, Asynchronous Javascript And XML

It's not a language or program, but rather an approach

Garrett's take on what Ajax is

Garrett's take on what Ajax is

Standards-based presentation using XHTML and CSS

Dynamic display and interaction using the Document Object Model

Data interchange and manipulation using XML and XSLT

Asynchronous data retrieval using XMLHttpRequest

And JavaScript binding everything together

Standards-based presentation using XHTML and CSS

Dynamic display and interaction using the Document Object Model

Data interchange and manipulation using XML and XSLT

Asynchronous data retrieval using XMLHttpRequest

And JavaScript binding everything together

What Ajax is notWhat Ajax is not

An acronym A monolith or unified technology (it is rather an approach based on a number of disparate technologies)

A standard (and it's not likely to become one, although it will influence standards, since it's really just an approach)

A product (although you can buy a lot of it these days--but most of that are really frameworks)

An acronym A monolith or unified technology (it is rather an approach based on a number of disparate technologies)

A standard (and it's not likely to become one, although it will influence standards, since it's really just an approach)

A product (although you can buy a lot of it these days--but most of that are really frameworks)

Ok, but what IS Ajax?Ok, but what IS Ajax?

When you load a web page and then Use the XMLHttpRequest object to get some more data, and then

Use Javascript to change some of the data on your web page (but not all of it, and not by reloading the page), then

What you're doing is Ajax

When you load a web page and then Use the XMLHttpRequest object to get some more data, and then

Use Javascript to change some of the data on your web page (but not all of it, and not by reloading the page), then

What you're doing is Ajax

Ajax ModelAjax Model

Ajax inserts a chunk of code in the browser that handles server queries for small chunks of data used to update a document

Ajax inserts a chunk of code in the browser that handles server queries for small chunks of data used to update a document

diagram from http://www.adaptivepath.com/ideas/essays/archives/000385.phpdiagram from http://www.adaptivepath.com/ideas/essays/archives/000385.php

But remember…But remember…

Javascript has no concept of I/O, nor can it access sockets

But Netscape/Mozilla and MS both worked out an object in the browser that can submit data requests via the web

In MS, this is done via ActiveX, via the Microsoft.XMLHTTP object

In Gecko, it's the XMLHttpRequest() object, and that's what we'll play with

Javascript has no concept of I/O, nor can it access sockets

But Netscape/Mozilla and MS both worked out an object in the browser that can submit data requests via the web

In MS, this is done via ActiveX, via the Microsoft.XMLHTTP object

In Gecko, it's the XMLHttpRequest() object, and that's what we'll play with

Objects and EventsObjects and Events

Remember, Javascript and the DOM are OOP, so objects have properties, with values, and can receive messages, based on events, and send messages via methods

In most of the examples so far, the user is the one that causes an event to occur--eg. the nav buttons in the slideshow call functions based on an event initiated by a carbon unit

Other events don't require human interaction--these type of events are called "listeners"…

You can create your own listeners if you need to

Remember, Javascript and the DOM are OOP, so objects have properties, with values, and can receive messages, based on events, and send messages via methods

In most of the examples so far, the user is the one that causes an event to occur--eg. the nav buttons in the slideshow call functions based on an event initiated by a carbon unit

Other events don't require human interaction--these type of events are called "listeners"…

You can create your own listeners if you need to

XMLHttpRequest Object XMLHttpRequest Object

An object that can load web resources from within javascript

So you create an instance of this object

Call the open method from that object with a url and a method to use (GET or POST)

It makes the HTTP request, and as it does so, one of it's properties cycles through the states of the HTTP request

You watch that, and when the request is complete, you can get the data that was retrieved

An object that can load web resources from within javascript

So you create an instance of this object

Call the open method from that object with a url and a method to use (GET or POST)

It makes the HTTP request, and as it does so, one of it's properties cycles through the states of the HTTP request

You watch that, and when the request is complete, you can get the data that was retrieved

XMLHttpRequest MethodsXMLHttpRequest Methods

abort() getAllResponseHeaders() getResponseHeader(header) open(method, url): method is POST, GET, or PUT)

send(body): body is the content of a post….

setRequestHeader(header, value)

abort() getAllResponseHeaders() getResponseHeader(header) open(method, url): method is POST, GET, or PUT)

send(body): body is the content of a post….

setRequestHeader(header, value)

XMLHttpRequest Properties

XMLHttpRequest Properties

onreadystatechange: sets a method to be called on any state change, eg. a listener

readState: 0 Uninitated 1 Loading 2 Loaded 3 Interactive 4 Complete

responseText: server response as a string responseXML: server response as xml status: as an HTTP code, eg 404 statusText: the accompanying text

onreadystatechange: sets a method to be called on any state change, eg. a listener

readState: 0 Uninitated 1 Loading 2 Loaded 3 Interactive 4 Complete

responseText: server response as a string responseXML: server response as xml status: as an HTTP code, eg 404 statusText: the accompanying text

An Example…An Example…

Security ConcernsSecurity Concerns

At first, this kind of call wasn't restricted

But that meant that if one could inject javascript into a web page, eg. via a comment form, one could pull live data into a users brower, and thus escape the sandbox

So now, this method is generally restricted to the same named server…

At first, this kind of call wasn't restricted

But that meant that if one could inject javascript into a web page, eg. via a comment form, one could pull live data into a users brower, and thus escape the sandbox

So now, this method is generally restricted to the same named server…

Some ExamplesSome Examples

00_ajax_demo.html: in this one, I'm just pulling some data from the server, and stuffing the results into an alert

00_ajax_demo.html: in this one, I'm just pulling some data from the server, and stuffing the results into an alert

Jah and Ajah and Ahah: HA!

Jah and Ajah and Ahah: HA!

After Garret's coining of the term ajax, several people independently presented similar systems--this is to be expected, since XMLHttpRequest has been around a while

Most of these used the same basic approach to pull html or other data types than xml, or didn't use the dom specification

After Garret's coining of the term ajax, several people independently presented similar systems--this is to be expected, since XMLHttpRequest has been around a while

Most of these used the same basic approach to pull html or other data types than xml, or didn't use the dom specification

JahJah Jah is the work of Kevin Marks Jah relies on two simple functions, one to open the request, and the other to change the data

Instead of manipulating the dom directly, jah uses the innerHTML property to manipulate the page

See:http://homepage.mac.com/kevinmarks/staticjah.html

for an example (or the copy I've got in the lessons folder)

Jah is the work of Kevin Marks Jah relies on two simple functions, one to open the request, and the other to change the data

Instead of manipulating the dom directly, jah uses the innerHTML property to manipulate the page

See:http://homepage.mac.com/kevinmarks/staticjah.html

for an example (or the copy I've got in the lessons folder)

http://www.developer-x.com/content/innerhtml/




Jah FunctionJah Functionfunction jah(url,target) {function jah(url,target) { // native XMLHttpRequest object// native XMLHttpRequest object document.getElementById(target).innerHTML = 'sending...';document.getElementById(target).innerHTML = 'sending...'; if (window.XMLHttpRequest) {if (window.XMLHttpRequest) { req = new XMLHttpRequest();req = new XMLHttpRequest(); req.onreadystatechange = function() {jahDone(target);};req.onreadystatechange = function() {jahDone(target);}; req.open("GET", url, true);req.open("GET", url, true); req.send(null);req.send(null); // IE/Windows ActiveX version// IE/Windows ActiveX version } else if (window.ActiveXObject) {} else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP");req = new ActiveXObject("Microsoft.XMLHTTP"); if (req) {if (req) { req.onreadystatechange = function() {jahDone(target);};req.onreadystatechange = function() {jahDone(target);}; req.open("GET", url, true);req.open("GET", url, true); req.send();req.send(); }} }}} }

Jahdone FunctionJahdone Function

function jahDone(target) {function jahDone(target) { // only if req is "loaded"// only if req is "loaded" if (req.readyState == 4) {if (req.readyState == 4) { // only if "OK"// only if "OK" if (req.status == 200) {if (req.status == 200) { results = req.responseText;results = req.responseText; document.getElementById(target).innerHTML = results;document.getElementById(target).innerHTML = results; } else {} else { document.getElementById(target).innerHTML="jah error:\n" +document.getElementById(target).innerHTML="jah error:\n" + req.statusText;req.statusText; }} }}}}

Jah in ActionJah in Action

So how can we use this?

So how can we use this?

Make live insertions into a page via the DOM

We'll do more of this next week

Make live insertions into a page via the DOM

We'll do more of this next week

document object model. back to the dom… javascript and the dom originally, the document object...

Documents