Explaining various concepts in JS such as prototypes, closures, and even “literal” shorthand is interesting. I find the questions from both ends great—sometimes even challenging to explain which actually strengthens me as a JS developer. Still some concepts are hard to explain and the JavaScript Rhino book is too large and boring to dish out as homework. Then I stumbled across this page by Simon Willison which was written as a re-introduction to JavaScript but also makes a perfect condensed overview of what JS is for existing programmers: https://developer.mozilla.org/en/A_re-introduction_to_JavaScript. It even goes over a little history of the language and how to avoid nasty memory leaks in IE (circular references). Saves us a lot of time and explaining so that we can continue with more complex topics.

a = {};
a.deep = {};
a.deep.variable = {
    here: 3
}
 
function plain(){
    document.body.appendChild(document.createTextNode(a.deep.variable.here));
}
 
function memoized(){
    var z = a.deep.variable.here;
    return function(){
        document.body.appendChild(document.createTextNode(z));
    }
}
 
 
now = new Date();
    for (var i = 0, max = 5000; i < max; i++){
        plain();
    }
alert(new Date() - now);
 
now = new Date();
    for (var i = 0, max = 5000; i < max; i++){
        memoized();
    }
alert(new Date() - now);
 
// plain:  759
// memoized: 36

There’s a more complex example on the subject posted a month ago on Ajaxian and an easier to understand one on Oliver Steele’s blog written back in 2006.

// var USERID = 12345;
if (USERID =! null){
     // code
}

Her expression was always resolving to true because she had inverted her != (“not-null”) check which was actually assigning her variable to the return of a statement evaluation. Her mistake would be clearer to understand formatted as such:

// var USERID = 12345;
if (USERID = !null){
     // code
}

Since the inverse of false, null, and NaN is true her conditional statement (also an assignment) would always return true.

Which lead me to thinking, the not operator is a great way to write succinct code. In the right context, using the not operator in the right side of an assignment isn’t a bad idea.

I plan on writing more entries on my own tips and tricks with JavaScript and jQuery as well as my methods of debugging in various browsers, compression techniques, etc., but in the meantime, I’ll just comment on Jon’s list:

2. Use a [jQuery] cheat sheet

I think Visual jQuery is all you need. And now that there’s live search and clickable examples it’s even better.

3. Combine all your scripts and minify them

Dead Edward’s packer is awesome for minifying, but before I do that, I like to run my code through jSlint to make sure it’s all valid. I ignore line-break errors as I don’t agree in many cases that it’s an issue.

Additionally, when I work on large JS codebases with a lot of other people who may not code as strictly as I do, I like to use JSmin on the minimal setting (cut-and-paste version here). The compression benefit is only slightly less and it preserves single linefeeds preventing JS errors where people forgot to end their statements with a semicolon. It also makes the code easier to read and debug in a production enviornment—great for the times you want the benefits of minification without the side effect of obfuscation.

5. Keep selection operations to a minimum by caching

I just wanted to comment in Ron’s example where he used:

var myList = $('.myList');

First, if I ever reference a jQuery collection in my scripts, I like to append the dollar sign character to the beginning of the variable name to signify that it is, in fact, a jQuery collection:

var $myList = $('.myList');

It’s a lot more helpful when you access that variable further down the road and don’t have to question whether it’s a jQuery wrapped set, an actual HTML element, or something else.

Secondly, whether you’re using a JS lib or not, I would never search for an HTML collection by class name alone; What the JavaScript engine is doing in the background is looping through every single element on the page which is very intensive. It would be better to find the closest parent container first or search by specific tag name(s):

Good:

var $myList = $('ul.myList'); //added benefit of knowing the type of element you'll
// receive

Better:

var $myList = $('#closest_parent_id .myList'); // searching the children of a parent
// container instead of all the elements on the page

Best:

var $myList = $('#closest_parent_id ul.myList'); // combination of both above

19. Use noconflict to rename the jquery object when using other frameworks
22. How to check if an element exists[...]

