At the bottom of the prototype tutorial I just posted is this great article on Encytemedia.com that digs into the Enumerable and Hash functions of the library in greater detail. There’s a lot of great stuff in here.

each and friends

I used to find myself writing a lot of for loops. Although, Prototype doesn’t by any means eliminate the need to do for loops, it does give you access to what I consider to be a cleaner, easier to read method in each.

for(var i = 0; i < F.Numbers.length; i++) {
  logger.info(F.Numbers[i]);
}

each allows us to iterate over these objects Ruby style.

F.Numbers.each(function(num) {
  logger.info(num);
});

//Output
0
1
4
5
98
32
12
9

each takes one argument, the iterator or block in Ruby terms. This iterator is invoked once for every item in the array, and that item along with the optional index is passed to the iterator. So if we also needed the index we could do something like the code below.

F.Numbers.each(function(num, index) {
  logger.info(index + ": " + num);
});

//Output
0: 0
1: 1
2: 4
3: 5
4: 98
5: 32
6: 12
7: 9

Bill Graham was asking me about where to put javascript events today. window.onload? At the bottom of the html document? Attached to the onload event of an image somewhere in the page?

Here’s an article by Dean Edwards on an interesting solution that works for IE and Firefox.

For the life of me, I can’t find the article that I read a week or so ago on this topic that outlined numerous strategies on dealing with window.onload issues, but one option to consider is using event monitoring in prototype to monitor the browser for an element to be present before performing an action on it.

Another snippet via Ajaxian:

A Javascript tip from Chris Heilmann, who reckons the object literal is “pretty close to sliced bread”. Replace:

var commonSense=null;
var standardsCompliance=“50%”;
function init(){
// code
}
function doStuff(){
// code
}
function doMoreStuff(){
// code
}

with the object literal form:

awesome={
commonSense:null,
standardsCompliance:“50%”,
init:function(){
// code
},
doStuff:function(){
// code
},
doMoreStuff:function(){
// code
}
}

Read the rest of this entry »

Via Ajaxian:

Over on SitePoint today, in the DHTML & CSS blog section, Kevin Yank has a new post that talks about some of the Javascript libraries, including the new Yahoo offerings.

JavaScript is hard, but it could be a lot harder. These days, choosing your tools can actually be most of the work.

Today, the poster children of web application success consist of numerous beefy and interdependent JavaScript files with a light dusting of HTML and CSS. With JavaScript codebases easily outweighing markup and style sheets, should most of the sensitive, new age web developer’s time be spent scripting?

Well, unless you’re trying to solve a problem that no one has tackled before, the answer is ‘probably not’

The post goes on to look at four of the more popular Javascript libraries out there – Dojo, Prototype, AjaxTK, and, of course, the Yahoo UI Library. There’s a brief summary for each of them, focusing mainly on what it offers and where it fits into the Javascript community.

He also finishes the post off with a brief look at design patterns in Javascript, specifically mentioning the Yahoo design pattern library they’re now offering as well. There’s links to some of the current patterns you’ll find as well as some other references to get a hold of to read up on patterns themselves.

In the past two weeks, I have run into live site issues due to namespace problems (javascript functions being named the same) in our javascript files.

I came across this article about versioning. It mentions some solutions for this problem.
Read the rest of this entry »