AwesomeScript Getting Started

Starting off

This is a quick tutorial designed the basic set up and commonly used concepts. Here is a test HTML page used for the purpose of this tutorial:

<html>
    <body>
        <script type="text/javsacript" src="Awesome.js"></script>
        <a id=”link” href="http://awesomejavascript.com/">AwesomeScript</a>
        <script type="text/javascript">
            Awesome.Build();
        </script>
    </body>
</html>

 

A couple of things to note here. The inclusion of Awesome and all other extensions must appear after the body tag of your document. The existence of the body is necessary when building the environment. Second, Awesome.Build() must appear in  a script tag as the last statement in your JavaScript code. It’s common to place this call at the bottom of the body tag in its own separate script tag.

Executing code when the page loads

Every framework should have a method of executing code when the page “loads”. Like with most frameworks, the onload event for the body is not reliable as it waits until all resources are loaded for the page. This is where Awesome.Build() is used. It creates a environment and once it’s done, calls an event to notify everyone that the code is execute. To subscribe to the page’s onload event use:

<html>
    <body>
        <script type="text/javsacript" src="Awesome.js"></script>
        <a id=”link” href="http://awesomejavascript.com/">AwesomeScript</a>
        <script type="text/javascript">
            Page.OnLoad.Add(function(){
                // your code here
            });

            Awesome.Build();
        </script>
    </body>
</html>

 

Before we move on, let’s talk about the Page static object. The Page object represents the body tag, for the most part. You can only have one body and thus, Page is a static object. As well, Page is a holdover from using ASP.NET code behind files. It makes for an easier transition for .NET developers.

 

Finally, OnLoad is a field of the Page object. As you can see, it in itself is an object, which is of type UserEvent. A UserEvent is a wrapper object that handles the user events fired. All events are handled in this method. There is also Event object for non user-fired events. Events and UserEvents have 3 functions: Add, Remove and Clear. These will add, remove and well, clear all the handlers subscribed to the event. You can pass anonymous functions (as shown here) or use function references. If the event will only be fired one time in the life cycle of the page, passing anonymous functions is fine. However, if the event can potentially be fired multiple times, consider making the function global and passing in its reference instead. Below is an example:

<html>
    <body>
        <script type="text/javsacript" src="Awesome.js"></script>
        <a id=”link” href="http://awesomejavascript.com/">AwesomeScript</a>
        <script type="text/javascript">
            Page.OnLoad.Add(pageInit);

            function pageInit(){
                // do stuff
            }
            Awesome.Build();
        </script>
    </body>
</html>

 

EventArgs and UserEventArgs

Every function that’s subscribed to an event is passed a single object as the first parameter of type EventArgs or a derivative, such as UserEventArgs. These objects contain information about the event and ways to control the event. Below is an example:

<html>
    <body>
        <script type="text/javsacript" src="Awesome.js"></script>
        <a id=”link” href="http://awesomejavascript.com/">AwesomeScript</a>
        <script type="text/javascript">
            Page.OnLoad.Add(function(){
                $Anchor("link").OnClick.Add(doStuff);
            });

            function doStuff(e){
                e.Sender.Text("You clicked me D:");
                e.Handled = true;
            }
            Awesome.Build();
        </script>
    </body>
</html>

 

Whoa, that’s a lot of take in! Let’s take it line by line. First, as you see, we added an id to the link. This is in order to reference the anchor later on. Next, inside the OnLoad function, we use what we call “Reference” functions. These are wrapper objects that simply retrieve an object of the given id. All elemental reference functions do the same thing unless you’re using Visual Studio. With VS and the Awesome-vsdoc.js in the same directory as your Awesome.js, typing $Anchor(“link”). will bring up an Intellisense menu with various functions and properties that can be called on the element “link” as an “Anchor”. Then you can type “OnCl” and see “OnCl” highlighted and you can hit tab then “.” and see more Intellisense. Typing “Ad” will highlight “Add” and you can read from the tooltip that you can pass a Function or Delegate (more on that later). Sweet! So we pass in the function doStuff to be called when the Anchor is clicked. It’s pretty easy to read and follows the .NET naming scheme that so many are used to.

 

Alright, so, the next thing to talk about is that e parameter in the function. This is the EventArgs parameter as I talked about before. For UserEvents, such as the Anchor’s OnClick,

Last edited Apr 1, 2011 at 5:44 PM by dahrkdaiz, version 1

Comments

No comments yet.