Object Orientation of JavaScript

Before we go into a lot of details on the object orientation of JavaScript, first look at some differences in the core components and functionality between server-side and client-side JavaScript. Both have objects that are specific to their runtime environment, so object initialization and creation occur at different times. Because of this characteristic, you will look at the language in two parts: client-side and server-side.

Client-side JavaScript is, at its lowest level, several core objects that are created when a page is loaded in the browser. In addition to these core objects, there are also derived objects that are created when certain tags are included on a page. These derived objects inherit some of the various characteristics of their parent object and also allow scripting access to the HTML tag's properties.

Understanding the hierarchy of the JavaScript objects is a very important item if you plan on doing any in-depth programming. You will get a better understanding of how parent and child objects interact as well as how they are referenced. To help with this understanding Figure below gives a graphical reprsentation of the basic client-side JavaScript Hierarchy.

As depicted in this diagram, all client-side objects are derived from either the window or navigator objects. Considering that this is an object based language, this structure makes complete sense. All objects on a given page are constructed within the browser's window, hence all bjects that JavaScript can create are descendants of the Window object. By using the Window object, a programmer is allowed to access the various frames, documents, layers, and forms on a page, as well as many other objects and properties.

The navigator object pertains to elements that are "part" of the browser itself. This specifically refers to the plug-ins installed and the MIME (Multipart Internet Mail Extension) types with which the browser is associated. Using the navigator object allows checking of the browser version, determining the plug-ins installed, and what programs are associated with the various MIME types registered on the system. There is also the ability to access other properties of the browser.

Like its client-side, server-side JavaScript has several core objects from which all other objects are derived. The root objects are the DbPool and database objects from which you can create connections to a database, as well as access cursors, stored procedures, and the result sets you generate. Figure below shows the specific server-side object hierarchy.

NOTE
Both of the server-side and client-side JavaScript languages are based on objects. Programmers familiar with Java will find this very similar to the Java language. There are not as many objects/classes in the JavaScript language, but the structure and manner in which you access them are similar.

---

Because of this object hierarchy, accessing the various objects and elements on a page is done by using the hierarchy itself. If you wanted to access a specific text field in a form on a page, you would do so using the following syntax:

window.document.formName.textboxName.value

TIP
With JavaScript, programers have the ability to create their own objects or extend the core ones defined by the language. The explanation of how to create your own objects-and some examples-is covered in the section on functions, in "Details of the Language." If you want to learn more about extending the functionality of the existing objects, look up objects with the prototype property in the reference section of this site.

---

Because JavaScript is object based, it automatically provides many advantages to using a modular approach to your programming. By creating your own objects and methods, you are able to better maintain the code with which you are working. You will be creating code that can be reused in other programs, locations, and instances. Why write virtually the same code twice (or many times), when you can create it once and pass the characteristics that differentiate it from other, similar objects?

Object based Technology

Since you are reading this article, it's assumed that you have programmed in at least one other language before, even if only for one semester in college. Going one step further, I bet the language you programmed in was either C++. Java, or Perl-with Java and C++ being object-oriented (OO). Java specifically is OO by virtue of having all created objects extending from core Java language classes.

For those of you unfamiliar with object-oriented programing (OOP), it is a concept that allows you to create reusable objects or classes in code. An object or class has associated with it various characteristics and functionality that define what kind of properties and states it can take on. Once these are created and defined, it is possible to create new instances-sometimes referred to as a "children"-that inherit the ability to have the same characteristics of their "parent" object.

To give you an example of how this might work, create a vehicle object. Part of the characteristics asigned to this vehicle object are the number of doors, the color, and the type (such as sports car or truck). In addition to these characteristics, define the ability to move or stop the vehicle. The pseudo-code for this type of object might look something like the following:

object vehicle(){
//Characteristics of the vehicle
num_doors;
color;
type;
//Methods used to move and stop the truck. Note that the move()
//method takes a direction as a property. This direction could
//be something like forward, backward, left, or right.
move(direction);
stop();
}

