When I started my new job, I had to make the transition from YUI to jQuery. I’d seen some jQuery code before (in fact, its terseness and use of $ as both an object and a function were easy to spot), but I wasn’t familiar with it. I actually thought that the query part of jQuery meant there was some kind of Standard Query Language interface. There isn’t, but there is a really cool CSS3 selector instead.

Turns out, I was a little disappointed; I wanted to use something query-based. So, I started to throw this script together. I call it JSQL. Below are some quick examples of what it looks like in action:

<br /> var results = JSQL(’SELECT * FROM #ft WHERE nodeName = “LI”);<br />

JSQL always returns an object with an error property that’s either Boolean false or a String stating what error occurred (for example, “Unknown command UPDAT3″). If it successfully retrieves or operates on elements, it returns a count:Number property with the number of elements and an elements:Array property with those elements.

Here are some interactive examples:

Example 1: Checkboxes

<br /> JSQL(’UPDATE #jsql-example-1 SET checked = true WHERE type = “checkbox”‘);<br />

Set Checked

<br /> JSQL(’UPDATE #jsql-example-1 SET checked = false WHERE type = “checkbox”‘);<br />

Uncheck

Example 2: Form Validation

<br /> JSQL(’UPDATE #jsql-example-2 SET parentNode.className = “error” WHERE value = “”‘);<br />

Highlight empty fields

<br /> JSQL(’UPDATE #jsql-example-2 SET parentNode.className = “” WHERE value = “”‘);<br />

Reset

Example 3: Removing Elements

<br /> JSQL(’DELETE FROM #jsql-example-3 WHERE nodeName = “STRONG”‘);<br />

Remove strong tags

In the spirit of jQuery, I also stuck in a quick each method which you can use to iterate through the returned elements immediately instead of setting up your own loop. The context is the current element (like jQuery) and the return value is still the same:

Example 4: Selecting Elements

<br /> JSQL(”SELECT * FROM #jsql-example-4 WHERE nodeName = ‘EM’”).each(function() {<br /> this.style.background = ‘#ffff00′;<br /> });<br />

Select & Operate

<br /> JSQL(”SELECT * FROM #jsql-example-4 WHERE nodeName = ‘EM’”).each(function() {<br /> this.style.background = ”;<br /> });<br />

Undo

I started coding this several months ago, and just recently decided to revisit it. I found the code hard to read myself when making some modifications before publishing it here. That typically means it’s poorly written. And I’m admittedly lousy at writing parsing code… so there’s that. I also doubt it’s realistic for any real-world websites (other libraries handle those jobs quite well), but I thought it would be fun to play with.

Some noticeable features lacking are equivalents to ALTER and INSERT INTO. I’ve also got it up on GitHub, so feel free to fork it, and maybe add those methods yourself!

• [Download jsql.js] (11k)
• [Download jsql-min.js] (3,661 bytes)

But time is a commodity nowadays. I’ve got way less time to write, and when I do, I’d rather be writing code than tutorials (or honestly, playing video games). Sorry about that, but I hope the (well-commented!) source will help those of you out there who’d like to contribute to the slowly growing world of DHTML games.

You’ll notice that this code is over 6 months old. And I’m the kind of developer who constantly updates his style, methods and patterns. Given that, there may very well be many mistakes or bad practices in here, some of which I may have improved upon by now, but others maybe not. Either way, feel free to comment on them, and I’ll answer any questions as well.

Thanks for checking it out, and please be good to it. I’d love to know about any projects created with this source as a basis, and would appreciate links back here. Also please don’t claim it as your own, that’s not cool.

Enjoy!

Say you’ve got a fancy user interface. You’re leveraging AJAX well, you’re making good use of best practices, and you’ve got fast servers that respond quickly.
But your user actions still aren’t quite as fast as you’d like. What else can you do?

If you’ve done things correctly, you’ve got a user interface that reacts positively to successful flows, but will also handle errors gracefully.
Even though you’re “doing it right,” consider restructuring your application: assume success. Normally, your server is up and running and operations
will be completely successfully. The edge case (hopefully) is the error case. Assuming this, we can create a slightly faster user interface.

Let’s begin with a basic voting mechanism. You’ve got a control on your page that lets a user vote on an object, and a small bit of text to represent the state of said control.
It may look something like this:

This example is meant to be easy and functional; hopefully your controls are prettier.
Regardless, here’s a common flow for this request and its callback states:

1. Listen for the click event on the control.
2. Send the request.
3. Display a “loading” message or a typical spinner image.
4. If the call comes back successfully, provide “success” feedback to the user and update the control.
5. If the call throws an error, provide an error message.

This flow is extremely common in today’s web. But we want something more immediately responsive, so let’s restructure the flow:

1. Use onmousedown because it will fire off just slightly sooner than onclick would.
   (This might not suit all user interfaces but in this case it’s fine, and it wins us a few milliseconds.)
2. Provide “success” feedback to the user and update the control.
3. Send the request.
4. If the call throws an error, reset the controls and provide an error message.

This structure might seem a little off. Indeed, the error case even “lies” to the user for a few milliseconds if the request fails.
But it covers all of its bases; none of the previous flow is omitted.
Keep in mind that the error case is the edge case, and a very large majority of the time it’s fine to assume success at first.

Using jQuery, here’s what the code might look like:

<br /> // Attach the mousedown event listener<br /> $(’#snappier-1-btn’).mousedown(function(e) {</p> <p> var el = $(this);</p> <p> // Go ahead and assume things went smoothly<br /> el.attr(’disabled’, true);<br /> el.next().html(’Voted!’);</p> <p> // Send the XHR<br /> $.ajax({<br /> error : function() {</p> <p> // Undo the success message and allow the user to repeat<br /> el.attr(’disabled’, false);<br /> el.next().html(”You haven’t voted yet”);</p> <p> // Let the user know what happened<br /> alert(”Sorry, an error occurred! Please try again.”);</p> <p> },<br /> type : ‘GET’,<br /> url : ‘/feed/’<br /> });</p> <p>});<br />

And here’s this flow working right here on the page:

Many JavaScript libraries support the evaluating of data returned via XHR. Some, like YUI, do not (yet). In other cases, folks have rolled their own “AJAX library” but still want this behavior. The below script supports searching HTML for scripts and evaluating them:

<br /> /**<br /> * Evaluate the passed content for <script> tags<br /> * @param {String} html The string to parse<br /> */<br /> var evalHTML = function(html) {</p> <p> var piece,<br /> res = html.split(/<script/);</p> <p> res.shift();</p> <p> for (var i = 0, len = res.length; i < len; i++) {</p> <p> (piece = res[i].split(/>/)).shift();</p> <p> try {<br /> eval(piece.join(’>').split(’</scr’ + ‘ipt>’).shift());<br /> } catch (e) {}</p> <p> }</p> <p>};<br />

You can execute some examples yourself below:

<br /> // Example 1 – script inside of a div<br /> evalHTML(’<div><scr’ +<br /> ‘ipt>alert(”Hello, JavaScript!”);</scr’ +<br /> ‘ipt>’);<br />

Execute example 1

<br /> // Example 2 – script sets a global variable then displays it<br /> evalHTML(’<scr’ + ‘ipt>var foo = “bar”;</scr’ +’ipt>’ +<br /> ‘<scr’ + ‘ipt>alert(foo);</scr’ +’ipt>’);<br />

Execute example 2

• [Download eval.js] (376 bytes)
• [Download eval-min.js] (214 bytes; compressed)

Update 9/28/08: Fixed a bug thanks to Isaac Schlueter (see comments).

As most JavaScript programmers know (and many are all-too familiar with), speed is a major factor
when considering how to accomplish any given task.
Once in a while, a script will still run too slowly even after standard optimization tricks have been applied.
When this happens, it makes sense to revisit common practices to see if they can be improved.

I’ve noticed that much of the code that I write contains large if blocks and switch statements. Going back and reading what I’ve written,
I sometimes can’t figure out why I chose one method over the other, given that they can both get the same job done. Usually I think readability is a factor, but which method is
more readable is typically subjective, making that irrelevant.

One use case in which if may be an obvious choice is if the conditionals needed do not translate well into a switch. Here’s an example:

<br /> if (((foo === 1) && (!bar)) || ((foo >= 15) && (bar !== false))) {<br /> // It would be messy to make this a switch statement<br /> }<br />

The above block already lacks a bit in readability, and converting it to switch would be a nightmare.
In this instance, if is the clear choice because of its flexibility. In many cases though, a single variable is being checked in a large set of conditionals.
This is the use case that I wanted to explore.

To me, JavaScript is all about doing things in clever new ways to overcome limitations.
Given that JavaScript is such an expressive, powerful language, is there a different approach that could be taken regarding these conditional blocks?
One method that can be used is what I call an object conditional.
(This concept is not new to the front-end engineering world.)
In the example below I have setup a common, easily readable if block (commented out). After that is the same behavior as described in an object:

<br /> // Get the value from the select box<br /> var bro = document.getElementById(’example-1-select’).value;</p> <p>/*<br /> if (bro == ‘mario’) {<br /> alert(”You selected Mario Mario!!”);<br /> } else if (bro == ‘luigi’) {<br /> alert(”You selected Luigi Mario!”);<br /> } else {<br /> alert(”That’s not a Mario brother”);<br /> }<br /> */</p> <p>var testObject = {<br /> ‘mario’ : function() {<br /> alert(”You selected Mario Mario!”);<br /> },<br /> ‘luigi’ : function() {<br /> alert(”You selected Luigi Mario!”);<br /> }<br /> };</p> <p>if (bro in testObject) {<br /> testObject[bro]();<br /> } else {<br /> alert(”That’s not a Mario brother”);<br /> }<br />

You can run this example by pressing the button below:

Select a Mario brother:

Execute this example

There are many things to consider here.
The first and most obvious being that the object conditional itself uses an if block, making it seem like it would be slower than the if alone right off the bat.
The only other way to emulate both else and default without getting the error testObject[bro] is not a function
is with a try...catch statement.
Since we all know that catching errors is really slow, that’s not an option when we’re going for
high performance. So we’ll have to settle for using an if.

Something else to consider is that the scope is lost when calling a function, a problem that’s not an issue using the other two methods.
This is easily solved, however, by passing whatever you’d like into the function call, for example:

testObject[val].call(args, this, etc);

Now that we’ve got our three different methods, let’s find out which is fastest!

<br /> var benchmark = function(runs, id, func) {</p> <p> var<br /> mStart = new Date().getTime(),<br /> vals = ['a','b','c','d','e'],<br /> len = vals.length;</p> <p> for (var r = 0; r < runs; r++) {<br /> for (var i = 0; i < len; i++) {<br /> func(vals[i]);<br /> }<br /> }</p> <p> var mStop = new Date().getTime(),<br /> elapsed = (mStop – mStart);</p> <p> document.getElementById(id).innerHTML = elapsed + ‘ millisecond’ + ((elapsed == 1) ? ” : ’s’);</p> <p>};</p> <p>function funcA() {};<br /> function funcB() {};<br /> function funcC() {};<br /> function funcD() {};<br /> function funcE() {};</p> <p>var testIf = function(val) {<br /> if (val == ‘a’) {<br /> funcA();<br /> } else if (val == ‘b’) {<br /> funcB();<br /> } else if (val == ‘c’) {<br /> funcC();<br /> } else if (val == ‘d’) {<br /> funcD();<br /> } else {<br /> funcE();<br /> }<br /> };</p> <p>var testSwitch = function(val) {<br /> switch (val) {<br /> case ‘a’ :<br /> funcA();<br /> break;<br /> case ‘b’:<br /> funcB();<br /> break;<br /> case ‘c’:<br /> funcC();<br /> break;<br /> case ‘d’:<br /> funcD();<br /> break;<br /> default :<br /> funcE();<br /> break;<br /> }<br /> };</p> <p>var testObject = {<br /> ‘a’ : funcA,<br /> ‘b’ : funcB,<br /> ‘c’ : funcC,<br /> ‘d’ : funcD<br /> };</p> <p>var testObjectCond = function(val) {<br /> if (val in testObject) {<br /> testObject[val]();<br /> } else {<br /> funcE();<br /> }<br /> };</p> <p>benchmark(10000, ‘benchmark-if-res’, testIf);<br /> benchmark(10000, ‘benchmark-switch-res’, testSwitch);<br /> benchmark(10000, ‘benchmark-object-res’, testObjectCond);<br />

This benchmark sets up three different tests, one with if, one with switch, and one using an object conditional.
Each method checks four different values and then falls into the default, for a total of five states.
This is executed 10,000 times to get a good sampling to work with.
You can execute this benchmark yourself below:

Results will vary of course, but I compiled my findings in the table below.
Using Windows XP, I ran the tests ten times in each of the common browsers and recorded the averages:

It looks like the winner in terms of speed is usually the clever contendor, the object conditional.
But not by a large margin. There’s a lot to be said about code readability, so if
using this method will make your application harder to maintain, it may not be worth it.
Indeed, my colleague Douglas Crockford (Yahoo!’s JavaScript architect) has good cautionary advice here:

In chosing how to structure a program, the first priority has to be clarity of expression. From clarity comes correctness and maintainability. Subordinating clarity to save milliseconds should be discouraged. That is the wrong motivation.

This is certainly true, but sometimes structure unfortunately needs to take a back seat to performance.
The most common use case that comes to my mind is animation.

Say for example, you are implementing an animation that moves an element across the screen and must perform complex calculations over each iteration.
Using an animation library like the one YUI provides, the code might look something like this:

<br /> var anim = new YAHOO.util.Anim(<br /> ‘example’,<br /> {left : {to : 1000}},<br /> 0.1<br /> );</p> <p>anim.onTween.subscribe(function() {<br /> // This function must be as optimal as possible<br /> });</p> <p>anim.animate();<br />

Given this example, optimization is critical, and those few milliseconds gained by using a quicker pattern
could make the difference between a great user experience and a sluggish one.

What are your thoughts? I look forward to your feedback in the comments section.

Edit 9/02/08: Added Google Chrome.

<br /> /**<br /> * Global Shark constructor<br /> * Options for ops: dir, speed, url, x, y, zIndex<br /> * @constructor<br /> * @public<br /> */<br /> Shark = function(ops) {</p> <p> var Y = YAHOO.util,<br /> DEFAULT_SPEED = 2,<br /> DEFAULT_ZINDEX = 1000,<br /> DELAY = 25,<br /> LEFT = ‘l’,<br /> RIGHT = ‘r’,<br /> SCREEN_WIDTH = Y.Dom.getViewportWidth(),<br /> SCREEN_HEIGHT = Y.Dom.getViewportHeight(),<br /> SHARK_WIDTH = 242,<br /> SHARK_HEIGHT = 82;</p> <p> var interval,<br /> that = this;</p> <p> that.active = true;<br /> that.dir = LEFT;<br /> that.el = {};<br /> that.onOutLeft = function(){};<br /> that.onOutRight = function(){};<br /> that.x = 0;<br /> that.y = 0;</p> <p> /**<br /> * Initializes the shark variables<br /> * @private<br /> */<br /> var init = function() {</p> <p> ops = ops || {};<br /> ops.speed = ops.speed || rand(DEFAULT_SPEED, (DEFAULT_SPEED * 2));<br /> ops.url = ops.url || ‘./’;<br /> ops.zIndex = ops.zIndex || DEFAULT_ZINDEX;</p> <p> if (ops.dir) {<br /> that.dir = ops.dir;<br /> } else {<br /> that.dir = [LEFT, RIGHT][rand(0, 1)];<br /> }</p> <p> if (ops.x === undefined) {<br /> if (that.dir == LEFT) {<br /> that.x = (SCREEN_WIDTH – 1);<br /> } else {<br /> that.x = -SHARK_WIDTH;<br /> }<br /> } else {<br /> that.x = ops.x;<br /> }</p> <p> that.el = document.createElement(’div’);<br /> that.el.className = ’shark’; // Doesn’t do anything. Just in case you want to use it<br /> that.el.style.position = ‘absolute’;<br /> that.el.style.height = SHARK_HEIGHT + ‘px’;<br /> that.el.style.zIndex = ops.zIndex;</p> <p> Y.Event.addListener(that.el, ‘click’, onclick);</p> <p> document.body.appendChild(that.el);<br /> reset();</p> <p> if (ops.y !== undefined) {<br /> that.y = ops.y<br /> plot();<br /> }</p> <p> that.start();</p> <p> };</p> <p> /**<br /> * Kills the shark<br /> * @param {Boolean} fade Whether to fade the shark in or not<br /> */<br /> that.kill = function(fade) {</p> <p> that.active = false;</p> <p> var done = function() {<br /> document.body.removeChild(that.el);<br /> stop();<br /> };</p> <p> if (fade) {</p> <p> var anim = new Y.Anim(that.el, {opacity : {to : 0}}, 0.5);</p> <p> anim.onComplete.subscribe(done);<br /> anim.animate();</p> <p> } else {<br /> done();<br /> }</p> <p> };</p> <p> /**<br /> * Move the shark<br /> */<br /> var move = function() {</p> <p> if (!that.active) {<br /> return;<br /> }</p> <p> if (that.dir == LEFT) {</p> <p> that.x -= ops.speed;</p> <p> if (that.x < -SHARK_WIDTH) {<br /> that.dir = RIGHT;<br /> that.onOutLeft();<br /> reset();<br /> }</p> <p> } else {</p> <p> that.x += ops.speed;</p> <p> if (that.x > (SCREEN_WIDTH – 1)) {<br /> that.dir = LEFT;<br /> that.x = (SCREEN_WIDTH – 1);<br /> that.onOutRight();<br /> reset();<br /> }</p> <p> }</p> <p> if (that.x > (SCREEN_WIDTH – SHARK_WIDTH)) {<br /> that.el.style.width = (SHARK_WIDTH – (that.x – (SCREEN_WIDTH – SHARK_WIDTH))) + ‘px’;<br /> } else {<br /> that.el.style.width = SHARK_WIDTH + ‘px’;<br /> }</p> <p> plot();</p> <p> };</p> <p> /**<br /> * Kills the shark. Note: intended to be overwritten<br /> */<br /> var onclick = function() {<br /> that.onclick();<br /> };</p> <p> /**<br /> * Default onclick behavior<br /> */<br /> that.onclick = function() {<br /> that.kill(true);<br /> };</p> <p> /**<br /> * Moves the shark element to the XY coordinates<br /> */<br /> var plot = function() {<br /> that.el.style.left = that.x + ‘px’;<br /> that.el.style.top = that.y + ‘px’;<br /> };</p> <p> /**<br /> * Returns a random number<br /> * @param {Number} from The starting point<br /> * @param {Number} to The stopping point<br /> * @return {Number} A random number within the range<br /> */<br /> var rand = function(from, to) {<br /> return (from + Math.floor((to – from + 1) * Math.random()));<br /> }; </p> <p> /**<br /> * Sets the background based on direction and randomizes the Y position<br /> */<br /> var reset = function() {</p> <p> that.el.style.background = ‘url(’ + ops.url + ’shark_’ + that.dir + ‘.gif)’;<br /> that.y = rand(0, (SCREEN_HEIGHT – SHARK_HEIGHT – 1));</p> <p> plot();</p> <p> };</p> <p> /**<br /> * Starts the move interval<br /> */<br /> that.start = function() {</p> <p> if (interval) {<br /> return;<br /> }</p> <p> interval = setInterval(move, DELAY);</p> <p> };</p> <p> /**<br /> * Stops the move interval<br /> */<br /> that.stop = function() {<br /> if (interval) {<br /> clearInterval(interval);<br /> interval = false;<br /> }<br /> };</p> <p> init();</p> <p>};<br />

You can create new sharks like this:

<br /> var myShark = new Shark();</p> <p>// Or setup some basics, like having him swim to the left<br /> var anotherShark = new Shark({dir : ‘l’});<br /> anotherShark.onclick = function() {<br /> alert(”I’m a shaaaaaaark!”);<br /> myShark.kill(true); // Kill it with a fade<br /> };</p> <p>// You may also want to host the shark images yourself:<br /> var hostedShark = new Shark({url : ‘http://mydomain.com/shark/’});<br />

The last example above shows setting a custom URL for the shark images. You can download those here:

There are a few different events you can subscribe to including onclick, onOutLeft and onOutRight, which I think are pretty self-explanatory.
Using these events, I put together a very simple game involving sharks, clicking and hopelessly trying to save a doomed diver. The ocean graphics came from one of my favorite CSS Zen Garden examples.

The shark script requires YUI (Animation, DOM and Event). I’ve included it in the third download option below:

• [Download shark.js] (3,747 bytes)
• [Download shark-min.js] (1,550 bytes; compressed)
• [Download shark-min-yui.js] (46k; compressed with YUI)

I’d love to see if anybody else has cool ideas of what to do with the shark script!

The first thing I saw last week was Scott Schiller’s amazing Experimental dynamic XBM test, favicon “VU meter”. He put his very useful Sound Manager 2 flash API to interesting use: the favicon displayed in many browsers’ tabs and other places is a VU meter of the current song playing. Awesome! So, using that cool premise, what other neat things could be done…

Enter Mathieu ‘p01′ Henri’s super cool DEFENDER of the favicon! This unbelievable game is confined in a tiny 16×16 box, just big enough for your favicon! You can also hit Enter to transfer the game into a canvas element on the page. So creative, so retro, so cool! I’ve already spent way too much time playing this game, much to the misfortune of my poor squinting eyes.

Last but never least is the always impressive Jacob Seidelin with another mind-blowing demo of what JavaScript is capable of in the right hands. I’m sorry if it’s tiring that I keep reposting what Jacob is up to, but as long as he’s doing incredible things like this, it’s not gonna stop.

You may have already heard about Radiohead’s new video hosted on Google Code. If not, here’s the gist of it:

No cameras or lights were used. Instead two technologies were used to capture 3D images: Geometric Informatics and Velodyne LIDAR. Geometric Informatics scanning systems produce structured light to capture 3D images at close proximity, while a Velodyne Lidar system that uses multiple lasers is used to capture large environments such as landscapes. In this video, 64 lasers rotating and shooting in a 360 degree radius 900 times per minute produced all the exterior scenes.

Awesome right? Well Jacob saw this as a challenge from Radiohead and did what he does: implemented it in JavaScript and canvas. As usual, super cool stuff.

Well, this week’s almost over, so here’s to hoping that next is half as cool as last week was!

I must have been feeling nostalgic, missing my wasted hours playing old Nintendo games as a kid, because last weekend I put together Spacius! A Space Adventure. My goal was to make a fun, simple game using only JavaScript that would work in any browser. That’s right folks, this game was made using just div elements! Really, there’s nothing hardcore in here that would require canvas, so I guess that shouldn’t blow any minds. But this game has been tested and works in IE6, IE7, FireFox 2/3, Opera 9.5 and Safari 3.

My one cop-out was falling back on flash for the audio, but until all browsers support HTML5 (or some mad genius makes a JavaScript-only audio player), this is the best I could do. Spacius! uses Scott Schiller’s fantastic Sound Manager 2 to enable sound. There’s a little latency, but it otherwise works like a charm.

One really cool thing about the way Spacius! works is that it takes the shape of its containing element. So it was really trivial to make an 800×600 pixel version.

Here’s how to play: Press the space bar to begin the game. Use the arrow keys to move the ship. Once playing, use the space bar to shoot balls of excitement. The S key toggles sound on/off.

There are six waves in Spacius!. The last one begins at 10,000 points, and it’s really hard so only total badasses will be able to get super high scores (yes, that’s a challenge).

Here are the UFO scores:

Bomber: 15 points

Bogey: 20 points

Meteor: 50 points

“Death Star”: 25 points

So what’re you waiting for?? PLAY NOW!

Honestly, my preferred method is
Firebug’s console.log(), which lets a developer
pass in a string or series of variables that it will display, like so:

<br /> var myVar = {<br /> key1 : ‘value1′,<br /> key2 : ‘value2′,<br /> key3 : ['a', 'b', 'c']<br /> };</p> <p>try {<br /> console.log(’myVar: ‘, myVar);<br /> } catch(e) {<br /> alert(”You don’t have Firebug!\nFor shame…”);<br /> }<br />

Run this example

I think a large majority of webdevs use both Firefox and Firebug, so this
is nothing new. But there are some edge cases in which it would be nice to have a print_r() equivalent.
For example, if you must debug in a less developer-friendly browser such as
Internet Explorer.

To satisfy these edges cases, I’ve put together a function similar to print_r():

<br /> /**<br /> * Concatenates the values of a variable into an easily readable string<br /> * by Matt Hackett [scriptnode.com]<br /> * @param {Object} x The variable to debug<br /> * @param {Number} max The maximum number of recursions allowed (keep low, around 5 for HTML elements to prevent errors) [default: 10]<br /> * @param {String} sep The separator to use between [default: a single space ' ']<br /> * @param {Number} l The current level deep (amount of recursion). Do not use this parameter: it’s for the function’s own use<br /> */<br /> function print_r(x, max, sep, l) {</p> <p> l = l || 0;<br /> max = max || 10;<br /> sep = sep || ‘ ‘;</p> <p> if (l > max) {<br /> return “[WARNING: Too much recursion]\n”;<br /> }</p> <p> var<br /> i,<br /> r = ”,<br /> t = typeof x,<br /> tab = ”;</p> <p> if (x === null) {<br /> r += “(null)\n”;<br /> } else if (t == ‘object’) {</p> <p> l++;</p> <p> for (i = 0; i < l; i++) {<br /> tab += sep;<br /> }</p> <p> if (x && x.length) {<br /> t = ‘array’;<br /> }</p> <p> r += ‘(’ + t + “) :\n”;</p> <p> for (i in x) {<br /> try {<br /> r += tab + ‘[' + i + '] : ‘ + print_r(x[i], max, sep, (l + 1));<br /> } catch(e) {<br /> return “[ERROR: " + e + "]\n”;<br /> }<br /> }</p> <p> } else {</p> <p> if (t == ’string’) {<br /> if (x == ”) {<br /> x = ‘(empty)’;<br /> }<br /> }</p> <p> r += ‘(’ + t + ‘) ‘ + x + “\n”;</p> <p> }</p> <p> return r;</p> <p>};<br /> var_dump = print_r;<br />

This function collects the values of the passed variable and its children and returns them in a formatted string.
The first parameter is the variable itself, the second is the maximum number of recursions to allow (to prevent errors),
and the third is the string to use to separate or indent content (such as a space or a tab).
Here are some examples:

<br /> // EXAMPLE 1<br /> var myVar1 = {’true’ : true, ‘false’ : false, num : 3};<br /> alert(print_r(myVar1));</p> <p>// EXAMPLE 2<br /> var myVar2 = [{'legend' : 'zelda'}, {'foo' : {'bar' : null}}, 'a', 'b', [1, 2, { 'key' : 'value'}, 'bill', 'ted']];<br /> alert(print_r(myVar2, 10, “\t”));</p> <p>// EXAMPLE 3 (this one outputs a LOT, even with a max of 5)<br /> var myVar3 = document.body;<br /> alert(print_r(myVar3, 5));<br />

Run example 1
Run example 2
Run example 3

Even if you’re a devout Firebug user and this function has no use for you, I still thought it might be helpful to see how this kind
of thing would be put together.

• [Download print_r.js] (1,271 bytes)
• [Download print_r-min.js] (427 bytes; compressed)