• Quick access
  • Homepage (fr)
  • International
  • François's Blog
  • Frédéric's Blog
  • Maths (fr)
  • Computer Science (fr)
  • Programming (fr)
  • Our games (fr)
  • Video games (fr)
• Special pages
  • Log in (fr)
  • Forum
  • Authors (fr)
  • Site Map (fr)
• Parent directories
• Current directory
  • Page d'accueil
  • Plan du site
  • Mises à jour
  • International
  • Maths
  • Informatique
  • Jeux
  • Contacts

An experimental implementation of javascript in Amaya

Introduction

Presentation

The goal of the project is to implement Javascript - aka Ecmascript - and DOM in Amaya. I have already integrated "SpiderMonkey", the Mozilla's interpreter, but there is still a lot of work to do for DOM. As I wrote to the Amaya mailing list, this project is motivated by the fact it follows two main purposes of Amaya :

1. Creating a software that demonstrate W3C technologies

   Javascript is not a W3C standard but is regarded by several people as a basic feature of Web browsers. Hence it is a bit paradoxical to have in the one hand state-of-art W3C technologies and on the other hand no scripting capability.

   DOM is part of the W3C specifications and so it is natural to implement it if we want to achieve the goal of a W3C browser/editor. But I think we can moreover get features that other browsers do not have :

   • Implementing DOM in XML languages other that XHTML. For instance SVG and MathML have their own DOM implementations, described in their specifications, but as far as I know, no browser implement them.
   • Using DOM inside an authoring tool. For instance DOM can be used to let the user create his own authoring functionalities with a script.
2. Being used by every level of users to produce documents conformed to W3C specifications

   Javascript is both for a beginner (because the syntax is simple) and an advanced user (because it allows sophisticated AJAX interface). So an implementation in Amaya (with state-of-art XML languages) is required for the latter and a help to easy write scripts conformed to W3C specification is useful for the former (sadly enough, a lot of them use a non-standard DOM, specific to Internet Explorer).

If you have any comment or want to help me, then you can write to the mailing list : www-amaya (discussion about general issues) or www-amaya-dev (technical discussion).

Installation

1. Download and compile Amaya using the CVS version following the instructions given on the website
2. Install the development files for the SpiderMonkey. The Debian package is libmozjs-dev
3. Apply the patch makefile.diff to Amaya/amaya/Makefile.in
4. In Amaya/WX/Options, add the flag -D_JAVA to AMAYA_OPTIONS=
5. In Amaya/config/amaya.profiles, remove the # before +javascript_dom
6. In Amaya/amaya, compile the files EDITORactions.c, init.c, javascript.c

TODO : modify the configure.in to generate a configure script that accepts the option --with-javascript.

Overview

Switching ON/OFF the Javascript engine

Amaya is both a browser and an editor : on the one hand you expect to find the same features as the other browsers but in the other hand you want specific authoring tools. This issues have already be met with links or forms and are even more true in the case of scripting. Because when you edit a document, you do not want the scripts to interfere with your actions, the Javascript engine of Amaya can be switch ON/OFF.

To avoid the use of memory by the Javascript engine - not supposed to be used in all Web pages - and for security reasons, it is initially switch OFF when a page is (re)loaded. Of course an option could be to automatically switch ON the Javascript engine. The Javascript engine is also switch OFF as soon as SpiderMonkey find an error or when the user modify the document.

When you are writing your script, you can make mistakes and get an infinite loop. Hence during an execution, the routine that checks the actions of the user (TtaHandlePendingEvents) is regurlarly called, so that it is always possible to interrupt the script. As an example, try to execute something like :

while(true);

For the sake of simplicity, I chosed in a first time to only allow the execution of scripts in one document at a time and in formatted view.

Executing scripts

Once the javascript engine is ON, all the scripts contained in the document are loaded and executed. The javascript functions are not generally called just after page is loaded but rather after an event such as onclick. Such events are not implemented yet but as for links and forms, Amaya should have a different behaviour.

When editing a script, the user often wants to do debbuging actions. A dialog box where the user can enter a command is available. This also allows to execute functions that are normally called after an event. Other browsers allow to execute a command using "javascript:" in the adress bar. Must this feature be implemented ? Also, because all the XML documents can not contain <script> element - for instance MathML or SVG documents - a menu allows to choose and execute an external script in the current document if necessary. This is not implemented yet.

Finally, when an error occured during a script execution the file, the line and the message error are displayed. This helps the user to debug the code.

Writing scripts

There are two classical ways to use Javascript in Web pages. Either you directly enter your code in the source of the document inside a <script> element, or you use an external script whose location is described by the src attribute of a <script> element. Amaya already allows the first method (using XHTML -> Structure -> Script) but I also put this entry in the Javascript/DOM menu. For XML document, Amaya should add a CDATA section rather than a Comment. An entry to "Add an external script" is also available.

For entering the Javascript code, I add the (*.js) extension to the list of known files, so the user can open a javascript file as text and edit the source code. Amaya is not likely to propose more than other programming software. Nonetheless, DOM 1 specification indicates that "DOM names tend to be long and quite descriptive in order to be unique across all environment" so we can imagine a DOM panel to insert these names in the source code.This could help users to respect the DOM standard.

Status of the implementation

Javascript in Web pages

Amaya can execute scripts contained in (X)HTML documents, in the same way as other browsers do. The script must be either in the <head> or in the <body> and the code inside a <script> - possibly with HTML comment/CDATA section. Also, you can use the src attribute to use an external js file.

The interpretation of external js file only worked with local file, so I have to rewrite it.

For the moment, Amaya does not handle Javascript events such as onclick. Nevertheless, it is always possible to reproduce the action using the "Execute a command" form where you copy and paste the attribute.

The javascript objects, methods and properties

The Javascript code is handled by SpiderMonkey and as a consequence, at less all the scripts that do not require the intervention of Amaya are available (variables, for, do-while, if-else...). As an example, I made a little game.

Additionaly, a structure compatible with the one of classical browsers has been integrated to ask Amaya to give its properties or to make actions:

Window (global object)
  |
  |_ Navigator
  |
  |_ Screen
  |
  |_ History
  |
  |_ Location
  |
  |_ Document

The object Document is described in the next section, it is actually part of the DOM specification. To get more information about the properties and methods of the other objects see javascript.h andjavascript.c. Note that as in Firefox, Window is not really the name of the global object, but one of its property that returns itself.

All the properties and methods common to other browsers have been listed in javascript.h, but the implementation in javascript.c is not finished yet. Nevertheless, some important features are avalaible among the one implemented :

• window.alert(), window.confirm(), window.prompt(), window.close(), window.print()
• history.back(), history.forward()
• location.href, location.assign(), location.replace(), location.reload()

DOM implementation

Document Object Model Level 1 Core

Some basic ways to access a node in the tree are available (FirstChild, NextSibling, childNodes.item()...) and you can get information on a node with the nodeType, nodeName and nodeValue properties. The scan_tree file analyses the tree of a document.

Currently, methods to modify the DOM tree are really limited... I have disabled them because I have to rewrite some part of the code to be compatible with the new JSAPI (1.9).

Here is the detailed implementation status :

Document Object Model Level 1 HTML

This page is W3C-compliant - Author: