Javascript | Kevin Chisholm - Blog

Sep172012 by dcmNo Comments

Harnessing the Power and Simplicity of jQuery.append() and jQuery.prepend()

I’m a big believer in making sure that you understand what is going on under the hood when you use jQuery. But there are times when it just makes sense to leverage jQuery; otherwise you would literally wind up just writing your own library.

One of the many such cases is when it comes to creating elements and then injecting them into the DOM. So let’s jump right into a few examples which will make it easier to highlight these features.

First, here is the markup we will be working with for all of the examples:

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>HTML5 Template</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    </head> 
    <body> 
        <div id="foo"></div>
    </body> 
</html>

<!DOCTYPE html>

<html>

<head>

<title>HTML5 Template</title>

</head>

<body>

</body>

</html>

Native JavaScript

Example # 1:

var foo = document.getElementById('foo');

var txtEl = document.createTextNode("hello");

foo.appendChild(txtEl);

var foo = document.getElementById('foo');

var txtEl = document.createTextNode("hello");

foo.appendChild(txtEl);

Here is the JsFiddle link for Example # 1: http://jsfiddle.net/pvwP4/

When it comes to injecting new elements into the DOM, these methods virtually eliminate the verbose syntax of Native JavaScript

In Example # 1, I wanted to quickly review the absolute minimum native JavaScript needed to append text to an element in the page. Needless to say, if you want to accomplish anything useful, such as appending an unordered list, or complex markup that involves nested elements or images, etc., then you will wind up writing a bit of code. That’s just the state of native JavaScript today.

I tend to use jQuery as little as possible, mainly as an exercise in keeping my native JS skills sharp. But when it comes to creating and appending elements, jQuery.append() and jQuery.prepend() are hard to beat. It just saves so much time.

jQuery.append()

Example # 2:

$("#foo").append("hello");

1	$("#foo").append("hello");

Here is the JsFiddle link for Example # 2: http://jsfiddle.net/tWSW8/

So, in Example # 2, our three lines of JavaScript have been reduced to one line of jQuery. Nice.

Example # 3:

var str= '';
var UL = $("<ul></ul>");

for (var i = 0; i <= 10; i++){
str += '<li>' + i + '</li>'; 
}

UL.append(str);

$("#foo").append(UL);

var str= '';

var UL = $("<ul></ul>");

for (var i = 0; i <= 10; i++){

str += '<li>' + i + '</li>';

}

UL.append(str);

$("#foo").append(UL);

Here is the JsFiddle link for Example # 3: http://jsfiddle.net/9pHQ2/

And here in Example # 3, we get into the fun stuff. First, one of the absolute joys of jQuery: the ability to create a DOM element by simply passing a set of opening and closing HTML tags to the $() method. Here I pass in an opening and closing DIV tag, and that’s it; we now have a reference to a new element that, while not yet in the DOM, is in memory and fully available to us for whatever we need. We then use a for loop to create LI elements using string concatenation.

Example # 4:

var str= '';
var UL = $("<ul></ul>");

for (var i = 0; i <= 10; i++){
    var LI = $("<li></li>");
    LI.append(i);
    UL.append(LI);
}

$("#foo").append(UL);

var str= '';

var UL = $("<ul></ul>");

for (var i = 0; i <= 10; i++){

var LI = $("<li></li>");

LI.append(i);

UL.append(LI);

}

$("#foo").append(UL);

Here is the JsFiddle link for Example # 4: http://jsfiddle.net/mExAw/ In Example # 4, we start to put jQuery.append() to work. So inside of a for loop, we dynamically create list items, and append them to an unordered list. In order to keep things simple, we just use the value of the counter as the text. A more real-world example would be consuming JSON, and for each item in that JSON, creating the markup we need for the page.

Example # 5:

var str= '';
var UL = $("<ul></ul>");

for (var i = 0; i <= 10; i++){
    var LI = $("<li></li>");
    LI.append(i);
    LI.appendTo(UL);
}

$("#foo").append(UL);

var str= '';

var UL = $("<ul></ul>");

for (var i = 0; i <= 10; i++){

var LI = $("<li></li>");

LI.append(i);

LI.appendTo(UL);

}

$("#foo").append(UL);

Here is the JsFiddle link for Example # 5: http://jsfiddle.net/JMy2J/

So now, in Example # 5, we turn things around by using the jQuery.appendTo() method. It could not possibly be simpler. Instead of UL.append(LI), we just say: LI.appendTo(UL). In other words, first we said: “…to that UL, append this LI”, and now we are saying: “…append this LI to that UL”.

jQuery.prepend()

Example # 6:

var str= '';
var UL = $("<ul></ul>");

for (var i = 1; i <= 5; i++){
    var LI = $("<li></li>");
    LI.append(i);
    LI.appendTo(UL);
}

for (var i = 6; i <= 10; i++){
    var LI = $("<li></li>");
    LI.append(i);
    UL.prepend(LI);
}

$("#foo").append(UL);

var str= '';

var UL = $("<ul></ul>");

for (var i = 1; i <= 5; i++){

var LI = $("<li></li>");

LI.append(i);

LI.appendTo(UL);

}

for (var i = 6; i <= 10; i++){

var LI = $("<li></li>");

LI.append(i);

UL.prepend(LI);

}

$("#foo").append(UL);

Here is the JsFiddle link for Example # 6: http://jsfiddle.net/D3B7G/

In Example # 6, we demonstrate the jQuery.prepend() method. There certainly is no mystery to this: it provides the opposite functionality of jQuery.append(). We create an unordered list, just as we did in the previous examples, but then we create another set of LI elements, and prepend them to the UL. I specifically counted down from 10, so that it would be obvious in the example that we have used jQuery’s prepend() method, and not append().

Example # 7:

var str= '';
var UL = $("<ul></ul>");

for (var i = 1; i <= 5; i++){
    var LI = $("<li></li>");
    LI.append(i);
    LI.appendTo(UL);
}

for (var i = 6; i <= 10; i++){
    var LI = $("<li></li>");
    LI.append(i);
    LI.prependTo(UL);
}

$("#foo").append(UL);

var str= '';

var UL = $("<ul></ul>");

for (var i = 1; i <= 5; i++){

var LI = $("<li></li>");

LI.append(i);

LI.appendTo(UL);

}

for (var i = 6; i <= 10; i++){

var LI = $("<li></li>");

LI.append(i);

LI.prependTo(UL);

}

$("#foo").append(UL);

Here is the JsFiddle link for Example # 7: http://jsfiddle.net/HqKv7/

Example # 7 is virtually the same as Example # 6, except we use jQuery.prependTo(), instead of jQuery.prepend().

Summary

Although this post is focused on jQuery.append() and jQuery.prepend(), we’ve also seen how easy it is to create elements with the $() function. While it is always good to make sure you understand what jQuery is doing and that you can write native JavaScript to accomplish your tasks, jQuery just makes perfect sense in many situations. As you can see, the main reason is that it abstracts away a lot of the time-intensive tedium of cross-browser compatibility.

Helpful Links for jQuery.append() and jQuery.prepend()

jQuery.append()

http://api.jquery.com/append/

http://www.w3schools.com/jquery/html_append.asp

jQuery.prepend()

http://api.jquery.com/prepend/

http://www.w3schools.com/jquery/html_prepend.asp

Sep102012 by dcm2 Comments

Making Your JavaScript Code Easier to Understand: Object Literals

JavaScript

When it comes to organizing your object literals, there are multiple approaches you can take

Object Literals are a very useful feature of JavaScript. They allow you to easily build structures of data or functionality (or both mixed together), without too much fuss and drama. The syntax is simple and they make it easy to name-space your code. But, when your object literals start to grow in size, they can become a bit difficult to manage. And, it can sometimes make your code harder to follow.

In the next few examples, I will cover a couple of alternate ways to organize your JavaScript Object Literals. This can make your code easier to manage and understand.
Example # 1

var mathFuncs = {
	add: function(a,b){
	return a + b;
     },
	subtract: function(a,b){
		return a - b;
     },
	multiply: function(a,b){
		return a * b;
     }
}

