dcm | Kevin Chisholm - Blog

Mar42013 by dcmNo Comments

jQuery Plugin Authoring – The Absolute Basics – Part II

Once you have jQuery plugin basics down, it’s time to implement some best practices

In the previous post “jQuery Plugin Authoring – The Absolute Basics – Part I”, we to a detailed look at the architecture of a jQuery plugin. Now that you understand the building blocks, let’s discuss a few best practices. These techniques are considered standard for quality jQuery plugin authoring, and will dress you for success.

Protecting the Dollar Sign

Most jQuery consumers associate the dollar sign with jQuery. But that dollar sign is simply a shortcut to the jQuery object, which is a property of the window object. You could write all of your jQuery code without ever using the dollar sign, and simply “jQuery” instead. But most people prefer the dollar sign because it is of course quite a bit easier and faster to type.

But jQuery offers a “no conflict” mode that allows another library to take over the dollar sign. It is considered best practice to anticipate this scenario and pass the global jQuery object into the immediate function that wraps your plugin. This way, inside of the nice and safe sandbox of your plugin, you can use the dollar sign all you like, without the slightest concern for how it is being used in the global context.

Example # 1

(function($){
	$.fn.myPlugin = function() {
		this.each(function(index){
			//plugin code goes here....
		});
	};	
})(jQuery);

(function($){

$.fn.myPlugin = function() {

this.each(function(index){

//plugin code goes here....

});

};

})(jQuery);

In Example # 1, we pass the global jQuery object into the immediate function. The immediate function takes that jQuery object as “$”, so from there on we are free to use the dollar sign safely, even if jQuery is in no-conflict mode.

Chainability

Method chaining is a popular technique in JavaScript. Many web developers use this technique when they leverage jQuery without even knowing it. How many time have you seen something like this:

$(SOME PARENT).find(SOME CHILD).CSS(“prop”,”val”).click();

What signifies the chaining activity is the fact that we have only one reference to the jQuery collection returned by $(SOME PARENT). Since each method used returns the jQuery object, we can use that return value to invoke another jQuery method, and so on. This is called “Chaining” method calls together.

It is considered best practice to allow method chaining when authoring your own jQuery plugin. Doing so is quite simple; you just need to return the jQuery object from each method.

Example # 2

(function($){
	$.fn.myPlugin = function() {
		this.each(function(index){
			//plugin code goes here....
		});
	return this;
	};	
})(jQuery);

(function($){

$.fn.myPlugin = function() {

this.each(function(index){

//plugin code goes here....

});

return this;

};

})(jQuery);

In Example # 2, we return “this” from our plugin function. It’s important to note where the return statement is. Because the return statement occurs as the last line of code in our plugin’s function, the jQuery collection object is returned to the next method that wants to “chain”, without the need to re-state a jQuery collection.

Example # 3

$('a').myPlugin().attr("target","_blank");

1	$('a').myPlugin().attr("target","_blank");

In Example # 3, we have an example of method chaining in jQuery. Note that $(‘a’) only occurs once. That call to jQuery returns a jQuery collection object, which is returned from our jQuery plugin. As a result, the .attr() method can “chain” onto that return value and function properly.

Example # 4

$('a')
.myPlugin()
.attr("target","_blank")
.css("font-size","30px")
.click(function(){
    alert("You clicked: " + $(this).text() + "!");
    return false;
});

$('a')

.myPlugin()

.attr("target","_blank")

.css("font-size","30px")

.click(function(){

alert("You clicked: " + $(this).text() + "!");

return false;

});

In Example # 4, we have an even more complex example of method chaining. First we invoke “myPlugin”, and the the jQuery methods: .attr(), .css() and .click()

Here is a fully working JSFiddle.net link that demonstrates the best practices we have covered in this article. Be sure to click a few of the links to demonstrate the method chaining from example # 4:

http://jsfiddle.net/fTA95/

Summary

