Month: January 2009

I came across a javascript puzzle asking: Write a one-line piece of JavaScript code that concatenates all strings passed into a function:

    function concatenate(/*any number of strings*/) {
      var string = /*your one line here*/
      return string;
    } 

@ meebo

Seeing that the function arguments are represented as an indexed object MAYBE an array, i thought can be done in a recursive way. However my recursive implementation is throwing an error. –“conc.arguments.shift is not a function” —

    function conc(){
        if (conc.arguments.length === 0) 
            return "";
        else 
            return conc.arguments.shift() + conc(conc.arguments);
}

it seems as though conc.arguments is not an array, but can be accessed by a number index and has a length property??? confusing — please share opinions and other recursive implementations.

Thanks

Answer

arguments is said to be an Array-like object. As you already saw you may access its elements by index, but you don’t have all the Array methods at your disposal. Other examples of Array-like objects are HTML collections returned by getElementsByTagName() or getElementsByClassName(). jQuery, if you’ve ever used it, is also an Array-like object. After querying some DOM objects, inspect the resulting jQuery object with Firebug in the DOM tab and you’ll see what I mean.

Here’s my solution for the Meebo problem:

function conc(){
    if (arguments.length === 0)
        return "";
    else
        return Array.prototype.slice.call(arguments).join(" ");
}

alert(conc("a", "b", "c"));

Array.prototype.slice.call(arguments) is a nice trick to transform our arguments into a veritable Array object. In Firefox Array.slice.call(arguments) would suffice, but it won’t work in IE6 (at least), so the former version is what is usually used. Also, this trick doesn’t work for collection returned by DOM API methods in IE6 (at least); it will throw an Error. By the way, instead of call one could use apply.

A little explanation about Array-like objects. In JavaScript you may use pretty much anything to name the members of an object, and numbers are not an exception. So you may construct an object that looks like this, which is perfectly valid JavaScript:

var Foo = {
    bar : function() {
        alert('I am bar');
    },

    0 : function() {
        alert('I am 1');
    },

    length : 1
}

The above object is an Array-like object for two reasons:

1. It has members which names are numbers, so they’re like Array indexes
2. It has a length property, without which you cannot transform the object into a veritable Array with the construct: Array.prototype.slice.call(Foo);

The arguments object of a Function object is pretty much like the Foo object, only that it has its special purpose.

I’m working on developing a SIP application in Java and wondering what is the most used SIP library currently.

MJSIP?

Answer

As far as I know, its JAIN-SIP. Its good to know about MjSip, by the way. You might be interested in looking at JBoss Mobicent, the user guide is not complete at the moment. and you wouldn’t find much help on Mobicent.

Or as metadaddy stated here, “You might want to take a look at SailFin – its a SIP servlet container built by Ericsson using GlassFish.”

I’ve been pondering this for a while but cannot come up with a working solution. I can’t even psuedo code it…

Say, for example, you have a page with a heading structure like this:

<h1>Heading level 1</h1>

    <h2>Sub heading #1</h2>

    <h2>Sub heading #2</h2>

        <h3>Sub Sub heading</h3>

    <h2>Sub heading #3</h2>

        <h3>Sub Sub heading #1</h3>

        <h3>Sub Sub heading #2</h3>

            <h4>Sub Sub Sub heading</h4>

    <h2>Sub heading #4</h2>

        <h3>Sub Sub heading</h3>

Using JavaScript (any framework is fine), how would you go about producing a list like this: (with nested lists)

<ol>
    <li>Heading level 1
        <ol>
            <li>Sub heading #1</li>
            <li>Sub heading #2
                <ol>
                    <li>Sub Sub heading</li>
                </ol>
            </li>
            <li>Sub heading #3
                <ol>
                    <li>Sub Sub heading #1</li>
                    <li>Sub Sub heading #2
                        <ol>
                            <li>Sub Sub Sub heading (h4)</li>
                        </ol>
                    </li>
                </ol>
            </li>
            <li>Sub heading #4
                <ol>
                    <li>Sub Sub heading</li>
                </ol>
            </li>
        </ol>
    </li>
</ol>

Everytime I try and begin with a certain methodology it ends up getting very bloated.

The solution needs to traverse each heading and put it into its appropriate nested list – I keep repeating this to myself but I can’t sketch out anything!

Even if you have a methodology in your head but haven’t got time to code it up I’d still like to know it! 🙂

Thank you!

Answer

First, build a tree. Pseudocode (because I’m not fluent in Javascript):

var headings = array(...);
var treeLevels = array();
var treeRoots = array();

foreach(headings as heading) {
    if(heading.level == treeLevels.length) {
        /* Adjacent siblings. */

        if(heading.level == 1) {
            treeRoots[] = heading;  // Append.
        } else {
            treeLevels[treeLevels.length - 2].children[] = heading;  // Add child to parent element.
        }

        treeLevels[treeLevels.length - 1] = heading;
    } else if(heading.level > treeLevels.length) {
        /* Child. */

        while(heading.level - 1 > treeLevels.length) {
            /* Create dummy headings if needed. */
            treeLevels[] = new Heading();
        }

        treeLevels[] = heading;
    } else {
        /* Child of ancestor. */

        treeLevels.remove(heading.level, treeLevels.length - 1);

        treeLevels[treeLevels.length - 1].children[] = heading;
        treeLevels[] = heading;
    }
}

Next, we transverse it, building the list.

function buildList(root) {
    var li = new LI(root.text);

    if(root.children.length) {
        var subUl = new UL();
        li.children[] = subUl;

        foreach(root.children as child) {
            subUl.children[] = buildList(child);
        }
    }

    return li; 
}

Finally, insert the LI returned by buildList into a UL for each treeRoots.

In jQuery, you can fetch header elements in order as such:

var headers = $('*').filter(function() {
    return this.tagName.match(/hd/i);
}).get();

I’m writing a GUI for an application using Swing, and in the interests of code maintenance and readability, I want to follow a consistent pattern throughout the whole system.

Most of the articles and books (or at least book sections) that I’ve read appear to provide plenty of examples on how to create and arrange various components, but ignore the bigger picture of writing a full GUI.

What are your best tips for application GUI design, and what patterns do you follow when designing or refactoring a GUI application?

Answer

Use layout managers. You might think it’s simpler just to position everything with hard coded positions now (especially if you use a graphical layout tool), but when it comes time to update the gui, or internationalize it, your successors will hate you. (Trust me on this, I was the guy saying to use the layout managers from the start, and the successor to the guy who ignored me.)

I have an array:

data.Dealer.car[0]
data.Dealer.car[1]
data.Dealer.car[2]

If I do this:

alert(data.Dealer.car.length);
delete data.Dealer.car[1];
alert(data.Dealer.car.length);

It gives me the same count each time. Does the removed element still exist?

Answer

JavaScript arrays aren’t sparse, if you have a 0 and a 2, then element 1 must exist. Meaning the length is going to be 3.