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.