Posts Tagged ‘ajax’

Variable Conflicts in JavaScript

March 8th, 2009
Comments Off

It is quite common to find yourself with a heinous JavaScript error on a page that until recently seemed to work flawlessly. Perhaps you changed your JavaScript. Maybe you included a 3rd party script or a script from another domain onto your page. Now, everything that was once peachy has turned to sour grapes!

More than likely the problem is that with all the varying scripts on the page, variables from other functions will conflict with variables in the existing code, causing failures and errors, and even worse, overwrite variable values without any notification. It can take hours to track down variables that conflict between scripts before it finally works. Some developers figure that these kinds of issues are probably just inherent in client-side web development and use that as another “reason” as to why JavaScript is inferior.

I don’t think client-side development should be looked at as inherently quirky. Sure there are some browser nuances and environment issues that you can’t control, but you can develop very robust code that works well and adequately serves its purpose.

There are a few key things that you can do to make sure you code is clean and runs in it’s own scope.

First, anytime you create a variable in a function that should not be available outside of the function use the “var” identifier to initialize the variable and restrict it to the local scope.

var item_count = 20;

Second, I would recommend putting much of your code into JavaScript prototype objects. The prototype method of creating objects is JavaScript’s way of creating a class-like object (although prototypes are quite different from actual classes, read up on JavaScript prototypes for more info). In short they allow you to create a group of related function that can share assets between prototype functions (method equivalents).

// start by creating your initial prototype function, like a constructor
function Calendar(month, year)
    this.month = month;
    this.year = year;
    date = new Date();
    this.current_year = date.getYear();

// create functions that inherit characteristics of the prototype Calendar
Calendar.prototype.display_Month = function()
    var max_days_in_month = 31;
    ... continue body of function

// reference variables from the prototype using "this"
Calendar.prototype.display_Week = function()
    if(this.year < this.current_year)
        // return error of some kind
    ... continue body of function

Later in your code you can instantiate one or more of the prototype classes, each having their own scope and assets. This will keep them from conflicting with any other code.

cal_1 = new Calendar(5, 2005);

cal_2 = new Calendar(3, 2006);

If you abstract your code well enough, using the power of JavaScript in this manner allows you to create very reusable code that can be used in any application with any combination of JavaScript without problems. There are other things you can do to abstract your JavaScript and make it more functional, but these examples serve the purpose of resolving scope issues and get you on the road to cleaner, reusable code.

Development, JavaScript , , , , , ,

DHTML is not AJAX!

March 7th, 2008
Comments Off

AJAX seems to be getting grossly confused with interactive DHTML(JavaScript, DOM, CSS and HTML). This confusion has got to stop. It’s making me dizzy!

Okay, so I’m looking at this cool feature on the web. The CEO/CTO comes up behind me and starts looking too. “No problem”, I think to myself. Then he starts going off about how AJAX is cool (just because it says AJAX on the page), and how we should use it for something and how it’s such a great technology and that people have barely scratched the surface. Whoah dude… calm down! Something similar has happened to me a handful of times since then, all by very competent technology persons. 

When did really creative JavaScript work suddenly get mistaken for AJAX? It’s very clear to me that what AJAX actually is has been a fairly fuzzy picture for most people. Let me make this as clear as I possibly can. 

AJAX stands for Asynchronous JavaScript And XML. No more, no less. This denotes the ability to use JavaScript, with XML as the communication protocol, to send and retrieve data from another location (i.e. server) arbitrarily, as needed. This communication happens over an HTTP protocol. That’s it, that is AJAX. There really isn’t a whole lot more to it. Yeah, you can monitor your connections, have fancy functions that handle communication, process data in a particular way. Pure AJAX, according to the name would also ONLY use XML for communcation. However, it has been accepted to use plain strings and name-value pairs as well, when they were more suitable. I am okay with this as this still refers to the process of communication and the added flexibility is good.

What gets under my collar is when people start looking at all that flashy, dynamic interaction and call it AJAX. Certainly, AJAX has made it possible to manipulate data and objects in a MUCH more dynamic way. You are no longer stuck with static page data on your website, giving you much more to work with. However, calling this AJAX would be like calling it “SOAP”, or “XMLRPC”, or for the truly technology impaired, “ethernet”, just because it came through that little wire in the back of the computer. Perhaps you could could do what my 5 year old does and just call every web page you look at “Firefox” (insert desired browser name) just because you are in that program when you see it (I have actually had clients do this, so don’t laugh too hard). 

What needs to be made clear is the distinction between DHTML and AJAX. AJAX is simply another data layer which provides information. DHTML is ability to take that information and do all kinds of flashy, cool and very useful things with it. DHTML and AJAX can actually be used without the other. 

So, next time you see a very cool web application that is very visually impressive, make sure to give credit where credit is due. Give props to his ability to use AJAX, but appreciate his ability to make it useful and interactive. Understand the difference.

JavaScript, UI , ,

Sponsored Links

agile ajax black hat Cake PHP centering clifford stoll css cuckoo's egg energy energy drinks espionage flash Flex hacker jquery modular MVC objects optimization performance PHP script timer smarty smarty templates stylesheet up-time uptime variable scope web 2.0 Zend Framework