Browse DevX
Sign up for e-mail newsletters from DevX


Introduction to JavaScript and DHTML : Page 3

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

Programming the Web Page Document Object Model (DOM)
In the case of the Web page Document Object Model, consider that some functions related to the browser itself, such as navigating to new pages and handling the recently navigated history, must be available to JavaScript. An object called the Navigator, which represents the root object and the browser itself, commonly exposes these functions. Always available, the navigator is never defined by the content the user loads. The Navigator creates instances of a Window class that holds and contains Web page documents. The Window class has its own set of functionality such as the parent coordinates of the window itself and the Web page document loading status. As the parent to the document, it also provides the event handling and events from the document that bubble up to the Window object, but can end up trapped there by application developers embedding Web browsers in their desktop programs.

Figure 2: A major browser and Web page objects.
Whereas the Navigator and instances of Window objects are predefined, a document object hierarchy can look different for every Web page although it conforms to a particular allowable DOM schema. Put plainly, the document is a hierarchy of the objects that make up the page and changes to it can directly change how a page looks and acts. The document hierarchy for a page gets created as a page loads into the browser and gets parsed, but you can modify the document hierarchy through script at any time. Web pages that do not conform to the allowable HTML syntax of the DOM will yield unexpected results. By default, a browser ignores badly formed HTML. As a result, these "bad" pieces never show in the document for that page. Although, the DOM is fairly well standardized by the W3C and the major browsers attempt to adhere to it, there are still some differences, especially with the newer features so consult your target browser's documentation. Figure 2 shows an overview of the more important objects available in the Internet Explorer DOM.

Note: Not all HTML tags or all objects available in the object model are included in Figure 2. Please refer to your browser documentation for complete details. Example 2 — A Better Data Grid, the WebGrid
The example I've created in this section expands on some of the concepts from the first example and shows how you can use the DOM to modify a page at runtime. In this case the page loads a scrollable table with some data and lets the user select a row with both hover and selected row functionality.

Figure 3 shows the WebGrid in action. As you can see, it is possible to make elements on a Web page look like a conventional Windows user interface.

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