Unobtrusive JS

Unobtrusive JS Tutorial

PART I

Thanks to StumleUpon for all the traffic. I’m glad people like the quick reference I’ve put up here. Check out the rest of my awful blog if you get bored. This Tutorial hasn’t been touched in a long time, mostly because I discovered JQuery.

First, I’ve tried to collect every Method and Property that you might need to address the DOM. If you Google around a bit, you’ll quickly discover that it is VERY difficult to just find a listing like this. I’m not implying that I’m THE MAN for getting this together, but I am implying that finding this list is a hassle unless you come to my website.

WAYS TO GET ELEMENTS/NODES

getElementsByTagName("tagName")
getElementById("idName")

METHODS

createElement("elementToCreate")
createTextNode("textForTextNode")
appendChild("whatToAppend")
insertBefore(child1,child2)
replaceChild(child1,child2)
removeChild(referenceToChild)
getAttribute("attributeNameToGet")
setAttribute("attributeToSet","valueToSetTo")
removeAttribute("attributeName")
splitText(index)

PROPERTIES OF NODES

attributes
ownerDocument
parentNode
previousSibling
nextSibling
firstChild
lastChild
childNodes
nodeValue
nodeName
nodeType
offsetParent

Sweet, right? Now you have an awesome reference for pretty much every way to reference nodes in the DOM, find properties of those nodes, and set attributes for them. I wanted to get this out of the way before I gave you some how-to examples — who knows, maybe you just needed one of the items above and not a whole how-to!

Now, I guess we should figure out what unobtrusive javascript is exactly. In theory, your modern webpage should be pure XHTML with no functionality or layout/formatting included at all. For instance, you would never put event handlers inside your code. No ugly calls to Javascript functions hidden inside of onclicks. How is this possible!! HOW!!

Lemme persplain it to you.

A properly coded and structured XHTML page is composed of a series of nodes that make up the Document Object Model. This is a “tree” of items on the page. The W3C might say this:

The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page.

Let’s look at a REAL easy example.


<html>
<body>
<p>This is my paragraph
</p>
</body>
</html>

The above is a completely plain webpage (without the DTD and some other items that should be on a page — this is just an example).

If this were an XML document (it is really), then the DOM of this page in tree form might look like this:

html
|-head
|-body
|--p
|--text

The HTML tag is the parent or root element of the whole thing. It contains other tags (nodes) which are it’s children. Some of those children contain nodes of their own.

Head and Body are the children of html. The p tag is a chold of the Body tag. The text itself is a child of the p tag. Does that make any sense? Hope so. You might also note that head and body are siblings — they are on the same “level” of the tree.

Now that we’ve made that about as clear as mud, let’s give you some code to look at. Let’s say I wanted to get ahold of all the p tag elements (nodes) in this document using Javascript. I might do something like this:


var thePtags = document.getElementsByTagName('p');

In this example, I have gotten all of the p tag objects on the page and stuffed them into an array called thePtags. It’s more like a collection of objects than an array, but that’s really splitting hairs.

So, if you wanted the very first p tage in the document (in our document, there is only one p tag!!!) you would reference it like this: thePtags[0]

That’s the first item in the array (collection) of p tags.

WOW! Great! Now we have the first p tag. Whooop deeee doooo da dee. What the hell good is that? What can I do with this valuable information???

Well, you can do tons of stuff. Now that you have the P tag you are after you can use some of the methods or examine some of the properties of the tag object.

Part II Coming Soon

If you can’t wait and need more info with all due haste, then go buy this book:

DHTML Utopia Modern Web Design Using JavaScript & DOM

It’s just about the best MODERN Javascript book I’ve run across. Yeah, Yeah….”You’re a spammer…you are selling things on your site…blahBlah” YES, I am linking to this book, on Amazon, using my associate code. Indeed. It is NOT spam. You might actually want this book. If you don’t want it, don’t click the damn link.

Latest Entries

Tag Cloud



www.flickr.com
smithellis' items Go to smithellis' photostream