Browse DevX
Sign up for e-mail newsletters from DevX


Introduction to JavaScript and DHTML : Page 4

JavaScript is a simple yet powerful feature found in most mainstream browsers. You can implement advanced features in your browser applications without round trips to the server. In this article I'll explore what JavaScript/DHTML is capable of and explain when you should use it and why.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Creating Your Own Objects
One of the nicest features of JavaScript is that you can create your own object classes. They do have limitations such as not being inheritable, but they can contain and manage other objects as well as having properties and methods. An Object class has a Constructor function that creates the object by adding all properties and methods to it. JavaScript inherits the basic Object() and hands it to the constructor as the 'this' variable. Your constructor then can add properties and methods using this.x = 100;, and this.toString = myFunction; syntax as desired. Your constructor can then return the 'this' variable and the calling function gets an instance of the class.

The technique of adding methods into an object may not be immediately apparent. All functions when defined are prototypes objects. To be exposed as a method on an object they need to be set to a property on the object by using the address of the function prototype instead of the result. Basically, this is the difference between using myFunction and myFunction(x,y). There is a problem though, because JavaScript does not know that you intend a particular function for a given object. Nor does JavaScript distinguish between functions of the same name in different .js files to be different. Therefore if JavaScript runs across a myPrint function it may overwrite a previous myPrint function from a different file.

The solution depends on your desired effect. In the case where you'll never use the function or it won't have visibility anywhere but in the particular class, you can nest the function within the constructor. This is perfectly valid JavaScript syntax and defines the scope of the function prototype as only being within the constructor function. The second technique is to define the functions with a naming convention so that their names are always unique. This alternate method allows reuse of the function and inclusion in other objects since its prototype has public scope. Using Existing Objects in HTML, VML, VRML, XML, etc.
The basic purpose of the browser is to present a Web page to the user. In the first generation of browsers that meant exclusively HTML, which not only presented text and images but allowed a developer to specify the layout as well. As browsers and the Web matured, several other layout languages have emerged to handle more than just text and images.

VML in particular was created to handle drawing lines and symbols and associated tasks such as gradient fills and shading and so forth. This new language has its own tags beyond HTML that are interpreted by the browser and expose different functions and behaviors. While VML presents a rich two-dimensional toolkit to the Web designer, VRML presents a whole three-dimensional world modeling system where tags refer to shapes, light sources, and viewing angles.

And even while those examples expand the browser in new ways, XML as a simple and very HTML-like structure is also handled and presented with a collapsible and color-coded hierarchy. As a taste of how far you can go very easily using the browser, and also to show how creating your own objects can simplify coding, the following example creates an object to manage a whiteboard of VML lines as examples in Figure 4.

Eric Ranft is a technology executive and software architect consultant in the Seattle area who likes to occasionally do some bit twiddling. He has helped many software companies develop their products and Web sites as well as helping validate their business models and processes. Email: ranfters@attbi.com.
Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date