I am quite comfortable with using actionscript3 and flash. I also have some experience with Java. But recently, I started learning JavaScript and node.js. I ultimately want to make a 3d game in threejs, but for now I simply want to make a chat application.
I want to get into the habit of using JavaScript. Unfortunately, I am finding it very difficult to start using JavaScript. The difficulties I am facing are
-
No suggestions for different methods and properties pop up, like they do in the Eclipse IDE and Flash Builder IDE. Like when you press dot after object, it shows all the methods and properties relating to that object and it becomes really easy to see what the parameters are and needed to be passed and stuff.
-
How to organize code? In ActionScript3, I could simply make different classes in different packages. I could then import and use those classes in one main file. How does it work in JavaScript?
-
Functions. I have seen people use anonymous functions in javascript. But I am compelled to write external functions as I am in the habit of it. What is better in JavaScript workflow? What do you advice?
-
How is code executed within a HTML file? So if I have several
<script></script>tags and I declare a variable in one of them, can the tags below it and above it access that variable?
13
Autocompletion
Javascript is a dynamic language and it’s impossible to get anywhere near to what you have in Actionscript or Java. Just accept what your IDE (WebStorm for instance) might suggest for you. This goes for any interpreted language really.
How to organize code?
Have a look at requirejs or node.js’s own module require function.
Anonymous functions.
Yes, get use to them. Javascript is very much function-based so you’d just have to accept that part. Here is a great starting point.
Several tags and I declare a variable in one of them,
can the tags below it and above it access that variable?
Nope, only tags below it. Try this:
<body>
<script> console.log(x); </script>
<script> var x = 1; </script>
</body>
Console prints “x is undefined”.
My suggestion is to check out Haxe. You should use the stable version (2.10) for now, as version 3 is only in RC stage and many IDEs and 3rd party libraries do not yet have full support.
Haxe should be fairly familiar to you as an ActionScript developer. The way you would write an application would be to create markup and then query for the nodes you wish to add dynamic behavior to and manipulate them.
As for IDEs, the website contains a comprehensive list. If you’re on windows, then you definitely will want to use FlashDevelop. It has a project template for haxe/js to get you started.
You might also be interested to have a look at NME, an ambitious project now backed by BlackBerry, that lets you use the Flash Player API on about every platform.
I suggest you join the Google Group or the IRC channel if you have any problems. The community is very active and friendly.
I should point out, there’s a whole number of alternatives that you might want to consider (they all have some basic resemblance to AS3):
- TypeScript
- Dart
- CoffeeScript
- ScriptSharp
Personally, I favor Haxe over all of them, because it is both richer in features and not limited to JavaScript, but your needs may be different.
1
No suggestions for different methods and properties pop up, like they do in the Eclipse IDE and Flash Builder IDE. Like when you press dot after object, it shows all the methods and properties relating to that object and it becomes really easy to see what the parameters are and needed to be passed and stuff.
This isn’t really my cup of tea, but I’m sure there are Eclipse plugins that can do this to some extent for JavaScript. Due to the nature of functions and the object model in JavaScript, it would be much harder to do this for all cases than a language like Java.
How to organize code? In ActionScript3, I could simply make different classes in different packages. I could then import and use those classes in one main file. How does it work in JavaScript?
Check out RequireJS. As far as I know, it’s the most commonly accepted method for formatting JavaScript “modules” (which are a JavaScript idiom).
Functions. I have seen people use anonymous functions in javascript. But I am compelled to write external functions as I am in the habit of it. What is better in JavaScript workflow? What do you advice?
You can write a lot of JavaScript without having to resort to anonymous functions, but anonymous functions make it easier. I think this is something that you can learn in time.
How is code executed within a HTML file? So if I have several tags and I declare a variable in one of them, can the tags below it and above it access that variable?
The tags below it will have access to that variable. Code is executed linearly, and JavaScript’s scoping is simple, limited, and oft criticized (but efficient if you know the caveats).
For IDE:s consider using something that has good autocomplete support like visual studio, aptana or webstorm. These will make your life a lot easier.
For class-like structures consider Module pattern.
http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth
Check out Douglas Crockfords book good parts
and maybe check out some book on javascript patterns.
Because there aren’t any classes don’t mean that there aren’t any good
solutions to organising code.
2