As I’ve probably mentioned before, I always like to use noConflict() in all my projects. I move jQuery to the $j namespace and save $ for a shorthand reference to document.getElementById – I think it’s what most js developers expect and if($('myDiv)) is a lot simpler to write out than if($('#myDiv).length !== 0) or even if($('#myDiv).length).

Thanks for the link Bryan!

String.prototype.toCharCode = function(){
    var r = '', string = this.split('');
    for (var i in string){
        r += String.charCodeAt(string[i]) + ',';
    }
    return r.substr(0,r.length - 1);
}
 
'bob'.toCharCode();
// returns "98,111,98"

Update: version from my good friend Takashi and link to his blog on why it’s more efficient:

String.prototype.toCharCode = function(){
    var str = this.split(''), len = str.length, work = new Array(len);
    for (var i = 0; i < len; ++i){
        work[i] = String.charCodeAt(str[i]);
    }
    return work.join(',');
}
 
'bob'.toCharCode();
// returns "98,111,98"

Took some vids until my camera died, more to come, once I convert ‘em and upload ‘em. Here’s the most interesting things I learned so far:

jQuery:

• jQuery does do DOM caching! It listens for DOM-modified events to clear it’s internal cache.
• That random jquery[random numbers] variable that gets added to the window object is to uniquely identify the jQ instantiation (so you can do things like run multiple instances of jQuery on the same page).
• I knew about .end() but .andSelf()? Cool!
• Nokia and Microsoft join the jQuery camp. Nokia will have jQuery built into their phones (they have some browser-like app environment) $M will have it in their VS/ASP.NET and all future versions of Visual Studio will come with it going foward. link link.
• jQuery is planning to be the first library that doesn’t use any browser sniffing. They are going to use a “quirk check” method of creating some elements that aren’t added to the page that check for things like if white space gets removed when created an element that starts with a space (IE bug) and others. This way they don’t have to be constantly updating for new browsers.
• John’s working on a cool new DOM selector API called Sizzle that’s supposed to be a lot faster. It works by search for the last element in your query up. For example $('div p'); would look for all p elements on the page that has a parent div element.
• You can use create a namespace when binding events. For example $('#foo').bind('click.bar', func); so it’s easy to unbind later, and you can encapsulate your events for your own plugins to prevent conflicts. You can also create your own custom events like $('#foo').bind('apple', func); and trigger them using $('#foo').trigger('apple'); .
• $('#element').data(); lets you bind data to DOM elements (see Data Cache under Internals section here.) Since you can’t really bind an object to a DOM node jQuery assigns it a random key behind the scenes which it references. This is really handly for storing all kinds of data.

jQuery UI:
- Uses the data method above A LOT.
- Lots of enhancements, most interestingly, with drag-and-drop which detects floated elements and allows you to have draggable lists within draggable lists.
- jQuery UI team also working on some experimental stuff for Webkit only (iPhone / Safari / Chrome).
- Theming jQuery UI with ThemeRoller

Other:
- I’ve been using this really old but handy site as a jQ reference: http://visualjquery.com/1.1.2.html made by Yehuda Katz (also a speaker). Asking around on the conference IRC chan I found there’s a much newer / improved one at http://remysharp.com/visual-jquery/ by Remy Sharp. They’re going to try to update the prior site with the latter.
- Canvas tag is pretty basic but sweet. John Resig gave a whole presentation on it since the using jQuery with Firefox plugins couldn’t make it.

To make a DWR call synchronous (meaning browser-blocking) you must pass an object as one of the arguments of your DWR call with a property async set to false.

I needed this feature in project where a collection object sends out a call for more data if it didn’t have it:

...
_getData: function(offset, limit){
    var r;
    DWRcomponent.getComments(offset, limit,{ 
        async: false,
        callback: function(s){
            r = toJSON('(' + s + ')');
        }
    });		
    return r;
}
...

 
# Define the item array
item1 = ['Jack', '39', 'Panda']
 
# Define a regular function that takes three arguments
def hi(name, age, type)
  puts 'Hi ' + name + '! You are ' + age + ' and a ' + type + '!'
end
 
# Call the function using item1 and the splat operator
hi(*item1)
# Outputs: Hi Jack! You are 35 and a Panda!

While JavaScript does not have such a convenient operator, experimenting around, I’ve found a good enough solution:

 
var item1 = ['Jack', '39', 'Panda'];
 
function hi(name, age, type){
     console.log('Hi ' + name + '! You are ' + age + ' and a ' + type + '!');
}
 
hi.apply(this, item1);
// Outputs to your Firebug console: Hi Jack! You are 39 and a Panda!

The apply method is built into all functions in JavaScript and allows you to call a method of an object in the context of a different object (Moz dev page here). Think about it as the equivalent of temporarily moving that method off the current object (the window object if it’s a global function) and attaching it to another object before calling it.

The primary reason to use this method is for changing the this keyword reference inside of the called function, but it has the added benefit of optionally requiring an array of arguments that get passed to the called function. We basically keep the this keyword as the window object (could have specified window instead of this) and use it to unpack our array for us.

This solution is also useful in any situation where you have a function that takes an unlimited number of arguments and you want to to eventually send those arguments to another function that also accepts any number of arguments. This situation is exactly what was puzzling me as I was working on creating a “safe” version of Firebug’s console.log that would work normally in Firefox but alert each argument separately in Internet Explorer.

Lastly, this is usefully for succinct array merging. Instead of looping through one array and pushing each item onto another you can do:

bob = [1,2,3,4];
sue = ['a','b'];
 
bob.push.apply(bob,sue);
bob
// returns [1,2,3,4,a,b]

I had to find out the language codes of all supported languages in TinyMCE (this page), but unfortunately, they were only listed in the actual download link for each file. A quick sprinkle of jQuery code in my Firebug console would have returned me a list easily but this page didn’t have it – which lead me to consider making a bookmarklet to add jQuery on any page.

The solution:

My wonderful coworker Bryan told me immediately about a simple bookmarklet that does the above called jQuerify. Looking through it, I saw a few potential issues with this script and also decided I wanted something a little more personal, so I came up with my own version:

$jQuerify

Notable differences:

• Moved the jQuery shortcut $ to $j. I always do this on any site I work on because I find $ is used by so many other libraries and scripts that I want to minimize conflicts. Using $j also for sure tells me I’m using jQuery.
• If $ isn’t being used it becomes a shortcut to document.getElementById. I think it’s what people naturally expect $ to do, and in my daily coding I like using $('id'); better than $j('#id')[0]; when all I want to do is return an element.
• Added an initial check for jQuery to prevent running the script unnecessary.

The full source looks like this:

(function(){
    if(!window.jQuery){
        var s=document.createElement('script');
        s.src='http://jquery.com/src/jquery-latest.js';
        document.getElementsByTagName('head')[0].appendChild(s);
 
        var z=setInterval(function(){
            if(window.jQuery){
                $j = jQuery.noConflict();
                alert('jQuery loaded!');
                window.clearInterval(z);
            }
        },100);
    }
    if(!window.$){
	window.$=function(x){return document.getElementById(x);};
    }
})();

$jQuerify <-- Try me out, drag me to your tool bar.

Happy endings

Now I can just hop back over to the TinyMCE Language Pack Download page, run my bookmarklet, type the following in Firebug:

$j('#examplecontent form:first table tbody tr').each(function(c,i){
    var country = $j(this).find('td:eq(2) label').html();
    var code= $j(this).find('td:eq(1) a').attr('href').match(/(?:code=)(..)/)[1];
    console.log(c,country,'=',code);
});

And the list is returned:

0 Arabic = ar
1 Bokmål, Norwegian; Norwegian Bokmål = nb
2 Bosnian = bs
3 Bulgarian = bg
4 Catalan; Valencian = ca
5 Chamorro = ch
6 Chinese = zh
7 Croatian = hr
8 Czech = cs
9 Danish = da
10 Dutch; Flemish = nl
11 English = en
12 Estonian = et
13 Finnish = fi
14 French = fr
15 German = de
16 Greek, Modern (1453-) = el
17 Hebrew = he
18 Hungarian = hu
19 Interlingua (International Auxiliary Language Association) = ia
20 Italian = it
21 Japanese = ja
22 Korean = ko
23 Latvian = lv
24 Lithuanian = lt
25 Macedonian = mk
26 Malay = ms
27 Northern Sami = se
28 Norwegian Nynorsk; Nynorsk, Norwegian = nn
29 Persian = fa
30 Polish = pl
31 Portuguese = pt
32 Romanian = ro
33 Russian = ru
34 Sardinian = sc
35 Serbian = sr
36 Sichuan Yi = ii
37 Sinhala; Sinhalese = si
38 Slovak = sk
39 Slovenian = sl
40 Spanish; Castilian = es
41 Swedish = sv
42 Tatar = tt
43 Turkish = tr
44 Twi = tw
45 Ukrainian = uk
46 Vietnamese = vi

Look at this code snippet from the jQuery library to see what I mean:

for ( ; i < length; i++ )
	// Only deal with non-null/undefined values
	if ( (options = arguments[ i ]) != null )
		// Extend the base object
		for ( var name in options ) {
			var src = target[ name ], copy = options[ name ];
 
			// Prevent never-ending loop
			if ( target === copy )
				continue;
 
			// Recurse if we're merging object values
			if ( deep && copy && typeof copy == "object" && !copy.nodeType )
				target[ name ] = jQuery.extend( deep,
					// Never move original objects, clone them
					src || ( copy.length != null ? [ ] : { } )
				, copy );
 
			// Don't bring in undefined values
			else if ( copy !== undefined )
				target[ name ] = copy;
 
		}
 
// Return the modified object
return target;

Coding in this way leads is extremely error-prone especially for open-souce projects where many others are modifying your code. Please stop it.

Love,

A dedicated user