Now that this vehicle object is defined, it is easy to create new instances of it. A vehicle that is a car with four doors and is red can be easily created. You could also create a vehicle that is a truck with two doors and is black. In addition to creating these instances of the vehicle object, you have also made it possible to program in the ability to change the state of your instance. This is accomplished by specifying whether it is stopped or moving.

As an example in pseudo-code, the following creates a black, two-door truck that is moving forward:

//create the new instance of the vehicle
myTruck = new vehicle();

//Define the type, number of doors and color
myTruck.doors=2;
myTruck.color="black";
myTruck.type="truck";

//Define the "state" of the truck
myTruck.move(forward);

The basic process here is to create an instance of the vehicle object and then to assign characteristic values to it. It is these values that make it a unique instance of a vehicle, which you have specified as a truck.

As you can see in this example, the creation of the vehicle object allows you to easily create more vehicles with different characteristics. When programming, this "ease" translates into less code-something all programmers like to hear. Now that this object is defined, it is possible to create new instances that inherit its characteristics without having to redefine them. You are able to capitalize on any overlaps in characteristics within objects by doing this. The idea is to create a general, master object that gives you the ability to then derive child instances from it.

This can also be taken a step further by creating new objects-not instances-that inherit the parent object's characteristics. Doing so allows you to derive child instances from the child object that you have decided will inherit only certain characteristics. You could define a child object to only pass on the parent object's color characteristic to any child instances of its own. It is the concept of this object orientation that allows you to perform this modular type of programming.

The following pseudo-code example shows how you could create an airplane object based on the vehicle object:

//Create the new object that inherits the vehicle
objectairplane(){
//Inherit the vehicle object
this = new vehicle();

//Define the doors property, then assign it to the size
//property of the plane object
this.doors = "747";
this.size = this.doors;

//Assign the color and type of plane
this.color = "silver";
this.type = "American Airlines";

//Define the "state" of the plane
this.move(up);

//Now that the object is created with the values, return the
//object.
return this;
}

Not all languages support this concept, and there are other languages only based on its concepts. This concept definitely supplies advantages to the language, but it is not required to write good, effective, modular code. JavaScript is a perfect example of how a language has applied some of these concepts, but is not completely OO. It does this by being object based.

NOTE
Talking about OOP in further details is beyond the focus of a JavaScript article, but it is worth some investigation if you are a real programming enthusiast. Check out your local bookstore for a selection of titles on this subject. You can also visit Object Central on the Web for reference and links to OOP information.

---

So how does object based fit into the equation? It is very similar to OO except that it does not have all the functionality or characteristics. There are limited amounts of inheritance, scope, and functionality that you can perform with an object based language. This should not be taken as a mark against JavaScript, because it makes the language easier to learn and maintain for the developer. OOP is no easy beast to tackle and will provide many headaches before it is implemented correctly.

JavaScript also makes up for many of its OO limitations by allowing you to create your own object-like elements, as well as extend the core objects in the language by prototyping new properties. To get an idea of how this is done, take a look at JavaScript object orientation.

JAVASCRIPT VERSUS JSCRIPT, AND WHAT IS ECMASCRIPT?

JScript was based on the published documentation from Netscape, so it should have been the same thing as JavaScript 1.0. However, there were a few "features" that Netscape did not publish, as well as some functionality that was not recreated by Microsoft correctly. The result of this is that there are some discrepancies between JScript 1.0 and JavaScript 1.0 in Microsoft's first generation releases.

Since the release of these initial browsers, JavaScript was submitted and has become a standard, known as ECMAScript 1.0 (ECMA-262), with the European Computer Manufacturers Association (ECMA). Because of this standardization, it is now perceived that JavaScript is Netscape's implementation of ECMAScript and JScript is Microsoft's implementation.

