JavaScript

Constant Prototyping and Design

Ryan Van Slooten — Thu, 31 Jul 2008 16:28:32 GMT

A co-worker gave a presentation on a project we worked on a long time ago and he asked me to update an feature in the web application. The web app was originally programmed in ASP and I had almost forgotten how painful it was to work in that environment. The new request was to enable live presence information in a web part using the new RTC libraries. Fortunately, another developer had a component to perform all of the calls using the RTC libraries, but I needed to retrieve the group members for the selected group and cross-reference the group members with online presence.

The actual details involved opening "MTSAdmin.Catalog.1" object and looking for a specific COM+ package, enumerating the "RolesInPackage", and then getting the "UsersInRole". There were several layers of filtering going on and I wanted an elegant solution. Unfortunately I kept trying to be too elegant and I was getting hung up on how to make it more elegant. I wanted to have a "before", "item", and "after" callback functions at each of the function depth levels where the "item" function would occur in the iteration loop. This would allow for scenarios where items might need to be collected after iteration, particularly to avoid making multiple unnecessary calls to the lower filtering methods.

Small example from jQuery

ajax: function( s ) {
  // Extend the settings, but re-extend 's' so that it can be
  // checked again later (in the test suite, specifically)
  s = jQuery.extend(true, s, jQuery.extend(true, {}, jQuery.ajaxSettings, s));

  // ... snip, snip, snip ...

  // Allow custom headers/mimetypes
  if ( s.beforeSend && s.beforeSend(xhr, s) === false ) {
    // cleanup active request counter
    s.global && jQuery.active--;
    // close opended socket
    xhr.abort();
    return false;
  }

The example above from jQuery only uses the "before" concept that I mentioned above, but it shows a very nice implementation where the 's' object is based on jQuery.ajaxSettings. Just before the AJAX call is about to be made, jQuery checks for any custom headers and calls the 'beforeSend' function if it exists.

Start Simple and Add Progressive Elegance

I did manage to get the function working correctly, but I had to take a step back and start simple and progressively build additional functionality into the component. Sometimes you have inspiration and you can just design and code and everything is great. Other times it can take a while before the inspiration comes. It is better to start coding and have something you can refine rather than wait and lose valuable time.

To use a baseball analogy: Don't try to hit a homerun every time; sometimes you need to play "small ball" and get people in scoring position and just try to make contact. A similar soccer (futból!) analogy would be don't just try to dribble down the field and score every time, but you need to pass and set up the players around you to maximize the scoring opportunity.

Just the facts, ma'am

Ryan Van Slooten — Mon, 21 Apr 2008 15:15:15 GMT

I was looking at Douglas Crockford's 360 blog today and came across a hilarious quote:

Do you write regularly for any publications in this field?
Just the blogs.
In researching the book, did you come across any surprising facts, figures, or statistics that the press might be interested in?
Surprisingly, facts have very little to do with web development.

Douglas Crockford is simply amazing and is the original author of expat (one of the first XML parsing libraries), as well as JSLint, JSMin, and JSON (one of the primary components of AJAX).

P.S. Bonus points for any one identifying the blog post title source.

SVG Building Map (Part 1)

Ryan Van Slooten — Fri, 07 Dec 2007 05:33:04 GMT

Due to blog restrictions, the sample is located on a separate page.

building.html: SVG sample

BuildingSample01.zip: source (6KB)

Note: In my previous blog entry, I stated that SVG is a technology with diminishing support and that ultimately I plan to convert this building map to SilverLight.

The first example is a very basic building map. I created a simple SVG file to represent a building and then created occupants for the building (as if you could keep these crazy rascals in a building -- look at the names and you should know what I mean).

For simplicity this sample does not dynamically load the occupant information nor does it have multiple floors. Instead the occupants are specified in a static JavaScript file although this is identical to the Adobe sample where the occupants are static. Future enhancements will include these features as well as additional functionality.

Step 1: Define the Building Map

I used Inkscape to create the SVG image, but ultimately ended up changing the SVG/XML by hand to create the simplest case for this example.

Step 2: Define a "Room"

This example will only make use of a "room" although future examples will have the concept of a "resource" (printer, conference room, etc.). In order to handle the JavaScript events (well technically ecmascript events), the script handlers need to be able to identify a room and so I simply used added the class "room" to the SVG element:

    <style type="text/css">
/* snip, snip... */
.room {
    fill:#c0c0ff;
    stroke:#222277;
    stroke-width:1;
}
/* snip, snip... */
    </style>
    <!-- more snip, snip... -->
    <g
        id="room101"
        class="room"
    >
        <rect
            id="rect101"
            class="room"
            width="150"
            height="100"
            x="0"
            y="0"
        />
        <text
            id="text101"
            x="50"
            y="55"
            class="label"
            xml:space="preserve"
        >
            <tspan
                x="50"
                y="55"
                id="tspan101"
            >101</tspan>
        </text>
    </g>

Notice that the room is defined as a group: { rect, text { tspan } }. The JavaScript handler will assume this definition will be consistent for all rooms.

Step 3: Add the Room handler to JavaScript

The JavaScript handler identifies a "room" to avoid processing elements that are "rooms." The line that contains: if (className != "room") will prevent the script from processing non-rooms.

// get room name and ID
///////////////////////
function getRoom(target)
{
    var svgElem = getNodeOrParent(target, "g");
    if (svgElem)
    {
        var thisRm = svgElem;
        var thisType = thisRm.tagName;
        var id = thisRm.getAttribute('id');
        var className = thisRm.getAttribute('class');
        if (className != "room")
            return;

        var num;
        var rect = getChildElem(svgElem, "rect");
        var text = getChildElem(svgElem, "tspan");
        if (text)
            num = text.firstChild.data;

        return { 'num':num, 'id':id, 'rect':rect, 'group':svgElem };
    }
}

Step 4: Handle the mouse events

The base group specifies the event handlers for the entire SVG.

    <g
        id="room-layer"
        onclick="selector(evt);"
        onmouseover="onImg(evt);"
        onmouseout="offImg(evt);"
    >

The local SVG functions are just references to JavaScript functions in the hosted page:

<script type="text/ecmascript"><![CDATA[
function onImg(evt)
{
    if (top && top.onImg)
        top.onImg(evt);
}

function offImg(evt)
{
    if (top && top.offImg)
        top.offImg(evt);
}

function selector(evt)
{
    if (top && top.selector)
        top.selector(evt);
}
]]></script>

Step 5: Handle the onmouseover event

The mouseover event displays the occupant information. If the user has clicked on a room and selected that room, the mouseover event will not update the display information.

// room mouseovers
function onImg(mouseEvt)
{
    // No highlighting when an item is selected
    if (selection && selection.room)
        return;

    // get the room name and ID
    var target = mouseTarget(mouseEvt);
    var room = getRoom(target);
    
    if (room &&
        highlighted && 
        highlighted.room &&
        highlighted.room.id == room.id)
    {
        // Same item as before highlighted
        return;
    }
    
    // save the style object for the rolloff
    var oldStyle = updateStyle(room, rollStyles.rollOver);
    // show the occupant info
    displayRoom(room);
    highlighted = { room: room, oldStyle: oldStyle } ;
}

Step 6: Handle the onmouseout event

When the user moves the mouse off of a room, the display will clear the occupant information. If a user is selected, the display will keep the selected occupant.

function offImg(mouseEvt)
{
    if (highlighted)
    {
        resetStyle(highlighted);
        highlighted = null;
    }
}

Step 7: Handle the room selection (onclick event)

When the user clicks on a room, the page will select that room and stop the automatic display of other information during mouseover and mouseout events.

function selector(mouseEvt) {
    // Turn off any highlighting
    offImg(mouseEvt);

    // get the room name and ID
    var target = mouseTarget(mouseEvt);
    var room = getRoom(target);

    if (room &&
        selection && 
        selection.room &&
        room.id == selection.room.id)
    {
        // Deselect the item
        resetStyle(selection);
        selection = null;
        return;
    }

    resetStyle(selection);
    // save the style object for the rolloff
    var oldStyle = updateStyle(room, rollStyles.selected);

    // show the occupant info
    displayRoom(room);
    selection = { room: room, oldStyle: oldStyle } ;
}

Step 8: Handle the style changes to the SVG elements

A lot of the challenge to get this sample to work in FireFox was with the setProperty function. When I added the last "null" parameter, it started working.

var rollStyles = {
    rollOver: {
        fill            : 'cyan'
       ,"stroke-width"  : '3' }
   ,selected: {
        fill            : 'blue'
       ,"stroke-width"  : '3' }
};
/* snip, snip... */
function updateStyle(elem, styleType) {
    var svgElem = elem ? elem.rect: null;
    if (svgElem && styleType)
    {
        var svgStyle = svgElem.style;
        var oldStyle = { };
        for (var name in styleType) {
            oldStyle[name] = svgStyle.getPropertyValue(name);
            try {
            svgStyle.setProperty(name, styleType[name], null);
            } catch (e) {
                window.alert('Error ' + e.number + ": " + e.message);
            }
        }
        elem["oldStyle"] = oldStyle;
        return oldStyle;
    }
}

function resetStyle(elem) 
{
    var svgElem = (elem && elem.room) ? elem.room.rect : null;
    var oldStyle = elem ? elem.oldStyle : null;
    if (svgElem && oldStyle)
    {
        var svgStyle = svgElem.style;
        for (var name in oldStyle) 
        {
            if ( !oldStyle[name] )
                svgStyle.removeProperty(name);
            else
                svgStyle.setProperty(name, oldStyle[name], null);
        }
    }
}

Step 9: Display the occupant information

When the onmouseover event fires on a room, the page displays the occupant information:

// display room info
function displayRoom(room)
{
    var found = false;
    if (room && room.num)
    {
        var id = "Rm_" + room.num;
        if (g_rmData && g_rmData[id]) 
        {
            var person1 = g_rmData[id];
            document.getElementById("tdRoom").innerHTML = person1.room;
            document.getElementById("tdName").innerHTML = person1.name;
            document.getElementById("tdPhone").innerHTML = person1.phone;
            document.getElementById("tdEmail").innerHTML = "<a href='mailto:" + person1.email + "'>" + person1.email + "</a>";
            found = true;
        }
    }
    if (!found) 
    {
            document.getElementById("tdRoom").innerHTML = "&nbsp;";
            document.getElementById("tdName").innerHTML = "&nbsp;";
            document.getElementById("tdPhone").innerHTML = "&nbsp;";
            document.getElementById("tdEmail").innerHTML = "&nbsp;";
    }
}

Step 10: Define the occupant information

For this sample, the data is defined in a static javascript file.

var g_rmRawData = [
 { room : '100', name : 'Bugs Bunny', phone : '1-800-555-0100', email : 'bugs.bunny@looneytunes.null' }
,{ room : '101', name : 'Marvin the Martian', phone : '1-800-555-0101', email : 'marvin.the.martian@looneytunes.null' }
,{ room : '102', name : 'Tweety', phone : '1-800-555-0102', email : 'tweety@looneytunes.null' }
,{ room : '103', name : 'Taz', phone : '1-800-555-0103', email : 'taz@looneytunes.null' }
,{ room : '104', name : 'Daffy Duck', phone : '1-800-555-0104', email : 'daffy.duck@looneytunes.null' }
,{ room : '105', name : 'Foghorn Leghorn', phone : '1-800-555-0105', email : 'foghorn.leghorn@looneytunes.null' }
,{ room : '106', name : 'Miss Prissy', phone : '1-800-555-0106', email : 'miss.prissy@looneytunes.null' }
,{ room : '107', name : 'Chickenhawk', phone : '1-800-555-0107', email : 'chickenhawk@looneytunes.null' }
,{ room : '108', name : 'Dawg', phone : '1-800-555-0108', email : 'dawg@looneytunes.null' }
,{ room : '109', name : 'Wile E Coyote', phone : '1-800-555-0109', email : 'wile.e.coyote@looneytunes.null' }
,{ room : '110', name : 'Road Runner', phone : '1-800-555-0110', email : 'road.runner@looneytunes.null' }
,{ room : '111', name : 'Speedy Gonzalez', phone : '1-800-555-0111', email : 'speedy.gonzalez@looneytunes.null' }
,{ room : '112', name : 'Pepe Le Pew', phone : '1-800-555-0112', email : 'pepe.le.pew@looneytunes.null' }
,{ room : '113', name : 'Penelope', phone : '1-800-555-0113', email : 'penelope@looneytunes.null' }
,{ room : '114', name : 'Porky Pig', phone : '1-800-555-0114', email : 'porky.pig@looneytunes.null' }
,{ room : '115', name : 'Elmer Fudd', phone : '1-800-555-0115', email : 'elmer.fudd@looneytunes.null' }
];

var g_rmData = [];

function loadRoomData()
{
    for (var i = 0; i < g_rmRawData.length; ++i)
        g_rmData['Rm_' + g_rmRawData[i].room] = g_rmRawData[i];
}

loadRoomData();

For those who are interested, I copied the names of the characters from the Looney Tunes site and ran this Python script:

def makeemail(s):
    return s.lower().replace(' ','.') + '@looneytunes.null'
    
def makedict(name, num):
    return { 'name':name, 'room':str(num), 'email':makeemail(name) }
    
def makedata(names, num, f):
    for name in names:
        print f % makedict(name, num)
        num = num + 1

n = ["Bugs Bunny",
    "Marvin the Martian",
    "Tweety",
    "Taz",
    "Daffy Duck",
    "Foghorn Leghorn",
    "Miss Prissy",
    "Chickenhawk",
    "Dawg",
    "Wile E Coyote",
    "Road Runner",
    "Speedy Gonzalez",
    "Pepe Le Pew",
    "Penelope",
    "Porky Pig",
    "Elmer Fudd",
]

s = "{ room : '%(room)s', name : '%(name)s', phone : '1-800-555-0%(room)s', email : '%(email)s' }"

makedata(n, 100, s)

Conclusion

This sample demonstrates the simplest case with static data and a very simple building map with a small number of occupants. Part of the challenge I had when I first analyzed the Adobe Visual Building Search sample was the complexity and questionable coding. Hopefully this sample is much simpler.

Part of the challenge in developing for the web is the differences in the browsers -- occasionally it is because one browser will let you get away with something you shouldn't be able to do. That was the case with this example -- I spent a little extra time making it work with FireFox. The eventing model and JavaScript was a little less forgiving in FireFox than IE.

Technorati tags: svg, javascript

Best Practice for Verbatim String Text Block

Ryan Van Slooten — Fri, 23 Nov 2007 06:05:51 GMT

I was browsing various blogs today and I came across a good example for using a verbatim string instead of a StringBuilder object. The code I came across looked like this (I mean absolutely no disrespect to the author, so I won't include the original link):

private void ClientScript()
{
   StringBuilder sb_Script = new StringBuilder();
   sb_Script.Append("<script language=\"javascript\">");
   sb_Script.Append("\r");
   sb_Script.Append("\r");
   sb_Script.Append("function cb_verify(sender) {");
   sb_Script.Append("\r");
   sb_Script.Append("var val = document.getElementById(document.getElementById"
			+"(sender.id).controltovalidate);");
   sb_Script.Append("\r");
   sb_Script.Append("var col = val.getElementsByTagName(\"*\");");
   sb_Script.Append("\r");
   sb_Script.Append("if ( col != null ) {");
   sb_Script.Append("\r");
   sb_Script.Append("for ( i = 0; i < col.length; i++ ) {");
   sb_Script.Append("\r");
   sb_Script.Append("if (col.item(i).tagName == \"INPUT\") {");
   sb_Script.Append("\r");
   sb_Script.Append("if ( col.item(i).checked ) {");
   sb_Script.Append("\r");
   sb_Script.Append("\r");
   sb_Script.Append("return true;");
   sb_Script.Append("\r");
   sb_Script.Append("}");
   sb_Script.Append("\r");
   sb_Script.Append("}");
   sb_Script.Append("\r");
   sb_Script.Append("}");
   sb_Script.Append("\r");
   sb_Script.Append("\r");
   sb_Script.Append("\r");
   sb_Script.Append("return false;");
   sb_Script.Append("\r");
   sb_Script.Append("}");
   sb_Script.Append("\r");
   sb_Script.Append("}");
   sb_Script.Append("\r");
   sb_Script.Append("</script>");

   //Inject the script into the page

   Page.ClientScript.RegisterClientScriptBlock(GetType(), SCRIPTBLOCK,
					sb_Script.ToString());
   //Registering validator clientside javascript function
   Page.ClientScript.RegisterExpandoAttribute(ClientID, "evaluationfunction",
					"cb_verify");
}

There are many articles on the performance of string concatenation compared to StringBuilder, but this is an example where the verbatim string is significantly better in terms of performance and maintenance. The modified code with the verbatim string looks like this:

private void ClientScript()
{
   string sb_Script = @"
<script language=""javascript"">
function cb_verify(sender) {
   var val = document.getElementById(document.getElementById(sender.id).controltovalidate);
   var col = val.getElementsByTagName(""*"");
   if ( col != null ) {
       for ( i = 0; i < col.length; i++ ) {
           if (col.item(i).tagName == ""INPUT"") {
               if ( col.item(i).checked ) {
                   return true;
               }
           }
       }
       return false;
    }
}
</script>";

   //Inject the script into the page
   Page.ClientScript.RegisterClientScriptBlock(GetType(), SCRIPTBLOCK,
                    sb_Script);
   //Registering validator clientside javascript function
   Page.ClientScript.RegisterExpandoAttribute(ClientID, "evaluationfunction",
                    "cb_verify");
}

The indentation is optional if you wish to minimize the javascript, but the end result is code that is easier to maintain. (I'm still evaluating the dp.SyntaxHighlighter and I see it has an issue with the verbatim string markup.)

Technorati tags: c#, javascript

Using dpSyntaxHighlighter in Subtext

Ryan Van Slooten — Fri, 16 Nov 2007 18:00:00 GMT

I finally worked on my blog theme last night and I managed to get the dp.SyntaxHighlighter to work with Subtext. I recall seeing someone else use it with Subtext, but I can't locate the blog anymore.

Here are the steps involved:

Create a custom skin for Subtext
Copy the shCore.js, shBrushCSharp.js, shBrushXxx.js files in the custom skin Scripts directory (~/Skins/YourCustomSkin/Controls)
Copy the SyntaxHighlighter.css file to the custom skin Styles directory (~/Skins/YourCustomSkin/Styles). If you choose to use the Flash clipboard.swf functionality, place it in the root Scripts directory.

Create a Skins.User.config file in the ~/Admin directory. Add the following styles:

<SkinTemplates
  xmlns:xsd="http://www.w3.org/2001/XMLSchema"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
>
  <Skins>
    <SkinTemplate Name="YourCustomSkin"
      TemplateFolder="YourCustomSkin">
      <Styles>
        <!-- Use an existing skin for a template
          to include a "normal" set of files. In
          this example, I only listed the one
          required style. -->
        <Style href="Styles/SyntaxHighlighter.css" media="all" />
      </Styles>
      <Scripts>
        <!-- Same as above. This is only a partial list
          of scripts, and a partial list of the highlighting
          files. There are more styles to include if you
          desire. -->
        <Script Src="Scripts/shCore.js" />
        <Script Src="Scripts/shBrushCpp.js" />
        <Script Src="Scripts/shBrushCSharp.js" />
        <Script Src="Scripts/shBrushJScript.js" />
        <Script Src="Scripts/shBrushPython.js" />
        <Script Src="Scripts/shBrushSql.js" />
        <Script Src="Scripts/shBrushVb.js" />
        <Script Src="Scripts/shBrushXml.js" />
      </Scripts>
    </SkinTemplate>
  </Skins>
</SkinTemplates>

Modify the custom skin PageTemplate.ascx file to include the following code:

<yourskin:Footer id="Footer" runat="server" />
<script type="text/javascript">
  init();
  addLoadEvent(
    function() {
      dp.SyntaxHighlighter.ClipboardSwf = subtextBlogInfo.getScriptsVirtualRoot() + 'clipboard.swf';
      dp.SyntaxHighlighter.HighlightAll('code');
    });
</script>

At this point you are ready to use the highlighter. Just to test, here is a little JavaScript:

// Append a new element to an existing element.
// Build the attributes from the attrs object.
function appendElem(elem, value, newNodeType, attrs)
{
  var t = document.createTextNode(value);
  if (newNodeType) {
    if (attrs && ("name" in attrs))
      newNodeType = "<" + newNodeType + " name='" + attrs["name"] + "'>";
    var n = document.createElement(newNodeType);
    if (attrs)
    {
      for (var attr in attrs)
      {
        var value = attrs[attr];
        if (attr == "class")
          n.className = value;
        else
          n.setAttribute(attr, value);
      }
    }
    n.appendChild(t);
    t = n;
  }
  elem.appendChild(t);
  return elem;
}

var elem = $("some-id"); // need prototype/jQuery...
appendElem(elem, "Testing", "textarea", {'class':'js', name:'code', cols:'40', rows:'5'});

Hopefully this will still work with RSS feeds and readers, otherwise I may be going back to the old method pasting code.

Technorati tags: Subtext

Throw Away Knowledge

Ryan Van Slooten — Tue, 13 Nov 2007 21:59:16 GMT

I have spent the past hour trying to modify a VBScript / JavaScript utility to print out my password expiration date and it is driving me a little crazy. I cannot understand why something that should be so simple can be so blasted difficult. I have several account at client sites and the password expires periodically. In order to make sure I don't let the account lapse, I wanted to print the password expiration date. I had a version that worked before but the distinguishedName had to be exact. I used the adfind utility to figure out my distinguished name and put it in the script. Today I wanted to remove that limitation but it is proving to be a big waste of time. Every attempt to make this work with either VBScript or JavaScript has been thwarted with malice.

Of couse that doesn't stop me from trying -- oh no! Merely a flesh wound. As a programmer determined to make things work, it will bug me until it actually does work! There is silliness involved such as this code to convert an Integer64 to a useable native data type in VBScript:

numDays = CCur((maxPwdAge.HighPart * 2 ^ 32) + _
                maxPwdAge.LowPart) / CCur(-864000000000)

whenPasswordExpires = DateAdd("d", numDays, oUser.PasswordLastChanged)

JavaScript doesn't have the CCur function so I have to use an alternative (and talk about silly -- using a currency data type to do this!). With both VBScript and JavaScript, I am having trouble searching Active Directory with a query or filter. At this point, I may use C# script where I have full .NET power.

This brings me to the point of this entry. Much of the programming technologies in use are destined for a short lifetime. It is an utter waste to invest time, money, and effort to build complex solutions against technologies and frameworks that will be replaced in two years. It is the dilemma that we find ourselves in though, and sometimes there is no or little choice.

As I write this entry I am looking at the waste land of books including my original C programming textbook from university, a ancient graphics programming book that describes "Mode X", some COM and ATL books, and tucked away somewhere I have the Petzold Win95 book and Prosise MFC Win95 book. Then I start thinking about l-values and r-values, some of the ridiculous MFC hacks I've had to make in the past and I'm glad I don't have to deal with that much anymore. Things have improved especially in the area of dynamic or scripting languages where the power of these languages allow the programmer to accomplish a significant amount of work with less effort. One of the benefits is that is almost forces other languages to add features and streamline for greater efficiency. Unfortunately it is a slow process but I do see progress.

Formatting Exponentials in Javascript

Ryan Van Slooten — Thu, 01 Mar 2007 18:54:12 GMT

A while back I needed the dashboard for the Key Performance Indicators (KPI) to display nicely formatted numbers. When the KPI values started to get large (millions, billions, etc.) the numbers became almost unreadable. In order to simplify the display of the numbers, I ended up converting the values to scientific notation. However in order to make the numbers even more readable, I converted the scientific notation into powers of 10³. I converted the floating point number into a string that was still a valid floating point number, but it used the exponential notation such as 1.0e6. I then used a regular expression to convert the exponent into HTML that the As a general practice, I would also put the raw formatted floating point number in the tooltip for the display. The function that actually performs the scientific notation grouping and conversion is toTrioExponential().

// Formats the value as an exponential as a multiple of 3
// NOTE: The result is a string that is still	a valid floating point number
function toTrioExponential(value, fixedDigits)
{
    var mag = parseInt(Math.log(Math.abs(value) / Math.LN10);
    var rem = mag % 3;
    if (rem == 2)
        ++mag;
    else if ((rem == 1) || (rem == -2))
        --mag;
    else if (rem == -1)
        mag -= 2;
    var coeff = value * Math.pow(10, -mag);
    if (fixedDigits)
        return coeff.toFixed(fixedDigits) + "e" + mag.toString();
    else
        return coeff.toString() + "e" + mag.toString();
};

The script supports changing the scaling criteria. Just modify the sciNot.scaleDigits and sciNot.scaleThreshold or supply the parameters to the function sciNot.floatAutoScale(elem, floatValue, scaleThreshold, scaleDigits);. The scaleThreshold and scaleDigits parameters are normally optional. To test the script, here is sample output using the default scaling parameters.

Raw number	Trio Sci Not	Formatted
1000000	1,000,000.00	1,000,000.00
10000000	10,000,000.00	10,000,000.00
100000000	100,000,000.00	100,000,000.00
1000000000	1,000,000,000.00	1,000,000,000.00
10000000000	10,000,000,000.00	10,000,000,000.00
100000000000	0.10e12	0.10 x 10 12
1000000000000	1.00e12	1.00 x 10 12
10000000000000	10.00e12	10.00 x 10 12
100000000000000	0.10e15	0.10 x 10 15
1000000000000000	1e15	1.00 x 10 15

Here is the javascript source for ScientificNotation.

Convert date to UTC format in JavaScript

Ryan Van Slooten — Tue, 23 Jan 2007 16:45:07 GMT

A couple of years ago I had to print dates in JavaScript in UTC (ISO-8601) format. Here is the function that I developed. It assumes the date object has the correct time zone offset and uses the time zone offset from the object.
I also developed server-side C# code for formatting dates in ASP.NET pages which I'll post soon.