RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


JavaScript as a Foundation Language for Your Web Apps : Page 3

Get an overview of the JavaScript programming language, from its basic structure and underlying paradigms to its high-level constructs, concepts, libraries, and functionalities—all of which are powering the current generation of web applications.

Newer JavaScript Features
So far, you have examined JavaScript features that are standardized in the ECMAScript 1.3 specification (which dates back to year 2000) and are supported by all modern browsers. However, the JavaScript language has continued to evolve, and some browser makers have proposed and introduced many new features with the expectation of making them available in the next ECMAScript specification.

For example, recent versions of Mozilla Firefox offer new functionalities that streamline the language a bit and borrow from other popular programming languages. This section presents a brief overview of the most notable additions. When you use these features, remember to specify the right version of JavaScript you want to use in your script header, as follows:

<script type="application/javascript;version=1.7">

JavaScript 1.6 (supported by Firefox 1.5 and later versions) adds new methods to the system classes, such as Array, to enrich them with filtering and map/reduce capabilities. Listing 5 demonstrates some of these methods while this article contains a wider set of examples.

JavaScript 1.7 (supported since Firefox 2) introduces constructs such as generators and list comprehensions, which are popular in Python. Generators are specialized functions that generate (potentially unlimited) series of values and yield one value at a time when requested. They are useful for iterative algorithms. List comprehensions are a specific use of generators for quickly initializing arrays with defined sets of values. Listing 6 demonstrates generators and list comprehensions.

Take a look at the Firefox release notes for the various versions of the browser and their underlying JavaScript engines to learn more about these new features. Listing 7 provides a comprehensive example that uses many of these features.

Libraries and DOM Manipulation
When working on web applications, you can use JavaScript to affect all the aspects of the application:

  • The controller logic, which defines how to respond to user events
  • The presentation layer, which defines the look and feel and animated behaviors
  • The network layer, which handles communications and data transfer to and from the server

Even though you could implement all the handling code on your own, relying on existing libraries is usually better. These libraries provide multiple benefits:

  • They abstract away browser quirks and discrepancies.
  • They standardize access to the DOM and provide helper functions for frequent operations.
  • They implement popular functionalities (such as array iterators and cross-site AJAX calls) when the browser does not directly supported them or ECMA has not yet standardized them.

Popular libraries, such as JQuery or Prototype, leverage all the language features that you have learned so far, have an extensive community to support them, and are often included into other development frameworks, such as Ruby On Rails.

As an example, consider the snippet in Listing 8, which is built on top of JQuery. Among the things the library enables you to do are use complex CSS selectors to select DOM elements and chain multiple operations together.

2D Graphics
In addition to DOM manipulation, modern web applications rely heavily on the ability to display complex graphics such as charts and overlays along with text. To allow this in the past, you would use server-side calls to generate the images or embed Flash scripts in your pages. However, these approaches limit the possibilities for interaction with the user and/or add unnecessary complexity to the architecture.

If you want to remain in the JavaScript domain for your graphics-display solution, you can use the Canvas element. Canvas is a new HTML tag, originally introduced by Apple to provide advanced graphics to dashboard widgets. It can represent 2D primitives and you can use JavaScript to manipulate and animate its contents. All major browsers except Internet Explorer support Canvas, and you can use the ExCanvas library for IE. The following snippet creates two alpha-blended rectangles on the screen:

<script type="application/x-javascript"> 
function draw() { 
  var canvas = document.getElementById("canvas"); 
  if (canvas.getContext) { 
    var ctx = canvas.getContext("2d"); 
    ctx.fillStyle = "rgb(200,0,0)"; 
    ctx.fillRect (10, 10, 55, 50); 
    ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; 
    ctx.fillRect (30, 30, 55, 50); 
<canvas id="canvas" width="150" height="150"></canvas>  

This is just a simple demonstration, but once you start exploring you will be amazed at all the possibilities. Check John Resig's implementation of the Processing language, Algorithm in Ink, or even a playable version of Super Mario!

Only Scratched the Surface
You have gotten an overview of the JavaScript programming language, from its basic structure and underlying paradigms to its high-level constructs, concepts, libraries, and functionalities—all of which are powering the current generation of web applications. However, you have just scratched the surface; many topics still remain to be explored.

First of all, performance is a factor you should always consider when implementing your code. Even though modern and next-generation engines, like Mozilla's TraceMonkey, Safari's Squirrelfish, and Google's V8, promise outstanding speeds and on-the-fly native compilation, you should always think about how to improve the performances of your application. This is even truer nowadays, as the browser handles more and more computing tasks on its own. Techniques like JavaScript minification and tools like Yslow and Cuzillion may help in your search for speed.

Also, this article focused on scripts that live within online web pages, but you may use JavaScript for server-side operations (like using standalone engines such as Mozilla Rhino). You can also employ plugins, like Gears, that provide support and JavaScript APIs for creating complete applications that can work offline and access local storage and computing power.

Each of these topics is worth studying further, but hopefully this article provided the core knowledge to help you get started.

Riccardo Govoni has been working since 2003 as a J2EE developer on a variety of applications ranging from financial services to middleware in the IP television field. He currently works for Google as a software engineer. He is a Sun Certified Java Programmer (SCJP).
Email AuthorEmail Author
Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date