Javascript, the native language of the DOM

Getting Started

• SwethaJavaScript

Using Firefox

The Mozilla project's Firefox browser is a core web development tool. It's the native development platform of an overwhelming percentage of the architects of the Document Object Model; the core standard for client-side web work. Doing your development on the platform they use maximizes your ability to understand what they are thinking.

Critical Firefox plugins:

• The Web Developer toolbar/menu provides a wealth of tools for working with (X)HTML, CSS, and, when combined with the DOM inspector, the DOM. Ideal for exploring web pages, learning to 'see' the box model, etc. Validates (X)HTML, CSS, and accessible design. Why should you validate your web markup (XHTML, CSS, ....), given that the page still displays correctly? Because that's about all you can trust it to do if it doesn't validate - display on the exact version of the browser you are currently viewing it on. It probably won't print the way you would like, people with disabilities probably can't access it, future versions of browsers probably won't be able to parse it, search engines probably can't index it, etc. Notice all those probablys? If your markup validates, some of those questions just disappear, and the others we can check explicitly. More than that, all the cool interactivity depends on your markup being correct.
• Firebug provides a rich development environment for Javascript. Leave Firebug disabled, however, except when you actually need it, due to concerns about excessive memory usage.
• Combine Firebug with Selenium, a testing harness for the Document Object Model, and you have the infrastructure for agile software development. Testing harnesses let you run test suites automatically, which radically improves both your life and your code
• The Selenium IDE offers full-featured interactive front end to Selenium, but has a bit of a learning curve. Here are a variety of strategies to bootstrap yourself:
  • Grig Gheorghiu's step-by-step intro to using the Selenium IDE.
  • desi's more orienting intro to the Selenium IDE.
  • a movie (one of several) of the Selenium IDE from its own documentation.
• Finally, you can always start with Molybdenum, a simpler interactive front end to Selenium. Molybdenum has it's own documentation, including a quickstart and some tutorials. However you get started, once you get the basics under control and move on to using Selenium for test-driven development, you'll need to read the Selenium Reference Guide to learn how to write tests by hand.
• NoScript is a terrific way to learn how Web2.0 works, not to mention a terrific way to speed up your web browsing. NoScript lets you opt-in rather than opt-out of a tremendous amount of the data collection on the web, as well as any number of other benefits.
• Unfortunately, no code coverage currently exists for Selenium. An alternative approach might be to use JsUnit a Javascript unit testing framework that can be integrated with JSCoverage, however I haven't used this approach much myself, so can't speak to how well it works.
• The W3C QA Interest Group maintains a wonderful Toolbox with all sorts of goodies, more server-side than client-side, but some of both.

-- HilaryHolz - 12 Mar 2009