Chapter 2
Fundamentals of HTML Scripting
The Dynamic HTML object model has evolved from the object models that were included in Microsoft Internet Explorer 3.0 and Netscape Navigator 3.0. This chapter provides a historical perspective, comparing the old object models with the one provided by Dynamic HTML and demonstrating the level of support provided by the different versions of the browsers.
Scripting languages have evolved alongside the HTML object models. By embedding scripts in your documents, you can access the HTML objects to manipulate the elements on your Web pages. This chapter introduces this powerful programming technique.
The following topics are covered in this chapter:
- Dynamic HTML object hierarchy
The Dynamic HTML object hierarchy is the API for creating live and interactive pages. The objects in the hierarchy represent the browser and the elements of the HTML page. In this section, the object models supported by Internet Explorer 3.0 and Netscape Navigator 3.0 and 4.0 are discussed and compared to the Dynamic HTML object model supported by Internet Explorer 4.0.
- Authoring scripts
The Dynamic HTML object model is accessed by writing scripts and associating them with the HTML document. Scripts are associated with the HTML document by using a <SCRIPT> element, which contains executable code in a specified language. The <SCRIPT> element can also be used to associate external script libraries with the document.
- Choosing a scripting language: JavaScript vs. VBScript
The two primary programming languages used on the Web are JavaScript and VBScript. Both languages can fully manipulate the Dynamic HTML objects. This section helps you determine which language to use for specific circumstances.
- Advanced JavaScript techniques
This section discusses some of the JavaScript techniques used throughout this book. It is not meant to provide a language tutorial, but rather to familiarize you with some of the interesting features of the JavaScript language and their relationship to Dynamic HTML.
- Scripts and Web security
Security is a widespread concern on the Web. A programming language imposes limitations in order to ensure the clients' security, and a programmer must understand these limitations. This section introduces the security model. Additional security issues are addressed throughout this book.
Object Model
window
|
+---event
|
+---frames
|
+---history
|
+---location
|
+---navigator/ client
|
+---document
window--document
document
|
+---all
+------------anchors
+---applets
+------------body
+---forms
+------------frames
+---images
+------------links
+---location
+------------selection
+---scripts
If you are familiar with the existing Javascript language and existing object model, the extensions for the Dynamic HTML Object Model are a fully compatible superset. Any pages written for past versions of Internet Explorer or Netscape Navigator will continue to run in Internet Explorer 4.0. This also allows the web-developer to take advantage of their existing skills as they evolve forward. If you are new, learning how to program the HTML page allows you to extend and enhance your pages and your users experience in ways never before possible.
The object hierarchy is represented in the diagram to the left. The light green items are new objects in Dynamic HTML. The links allow you to drill into the object hierarchy.
Automatic Reflow
The ability to modify a document and have the document automatically reflow itself is the underlying innovation used throughout Dynamic HTML. Traditional browsers were basically just parsers that rendered the document's contents. If the document required to be changed, a request was either sent to the server for a new page, or an entire new page was scripted on the client. This was mostly required for any or all changes to the document. This web-sites home page and the table of contents pane to the left are great examples of this. The table of contents is completely interactive and changes without reloading or creating a new page.
Summary
Dynamic HTML removes all restrictions on access to the document. Dynamic HTML empowers developers with:
- HTML 4.0 and Advanced CSS Support
- Dynamic Styles
- Dynamic Content
- Powerful Event Model
- Client-Server Web Pages
- Multimedia Effects
The Dynamic HTML Object Hierarchy is the API for creating live and interactive pages. This hierarchy represents the browser and HTML page. This section discusses the object model supported by Internet Explorer 3.0 and Netscape 3.0/ 4.0 and compares it to Dynamic HTML.
Scripts behind the HTML page are authored using a <SCRIPT> tag that has been added to HTML. The contents of this tag are the executable code. This code can be written in any programming language that is supported by the client.
