From ActionScript to JavaScript - some questions

[IQAndreas]

My language of choice is ActionScript. I recently started dabbling in JavaScript, but constantly feel like it's a huge step backwards and feel VERY limited. Also, some parts of JavaScript I simply do not know how they work compared to ActionScript.

The way I'm writing each question is in the form of "a tutorial about this would be nice". I'm sure there are tutorials for some of the mentioned topics already out there (and I will post the links if I find them).

I'm posting the questions not because I can't find the answers, but because these are the questions that may arise for anyone else going from ActionScript to JavaScript.


Rather than create a separate thread for each question, it might be easier keeping them all in one place (at least until it can all become tutorialized so that answer and question posts aren't mixed into the same mess)

Since I'm very likely not the only "ActionScript" guy wanting to dabble in JavaScript, if anyone else runs into any questions, feel free to post them here.

[IQAndreas]

Function scope in JavaScript

The way JavaScript handles functions and scope seems to be almost identical to how ActionScript handles them.

However, not many people fully understand how ActionScript really handles scope (and quite frankly, things like creating a function within a function, although possible, are usually not a good idea in AS3!)


An in-depth tutorial on this would be nice, and could be written to work for both ActionScript and JavaScript.

And related, when do you use named functions, and when do you use anonymous functions?

[IQAndreas]

Typing (as in typecasting, not using a typewriter) in JavaScript

The typing in JavaScript is more loose than your mom.

ActionScript users should have no problem with the way JavaScript handles variables. Just don't include the variable type and everything works pretty much the same.

However, how can you properly check the values and types of objects within your code?

• Is there a JavaScript version of "is"?
• Is there a JavaScript version of "as"? (though, without inheritance, it may not matter anyway)
• What about converting between types? What functions are needed?

[IQAndreas]

Making "Classes" in JavaScript

This is I believe the most important part where MAJOR differences occur between AS3 and JavaScript.

There seems to be one "simple" way of creating new "instances" by simply populating a dynamic object with properties:

function makeBullet(x, y, speedX)
{
    var bullet = {};
    bullet.x = x;
    bullet.y = y;
    bullet.speedX = speedX;

    bullet.isColliding = function(bounds) 
    {
        if (bullet.x > bounds.left && bullet.x < bounds.right)
        {
            if (bullet.y > bounds.top && bullet.y < bounds.bottom)
            {
                return true;
            }
        }

        //else
        return false;
    }
}

But from my reading, it seems like there are better ways of doing this, such as using "prototype" and even the "new" keyword. I'm assuming both those have at least slightly different meanings and uses than in ActionScript.

• How do they differ from ActionScript? How should they be used?
• How is "this" different in JavaScript, and when is it set to what values?
  
• How do instances created with "new" work with keywords such as "instanceof"?
• What happens if you call a "constructor function" directly (without using "new")? What happens to the "this" variable?
• When should you define methods or variables onto the "prototype" rather than directly onto the object itself?
  
• Is there any type of class inheritance system in AS3? Or do you need to redefine every property for each "subclass"?
• Can you create any sort of static properties?
  

---

Matching Tutorials

JavaScript for AS3 Developers
Mark Knol touches on the basics of creating classes in a blog post which briefly covers these topics:
- Declaring constructors
- Creating public and private variables and functions
- Workaround for creating class namespaces
- Getters and setters (partial, since it's only supported by some browsers)

[OMG]

wow andreas, what a nice surprise, I'm starting to re-learn javascript too XD
I have the same questions as you lol...
did you check jquery? it's pretty neat

[IQAndreas]

Importing code dynamically in JavaScript

Rather than load every single JS file you could possibly use when the website is loading, is it possible to import code only when needed? Something similar to PHP's "include" or "require"?

Or perhaps include other external JS files from within a JavaScript document rather than creating a new "script" tag for each and every JavaScript file? Something like how "import" works in AS3?

[lewi-p]

I'm looking into JavaScript development at the moment too (mainly because the company I work for is obsessed with making everything work on iPads), I've converted a few of my online applications into JavaScript but these are pretty simple. The next task is to make a library of stats components - graphs and such - which I've done before in AS2 & AS3 so I thought it would be pretty straight forward, but when I started to play around with inheritance it all went very wrong and couldn't get my head around the scope.

I've been watching some videos online and came across one called 'Learning to Love JavaScript' from Google I/O 2011 which was interesting. Towards the end they started to talk about the future of JavaScript and how the implementation of classes will be made available. A lot of what they talked about seemed awfully similar to ActionScript, which made me smile. They showed a demo of 'traceur', which lets you write in future JavaScript but it converts it to todays JavaScript. To me, being very familiar with ActionScript, made a lot more sense and picked it up really quickly.

lewi-p

[IQAndreas]

Special Objects in JavaScript

• What are "document" and "window"? (and any other special objects I don't know of yet)
• How do these differ from "stage" and "root" in ActionScript?
• Can the document or window ever be null? (just like items not on the stage will have the "stage" property be null in AS3)

[IQAndreas]

Performance in JavaScript

• How do JavaScript's best practices differ from ActionScript's?
• What things in JavaScript are more performance heavy, and should be avoided in resource-craving projects?
• Are functions that loop through every item on the stage (such as "getElementByID" or "getElementsByTagName") noticeably performance heavy?

[kirupa]

This article is extremely good in helping out with functions (and function scope, among other things): https://developer.mozilla.org/en/Jav...function_scope

[kirupa]

For checking the type of a variable, you can use the typeof function:

<html>
<body>
<script>
    var blah = 10;
    alert(typeof blah);
</script>
</body>
</html>

The values returned by typeof are function, object, number, string, xml, boolean, and undefined.

To check if something is an int or a float, you can add one additional check where you manipulate the "number" to determine whether it is an integer or a float. The way I do an integer check is by seeing if Math.floor(number) == number. If the value is true, then it is an integer. Otherwise, I assume that it is a float.

[_kp]

Importing code dynamically in JavaScript

It may seem bad to load parts of scripts that are probably never used, but making more requests than necessary is bad as well. Hand written scripts aren't that big anyway. Libraries like jQuery are modular but require all modules to be loaded as far as I know.

Like most libraries are, any script can be minimized (take a look at closure compiler), which will also increase download and execution speed. I think that is right the way to go: Load a single, optimized script file. Since it's cached and can be used used on every page of the site, it will be way faster than waiting for dynamic scripts to get loaded, compiled and executed, or even worse eval'd without any of those nice browser optimisations.

[Krilnon]

when do you use named functions, and when do you use anonymous functions?

That's mostly a matter of preference / style, in my opinion.

Is there a JavaScript version of "is"?

instanceof is pretty close, but you can also use the nonstandard __proto__ property sometimes:

(5).__proto__ == Number.prototype // true
('hi').__proto__ == String.prototype // true 

The only reason is exists in AS3 is because there are actual classes and interfaces.

Is there a JavaScript version of "as"? (though, without inheritance, it may not matter anyway)
What about converting between types? What functions are needed?

as is mostly useful for shutting up the compiler in AS3 (IMO)… You can mostly just use the same global conversion functions (Number, String, etc) for types that can actually be coerced into useful forms of others.

"prototype" and even the "new" keyword. I'm assuming both those have at least slightly different meanings and uses than in ActionScript.

How do they differ from ActionScript? How should they be used?

new and prototype actually behave pretty much identically to the way that they do in AS3, with the exception that classes don't yet exist in JS. Go back to ActionScript 1 and you'll see a very familiar new and prototype. You use new when you want the object returned to inherit properties from the properties on the prototype of the function that you pass to new.

How is "this" different in JavaScript, and when is it set to what values?

Methods don't exist (in some sense) in JS, so this isn't bound to a particular object when you call a function. For example, the output is different in AS3 and JS for this code:

var a1 = [1,2,3]
var a2 = [4,5,6]

a1.splice.call(a2, 2) 

In AS3, a1 is [1,2] and a2 is [4,5,6] afterward.
In JS, a1 is [1,2,3] and a2 is [4,5] afterward.

How do instances created with "new" work with keywords such as "instanceof"?

Intuitively:

var f = function(){}
(new f) instanceof f // true 

What happens if you call a "constructor function" directly (without using "new")? What happens to the "this" variable?

Then it's not a constructor function, it's just a function which the author might have intended to be used as a constructor. this is just whatever it would have been regularly, for a normal function.

When should you define methods or variables onto the "prototype" rather than directly onto the object itself?

I hate answering "should" questions, but I'll give it a stab. Since prototype is an inheritance mechanism, use it when you're going to have numerous objects with the same properties. It hardly seems efficient to run the same property initialization for each object, right?

Is there any type of class inheritance system in AS3? Or do you need to redefine every property for each "subclass"?

I think you meant "JS". And yes. Prototype inheritance subsumes class inheritance. It may be harder to understand and easier to mess up, but the proposals for classes in new versions of JavaScript/ECMAScript usually desugar into prototype manipulations.

Can you create any sort of static properties?

Sure, it takes about 2 seconds: String.foo = 4

is it possible to import code only when needed?

A common convention is to dynamically add a script element to the DOM.

Something like how "import" works in AS3?

CommonJS modules feel a lot like importing stuff. I get the same glazed look in my eyes, anyway.

Towards the end they started to talk about the future of JavaScript and how the implementation of classes will be made available. A lot of what they talked about seemed awfully similar to ActionScript, which made me smile.

That's because it's literally the same committee. I mean, the members have shifted around a little, but the guy who wrote the original JS2 spec/proposal (which was the primary basis for AS3/ES4), Waldemar Horwat, is still on the committee and writes on es-discuss pretty much daily.

What are "document" and "window"? (and any other special objects I don't know of yet)
How do these differ from "stage" and "root" in ActionScript?
Can the document or window ever be null? (just like items not on the stage will have the "stage" property be null in AS3)

These aren't really part of JavaScript the language per se, just part of the document object model and some other semi-standardized APIs. If you ran JS outside of a browser, you often wouldn't have access to those objects, just like if you were to run ActionScript in Tamarin outside of Flash Player.

Anyway, document is a property of window, if that helps, and document contains all of the structure of the HTML that you'd expect, kind of like the display list. window is the global object and the default value for this instead of something like [object global] in AS3. It has a semi-random collection of properties with useful information.

How do JavaScript's best practices differ from ActionScript's?

A different collection of annoying people argue about them.

Are functions that loop through every item on the stage (such as "getElementByID" or "getElementsByTagName") noticeably performance heavy?

It depends on whether or not you have a way around using them. Is a factorial function performance heavy if you have no other way to find 3455373!? At the very least, you can trust that they are heavily optimized by JS engine authors since everybody uses them.

[IQAndreas]

Debugging in JavaScript

Hey, someone stole my output window! And apparently, if there is a problem in my code, JavaScript does nothing!

• How does debugging in JavaScript work compared to ActionScript?
  
• Why won't JavaScript tell me which errors exist in the code?
  
• Where the hell is my "trace" function?
• What tools are available to assist in debugging JavaScript code?

[_kp]

Debugging in JavaScript

Beginner style: alert(). Slightly less annoying: Add a <div> and append log output.

For any 'real' debugging use browser plugins like firebug. Reports errors, step by step debugging with breakpoints and much more.