Ten Oddities about Javascript

JavaScript. At once bizarre and yet beautiful, it is surely the programming language that Pablo Picasso would have invented. Null is apparently an object, an empty array is apparently equal to false, and functions are bandied around as though they were tennis balls.

NaN is a number, functions can execute themselves, undefined can be defined, and much more...

An amazing article noting incredible Javascript oddities. Read it on the Smashing Magazie: Ten Oddities And Secrets About JavaScript

Imported posts

Though I officially announced Byte Channel on this post, I had been writing some technical stuff on my other blog, Rambling Mutterings intermittently. Today I imported posts from that blog, along with all the comments, to this one. And I must admit blogger did a good job at that. It was a piece of cake, hardly took me a minute.

Only a handful though, here are the posts, more in English than in Java/Javascript, arranged by year:

• 2010
• 2009
• 2008

These can also be accessed via the archives on the right.

Note to self: Write a few technical posts in human readable languages as well.

Static final variable optimization in Java

You have a class A:

public class A {

  public static void main(String[] args) {
    System.out.println(B.finalX);
    System.out.println(B.alterableX);
  }
}

and a class B:

public class B {

  public static final String finalX = "initial final";

  public static String alterableX = "initial alterable";
}

You compile and run class A (class B is automatically compiled in case not already compiled) to get the following output:

>    initial final
>    initial alterable

You change the class B:

public class B {

  public static final String finalX = "changed final";

  public static String alterableX = "changed alterable";
}

Since only B is changed, you compile class B and run A. And you are in for a surprise because you get the following output:

>    initial final
>    changed alterable

The non-final variable is changed but the final one is not, which means, a static final variable--or a constant as it is rightly termed--of class A, is embedded in the bytecode of class B. Any changes in the constant are not incorporated until class B is recompiled.

This can be a potentially difficult-to-find error. I had this in one of my applications where I use maven to build a war. I did not do a clean build, and A got compiled before B in the build order. This resulted in A taking a value from the previous version of B, even though B was recompiled again.

Since B was the only class changed, I concentrated on B. I decompiled and ensured that the correct file went in. Suspecting changes in A, I decompiled class A too, and found that it also had the changed. It was purely on the basis of observations that I concluded on the following maxim, which I now find to be true from the above experiment:

"The compiler optimizes static final fields by embedding their values in the bytecode instead of computing them during class loading."

JSON:select()

If you loved CSS selectors, and were flabbergasted with the way jQuery selectors extended it, you'll be floored when you see JSON selectors.

Using the JSON selectors, you can directly access data in complex JSON objects. Whether you know the complete or partial path to the node you need, or even only the node name, it can directly access and fetch you data without you having to manually iterate over the entire tree. Visit http://jsonselect.org to get an overview and a demo.

JSON has been outdoing XML as the preferred data-exchange format because of its integration with Javascript and client-side code, and ease of parsing it within Javascript when compared to XML. JSON:select() adds an extra mile to the format and further reduces development time, even though it parses the entire tree under the covers and takes the same amount of processing time as parsing it by hand. But minimizing developer efforts is what most frameworks are for, aren't they?

A smooth, end-to-end ticker

This string is longer than the width of the scrolling space. You bet it is. I will make sure it is. :)

This is a small message.

Having tried out many tickers available out there on the net and satisfied with none, I wrote one myself. And am shamelessly publishing it here knowing it would add to the list of all those tickers I ignored.

But here are a few features of this ticker that might of interest, if they are not apparent from the tickers shown above:

• Provides real smooth scrolling, even at faster speeds. (Generally tickers increase the number of pixels moved per move to increase the speed, I decrease the time interval to achieve the same effect)
• Does an end-to-end rotation (no white space) even if the content is less or more than the ticker container width
• Takes care of changing data inside the ticker without any abruptness
• Takes less than a minute to implement
  
  • Download the ticker.js and include it in your file
  • Call initializeTicker with the id as the argument
    

Usage: initializeTicker(tickerId, speed, leftToRight, separator), where the arguments mean:

• tickerId   : mandatory, the id of the div/span that you want to tick.
• speed      : optional, the speed, possible values, 1, 2, 3. Default is 2.
• leftToRight: optional, true to change the direction to rightwards scrolling, default is false, indicating leftward scroll.
• separator  : optional, the separator between tail and the head of two instances of the ticker string. The default is ". . . . ".

The ticker is free to use, you can download it here. Please leave a comment here in case you use it. Suggestions/enhancement requests are welcome.

Number formatting in javascript

Javascript sucks when it comes to number formatting. The only inbuilt function is toFixed(n) that shows n decimal places in a floating-point number.

Here is a small function to format a javascript number using the thousands separator:

function addCommas(arg){
  if (typeof(arg) == "number")
    arg = String(arg);
  var x = arg.split("."); 
  var characteristic = x[0];  
  var dotAndMantissa = x.length > 1 ? "." + x[1] : "";
  characteristic = characteristic.replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,");
  return characteristic + dotAndMantissa;
}

It simply splits the number into the characteristic(the part before the decimal separator) and the mantissa(the part after the decimal), adds commas after every third digit starting from the right to the characteristic, suffixes the mantissa back, and returns the formatted string.