Javascript Kata http://www.javascriptkata.com Advanced katas for javascripters Mon, 05 Oct 2009 14:48:50 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 How to write a singleton class in javascript http://www.javascriptkata.com/2009/09/30/how-to-write-a-singleton-class-in-javascript/ http://www.javascriptkata.com/2009/09/30/how-to-write-a-singleton-class-in-javascript/#comments Wed, 30 Sep 2009 12:59:54 +0000 Dan http://www.javascriptkata.com/?p=166 wrote about it before but my old solution exposed the instance of the class so more than one instance could be created thus making it not completly a singleton class.]]> If I look at my stats, a lot of people are wondering how to write a singleton class. I already wrote about it before but my old solution exposed the instance of the class so more than one instance could be created thus making it not completly a singleton class.

Here’s the new solution using a private variable for the instance.

  1. function Cats() {
  2.   var names = [];
  3.  
  4.   this.singletonInstance = null;
  5.  
  6.   // Get the instance of the Cats class
  7.   // If there’s none, instanciate one
  8.   var getInstance = function() {
  9.     if (!this.singletonInstance) {
  10.       this.singletonInstance = createInstance();
  11.     }
  12.     return this.singletonInstance;
  13.   }
  14.  
  15.   // Create an instance of the Cats class
  16.   var createInstance = function() {
  17.     // Here, you return all public methods and variables
  18.     return {
  19.       add : function(name) {
  20.         names.push(name);
  21.         return this.names();
  22.       },
  23.       names : function() {
  24.         return names;
  25.       }
  26.     }
  27.   }
  28.  
  29.   return getInstance();
  30. }

How to use it

  1. function run() {
  2.   // Add a new cat
  3.   var cat1 = new Cats();
  4.   cat1.add("Mistigri");
  5.   jsKataEx.assert(cat1.names().length == 1, "cat1 contains 1 cat : " + cat1.names().toString());
  6.    
  7.   // Use another instance
  8.   var cat2 = new Cats();
  9.   jsKataEx.assert(cat2.names().length == 1, "cat2 contains Mistigri added in cat1 : " + cat2.names().toString());
  10.    
  11.   // Add another cat in the other instance
  12.   cat2.add("Felix");
  13.   jsKataEx.assert(cat2.names().length == 2, "cat2 contains Mistigri and Felix" + cat2.names().toString());
  14.   jsKataEx.assert(cat2.names().length == 2, "cat1 also contains Mistigri and Felix" + cat1.names().toString());
  15. }

Get the code on GitHub and see it live in action.

]]> http://www.javascriptkata.com/2009/09/30/how-to-write-a-singleton-class-in-javascript/feed/ 3 How to create an object with private variables and methods http://www.javascriptkata.com/2009/09/23/how-to-create-an-object-with-private-variables-and-methods/ http://www.javascriptkata.com/2009/09/23/how-to-create-an-object-with-private-variables-and-methods/#comments Wed, 23 Sep 2009 12:50:52 +0000 Dan http://www.javascriptkata.com/?p=128 In short, you can use private variables when you return another scope when declaring a class.

  1. function Cats() {
  2.   var nameList = []; // private var
  3.        
  4.   // This is where you define another scope!
  5.   return {
  6.     add:function(name) {
  7.       nameList.push(name);
  8.     }
  9.   }     
  10. }

How does it work?

The magic lies in creating a different scope at the end of the class definition that does not include private variables. Then, private members are available in this scope and not outside of it, thanks to the power of closures.

Differences between private and public

These two classes definition shows the difference between the a class where all members are public versus a class where some members are private.

This is a class where all members are public.

  1. function PublicCats() {
  2.   // This is the list of cat names
  3.   this.nameList = [];
  4.  
  5.   // This is a method that I would like to be private but can’t
  6.   // It returns the last cat of the list
  7.   this.lastCat = function() {
  8.     return this.nameList[this.nameList.length-1];
  9.   }
  10.  
  11.   // Return the list of names
  12.   this.names = function() {
  13.     return this.nameList;
  14.   }
  15.  
  16.   // Add a name to the list
  17.   this.add = function(name) {
  18.     this.nameList.push(name);
  19.    
  20.     // Return the last cat just added
  21.     return this.lastCat();
  22.   }  
  23. }

This is the corresponding class where some members are private.

  1. function PrivateCats() {
  2.   // This is the list of cat names
  3.   var nameList = [];
  4.  
  5.   // This is a private method
  6.   var lastCat = function() {
  7.     // Note : I don’t use "this" to access private variables
  8.     // thanks to the power of closures!
  9.     return nameList[nameList.length-1];
  10.   }
  11.  
  12.   // These are our public methods!
  13.   // This is where we create another scope to
  14.   // avoid external objects to use the private variables.
  15.   return {
  16.     add:function(name) {
  17.       // Note : once again, I don’t use "this"
  18.       // to access the private variables and methods
  19.       nameList.push(name);
  20.       return lastCat();
  21.     },
  22.     names:function() {
  23.       return nameList;
  24.     }
  25.   }  
  26. }

