The ‘Roll Your Own’ columns.

The enterprising can just open the bundle contents and hack away at the dclint.rb file to change any paths or dependencies. Hey look, screenshots!

Added entry into the lint options menu

Fits into the bundle aesthetics

I’m using it here in a larger object literal method which can be called with a refinement like so:

The rendered HTML

Get the code at github or here on the RML page. I’ll post more later this week…

First off, get Jesse Hallett’s excellent jslint.vim plugin here. I installed this on my Fedora box without a hitch (well, the only hitch was figuring out the name of the Spidermonkey package for Fedora 12, ‘js-devel’ I believe it was) but my work XP machine would spit this out when attempting a :jslint command:

It’s obvious that some paths (literally, figuratively) were getting crossed somewhere (*Note you may also want to attempt to use cscript from the command line just to make sure it is, in fact, installed and working. I did, and mine was*.)

In my experience the first place to check for errors with Vim plugins is the PATH so I opened up Jesse’s plugin and focused on this section (lines 41-59 on his github repo version):

Here’s the version I ended up with after experimenting for awhile:

So, I ended up changing 3 things:

• Remove tests for which OS is being used
• Explicitly state the plugin path
• Changed the name and path of the jslintrc file

First, since we know this is for XP, the tests for Win32, Mac and ‘Nix are not needed. Second, there are more compact and portable ways to specify this path, but posting it this way makes it easy to adapt to your system path. Third, On my XP system my .vimrc is actually _vimrc and I keep it here in the vimfiles directory so it made sense to me to do the same with a jslintrc.

Speaking of the _jslintrc, it looks like the ‘fulljslint.js’ file is updated quite a bit on the jslint.com website, and allows for more options in the jslintrc file. I need to experiment with that next

Breaking that down, you have the function taking two arguments. One, the element to check for the presence of the class name and two, the class name itself. Next, a RegEx is defined which will attempt to match the class name you passed in. The RexEx itself is made so that a portion of a string can be matched because of the way that classnames are applied to elements on the DOM, i.e. “spam eggs vikings”. Last, the ternary (return pattern.test…) executes depending on what the test() method returns. Remember, test() is a function of the RegEx object which returns a bool depending on a positive(or lack of) match. Test() is going to return a ‘true’ of the class name is found, ‘false’ if not.If you are unfamiliar with ternary operators, let’s explain by looking at what an if/else doing the same thing would look like.

That works, but it’s not the lean and mean js machine we are going for here. Now, the one line of the ternary:

And it works like this:
an action -something to evaluate- ? do if true : do if false

So, in practice you could check if an element had a class name by calling:

hasClass is going to return a Bool though, so usually you will use it as part of an expression:

I rarely use hasClass outright, but the next function does.

To add a class to a single element or a collection of elements we have this:

In Summary, addClass takes 2 arguments, an element and a class name, checks to see if the element passed in is a single element or a collection of elements, then checks the element(s) to see if they have the passed in class name (via hasClass). If not, element is then checked for the presence of any other classes. Why? If there is another class name already assigned to the element(s) you need to insert a space in front of the new class being appended. Finally the class name you passed in is appended (as long as it’s not already there) and the element is returned. Let’s combine the get method with this in a couple of practical examples:

Say you have an HTML page with these four divs contained in a fifth div:

And maybe some styles to go with them:

So, on a goofy little test page you might have this:

Classless divs

Giving you this:

Now with some class (green to be exact)

