The term object-oriented programming, while descriptive of the style of programming once you understand the model, can sometimes obfuscate the basic ideas behind OO programming when first learning a language. While object-based programming can be confusing initially to understand (and explain!), it quickly becomes second nature with experience.
Representations of all the information a computer presents to the user must be stored in its internal memory. Anything from image data to a HTML page's background colour is stored in memory. Much of the power of JavaScript is that this information is made available to the programmer for him or her to examine and change.
Nearly everything that makes up the HTML language has been made accessible to JavaScript for inspection and modification. Also, a number of actions -- or methods, to use the correct term -- have been created to accomplish anything from opening a new browser window to taking the absolute value of a number.
As you could image, there is quite a great deal of information available to the JavaScript programmer. To better organise the information, the properties (internal representations of information) and methods (actions) are grouped together in logical units, much like a directory would organise similar documents. For example, the properties and methods relating to an HTML document, such as its colour and the action to write text to the page, have been grouped together. Likewise, there is a grouping of properties and methods related to mathematics.
These groupings are what programmers refer to as objects. For now, a general conceptual understanding is all that is required to use objects productively, so don't fret over the details -- experience will prove to be a great teacher. It is important to know that methods and properties are accessed by typing the object name followed by a full-stop, and then the property or method. In the example on the previous page, the document object's writeln() method was called to write text on the screen. Text can be written to the screen using the following JavaScript construct:
document.writeln('*Insert text here*');
In the previous statement, the document portion of the statement doesn't do anything -- it's the writeln() method that accomplishes the action. However, because the writeln() method works on documents, it is grouped with the document object, and thus, like a directory name in a document's path, must be included.
The code in the box below is Hello World revisited, illustrating the use of different objects, methods and properties available in JavaScript and, more importantly, the ability to add interactivity to Web pages.
<html> <head> <title>JavaScript Hello World Again</title> <body> <script language="JavaScript"> <!-- start JavaScript document.bgColor = "#0000FF"; document.fgColor = "#FFFFFF"; function hi() { var dlogbox = window.confirm("Clicking the OK button will display 'Hello World!' in a dialog box."); if (dlogbox == true) { window.alert("Hello World!"); document.writeln("Thanks, I needed that."); } else { window.alert("Let me rephrase that . . ."); hi(); } } hi(); // end JavaScript --> <script> </body> </html> |
This example illustrates JavaScript's object model. After working through a few examples, the rationale behind objects will become clearer. Don't worry if you don't understand all of the JavaScript; this is just an example to whet your appetite for things to come. Enter in the code, save it, and view it with a browser.
A large part of the code listing is the HTML wrapper for the JavaScript. This code illustrates the difference between a user-defined function and an object oriented method. Notice the difference between the two alert box method calls [expressed as window. alert("...")] and the call to the 'hi' function [expressed as hi()]. The alert method is bound to the window object, whereas the 'hi' function is a standalone function. You will soon learn how to create your own functions, so for now just familiarise yourself with the concepts.
Understanding objects, methods and properties is one of the most difficult aspects of JavaScript. However, once you are comfortable with using an object-based language, and understand basic programming concepts such as program control and variables, all that is left to do is plug in the appropriate objects into that framework.