I BUILDING THE ULTIMATE AJAX DEVELOPER S TOOLBOX in Font

Generator Data Matrix 2d barcode in Font I BUILDING THE ULTIMATE AJAX DEVELOPER S TOOLBOX

the tool s documentation, this can lead to bandwidth savings of 20 50 percent. Using the crunch mode, we saw the size of one JavaScript file reduced by 30 percent. The highest level of compression, named compressing in the tool s vernacular, actually compresses the JavaScript source with a real compression scheme, with autodecompression added to the file. The tool claims bandwidth savings of 40 90 percent when using this mode and claims that the compressed output has been successfully tested on modern versions of Internet Explorer, Netscape, Mozilla, and Opera. We used the compress mode on the same JavaScript file used in the crunch test, and this time we saw the size of the file reduced by more than 65 percent (see Figure 5-13).

Figure 5-13. MemTronic s HTML/JavaScript Cruncher-Compressor significantly reduces the size of JavaScript source while also making it difficult to read.

At the time of this writing, the MemTronic tool s documentation claims that the JavaScript obfuscator is not yet complete. However, look at the output window in Figure 5-13. This is the result of a compress operation on a JavaScript file. The output is hardly readable and in fact 3565005953993bd3170c41194f12907b contains numerous odd characters. While it may not be true obfuscation, it certainly is enough to prevent the casual user from inspecting (and possibly stealing) your JavaScript source.

The Web Developer extension for Firefox adds a multitude of useful Web developer tools to the browser. You access the tools via a toolbar that is added to your browser once you install the extension (see Figure 5-14). The extension is available for all platforms for which Firefox is currently available, meaning it includes Windows, OS X, and Linux. The Web Developer extension for Firefox is available at chrispederick.com/work/firefox/webdeveloper/.

Figure 5-14. The Web Developer extension s toolbar added to Firefox The Web Developer extension provides more than 80 individual tools that do everything from converting GET requests to POST requests (and vice versa) to allowing live editing of a page s CSS rules. Too many tools exist to list them individually, but the following are the general tool categories: The Disable menu provides the ability to disable browser functionality such as JavaScript, CSS, cookies, and animated images. The CSS menu contains tools related to CSS rules and style sheets. You can use the Forms menu to convert GET requests to POST requests (and vice versa), automatically populate form values, and remove maximum lengths from input elements. You can outline and hide images using functionality located in the Images menu. You can inspect various information relating to the page such as cookie information, link information, and response headers from the Information menu. The Miscellaneous menu provides tools for clearing the browser s cache, history, and session cookies, as well as zooming in or out on the page. You can outline tables, table cells, frames, block-level elements, and more using the Outline menu. The Resize menu displays the current window size in the title bar along with other tools for resizing the current window. You can find quick links to third-party sites for validating CSS, HTML, and download speed under the Tools menu. The View Source button provides easy access to viewing the page s source. The Options menu provides custom editing of the Web Developer extension s colors, shortcut keys, and behavior. Some Web developers have described the tools and functionality provided by the Web Developer extension as indispensable, the best, and essential. Install it to experiment with its various tools and determine whether it aids your development and debugging process.

We re assuming the audience of this book has at least a basic working knowledge of JavaScript. A complete tutorial on JavaScript fills a complete book itself, so we ll avoid trying to teach the language here. Instead, this section discusses some of the advanced and possibly little-known features of JavaScript and how you can incorporate them into your Ajax development. We ll first cover a little history about JavaScript so you know where it has been and how it got here. Brendan Eich of Netscape developed JavaScript in 1995. His task was to develop a way to make Java applets more accessible to the nontechnical Web designers who created and maintained Web sites. Eich decided that a loosely typed language devoid of compilers was the appropriate choice. Various names were attached originally to Eich s creation, but it was finally renamed to JavaScript in an effort to capitalize on Java s newfound marketing success. JavaScript swiftly became the most popular scripting language on the Web, thanks to a low barrier of entry and an ability to be copied and pasted from one page into another. Early revisions of JavaScript and the Navigator DOM gave rise to the DOM Level 0 standard, which defined form elements and images as children of their elements. Not to be outdone, Microsoft created its own scripting language called VBScript. VBScript was functionally similar to JavaScript but had a Visual Basic like syntax and worked only in Internet Explorer. Microsoft also supported an implementation of JavaScript (which by now had been and standardized and named ECMAScript by ECMA) as JScript. While the syntax of the various flavors of JavaScript were nearly identical, the vast differences in the implementations of the DOM among browsers made cross-browser scripts almost impossible to create. Using a lowest common denominator approach usually led to scripts that could do no more than the most trivial of tasks. By 1998 Netscape had opened the source code for its browser and decided to rewrite the browser from scratch with a focus on closely following W3C standards. At that same time, version 5 of Internet Explorer had by far the best implementation of the W3C DOM and ECMAScript. The first complete release of the open-source Netscape code under the Mozilla banner came in 2002. This started a trend in the browser space: more and more browsers worked to comply with Web standards maintained by the W3C and ECMA. Today, modern browsers such as Firefox, Mozilla, Opera, Konqueror, and Safari all adhere closely to Web standards, greatly simplifying the task of writing cross-browser HTML and JavaScript. Internet Explorer 6, not much changed from the version 5 browser of 1998, exhibits the most nonstandard behavior.