In this article we discussed a few jQuery plugin authoring best practices. We covered how to safely use the dollar sign in your plugin code, even when jQuery is in no-conflict mode. We also covered how to implement method chaining.

Helpful Links for jQuery plugin authoring

http://docs.jquery.com/Plugins/Authoring
http://stackoverflow.com/questions/12632382/jquery-plugin-authoring-and-namespacing

Feb252013 by dcmNo Comments

jQuery Plugin Authoring – The Absolute Basics – Part I

jQuery

You know a little jQuery, you have used a few jQuery plugins, and now you want to write your own jQuery plugin. Don’t worry, it’s no big deal. In fact it’s fun.

If you have been putting off authoring your first jQuery plugin, it’s time to wrap a bandana around your head, fire up “The Eye of the Tiger” by “Survivor” and figure out how to defeat Apollo Creed. Sorry, for the cheesy 80s reference, I couldn’t resist.

But seriously, it really is no big deal. The most important thing is to get a firm grip on the fundamentals. That part is serious. If you don’t understand what you are doing from a jQuery-architecture standpoint, then you will quickly find yourself in a quagmire of muck and filth, and you don’t want that.

In this article we will discuss the absolute basics of how to author a jQuery plugin:

Wrapping your plugin in a self-executing anonymous function
Extending the jQuery prototype,
Iterating over each element in the jQuery collection returned by your plugin.

This is the big stuff. Once you get your noggin around these concepts, the fun can begin.

A note about Self-executing anonymous functions

These are otherwise known as “immediate functions”. An immediate function is simply a function that is wrapped in parentheses, and followed by a pair of parentheses:

(function(){
	//code here fires right away, you don’t need to call the function
})();

(function(){

//code here fires right away, you don’t need to call the function

})();

You can learn more about immediate functions in my blog post: “Immediate Functions in JavaScript – The Basics” as well as my blog post: “Using an Immediate Function to Create a Global JavaScript Variable That Has Private Scope”

The main point here is to make sure you are comfortable with the concept of an immediate function in JavaScript. It’s important to do before reading further.

Where does my jQuery plugin code go?

Good question. The answer is: In its own file. By convention, you’ll want to create a JavaSript file named jquery.myPlugin.js. Then you’ll need to reference it just as you would any other JavaScript file:

<script src=”[PATH TO]/jquery.myPlugin.js”></script>

1	<script src=”[PATH TO]/jquery.myPlugin.js”></script>

Just make sure you reference jQuery before you reference your plugin.

For simplicity sake, we will reference our jQuery plugin via a set of SCRIPT tags, right in the page (that is perfectly valid, but definitely not practical).

<!DOCTYPE html>
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>My first jQuery Plugin</title>
        <script src="jquery.js"></script>
    </head> 
    <body>
    	<p>some content here...</p>

	<script>
			//our plugin code is gonna go right here!
	</script>

	<script>
		$(document).ready(function(){
			//we're gonna invoke our plugin here!
		});
	</script>
    </body> 
</html>

<!DOCTYPE html>

<html>

<head>

<title>My first jQuery Plugin</title>

</head>

<body>

<p>some content here...</p>

//our plugin code is gonna go right here!

</script>

$(document).ready(function(){

//we're gonna invoke our plugin here!

});

</script>

</body>

</html>

Example # 1

(function(){
	$.fn.myPlugin = function() {
		this.each(function(){
			//plugin code goes here
		});
	};	
})();

(function(){

$.fn.myPlugin = function() {

this.each(function(){

//plugin code goes here

});

};

})();

In example # 1 we have the absolute bare-bones code needed for a jQuery plugin. Here are the important points to consider for example # 1:

Wrap your jQuery plugin in an immediate Function

This is considered a best-practice and for good reason. Taking this approach allows you to create as many variables as you need in your plugin, without polluting the global namespace. Don’t overlook this, it allows you complete freedom with regards to the number of variables you need to create, and sandboxes all of these variables very nicely.

