Page 1 of 2 12 LastLast
Results 1 to 15 of 20

Thread: From ActionScript to JavaScript - some questions

  1. #1

    From ActionScript to JavaScript - some questions

    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.
    Blog article of the month: Why My One Line 'if' Statements Are Unusual
    Twitter: @IQAndreas
    GitHub: IQAndreas

  2. #2
    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?
    Blog article of the month: Why My One Line 'if' Statements Are Unusual
    Twitter: @IQAndreas
    GitHub: IQAndreas

  3. #3
    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?

    Blog article of the month: Why My One Line 'if' Statements Are Unusual
    Twitter: @IQAndreas
    GitHub: IQAndreas

  4. #4
    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 popu
    lating a dynamic object with properties:
    Code:
    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)
    Blog article of the month: Why My One Line 'if' Statements Are Unusual
    Twitter: @IQAndreas
    GitHub: IQAndreas

  5. #5
    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
    ^ Don't listen to this guy, he's wrong.

  6. #6
    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?
    Blog article of the month: Why My One Line 'if' Statements Are Unusual
    Twitter: @IQAndreas
    GitHub: IQAndreas

  7. #7
    lewi-p's Avatar
    952
    posts
    Say "NO" to Scenes!
    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

  8. #8
    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)
    Blog article of the month: Why My One Line 'if' Statements Are Unusual
    Twitter: @IQAndreas
    GitHub: IQAndreas

  9. #9
    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?
    Blog article of the month: Why My One Line 'if' Statements Are Unusual
    Twitter: @IQAndreas
    GitHub: IQAndreas

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

    Great, now even Kirupa is { facebooking | twittering }

  11. #11
    For checking the type of a variable, you can use the typeof function:
    Code:
    <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.

    Great, now even Kirupa is { facebooking | twittering }

  12. #12
    Quote Originally Posted by IQAndreas View Post
    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.

  13. #13
    Quote Originally Posted by IQAndreas
    when do you use named functions, and when do you use anonymous functions?
    That's mostly a matter of preference / style, in my opinion.

    Quote Originally Posted by IQAndreas
    Is there a JavaScript version of "is"?
    instanceof is pretty close, but you can also use the nonstandard __proto__ property sometimes:

    PHP Code:
    (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.

    Quote Originally Posted by IQAndreas
    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.

    Quote Originally Posted by IQAndreas
    "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.

    Quote Originally Posted by IQAndreas
    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:

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

    a1.splice.call(a22
    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.

    Quote Originally Posted by IQAndreas
    How do instances created with "new" work with keywords such as "instanceof"?
    Intuitively:
    PHP Code:
    var = function(){}
    (new 
    f) instanceof // true 
    Quote Originally Posted by IQAndreas
    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.

    Quote Originally Posted by IQAndreas
    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?

    Quote Originally Posted by IQAndreas
    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.

    Quote Originally Posted by IQAndreas
    Can you create any sort of static properties?
    Sure, it takes about 2 seconds: String.foo = 4

    Quote Originally Posted by IQAndreas
    is it possible to import code only when needed?
    A common convention is to dynamically add a script element to the DOM.

    Quote Originally Posted by IQAndreas
    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.

    Quote Originally Posted by lewi-p
    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.

    Quote Originally Posted by IQAndreas
    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.

    Quote Originally Posted by IQAndreas
    How do JavaScript's best practices differ from ActionScript's?
    A different collection of annoying people argue about them.

    Quote Originally Posted by IQAndreas
    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.

  14. #14
    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?

    Blog article of the month: Why My One Line 'if' Statements Are Unusual
    Twitter: @IQAndreas
    GitHub: IQAndreas

  15. #15
    Quote Originally Posted by IQAndreas View Post
    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.

Page 1 of 2 12 LastLast

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012