Breaking that expression down, recall that the get method will allow you to pass in a ‘context’ to restrain searching. Because I only wanted the divs inside of the div with the id of “stripes” I passed it (‘#stripes’) in along with the search for the generic ‘div’ tagname:

You can break this up into 2 expressions if you want:

After getting the elements, I sent them to addClass. If you used the more verbose code above you would have:

In these examples the fact that addClass returns the element passed in is of no consequence. JavaScript functions always return a value, even if one is not specified (undefined in that case), so specifying element as the return value could just be ignored, but we are going to use it next to combine with removeClass.

Here is that removeClass function:

Before doing something pedestrian like just removing the ‘green’ classnames from the divs inside of ‘stripes’ let’s swing for the fence and remove the classnames, then add new ones all in one go. weeee!:

Now that test page would look like:

Class changed to 'slate'

This works because of the fact that addClass is returning the element list containing all of the divs we want removeClass to operate on. If you look close you’ll notice that all you needed to do was to take the previous expression we used for adding the green classes at once:

and wrapping it with the removeClass call:

There’s more to breakdown, but not too much. The removeClass function just uses the same methodology that addClass does for checking if element is an array-like object (has a length?) then looks for the passed in classname with a RegExp which will replace a match with an empty string using the ‘$1′ backreference (the second call to replace makes sure no whitespace is left over). Finally the element is returned, just like addClass. And, yes, you could invert the order to addClass(removeClass()), it doesn’t matter

All of these examples could have, obviously, been used on single elements. X.get, X.addClass and X.removeClass will take care of that for you. So if you wanted to change the second div back to green you would go:

Notice there is no need to specify a context when using an id (it should be unique).

The instructions on CEDET’s website are:
“If you are on Windows, and or don’t have make for some reason, you can use CEDET’s built in project management system to force CEDET to bootstrap itself. You can initiate the build process like this:”

Since the Windows version of Emacs is in a self contained directory (mine is emacs-23.1/) with an executable named ‘runemacs.exe’ in the folder ‘emacs-23.1/bin/’ on my Desktop, I just changed the command to fit the environment properly. Opening a Cygwin bash prompt I did this:

AND the freezing on step 6, setting up EDE goes away. ECB can now be setup

• First, download the version for windows here
• Extract that .zip anywhere, doesn’t matter
• From the extracted folder grab the jsl.exe and jsl.default.conf files and put them in your C:\Program Files\Vim\Vim72 folder (If you’re using Vim 7.2, I would assume other versions have a similar folder structure. It’s the same directory the gvim.exe, vim.exe and others are in).
• Drop the JavaScriptLint.vim file in C:\Program Files\Vim\vim72\plugin

Now, you’re almost done. Open up the jsl.default.conf file in a text editor and in the ‘Defining Identifiers’ section enable ‘always_use_option_explicit’ like so:

Also, just below the ‘common uses for webpages might be: line I added these, a la Ken Guest:

The last thing I did, and this just because it looked like the correct thing to do, was I commented out the ‘files’ section test file since Vim is sending the file for me (and since I didn’t drop that file in from the extracted folder anyway…):

Now, Action! Let’s say I just hacked together this object literal (which, I just did…) and saved it, seems OK, no errors reported:

Not triggering the .js lint error messages

Error warning triggered

the ‘keys’ are ‘zip’, ‘lat’ and ‘lon’, while the values are ’85226′, ’33.372154′ and ‘-111.754322′. To fetch the value associated with zip you would do:

This will return ’85226′ given the previous URL. For ‘lat’ or ‘lon’ it would be pretty much the same:

Here is the method itself. I’ll update the x.js page with the new code as well.

It’s an early implementation and a couple of things are worth noting. I had an issue with whitespace because I get the lat/lon numbers from a webservice maintained elsewhere in my company, and elsewhere is not properly constraining the input. You could remove this:

if you know that whitespace will not be an issue. Leaving it in place doesn’t add much of any overhead as the split command will just do nothing as it won’t see any ‘%’.

I will typically use the ObjectName.cache{} to hold a snapshot of the page, or areas of the page that I don’t want to have to re-query the DOM for. If my page is not going to change via AJAX I can store fetched results there for further use/manipulation. The ObjectName.config{} has the same functionality as .cache{}, it’s just my way of seperating out more important info than the generic .cache{}. You could use one, both, or neither, really just a matter of taste.

For this to be of use we need a way to load it once the dom is ready. Let’s add a ‘ready’ type event to the X library then:

You’ll pass your object literal to the .go() method which will, after the page has loaded, call the init() method of the object you passed to it:

Where this goes depends on how you are constructing your site. For now, we’ll put this line just below each object literal created. Later we’ll look at a site-wide answer to automating the loading of scripts, see Paul Irish’s blogs for more on that…

With a way to bind event handlers, object literals to hold the handlers, and a method to load the scripts, now we can just write some really basic JavaScript to utilize this stuff. So maybe there’s a button that lives on a page:

We need to set an event handler on that button to fire when the user clicks it. In the init() function of objectName do something like:

I’ll get to the ‘doClick’ function in a moment. First, I want to write myself a convenience method to shorten the verbosity of adding event handlers. This is optional, of course.

Now, with the convenience method added to the X library we can revisit what we wrote earlier:

That’s getting better, but we can combine those 2 statements down to:

I am using a ‘$’ as a sigil in front of the name of the convenience methods throughout ‘X’. I do this to keep any conflicts with keywords like ‘submit’, ‘blur’ or ‘focus’ from happening. Plus all the cool kids are using $…

OK, so about the doClick handler. Remember that X.addEventHandler takes a target element, an event, and a function to call when that event happens on that element. The doClick function call is in object literal notation here, it is an attribute of the object you have made. I’ve been using ObjectName as the object so far (the observant among you may have noticed that the file is objectName.js. I do this in the development phase of a project as I will usually have many separate objects, all of them their own individual .js files. So objectName.js will have one object defined in it, ObjectName. At deploy time, I’ll combine them into one .js file and minify it). ObjectName will have this named function as an attribute:

The event handler calls ObjectName.doClick() because you bound it to that element. Here’s the whole object then:

Don’t forget to include the call to the go() method, outside of the variable which passes in ObjectName and tells the browser to call ObjectName’s init() method when the DOM fires the ‘load’ event. The cool thing about an object like this is re-usability. If your site was littered with buttons which needed to say “Hi” when pressed (it could happen) you would only need to attach this object to a master page and it would attach the event to any button with an id of “say-hi”. Now, it is an id so there should only be one per page. If there are going to be multiple instances per page, use a class instead, and iterate over the nodelist that get returns with a for loop to attach events. Assuming there are multiple buttons on the page with a class=”say-hi” attribute you would do:

with this you wouldn’t have to worry about the number of elements with a class of “say-hi”, as all of them would be fitted with a click event handler that will call ObjectName.doClick(). Note the use of the config object which is an attribute of ObjectName. You can manipulate this attribute if you wanted, changing it during the page lifecycle, like say adding a toggle-type command in the doClick() function:

Now the alert will alternate between “Hi!” and “Hi Again!”. Silly, but you get the idea.

Next, we’ll do a continuation of the object literal using more of the config and cache functionality, I need to get away from this keyboard now!