Again, an immediate function is simply a function that is wrapped in parentheses, and followed by a pair of parentheses. It fires right away when the JavaScript is evaluated, you don’t need to (and cannot) call the function. It just fires right away and whatever code you implement in that function executes. It’s a great way to provide private variable scope to some code without a whole lotta fuss.

If you are still having a tough time with the concept of immediate functions, stop, do a google search for JavaScript Immediate Function, learn it, live it, ask it out on a date, marry it, and then come back here to keep on reading.

https://www.google.com/search?q=javascript+immediate+function

(I’m serious about this immediate function thingy)

Your jQuery plugin becomes a property of the jQuery prototype object

jQuery is a function. Actually, the code in jQuery follows the factory pattern and returns a function that in-turn returns different kinds of things, depending on what you pass into that function. Most of the time, it returns an HTML collection wrapped with jQuery (hence a jQuery collection object), but again, the actual return value depends on what you are passing in.

Every JavaScript object has a prototype property, this includes functions. jQuery exposes its prototype property as “fn”. So, you simply assign your plugin to be a property of that “fn” object. Once you have done that, jQuery now has a new method that is YOUR plugin.

$.fn.myPlugin = function(){
	//insert awesome code here
};

$.fn.myPlugin = function(){

//insert awesome code here

};

Now you can do this:

$(‘div’).myPlugin();

1	$(‘div’).myPlugin();

Inside of your plugin, the JavaScript keyword “this” is already a jQuery object

Most people know that inside of a jQuery callback, “this” usually refers to the current native DOM element that is being iterated over. When you wrap “this” in jQuery, it becomes a jQuery object. So, we often refer to “this” as “$(this)”.

Inside of your plugin, there is no need to do that because the JavaScript keyword “this” is already a jQuery object. If you refer to “this” as “$(this)”, it’s not going to kill anyone, but it is not necessary and just uses more memory than is needed.

$.fn.myPlugin = function(){
	//”this” is already a jQuery collection object
};

$.fn.myPlugin = function(){

//”this” is already a jQuery collection object

};

Your jQuery plugin returns a jQuery collection

What your jQuery plugin returns depends on the CSS selector that was passed-in. For example, if you do this: $(body).myPlugin(), your jquery plugin will return a jQuery collection that has exactly one element: the BODY tag of your document (unless of course you have more than one BODY element in your page, which would be a bit of a head-scratcher). So, if you have an unordered list that has for example three items, and you invoke your plugin like this: $(ul li).myPlugin(), then your plugin will return a jQuery collection that contains three elements.

Use this.each() to iterate over all of the elements that are returned by your jQuery plugin

jQuery’s .each() method is a lovely little tool that allows you to iterate over a jQuery collection and “do something” to each element. Keep in mind that a jQuery collection can always contain exactly one element, and when it does, then the .each() method will run once. But when a jQuery collection contains multiple elements, then the .each() method will run once for EACH element in that collection.

When you use the .each() method, you pass in an anonymous function, and inside that function you have access to the current element that is being iterated over. It is here that you will need to wrap “this” with jQuery if you want it to be a jQuery object: Use $(this) for the jQuery object that represents the current element, or simply “this” for the native DOM element implementation. This anonymous function takes as its first argument the index of the current element. This is surprisingly handy: what if you want to know if this the the first element in the collection? or the last? That index number will help you with that task.

Now you are ready to write some awesome jQuery plugin code

Thanks for hanging in there. The preceding details were important. I know you are anxious to write some code, but understanding the outer architecture of a jQuery plugin is critical. If you do not understand what was just covered, then you will quickly be awash in spaghetti code that is not working right and will be difficult to debug. I promise you.

Example # 2

//Example # 2A
//run myPlugin against every A tag in the document
$(document).ready(function(){
	$('a').myPlugin();	
});

//Example # 2A

//run myPlugin against every A tag in the document

$(document).ready(function(){

$('a').myPlugin();

});

