This post originated from an RSS feed registered with Web Buzz by Douglas Clifton. Original Post: Exposing JavaScript Feed Title: blogZero Feed URL: http://loadaveragezero.com/app/s9y/index.php?/feeds/index.rss1 Feed Description: Web Development News, Culture and Opinion Latest Web Buzz Posts Latest Web Buzz Posts by Douglas Clifton Latest Posts From blogZero

A few days ago an informal poll appeared on the Digital Web news page asking visitors if they are Formally Educated or Self-Taught? I was surprised by the large number of respondants (many of them highly influential developers) stating they are mostly self-taught.

Another prevalent thread running through the comments is the concept of learning by observation, or what I like to call "how'd they do that?" In order to understand a technique, one of the best methods is to study source code. This is easy enough to do with any browser, and Firefox has some extensions that make it even easier. On my own Web site I try to expose as much as possible, including the markup, PHP source code, I also list my CSS and JavaScript files in the sitemap, and so on. These are just niceties, because other than code originating on the server-side (PHP for example), anything delivered to the user-agent is viewable in source form. Unless you're in the obfuscation camp, which I'm not here to discuss (shame on you if you are).

By now you may have heard of Ajax, and the booming trend in dynamic or DOM or client-side scripting that goes along with it. In other words, JavaScript is red-hot right now. If you're just getting into scripting, then this is a damn fine time to be learning by studying the code that drives all this stuff. It's also a fine time to be learning JavaScript because its reputation as a toy language with many poor examples is quickly being replaced by a new-found respect and clean, structured code.

As far as JavaScript code goes, there are a couple of different sources you're likely to run into. Embedded JavaScript can be found right in the markup. This is still almost as common as it is a bad practice. So there you are, back to viewing the page markup. Often this practice is made even worse by code that is disorganized and dispersed all over the place. There is also inline JavaScript, most often used to fire on certain events such as onclick, but I'm not going to get into that here. Likewise for so-called "javascript:" protocol URLs, such as those used by bookmarklets.

A better solution is to use the src attribute of the <script> element to include external libraries of code. Some developers claim this can cause the page to load more slowly since it involves an extra HTTP GET request for each included JavaScript source file. In my opinion modularity, code maintenance and browser caching of the external scripts easily trumps these concerns.

So once you land on that page with the fancy JavaScript effects, what is the best way to study the techniques being used? One method is to open the source of the page, locate the code embedded in it, or in the case of external source, copy the URL to the file and make a separate request with your browser. Using this rather tedious method for external code with Firefox and most other browsers will result in the code being displayed in a window as plain text, although IE has a nasty habit of prompting you to download the file rather than simply displaying it.

A more elegant solution is to use JSView, a Firefox extension which will open up separate view-source windows for any or all external JavaScript files referenced by the current page (it will do the same thing for external CSS). I find this method acceptable if I only want to look at a particular file, and it sure beats hunting through the markup, copying (and possibly having to modify "../.." paths) then pasting the URL into the address bar of a another tab or window so you can continue to view and test the rendered page.

But this method only works for external source code. Some pages use a mixture of external files and embedded code. In these cases, the all-powerful Web Developer extension really shines. From the Information menu, select "View Javascript" and the extension opens a new tab with all the JavaScript from the current page concatenated into one view. Code from external files are labeled as such with links to the files, and embedded JavaScript is labeled as "Inline Script" referencing the document that defined it. The code appears in source-order, or in other words in exactly the same sequence as it is appears in the markup.

But source order is not important to the JavaScript interpreter embedded in your Web browser. It simply builds a collection of objects after receiving and parsing each form of source code, and then waits for some event to fire that will trigger the intended behavior. If you think in these terms, which I recommend, then Steve Chipman's JavaScript Object Tree favelet/bookmarket is the way to go. To use it, simply drag a copy of the link to your bookmarks toolbar, then on the page you want to study click the link. A new <div> element appears overlaying the top portion of the document and in it you will find a collapsed tree-view of every object type defined by that page. Object types include functions, objects (arrays, dates, etc.), strings, numbers, and so on. To expand an object type into a list of its members, just click on it. To view the value of an object, which in the case of a function is its source code, just click on the item by name. You can easily collapse parts of the tree in the same manner.

Another really handy favelet is Shaun Inman's View Rendered Source, which also overlays the current document with source code, but not JavaScript code. Rather, it displays the browser's internal view of the markup after any changes are made to the DOM. For example, if a script is using Ajax to insert new elements into the document tree and you want to observe the results, then the script will give you a before and after snapshot of the markup.

Remember that observation and studying working examples are powerful ways to learn how Web software is built, and a great way to improve your skills. Whether you are a new or a seasoned JavaScript developer, if you plan on studying code in the wild then Firefox and its many extensions, and any number of other tools (I'm just scratching the surface here) are the way to go.