Wednesday, January 25, 2012

Working with the JavaScript “this” Keyword

Working with the JavaScript “this” Keyword:

JavaScript's "this" keyword can be a bit tricky to work with depending on the context in which it's used. When it's used with patterns such as the Prototype or Revealing Prototype patterns working with "this" can be challenging in some cases. Unlike languages such as C# or Java, "this" can change context. For example, if a Calculator object named calc calls an add() function then "this" represents the Calculator object which means you can easily access any variables defined in the object such as a variable named tax by simply using this.tax.


calc.add(2, 2); //Using "this" inside of the add() function gets you to the calc object



 



However, if add() makes a call to another function then "this" changes context and no longer represents the Calculator object. In fact, "this" will change to the window object which means you can no longer access variables defined in the Calculator object such as tax. That presents a bit of a problem that’s especially challenging if you’ve never dealt with it before.



There are several ways to handle this challenge. First, you can pass "this" as a parameter to other functions. An example of passing "this" between functions is shown next. If a Calculator object calls a clearNumbers() function then you can easily access the Calculator object's constructor variables within the function. However, once clearNumbers() calls other functions such as setVal() or setEquation(), "this" changes context. To account for the change, the code passes "this" as a parameter to each of the functions and they then use it like normal. Although this type of code works, it pollutes your function parameters in some cases and becomes a little messy to work with (at least in my opinion).



 



var Calculator = function (eq) {
//state goes here
this.eqCtl = document.getElementById(eq);
this.lastNumber;
this.equalsPressed;
this.operatorSet;
this.tax;
};

Calculator.prototype = function () {
//private members
var add = function (x, y) {
this.eqCtl.innerHTML = x + y + this.tax;
},

subtract = function (x, y) {
this.eqCtl.innerHTML = x – y + this.tax;
},

setVal = function (val, thisObj) {
thisObj.currNumberCtl.innerHTML = val;
},

setEquation = function (val, thisObj) {
thisObj.eqCtl.innerHTML = val;
},

//Other functions omitted for brevity

clearNumbers = function () {
this.lastNumber = null;
this.equalsPressed = this.operatorSet = false;

//Pass the Calculator object that called clearNumbers()
//to other functions as a parameter

setVal('0', this);
setEquation('', this);

};

//public members
return {
add: add,
subtract: subtract,
clearNumbers: clearNumbers
};
} ();




Another technique that can be used involves JavaScript's call() function. This function can be used to invoke functions and set the context of "this" while the call is being made. For example, if you want to call a function named setVal() and preserve the current value of "this" as the call is made then you can do the following:



 



setVal.call(this, 'yourParameterValue');




The current value of "this" will be passed along automatically to the setVal() function and it can safely use this.tax in the case of a Calculator object.



The following code uses the call() function to update the code shown earlier. The clearNumbers() function uses JavaScript's call() function to invoke the setVal() and setEquation() functions and preserve the current value of "this" in the process. Notice that the setVal() and setEquation() functions no longer need the extra parameter as the functions shown earlier did and can simply use "this" to access Calculator object variables defined in the object's constructor. This simplifies the call by eliminating the need for the extra parameter and makes the code a lot cleaner.



 



var Calculator = function (eq) {
//state goes here
this.eqCtl = document.getElementById(eq);
this.lastNumber;
this.equalsPressed;
this.operatorSet;
this.tax;
};

Calculator.prototype = function () {
//private members
var add = function (x, y) {
this.eqCtl.innerHTML = x + y + this.tax;
},

subtract = function (x, y) {
this.eqCtl.innerHTML = x – y + this.tax;
},

setVal = function (val) {
this.currNumberCtl.innerHTML = val;
},

setEquation = function (val) {
this.eqCtl.innerHTML = val;
},

//Other functions omitted for brevity

clearNumbers = function () {
this.lastNumber = null;
this.equalsPressed = this.operatorSet = false;



//Set context of "this" to the Calculator object that called clearNumbers()

setVal.call(this, '0');
setEquation.call(this, '');

};

//public members
return {
add: add,
subtract: subtract,
clearNumbers: clearNumbers
};
} ();




