DOM Scripting and Ajax

Stuart Langridge

http://www.kryogenix.org/

better user experience

interaction can be designed

JavaScript

CSS and valid HTML

clean

powerful

expressive

JavaScript is a tool

not for evil

exercise more control

make the web work better

CSS

separation of structure and presentation

The Zen Garden

different designs

unchanging base

loads of power

seamless degradation

a whole new approach

S5

just plain HTML

CSS to look like a presentation

DOM scripting to work like a presentation

the next slide

HTML + CSS + DOM scripting = PowerPoint

googlebot

loads of power

seamless degradation

a layer on top of the web

the behaviour layer

control users' interactions

interaction can be designed

free from browser limitations

no page refreshes

fade in and fade out notes

for detail, buy a book

scripting should be unobtrusive

clean HTML and CSS

JavaScript on top

Amazon recommendations

seamless degradation

loads of power

the little touches that make the good into the great

design how you want the web to work

browsers no longer limit what your designs can do

How to do DOM scripting

build scripts unobtrusively

don't mix script and HTML

<script src="whatever.js">

CSS: separate structure and presentation

JS: separate structure and behaviour

hook up JS to HTML yourself

event-driven

clicking a button

submitting a form

the page finishes loading

register with an event

good scripting is unobtrusive

what can your code do?

anything!

rewrite the HTML as you see fit

anything you can imagine in HTML, the DOM can do

DOM + Ajax = no more waiting

Amazon recommendations

make new features possible that were too clumsy before

use other people's code

generic enhancements

sortable tables

load on page load

find all tables

make the headers clickable

http://the/page/you/were/on?sortby=field1

real-time comment previews

stand on the shoulders of giants

you don't have to write GMail

(r)evolution

change the web

change the world