Approaches to Web Development for Bioinformatics

Medical Computing > Web Development for Bioinformatics > Web Development > AJAX > Objects

JavaScript Development and Objects

With AJAX you will be developing an entire side of the application in JavaScript and HTML. Tools and organization of code become important. The book is Ajax in Action by Crane, Pascarello, and James³⁸ discusses tools, code organization, and design patterns in some detail. The freely available Eclipse JavaScript editor provides basic syntax coloring that can help in writing valid JavaScript. Microsoft Visual Studio provides a similar editor with the addition of a JavaScript debugger that can be used to zero in on bugs from within Visual Studio or as triggered from IE.

When working with XHTML Strict a simple validity mistake in the XML format can prevent anything at all from showing. The Mozilla DOM inspection tool can be valuable in finding these problems. Naming XHTML files with a ".xml" suffix and opening them in the browser can help as well. The area a number of other tools available from the Mozilla project, including a CSS inspector and HTTP header inspector.

When developing AJAX applications it will be beneficial to organize JavaScript code in objects. JavaScript objects are not typed classes as in Java or C++ but associative arrays. An associative array is an array where the array elements can be accessed via a string based name. JavaScript objects can be created with the syntax

var myObject = new Object();

The following HTML page illustrates the use of JavaScript objects. The files are here: js_ojbect_example.html and object_example.js.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="object_example.js"></script>
</head>
<body>
    <form name="clickmeForm" action="#" method="post">
      <input name="clickmeButton" type="button" value="Show Object Properties" onclick="showObject()"/>
      <br/>
      <input name="clickmeButton" type="button" value="Show XML" onclick="showXML()"/>
    </form>
</body>
</html>

The HTML form has two buttons. The first button will call the function showObject(). That function in turn creates a GeneInfo object and lists its fields. The second button results in a call the method getXML() on the GeneInfo object. Here the JavaScript has been added directly to the HTML file. A better way would be to initialize all the events in an external JavaScript file.

Here is accompanying JavaScript file.

It illustrates the traditional JavaScript syntax for creating fields and methods for objects. Actually, a method is just a field that is a pointer to a function. JavaScript function pointers are similar to function pointers in C or but a function is actually an object in its own right.

The same thing can be achieved using JavaScript Object Notation (JSON), a core part of the JavaScript language:

The syntax for declaring a field or method is name: value. A third way to do the same thing that looks more like object oriented programming by allowing creation of the object with the syntax:

var geneInfo = new GeneInfo(3064, "HD", "huntingtin (Huntington disease)");

is this:

function GeneInfo(id, symbol, name) {
    this.id = id;
    this.symbol = symbol;
    this.name = name;
    this.getXML = function () {
        var xml = "<geneInfo><id>" + this.id + "</id><symbol>" + this.symbol + "</symbol><name>" + this.name +
                   "</name></geneInfo>";
        return xml;
    };
}

One of the problems with all of these examples is the function declaration inside the object constructor is that it will be created every time one of these objects is created and that could be inefficient if the function involved a lot of code. The problem can be avoided by use of the prototype keyword:

function GeneInfo(id, symbol, name) {
    this.id = id;
    this.symbol = symbol;
    this.name = name;
}

GeneInfo.prototype.getXML = function () {
    var xml = "<geneInfo><id>" + this.id + "</id><symbol>" + this.symbol + "</symbol><name>" + this.name +
               "</name></geneInfo>";
    return xml;
};

Previous Contents Next

References

Contributed Comments and NotesAdd a comment.

There are no user comments.

Please send ideas and opinions by email at alexamies@gmail.com.