JavascriptKata

I receive javascript-related questions in my inbox from time to time and here’s the last one.

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?

I’m not a PHP guy and I like to use standards for the languages I’m using so this php.js thing is not for me at all. In fact, I really dislike PHP and though I use it often, there is no reason in the world I would want to use its syntax to write javascript.

Import the librairie (packed) and write javascript like you never wrote it before.

Example, you want to use the good ol’ strrpos to find position of last occurrence of a char in a string (example from the site)

would return 16.

But what happens if a non-PHP guy as to modify your PHPed javascript?

I’m a big fan of jQuery. This librarie is just the best and simplest one around. I really noticed it when I wanted to get rid of jQuery in TimmyOnTime and try to use prototype.js instead, just to be more “rails-oriented” (that’s a pretty lame excuse don’t you think?)

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…

As you probably know, I’m a big fan of jQuery because it is more integrated with CSS than scriptaculous. Someone have made a new plotting plugin for jQuery called Flot and this is awesome. The examples are really looking good.

If you’re a javascripter, chances are that you coded an infamous javascript calendar in your life. I saw somewhere that at the moment of his death, an normal javascripter will have coded an average of 7.4 javascript calendar. If we estimate that there is 2.3 million javascripters in the world, it means that there will be about 17 020 000 javascript calendar when the first generation of javascripter will be extinct. I don’t remember where I was those numbers but I guess they are accurate…

Today I will present 13.51% of all the calendars that Nathaniel Brown will have done in his life : DateTime Toolbocks. But this one has a little twist. Apart being an ugly looking calendar that shows up when you click on an ugly looking icon, it has an intuitive date input selection. It means that it parses natural language and transform it into a datetime value. You want to select a date to be last week? You simply write last week and the date will be last week.

But there’s a lot more of possible (taken from the site)

• Today
• tod
• tomorrow
• tom
• yesterday
• 6
• 6th
• 6th October
• 3rd of Feb
• 10th Feb 2004
• 14th of Februrary
• 12 feb
• 1 ja
• mon
• Friday
• next Friday
• next fri
• next m
• last Monday
• last mon
• last m
• 2004-8-8 (ISO)
• 2004-04-04
• 1/24/2005 (US)
• 4/26
• 10-24-2005
• Next Week
• Last Year
• Next Month
• 18.11.2004
• 2 years ago
• ten days from now
• 11 years from today

Gary Haran wrote stuff you should know about bookmarklet and answer the question that’s on everybody’s lips : what is the maximum number of characters that a bookmarklet can have? And the answer is… 508!

I also wrote a complete article on how to write a bookmarklet.

Closures are really powerful in javascript. The problem with them is that a lot of javascripters don’t understand them well. When I first started working seriously with closures, I had so many questions and no answers… until I read JavaScript Closures for Dummies. Don’t be fooled by the “for dummies” that could make you think about low-quality information as every “for dummies” books. The article of Morris Johns is detailed and precise… but lenghty.

Don’t forget to del.icio.us it and use it as a reference!

Since the beginning of the new year, I’m offering to javascripters the echo chamber. What is it? It’s a category where I will post news about what happens in the javascript world. I will try to avoid ajax related news because Ajaxian already does the job really well.

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?

I spent a lot of time testing cross-browser compatibility on the last site I did. My friend Frank of Ruby Fleebie is loosing hours trying to be compatible with Firefox and Internet Explorer. So, when I heard that a simple javascript file could help us in our work, I thought that it would be nice to share it with you.

Here it is : IE7.js version 2.0 (beta). Check out the demo page and start having fun again by worrying less with cross-browser compatibility.

I also started the Not tested in IE initiative. What is it? It is for developers who don’t want to test if the page or site displays correctly in Internet Explorer©. You just add the following logo on your site and you’re ready to go!

I proudly announce you that I hate PHP is the first site that joined the initiative. Look at the bottom of the page for the logo.

Here’s something we’re always ask : “Can we see the list in the order we want?” In a programmer’s language, it means that the client wants to be able to sort a HTML table by clicking on the header row. You have two choices : server-side or client-side. If you choose server-side, you’ll have to query all the data to the DB with a different “ORDER BY” clause. That’s not nice for your DB and your DBA will probably hate you. If you choose client-side, you’ll have to write A LOT of code. That is not nice for your phalanges and they will probably hate you.

God finally sent us a third option : Tablesorter 2.0 (a jQuery plugin).

It’s easy to use and it just works! Take a look at the simplest example possible and don’t forget there’s a lot more to do.