Category Archives: Javascript

What’s $(this)??

I am far from being a javascript Ninja. But I do try to catch up.
The first JS library I used to work with was Prototype + Scriptaculous. Unfortunately These are not maintained anymore. So I moved on to the next Buzz – Mootools.

I really like Mootools. It’s a great powerful library. Unfortunately, Mootools’ golden days seem to be over. The new king is now Jquery. The fact that all the big players – Yahoo, Google, Microsoft implement this library for all their projects makes it a safe bet and the immediate choice for any developer. So although Mootools is great and my own choice, me too, I should move on.

At start I found Jquery rather annoying. On one hand it’s easy enough to point to a DOM element using the same notation as being used on your stylesheet. On the other hand I now need to learn new references to all its attributes and remember to pass them as arguments in a function, instead of the original and intuitive assignment. Html(‘bla’) instead of innerHTML = ‘bla’, css() instead of style, etc.. On top of everything – what’s with the $(this)? How does it relates to ‘this’? This is mind boggling.

So here’s the deal, in a nutshell:

Whenever we call the Jquery function, or its alias $, with a jquery DOM selector as a parameter, we get in return an array of elements.

For instance, if we point to ‘.my_class’, i.e. pass it as a parameter to Jquery (), we get back an array that contains all the elements in the page that have the ‘my_class’ class.

And here’s the big thing: we can refer to the first member of this array as ‘this’.
i.e:
$(this)[0] == this
That means, that if we point only to a unique element:
$(‘#my_unique_element’);
Then
$(‘#my_unique_element’)[0] == this;
Ergo
$(‘#my_unique_element’).html(‘new content!’);
Is as good as
$(‘#my_unique_element’)[0].innerHTML = ‘new content!’;

As this is a reference to an element within its own context, $(this) means we pass it as a parameter to the Jquery function.

When we are within the context of $(‘.my_elements’), ‘this’ is any element that has a ‘my_elements’ class, and $(this), is that same element being passed to the $(Jquery) function. That way we can apply all the Jquery magic on it.

Keeping this in mind may also help us making our code more efficient: As Jquery almost never throws error at selecting a none-existance dom element, we now have a way to manually test that it indeed exists before we go on trying to manipulate it, simply by checking the returned array length:

if ($(‘div.my_elements’).length) { … }
When it equals 0 – i.e – jQuery returned an empty array – no such element on the DOM, let’s move on!

Code Dissection (or the Frog’s Revenge)

Here’s a piece of code that I have came across and pasting here in order to figure it out:

That’s right. This snippet is taken from the earlier discussed Lavalamp menu. But now we are going to dissect it.

So first step – the anonymous function that wraps the whole deal and gets an argument $. This is a general recommendation when designing a plugin – we pass the jQuery reference for $ as an argument of an anonymous function, to set up a closure and thus avoid collision with other scripts in the page, that may also use the $ sign.

Everything that we need for the plugin is inside this anonympus function.

Next, within this closure, we add a new function property to jquery’s fn object. This function’s name is the actual plugin’s name.

Most important to remember at this stage is that ‘this’ actually refer to the object we have just created – i/e/ the plugin itself, and not to the element it is applied on.

Next we deal with our constructor’s parameters: o. Basically o is an object that contains the properties speed, type of effect an a callback function. o is also extended by any argument passed through. If no argument is passed through – then o is extended by an empty object.

Next we iterate through all elements in the documents that are asigned by this onbjects – for example – all elements that has the class name ‘lavaLamp’, and for each we apply all the object’s properties and methods. We always define the properties first, separated by commas.

Html5 and the Modernizr

Modernizr is a little javascript api compatible with most modern libraries (jquery, mootools etc..), that allows you to already start using most of HTML5 tags and features, while taking care of all cross-browser compatibility issues for you! This is all over the internet, so there’s not much new I can add. However, here’s a speed guide to making a very basic cross-browser html5 page using Modernizr.

Continue reading