The adoption of ECMAScript 1.0 occurred in June 1997 followed by its adoption by the international Organization for Standardization and International Electrotechnical Commission in April 1998 (ISO/IEC 16262). ECMAScript 2.0 was approved by ECMA in June 1998 and is on its path for complete adoption by these standard bodies.

So, what is JavaScript to the programmer? Well, in its purest form it is an object based, cross-platform, loosely-typed, multi-use language that allows a programmer to deploy many types of solutions to many clients. It not only involves adding fnctionality to Web pages as rendered within a browser, it also allows server-side processing for Netscape and Microsoft web servers.

JavaScript has also most recently been included in Microsoft's Windows Scripting Host to allow programmers to write scripts to be executed on the operating system itself. This functionality is similar to the old DOS batch files, but gives programmers more functionality and versatility in what they can accomplish. It is this type of advancement that has allowed the language to take hold in the computer world and continue to progress.

In addition to the benefits of these environments where JavaScript can be executed, there are security measures in place to protect end users against malicious code. Even though it is still young in terms of age, JavaScript, in its current version, is very mature and powerful. It is this functionality, ability, and versatility that positions JavaScript as the best solution for programmers.

Now that you've learned about what JavaScript is, you should now dive a little deeper into what it means to a programmer. Being programmers ourselves, we know that a few strategically placed words do not make a language useful. First, you'll look at the object based characteristics of JavaScript.

What Is JavaScript to a Programmer?

In the begining, there were Assembly and compiled languages. Later came scripting languages such as sed, awk, and Perl, which many programmers used to perform a variety of tasks. These were followed by, in the late 80s and early 90s, the Internet, which exploded into a technological revolution that allowed anyone with a modem to communicate and retrieve information from around the world. As the Internet grew in number of users, it was obvious that an increase in functionality was needed in the browsersbeing used and in the data they were rendering.

HTML, even with its advantages, was falling short of providing the control many developers wanted when creating Web pages and applications. This prompted the use of server-side programs to handle some of the page dynamics developers needed from their sites.

These programs helped Web developers by allowing them to increase a site's functionality and to process user-submitted information. However, CGI, or Common Gateway Interface, program had to generate a response that told the user to resubmit a request when he or she sent incorrect or incomplete information. This led to a lot of back-and-forth data transmission between a browser and a server. But, overall, it was a minor price to pay for the functionality received.

It became increasingly obvious that client-side intelligence was needed to replace some of the CGI functionality and error checking and decreasing the amount of time a user spent connecting to a server. This would also allow the Web site to offload some of its processing load to the browser machine, which meant an increase in the overall performance of a site.

It was partially this lack of client-side functionality and efficiency that helped spawn a new scripting language-one that could be executed within a browser's environment and not on the server. This language could be used to perform some client-side tasks such as form validation and dynamic page content creation-one that would put the programming into HTML publishing. Welcome to the birth of JavaScript.

On December 4, 1995, Netscape and Sun jointly introduced JavaScript 1.0, originaly called LiveScript, to the world. This language, unlike its server-based predecessors, could be interpreted within the new Netscape Navigator 2 browsers. As an interpreted language, JavaScript was positioned as a complement to Java and would allow Web developers to create and deploy custom applications across the enterprise and nternet alike. JavaScript gave developers the power to truly program-not just format data with HTML.

In addition to the client-side control developers desired, Netscape implemented server-side JavaScript. This allowed developers to use the same programming language on the server as they did in their pages for browsers. Database connection enhancements were added to the language (called LiveWire) allowing the developer to pull information directly from a database and better maintain user sessions. JavaScript had truly bridged the gap between the simple world of HTML and the more complex CGI programs on the server. It provided a common language for Web developers to design, implement, and deploy solutions across their networks and distributed the overall processing load of their aplications.

The next level of acceptance in the world of JavaScript was Microsoft's implementation of the language in its Internet Explorer 3 browser-its interpretation of the language was called JScript. Like Netscape, Microsoft also implemented the language on the server-side (JScript 2.0) that was done in tandem with its ASP, or Active Server Pages, technology.