In example # 2, we invoke our jQuery plugin. We wrap it in a $(document).ready() call so that it only fires once the document is ready.

Invoking our plugin is as simple as $(CSS SELECTOR).myPlugin().

This is because our plugin is a property of the jQuery prototype object, which makes it a completely valid jQuery method. Nice.

Example # 3

//Example # 3A
//run myPlugin against every LI tag in the document
$(document).ready(function(){
	$('li').myPlugin();	
});

//Example # 3B
//run myPlugin against every LI tag in the document that is the last one in a list
$(document).ready(function(){
	$('li:last').myPlugin();	
});

//Example # 3C
//run myPlugin against the BODY tag
$(document).ready(function(){
	$('body').myPlugin();	
})

//Example # 3A

//run myPlugin against every LI tag in the document

$(document).ready(function(){

$('li').myPlugin();

});

//Example # 3B

//run myPlugin against every LI tag in the document that is the last one in a list

$(document).ready(function(){

$('li:last').myPlugin();

});

//Example # 3C

//run myPlugin against the BODY tag

$(document).ready(function(){

$('body').myPlugin();

})

In example # 3, we see how our plugin can behave differently depending on what we pass into it. In each case, the jQuery collection object returned by our plugin will differ, depending again on what CSS selector we passed-in.

Example # 4

(function(){
	$.fn.myPlugin = function() {
		//for each element in the collection
		this.each(function(){
			//make the element green,
//..the background yellow,
//...and the font bold 18px Comic Sans 
			$(this).css({
				'color':'green',
				'background-color': 'yellow',
				'font': 'bold 18px "Comic Sans MS",cursive,sans-serif'
			});
		});
	};	
})();

