# JavaScript and the DOM

### Cameron Adams

#### (The Man in Blue)

# Ten Years in One Minute

- JavaScript created for Netscape 2 in 1995. We have mouseovers!
- Microsoft copied it for Internet Explorer 3
- Standardised into the ECMA-262 specification in 1997, but this was too late for the 4.0 browsers
- Since the 5.0 browsers, JavaScript has been fairly cross-browser compatible. It's probably easier to get your JavaScript going than your CSS
- 2005 - the year of AJAX. JavaScript is hip again!

# Where Does JavaScript Fit In?

- Traditionally, JavaScript is (a little inaccurately) labelled the behaviour to HTML's structure and CSS' style
- JavaScript is a standalone programming language that can be entirely abstracted from HTML
- The DOM allows JavaScript (and other languages) to access XML structures. Luckily, HTML is a lot like XML, so the DOM works pretty well for webpages
- Event handling allows JavaScript to react to user input

# What Does the DOM Look Like?

- The best way of exploring the DOM is using Mozilla's DOM Inspector
- The DOM is a series of nodes connected in a tree-like fashion:
  - Element nodes
  - Attribute nodes
  - Text nodes
- Access to the DOM is controlled by standardised methods and properties:
  - getElementById(), getElementsByTagName()
  - childNodes[], nextSibling, parentNode

# Here's What the DOM Looks Like

# So what's it good for?

- Coolness
- Speed
- Usability
- Innovation

# Coolness

- JavaScript will probably never be able to compete with Flash for visual "WOW!"-ness
- JavaScript now focuses more on helping users than impressing them
- But it can still pull a few tricks of its own ...

# Speed

- In its ability to create and modify HTML documents, JavaScript is similar to server-side processing, but because of network transfer it's 10^n faster
- Using form processing as an example, it's way faster to check validity on a user's computer than it is to transfer the data to a server, check it, then return it to the user
- Less waiting = happier users

# Usability

- Interface design is about making it as easy as possible for a user to complete a task
- Speed is one aspect of this - users should feel like they are in control of a system
- Other usability improvements require that the system react to a user's actions – key presses, mouse movements – something which static HTML cannot do

# Innovation

- New applications, new ways of working require interaction that HTML forms can't meet
- Some data cannot be easily modelled by text input
- Metaphors – such as drag and drop – are powerful interface functions that cannot be implemented without the ability to react to a broader range of user input

# Enhancement vs. Applications

- One of the main advantages of JavaScript is that it builds upon HTML, which has the inherent advantages of accessibility and openness
- Progressive enhancement is the process whereby JavaScript enhances a basic HTML document in such a way that users who do not have JavaScript will still be able to use the webpage
- However, recent high-profile applications, such as Google Maps have broken this rule by including functionality that is only available by using JavaScript
- It's debatable whether applications that forego the benefits of a static HTML framework are any better off using JavaScript than its long-time opponent – Flash – which has a much more mature development environment

# What About This AJAX Malarkey?

- AJAX (remote scripting) is a teensy, weensy part of JavaScript and the DOM
- It has gained a lot of press recently because it allows for page updates without browser refreshes – an integral part of the sexy apps coming out of Google, 37signals and others
- There is no doubt that it will drastically change the way that JavaScript is used on the Web, but the details of its implementation are largely irrelevant. There are already quite a few development frameworks that abstract the details of remote scripting – RICO, Prototype
- If you want to know more, you should have been here three hours ago

# Accessible JavaScript

- It's possible to write JavaScript that is accessible by different users of the Internet, such as keyboard users
- The biggest hurdle at this point in time is compatibility with screen readers. Specifically, letting the user know that the page has been changed
- JavaScript accessibility specialists such as James Edwards (Brothercake) are currently researching ways of working with screenreaders (either by informing users of changes or by excluding them from JavaScript functionality) but at the moment this is an area which is in limbo

# Maturing JavaScript Development

- Modularity
- Object-oriented programming
- Traditional Software Engineering

# JavaScript Outside the (Browser) Box

- Although its predominant use is for (X)HTML webpages, JavaScript can be used in a variety of technologies. In fact, Firefox/Mozilla is built using JavaScript and XUL – a framework for application development. Everytime you click a button in Firefox it's executing some JavaScript
- The host of application frameworks coming out – XAML, Dashboard, WhatWG, etc. – rely upon JavaScript, because without it you wouldn't have any interaction

# Plug Me In

... and if you'd like to learn more about how to code JavaScript interfaces for your latest Web Standards projects, stay tuned for my forthcoming book; co-authored with James Edwards and published by Sitepoint.

Available late 2005/early 2006.