Making Javascript DOM a Piece of Cake with the graft() Function
Posted by Maciek Sun, 15 Oct 2006 17:45:43 GMT
In an earlier article I presented DOM as a useful way to construct documents on the fly in Javascript. DOM is well known for this purpose, but it’s also well known for being extremely irritating and verbose to use in Javascript. Some programmers may be tempted to use quoted HTML combined with the innerHTML property, which may (for them) be somewhat easier to crank out than DOM code. But this is hardly a way to go forward, and creates all sorts of problems when using AJAX, JSON, or when working in an environment involving a lot of strict XML usage. Casting all of that aside, this article will demonstrate the use of the graft() function to simplify the construction of DOM structures using Javascript’s own simple object notation.
More after the jump..
Read more...Canadian Savings Account Calculator
Posted by Maciek Wed, 04 Oct 2006 13:55:52 GMT
For our Canadian readers, I have posted a Javascript-based high-interest savings account calculator that lets you compare rates between various Canadian vendors.
Check it out here
Simplify Scope with Javascript Closures
Posted by Maciek Mon, 25 Sep 2006 20:25:09 GMT
For those of you using Javascript prototypes as classes and interacting them with HTML or DOM elements, it’s often tricky or painful to keep things clean and nicely separated. Often, the result is a bunch of global (i.e. members of window) variables littered all over the place. Still more difficult is the problem of somehow associating given DOM objects with given class (or prototype) instances without having to use clumsy proxies or tracking keys in hashes.. etc. You can greatly simplify this sort of code by using closures. In the following article, I will give you a simple pattern to apply to any functionality you want to attach to objects that steal or would otherwise confuse scope. This pattern is useful anywhere you attach functions to the properties of objects outside of those functions’ context: AJAX XMLHttpRequest objects, DOM elements, or your own prototype-derived objects..
Read more...Using the DOM in Your Web Applications
Posted by Maciek Wed, 20 Sep 2006 17:13:26 GMT
The DOM (Document Object Model) can be a clear and useful way to represent and interact with XML documents. It can also be a rather obtuse and un-obvious way to work with data when you first come in contact with it. In spite of some of its more difficult parts (especially as one digs into DOM Level 2 and 3) , the core DOM API is fairly consistent. It is this consistency that offers programmers some of DOM’s great strengths: operational sameness from language-to-language and system-to-system, schema-to-schema—and, to a lesser extent, browser to browser. As one works with it, however, one comes to realize that DOM is only a piece of a puzzle that fits into a greater whole in the XML world, and this consistency is only part of that larger philosophy that embodies XML.
Read more...Mutual Fund / ETF Fee and Growth Calculator
Posted by Maciek Thu, 14 Sep 2006 18:09:12 GMT
From time to time I like to create handy little Javascript-based apps for myself to do financial calculations or various other things. Here’s my latest one which you can use in the comfort of your browser without any plugins (tested in Firefox and Opera9):
This is a simple Mutual Fund / ETF fee, growth and return, investment calculator that I’ve been working on. You can compare two mutual funds or ETFs (ETF = exchange traded fund) and their growth characteristics over time given several factors like ETF, expected return, investment horizon, and even market volatility. You can set some simple buy and sell fees to simulate commissions from your discount or online broker. The calculator can give you an idea of how much of an impact fees can have on your investment as time goes on.
Javascript: Viewing Source and Understanding Source
Posted by Maciek Fri, 18 Aug 2006 14:17:08 GMT
Did an entire generation of Javascript programmers learn from viewing source?
In my last Javascript article I argued that Javascript has historically lacked good online resources for programmers who wanted more information, examples and design patterns for the language. Jeff Atwood at Coding Horror has written an insightful piece about the importance of being able to view source, and in particular credits Javascript’s rise in popularity to being able to view the source code (while right in the browser). While I have never really given much thought to this idea, he gives a convincing argument. It would certainly represent a powerful (if at times crude) alternative to comprehensive documentation and literature.
I would like to add some more to this line of thinking, however…
Read more...Javascript: The Underappreciated Dynamic Language
Posted by Maciek Sun, 13 Aug 2006 04:19:29 GMT
I’ve always felt that Javascript is an under-appreciated language.
This is probably due to the fact that it’s been cursed in several tremendously unfortunate ways: First, Javascript has always been associated with Java, with which it shares pretty much no characteristics, leading to some undeserved lumping-with and confusion when it comes to the things that Java does badly within web browsers; Second, Javascript is a deceptively “easy” language that doesn’t initially appear to have much to it – many programmers (even ones with academic backgrounds) use it as if it was a vastly-weaker cousin of Java and for whatever reason never chance upon Javascript’s fascinating high level features; Third, Javascript appears to be “missing” a lot of features that were hip and happening through much of the crazy dot-com days and the last few years IT in general—object-orientation in the pop sense being one of them; Fourth, and most frustratingly, for many years the web and print resources available to anyone interested in the true nature of Javascript have been disgustingly atrocious and juvenile. (One might argue that this is changing nowadays with the focus on AJAX, increasing prominence of dynamic languages like Ruby, and the surging interest in LISP-like features, as evidenced by nearly every language gradually incorporating bits and pieces of LISP features into successive versions). For much of the last decade, however, any search engine query for Javascript-related terms has resulted in a barrage of junky websites with little information and a lot of cut-and-paste code for producing animated HTML effects.
To really move forward, we need to stop looking at Javascript as “C for the Web” or worse, “Crappy Java”, and instead try to interpret the language through the lens of what we’ve learned from Ruby, LISP, Scheme, Eiffel, etc. In other words, we’re asking the question: what can we squeeze out of our Javascript experience if we enter the scene expecting features we’re used to in super high level languages? To that end, what follows is a short demo of how we can extend, manipulate, and otherwise tinker with Javascript functions.
Read more...
