Previously it has been possible to temporarily store state information in custom properties against an element via javascript, however embedding state information in a page when generated server-side (and getting a page to validate) always required workarounds. I’ve often resorted to using hidden input elements to expose state information to client-side script, but this should not (and won’t any longer) be necessary.

   1: <script type="text/javascript" src="blah.js"></script>    

   2:  

   3: <script type="text/javascript">

   4:     

   5:     mycompany.video.addVideoWidget({

   6:         siteId: "Heat",

   7:         keywords: "Britney Spears",

   8:         parent: "Id of the container"

   9:     });

  10:     

  11: </script>

When authoring a script like this, it needs to be entirely self-contained as you have no knowledge of what other scripts have been included on the host page, or what versions etc.

The issue is how to offer this script when you have a dependency. In this case I wanted to use swfoject as a reliable way to add a flash movie to a page. Another common scenario would be writing script on top of jquery. An example is Typekit who end up packaging up and distributing jquery as part of the code they require you to download – discussed here.

Given that you have no working knowledge of the host page, the only possible option is to package up the dependency, avoid naming conflicts, and include it with your script logic. However this seems quite wasteful given that the host page may also include the same library.

We are so used to using libraries now to make javascript a pleasurable activity, the idea of writing raw script, while possible, is really not an enjoyable prospect.

I don’t have a good answer to the problem – I ended up going down the same route that Typekit have gone. The only other option is to provide a flavour which requires the host page to implement the dependency, but then you lose the simplicity and are open to tricky issues around versioning.

Still, I guess life is short and bandwidth is cheap.

Basically, standard behaviour with most javascript minifiers is to strip out anything contained within comments. I finally tracked down this piece of code in the swfobject library that was getting stripped out (incorrectly) by the minifier…

/*@cc_on

ie = true;

@if (@_win32)

windows = true;

@elif (@_mac)

        mac = true;

    @end

@*/

This library carries out browser detection by using the proprietary Conditional Compilation feature in Internet Explorer. In order to stop other browsers from choking, the code is wrapped in a comment.

I’m not commenting whether this is a good or bad idea, simply that it does appear in existing scripts, and causes a bunch of javascript minifiers to strip out functional code.

I think my approach will be to revise the set of regular expressions that control what gets stripped out to cater for this variation.

Flash events are tracked as fake page impressions in WebTrends based on unique URLs that you define. The flash movie doesn’t talk to WebTrends directly – it calls through to javascript on the host page which logs the event via standard WebTrends javascript.

In my case I’m working on a widget that could be hosted on a variety of pages that may or may not implement WebTrends. The required behaviour is for tracking to automatically kick in if the host page implements WebTrends, but gracefully degrade if not. I have a javascript file that handles interaction with the flash movie, so I can guarantee certain js functions exist on the host page.

The solution looks like so…

Add an ActionScript class to pass events through to host page

package {

    import flash.external.ExternalInterface;

    public class Analytics {

        public static const WIDGET_LOADED:String = "/Video/Widget/WidgetLoaded";

        public static const PLAYER_LAUNCHED:String = "/Video/Widget/PlayerLaunched";

        public function Analytics(): void {

        }

        public static function captureEvent(eventType:String) {

            if (ExternalInterface.available) {

                ExternalInterface.call("mycompany.video.captureAnalyticsEvent",  eventType);

            }

        }

    }

}

An example of passing an event to this class…

Analytics.captureEvent(Analytics.WIDGET_LOADED);

Implement javascript functions on the host page

/* set up namespace for new functions */

if (window["mycompany"] == null) {

    window["mycompany"] = {};

}

mycompany.video = {

    webtrendsTrackingFunction: {},

    captureAnalyticsEvent: function(eventType) {

        var uriParam = 'DCS.dcsuri';

        if (typeof (this.webtrendsTrackingFunction) == 'function') {

            // if user has nominated a specific tracking function

            this.webtrendsTrackingFunction(uriParam, eventType);

        } else if (window["dcsMultiTrack"] != null) {

            // if dcsMultiTrack already implemented on page

            window.dcsMultiTrack(uriParam, eventType);

        } else if (window["dcsTag"] != null) {

            // otherwise if webtrends implemented on page, use default implementation

            mycompany.video.analytics.dcsMultiTrack(uriParam, eventType);

        }

    }

}

