CODESTOCK ON JAVASCRIPT 1.2 ENHANCEMENTS

As part of its continuing developer outreach efforts, Netscape holds informal events at the Mountain View headquarters called "CodeStocks" in which developers gather to hear a presentation on the latest Netscape technology followed by a question and answer session on the topic with development engineers. To make the same information accessible to a wider audience, Netscape is making the transcript of the most recent session available on DevEdge Online. This document is the transcript for the CodeStock held on March 20, 1997 on the topic "JavaScript 1.2 Enhancements in Netscape Communicator."

AGENDA 

• core JavaScript enhancements 
• layers
• window control methods 
• canvas mode in PR2 
• JavaScript Style Sheets 
• signed scripts 
• regular expressions 

CORE JAVASCRIPT ENHANCEMENTS  

The core JavaScript language has numerous enhancements in Preview Release 2 of Netscape Communicator. These include labeled statements, break and continue, the switch statement, do-while loops, and enhanced equality comparison with additional typechecking. The setInterval statement makes it easy to set repeating timouts, and both setInterval (for repeating timeouts) and setTimeout (for one-time timeouts) can accept a function name and arguments directly without the need to place the function call within a string. There is also an enhanced event model with an event object that specifies the kind of event and the X and Y coordinates at which it took place. These new features have already been documented online in the document What's New in JavaScript 1.2 for Navigator 4.0. 

LAYERS 

The LAYER tag has been supported since Preview Release 1 of Netscape Communicator, and its syntax is documented online in the Dynamic Layers Documentation. To see some demonstrations of the kinds of compelling pages this new feature makes possible, download the most recent Preview Release of Netscape Communicator and check out this page of Customer Layers Demos. 

Preview Release 3 of Netscape Communicator will bring many additional enhancements to the layer tag. The complete list of enhancements has not been finalized as of this writing, and there can be no guarantees regarding the functionality of Preview Release software, but planned enhancements include the following: 

