Posts Tagged Javascript

Jumping into Javascript – Good news and bad news

I have resumed development of the JamochaTrade project and there has been a lot of progress over the last week or so. The last article left off with a very rudimentary candlestick chart that got its data via cross-domain JSON. I am pleased to announce that a UI has been added, along with the ability to buy and sell stocks, limit and stop orders, 5 different chart types (candlestick, bar, ohlc, hlc and line), a portfolio view, pending orders view, advancing time by week/month is animated as well as a host of other improvements.

Unfortunately the speed at which these features have been added has ended the step-by-step nature of this series. I will continue to provide progress updates and hope to produce a number of articles based on architecture or challenges that arise during development. Though there is not much discussion, you can still follow along with the commit log of the project. Each commit is relatively small and, in most cases, addresses a single concern. There is also some information provided in the issue tracker, which I have been making heavy use of and almost every commit has an associated issue.

The project is not yet ready for release, however there is a preview version available. Criticisms, comments, bug reports and feature requests are more than welcome. You can leave comments below or file a bug report or feature request on the issue tracker.

Try the demo

 

Features:

  • 5 chart types (candlestick, bar, ohlc, hlc, line)
  • 15, 30, 60 and 90 day charts
  • Change chart colors
  • Advance time by day, week or month (animated)
  • Buy/sell stocks
  • Portfolio view
  • Sell directly from portfolio view
  • Market, limit and stop orders
  • Pending order pane
  • Cancel pending orders
  • Change theme of site
  • Previously viewed stock data is cached for fast switching
  • Most features auto-hide when not necessary to reduce clutter
  • Account balance and total portfolio value show gains/losses

Screenshot 1

Screenshot 2

Screenshot 3

Screenshot 4

Screenshot 5

Screenshot 6

, ,

No Comments

Javascript wisdom from the jQuery source code

Here are a few things I learned from reading the jQuery source code. I’m documenting them here because they’re edge cases that are, in some cases, difficult to reproduce and debug. The jQuery source code is very clean and well commented and has many more gems than what is listed here.

 

getElementById sometimes returns elements by name in some versions of IE and Opera.

                                // HANDLE: $("#id")
                                } else {
                                        elem = document.getElementById( match[2] );

                                        // Check parentNode to catch when Blackberry 4.6 returns
                                        // nodes that are no longer in the document #6963
                                        if ( elem && elem.parentNode ) {
                                                // Handle the case where IE and Opera return items
                                                // by name instead of ID
                                                if ( elem.id !== match[2] ) {
                                                        return rootjQuery.find( selector );
                                                }

                                                // Otherwise, we inject the element directly into the jQuery object
                                                this.length = 1;
                                                this[0] = elem;
                                        }

                                        this.context = document;
                                        this.selector = selector;
                                        return this;
                                }

Even something as simple as getElementById can have edge cases you have to take into account. In IE 6 and 7 for Windows and some versions of Opera, dom elements can be returned by name instead of id. In addition, as seen in the comments of the code above, Blackberry 4.6 can return nodes that are not even in the document.

See references here and here.

 

A false positive on the domready event can cause rapid page refreshing.

        // Handle when the DOM is ready
        ready: function( wait ) {
                // Either a released hold or an DOMready/load event and not yet ready
                if ( (wait === true && !--jQuery.readyWait) || (wait !== true && !jQuery.isReady) ) {
                        // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
                        if ( !document.body ) {
                                return setTimeout( jQuery.ready, 1 );
                        }

The domready event, which is present in some form or another in many browsers can fire before the dom is actually loaded. This can cause continuous page reloads and other errors which are hard to reproduce and debug. The solution to this is to check that the document.body is not null before accepting the domready event.

Of course you can always fall back to the window.onload event, however this will force you to wait until the entire content of the page (including possibly large images) has loaded.

See references here and here.

,

No Comments

Classes and Instances in Javascript Using the Closure Method

I was reading a question about what every Javascript programmer should know on StackOverflow and found this useful pattern for using the more classic class/instance pattern instead of Javascript’s standard prototype method. I found the last example to be quite elegant and want to preserve it here for reference.

function Shape(x, y) {
    var self = {};

    self.x = x;
    self.y = y;

    self.toString = function() {
        return 'Shape at ' + self.x + ', ' + self.y;
    };

    return self;
}

function Circle(x, y, r) {
  var self = Shape(x, y);

  self.r = r;

  var _baseToString = self.toString;
  self.toString = function() {
    return 'Circular ' + _baseToString(self) + ' with radius ' + r;
  };

  return self;
};

var mycircle = Circle(2, 3, 5);
console.log(mycircle.x === 2);
console.log(mycircle.y === 3);
console.log(mycircle.r === 5);
console.log(mycircle.toString());

With this pattern you have to use the ‘self’ variable (which you can name anything you wish, the original was named ‘that’) to access and modify attributes of the class just like in Python. Unlike Python you must explicitly declare the self variable at the beginning of the class and return it at the end. Also if you are going to override an attribute in the parent class, but still need to access the parent attribute, you must rename it before overriding it, otherwise the reference to self.toString will end up in an infinite recursive loop.

, , , , ,

No Comments