In the above code, line 15 makes all the difference between the two classes.

On GitHub

Get all the code on GitHub and see it live in action on my GitHub page.

]]> http://www.javascriptkata.com/2009/09/23/how-to-create-an-object-with-private-variables-and-methods/feed/ 10 How to use JSON (updated with example) http://www.javascriptkata.com/2009/09/16/how-to-use-json-updated-with-example/ http://www.javascriptkata.com/2009/09/16/how-to-use-json-updated-with-example/#comments Wed, 16 Sep 2009 15:14:48 +0000 Dan http://www.javascriptkata.com/?p=91 old post. A lot of things changed since it was written and the information in the old one is a bit outdated.]]> This post is an update from the old post. A lot of things changed since it was written and the information in the old one is a bit outdated.

First of all, you should never use an eval() when using JSON because of security reasons that I will talk about later in another post. [edit : jQuery uses eval() but there's a work-around that will be talked about in another post.]

JSON and jQuery

The simplest way to use JSON is though jQuery. I have been using for more than 2 years and I never was disappointed.

Let’s say I want to call Flickr search with JSON. It’s simple :

  1. $.getJSON(
  2.         "http://api.flickr.com/services/rest/?jsoncallback=?",
  3.         { method : "flickr.photos.search",
  4.                 api_key : "4ef2fe2affcdd6e13218f5ddd0e2500d",
  5.                 format : "json",
  6.                 tags : "landscape",
  7.         },
  8.         ajaxCallBack
  9. );
  10.  

The $.getJSON takes 3 parameters.

1. The URL
The URL of the remote call.

2. The parameters
The parameters to complete the call. On the documentation page about this Flickr method, you have a list of all the parameters you can use. For a JSON call on Flickr, you have to send the api_key and the format. I added the parameter tags to send me all photos that are tagged landscape.

3. The callback
Most API services now requires a callback, a method that will be called when the JSON is loaded. It is more secure and easier to work with. At the end of the first parameter (the URL), I added jsoncallback=? (flickr called this parameter jsoncallback but it could be named differently on other services). This is the jQuery-way of saying “When you finish loading the JSON, call the method specificied by the third argument”.

You may wonder how Flickr knows which function to use on callback. It’s because in jQuery, there’s a special case for that. In the URL, you can see that the jsoncallback is written like that jsoncallback=?. The ? is replaced by your own callback method (in my case, I called it ajaxCallback)

The callback method

The callback method I used looks like this :

  1. function ajaxCallBack(data) {
  2.         // Loop throught all photos and display them
  3.         // it uses the jquery.each method
  4.         // doc at http://docs.jquery.com/Utilities/jQuery.each
  5.         $.each(data.photos.photo, function(photoIdx, photo) {
  6.                 // Build the thumbnail url
  7.                 var thumb_url = ["http://farm", photo.farm, ".static.flickr.com/",
  8.                         photo.server, "/", photo.id, "_", photo.secret, "_t.jpg"].join("");
  9.                
  10.                 // Build the photo url
  11.                 var photo_url = ["http://www.flickr.com/photos/",
  12.                         photo.owner, "/", photo.id].join("")
  13.  
  14.                 // Build HTML
  15.                 $("body").append(
  16.                         $("<a>")
  17.                                 .attr("href", photo_url)
  18.                                 .attr("target", "_blank")
  19.                                 .append(
  20.                                         $("<img>").attr("src", thumb_url)
  21.                                 )
  22.                 )
  23.         });
  24. }
  25.  

If you know jQuery a little, it simply creates the HTML to show the thumbnails and a link to the photo.

Get the code

You can get the complete code for this example on GitHub and a working example.

]]> http://www.javascriptkata.com/2009/09/16/how-to-use-json-updated-with-example/feed/ 4 Easy loop for every element of an array http://www.javascriptkata.com/2009/05/12/easy-loop-for-every-element-of-an-array/ http://www.javascriptkata.com/2009/05/12/easy-loop-for-every-element-of-an-array/#comments Tue, 12 May 2009 15:24:21 +0000 Dan http://www.javascriptkata.com/?p=85 for loop : the extra work to loop though all elements of an array. Suppose I want to alert each element of an array, there are three ways of doing it.]]> There’s something bugging me with javascript for loop : the extra work to loop though all elements of an array. Suppose I want to alert each element of an array, there are three ways of doing it.

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

  1. var items = ["a", "b", "c"];
  2. for (var i = 0; i < items.length; i++) {
  3.   var item = items[i];
  4.   alert(item);
  5. }

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

