haXe : Compiling to javascript

After all these tutorials in pure javascript, lets see is there is any other help from any where for our javascript programming. The best thing to happen is haXe. If you have not heard about it yet, haXe is a language on its own! But why I need to learn another language?! Well, there is not much difference in javascript and haXe. As you have already seen, inside javascript also we have different libraries and we need to learn them to use them, lets look at haXe, for now, as another library (which is obviously not). Now, you will be amazed to know that after you know haXe and start writing on haXe, your code can be compiled to whole lot of different languages including C++,PHP and javascript.
First of all one need to download and install haXe. The installation is quite straight forward and the help at its own website is quite nice. I do not think you will get stuck there, but if it is, please drop me a line here or best is ask in their forum.
The hello world application for javascript I am writing here is straight out of haXe documentation. I am just putting it here for I got stuck at the compiling time and want you to get going in haXe without ever stopping anywhere.
I hope by this time, you have installed haXe on your machine. Lets write our first haxe class.

package ;
class Main 
{
	public static function main() 
	{
		trace('Hello');
	}
}

The purpose is to show a message we passed in “trace” function. We will write an HTML file to use the javascript file compiled from the above haXe code. Now save the above in a file with a name say “Main.hx”. Yep, “.hx” is the native HAXE extension. Suppose we are going to save the generated javascript file inside the “js” folder and with name “my.js”. Lets say that our HTML file is named as “HelloWorld.html”. So the folder structure looks as below.

src
   Main.hx
bin
HelloWorld.js
   js
     my.js

So our “Main.hx” is on “src” folder and all our generated code is inside “bin” folder. The generated javascript is inside “js” folder, which is inside “bin” folder. You may be asking, where are the javascript and html files?! Well, we have decide the structure of our application first and now we will move on and create those files in necessary folder. First lets see the HTML file code, which is as below.

	<div id="haxe:trace"></div>
	<script src="js/my.js"></script>

Basically we need a div element with id “haxe:trace”, so that all our “trace()” function calls in our “.hx” file will be written inside this div . We are ready for action now. All we need is to compile our haXe code to javascript.

Open command prompt (terminal in Mac) and move to the src folder, where we have stored our “.hx” file. Now write the code below in the terminal and press enter.

haxe -main Main.hx -js ../bin/js/my.js

Now go inside “bin/js/” folder and you will be amazed to see our “my.js” file is created there. Open the html file in a browser to see the result of it. The “Hello” we typed in trace is now written to the HTML page div tag. Sweet, is not it!
Suppose we want an real alert, a javascript alert, then modify the haxe code as below.

package ;
class Main 
{
	public static function main() 
	{
		js.Lib.alert('Hello World');
	}
}

Next process, I hope you know already :) . Compile it in HAXE compiler as below to generate the JS file with the modified code. This means fire up the command prompt and put the same command as we did before, which is as below.

  haxe -main Main.hx -js ../bin/js/my.js

Now open the same html file in the browser again to see the alert message.
Yeehaa :) we got a nice javascript code generated from haXe.

Here is the source files with comments in it for you to play with.

Happy haXeing :)