First, you loop with an index and assign the element to a variable.

You always have to have that extra assignment at the beginning of the loop.

Second, you loop with a for each.

In javascript, the for each loops though the index of the array instead of looping though the elements, like in most other languages. Thus, you also have to make the extra assignment at the beginning of the loop.

The easiest way of doing it is the third one.

How does it work? First it uses multi-assignment on one line. In javascript, you could write var i = 0, j = 1; and it would create two variables, i and j.

The second part of the for is confusing : it assigns the item but it never check if i it is out of bounds of the array (using i < items.length). It works because when javascript tries to assign an item after the end of the array (in our case items[3]), it returns null which is considered by javascript as false.

Then came the non-relational database. Amazon’s SimpleDB was the first NRDBMS (as opposed to RDBMS) that got a public attention. When I read the specs, I really thought it was cool but I wondered “Is it scalable?”. Then I remembered that there is no such thing as a scalable database. Databases need to be smashed and hurt in order to be as scalable as we want them to. I wanted to give it a try but I wasn’t ready to pay for it yet.

Working with xmpp/jabber, I saw a post by the well-known metajack (his blog is mainly about xmpp) about couchdb and I knew the time as come for me to be different. I had to try it so I opened a terminal and wrote sudo apt-get install couchdb. This was the beginning of a great adventure for me…

What’s the link between CouchDB and Javascript? CouchDB is completly JSON. You can write an application that is completly JSON/Ajax without a single line of PHP/Ruby/Python/whatever.

I’m currently writing a simple app for CouchDB and this is the first of some posts about writing an app with CouchDB. I currently use version 0.8.0 and I ran through a lot of problems and I wish these posts will help you succeeding in building an application supported by CouchDB without all the hassle I went through.

Because my main project is TimmyOnTime (and don’t forget to check out our new blog behind the clock), I will work partial-time on this project so it might not go as fast as I (and you) want. But don’t despair, you will still be ahead of the trend when NRBDMS will go mainstream.

Your old buddy body.onload()

The safest way to execute javascript when a page loads is to use the body.onLoad method.

The document.ready function with jquery

This technique requires jquery and is similar to the body.onLoad technique (see above).

The problem is that I don’t like that the javascript code is too close to the HTML code. There’s really something that I don’t like.

The #ID.ready

DO NOT USE! It doesn’t work. At first, I tought that this technique worked but in fact, even if the element corresponding to the ID doesn’t exists, the function is called. To understand it better, I’ll give you an example. Suppose that I want to load a user list with ajax after the page load and that list correspond to ul#users, I’d write the following code

Unfortunately, it doesn’t work.

The document.ready + #ID.each

After the failure of the #ID.ready technique (see above), I tried a similar thing that is working but ugly looking. Suppose I want to do the same as above, I’d write this :

That way, it would execute the loadUsersWithAjax() method for each ul#users and because element IDs are unique to a page, the method would be called only once. It looks bad but it’s the “prettiest” way I found of executing javascript code on page load.

Now, I want to know what would you suggest? Which technique is your?

I tried several things to keep my interest in writing about javascript but they all failed because there was the devil saying “anyways, you don’t make any money out of it”. But there was the angel saying “maybe you don’t make money but you like javascript and should continue to write about it”. As usual, the devil won.

I won’t try to make another revival of this blog but I’ll try to write more about little things that happens between me and javascript, about the daily problems that I encounter. I’ll write a lot about jquery too since for me, there can be no javascript without jquery.

Thanks to all of you!

I am ok with HTML but awfully new to JavaScript and I know very little at this point. My question is for this web site I’m building. I need to know the exact JavaScript code and placement of the code in an HTML document for this goal. I would like this site to automatically load a certain page (1-31) depending on what day of the month it is (1-31). I don’t need to worry about what month or year it is, just the date in the month. For instance when it is the eleventh day in the month, page11.html will automatically load when you click on to the site. I would like it to take the time(Date) from the client side not the server. This way no mater what time zone your in the right HTML page will pop up at midnight.

Most people can’t give the exact javascript code placement of the code in an HTML document because it would always be buggy. They can give hints and/or snippets of code but rarely a complete working piece. Sorry…

Secondly, relying on javascript to do all this work would be a mistake because if javascript is disabled, the site will not work. Most users have javascript enabled but you should always think about web-crawlers (google, yahoo!, etc) that will try to index your page but will hit an empty page.

It’s always hard to guess all the reasons why someone would want a different page everyday of the month and I don’t know more about the project than what is written above. Considering this, maybe there are just parts of the page that are changing everyday and you could load them on the server-side thus having a single page loading including other pages depending on the day. The problem is that you would have to ask the timezone of the user and keep it in a cookie.

Just remember, javascript should not be a requirement to navigate in a site.

Finally, if I would really want to load a complete new page in javascript, I would do the following.

This is the way I would do it, do you have any other suggestions?

Why I didn’t like prototype.js

There was not a lot of javascript written for the project so I thought that getting rid of jQuery and using prototype.js would be easy. It turned out to be hell on earth. Prototype.js made me feel like I was back in the 90s writing C++. A simple click event turns out to be a awful lot of ugly code with ugly function names.