Another example of where “this” gets tricky is inside of jQuery event handlers. For example, assume that an init() function is called that adds a click event to DOM elements. What if you want to get to a value of “this” representing the container Calculator object while inside of the click event handler function? The context of “this” changes to the anchor tag making it challenging. Two potential options that can be used are shown next.



The first option is to store the value of “this” as a variable outside of the click event handler function. By doing this a closure is created and you can still access the original value of “this” when the event fires:



 



Calculator.prototype = {
//private members
init: function() {
//Option 1 for working with "this"
var calcObject = this;
$('a').click(function () {
//Can't simply use this or $(this)
//since "this" represents the anchor now
//calcObject will represent the Calculator object
calcObject.highlight($(this));
});
},

highlight: function(anchor) {
anchor.toggleClass('highlight');
}
};






Another option is to use an overloaded version of various jQuery event handlers such as on() to pass “this” and make it accessible through the event object:




 



Calculator.prototype = {
//private members
init: function() {
//Option 2 for working with "this"
//Pass "this" into the on() call
$('a').on('click', { calcObject: this }, function (event) {
//Access the original value of "this"
//through the event object's data property
event.data.calcObject.highlight($(this));
});
},

highlight: function(anchor) {
anchor.toggleClass('highlight');
}
};




Notice that “this” is assigned to an object literal property named calcObject in the on() parameters. Once the click event fires the event object passed to the callback function can be used to get to the data property which exposes the calcObject value that was passed in.



Although working with JavaScript’s “this” keyword can be challenging in some scenarios, there are several different techniques that can be used to make it easier to work with. Have any other techniques you like to use? Feel free to leave a comment and share your technique with everyone.



 



 



 



Videos on JavaScript and jQuery




If you're interested in additional information about structuring JavaScript code check out my Structuring JavaScript Code course created for PluralSight. Here's a sample from the course covering closures.





Demo - Working with Closures in JavaScript







 



A sample video from the jQuery programming course that covers using the each() function is shown next:




Demo – Using jQuery’s each() Function












Monday, January 23, 2012

Learn to Code in 2012 with Free Weekly Programming Lessons from Codecademy [Programming]

Learn to Code in 2012 with Free Weekly Programming Lessons from Codecademy [Programming]:
If learning to code is one of your goals or New Year's resolutions, then Code Year is a program for you. The initiative, provided by previously mentioned webapp Codecademy will email you free interactive programming lessons each week. More »









Wednesday, January 11, 2012

Introduction to HTML5 Web Workers: the JavaScript Multi-threading Approach

Introduction to HTML5 Web Workers: the JavaScript Multi-threading Approach:

HTML5 applications are obviously written using JavaScript. But compared to other kinds of development environments (like native ones), JavaScript historically suffers from an important limitation: all its execution process remains inside a unique thread.

Friday, January 6, 2012

Using jQuery to directly call ASP.NET AJAX page methods

Using jQuery to directly call ASP.NET AJAX page methods:

When it comes to lightweight client-side communication, I’ve noticed that many of you prefer ASP.NET AJAX’s page methods to full ASMX web services. In fact, page methods came up in the very first comment on my article about using jQuery to consume ASMX web services.


Given their popularity, I’d like to give them their due attention. As a result of Justin’s question in those comments, I discovered that you can call page methods via jQuery. In fact, it turns out that you can even do it without involving the ScriptManager at all.


In this post, I will clarify exactly what is and isn’t necessary in order to use page methods. Then, I’ll show you how to use jQuery to call a page method without using the ScriptManager.


Creating a page method for testing purposes.


Writing a page method is easy. They must be declared as static, and they must be decorated with the [WebMethod] attribute. Beyond that, ASP.NET AJAX takes care of the rest on the server side.


This will be our page method for the example:



public partial class _Default : Page 
{
[WebMethod]
public static string GetDate()
{
return DateTime.Now.ToString();
}
}


