• Choose a category
• All
• Classic-Fiction

JavaScript and Ajax

Ajax applications require you to write a lot of JavaScript code. Most of the time, you are called upon to write simple UI-driven code that refreshes the user interface following the state of the application and maps pieces of downloaded data to UI elements. If all you need to write is a few event handlers, any approach does work. When the quantity of code grows beyond a certain threshold, however, you need to lay out your client code using abstractions not unlike those you might use in a classic programming language—functions and objects.

I won’t stray too far from the truth if I state that JavaScript is such a flexible language that it can be used to write code that follows two radically different programming paradigms—functional programming and object-oriented programming (OOP). Which one should you choose and when?

Functional Programming in JavaScript

In functional programming, the building block of code is the “function,” as opposed to the “class” in object-oriented programming and the “subroutine” in procedural programming. A function is a unit of code that describes only the operations to be performed on the input. A function gets some input and returns some output; everything else is hidden from view.

As a functional programmer, you build your applications by pipelining function calls to create a super function that just gets the program’s input and returns the program’s output. There’s typically no layer where you process the input, store state, arrange a sequence of statements, update the state, and decide about the next step. A function is a like a value, and it can be used as an argument and be passed to other functions as well as used in any other context where values can be used.

In JavaScript, anonymous functions are the pillar of functional programming. An anonymous function is a direct offshoot of lambda calculus or, if you prefer, a language adaptation of old-fashioned function pointers. Here’s an example:

function(x, y) {

return x + y;

}

The only difference between a regular function and an anonymous function is in the name. In a functional context, you don’t strictly need to name a function, especially if you’re using it as a value that you pass around.

The jQuery library, which we’ll cover in the next chapter, more than ever called people’s attention to functional programming. In a Web environment, all you do is manipulate DOM elements. The jQuery library is effective because it allows you to manipulate DOM elements while enjoying the power (and to some extent the cleanness) of functional programming.

Objects in JavaScript

There’s a significant difference between objects in a qualified OOP language and JavaScript. In OOP languages, the class is a blueprint for actual objects you use. In JavaScript, you just have objects whose blueprint is that of a dictionary of data and functions. When you create a new object in JavaScript, you have an empty dictionary you can fill with anything you like.

Having said that, with a bit of work you can create (and reuse) custom objects and manage for them to inherit from existing objects and also behave polymorphically. This work is just what JavaScript object-oriented libraries do.

When it comes to adding layers to JavaScript to make it closer to a qualified OOP language and gain some more programming power and code reusability, you have to choose from two main approaches for extending the capabilities of the native JavaScript objects: closures and prototypes.

Before we get to that, however, a few words about the native Object type in JavaScript and its usage. You can use the new keyword to create a new dictionary-like object in JavaScript.

Next, you stuff data into it, and you can add methods by wiring functions to property names. Here’s an example:

var person = new Object();

person.Name = "Dino";

person.LastName = "Esposito";

person.BirthDate = new Date(1992,10,17)

person.getAge = function() {

var today = new Date();

var thisDay =