Example, if I wanted to show the content of a DIV I clicked in prototype.js, I would use things like Event.observe, bindAsEventListener, a mix of native DOM element and prototype.js element, and worst of all, an unintelligible documentation.

jQuery as a complete different way of doing it in a single easy-to-understand line :
$(”#a_div”).click(function() { alert($(this).text()); });.
As simple as that!

The problem

I wanted to use some interface element in Rails that requires prototype.js so I had to have both librairies. The problem is that there’s a conflict between them. Prototype.js doesn’t seem to give a damn about it but jQuery is nicer with you. It offers a noConflict method.

With Rails, prototype.js is the default librairie so to override this, you could do

This way, you will have to use $j instead of $ to call jQuery.$ would still call prototype.

Another thing you could do is to use jQuery on Rails and don’t give a damn about scriptaculous. I personally prefer to use librairies that are fully tested instead of using a “by-pass” that could break my code. It’s your choice…

You can subscribe to the RSS feed with all the articles or to the RSS feed without the articles from the echo chamber.

Some may have noticed that I redesigned the site. The old design was long overdue and it was a pleasure for my eyes to have a new one.

I would also like to have your feedback on what you think of the new echo chamber and design?

Stuart Cooper recently sent me a mail about threading in javascript and I turn to you, javascripters, to find the a solution for his problem. I sent the code on RefactorMyCode for refactorisation and they will automatically show up in the comments of this post (the site is an idea of Marc-André Cournoyer who is a very active developer from Montreal). Don’t be afraid to think outside the box. The solution may be completly different from what is already written.

function startup(){

setInterval(”pinger(’live’,0)”,10000);
setInterval(”pinger(’standby’,1)”,10000);
setInterval(”pinger(’dev’,2)”,10000);
setInterval(”pinger(’test1′,3)”,10000);
setInterval(”pinger(’test2′,4)”,10000);
setInterval(”pinger(’test3′,5)”,10000);
setInterval(”pinger(’test4′,6)”,10000);

}

function pinger(server,divit){

console=document.getElementById(’ping_div’ + divit);
console.innerHTML=”;
sendRequest(”../php/ping_sys2.php?target=” + server);

}

[/snippet]

(each server has its own named div to return to)

What I am seeing when I run this is the final pinger response from the callback and nothing else. I since added debugging into my XMLHttpRequest code so that it split out the server response progress.

[snippet]

readyXML=xmlReq.readyState;

[/snippet]

[snippet]

if(readyXML == 3){

data=”Serving …”;

}

if(readyXML == 2){

data=”Sent …”;

}

if(readyXML == 1){

data=”Opening …”;

}

[/snippet]

What I have observed is that when running the setInterval commands as above, all except the final request are “jammed” on readyState = 1 and appropriately responds with “Sending …”

however,

when I do the following (which is messy)

[snippet]

function startup(){

setInterval(”pinger(’live’,0)”,1000);
alert(”something”);
setInterval(”pinger(’standby’,1)”,10000);
alert(”something”);
setInterval(”pinger(’dev’,2)”,10000);
alert(”something”);
setInterval(”pinger(’test1′,3)”,10000);
alert(”something”);
setInterval(”pinger(’test2′,4)”,10000);
alert(”something”);
setInterval(”pinger(’test3′,5)”,10000);
alert(”something”);
setInterval(”pinger(’test4′,6)”,10000);

}

[/snippet]

Each response is absolutely spot on and will continue to generate pings correctly. So in this case the script alert interrupts are forcing the callback request to trigger, whereas without the alerts its only the last request that triggers a callback. I have also tried using artificial timeout loops instead of alerts (which generate the odd browser “script running slowly” message) but to no avail.

At the moment I am almost resigned to having to create individual events (like rollovers, though I would much prefer the ping initialisation to occur window.onLoad()) that trigger the setInterval() … which also seems to work fine.

I am hoping that you may have come across a way of forcing the XMLHttpRequest to respond without forcing alerts or confirms on the user, in the time since the last update to the article.

What is it?

I hate PHP helps you to evacuate your daily frustrations against the PHP language via Twitter. It’s simple. You must tell your twitter username to I hate PHP (on the website) and then, send a direct message to the ihatephp twitter user in the following format : d ihatephp a thing that frustrates you in PHP.

Why against PHP?

I could have done it against a lot of languages because they all suck in their own special way. But the moment I was thinking about the project, I was working with PHP and I just kept sending IM messages to Frank (of Ruby Fleebie) to tell him about things that frustrated me in PHP. I just made it more “official” and now I tell it to the world via I hate PHP.

Subscribe to the RSS of I hate PHP!

What happens with Javascript Kata?

I know, I have been negligent with site. It’s really shameful to let a great site die and there’s no one to blame but me. Why I did that? I could give hundreds of reasons but they would all be lies. I really don’t know what happened.

I want to give another twist to JavascriptKata. I want to get back to a more tradional reference site because I don’t like the concept of a technical blog after all. I want the articles to be more persistent, not just a post that everyone forget about after a while.

But, there would be a RSS feed too. I would announce new articles on the site. I would also use it to debate on tricky things about javascript and then make an article out of it.

I really would like to hear you about this idea, please comment!