Javascript Kata » black belt http://www.javascriptkata.com Advanced katas for javascripters Tue, 15 Jun 2010 14:21:03 +0000 en hourly 1 http://wordpress.org/?v=3.0 How to de-anonymize your anonymous functions http://www.javascriptkata.com/2010/05/19/how-to-de-anonymize-your-anonymous-functions/ http://www.javascriptkata.com/2010/05/19/how-to-de-anonymize-your-anonymous-functions/#comments Wed, 19 May 2010 17:31:52 +0000 Dan http://www.javascriptkata.com/?p=246 named functions and they look a lot like "regular" functions (in fact, they are).]]> First of all, de-anonymized functions are called named functions and they look a lot like “regular” functions (in fact, they are).

Why should I de-anonymize?

For debugging. Instead of having a stack trace filled with ?() (representing an anonymous function), it is nicely printed and easier to follow.

For self-reference. Example, when you want an anonymous function to recall itself recursively, you would have to call arguments.callee. It’s odd and it’s deprecated anyway (people pointed to me that it’s not really deprecated but it throws an error in ECMAScript 5 strict).

Stack trace of anonymous functions…

If you run this in your firebug console (every javascripter should have firebug).

You get a stack trace that looks like this :
func()
func()
func()

… versus stack trace of named functions

You get a stack trace that looks like this :
f1()
f2()
f3()

As you can see, it’s a lot easier to debug and to understand who’s calling who.

Warning : There’s a bug in IE with named functions.

Recursive anonymous function

Let’s create a recursive anonymous function that counts to 10.

And let’s create it but using a named function.

Once again, the code is much clearer and it’s not using a deprecated element.

A note about closures to advanced javascripters

I just wanted to say that in the last example, you could have written this :

As you can see at line 4, I call the count function which is not the name of the function but the variable to which the function is assigned. It works, but it may not be the best thing to do. You can learn more about closure on that previous post and I’ll write more about it.

]]> http://www.javascriptkata.com/2010/05/19/how-to-de-anonymize-your-anonymous-functions/feed/ 6 An undo/redo library for your app http://www.javascriptkata.com/2010/04/26/an-undoredo-library-for-your-app/ http://www.javascriptkata.com/2010/04/26/an-undoredo-library-for-your-app/#comments Mon, 26 Apr 2010 20:26:00 +0000 Dan http://www.javascriptkata.com/?p=206 I wrote about undo before and I pushed it farther. What about an undo/redo system? I extended the v.01 of the undo and I now handle undo and redo in the same object.

Annoucing redo in jskata.undo

I made a new version of jskata.undo still hosted on GitHub. If you look closer, it is now part of a library called jskata that is not officially announced. My next post will talk about it in details.

Demo

Take a look at the demo. The javascript of the demo is available here. You can see the complete doc on GitHub.

How does it work?

Execute an action that you can undo/redo

Doing something requires calling execute with 2 functions as parameters : the do and the undo.

Undo and redo the last action

Very easy!

Events and properties

For the moment, jskata.undo has just one event : onChange.

There are 2 properties : canUndo() and canRedo().

]]> http://www.javascriptkata.com/2010/04/26/an-undoredo-library-for-your-app/feed/ 4 How to write a simple undo system for your app http://www.javascriptkata.com/2010/03/29/how-to-write-an-simple-undo-system-for-your-app/ http://www.javascriptkata.com/2010/03/29/how-to-write-an-simple-undo-system-for-your-app/#comments Mon, 29 Mar 2010 14:20:39 +0000 Dan http://www.javascriptkata.com/?p=188 I can offer undo to users of my application. ]]> I really like undos. If I could undo that that last beer… Unfortunately, I can’t. But, I can offer undo to users of my application.

When I thought about undo before, I thought about a complicated Rails plugin that would keep an anonymous ID linking to any table in the database with an “action” field that would contain the action to undo. Pretty complicated stuff for something as simple.

The javascript solution

One day while I was writing some javascript, the solution struck me : I could handle this completely with javascript. The basic idea is that whenever an action is completed, I can save its undo function in an array and call it whenever I need it.

Example, if I’m saving a user in a database with Ajax :

  1. I send the data to server to save a new user
  2. The server returns the ID of the new user
  3. I create a function with an ajax request that will send a delete of this user to the server
  4. I add the previous function to a stack of undo functions to be able to call it later

That, when I call that last function, it will undo that user creation without having to keep it in memory server-side.

Introducing jsKata.undo

I wrote a little something called jsKata.undo on GitHub that contains the logic describe earlier. It’s quite simple but it may grow over time. It has no requirement, not even jQuery. It’s very simple to use.

The complete doc is on GitHub.

1. Adding an action that can you can undo

I’ll use the “add a user” example with jQuery.

  1. $.post(
  2.   "http://yoursite.com/users/new", // The url to add a user
  3.   {name:"John Boucher"}, // The name of the user
  4.   function(newUser, textStatus, XMLHttpRequest) {
  5.     // This is called when the post is over
  6.     var newUserId = newUser.id;
  7.  
  8.     // We begin by creating a function to delete the user
  9.     var undoNewUser = function() {
  10.       $.post(
  11.         "http://yoursite.com/users/delete", // The url to delete a user
  12.         {id:newUserId} // The ID of the new user to delete
  13.       );
  14.     }
  15.  
  16.     // We add the undo function to the stack
  17.     jskataUndo.push(undoNewUser);
  18.   }
  19. );