mycompany.video.analytics = {

    dcsMultiTrack: function() {

        for (var i = 0; i < arguments.length; i++) {

            if (arguments[i].indexOf('WT.') == 0) {

                WT[arguments[i].substring(3)] = arguments[i + 1]; i++;

            }

            if (arguments[i].indexOf('DCS.') == 0) {

                DCS[arguments[i].substring(4)] = arguments[i + 1]; i++;

            }

            if (arguments[i].indexOf('DCSext.') == 0) {

                DCSext[arguments[i].substring(7)] = arguments[i + 1]; i++;

            }

        }

        var dCurrent = new Date();

        DCS.dcsdat = dCurrent.getTime();

        dcsTag();

    }

}

The key points above the script above…

• To report events from Flash, WebTrends require an additional function on the host page that they provide – dcsMultiTrack
• If the host page has implemented dcsMultiTrack already, the existing function will be used
• If the host page implements standard WT js but not the additional function, a fresh implementation of the dcsMultiTrack function will be used
• If WebTrends javascript has not been implemented on the host page, nothing bad happens

In addition, we have a standard function that the flash movie will always call, so if we need to extend functionality to cater for different analytics systems etc, then we have a single place to implement this.

This is probably the least sexy post I’ve ever written, but it seemed worthwhile to document this. I’ll follow up with some sexified content sometime soon.

The markup

The markup I was generating was based on Flash Satay. Including this as static markup in a page works fine. Simple example below…

<object type='application/x-shockwave-flash' data='test.swf' width='420' height='155'>

    <param name='movie' value='test.swf' />

</object>

DOM approach that chokes IE

The following approach causes IE to choke…

<script type="text/javascript">

    var object = document.createElement('object');

    object.setAttribute('type', 'application/x-shockwave-flash');

    object.setAttribute('data', 'test.swf');

    object.setAttribute('width', '100');

    object.setAttribute('height', '100');

    var param = document.createElement('param');

    param.setAttribute('name', 'movie');

    param.setAttribute('value', 'test.swf');

    object.appendChild(param);

    document.body.appendChild(object);

</script>

The solution / workaround

For some reason if the object tag + params are parsed at the same time everything works fine, so the solution involves using the alternate approach to manipulating the DOM – innerHTML. This wouldn’t have been my first choice given the situation, but it seems to be the only way to get this working. A version that works in IE…

<script type="text/javascript">

    var fragment =

        "<object type='application/x-shockwave-flash' data='test.swf' width='100' height='100'>" +

            "<param name='movie' value='test.swf' />" +

        "</object>";

    var container = document.createElement('div');

    container.innerHTML = fragment;

    document.body.appendChild(container);

</script>

This achieves the same end result – a DOM element node that can be inserted anyway you wish, but avoid the problem in IE.

In this case I had an input element that was kicking off an ansychronous form submit when clicked. On top of this I’m implementing drag and drop behaviour, so I figured it would be as simple as simulating the click event when the item was dragged and dropped in the right way. The click handler already worked, and kicked off the async operation as desired, so it should be a nice layer on top.

The async operation basically hijacks the form submit if it is caused by certain elements, and performs an async post instead. The problem with the event target in Firefox meant that this behaviour never kicked in.

A workaround was to use dispatchEvent instead. This allows a simulated click which results in the correct event target set. This is in the W3C DOM level 2 spec, and is implemented in Firefox (but not IE).

The other is one that I’ve been looking forward to for a little while now, PPK on Javascript. This comes from the guy behind quirksmode.org and should be an interesting read. It’s along a similar direction as DOM Scripting but providing the next level of detail, where DOM Scripting was a great introduction into modern use of javascript and the DOM. My copy should be delivered midweek, so I’ll let you know how I get on with it.

If javascript makes you feel sad or confused and you need a little light relief, you should come along to Stephen K Amos at the Garrick theatre on Thursday (I have no idea about ticket availability – currently assuming we can get some for thurs). I’ve been to a couple of shows in Edinburgh which made my face hurt from laughter. I’m eager for more face-ache, so should be going this week too.

Javascript is definately back in fashion, with a number of libraries popping up to help out with application development. I think overall this is fine, so long as you have an appreciation of what is actually happening under the scenes. I don’t think a library should dictate the way that you build an application, rather enable you to build it more efficiently.

I’ve started using elements of the Yahoo YUI library which is very impressive. There seem to be a lot of very useful little utility functions available, the kind of thing that you would typically rewrite on each project.

I’m quite curious about how the Microsoft and Yahoo libraries compare. I’ll post some information about this when I’ve had a chance to look in more detail at Atlas.

It’s not out just yet, but worth keeping an eye out for – I think the UK release is towards the end of August.