Haxe JavaScript HTML form

Question

In the "Try Haxe" (http://try.haxe.org) site, the default sample test code is as follows:

class Test {
  static function main(){
    #if js
    new js.JQuery("body").html("Haxe is great :)");
    #elseif flash
    trace("Haxe is great :)");
    #end
  }
}

Running it on that page is quite straight-forward (can choose "Options" and target either "JS" or "SWF") and the output is the following for "SWF":

Test.hx:6: Haxe is great :)

and the output is the following for "JS":

Haxe is great :)

The part that confuses me is the javascript part because when I compile the source code myself on my laptop, the resulting test.js file is very complex and looks nothing like the "JS Source" that is displayed on that page:

(function () { "use strict";
var Test = function() { };
Test.main = function() {
    new js.JQuery("body").html("Haxe is great :)");
};
var js = {};
var q = window.jQuery;
js.JQuery = q;
Test.main();
})();

Should I change the contents of the Haxe-compiled test.js to the above? Also, I don't know how the actual index.html page should look like in order to display the results of the JavaScript output "Haxe is great :)". Any tips on what the actual code for the index.html page for the JavaScript example output would be appreciated.

The full output gets loaded into the iframe on the right and looks like this: http://try.haxe.org/app/program/14064/run?r=0.3810659754090011 (just look at the source). — back2dos, Feb 23 '14 at 08:35

Edgar Griñant · Answer 1 · 2014-02-22T17:31:54.337

1

It's not clear what the question is about.

If it's about the

"Should I change the contents of the haxe-compiled "test.js" to the above?"

No, you should not change a compiled solution.

Why? Because it will be overridden every time you compile it again, also depending on your changes you will out-date your source files.

Regarding the HTML, you don't need a special setup, just a plain HTML calling the test.js and the dependency libraries. Based on your example:

<html>
    <head>
        <title>Hello haxe :)</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="test.js"></script>
    </head>
    <body>
    </body>
</html>

edited Feb 22 '14 at 17:31

answered Feb 22 '14 at 17:18

Edgar Griñant

599
1
12
27

Edgar, appreciate your feedback. The strange thing is that even after implementing your suggestions, all I get is a blank page when loading up the above html page (in both IE8 and Firefox). And I have also tried it with the full "http://ajax.googleapis.com/ajax/libs/jquery/1.71./jquery.min.js"> as well. – user3340582 Feb 22 '14 at 19:31

score 1 · Answer 2 · answered Apr 03 '18 at 19:47

First off, you should not change the contents of the test.js file that the haxe compiler generates for you. The JS Source, if given the same Haxe code, shouldn't look different than a .js file compiled on your own computer...

If you have tried running with a simple html page:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/></head>
<body>

    <script type="text/javascript" src="test.js"></script>

</body>
</html>

and you are not seeing anything on the page, try opening the console. You may find the "Haxe is great!" that you are looking for. If you would like a more interactive example that utilizes the DOM, try the following .hx:

import js.Browser;
class Test {
    static function main() {
        var button = Browser.document.createButtonElement();
        button.textContent = "Click me!";
        button.onclick = function(event) {
            Browser.alert("Haxe is great");
        }
        Browser.document.body.appendChild(button);
    }
}

Make sure you name the file test.hx

and then compile it by running a .hxml file in the same dir with the following:

-js test.js
-main Test

This should give you a test.js that once linked in an index.html just like the one I have posted at the top, offers something in the browser DOM.

If you would like any more information on compiling to JS and getting things running in the browser, I would recommend further reading here:

https://haxe.org/manual/target-javascript-getting-started.html

Cheers!

Haxe JavaScript HTML form

2 Answers2