What about the ScriptManager and EnablePageMethods?


Traditionally, one of your first steps when utilizing page methods is to set the ScriptManager’s EnablePageMethods property to true.


Luckily, that property is a bit of a misnomer. It doesn’t enable page methods at all, but simply generates an inline JavaScript proxy for all of the appropriate methods in your page’s code-behind.


For example, if a ScriptManager is added to the above example’s corresponding Default.aspx and its EnablePageMethods property is set to true, this JavaScript will be injected into the page:



var PageMethods = function() {
PageMethods.initializeBase(this);
this._timeout = 0;
this._userContext = null;
this._succeeded = null;
this._failed = null;
}
 
PageMethods.prototype = {
_get_path:function() {
var p = this.get_path();
if (p) return p;
else return PageMethods._staticInstance.get_path();},
GetDate:function(succeededCallback, failedCallback, userContext) {
return this._invoke(this._get_path(), 'GetDate',false,{},
succeededCallback,failedCallback,userContext); }}
PageMethods.registerClass('PageMethods',Sys.Net.WebServiceProxy);
PageMethods._staticInstance = new PageMethods();
 
// Generic initialization code omitted for brevity.
 
PageMethods.set_path("/jQuery-Page-Method/Default.aspx");
PageMethods.GetDate = function(onSuccess,onFailed,userContext) {
PageMethods._staticInstance.GetDate(onSuccess,onFailed,userContext);
}


Don’t worry if you don’t understand this code. You don’t need to understand how it works. Just understand that this JavaScript proxy is what allows you to call page methods via the PageMethods.MethodName syntax.


The important takeaway here is that the PageMethods proxy object boils down to a fancy wrapper for a regular ASP.NET service call.


Calling the page method with jQuery instead.


Knowing that a page method is consumed in the same way as a web service, consuming it with jQuery isn’t difficult. For more detailed information, see my previous article about making jQuery work with ASP.NET AJAX’s JSON serialized web services.


Using the jQuery.ajax method, this is all there is to it:



$.ajax({
type: "POST",
url: "PageName.aspx/MethodName",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
// Do something interesting here.
}
});


Putting it all together.


Corresponding to the example page method above, here’s our Default.aspx:



<html>
<head>
<title>Calling a page method with jQuery</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="Default.js"></script>
</head>
<body>
<div id="Result">Click here for the time.</div>
</body>
</html>


As you can see, there’s no ScriptManager required, much less EnablePageMethods.


As referenced in Default.aspx, this is Default.js:



$(document).ready(function() {
// Add the page method call as an onclick handler for the div.
$("#Result").click(function() {
$.ajax({
type: "POST",
url: "Default.aspx/GetDate",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
// Replace the div's content with the page method's return.
$("#Result").text(msg.d);
}
});
});
});


The end result is that when our result div is clicked, jQuery makes an AJAX call to the GetDate page method and replaces the div’s text with its result.


Conclusion


Page methods are much more openly accessible than it may seem at first. The relative unimportance of EnablePageMethods is a nice surprise.


To demonstrate the mechanism with minimal complications, this example has purposely been a minimal one. If you’d like to see a real-world example, take a look at Moses’ great example of using this technique to implement a master-detail drill down in a GridView.


If you’re already using the ScriptManager for other purposes, there’s no harm in using its JavaScript proxy to call your page methods. However, if you aren’t using a ScriptManager or have already included jQuery on your page, I think it makes sense to use the more efficient jQuery method.


###



Originally posted at Encosia.com. If you're reading this on another site, come on over and take a look at the real thing.


Using jQuery to directly call ASP.NET AJAX page methods




Wednesday, January 4, 2012

35+ Excellent jQuery Animation Techniques and Tutorials

35+ Excellent jQuery Animation Techniques and Tutorials:

There are some jQuery tutorials on animation which explain the idea of hiding and displaying elements. Those who are familiar with jQuery know how it helps us in creating jQuery animation.