6 Advanced JavaScript Techniques You Should Know

13 Nov 09

brent lawrence

"6 Advanced JavaScript Techniques You Should Know"

javascript techniques js tutorials webdev advanced bestpractices programming

09 Nov 09

Narayan Pai

javascript tutorials bestpractices

03 Nov 09

rqogihu

programming javascript tutorials

26 Oct 09

Muhammad Kasim Baba

@Javascript Tags

11 Oct 09

Seçkin Anıl Ünlü

Here are some advanced JavaScript techniques and tips all web developers should know.

javascript techniques tutorials programming webdev

1. Closures to Extend Variable Scope
Simply put, closures allow variable scope to be extended past the common scope restrictions of functions.
20 more annotations...
- That inner function has access to all variables in its parent function’s scope. This comes in handy when creating methods and properties in object oriented scripts.
- To create a closure, you nest a function inside of a function.
- Because the method in the alert is actually calling a nested function, that method is able to read the value of the variable called newValue, even thought that variable is not within the scope of the anonymous function, or method.
- The power of the closure is revealed when that method (the inner function) is called, and values that normally wouldn’t be accessible are within "regional" scope and are thus able to be used as any other value.
- 2. Object Literals to Pass Optional Arguments
- Instead of passing the large number of arguments in the conventional fashion, which could unnecessarily complicate the function, you can pass just one argument which ends up being a collection of arguments declared in an object literal.
- First, the function itself is simplified
- Plus, the actual argument values are easy to read, and can easily be understood, updated, or modified, since the correlation between the values and the argument references are more direct.
- 3. Contextual Targeting of DOM Elements
- Whatever the case, it’s not impossible to access those unidentified DOM elements via JavaScript. Using what I call "contextual targeting", you can gain access to, and modify, almost any element in the DOM. As long as you have a map of the general template that contains the element you want to target, you can access that element and manipulate it the same way you would an element that has a class name or ID.
- The possibilities are endless with contextual targeting, and there are even more options available if you’re using a JavaScript library that normalizes browser differences and simplifies DOM manipulation.
- 4. Using Namespaces to Prevent Conflicts
- If you’re doing an extensive amount of raw JavaScript coding and suspect that additions could be made to the same pages you’re working on, you can prevent any future conflicts with your code by giving your code its own namespace.
- Object-oriented JavaScript implements namespace-like principles due to the fact that properties and methods are declared inside of objects, thus there are less likely to be conflicts.
- The first few lines create the namespace by checking to see if the "MY" object already exists. This object can be whatever you want it to be. Just pick a name that you don’t think will ever be used again.
- 5. Hybrid Application Development
- You can create powerful JavaScript applications if you use a combination of a JavaScript library and raw JavaScript code.
- There is no point in reinventing the wheel. You can implement your favorite JavaScript library and take advantage of its simplified Ajax calls, DOM methods, and normalization of browser differences.
- 6. Rendering Readable HTML
- Now the code is much more readable, and conforms to the manner in which HTML is rendered in an actual HTML page.

Panagiotis Tsarchopoulos

javascript techniques tutorials

Fabio Salzano

javascript libraries tutorials techniques closures object oop

10 Oct 09

Fabian Gonzalez Berger

interesantes tecnicas para utilizar JS

js javascript datosti webdesign diseñoweb

09 Oct 09

jrowlands

javascript webdev

Brian Hannah

javascript

Maan Mehta

"There have been a number of articles published over the years that discuss best practices techniques for JavaScript. I thought I would go a little bit beyond the scope of those articles and outline a number of advanced techniques and practices that I have personally used or read about that could be invaluable in certain circumstances.

This article doesn’t necessarily cover every detail of the methods I’m describing, but provides an overview, along with code examples, of some practical JavaScript coding techniques."

javascript techniques js advanced dev

alfred westerveld

javascript techniques js tutorials programming webdev

thierry mauduit

javascript js

com andsee

Javier Neira

//2. Object Literals to Pass Optional Arguments
function showStatistics(args) {
document.write("Name: " + args.name + " ");
document.write("Team: " + args.team + " ");
if (typeof args.position === "string") {
document.write("Position: " + args.position + " ");
}
if (typeof args.average === "number") {
document.write("Average: " + args.average + " ");
}
if (typeof args.homeruns === "number") {
document.write("Home Runs: " + args.homeruns + " ");
}
if (typeof args.rbi === "number") {
document.write("Runs Batted In: " + args.rbi + "");
}
}

showStatistics({
name: "Mark Teixeira"
});

showStatistics({
name: "Mark Teixeira",
team: "New York Yankees"
});

showStatistics({
name: "Mark Teixeira",
team: "New York Yankees",
position: "1st Base",
average: .284,
homeruns: 32,
rbi: 101
});
//Using Namespaces to Prevent Conflicts
if (typeof MY == "undefined") {
MY = new Object();
MY.CUSTOM = new Object();
}

MY.CUSTOM.namespace = function() {
function showStatistics(args) {
..................
}
showStatistics({
name: "Mark Teixeira",
team: "New York Yankees",
position: "1st Base",
average: .284,
homeruns: 32,
rbi: 101
});
}
MY.CUSTOM.namespace();

javascript tips bestpractices code snippets

function showStatistics(args) {
document.write("Name: " + args.name + " ");
document.write("Team: " + args.team + " ");
if (typeof args.position === "string") {
document.write("Position: " + args.position + " ");
}
if (typeof args.average === "number") {
document.write("Average: " + args.average + " ");
}
if (typeof args.homeruns === "number") {
document.write("Home Runs: " + args.homeruns + " ");
}
if (typeof args.rbi === "number") {
document.write("Runs Batted In: " + args.rbi + "");
}
}

showStatistics({
name: "Mark Teixeira"
});

showStatistics({
name: "Mark Teixeira",
team: "New York Yankees"
});

showStatistics({
name: "Mark Teixeira",
team: "New York Yankees",
position: "1st Base",
average: .284,
homeruns: 32,
rbi: 101
});
Object-oriented JavaScript implements namespace-like principles due to the fact that properties and methods are declared inside of objects, thus there are less likely to be conflicts. A conflict could arise, however, through object names. And very likely, the conflict will occur "silently", thus you may not be alerted to the issue immediately.
2 more annotations...
- if (typeof MY == "undefined") {
 MY = new Object();
 MY.CUSTOM = new Object();
 }
 
 MY.CUSTOM.namespace = function() {
 function showStatistics(args) {
 document.write("Name: " + args.name + " ");
 document.write("Team: " + args.team + " ");
 if (typeof args.position === "string") {
 document.write("Position: " + args.position + " ");
 }
 if (typeof args.average === "number") {
 document.write("Average: " + args.average + " ");
 }
 if (typeof args.homeruns === "number") {
 document.write("Home Runs: " + args.homeruns + " ");
 }
 if (typeof args.rbi === "number") {
 document.write("Runs Batted In: " + args.rbi + "");
 }
 }
 
 showStatistics({
 name: "Mark Teixeira",
 team: "New York Yankees",
 position: "1st Base",
 average: .284,
 homeruns: 32,
 rbi: 101
 });
 }
 MY.CUSTOM.namespace();
- Rendering Readable HTML