2. Undo the last action you made

  1. jsKata.undo.undo();

3. Events

Each time there’s a change, an onChange event is called. To assign yours, simply write :

  1. jsKata.undo.onChange = function() {
  2.   // Show the undo button
  3.    $("#undoButton").show();
  4. }

There’s also an onEmpty event that is called when the stack of undoable actions is empty.

  1. jsKata.undo.onEmpty = function() {
  2.   // Hide the undo button
  3.    $("#undoButton").hide();
  4. }

Complete demo

There is a complete demo on GitHub as well as the HTML and Javascript code for it. Take a look!

]]> http://www.javascriptkata.com/2010/03/29/how-to-write-an-simple-undo-system-for-your-app/feed/ 9 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/ 6 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/ 11 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 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/ 5 Ask Dan : More on javascript threading http://www.javascriptkata.com/2007/12/06/ask-dan-more-on-javascript-threading/ http://www.javascriptkata.com/2007/12/06/ask-dan-more-on-javascript-threading/#comments Thu, 06 Dec 2007 14:05:20 +0000 Dan http://javascriptkata.timmyontime.com/?p=31 From time to time, I receive emails from desperate people who want help with their javascript problem. I also receive a lot of emails of people wanting to help me with my “manly problems”. It’s very nice from them to care about me and I take time to reply to each of them but I don’t have that kind of problem for the moment.

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.

I am experience trying to create a “cover page” that runs a ping to remote servers.In my code I am using setInterval() to run repeating pings (artificially quickly at the moment, ie 10 seconds rather than 1 min) and display the results to browser. I have built my own XMLHttpRequest module (mainly as a learning exercise) and I don’t believe it to be the source of my ills. I have read through your article and the behaviour of alert() and confirm() fits exactly with what I am seeing when I run the following code :[snippet]

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.

]]> http://www.javascriptkata.com/2007/12/06/ask-dan-more-on-javascript-threading/feed/ 7 Barcamp Montreal 3 and this site http://www.javascriptkata.com/2007/11/05/barcamp-montreal-3-and-this-site/ http://www.javascriptkata.com/2007/11/05/barcamp-montreal-3-and-this-site/#comments Mon, 05 Nov 2007 23:52:55 +0000 Dan http://javascriptkata.timmyontime.com/?p=54 Like most of you already knew, I’m working with Frank Lamontagne of Ruby Fleebie on a project called TimmyOnTime. We had the chance to present it at the last Barcamp Montreal and it went… really bad! If you want to know more about the whole adventure (and have a good laugh), click here to read the story written by Frank. (By the way, I used a good ol’ click here link just for the fun of it… I never did it before and frankly, I like it… almost…).

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!

]]> http://www.javascriptkata.com/2007/11/05/barcamp-montreal-3-and-this-site/feed/ 6 Ajax, javascript and threads : the final truth http://www.javascriptkata.com/2007/06/12/ajax-javascript-and-threads-the-final-truth/ http://www.javascriptkata.com/2007/06/12/ajax-javascript-and-threads-the-final-truth/#comments Tue, 12 Jun 2007 14:44:38 +0000 Dan http://javascriptkata.timmyontime.com/?p=47 Since I have written Ajax and javascript don’t use thread, one of my reader (BK) told me that I was wrong. Here’s the final truth.

What I said

If javascript runs some code that takes 5 seconds to execute and an ajax response arrives at 2 seconds, it will take 3 seconds before it will be executed (before the callback function is called).

Example. We have a f() function that is incredibly long to execute (5 seconds) because it has a lot of code.

1. function f() is started
2. f() makes an ajax call
3. f() is still executing since 2 seconds
4. the response from the server arrives at the third second
5. f() is still in execution for 3 seconds
6. the callback function for ajax is called

What he said

Briefly, say I have CallPage1, CallPage2 and DoSomething. Both CallPage are async.

CallPage1 called
CallPage2 called
DoSomething called
CallPage1 Returned (DoSomething is now paused)
DoSomething ended
CallPage2 Returned

The DoSomething() function is paused when the ajax response arrives. The callback for the ajax is called and only then, DoSomething() resumes its execution.

That didn’t make sense to me. Javascript is really sequential and it would not do that kind of complex stuff. But, I had to be sure.

The test

I made a simple page to test it all.

1. Loop from 0 to X (user defined). X should be a big number.
2. The first loop, it makes an ajax request
3. The loops will finish someday
4. The callback for the ajax will be called someday

I didn’t know what to expect : will the callback function be called before or after the loop?

The result

I ran the script a lot of times with a lot of numbers and it was always the same thing : the callback function waits for the loop to be over before it is executed. It means that the current function is not paused.

Now it’s your turn

I want you to take a look at the script (complete php code) (I know it’s poorly written, it’s just a test) and tell me if I’m wrong or if I’m right.

Thanks to you all!

]]> http://www.javascriptkata.com/2007/06/12/ajax-javascript-and-threads-the-final-truth/feed/ 28