• A new NOLAYER tag hides content from layer-enabled browsers.
• pageX and pageY attributes for LAYER make it possible to position a nested layer relative to the page's origin rather than relative to the enclosing layer's origin; this simplifies the development of pages which use multiply nested layers.
• Setting the visibility attribute to show makes a layer visible at all times.
• A new height attribute makes it possible to set a layer's height. 
• The width and height attributes establish the default dimensions of the unclipped area when it is not specified explicitly. 
• It is possible to specify left, top, width, height, and clip attributes as percentages of the containing layer's width and height.
• Every layer object has a document property.
• The layer's document object has arrays that enumerate the images, embeds, applets, links, anchors, forms and layers that are contained within that layer (but not within any child layers). 
• The arrays of the top-level document object (the window's document) enumerate elements only within the body of the document and not within child layers. 
• JavaScript code that exists inside a LAYER element is scoped to the containing layer. 
• A layer's contents can be changed on-the-fly by using the open, write and close methods of the layer's document object.
• The LAYER tag now accepts onload, onmouseover, onmouseout, onfocus and onblur JavaScript event handlers. 
• Event handling has been enhanced via a setCapture and releaseCapture mechanism. 
• The offset() and resize() methods for layers have been superceded by the moveBy() and resizeTo() methods, respectively, to achieve naming consistency with window methods. From now on, developers should use moveBy() and resizeTo() rather than offset() and resize().
• Layer state is maintained across a resize.
• New layer objects can be created on-the-fly via the Layer constructor function, layer = new Layer(width, [parent]); the new layer can then be populated either by calling document.write() or by setting the src property. 
• A new load method for layer, tentatively named layer.load(width, src), can be used to atomically set the width and src of a layer. 
• The src property for a layer is now readable. 
• When creating or changing a layer (by calling the load method, setting the src property, calling document.open/write/close, etc.) it is important to remember that these operations cannot be performed while the main document is still loading, and that only one layer can be changed at a given time. Changes to multiple layers must be done serially. To achieve this serialization, use the onload event handler for layers.  

In Preview Release 2, Netscape Communicator already has partial support for the recently-released draft proposal by the World Wide Web Consortium for Positioning Elements with Cascading Style Sheets, including the position, left, top, and z-index properties. Preview Release 3 of Netscape Communicator should feature almost full compliance with the latest draft proposal. In using these features, keep in mind that the proposal itself has not yet been finalized into a standard by the World Wide Web Consortium and is still subject to change.

QUESTION AND ANSWER SESSION ON LAYERS  

• How can code in one layer reference objects in other layers?

Suppose that we have two layers called Parent and Child. Layer Parent contains layer Child. 

If you have a reference to the Parent layer and need to get an object in the Child layer, use the Parent layer's array of child layers, retrieve the element for the Child layer, and use the Child layer's arrays of objects to find the appropriate object. 

If you have a reference to the Child layer and need to get an object in the Parent layer, use the parentLayer property of the Child layer object to retrieve the Parent layer object, then use the Parent layer's document property to find objects contained within it.

If you have a reference to a layer's document object and need to get the layer object itself, refer to layer.document.__parent__. This gets the document's immediately containing layer object. (The same technique works for getting the containing window of a document object.) In Preview Release 3, every JavaScript object has __proto__ and __parent__ properties which are non-enumerable, read only, and permanent.

In general, it is also possible to reference objects in any layer in the document by starting with the top level array of layers and navigating down into nested layers level by level until the desired layer and object are located. However, to achieve maximum reusability of layer code, it is better to use relative addressing (via the 'parentLayer' and 'layers' properties) which makes the navigation code independent of the structure of the current document.

• What kind of files can be the targets of a LAYER tag's SRC attribute?

A LAYER tag's SRC attribute specifies an external file which is displayed as the content of the layer. Currently, there are a few restrictions on the kind of file which can be specified. It's not yet possible to use an image or a page that contains frames as the SRC of a layer.

• Is transparency supported in layers?

Yes.  Layers are transparent by default. The use of transparent GIFs is also supported. 

Translucency (not merely transparency) can be supported using the new windowless plugin API. This kind of translucency applies to the plugin rather than to HTML content.

• When using the LAYER tag on my site, how do I provide backward compatibility for older browsers which don't support the LAYER tag?

One approach is to provide a rich, layer-enabled page for new browsers and a layer-free page for older, less capable browsers. Another option is placing all of the layer content in an external file and referencing it using the LAYER tag's SRC attribute.

A cleverer approach is to place content for non-layer-enabled browsers within a NOLAYER element. Layer-enabled browsers will ignore this element's contents and it will only be displayed by non-layer-enabled browsers. To make sure that older browsers don't display the LAYER element's source, put the LAYER source inside a <SCRIPT LANGUAGE="JavaScript1.2" SRC=/old?u=http%3A%2F%2Fdeveloper.netscape.com%2Fdocs%2Fpresentations%2Fcodestock%2Fjavascript%2F%26quot%3B%3CI&y=1999>external-file-path"> element and write the LAYER tag source using the JavaScript document.write command. Older browsers will ignore this SCRIPT element, its content won't be executed, and the LAYER tag source won't appear within older browsers. 

Danny Goodman has written an excellent article about  supporting multiple browser versions in View Source, Netscape's online magazine. 

• The offset() method for layers is being renamed moveBy() for consistency with the naming of window methods. Will offset() still be supported for backwards compatibility? 

It will probably still work in the preview releases. It may be removed from the final release. 

WINDOW CONTROL METHODS

Preview Release 2 of Netscape Communicator has added several new methods for controlling the size, position, and scrolling of windows, including moveTo, moveBy, scrollTo, scrollBy, resizeTo, and resizeBy. It is also possible to specify a windows size within a call to window.open. These new features have already been documented online in the document What's New in JavaScript 1.2 for Navigator 4.0. 

Preview Release 3 of Netscape Communicator will add support for the following methods:

• window.print() will bring up the print dialog.
• window.find() will bring up the search dialog.
• window.home() will take the window to the user's home page (set in Preferences).
• window.back() and window.forward() will move backward and forward through the history of pages displayed in a window or a frame. This replicates the behavior of the Back and Forward buttons and therefore will not move an individual frame back in its history but instead will move backwards in the history of the most recently changed frame just as the current buttons do.
• window.innerWidth and window.innerHeight will set the window's drawing area. (window.width and window.height, the former names of these properties in the window.open() method, have been deprecated, but will be maintained for backward compatibility.)
• window.outerWidth and window.outerHeight will set the window's outer dimensions, which are composed of the drawing area plus the surrounding "chrome."

CANVAS MODE

Preview Release 2 of Netscape Communicator has added support for "canvas mode" display which displays a page using the full screen with no surrounding window elements or "chrome." Documentation for the use of canvas mode in PR2 and a demo are available online at the Netscape Communicator What's Hot Page. For security reasons, to use canvas mode in PR2, the user must start Netscape Communicator with a special command line switch. This switch will be available for PR2 only. From Preview Release 3, the use of canvas mode will be restricted to signed scripts to ensure that applets can't seize control of the full screen without the user's permission.

STYLE SHEETS

Netscape Communicator is adding support for the control of HTML page layout and format using style sheets. Netscape will support both Cascading Style Sheets, which have been recommended by the World Wide Web Consortium as a standard for the static definition of formatting information, and Dynamic Style Sheets, which make the power of Cascading Style Sheets accessible from JavaScript scripts using a simple, intuitive syntax.

Style sheets enable the HTML author to specify the following kinds of properties for elements, blocks, or classes of elements:

• page layout (margins, borders, padding, etc.)
• character font size and style (bold, italic, etc.)
• text properties (case, underline, alignment, color, indentation, etc.)

Style sheets are useful because they:

• separate format and content
• maintain consistency of formatting across an organization or website
• make maintenance easier, faster, and cheaper
• simplify the exchange of information
• make it possible reformat information (without editing content) for different purposes such as:
• high/low bandwidth
• different display devices and screen sizes
• accessibility for the disabled

Full details about the syntax and functionality of style sheets are available in the online documentation for Dynamic Style Sheets and in the World Wide Web Consortium's Recommendation for Cascading Style Sheets, level 1.

REGULAR EXPRESSIONS 

Preview Release 3 of Netscape Communicator will add support for the use of regular expressions in JavaScript. Regular expressions in JavaScript 1.2 will be like regular expressions in Perl. They will provide the same basic functionality as regular expressions in Perl, and it will be easy for experienced Perl developers to learn to use regular expressions in JavaScript. To reduce the learning curve for developers without Perl experience, JavaScript regular expressions will provide a functional syntax which is simpler than that of Perl. 

Regular expressions in JavaScript 1.2 will support a parenthetical syntax for matching sub-expressions. It will also be possible to do replacement on matched sub-expressions in the same way this is possible in Perl using $1, $2, and so on. 

QUESTION AND ANSWER SESSION ON REGULAR EXPRESSIONS  

• Will Live Wire support regular expressions?

Yes.  We're trying to make client and server side JavaScript as similar as possible. 

SIGNED JAVASCRIPT  

Preview Release 3 of Netscape Communicator will add the ability to sign scripts with a digital signature and a capabilities based security model that will give the user flexible control over what resources a script is granted access to.

Today, the JavaScript security “sandbox" protects the user's system by preventing unsigned scripts from accessing local resources. This sandbox prevents JavaScript scripts from causing the kind of security breaches which have gained so much attention in recent months for certain other Internet development technologies. 

Signed JavaScript is needed because in order to provide additional power and functionality, scripts need to be able to get out of the sandbox and access local resources with the user's permission. Users need to be able to specify which scripts they will trust and grant this access to. Users already do the same thing when they purchase shrink-wrapped software, install it on their machine, and give it access to their local resources. 

At the outset, we should define some key terms: 

• The principal is the person or organization producing the script.
• A script is signed if it has a digital signature verifying the principal.
• A target is an action or piece of information that has controlled access.
• A Java archive (or JAR file) is a file that can hold signatures and other data, such as class files and scripts.

HTML files are being enhanced to support signing. The ARCHIVE attribute lets scripts refer to JAR files, and the ID attribute associates a script with a signature. 

Here are some code samples using these new attributes: 

<SCRIPT ARCHIVE=foo.jar ID=1> 
// your script here... 
</SCRIPT> 

<INPUT TYPE=BUTTON ID=2 
 onClick=“/* your handler */”> 

Scripts will be able to request privileges to determine what resources they have access to. They will do this by calling Java classes to gain access to targets. Here is some sample code showing how that can be done: 

var targ = netscape.security.Target. findTarget("UniversalBrowserRead"); 
var mgr = netscape.security.AppletSecurity. getPrivilegeManager(); 
mgr.enablePrivilege(targ); 

A few of the targets that scripts can request access to: 

• UniversalBrowserRead allows reading data from the browser that is normally private 
• UniversalBrowserWrite allows modifying data in the browser that is normally unmodifiable 
• UniversalSendMail allows sending mail in the user's name 

Java defines additional targets besides those listed above. 

A tool will be provided to sign scripts. All scripts on a page must be signed for any script to request privileges; this avoids security holes that would be created by having signed and unsigned scripts coexisting on the same page. It's not possible to sign javascript: URLs. 

It's important to be aware that moving HTML files from platform to platform on the server side may require that the scripts be resigned due to platform-specific differences in how the files are encoded. Windows, Mac, and UNIX platforms all represent text differently. For example, if an HTML file is moved from a UNIX server to a Windows server by FTP as an ASCII text file, the file will be mapped from one format to the other, the characters within it will be changed, and the digital signature will be invalidated because the file's binary image has changed. Resigning the script will solve the problem; moving the file between platforms in binary transfer mode will avoid it. 

In summary, scripts can be signed to show who produced them. Signed scripts may request privileges through Java, and scripts with privileges may access normally restricted information. This feature will dramatically increase the power of JavaScript scripts while preserving the security that users demand for Internet and intranet application deployment. 

QUESTION AND ANSWER SESSION ON SIGNED SCRIPTS 

• Can I trust things based on their source domain?

Currently, no. Scripts must request a privilege explicitly. Requesting a privilege may cause a dialog to come up asking for the user's permission to grant the privilege. Users may grant a privilege per instance, session, or even permanently.

A signing tool will be made available with Preview Release 3 of Netscape Communicator. This will make signing scripts easier and quicker.