var mathFuncs = {

add: function(a,b){

return a + b;

subtract: function(a,b){

return a - b;

multiply: function(a,b){

return a * b;

}

In Example # 1, we have an object literal that has been assigned to the variable “mathFuncs”. This object has three members: “add”, “subtract” and “multiply”. Each is a function. This is not too bad, but what if each function was tens or even hundreds of lines of code? The entire “mathFuncs” object itself would grow to become thousands of lines long. This can become unwieldy. Also, if while making edits, one semicolon gets knocked out of place, the entire object is likely to become defective, which will pretty much kill the script.

Example # 2

mathFuncs = {};

mathFuncs.add = function(a,b){
	return a + b;
};

mathFuncs.subtract = function(a,b){
		return a - b;
};

mathFuncs.multiply = function(a,b){
		return a * b;
}

mathFuncs = {};

mathFuncs.add = function(a,b){

return a + b;

};

mathFuncs.subtract = function(a,b){

return a - b;

};

mathFuncs.multiply = function(a,b){

return a * b;

}

In Example # 2, “mathFuncs” is initially one line of code: an empty object. We then extend the object by adding more properties. In this case, the three properties we add are “add”, “subtract” and “multiply”. Functionally, there is no difference between this approach and Example # 2. These anonymous functions will perform no differently. What is different is that the code is a little bit easier to follow. First you see that “mathFuncs” is an empty object, and then we add properties to it. These properties are all functions, so they should be referred to as “methods”. Also, if you have a bug in one of the anonymous functions, it is less likely to break the entire script, and could be easier to track down.

Since these functions are very small, there is yet another level of optimization that we can apply:

Example # 3

mathFuncs = {};

mathFuncs.add = function(a,b){return a + b};

mathFuncs.subtract = function(a,b){	return a - b};

mathFuncs.multiply = function(a,b){return a * b};

mathFuncs.bigFunc1 = function(){
	//this is a much bigger function
	//with multiple lines of code
	//so let’s put it at the bottom
};

mathFuncs.bigFunc2 = function(){
	//this is a much bigger function
	//with multiple lines of code
	//so let’s put it at the bottom

};

mathFuncs = {};

mathFuncs.add = function(a,b){return a + b};

mathFuncs.subtract = function(a,b){ return a - b};

mathFuncs.multiply = function(a,b){return a * b};

mathFuncs.bigFunc1 = function(){

//this is a much bigger function

//with multiple lines of code

//so let’s put it at the bottom

};

mathFuncs.bigFunc2 = function(){

//this is a much bigger function

//with multiple lines of code

//so let’s put it at the bottom

};

In Example # 3 we tightened up the first three functions because there is so little going on in them, so it’s no harm to make them all one line each. Again, it’s just easier for someone else to quickly read and understand. We added two new properties, both anonymous functions as well. Since these are bigger functions (let’s pretend they are each 50+ lines of code), we put them last so that they are a bit out of the way, and we only have to see all that implementation code if we care to.

This is all a matter of preference. From time to time, I think that not everyone realizes that there are options when it comes to object literals and how you choose to write them out. The approach taken in Example # 1 is fine, especially when the objects are small. But when you have many properties in your object, and those properties are anonymous functions that contain tens or hundreds of lines of code, it can make your logic hard for someone else to follow.

Summary

There are many ways to skin a cat, and as many ways to organize your JavaScript code. The purpose of this post was to offer a few suggestions that can make your object literals a little bit easier to read, especially for someone else who, in the future, might have to read, understand and then make changes to your code.

Sep32012 by dcmNo Comments

JavaScript Closures – The Absolute Basics: Getters and Setters

JavaScript

The next step in mastering JavaScript closures is being able to “get” or “set” a private variable.

In Part I of this series: JavaScript Closures – The Absolute Basics, I discussed wrapping one function with another, which produces a closure. When that returned function is assigned to a variable, as long as that variable is alive, it (a function) has access to the context of the function that wraps it. This means that the outer (or “wrapping”) function can contain a private member, but the wrapped function has access to it. In that post, the example code consisted of a function that returned the private member.

Let’s take this one step further: we want to be able to “get” and “set” that private member in real time. Consider the following code:

Example # 1

var drink = "wine";
var foo = function(){
   var drink = "beer";

   return {
       getDrink: function(){return drink},
       setDrink: function(drnk){drink = drnk; return drink;}
   };
};

var bar = foo()

console.log( drink );  //wine
console.log( bar.getDrink() ); //beer
console.log( bar.setDrink("juice") );  //juice

var drink = "wine";

var foo = function(){

var drink = "beer";

return {

getDrink: function(){return drink},

setDrink: function(drnk){drink = drnk; return drink;}

};

var bar = foo()

console.log( drink ); //wine

console.log( bar.getDrink() ); //beer

console.log( bar.setDrink("juice") ); //juice

Here is the JsFiddle link: http://jsfiddle.net/a6LBf/

In Example # 1, we first create a global variable named “drink” that is set equal to “wine”. Our reason for doing this will become apparent in a moment. Next, we have a variable named “foo”, which is set equal to an anonymous function. Here is where the “closure” stuff comes in: That anonymous function (i.e. “foo”) returns an object literal. That object literal contains two properties: “getDrink” and “seDrink”. Both are anonymous functions.

After the declaration of the anonymous function “foo”, we create a variable named “bar” that is equal to the return value of “foo” (i.e. we execute “foo”, and set the variable “bar” equal to that). Because “foo” returns an object literal, it is almost as if we simply did this:

var bar = {
       getDrink: function(){return drink},
       setDrink: function(drnk){drink = drnk; return drink;}
   };

var bar = {

getDrink: function(){return drink},

setDrink: function(drnk){drink = drnk; return drink;}

};

But that does not completely represent what is going on here. Although “bar” is, in fact, equal to an object literal that has two anonymous functions as members, that object literal was returned by a function (and that is a critical detail). Because that object literal was returned by a function, the two anonymous functions that are members of the object literal have access to the function that returned them. Because they will execute in the context of “foo”, they have access to the private scope of “foo”.

Ok, so what does this all mean?

Remember when we created a global variable named “drink”, and set it equal to “wine”? Well, in Example # 1, when we say: “console.log( drink )”, and the output is “wine”, that is because in the global context, “drink” equals “wine”. But there is another variable named “drink” in play. That variable is in the private scope of “foo” and it is set equal to “beer”.

Hang in there, we are getting to the good stuff now…

In Example # 1, when we say: “console.log( bar.getDrink() )” and the output is “beer”, that is because “getDrink()” has access to the private scope of “foo”, and in the private scope of “foo”, “drink” is equal to “beer”. Next, when we say: “console.log( bar.setDrink(“juice”) )”, we are mutating (i.e. changing) the value of the variable “drink” that exists in the private context of “foo”. This is because:

“bar” was set equal to the value of whatever “foo” returned
“foo” returned an object literal
The object literal that “foo” returned contains a member: “setDrink()”
“setDrink()” has access to the variable “drink” which is in the private scope of “foo”
We change that private variable “drink” to “juice” using “bar.setDrink()”

If you run the jsfiddle link for Example # 1, you will see this all in action (make sure you have your JavaScript console open). Once the code has run, type the following in your JavaScript console: “console.log( bar.getDrink() )” the return value will be “juice”.

Summary

There is no such thing as a wasted moment when it comes to understanding closures in JavaScript. This is a powerful feature of the language. In this post, we discussed getting and setting the value of a variable that exists in the private scope of a function that returned an object literal. Stay tuned for more to come on this topic which does, at times, seem complex, but is more than worth the effort, and is an important tool in your JavaScript belt.

Aug272012 by dcm3 Comments

Understanding Context in JavaScript – Object Literals

JavaScript

Why is the word “this” so important in JavaScript?

In the post: “Understanding Scope in JavaScript,” I covered the basics of how scope works when dealing with functions. Sometimes the words “scope” and “context” are used interchangeably, which only leads to confusion because they are not the same thing.

In JavaScript, “context” refers to an object. Within an object, the keyword “this” refers to that object (i.e. “self”), and provides an interface to the properties and methods that are members of that object. When a function is executed, the keyword “this” refers to the object that the function is executed in.

Here are a few scenarios:

When a function executes in the global context, “this” refers to the global, or “window” object
When a function is a method of an Object, “this” refers to that object (unless it is manually executed in the context of a different object)
When a function executes inside of another function (no matter how deeply nested), “this” refers to the object whose context within which it is executed
When you instantiate a constructor function, inside of the instance object, “this” refers to the instance object

So, as you can see, “this” can easily give you a headache. But hang in there; we are getting to the good stuff now.

In a nutshell, in Object-literals, you don’t have local variables; you have properties of the object. So, where inside of the function foo() I might say “var drink = ‘beer’; “, for an object literal called “bar”, I would say “bar.dink = ‘beer’. “ The difference is that “beer” is a property of “bar”, whereas when a function is executing, a local variable is defined by the “var” keyword and cannot be seen by anyone or anything outside of the function.

Example # 1

drink = 'wine';

var foo = {
    drink: "beer",
    getDrink: function(){
        return drink;
    }    
};

console.log( foo.getDrink() ); // wine

drink = 'wine';

var foo = {

drink: "beer",

getDrink: function(){

return drink;

}

};

console.log( foo.getDrink() ); // wine

Here is the jsFiddle.net link for Example # 1: http://jsfiddle.net/Q9RJv/

In Example # 1, we first create a global variable named “drink”, and set it equal to “wine”. We’ll come back to that in a minute.

Next, we create an Object Literal named “foo”, with a property “drink” that is equal to “beer”. There is also a method that simply returns “drink”. But why does it return “wine”, and not “beer”? This is because in the object “foo”, “drink” is a property of foo, not a variable. Inside of functions, when reference is made to a variable, the JavaScript engine searches the scope chain and returns the first match it finds.

Although this function executes in the context of “foo”, “foo” does not have a variable named “drink”. It has a property named “drink”, but not a variable. So the JavaScript engine searches the next level of the scope chain. The next level of the scope chain is the global object, which contains a variable named “drink”, so the value of that variable (“wine”), is returned.

But wait a minute Kevin, how can we make reference to the property “drink” that is in the context of the object “foo”?

I’m glad you asked.

Example # 2

var drink = 'wine';

var foo = {
    drink: "beer",
    getDrink: function(){
        return this.drink; // 'this' refers to the object "foo"
    }    
};

console.log( foo.getDrink() ); // beer

var drink = 'wine';

var foo = {

drink: "beer",

getDrink: function(){

return this.drink; // 'this' refers to the object "foo"

}

};

console.log( foo.getDrink() ); // beer

Here is the jsFiddle.net link for Example # 2: http://jsfiddle.net/HGM93/

In Example # 2, the only change we have made is that in the anonymous function that is assigned to “getDrink”, we return “this.drink” instead of “drink”

This is an important detail. When a function executes in the context of an object , the keyword “this” refers to that object. You can access any of the properties of the object by using the “this” keyword, add new ones (e.g. this.color = “blue”), and change existing ones (e.g. this.drink = “juice).

Using Dot Notation to Create a JavaScript Object Literal

Example # 3

var drink = 'wine';

var foo = {};

foo.drink = "beer";

foo.getDrink = function(){
        return this.drink; // 'this' refers to the object "foo"
    };

console.log( foo.getDrink() ); // beer

var drink = 'wine';

var foo = {};

foo.drink = "beer";

foo.getDrink = function(){

return this.drink; // 'this' refers to the object "foo"

};

console.log( foo.getDrink() ); // beer

Here is the jsFiddle.net link for Example # 3: http://jsfiddle.net/ZA77k/

In Example # 3, we have the exact same functionality as Example # 2. From the JavaScript engine’s perspective, we have achieved the same goal, and the console output is exactly the same.

The difference is how we organized our code. In Example # 2, we created the properties “drink” and “getDrink” at the exact same time that we created the object literal “foo”. It is all one expression. In Example # 3, we create an empty object named “foo” first, and then use dot notation to add properties to the object one-by-one. I just wanted to point out that there is more than one way to go about all of this from a syntax perspective.

Object Literals Can Contain Other Object Literals, and those Objects Have Their Own Context

Example # 4

var drink = 'wine';

var foo = {};

foo.drink = "beer";

foo.getDrink = function(){
        return this.drink; // 'this' refers to the object "foo"
    };

foo.under21 = {};

foo.under21.drink = 'soda';

foo.under21.getDrink = function(){
        return this.drink; // 'this' refers to the object "foo.under21"
    };

console.log( foo.getDrink() ); // beer

console.log( foo.under21.getDrink() ); // soda

var drink = 'wine';

var foo = {};

foo.drink = "beer";

foo.getDrink = function(){

return this.drink; // 'this' refers to the object "foo"

};

foo.under21 = {};

foo.under21.drink = 'soda';

foo.under21.getDrink = function(){

return this.drink; // 'this' refers to the object "foo.under21"

};

console.log( foo.getDrink() ); // beer

console.log( foo.under21.getDrink() ); // soda

Here is the jsFiddle.net link for Example # 4: http://jsfiddle.net/8p38y/

In Example # 4, we have added a new property to “foo”, and that property is yet another object. At first it is empty (i.e. foo.under21 = {}), and then we add two properties to it. The first property is “drink”, which is set equal to “soda”. Don’t’ confuse this with the property “drink” that is set in the context of “foo” which is equal to “beer”. In the context of “foo.under21”, “drink” is equal to “soda”.

The second property of “foo.under21” has an anonymous function assigned to it. That anonymous function returns “this.drink”. In the context of “foo.under21”, “drink” is equal to “soda”, so calling that function returns “soda”.

So the point of this example is that object literals can have properties that are themselves objects, and those objects have their own context. When functions execute in the context of those objects “this” refers to the object, and so on. I am aware of no limit to this kind of object nesting.

The JavaScript .call() and .apply() Methods Allow You to Dynamically Change the Context In Which a Function is Executed

Example # 5

drink = 'wine';

var foo = {};

foo.drink = "beer";

foo.getDrink = function(){      
        return this.drink; // 'this' refers to the object "foo"
    };

foo.under21 = {};

foo.under21.drink = 'soda';

foo.under21.getDrink = function(){
       return foo.getDrink.call(); // execute foo.getDrink()                
    };

console.log( foo.getDrink() ); // beer

console.log( foo.under21.getDrink() ); // wine

drink = 'wine';

var foo = {};

foo.drink = "beer";

foo.getDrink = function(){

return this.drink; // 'this' refers to the object "foo"

};

foo.under21 = {};

foo.under21.drink = 'soda';

foo.under21.getDrink = function(){

return foo.getDrink.call(); // execute foo.getDrink()

};

console.log( foo.getDrink() ); // beer

console.log( foo.under21.getDrink() ); // wine

Here is the jsFiddle.net link for Example # 5: http://jsfiddle.net/A5ydt/

Ok, so here is the bonus question: In Example # 5, why does a call to “foo.under21.getDrink()” now return “wine” ?

This is because we changed the inner-workings of that function. Instead of simply returning “this.drink”, we use the JavaScript “.call()” method, which allows you to execute any function in the context of another object. When you do not specify the context in which that function is to be “called”, it executes in the context of the global object. In the global context, there is a variable named “drink” and it is equal to “wine”, so “wine” is returned.

Example # 6:

drink = 'wine';

var foo = {};

foo.drink = "beer";

foo.getDrink = function(){      
        return this.drink; // 'this' refers to the object "foo"
    };

foo.under21 = {};

foo.under21.drink = 'soda';

foo.under21.getDrink = function(){
       return foo.getDrink.call(this); // execute foo.getDrink()                
    };

console.log( foo.getDrink() ); // beer

console.log( foo.under21.getDrink() ); // soda

drink = 'wine';

var foo = {};

foo.drink = "beer";

foo.getDrink = function(){

return this.drink; // 'this' refers to the object "foo"

};

foo.under21 = {};

foo.under21.drink = 'soda';

foo.under21.getDrink = function(){

return foo.getDrink.call(this); // execute foo.getDrink()

};

console.log( foo.getDrink() ); // beer

console.log( foo.under21.getDrink() ); // soda

Here is the jsFiddle.net link for Example # 6: http://jsfiddle.net/cS4cv/

In Example # 6, “soda” is returned because when we used the JavaScript “.call()” method, we specified the context in which the function is to execute. In this case, the context we specify is “this”. “this” refers to the context of “foo.under21”, and “foo.under21” has a property named “drink”, so the value “soda” is returned.

Summary

The last two examples may seem like overkill, but I wanted to point out that just when you start to get a handle on the concept of context in JavaScript object literals, you must realize that there is a bit more to consider. JavaScript Object Literals can have properties that are also objects, and those objects have their own context.

In each case, when a function executes within that context, inside of the function, the “this” keyword refers to the object that the function is a property of, because the function executes in the context of that object. By using the JavaScript “.call()” method (or “.apply()” method), you can programmatically change the context in which that function executes, which changes the meaning of the “this” accordingly.

Aug202012 by dcm2 Comments

Understanding Scope in JavaScript

JavaScript

Although the ‘with’ statement creates a block-level scope effect, and recent implementations of the “let” statement have the same effect, these are fodder for another conversation. I’m not a big fan of the “with” statement, and at the time of this writing, you can’t be 100% sure that the “let” statement is fully supported by the user’s browser. The end result of this is the fact that there is no block-level scope in JavaScript. Scope is created by functions.

Example # 1

month = 'july'; //global variable

function foo(){
    var month = "august"; //private
    console.log(month);

};

console.log(month); //in the global scope, month = july

foo(); //in the local scope of the foo function, month = august

month = 'july'; //global variable

function foo(){

var month = "august"; //private

console.log(month);

};

console.log(month); //in the global scope, month = july

foo(); //in the local scope of the foo function, month = august

Here is the jsFiddle.net link for Example # 1 : http://jsfiddle.net/2ZkkR/

In Example # 1, we set the global variable “month” equal to “july”. But inside of the function “foo()”, we also create a variable named “month”, and give it a value of “august”. The second statement in foo() is a call to the console, telling it to output the value of the variable “month”.

So, why is it that in the global scope, “console.log(month)” outputs “july”, but executing “foo()” outputs “august” ?

The reason is that inside of the function “foo()”, we used the “var” keyword to create the variable “month”. When you use the “var” keyword, the variable you create becomes local to the function that you create it in. So, inside of “foo()”, the variable “month” is local, and equal to “july”. As a result, on the very next line, the statement: “console.log(month)” outputs “july”. Inside of “foo()”, we have no knowledge of the global variable “month”, because in the scope chain, the variable “month” is found locally, so the search for “month” ends within the local scope of “foo()”.

Example # 2

month = 'july'; //global variable

function foo(){
    var month = "august"; //private
    console.log(month);
};

function bar(){
    console.log(month); //no local "month", so it looks to the global "month"
};

console.log(month); //in the global scope, month = july

foo(); //in the local scope of the foo function, month = august

bar(); //in the local scope of the bar function, month = july

month = 'july'; //global variable

function foo(){

var month = "august"; //private

console.log(month);

};

function bar(){

console.log(month); //no local "month", so it looks to the global "month"

};

console.log(month); //in the global scope, month = july

foo(); //in the local scope of the foo function, month = august

bar(); //in the local scope of the bar function, month = july

Here is the jsFiddle.net link for Example # 2 : http://jsfiddle.net/6TBEM/

In Example # 2, we have added a function named “bar()”. Bar does not have a local variable named “month”. So, when “bar()” executes, the statement “console.log(month)” kicks off a search for the variable “month”. In the scope chain, there is no local variable named “month”, so the JavaScript engine looks to the next level of the scope chain, which happens to be the global scope. In the global scope, there is a variable named “month”, so the value of that variable is returned, and it is “july”.

So, “foo()” outputs: “august” and “bar()” outputs: “july”, because, although they both look for a variable named “month”, they find completely different values; in their respective scope chains, the value of a variable named “month” differs.

Example # 3

month = 'july'; //global variable

function foo(){
    var month = "august"; //private
    window.season = 'summer'; //global    
    console.log(month);
};

console.log(month); //in the global scope, month = july

foo(); //in the local scope of the foo function, month = august

console.log(season); //in the global scope, season = summer

month = 'july'; //global variable

function foo(){

var month = "august"; //private

window.season = 'summer'; //global

console.log(month);

};

console.log(month); //in the global scope, month = july

foo(); //in the local scope of the foo function, month = august

console.log(season); //in the global scope, season = summer

Here is the jsFiddle.net link for Example # 3 : http://jsfiddle.net/ZaXxk/

In Example # 3, notice a new statement in the “foo()” function: “window.season”.

In this statement, we are creating a global variable named “season”. Although we are within the context of the “foo()” function, we can reference the global scope by mutating the “window” object. “window” is essentially the global object. Creating a global variable while inside of the local scope of “foo()” is easily done by adding a property to the “window” object; in our case we name it “season” and give it a value of “summer”.

So once again, although we are in the local scope of “foo()”, we have just created a global variable named “season” and given it the value of “summer”, by adding a new property to the “window” object (e.g., window.season = ‘summer’).

Example # 4

month = 'july'; //global variable

function foo(){
    var month = "august"; //private
    window.season = 'summer'; //global
    weather = 'hot'; //global    
    console.log(month);
};

console.log(month); //in the global scope, month = july

foo(); //in the local scope of the foo function, month = august

console.log(season); //in the global scope, season = summer

console.log(weather); //in the global scope, weather = hot

month = 'july'; //global variable

function foo(){

var month = "august"; //private

window.season = 'summer'; //global

weather = 'hot'; //global

console.log(month);

};

console.log(month); //in the global scope, month = july

foo(); //in the local scope of the foo function, month = august

console.log(season); //in the global scope, season = summer

console.log(weather); //in the global scope, weather = hot

Here is the jsFiddle.net link for Example # 4 : http://jsfiddle.net/XYu4x/

In Example # 4, we create another global variable while within the local scope of “foo()”, named “weather”. This approach is different because when we say: weather = “hot”, the absence of the “var” keyword automatically makes the variable global. This is important to remember and make note of: If you omit the “var” keyword when creating a variable, no matter where you do it, that variable becomes global.

In general, this is something that you want to avoid, as it can lead to code that is hard to understand and even harder to maintain. But for the purpose of this discussion, it illustrates an important behavior in JavaScript: omitting the “var” keyword when creating a variable makes that variable global, no matter where you do it. I’m repeating this because it is an important detail to remember.

Example # 5

month = 'july'; //global variable

function foo(){
    var month = "august"; //private
    window.season = 'summer'; //global
    weather = 'hot'; //global    
    this.activity = 'swimming' //global
    console.log(month);
};

console.log(month); //in the global scope, month = july

foo(); //in the local scope of the foo function, month = august

console.log(season); //in the global scope, season = summer

console.log(weather); //in the global scope, weather = hot

console.log(activity); //in the global scope, activity = swimming

month = 'july'; //global variable

function foo(){

var month = "august"; //private

window.season = 'summer'; //global

weather = 'hot'; //global

this.activity = 'swimming' //global

console.log(month);

};

console.log(month); //in the global scope, month = july

foo(); //in the local scope of the foo function, month = august

console.log(season); //in the global scope, season = summer

console.log(weather); //in the global scope, weather = hot

console.log(activity); //in the global scope, activity = swimming

Here is the jsFiddle.net link for Example # 5 : http://jsfiddle.net/NTjYe/

In Example # 5, we yet again create a new global variable from within the local scope of “foo()”. This variable is named “activity”. We demonstrate yet another way in which you can do this by saying: this.activity = ‘swimming’. This introduces another concept: the meaning of “this” inside a function (no pun intended).

Inside a function, the “this” keyword refers to the context in which the function is executed. In our example, “foo()” is executed in the context of the global object, so “this” referes to the global object, which means that “this.activity” adds a property to the global object named “activity”.

Make note: While “foo()” has it’s own “local” scope, the keyword “this” refers to the context in which “foo()” is executed. This is another important detail to remember. It will come up a lot when writing more advanced JavaScript.

Another (very) important note: An “implied global” is what occurs when you omit the “var” keyword when declaring a variable. There is a subtle, yet important difference between that and a variable created using the “var” keyword in the global scope: an implied global is actually not a variable; it is a property of the “window” object. For the most part, it behaves very much like a global variable, but there are differences: for example, you cannot delete a global variable, but you can delete a property of the window object. This is a topic worth looking into when you have time, and at minmum, good to be aware of.

Summary

At first, the concept of scope in JavaScript can be a challenge to fully understand. But it is very much worth the effort. Once you understand scope, the JavaScript language becomes a sharp knife that can be used to sculpt elegant and expressive code. This tutorial discussed only the most basic concept of scope in JavaScript. I highly recommend exploring it in-depth.

Helpful Links for Scope in JavaScript

https://developer.mozilla.org/en/JavaScript/Reference/Functions_and_function_scope/

http://coding.smashingmagazine.com/2009/08/01/what-you-need-to-know-about-javascript-scope/

http://oranlooney.com/function-scope-javascript/

Aug82012 by dcmNo Comments

JavaScript animation with jQuery.animate() – Introduction

jQuery

“How can I animate web page elements with JavaScript, using jQuery”?

Animation in JavaScript can be tricky. What at first may seem easy, quickly becomes a scattered mess of timeouts and callbacks. But with jQuery.animate(), you have a simple and elegant way of implementing animation in your web page, without all the headaches and jerky performance.

jQuery.animate() has a very simple syntax: Chain the return value of a jQuery collection with the .animate() method, pass in an options object, a speed value, and off you go. It really is that simple.

Before we get into the examples, here is the markup we will use:

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>jQuery Animate Example</title>
        <script type="text/javascript" 
                    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
       ></script>
        <style>
            .moveMe{
                position:relative;
            }
        </style>
    </head> 
    <body> 
        <div class="moveMe">
            Lorem ipsum dolor sit amet
        </div>
    </body> 
</html>

<!DOCTYPE html>

<html>

<head>

<title>jQuery Animate Example</title>

src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"

></script>

<style>

.moveMe{

position:relative;

}

</style>

</head>

<body>

Lorem ipsum dolor sit amet

</div>

</body>

</html>

Example # 1

$(".moveMe").animate({
"left": "+=300px"
}, 4000);

$(".moveMe").animate({

"left": "+=300px"

}, 4000);

Here is the jsFiddle.net Link for Example # 1: http://jsfiddle.net/jPaHy/

In Example # 1, we use a jQuery selector to return a collection. In this case, the collection contains only one element. Here’s a rundown of the syntax:

The jQuery selector “$(“.moveMe”)” returns a collection of one element
We chain-in the .animate() method to that return value
We pass-in an object to the .animate() method as the first argument
In that object, we have one property: “left”, and the value is: “+=500px”
The second argument that we pass in is the speed, which in this case is 4000 miliseconds (i.e. 4 seconds)

And that’s it!

Example # 2

$(".moveMe")
.animate({
        "left": "+=300px"
}, 2000)
.animate({
        "top": "+=200px"
}, 2000);

$(".moveMe")

.animate({

"left": "+=300px"

}, 2000)

.animate({

"top": "+=200px"

}, 2000);

Here is the jsFiddle.net Link for Example # 2: http://jsfiddle.net/BRWDr/

In Example # 2, we add a second chained .animate() method. There is little difference in the second call; instead of manipulating the “left” property, we manipulate the “top” property, which pushes the text down by 200 pixels.

Example # 3 – Using the jQuery.animate() callback function

$(".moveMe")
.animate({
        "left": "+=300px"
}, 2000,function(){
    $(this)
        .text('all done!')
        .css('color','red');
})

$(".moveMe")

.animate({

"left": "+=300px"

}, 2000,function(){

$(this)

.text('all done!')

.css('color','red');

})

Here is the jsFiddle.net link for Example # 3: http://jsfiddle.net/8FZ87/

In Example # 3, we pass-in a third argument. This, of course, is the callback function. What this means is that when jQuery.animate() finishes with the animation, it runs the callback function, if one is passed-in. You could certainly pass-in a named function, or as we have done, you can pass-in an anonymous function. In the callback, we change the color of the text to red, and change the text in the element to “all done!”.

Summary

The amount of JavaScript we would have had to write to accomplish this would have been a total pain in the neck. All that code is in jQuery, and it abstracts away the details, leaving you with a syntax that is both simple and elegant.

Once you have mastered the simple syntax of jQuery.animate(), moving elements around the page becomes trivial

Notice that in the markup, I applied the following CSS to the element that we want to animate: “position: relative;” We needed this because our examples manipulated the “left” and “top” properties. So, if the element was not positioned, nothing would happen when the JavaScript code ran.

The jQuery.animate() method makes it trivial to animate elements in a web page. Once you learn the syntax, it is incredibly easy. Of course, there is much more that can be done, and some impressive advanced features are available. This tutorial was meant only to explain the absolute basics of jQuery.animate(), so that if you have never used it before, you can get started right away.

Helpful Links for the jQuery.animate() method

http://api.jquery.com/animate/

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_animation

http://viralpatel.net/blogs/understanding-jquery-animate-function/

http://james.padolsey.com/javascript/fun-with-jquerys-animate/

http://james.padolsey.com/demos/jquery/easing/

Aug42012 by dcm2 Comments

How to Create a JavaScript Object Literal

JavaScript

Learn how to quickly and easily create your first Object Literal, and give it properties and methods

There seems to be a bit of mystery surrounding the subject of JavaScript Object Literals. It is actually a simple concept and it’s easy to get started. There is a great deal of depth to the subject, but creating your first JavaScript Object Literal does not need to be complicated.

The simplest way to create an object literal is to assign an empty object to a variable. For example: var foo = {}; That is it. In that one line, you have created an object literal.

Now, that object is empty. Objects have two kinds of “things”: properties and methods. A property can be any valid JavaScript type (i.e. string, number, boolean, function, array, etc.). A method is essentially a property of the object to which you have assigned an anonymous function. So the property is now equal to a function. It is still a property of the object, but because it “does” something, we now call it a “method”.

Example # 1

var foo = {};

foo.drink = 'beer';

console.dir(foo); //drink -&gt; ‘beer’

var foo = {};

foo.drink = 'beer';

console.dir(foo); //drink -> ‘beer’

Here is the JSFiddle Link for Example # 1: http://jsfiddle.net/jzrDw/

In Example # 1, we create a new Object Literal by assigning an empty object to the variable “foo”. Next, we give foo a property named “drink” and assign a value of “beer” to it. In this case the value of “drink” is a string (“beer”), but it could easily have been a number (i.e. foo.drink = 5) or a boolean (foo.drink = true) or any valid JavaScript type.

Example # 2

var foo = {};

foo.drink = 'beer';

foo.say = function(){
    console.log("hello world!");
};

console.dir(foo);

var foo = {};

foo.drink = 'beer';

foo.say = function(){

console.log("hello world!");

};

console.dir(foo);

In Example # 2, we have added a second property to foo. This property, “say” has an anonymous function assigned to it, so now we call it a “method”. That method: foo.say does not do too much; it just outputs “hello world!” to the console. But nonetheless, it is a method of foo.

Here is the JSFiddle Link for Example # 2: http://jsfiddle.net/PWHM5/

Here is an important note: In the first two examples, technically, we created an object literal by assigning an empty object to the variable “foo”. Then we added a property and a method using dot notation (i.e. foo.property = value). But true “Object Literal” syntax involves creating the object properties as you create the object.

Example # 3

var foo = {

    drink: 'beer',

    say: function(){
        console.log("hello world!");
    }
};

console.dir(foo);

var foo = {

drink: 'beer',

say: function(){

console.log("hello world!");

}

};

console.dir(foo);

In Example # 3, we use Object Literal Notation. In the end, we have the same result as the previous example, but we achieve it using true Object Literal Notation. The difference is that in the previous example, we created an empty object, and then added properties to it. In Example # 3, we created those properties as we created the object itself.

Here is the JSFiddle Link for Example # 3: http://jsfiddle.net/sGY7E/

Summary

There is plenty more to talk about here. For example, there is the subject of “context” in Object Literals. But this post is about getting started, and to show that creating a JavaScript Object Literal is no mystery. What you do with that object is up to you. But you can be sure that objects in JavaScript are important features of the language, as they allow you to write more powerful and expressive code.

A Video Tutorial About JavaScript Object Literals

Helpful Links for JavaScript Object Literals

https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Working_with_Objects

http://blog.kevinchisholm.com/javascript/difference-between-object-literal-and-instance-object/

http://www.dyn-web.com/tutorials/obj_lit.php

Jul282012 by dcm3 Comments

What’s the difference between jQuery.ajax(), jQuery.get() and jQuery.post()?

jQuery

jQuery offers three Ajax calls that are simple and painless

Although it is a good idea to understand Ajax in the context of native JavaScript, leveraging the power of JavaScript libraries for your Ajax calls is not a bad idea. Depending on the size and complexity of your application, it can often minimize the amount of code you need to write in order to provide the best cross-browser experience.

Question: “What is the difference between jQuery.ajax(), jQuery.get() and jQuery.post() ?”

Answer: jQuery.get() and jQuery.post() contain features that are subsets of jQuery.ajax().

So jQuery.ajax() is the method that provides the most flexibility of the three. You’ll see that the biggest difference from an implementation standpoint is that you pass an object to jQuery.ajax(), which contains the necessary parameters. And as for jQuery.get() and jQuery.post(), here you pass in arguments. So you might say that jQuery.get() and jQuery.post() are both shorthand for jQuery.ajax().

Important Note: Because of the “Same origin policy” enforced by all browsers, I could not make a jsfiddle example for this post. But you can copy and paste these code examples into a simple html file, and just make sure that is a file named test.txt in the same folder. Put a simple message in that text file (i.e. “hello from the text file”).

jQuery.ajax()

Example # 1

jQuery.ajax({
url: 'test.txt',
dataType: 'text',
type: “GET”,
  success: function(data) {
    console.log(data);              
  }
});

jQuery.ajax({

url: 'test.txt',

dataType: 'text',

type: “GET”,

success: function(data) {

console.log(data);

}

});

So, in Example # 1, we use the jQuery.ajax() method. There are certainly more configurable parameters, but here we are using the bare minimum.

You’ll see that there is not much going on here. We just pass an object into the jQuery.ajax() method. That object has four properties: “url,” “dataType,” “type,” and “success”, and here are the details for each property:

url: This is the URL of the file that you want to grab via your ajax call.
dataType: This determines how the return data will be treated (i.e. pure text, html, XML, etc.).
type: This the the request type. Choose “GET” or “POST”. This is actually optional; if you omit it, jQuery will default to “GET”.
success: This is a callback function that is fired after a successful http request has completed. The first argument to the function is the data returned from the server. There are other arguments that can be passed in as well.

As long as you have a file named “test.txt” that has some kind of message, and it is in the same folder as your html file, the contents of that text file will appear in your JavaScript console. (Don’t forget to open the console! : – ). Of course, you can put that file anywhere you want, as long as it is on the same domain as the requesting file.

A video tutorial, explaining the difference between jQuery.ajax(), jQuery.get() and jQuery.post()

Here, in this video, I briefly explain the difference between these three AJAX utilities. You’ll see that I demonstrate how jQuery.get() and jQuery.post() are very similar, and how jQuery.AJAX is a more generalized method that allows you to make either GET or POST AJAX requests.

jQuery.get()

Example # 2

jQuery.get('test.txt',function(data){
    console.log(data)
},'text');

jQuery.get('test.txt',function(data){

console.log(data)

},'text');

Now here, in Example # 2, we use the .get() method, which is a kind of shorthand for jQuery.ajax(). When using jQuery.get(), instead of passing in an object, you pass in arguments. At minium, you’ll need the first two arguments: the URL of the file you want to retrieve (i.e. ‘test.txt’), and a success callback. In this example, we also passed in a third argument: ‘text,’ which told jQuery that we wanted to treat the return message as text.

The jQuery.get() method is recommended when you want to make a quick and dirty Ajax call and you are sure it will be a GET. So here, there’s not much more to it. Short and sweet.

jQuery.post()

Example # 3

jQuery.post('test.txt',function(data){
    console.log('post response-&gt; ' + data)
},'text');

jQuery.post('test.txt',function(data){

console.log('post response-> ' + data)

},'text');

And finally, in Example # 3, we used jQuery.post(). And in exactly the same manner as jQuery.get(), this method is like using jQuery.ajax(), and specifying a “type” of “POST.” So, this method is recommended if you need to make a quick Ajax call via POST, and don’t need to make a lot of configuration decisions.

What About Multiple AJAX Calls?

When you have code that depends on the mutual success of multiple Ajax calls, things can get messy. Quite often, a developer might implement an AJAX call inside the success function of another one. This can work, but what if there is a total of three AJAX calls? or even four? Well, what you wind up with is a pattern called the “Pyramid of Doom”:

jQuery.get('serverPage-1.php',function(data1){
	jQuery.get('serverPage-2.php',function(data2){
		jQuery.get('serverPage-3.php',function(data3){
			jQuery.get('serverPage-4.php',function(data4){
				//now we have know all four AJAX calls have completed
			});
		});
	});
});

jQuery.get('serverPage-1.php',function(data1){

jQuery.get('serverPage-2.php',function(data2){

jQuery.get('serverPage-3.php',function(data3){

jQuery.get('serverPage-4.php',function(data4){

//now we have know all four AJAX calls have completed

});

The Pyramid of Doom is a JavaScript anti-pattern that should be avoided. If you are already using jQuery, you can leverage the power of the jQuery.when() method, which can be leveraged to treat multiple AJAX calls as one asyncronous event:

var A = $.get(serverPage.xyz);
var B = $.get(serverPage.xyz);
var C = $.get(serverPage.xyz);

$.when(A,B,C).done(funtion(){
    //act upon the collective success of A,B and C
});

var A = $.get(serverPage.xyz);

var B = $.get(serverPage.xyz);

var C = $.get(serverPage.xyz);

$.when(A,B,C).done(funtion(){

//act upon the collective success of A,B and C

});

To learn more about using the jQuery.when() method to manage multiple AJAX calls in JavaScript, you can read these posts:

http://blog.kevinchisholm.com/javascript/jquery/using-jquery-deferred-to-manage-multiple-ajax-calls/

http://blog.kevinchisholm.com/javascript/jquery/using-the-jquery-promise-interface-to-avoid-the-ajax-pyramid-of-doom/

Summary

If you are wondering whether you should use jQuery.ajax(), jQuery.get() or jQuery.post(), it is really up to you. One way to approach it might be to ask yourself: “Am I writing a multi-purpose function that will be able to perform either a GET or a POST? And I do I want this function to accommodate dynamic settings such as dataType or data?” If the answer to these questions is “yes,” then use jQuery.ajax(), and wrap it with your own custom function that takes an object as an argument. If you are thinking “nah, I just need to make a quick GET or POST Ajax call, then get the data, do something with it, and use jQuiery.get() or jQuery.post().

Helpful Links for jQuery.ajax(), jQuery.get() and jQuery.post()

http://api.jquery.com/jQuery.ajax/

http://www.w3schools.com/jquery/jquery_ref_ajax.asp

http://api.jquery.com/jQuery.get/

http://api.jquery.com/jQuery.post/

Jul222012 by dcmNo Comments

JavaScript Closures – The Absolute Basics

JavaScript

Demystifying this topic is one of the most important steps towards truly understanding the JavaScript language

It is a little difficult to get your head around JavaScript closures without a basic understanding of scope. I will not attempt to tackle that subject in any kind of detail here. But let’s at least consider this thought: JavaScript functions always (always) retain a reference to any variables that are in-scope when they are defined.

I know that sounds a little nerdy, but it is important to remember. if you are not quite sure what that means, take a little time to explore the concept of scope in JavaScript, then come back to revisit the topic of closures.

Assuming you are comfortable with the concept of scope, think about a function that is defined in the global scope. There is not much going on there because the global scope is the outer-most scope. But what about when a function is defined inside another function? That is where the power of closures starts to take place. When a function is defined within another function, it has access to any variables that are in-scope at the time of definition.

Example # 1

var drink = "wine";

1	var drink = "wine";

var foo = function(){ var drink = “beer”; return function(){ return drink; }; }; var bar = foo(); console.log( drink ); //wine console.log( bar() ); //beer

Here is the JsFiddle link: http://jsfiddle.net/Xt8HP/

In example # 1, we first create a global variable named “drink” and set it equal to “wine”. Next we have a function “foo”, that returns another function. When we say: ‘var bar = foo()’, we are assigning the value that foo returns to bar.

JavaScript functions always (always) retain a reference to any variables that are in-scope when they are defined.

Since foo returns a function, then bar is now a function. Because the function that has been assigned to bar is defined inside of foo, it has access to foo. This means that in our case, bar returns a private variable that lives inside of foo. That variable inside of foo named “drink”, has been set to “beer”. So, in the global context, “drink” equals “wine” and in the context of foo, “drink” equals “beer”.

The end result is that when we pass the variable “drink” to the console, it is “wine”, because in the global scope, “drink” is equal to “wine”. But when we pass “bar()” to the console, we get “beer”. That is because “bar()” is a function, it returns a variable named “drink” and because “Bar()” was defined inside of foo, it returns the first “drink” it finds, which is private to “foo()” and it is equal to “beer”.

At the most basic level, this is how closures work.

Summary

There is much more to talk about with regards to JavaScript closures. But for those of you scratching your heads, just trying to get the basics down, I hope this was helpful.

A video tutorial about JavaScript Closures

Helpful links for getting started with JavaScript Closures

http://www.zimbio.com/Computer+programming/articles/387/Javascript+Closures+basic+explanation

http://jpmcgarrity.com/blog/2011/03/basic-javascript-closure/

http://www.javascriptkit.com/javatutors/closures.shtml

Jul212012 by dcmNo Comments

Iterating Over a DOM Collection with the jQuery.each Method

jQuery

jQuery makes it super easy to get a reference to a collection of DOM elements. The jquery.each method allows you to execute a function against each one of the elements in the collection.

Solving problems is one of jQuery’s best qualities, and the beauty of the jQuery.each method is that it solves a very common problem: how to iterate a collection of DOM elements. Now in order to work through this task, one might be inclined to set up a for-loop. This approach is not at all wrong; in fact, on some levels it makes perfect sense. The thing is, in tackling it this way you run into a few avoidable problems. First, there is a lot of boilerplate code. In other words, to set up the for-loop you would need a counter variable, which we’ll call “i”. And since we might want to iterate a collection of DOM elements more than once, we’d need to make the “i” variable private, which means using a function to create private or “local” scope. Also, 80% of our for-loop would be repeated code. So, you get the picture… our problems are mounting, and they most assuredly are avoidable. So, here’s where the beauty of the jQuery.each method comes into play: it provides abstraction for creating a for-loop. This means that we need only provide the collection and a callback method that we wanted executed for each iteration of the loop.

The jQuery.each method is the go-to tool when you need to iterate a collection of DOM elements. Let’s say you have a bunch of elements in the page. Maybe that bunch is “every <a> tag” or “every <li> inside of the <ul> with the class sales”, or each <div> element that is a child of <div class=”members”>.

Here is how you would create a reference to each of those collections

jQuery will return a collection with one or more members. But how do you iterate over that collection and “do something” to each one? You can accomplish this by chaining the .each() method to the return value, and of course, pass a callback to that method.

jQuery.each Method – Basic Syntax

In the above example, where you see “selector”, that represents a CSS-like query such as “p” or “#some-id p img”, etc., that you would pass to jQuery. Now you can see that we have passed a callback function to the each() method. And inside of that callback, we would take care of any tasks that are specific to the elements over which we are currently iterating.

So, for an example, we will create a click-event handler for each <li> inside of a <ul>. Here is the markup we will work with:

With that markup in mind, consider the following code:

Example # 1

Notice that in Example # 1 we use $(this). Now just in case you are not familiar with this pattern, $(this) equals “the current element”, and it happens twice in our code. The first instance of $(this) on line # 2 refers to the element that is currently being iterated over (i.e. the current “UL LI”). The second $(this) on line # 3 represents the element that was just clicked. This is because we want to change the color of the element that was just clicked to red.

From a pseudocode perspective, here is what we have done:1- For each <li> that is inside of a <ul>, add a click event handler
2 – In the click-event handler, we say “If you click me, make my text red”

Example # 2

In Example # 2, we change the logic a bit so that only an <li> with the class “workday” is returned in the collection, which means that the “saturday” and “sunday” <li> elements do have a click event handler assigned.

Here is the JsFiddle link for this example: http://jsfiddle.net/WHkkA/. Simply remove the .workday class from the CSS selector to see Example # 1 work.

Summary

The jQuery .each() method is used to iterate over the members of a jQuery collection. There is definitely more fun stuff that can be done with this method, but this is just a very basic overview of what the method does and how to use it.

Important Note: Try not to confuse this with the jQuery.each() method. That is a similar concept, but more of a general-purpose iteration method that is a static method call to the jQuery object, not a method of a jQuery collection.

Jul212012 by dcm1 Comment

How to Create a CSS Cache Buster Using JavaScript

JavaScript

Use the Date() constructor to create a unique query string; ensure each GET request is not cached

The other day, I was working with a customer whose iPad app was consuming an HTML page.
I was making changes to the CSS, yet was not seeing them in the iPad app. I kept adding a new query string to the URL of the CSS file, which forced the iPad app to download the updated CSS file. So, growing a little tired of changing the URL to the CSS element, I wrote a little cache buster script, and that was the end of the fiddling around.

This is very easy to do, so let’s look at an example.

Example # 1

var uniqueNum = new Date().getTime();
var cssURL = 'style.css?ver=' + uniqueNum;
var cssElement=document.createElement('link')
cssElement.setAttribute('rel','stylesheet')
cssElement.setAttribute('type','text/css')
cssElement.setAttribute('href', cssURL);
document.getElementsByTagName("head")[0].appendChild(cssElement);

var uniqueNum = new Date().getTime();

var cssURL = 'style.css?ver=' + uniqueNum;

var cssElement=document.createElement('link')

cssElement.setAttribute('rel','stylesheet')

cssElement.setAttribute('type','text/css')

cssElement.setAttribute('href', cssURL);

document.getElementsByTagName("head")[0].appendChild(cssElement);

In this example, we instantiate the Date() constructor, and get a reference to the time. Since this number is incremented by one, it will always be unique. We then create a new element, and set the required attributes: “rel”, “type” and “href”. The href has a query string that includes a reference to the time, so we have a GET request that is essentially different from the last one we made, and the next one we make will be different from this one, and so on.

Run this in your JavaScript console, and as long as you have a file name “style.css” in the same directory as your HTML file, you will see a new element appended to the <head> element. You can, of course, take the same approach with any resource that requires a web address such as a JavaScript file, an image, and so on.

Summary
Cache busting can ensure that often-changing files such as CSS and JavaScript always get downloaded by the client’s browser (i.e. never cached). It’s just a simple technique, but it can keep you from pulling your hair out.

Helpful Links for the subjet of cache busting

http://html5boilerplate.com/docs/Version-Control-with-Cachebusting/

http://www.adopsinsider.com/ad-ops-basics/what-is-a-cache-buster-and-how-does-it-work/

http://twosixcode.com/notes/view/simple-cache-busting-for-css-and-js

Jul192012 by dcmNo Comments

Creating an HTML Option Element Using the JavaScript Option() Constructor

JavaScript

The little-known JavaScript Option() constructor allows you to avoid the verbose syntax of creating DOM elements

We all love jQuery. Among the many awesome qualities of this library is the ability to easily create DOM elements and place them in the document without the normally verbose syntax of native JavaScript.

But there is a little-known feature of JavaScript that allows you to create option elements with fairly minimal effort. This feature is the Option() constructor. The syntax is simple:

Get a reference to a form element
Instantiate the constructor and associate the returned object with the form element
During instantiation, pass-in the following arguments: 1) the text shown in the page [string], 2) the value of the control [string], 3) if it is the default selection [true/false] and if it is selected [true/false]

Example # 1

<form>
	<select name="week">
		<option>Monday</option>
		<option>Tuesday</option>
		<option>Wednesday</option>
	</select>
</form>

var w = document.forms[0].week
w.length = 0;
var d = [{text: "January",val: "jan",},{text: "February",val: "feb",},{text: "March",val: "mar",}]

for (var i = 0;i <= d.length - 1;i++){
w[i] = new Option(d[i].text,d[i].val,false,false)
}

<form>

<option>Monday</option>

<option>Tuesday</option>

<option>Wednesday</option>

</select>

</form>

var w = document.forms[0].week

w.length = 0;

var d = [{text: "January",val: "jan",},{text: "February",val: "feb",},{text: "March",val: "mar",}]

for (var i = 0;i <= d.length - 1;i++){

w[i] = new Option(d[i].text,d[i].val,false,false)

}

In Example # 1, we have a simple form that includes a select control. In the markup there are three options: “Monday”, “Tuesday” and “Wednesday”. When the JavaScript runs, the following actions take place:

We get a reference to the select controls (“w”)
We delete all of the option elements (w.length = 0)
We create an array of objects, each with two properties (“d”)
We loop through the array and for each array element, dynamically create a new select element, using the object’s “text” and “val” properties. In each case the last two arguments: “false”,”false” mean that this new element will not be the default, nor will it be selected.

And that’s it!

Summary

The little-known Option() constructor can be used to create new HTML option elements. So, depending on how you choose to approach this, you can write some pretty efficient code that side-steps the normally verbose syntax of document.createTextNode(), document.createElement(), and document.appendChild() methods.

Helpful Links for the JavaScript Option() constructor

http://www.coderanch.com/t/120551/HTML-CSS-JavaScript/Option-Constructor

http://www.devguru.com/technologies/ecmascript/quickref/option.html

http://msdn.microsoft.com/en-us/library/ie/dd757810(v=vs.85).aspx

Jul142012 by dcm1 Comment

Associative Arrays in JavaScript

JavaScript

You may be finding conflicting information about associative arrays in JavaScript. Well, the answer is quite simple… and then things start to get a little odd

If you are frustrated because you have been getting different answers on this subject, I”ve got good news and bad news. The good news is, the answer is simple: associative arrays are not supported in JavaScript. Arrays in JavaScript are index-based. Plain and simple, end of conversation. But the bad new is, it’s not quite the end of the conversation. The reason for this is that the following code actually works just fine:

var arr = ["mon","tues","wed"];

arr["drink"] = "beer";
arr["music"] = "jazz";

console.log(arr[0]); //mon
console.log(arr["drink"]); //beer

var arr = ["mon","tues","wed"];

arr["drink"] = "beer";

arr["music"] = "jazz";

console.log(arr[0]); //mon

console.log(arr["drink"]); //beer

[insert shrugged shoulders here] “…ok Kevin, so what’s the problem ?”

The problem is: you do not have an array with five elements. You have an array with three elements, and two properties.

Huh?

Yup, this is the part where JavaScript array objects behave in an unexpected way. But hang in there, it’s actually kind of cool once you understand what is happening.

Arrays are Objects

Arrays in JavaScript are numerically indexed: each array element’s “key” is its numeric index. So, in a way, each element is anonymous. This is because when you use methods of the Array object such as array.shift() or array.unshift(), each element’s index changes. So, after using array.shift(), array element # 2 becomes array element # 1, and so on. (array.pop() and array.push() may change the length of the array, but they don’t change the existing array element’s index numbers because you are dealing with the end of the array.)

All this is to say that in a JavaScript array, each element can only be identified by an index, which will always be a number, and you always have to assume that this number can change, which means that the whole “key/value” idea is out the window (i.e. no associative arrays in JavaScript. Sorry.).

OK smarty-pants, if you can’t have associative arrays in JavaScript, why does this work: arr[“drink”] = “beer” ?

Glad you asked. This is because in JavaScript, arrays inherit from Object(). Whether you use an array literal or instantiate the array constructor, you are creating an object, plain and simple. Consider the following:

Example # 1

var arr = new Array(3);
var arr = [];
var arr = ["mon","tues","wed"];

var arr = new Array(3);

var arr = [];

var arr = ["mon","tues","wed"];

In Example # 1, we create an array in three different ways. The first line creates a new array with three elements, but they are all undefined. The second line creates a new array, but it is empty, with no elements (this is an array literal). The third line creates an array literal, but we provide values for the elements as we define the array. In all three cases, you are creating an instance of the Array() constructor, which inherits from Object(). So, these are ALL objects.

Example # 2:

var arr = [];

console.log("the length of arr is: " + arr.length) // 0
console.dir(arr) //there are no child objects

arr[0] = "mon";
arr[1] = "tues";
arr[2] = "wed";

arr["drink"] = "beer";
arr["music"] = "jazz";

console.log("the length of arr is: " + arr.length); // 3
console.dir(arr);

0 -> "mon"
1 -> "tues" 
2 -> "wed"
drink -> "beer"	
music -> "jazz"

var arr = [];

console.log("the length of arr is: " + arr.length) // 0

console.dir(arr) //there are no child objects

arr[0] = "mon";

arr[1] = "tues";

arr[2] = "wed";

arr["drink"] = "beer";

arr["music"] = "jazz";

console.log("the length of arr is: " + arr.length); // 3

console.dir(arr);

0 -> "mon"

1 -> "tues"

2 -> "wed"

drink -> "beer"

music -> "jazz"

In Example # 2, we create an array literal, but it is empty. (var arr = []; works just fine, but it is an empty array.) When we check the length property and try to inspect the object with console.dir(arr), we can clearly see that it is empty. Then we add elements to the array, and add named properties (e.g. arr[“drink”] = “beer”). But when checking the array’s length property, and inspecting the object, we can see that the actual “array” part of the array still has only three elements (i.e. “music” and “drink” are NOT elements in the array), and that “music” and “drink” are properties of the array object.

Arrays are Objects with their own special “array-ish” properties

What is happening, is that the Array() constructor returns an instance object that has some special members that other objects such as Function() and Date() do not. So when your code says: arr[“drink”] = “beer” you are simply adding a new property to your object, which happens to be an array, and that property has a name of “drink”, and you have assigned the value of “beer” to it.

You could have easily assigned a number, an object, an anonymous function, or one of JavaScript’s other data types. This property “drink” has no connection to the elements in the array. It does not increase the value of the array’s “length” property, and it cannot be accessed via the array-ish methods such as pop() or shift().

Let’s see what happens when we take advantage of this object’s “array-ness.”

Example # 3:

arr.push({
    name: "bart simpson",
    phone: "555-1212"
});

arr.push(function(){
 console.log('i am an element of the array "arr", that 
            happens to be an anonymous function');
});

arr.testMe = function(){
 console.log('i am "testMe", a property of the array "arr", 
            that happens to be an anonymous function');
};

console.log("The length of arr is: " + arr.length);
console.dir(arr);
The output for example # 3 would be:

The length of arr is: 5
0 -> "mon"
1 -> "tues" 
2 -> "wed"
3 -> Object { name = "bart simpson", phone = "555-1212" }
4 -> function()
drink -> "beer"
music -> "jazz"
testMe -> function()

arr.push({

name: "bart simpson",

phone: "555-1212"

});

arr.push(function(){

console.log('i am an element of the array "arr", that

happens to be an anonymous function');

});

arr.testMe = function(){

console.log('i am "testMe", a property of the array "arr",

that happens to be an anonymous function');

};

console.log("The length of arr is: " + arr.length);

console.dir(arr);

The output for example # 3 would be:

The length of arr is: 5

0 -> "mon"

1 -> "tues"

2 -> "wed"

3 -> Object { name = "bart simpson", phone = "555-1212" }

4 -> function()

drink -> "beer"

music -> "jazz"

testMe -> function()

OK, so things are gettin’ pretty weird, right? Yep, but it’s all cool stuff, and at the end of the day, it’s no big deal. It just illustrates the way objects work in JavaScript. Let’s run it down:

First, we use the JavaScrpt Array() object’s push() method to dynamically add an element to the array. It just so happens that this new element is an object literal, with two properties. Its index becomes 3.
Next, we use the same push() method to dynamically add another element to the array. This new element is an anonymous function. Its index becomes 4.
Next, we create a new property for our array called “testMe”. This new property happens to be an anonymous function. It has NO index, because it is NOT an element in the array, just a new property that we have added.
Next, we use the console to check the array’s length property, which is now “5”, and we inspect it.
Dont’ forget it is an array, but it is also sill an object; Array() inherits from Object(). When inspecting the object, we see that our two uses of push() did, in fact, add two new elements to the array; one is an object, the other is an anonymous function. We also have “testMe”, wich is a new property of arr.

Ok, so what happens if we attempt to access the two functions that we added? Oh, they will run just fine, but remember: one is an element in the array, the other is a property of the arr object. So we access them differently:

Example # 4:

arr[4]();
arr.testMe();

1 2	arr[4](); arr.testMe();

The output for Example # 4 would be:

i am an element or the array "arr",
     that happens to be an anonymous function

i am "testMe", a property of the array "arr",
     that happens to be an anonymous function

i am an element or the array "arr",

that happens to be an anonymous function

i am "testMe", a property of the array "arr",

that happens to be an anonymous function

In each case, we are simply executing a function. It’s just that in the first case, that function is an element in the “arr” array. So, we have to access it using its index, which happens to be “4”. This can get tricky fast, and care should be taken in doing this kind of thing, but just to illustrate a point: array elements in JavaScript can be of any data type. In the second case, we access the function by its name “testMe”, because it is a PROPERTY of the array, not an element. Much easier, and there are no issues, because “testMe” will always be “testMe”, so it’s easy to access.

Summary

This is all pretty overboard. I mean, don’t we usually want this: var arr = [“mon”,”tues”,”wed”] ? Well, yes. Most of the time we do. But the point of this post is two-fold:

JavaScript does NOT support associative arrays. Period.
Arrays are objects, so properties can be added any time. Those properties can be any data type.

In JavaScript, arrays are best used as arrays, i.e., numerically indexed lists. The great thing is that those elements in the array can be of any data type. Index # 0 can be a string, # 1 can be an object, # 2 can be an anonymous function, and # 3 can be another array.

But once you start doing things like this: arr[“drink”] = “beer”, you are swimming in somewhat dangerous waters. Unless you really know what you are doing, you will get odd behavior because arr[“drink”] is NOT a numerically indexed “member” of the array (it is not an array “element”), and does NOT have the relation to arr[0] and arr[1] that you may think it does.

As soon as you start doing things like: arr[“drink”] = “beer”, it is time to consider putting this key-value pair in an object literal. You don’t have to, but it’s a better way to manage your data, and the approach leverages JavaScript’s strengths, instead of wrestling with the somewhat odd nature of it’s underlying architecture.

P.S.: If you really wanna see some odd JavaScript array behavior, try this:

var arr = [];

var arr = ["mon","tues","wed"];
arr["drink"] = "beer";
arr["music"] = "jazz";

arr.push({
    name: "bart simpson",
    phone: "555-1212"
});

arr.push(function(){
 console.log("anonymous function as element");
});

arr.testMe = function(){
 console.log('anonymous function as property');
};

for (var prop in arr){
console.log("Prop: " + arr[prop])
}

var arr = [];

var arr = ["mon","tues","wed"];

arr["drink"] = "beer";

arr["music"] = "jazz";

arr.push({

name: "bart simpson",

phone: "555-1212"

});

arr.push(function(){

console.log("anonymous function as element");

});

arr.testMe = function(){

console.log('anonymous function as property');

};

for (var prop in arr){

console.log("Prop: " + arr[prop])

}

The strange output of this one is for another discussion : – )

Helpful links for associative arrays in JavaScript

Mar262012 by dcmNo Comments

How to Use the jQuery replaceWith Method

jQuery

The replaceWith() method provides a way to completely remove an element and put another in its place

Most of the time, jQuery is used to add click event handlers to DOM elements, and there’s nothing wrong with this. In fact, jQuery is so helpful in this context, it’s hard to argue against using it for your event handling / delegation. But just be aware… there are other tasks that come up, and some of them can get rather messy. One example is replacing one DOM element with another. Now this may sound simple, but with vanilla JavaScript, this kind of work can get pretty tedious. Normally, I recommend learning how to do things with vanilla JavaScript that you would want to do with jQuery, but there are times when this kind of wheel reinvention becomes a bad idea.

So, this is where the jQuery replaceWith() method comes in; it allows you to chop out one piece of the page and replace it with another. You simply specify the original section of the DOM as well as the new chunk, and then jQuery takes care of all the work. And what makes this method so helpful is the expressive syntax; on a high-level, it’s a simple as A.replaceWith(B). You really do have to thank the folks from jQuery, for packing a great deal of abstraction into this one method. If you don’t believe me, go ahead and try this yourself using just vanilla JavaScript. I think you’ll find that it’s pretty tedious.

Example # 1

In example # 1, we have attached an event handler to the element with the id: “foo”. When clicked, that element is removed from the page, and replaced with a piece of markup defined in a string. Yes, it’s that easy, and there are certainly more interesting things you can do with this jQuery method.

Summary

Replacing one section of the page with another piece of markup is quite easy with the jQuery replaceWith() method. The syntax is very straight-forward and if you are already familiar with jQuery, there are quite a few possibilities.

Helpful links for the jQuery replaceWith method

http://api.jquery.com/replaceWith/

http://www.w3schools.com/jquery/html_replacewith.asp

http://stackoverflow.com/questions/730916/whats-the-difference-between-jquerys-replacewith-and-html

http://stackoverflow.com/questions/5248721/jquery-replacewith-fade-animate

Mar212012 by dcmNo Comments

JavaScript Interview Questions: Arrays

JavaScript

Q 1: Name two ways to dynamically add the value “bar” to the array “foo”

foo.push("bar")

foo[foo.length] = "bar";

foo.push("bar")

foo[foo.length] = "bar";

Hint: Two Ways to Dynamically Append an Element to a JavaScript Arrayy

Q 2: Of what JavaScript type is an Array?

A: object

Hint: Associative Arrays in JavaScript

Q 3: What property tells you the length of a JavaScript array?

A: The “length” property

More Info on the JavaScript Array’s “length” property:

Why is a JavaScript Array’s Length Property Always One Higher Than the Value of the Last Element’s Index?

Q 4: If the array “foo” has a length of 10, what is the index of the first element in the array?

A: 0

Hint: JavaScript Arrays are zero-based

Q 5: If the array “foo” has a length of 10, what is the index of the last element in the array?

A: 9

Hint: JavaScript Arrays are zero-based

Q 6: What is the syntax you would use to assign the first element in the array “foo” to the variable “bar”?

var bar = foo[0];

1	var bar = foo[0];

Q 7: True of False: An element in a JavaScript array can be another array

A: True

Hint: JavaScript Array elements can be arrays

Q 8: Given the following line of code, what is the length of the array “foo”?

var foo = [];

1	var foo = [];

A: 0

Hint: foo is an Array literal, but in this line of code, no elements have been defined.

Q 9: What does the array.shift() method do, and what does it return?

A: It removes the first element from the array and returns that element

More info on the JavaScript array.shift() method:

JavaScript Array Management with Push(), Pop(), Shift() and Unshift()/a>

Q 10: Given the following line of code, what would be the output of the console?

var foo = new Array(3);
console.log(foo);

1 2	var foo = new Array(3); console.log(foo);

A: [undefined, undefined, undefined]

Hint: When you instantiate the JavaScript Array() constructor, and pass in a single number, that number will indicate the length of the array, but the elements are still not initialized (i.e. they are all undefined)

Helpful Links for JavaScript Arrays

Kevin Chisholm – YouTube: Array

Kevin Chisholm Blog – Array

Mar192012 by dcm1 Comment

The JavaScript for…in statement – enumerating object properties

JavaScript

The JavaScript “for in” statement allows you to literally “loop” through all the properties of an object, without knowing ahead of time what the object will be or how many properties it will have

Seems as though one of the most over-looked and under-used tools in the JavaScript language is the “for in” statement. This statement allows you to essentially say: “Hey, if I have an object, any object, I wanna know what the name and value of every one of it’s properties is.”

No problem dude.

The “for in” statement creates a loop, much like the typical “for ( i=0, i <+ ###, i++)”, but you can think of it as more of: “for (x = the first property in an object, go until x == the last property in the object, go to the next property in the object”). Needing to know all the names and values of a given object at run time is a scenario that comes up more than you may think, and being able to satisfy that need is a huge (huge) asset.

Example # 1

var car = {
   maker: "honda",
   color: "blue",
   type: "sedan",
   mpg: "32"
}

for (var prop in car){
console.log( "The " + prop + " of this car is: " + car[prop] );
}

var car = {

maker: "honda",

color: "blue",

type: "sedan",

mpg: "32"

}

for (var prop in car){

console.log( "The " + prop + " of this car is: " + car[prop] );

}

So, in Example # 1, we created a JavaScript object literal and assigned it to the variable “car”. This object has four properties. We then use a JavaScript “for in” loop to literally loop through the properties of this object. note that in order to build our dynamic statement, we first reference “prop”, which is the variable that represents the name of the currently examined property (i.e. “maker”). In order to the actual value of prop, we use bracket syntax, as opposed to dot notation or dot syntax. This is because in order to use dot notation, we would have to actually know the name of the property (i.e. “car.maker”). Since we only have a variable to use, we can say “car[prop]”, because bracket notation allows us to use a variable, or any valid JavaScript expression inside the bracket.

The output of example # 1 would be:

The maker of this car is: honda
The color of this car is: blue
The type of this car is: sedan
The mpg of this car is: 32

Summary

So, as you can see, the JavaScript “for…in” statement is easy to use and incredibly useful. It helps to write code that deals with objects that are unknown at run time, but as a result, can be easily enumerated and acted upon.

Helpful links for the JavaScript “for in” statement

http://store.kevinchisholm.com/javascript-training/javascript-object-inspection-using-the-for-in-statement/

http://www.w3schools.com/js/js_loop_for_in.asp

http://javascriptweblog.wordpress.com/2011/01/04/exploring-javascript-for-in-loops/

http://webreflection.blogspot.com/2009/10/javascript-for-in-madness.html

Mar142012 by dcmNo Comments

How to use the JavaScript indexOf() method to find the position of one string in another string

JavaScript

The JavaScript indexOf() method allows you to find out if a string contains one or more characters, and if so, the starting position of that set of characters

If you’ve ever found yourself saying: “How do I figure out if one string contains a certain character or a sub-string?” then the JavaScript indexOf() method is for you. It returns the starting position of a string, even if it is one character. If that string does not exist, then it returns “-1”. So, if you want to know if a given string even exists at all in another string, simply test to see whether or not the JavaScript method indexOf() returns “-1”. If it does, then the sub-string does not exist. If the return value is “> -1” (i.e. more than -1), then the string does exist.

Example # 1

var foo = "Hello world";
var bar = foo.indexOf("football")
console.log(bar);

var foo = "Hello world";

var bar = foo.indexOf("football")

console.log(bar);

In Example # 1, we check for the starting position of “football” within the string “Hello world”. Because “football” does not exist in “Hello world”, the return value is “-1”

Example # 2

var foo = "Hello world";
var bar = foo.indexOf("football")

if ( bar === -1 ){
    console.log('"football" does not exist in the string "hello world"');
} else {
    console.log('"football does exist in the string "hello world"');
}

var foo = "Hello world";

var bar = foo.indexOf("football")

if ( bar === -1 ){

console.log('"football" does not exist in the string "hello world"');

} else {

console.log('"football does exist in the string "hello world"');

}

In Example # 2, we use an “if else” condition to test for the string “football” in “hello world”. In this case, it does not exist.

Example # 3

var foo = "Hello football world";
var bar = foo.indexOf("football")

if ( bar === -1 ){
    console.log('"football" does not exist in the string "hello world"');
} else {
    console.log('"football does exist in the string "hello world",
    and the starting position of that string is: ' + bar);
}

var foo = "Hello football world";

var bar = foo.indexOf("football")

if ( bar === -1 ){

console.log('"football" does not exist in the string "hello world"');

} else {

console.log('"football does exist in the string "hello world",

and the starting position of that string is: ' + bar);

}

In Example # 3, we have included the string “football” in “hello world”, so the test returns the starting value of “football”, which is “6”. So, the test evaluates to “true”, the “true” text is displayed, and at the end of that text, we return the starting position of “football”.

Summary

The JavaScript indexOf() method is the best way to find out if one string exists inside of another. If it does, the starting position of that searched string is returned. If the sub-string does not exist, then “-1” is returned; this is a reliable indicator of “does not exist”.

Helpful links for the JavaScript indexOf() method

http://www.w3schools.com/jsref/jsref_indexof.asp

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/indexOf

http://www.tizag.com/javascriptT/javascript-string-indexOf.php

Mar72012 by dcmNo Comments

Two Alternatives to the jQuery Document Ready Function for JavaScript

jQuery

There are two alternatives to document ready that are a bit easier to type

Most JavaScript programmers are familiar with jQuery’s document ready function. There is no doubt that it is a very helpful way to wrap your JavaScript with a cross-browser compatible function that will not run until the document has achieved a “ready” state. While the syntax is fairly simple, there are two slightly less verbose alternatives to the exact same functionality.

Example # 1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Three variations on the jQuery document ready function</title>
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script>
        $(document).ready(function(){
          console.log("the document is ready")
        });
        </script>
    </head>
    <body>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Three variations on the jQuery document ready function</title>

$(document).ready(function(){

console.log("the document is ready")

});

</script>

</head>

<body>

</body>

</html>

In Example # 1, we have the standard syntax for the jQuery document ready function.

Example # 2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Three variations on the jQuery document ready function</title>
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script>
        $(function(){
          console.log("the document is ready")
        });
        </script>
    </head>
    <body>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Three variations on the jQuery document ready function</title>

$(function(){

console.log("the document is ready")

});

</script>

</head>

<body>

</body>

</html>

In Example # 2, we omit the “document / ready” portion of the equation, and simply insert our function in the following expression $().

Example # 3

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Three variations on the jQuery document ready function</title>
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script>
        $().ready(function(){
          console.log("the document is ready")
        });
        </script>
    </head>
    <body>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Three variations on the jQuery document ready function</title>

$().ready(function(){

console.log("the document is ready")

});

</script>

</head>

<body>

</body>

</html>

In Example # 3, we chain a jQuery ready() function to the return value of the jQuery object: $().ready(). So, when the jQuery object is ready, so is our code.

Summary

There is no doubt that the jQuery document .ready() function is super-useful. There is however, more than one way to invoke this functionality.

Helpful links for the jQuery document .ready() function

http://api.jquery.com/ready/

http://docs.jquery.com/Tutorials:Introducing_$(document).ready()

http://rpheath.com/posts/403-jquery-shorthand-for-document-ready

http://think2loud.com/653-jquery-document-ready-howto/

Mar42012 by dcm3 Comments

Why is a JavaScript Array Length Property Always One Higher Than the Value of the Last Element’s Index?

JavaScript

The “length” property of a JavaScript array is a very helpful tool, but why is array length
always one “off”?

Arrays in JavaScript are zero-based. This means that JavaScript starts counting from zero when it indexes an array. In other words, the index value of the first element in the array is “0” and the index value of the second element is “1”, the third element’s index value is “2”, and so on. This is not unusual in computer programming languages. The JavaScript array length property is given in a one-based context. So, a JavaScript array with one element will have a “length” of “1”. If a JavaScript array has four elements, then that array’s “length” property will have a value of “four”. But (and here is the point where many get confused), if a JavaScript array has four elements, the last element has an index of “3”. This is because, again, JavaScript arrays are zero-based.

The Array Length – Example # 1

In Example # 1, we have an array with five elements. The console.log() statement reflects this as well because the “length” property of this array is “5” (i.e. this is a one-based value).

So, even though the array has a length of 5, the first element has an index of 0, and the last element (the 5th element) has an index of 4. Now this is the most important point, and it’s what explains the “off” reference: the length of the array is always one higher than the index of the last array element because the array indexes are zero-based, but the length property is one-based.

One Less Than the Length – Example # 2

In Example # 2, we create a variable who’s value is one LESS than the length of our array. So, since our array’s “length” property is “5”, our “len” variable is equal to “4”. Our loop will start at 0, and run until it equals “4”. This IS five iterations, but we are starting at 0, not one. So, since JavaScript starts counting Arrays from Zero, our code successfully outputs the value of each element in the array.

This is a very common technique: when you want to iterate an array, you create a for-loop, and set the max iterations to “one less than” the length of the array. Now while this may seem tedious, it’s actually a rock-solid pattern to follow, because the array’s length will always (always) be one higher than the index of the last element in the array. So, it follows that if your loop iterates X times, and X equals “one less than” the length of the array, then your loop will always iterate over every element in the array. This takes a little getting used to, but once you do, it becomes second nature.

Console Output – Example # 3

Summary

JavaScript arrays are zero-based. The JavaScript array “length” property returns the number of elements in an array, but it is a one-based value. So whenever you want to use the “length” property to say “hey, start from the first element in an array and go until you reach the last element,” start from zero, and go until you reach the array’s “length” property value, but “minus one!”

Helpful Links for JavaScript Arrays

JavaScript Array Management with Push(), Pop(), Shift() and Unshift()

Two Ways to Dynamically Append an Element to a JavaScript Array

Mar12012 by dcm3 Comments

What is the difference between an Object Literal and an Instance Object in JavaScript ?

JavaScript

Although a JavaScript object literal and a JavaScript instance object are both objects, they differ in their inherent nature and features

Object Literals

An object literal is “flat”. You create it, you add properties and methods to it, and all of those properties and methods are public. You can mutate any members of that object at any time. A JavaScript object literal does not, by nature, provide private scope. But any of the members of an object literal can certainly be a function that is capable of private scope. Object literals are useful because they allow you to create clean name-spaced code that is easy to pass around and consume.

Example # 1

var data = {
    fname: "foo",
    addOne: function(num){ return num + 1}
}

console.log(data.fname)
console.log(data.addOne(4))

data.fname = "bar";
console.log(data.fname)

data.lname = "baz";
console.log(data.lname)

data.say = function(){ return "this is the say function" };
console.log( data.say() );

var data = {

fname: "foo",

addOne: function(num){ return num + 1}

}

console.log(data.fname)

console.log(data.addOne(4))

data.fname = "bar";

console.log(data.fname)

data.lname = "baz";

console.log(data.lname)

data.say = function(){ return "this is the say function" };

console.log( data.say() );

In example # 1, we have defined a JavaScript object literal and assigned it to the variable “data”. This object has two members: the property “fname” and the method “addOne”. At run time, we can mutate this object very easily and add new properties (e.g. “lname”) and methods (i.e. “say”). The upside is that this object is totally exposed and we can access or mutate any of its members any time we like, with no problem. (Remember that if an object member is a function, then that function does provide its own private scope.) The downside of this object is that it does not inherently have a private scope. It also doesn’t have the kind of initialization that is provided by a constructor upon creation.

The output for example # 1 is:

foo

bar

baz

this is the say function

Instance Objects

An instance object is what is returned when instantiating a JavaScript constructor function, using the JavaScript “new” keyword. When you say “var bar = new Foo()”, “bar” becomes an “instance” of the function “Foo()”. Any expressions within Foo() are executed, any local variables in Foo() are copied and provided in “bar”, and the value of “this” inside of “bar”, refers to “bar”. The function “Foo” is never changed in any way; it simply acts as a “blueprint” for “bar”, and “bar” is an “instance” of “Foo”. Any local variables inside of “bar” are completely private and can only be muted by privileged members of that object.

Example # 2

var Foo = function(){
	var _color= "blue";
	console.log("welcome to your new instance object");
	this.getColor = function(){
		return _color;
	}
	this.setColor = function(newColor){
	   _color = newColor;
	}
}

var bar = new Foo(); // "welcome to your new instance object"
console.log(bar._color); // undefined
console.log(bar.getColor()); // "blue"
bar.setColor("red")
console.log(bar.getColor()); // "red"

var Foo = function(){

var _color= "blue";

console.log("welcome to your new instance object");

this.getColor = function(){

return _color;

}

this.setColor = function(newColor){

_color = newColor;

}

var bar = new Foo(); // "welcome to your new instance object"

console.log(bar._color); // undefined

console.log(bar.getColor()); // "blue"

bar.setColor("red")

console.log(bar.getColor()); // "red"

In example # 2, we have created a constructor function. A JavaScript constructor function is a function that is not meant to be executed directly. For example, we never plan to do the following: “Foo()”. Instead, a constructor is meant to be instantiated. This means that you create an “instance” of that function using the JavaScript “new” keyword. We have created an instance of Foo() by saying “var bar = new Foo()”. So, now we have a variable named “bar” that is an exact copy of Foo().

What makes “bar” differ from our JavaScript Object Literal that we defined in Example # 1, is that when our instance object (“bar”) is created, any execution code in the constructor (i.e. “Foo()” ) runs. In addition, any private variables defined in the constructor remain private in the instance object (i.e. “_color”).

What makes this scenario a little more special than that of the object literal is that we can have privileged methods. These are methods that are made public by the use of the “this” prefix, but they have access to the instance object’s private members (i.e. “_color”). So, when we run this code, the constructor function code runs (“welcome to your new instance object”). We attempt to output the value of “_color”, but “undefined” is returned, because “_color” is private and cannot be accessed outside of “bar”. We then use the privileged method “getColor()” to get the value of _color the correct way, and “blue” is returned. We then change the value of “_color” using the privileged memer “setColor()”, and return its value using “getColor()” again (“red”).

Summary

Both Object Literals and Instance Objects have their place and purpose in JavaScript. The power of Object Literals is in their lightweight syntax, ease of use, and the facility with which they allow you to create name-spaced code. Instance Objects are powerful because they are derived from a function, they provide private scope when they are created, and expressions can be executed on instantiation.

Helpful links for JavaScript Objects

http://www.w3schools.com/js/js_objects.asp

http://www.javascriptkit.com/javatutors/oopjs.shtml

http://www.dyn-web.com/tutorials/obj_lit.php

http://www.davidpirek.com/blog.aspx?n=JavaScript-Class-Constructor-vs.-Object-Literal:-Difference-in-Implementation-and-Inheritance