Second, you loop with a for each.

  1. var items = ["a", "b", "c"];
  2. for (var i in items) {
  3.   var item = items[i];
  4.   alert(item)
  5. }

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.

  1. var items = ["a", "b", "c"];
  2. for (var i = 0, item; item = items[i]; i++) {
  3.   alert(item);
  4. }

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.

]]> http://www.javascriptkata.com/2009/05/12/easy-loop-for-every-element-of-an-array/feed/ 11 Be ahead of the trend, try CouchDB http://www.javascriptkata.com/2009/01/12/be-ahead-of-the-trend-try-couchdb/ http://www.javascriptkata.com/2009/01/12/be-ahead-of-the-trend-try-couchdb/#comments Mon, 12 Jan 2009 15:49:28 +0000 Dan http://www.javascriptkata.com/?p=79 I always loved and hated databases. When I was a younger programmer, I asked to switch to DB administrator and, thank God, they didn’t agree to let me mutate in a DBA. I ended up fired like 80% of the company (except the DBA). In fact, I wanted to be DBA because I thought I knew how to work with a DB better than them. The rest of my life proved me wrong. Nobody knows what they’re doing because relational databases are a mess.

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.

]]> http://www.javascriptkata.com/2009/01/12/be-ahead-of-the-trend-try-couchdb/feed/ 5 Cleanest way of executing javascript code on page load http://www.javascriptkata.com/2008/12/01/cleanest-way-of-executing-javascript-code-on-page-load/ http://www.javascriptkata.com/2008/12/01/cleanest-way-of-executing-javascript-code-on-page-load/#comments Mon, 01 Dec 2008 15:01:08 +0000 Dan http://www.javascriptkata.com/?p=69 Everytime that I work on a new project, I’m always unsure about which way to execute javascript on page load. These are the different techniques :

Your old buddy body.onload()

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

  1. <body onload="doSomething();"></body>

The document.ready function with jquery

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

  1. <body><script>$(document).ready()</script></body>

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

  1. $("ul#users").ready(function() {
  2.   loadUsersWithAjax();
  3. });

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 :

  1. $(document).ready(function() {
  2.   $("ul#users").each(function() {
  3.       loadUsersWithAjax();
  4.   });
  5. });

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?

]]> http://www.javascriptkata.com/2008/12/01/cleanest-way-of-executing-javascript-code-on-page-load/feed/ 21 JavascriptKata now ad free http://www.javascriptkata.com/2008/11/28/javascriptkata-now-ad-free/ http://www.javascriptkata.com/2008/11/28/javascriptkata-now-ad-free/#comments Fri, 28 Nov 2008 17:11:41 +0000 Dan http://www.javascriptkata.com/?p=68 [Update 2009-09-20 : I will try to bring back ads. I removed them because I was frustrated, I bring them back as an experience.]

JavascriptKata was created in the blog bubble. In a time when all you had to do was to create a blog, put ads on it and you were rich. It never was true. The ads on this blog gave me about 100$ in a year so I finally felt discouraged and left it for dead. Nevertheless, this blog as a good share of traffic and more subscribers in the feed than any blog that I’ve owned/I own/will own. In fact, I call it a blog but it’s not really a blog. I used wordpress and that’s the main reason why I’m calling it a blog.

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!

]]> http://www.javascriptkata.com/2008/11/28/javascriptkata-now-ad-free/feed/ 5 Load a page with javascript http://www.javascriptkata.com/2008/02/12/load-a-page-with-javascript/ http://www.javascriptkata.com/2008/02/12/load-a-page-with-javascript/#comments Tue, 12 Feb 2008 14:31:20 +0000 Dan http://www.javascriptkata.com/2008/02/12/load-a-page-with-javascript/ 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.

  1. var dayOfTheMonth = (new Date()).getDate();
  2. location.href="page" + dayOfTheMonth.toString() + ".html";

 

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

]]> http://www.javascriptkata.com/2008/02/12/load-a-page-with-javascript/feed/ 6 How to have jQuery and prototype.js in the same project http://www.javascriptkata.com/2008/01/28/how-to-have-jquery-and-prototypejs-in-the-same-project/ http://www.javascriptkata.com/2008/01/28/how-to-have-jquery-and-prototypejs-in-the-same-project/#comments Mon, 28 Jan 2008 11:02:41 +0000 Dan http://www.javascriptkata.com/2008/01/28/how-to-have-jquery-and-prototypejs-in-the-same-project/ 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

  1. <%= javascript_include_tag "prototype", "jquery" %>
  2. <script>$j = jQuery.noConflict();</script>

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…

]]> http://www.javascriptkata.com/2008/01/28/how-to-have-jquery-and-prototypejs-in-the-same-project/feed/ 4 New on Javascript Kata : the echo chamber http://www.javascriptkata.com/2008/01/08/new-on-javascript-kata-the-echo-chamber/ http://www.javascriptkata.com/2008/01/08/new-on-javascript-kata-the-echo-chamber/#comments Tue, 08 Jan 2008 22:55:55 +0000 Dan http://www.javascriptkata.com/2008/01/08/new-on-javascript-kata-the-echo-chamber/ 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?

]]> http://www.javascriptkata.com/2008/01/08/new-on-javascript-kata-the-echo-chamber/feed/ 3