Tagged: Javascript

jQuery Info Resource

I ran into this page, where you can test your jQuery selectors, thought of sharing with y’all.
http://codylindley.com/jqueryselectors/

And while we are talking about jQuery selectors, remember that not all selectors are made equal, some perform real good and some really slow!

Here is some links to good articles on selector performance,

Cheers!
Binu

Learning JavaScript again!

Its time to learn JavaScript again folks. If you are a web developer like me there is no escape, you were using it in the past, you are using it more today and chances are that you will be using it a lot tomorrow. Web is getting highly interactive, and everyone is focusing on delivering web based systems that are close to behaviour as desktop applications. I think it makes perfect sense, there were times in the past we use to push back on certain user requirements giving excuse of limitations of web (in terms of UI features). But look at how things have changed in the last few years. We have Flex, Flash, Silverlight and HTML5 (almost there) to deliver rich internet applications (RIA), great AJAX enabled JavaScript UI platform libraries, and in the server side, we have matured architectural patterns around SOA and RIA services. So if you look at all the available great UI platforms, there is one in common and that is JavaScript. Its the same JavaScript you used to do your element level validations in your ASP/HTML pages, but leveraged in great many ways along with CSS to deliver the perfect web experience.

So this brings me to the point of this post, to re-learn JavaScript, and we will learn from the best guru on this, Douglas Crockford.

Here is a series of videos from Yahoo (YUI Theater). Follow this sequence. Before you start with these, pick that old JavaScript book from your bookshelf and read throught it fast. Hey, it should be an easy read, after all you have programmed using JavaScript for many years!

Now start viewing this videos, since you are fresh from your reading, it will be easy to follow the video.

Douglas Crockford – JavaScript Programming Language Series, From YUI Theater

Part 1 of 4 (31 minutes)
Part 2 of 4 (31 minutes)
Part 3 of 4 (29 minutes)
Part 4 of 4 (20 minutes)

Douglas Crockford – The Theory of DOM, From YUI Theater

Part 1 of 3 (31 minutes)
Part 2 of 3 (21 minutes)
Part 3 of 3 (26 minutes)

Douglas Crockford – Advanced JavaScript, From YUI Theater

Part 1 of 3 (31 minutes)
Part 2 of 3 (25 minutes)
Part 3 of 3 (11 minutes)

Good Luck!

Useful Lint Programs for all Web UI developers

All Web UI developers have to deal with JavaScript and lots of it. And these days with many of us are using
JSON as a data exchange format, we are looking into massive JSON strings on a daily basis when developing/debugging. There are 2 Lint programs, JSONLint and JSLint that can help in making life easy for developers. Lint programs does a static code analysis and comes up with errors and warnings. It also beautifies your code (if it not already intended, formatte, etc) for better readability. This is very useful when you are grabbing this code block from a debug window or from firebug console and trying to make sense
of it.

Try it today 🙂
— JSON Lint here.
— JSLint here.

JSLint is a JavaScript “code quality” too. This means it does more than “Linting”, it actually inspects your
JavaScript code for quality points set by great Doug Crockford (creator of JSON). These can be configured thru many options that are available. Check out the options here.

While we are on this topic, another great tool is the JS Beautifier. I have found this of immense value when you are working with a “packed” or “minified” version of JavaScript (works only with code packed using Dean Edwards Packer). Plug it into the beautifier and voila, you have formatted and readable JavaScript.

Happy programming!

Cheers!

Ext JS anyone?

I am playing with Ext JS, a javascript framework that provides a great UI tool set and all things AJAX! I am interested in hearing from anyone who has build real world solutions using Ext JS, anyone?

Gettting ClientIDs of asp.net controls in an external javascript file

When maintaining external javascript files for our webpages the biggest hurdle we face is the getting clientID of our server side controls in the javascript file. Let me demonstrate a workwround for this that I usually adopt.
Step 1:
In the page load event create an array of json objects representing the clIentIDs of all the controls that we would be requiring to use in javascript functions. Store this in a javascript global variable using window::onload function.

private void SaveControlClientIDs()
{
       
    System.Text.StringBuilder ctlObj = new System.Text.StringBuilder();
    ctlObj.Append("[");
    ctlObj.Append("{""Id"":'" + ddlEmployee.ClientID & "',""Type"":'" + ddlEmployee.GetType().ToString() + "',""DefaultValue"":'0'},");
    ctlObj.Append("{""Id"":'" + txtName.ClientID & "',""Type"":'" + txtName.GetType().ToString() + "',""DefaultValue"":''},");
    ctlObj.Append("{""Id"":'" + txtEndDt.ClientID & "',""Type"":'" + txtEndDt.GetType().ToString() + "',""DefaultValue"":''}");
    ctlObj.Append("]");
    string bodyOnloadScript = "<script type='text/javascript'>function body_onload() { ctlIds=" + ctlObj.ToString() + ";}</script>";
    Page.ClientScript.RegisterStartupScript(this.GetType(), "onload", bodyOnloadScript);
  
}

Step 2:

In your javascript file use the following function to retrieve the clientID using the actual id of your control

var ctlIds; //this is the global variable which will store the json objects
function GetCtlClientId(id) {
    var arr = ctlIds;
    var res = ”;
    var i = 0;
    for (i = 0; i < arr.length; i++) {         if (arr[i].Id.indexOf(id) != -1) {             res = arr[i].Id;             break;         }     }     return res; } [/sourcecode] In .NET 4.0 the issue of ClientIDs has been addressed to an extent. Till you move to 4.0 hope this helps:-)

Javascript.Minnify()

These days developers are using various Ajax toolkits to create more user friendly and responsive web sites. No matter the which toolkit you use, be it Microsoft AJAX, AJAX Control Tool kit, YUI, scriptaculous, Google web toolkit, or JQuery, etc. what you cannot live without is Javascript. So more you make your web page Ajaxified, you end up writing more Javascript. This can lead to larger page size that needs to get downloaded to users web broweser when rendered.
Leading javascript tool libraries provide you with a small release file and a little larger debug file. You can do this for your web pages too…

It is a good practise in terms of managing your code to put all the javascript code into a *.js file and referencing the file from your web page. There are tools available now that will enable us to create a smaller js file by removing all the whitepsaces and making other space saving optimizations.

Here is couple of such tools I have used:

1) JSMIN – This is a very nice program to reduce the javascript file size developed by Douglas Crockford. You can download JSMIN from here. I like JSMIN better than any other similar programs of its simplicity and more over it fits my need.

JSMIN can be obtained as a DOS executable, or if you prefer you download code in C, C#, Java, Javascript and Perl. Click on
this link to get to all these. (Personaly I downloaded C# program and made my own executable). Note that JSMIN does not
obfuscate your code.

2) Packer – is a Javascript compressor and obfuscator developed by Dean Edwards. Various versions of packer can be downloaded
from here.

Hope next release of your web pages will be smaller in size..
Minnify and save band width 🙂

Cheers!