Chapter 5. Scripting Mozilla- P1
In Mozilla, scripting plays important roles in the XPFE. Whether developers
refer to script access and security, user interface logic, XPCOM object
invocation, or script execution in element event handlers, scripting is so
integral to application development that Mozilla, as a development platform,
would be inconceivable without it.
The core scripting language used in Mozilla is JavaScript. Although it has
had a reputation as an unsophisticated language used mostly in web pages,
JavaScript is more like a first-tier programming language. Modularity, good
exception handing, regular expression enhancement, and number formatting
are just some features of the new JavaScript 1.5,[1]
which is based on the
ECMA-262 standard.[2]
JavaScript 2.0, due sometime late in 2002, promises
to be an even bigger promotion of the language.
Three distinct levels of JavaScript are identified in this chapter. A user
interface level manipulates content through the DOM, a client layer calls on
the services provided by XPCOM, and, finally, an application layer is
available in which JavaScript can create an XPCOM component. The
following section describes these levels in detail.
5.1. Faces of JavaScript in Mozilla
As you have already seen in some examples in this book, the user interface
uses JavaScript extensively to create behavior and to glue various widgets
together into a coherent whole. When you add code to the event handler of
one element to manipulate another -- for example, when you update the
value of a textbox using a XUL button -- you take advantage of this first
"level" of scriptability. In this role, JavaScript uses the Document Object
Model (DOM) to access parts of the user interface as a hierarchical
collection of objects. The section Section 5.3
, later in this chapter, discusses
this highest level of scripting.

page and the graphical user interface. Mozilla's implementation of the DOM
is fundamentally the same for both XUL and HTML. In both cases, state
changes and events are propagated through various DOM calls, meaning that
the UI itself is content -- not unlike that of a web page. In application
development, where the difference between application "chrome" and
rendered content is typically big, this uniformity is a significant step
forward.
5.2.1. What Is the DOM?
The DOM is an API used to access HTML and XML documents. It does two
things for web developers: provides a structural representation of the
document and defines the way the structure should be accessed from script.
In the Mozilla XPFE framework, this functionality allows you to manipulate
the user interface as a structured group of nodes, create new UI and content,
and remove elements as needed.
Because it is designed to access arbitrary HTML and XML, the DOM
applies not only to XUL, but also to MathML, SVG, and other XML
markup. By connecting web pages and XML documents to scripts or
programming languages, the DOM is not a particular application, product, or
proprietary ordering of web pages. Rather, it is an API -- an interface that
vendors must implement if their products are to conform to the W3C DOM
standard. Mozilla's commitment to standards ensures that its applications
and tools do just that.
When you use JavaScript to create new elements in an HTML file or change
the attributes of a XUL button, you access an object model in which these
structures are organized. This model is the DOM for that document or data.
The DOM provides a context for the scripting language to operate in. The
specific context for web and XML documents -- the top-level window
object, the elements that make up a web document, and the data stored in
those elements as children -- is standardized in several different
specifications, the most recent of which is the upcoming DOM Level 3

register an event handler with the button and DOM attributes on the
image element to change its source.
The DOM Level 1 and Level 2 Core specifications contain multiple
interfaces, including Node, NodeList, Element, and Document. The
following sections describe some interface methods used to manipulate the
object model of application chrome, documents, or metadata in Mozilla. The
Document and Element interfaces, in particular, contain useful methods for
XUL developers.
5.2.3.1. Using dump( ) to print to STDOUT
The code samples in this chapter use a method called dump( ) to print data
to STDOUT. This method is primarily used for debugging your code and is
turned on using a PREF. You can turn this PREF on using the following
code:
const PREFS_CID =
"@mozilla.org/preferences;1";
const PREFS_I_PREF = "nsIPref";
const PREF_STRING =
"browser.dom.window.dump.enabled";
try {
var Pref = new
Components.Constructor(PREFS_CID, PREFS_I_PREF);
var pref = new Pref( );
pref.SetBoolPref(PREF_STRING, true);
} catch(e) {}
This code is necessary only if you are doing development with a release
distribution build of Mozilla. If you are using a debug or nightly build, this
PREF can be set from the preferences panel by selecting Edit > Preferences
> Debug > Enable JavaScript dump( ) output.
5.2.3.2. getElementById
getElementById(aId) is perhaps the most commonly used DOM

create your own applications and want to track the data that interests you.
Once you have an object assigned to a variable, you can use the DOM
method getAttribute to get a reference to any attribute in that object.
The getAttribute method takes the name of the desired attribute as a
string. For example, if you add an attribute called foo to a box element, you
can access that attribute's value and assign it to a variable:
<box id="my-id" foo="this is the foo attribute" />
<script>
var boxEl = document.getElementById('my-id');