Javascript Platform

The current version of Haxe is 3.1.3 (as at January 2015). Haxe has had a Javascript target since 2006. Javascript is usually used on web pages, for example, to create dynamic pages or to validate input from web forms on the page. You can also use CSS to add styles to any web output, which is not covered here.

Why Use Haxe To Generate Javascript?

You can use the extra benefits of Haxe over Javascript like type checking, which is especially useful with larger programs containing lots of classes.

Sample Application

Here is a sample application using a web page and a Javascript script.

Web Page (test.html)

<html>
<head>
  <title>Plain Javascript Web Page</title>
</head>
<body>
  <div id='view'></div>
  <script src='test.js'></script>
</body>
</html>

Notes

  1. <div id='view'></div> is where the script output will appear on the web page.
  2. <script src='test.js'></script> will call the script to include it on the web page.

Javascript Source (test.js)

function product(x, y) {
    return x * y;
}
 
var str = 'The product of 2 and 3 is '+product(2,3);
 
document.getElementById('view').innerHTML = str;
 

Notes

  1. The product function is declared: it returns the product of 2 parameters.
  2. A string is created containing the text and the product function is called.
  3. The result of the script is placed in the 'view' div on the web page.

Now, let us write the Javascript using Haxe.

Haxe Javascript (Main.hx)

package;
import js.Browser;
import js.html.DivElement;
 
class Main() {
    var view:DivElement;
 
    function new() {
        createChild();
    }
 
    function createChild() {
        var doc = Browser.document;
        var str:String;
 
        view = doc.createDivElement();
        view.className = 'view';
 
        str = 'The product of 2 and 3 is '+product(2,3);
        view.innerHTML = str;
        doc.body.appendChild(view);
    }
 
    function product(x:Int, y:Int) : Int {
        return x * y;
    }
 
    // entry point
    static function main() {
        new Main();
    }
}
 

Explanation

  1. Create a package containing this one class in line 1.
  2. Import the two classes needed from the JS library: Browser gives access to the document in line 2 and html.DivElement gives access to a div element in line 3. You need to import classes from the Haxe JS library. The last element in the import line begins with a capital letter (this is the class), then you can use the functions and instance variables from the class in your Haxe program. The import line shows the package and the class you are using.
  3. The class Main is declared in line 5.
  4. The div element view is declared in line 6.
  5. The constructor new is declared in line 8. This is called when an instance of the Main class is created. In this case, it calls the createChild() function which creates and populates the view div element.
  6. A variable doc is declared to refer to the document in line 13 and a variable str is declared to hold the string value to be placed in the view div in line 14.
  7. The view div is created and named (given its id) in lines 16 and 17.
  8. The content of the div is created in line 19, assigned to innerHTML of the div in line 20 and the child element is added to the document in line 21.

compile.hxml

Create the file with the filename above which should contain:
-main Main
-js test.js
 
Change to the source directory and compile the Javascript file (test.js) with: haxe compile.hxml

Further Notes

  1. Examples on the web containing <div id="haxe:trace"></div> in the web page refer to earlier versions of Haxe.
  2. Trace output now defaults to the console log.
  3. If you find Haxe source code on the Internet with the line:
    import js.Dom;
this refers to Haxe 2.x versions and will need to be updated.
  1. You will notice that JS Modern is generated: see "use strict" in the generated Javascript.
  2. It is a good idea to create all page elements in Haxe. So you will need to remove the following line from test.html:
    <div id='view'></div>
before you test the Haxe Javascript application.
  1. The API is available at api.haxe.org. Look at the online version or download a copy to use on your local computer.

Sources of Further Information

  • The Haxe manual
  • The Haxe website
  • The Old Haxe website - most of this material refers to Haxe 2.10 versions or earlier
  • Various blogs

External Libraries

Haxe can make use of extra functionality not available in the standard Haxe packages from external Javascript libraries.

Go to haxelib and browse through the libraries you can install. Note that any libraries need to be Haxe 3.x compatible.