(function(){

$.fn.myPlugin = function() {

//for each element in the collection

this.each(function(){

//make the element green,

//..the background yellow,

//...and the font bold 18px Comic Sans

$(this).css({

'color':'green',

'background-color': 'yellow',

'font': 'bold 18px "Comic Sans MS",cursive,sans-serif'

});

};

})();

In example # 4, we have included some implementation code so that our jQuery plugin actually does something. I this case, for each element returned in the jQuery collection, we change the CSS so that the element’s color is green, the background color is yellow, and the font is “Comic Sans”. Not too pretty, but just enough so that when we run the code, we can see that our plugin is working perfectly. More importantly, if you vary the CSS selector that is passed-in, you will see that our plugin behaves differently in each case (i.e. the HTML elements that become green with yellow backgrounds and Comic Sans font will vary).

Full Working Code for this Article
http://jsfiddle.net/wdUtL/

Full Working Code for this ArticleWith Comments
http://jsfiddle.net/ewTez/

Summary

In this article we discussed the absolute basics of how to author a jQuery plugin. We covered how to wrap your plugin in a self-executing anonymous function, how to extend the jQuery prototype, and how to iterate over each element in the jQuery collection returned by your plugin.

This example provided in this article was very simple. The main purpose of the article was to provide the overview needed so that you understand how a jQuery plugin is constructed, how it works at the most basic level, and importantly how the value of the JavaScript keyword “this” will vary a bit, depending on where you are in the code.

With a firm understanding of how a jQuery plugin is constructed, we can move on to best practices and more intermediate jQuery plugin authoring techniques.

Helpful Links for jQuery plugin authoring basics

http://docs.jquery.com/Plugins/Authoring

http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/

http://blog.kevinchisholm.com/jquery/jquery-each-method/

Feb192013 by dcm1 Comment

Mustache.js – The Absolute Basics

JavaScript-Templating

If you’ve been writing client side code for more than 15 minutes, you have likely had to consume and present JSON data. This is becoming a common scenario for front-end web developers.

The problem is that in most cases, you are inserting the return values into the same markup. So this means that you might be writing your own for-loops and element creation functions. But even with the help of the mighty jQuery, this can get tedious. More importantly, you are likely writing the same code more than once, each time customizing it for the specific situation. Well, regardless of the details, if this even partially describes some of the challenges you have faced lately, then it is likely that a client-side templating solution is needed.

Enter Mustache.js

Mustache.js is a lightweight JavaScript library that provides client-side templating. The feature-set is intentionally small. While some may see this as a drawback, I agree with their approach. The footprint is so small, that it is really a non-issue when it comes to considering the additional HTTP request (and you can, of course, concatenate it to your main JS file if you so choose). Websites such as Twitter, CNN and eBay, Inc. have turned to this JavaScript library, which is a testament to its power and usefulness.

The syntax is pretty simple

var foo = Mustache.render(TEMPLATE,DATA);
document.getElementById(SOME-ELEMENT).appendChild(foo);

1 2	var foo = Mustache.render(TEMPLATE,DATA); document.getElementById(SOME-ELEMENT).appendChild(foo);

TEMPLATE = Your HTML code with {{VALUE}} placeholders
DATA = Your JSON Data

Example # 1

(function(){
    //pass a template and some JSON data to Mustache.js
    var output = Mustache.render("{{name}}&lt;br /&gt;{{city}}",{
        "name": "Joe Smith",
        "city": "London"
    });

    //append the HTML that Mustache.js has created to the DOM
    $('#container').append(output);
})();

(function(){

//pass a template and some JSON data to Mustache.js

var output = Mustache.render("{{name}}<br />{{city}}",{

"name": "Joe Smith",

"city": "London"

});

//append the HTML that Mustache.js has created to the DOM

$('#container').append(output);

})();

Here is the fully-working JSFiddle.net link for Example # 1: http://jsfiddle.net/MsuPp/

In Example # 1, we call the render() method, which is a static member of the Mustache object. This method takes two arguments: the templated markup and the JSON data. This is not the most efficient way to utilize the method, but it is a good way to demonstrate how simple it is. Just create your HTML wtih the {{tag}} syntax where you want your output, and provide some data. Then use jQuery to append the return value of this method call to the element with the id of “container”.

Example # 2

<!-- this is the HTML template -->
<script type="text/html" id="template">
		<h1>My Favorite European Cities</h1>
		<ul>
			{{#cities}}
			<li>{{name}}</li>
			{{/cities}}
		</ul>
</script>

<!-- this div is empty on page load -->
<div id="container"></div>

<script>
	(function(){
		//this is our JSON (data)

		var data = {
			"cities": [
				{"name": "London"},
				{"name": "Paris"},
				{"name": "Munich"}
			]
		},

		//get a reference to our HTML template
		template = $('#template').html(),

		//tell Mustache.js to iterate through the JSON and insert the data into the HTML template
		output = Mustache.render(template, data);

		//append the HTML template to the DOM
		$('#container').append(output);
	})();
</script>

<h1>My Favorite European Cities</h1>

<ul>

</ul>

</script>

(function(){

//this is our JSON (data)

var data = {

"cities": [

{"name": "London"},

{"name": "Paris"},

{"name": "Munich"}

]

//get a reference to our HTML template

template = $('#template').html(),

//tell Mustache.js to iterate through the JSON and insert the data into the HTML template

output = Mustache.render(template, data);

//append the HTML template to the DOM

$('#container').append(output);

})();

</script>

Here is the fully-working JSFiddle.net link for Example # 2: http://jsfiddle.net/WhxMa/2/

Mustache.js spares you the headaches of writing the same JSON iteration / DOM creation code over and over with each project.

In Example # 2, we use a slightly more advanced approach. First, note the SCRIPT tag with the id of “template”. Instead of giving the type attribute a value of “text/javascript”, we use type=”text/html”. Since this makes no sense to the browser, the text node inside of the SCRIPT tags is ignored. But at the same time, that same text is available to us, so it is a great place to store template markup.

Inside of this SCRIPT tag, we have the opening and closing {{#cities}}{{/cities}} placeholders. This is used as a loop. What it does is tell Mustache.js: “Hey for each one of the elements in the ‘cities’ array, populate the markup accordingly.” So, Mustache.js iterates over that same markup for each element in the “cities” array, and inserts the value of cities[“name”] where the {{name}} placeholder appears.

Summary

These example are very basic and there is much more to dive into with Mustache.js. My hope is that this post has provided an overview that, at minimum, helps you to begin understanding and implementing this library.

Helpful Links for Mustache.js

https://github.com/janl/mustache.js/

http://mustache.github.com/

http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-using-the-mustache-template-library/

http://www.youtube.com/results?search_query=Mustache.js

Feb132013 by dcm3 Comments

What is the Difference Between Scope and Context in JavaScript?

JavaScript

In JavaScript, scope and context are not the same thing, and it’s important to understand the difference between them. Fortunately, the answer is short and simple.

Why Should We Care About Scope and Context ?

When interviewing front-end developers, I usually try to include a question about scope and context in JavaScript. I always ask what the difference is, and I am often surprised by the answers I get. It seems that even those with some experience have difficulty answering this question.

The answer is short and simple: Scope pertains to the visibility of variables, and context refers to the object to which a function belongs.

Scope in JavaScript

Scope has to do with the the visibility of variables. In JavaScript, scope is achieved through the use of functions. When you use the keyword “var” inside of a function, the variable that you are initializing is private to the function, and cannot be seen outside of that function. But if there are functions inside of this function, then those “inner” functions can “see” that variable, and that variable is said to be “in-scope”. Functions can “see” variables that are declared inside of them. They can also “see” any that are declared outside of them, but never those declared inside of functions that are nested in that function. This is scope in JavaScript.

Context in JavaScript

Context is related to objects. It refers to the object to which a function belongs. When you use the JavaScript “this” keyword, it refers to the object to which function belongs.

Scope refers to the visibility of variables, and content refers to the object to which a function belongs.

For example, inside of a function, when you say: “this.accoutNumber”, you are referring to the property “accoutNumber”, that belongs to the object to which that function belongs. If the object “foo” has a method called “bar”, when the JavaScript keyword “this” is used inside of “bar”, it refers to “foo”. If the function “bar” were executed in the global scope, then “this” refers to the window object (except in strict mode). It is important to keep in mind that by using the JavaScript call() or apply() methods, you can alter the context within which a function is executed. This, in-turn, changes the meaning of “this” inside of that function when it is executed.

Summary

As a front-end developer, you can surely appreciate what an important topic this is, and how critical it is to understand the difference between scope and context in JavaScript. These two subjects become very important as soon as you have to write or edit even intermediate-level JavaScript, and your ability to comfortably and confidently write / edit JavaScript will only improve once you have a good working knowledge of the difference between scope and context. The good news is, it’s not that difficult to understand and once you get it, you’ve got it.

Helpful Links for understanding the difference between scope and context in JavaScript

What’s the Difference Between Scope and Context in JavaScript ? | Skillshare

Understanding Scope in JavaScript – Function Level Scope | Kevin Chisholm – Blog

Understanding Context in JavaScript – Object Literals | Kevin Chisholm – Blog

Nov42012 by dcm4 Comments

Two Ways to Dynamically Append an Element to a JavaScript Array

JavaScript

There are two ways to dynamically add an element to the end of a JavaScript array. You can use the Array.prototype.push() method, or you can leverage the array’s “length” property to dynamically get the index of what would be the new element’s position.

I have provided candidate pre-screening services for recruiters in the past, and one of the classic JavaScript interview questions is: “Name two ways to dynamically append an element to a JavaScript array.” Some folks nail that question, but some are left scratching their heads. So I thought I’d quickly re-visit the logic behind this concept.

At first glance, some might say: “Well, you are the programmer. So you know how long the array is and can dynamically append an element by doing the following: foo[x] = newElement. Right?” Well, yes, but that is not what we are really trying to do.

Why Dynamically Append an Element to a JavaScript Array ?

I think that most programmers will agree that what you want in this situation is to be able to add an element to the array, regardless of the length. What you want to assume is that you will not know the length. And from a pseudo-code perspective, you want to say: “Hey, I have an array named ‘foo’ and however long it is, add this new element named ‘newElement’ to the end of it.” I think that when you can accomplish that, you have significantly more power.

Array.prototype.push() – Example # 1

In Example # 1, we used JavaScript’s Array.prototype.push() method. This wonderful little utility adds whatever you pass it to the end of the array.

The syntax is: yourArray.push(WhatYouWantToAdd)

It’s literally that simple.

Using the array’s “length” property – Example # 2

In Example #2, we leverage the “length” property of the array. The reason this works so well is that the value of an array’s “length” property will always be exactly one higher than the index of the last element in the array. Why? Because while array indexes are zero-based (i.e. the first element in the array is element 0, and the second element in the array is element # 1, and the third element is element # 2, etc…), the array’s “length’”property is a one-based value (i.e., if there are three elements in the array, the length is: 3).

So, if the array “foo” has three elements, foo[2] is the last element in the array, and the value of foo’s “length” property is “3”. Therefore, foo[3] does not exist yet (remember foo[2] is the last element).

Since we may not always know the length of the array when we need to dynamically append an element by simply adding a new element to the end, we can reference foo[.foo.length]. This way, no matter how many elements are in foo, we can simply assign the new element to foo[.foo.length].

Helpful Links for JavaScript Arrays

JavaScript for Beginners | Arrays: Adding and Removing Elements

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

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

Summary

There are two ways to dynamically append an element to the end of a JavaScript array. You can use the Array.prototype.push() method, or assign the new variable to the index that is equal to the array’s “length” method.

Sep172012 by dcmNo Comments

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

jQuery

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/

Aug132012 by dcm1 Comment

CSS Absolute Positioning – The Absolute Basics

CSS

Absolute positioning is one of the four types of CSS “position” values

When an element is given absolute positioning, the following behavior takes place: 1 – The element is positioned in the top-left-most corner of the nearest parent element that has positioning (this is the default), 2 – If no parent elements have positioning, then the element is positioned in the top-left-most corner of the browser window and 3 – You can use the “top”,”left”,”bottom” and “right” properties to place the element absolutely as you need.

Example # 1

<div>
    <div>
        <div></div>
    </div>
</div>
<style>
.grand-parent{
    width:600px;
    height:600px;
    background-color:yellow;
}
.parent{
    width:400px;
    height:400px;
    background-color:red;
}
.child{
    width:200px;
    height:200px;
    background-color:green;
}
</style>

<div>

</div>

<style>

.grand-parent{

width:600px;

height:600px;

background-color:yellow;

}

.parent{

width:400px;

height:400px;

background-color:red;

}

.child{

width:200px;

height:200px;

background-color:green;

}

</style>

In Example # 1, we have set up three container DIVs. If you look at the class names, you’ll see that there is an outermost DIV: “grand-parent”, an inner DIV: “parent” and an innermost DIV: “child”. When you look at the jsFiddle.net example, there is simply a big yellow box (the grand-parent), a smaller red box inside of the yellow box (the parent), and a small green box inside of the red box (the child).

I’ve set the height property for each element so that we don’t need to concern ourselves with any text nodes; so it’s just three empty DIVs, which look like a box, within a box, within a box.

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

Example # 2

<div>
    <div>
        <div></div>
    </div>
</div>
<style>
.grand-parent{
    width:600px;
    height:600px;
    background-color:yellow;
}
.parent{
    width:400px;
    height:400px;
    background-color:red;
}
.child{
    width:200px;
    height:200px;
    background-color:green;
    position:absolute;
    bottom:0;
    right:0;
}
</style>

<div>

</div>

<style>

.grand-parent{

width:600px;

height:600px;

background-color:yellow;

}

.parent{

width:400px;

height:400px;

background-color:red;

}

.child{

width:200px;

height:200px;

background-color:green;

position:absolute;

bottom:0;

right:0;

}

</style>

An absolutely positioned element will be positioned relative to the nearest parent with positioning.

In Example # 2, we gave the “child” DIV absolute positioning, and set the bottom and right properties to 0. When you look at the jsFiddle.net link, the green box is in the bottom-right-hand corner of the screen. The reason for this is that an absolutely positioned element will be positioned relative to the nearest parent with positioning (i.e. “absolute”, “relative” or “fixed”). If no parent (i.e. containing) elements up the DOM have positioning, then the element will be positioned relative to the browser window. So, in this case, the green box is positioned absolutely, relative to the browser window. Because the “bottom” and “right” properties are both set to “0”, the green box appears in the bottom-right corner. If you change it to “top:0;”, then the green box will appear in the TOP-right corner of the browser window.

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

Example # 3

<div>
    <div>
        <div></div>
    </div>
</div>
<style>
.grand-parent{
    width:600px;
    height:600px;
    background-color:yellow;
}
.parent{
    width:400px;
    height:400px;
    background-color:red;
    position:relative;
}
.child{
    width:200px;
    height:200px;
    background-color:green;
    position:absolute;
    bottom:0;
    right:0;
}
</style>

<div>

</div>

<style>

.grand-parent{

width:600px;

height:600px;

background-color:yellow;

}

.parent{

width:400px;

height:400px;

background-color:red;

position:relative;

}

.child{

width:200px;

height:200px;

background-color:green;

position:absolute;

bottom:0;

right:0;

}

</style>

In Example # 3, we gave the “parent” element relative positioning. This has no visual effect on the “parent” element, but it does change things quite a bit for the green “child” DIV. Because the “parent” now has positioning, the green “child” DIV appears in the lower-right-hand corner of the red “parent” DIV. This is because it is now positioned absolutely, relative to the red “parent” DIV. Here is the jsFiddle.net link for Example # 3: http://jsfiddle.net/4KUWc/

Example # 4

<div>
    <div>
        <div></div>
    </div>
</div>
<style>
.grand-parent{
    width:600px;
    height:600px;
    background-color:yellow;
    position:relative;
}
.parent{
    width:400px;
    height:400px;
    background-color:red;
    position:absolute;
    left:300px;
    top:50px;
}
.child{
    width:200px;
    height:200px;
    background-color:green;
    position:absolute;
    bottom:-50px;
    right:-50px;
}

<div>

</div>

<style>

.grand-parent{

width:600px;

height:600px;

background-color:yellow;

position:relative;

}

.parent{

width:400px;

height:400px;

background-color:red;

position:absolute;

left:300px;

top:50px;

}

.child{

width:200px;

height:200px;

background-color:green;

position:absolute;

bottom:-50px;

right:-50px;

}

In Example # 4, we have changed the red “parent” DIV’s positioning to “absolute” and given the yellow “grand-parent” DIV “relative” positioning. So let’s run down what is happening here:

The red “parent” DIV is positioned absolutely, 300px to the right, and 50px from the top of the yellow “grand-parent” DIV
The green “child” DIV is positioned absolutely, -50px from the bottom, and -50px from the right of the red “parent” DIV.

If you look at the jsFiddle.net link for Example # 4, you’ll see that the red box is now sticking outside of the right side of the yellow “grand-parent” DIV, and the green “child” DIV is sticking outside of the red “parent” DIV, 50px to the right, and 50px towards the bottom.

Here is the jsFiddle.net link for Example # 4:

Summary

CSS Absolute Positioning is quite a useful tool when it comes to nudging elements to exactly where you want them to be. So the key to mastering absolute positioning in CSS is to remember two rules:

An absolutely positioned element will be positioned relative to the nearest parent or ancestor element that is positioned relative or absolute
If there are no positioned parents, the element will be positioned absolutely, relative to the browser window

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