Truth, Equality and JavaScript | JavaScript, JavaScript... You don’t have to be a JavaScript novice to get confused by this… or this… The good news is that there is a standard and all browsers follow it. Some authors will tell you to fear coercion and and code against it. I hope to persuade you that coercion is a feature to be leveraged (or at the very least understood), not avoided… Is x true? Does x equal y? Conditionals In JavaScript, all conditional statements and operators follow the same coercion paradigm. The construct if ( Expression ) Statement will coerce the result of evaluating the Expression to a boolean using the abstract method ToBoolean for which the ES5 spec defines the following algorithm: Now we can see why, in the introductory example, if ([0]) allows entry to the subsequent block: an array is an object and all objects coerce to true. Here’s a few more examples. The Equals Operator (==) The == version of equality is quite liberal. Anyway, rant over, lets take a look at the way ECMA defines how == works. [0] == true; Like this:
Object Oriented JavaScript using Prototype Object - Saurabh Nijhawan For updated version of the article please visit www.agnosticdevs.com Object Oriented JavaScript using Prototype Object This document describes the benefit of using Object Oriented Approach in JavaScript Codes and implements Calendar Management component having a few functions like Add/Edit/Delete Events on selected date. As we all know Object Oriented Programming (OOP) is a major part and practice for reusability. Most of the times even if we are following standard ways to code on server-side, we just forget or omit about client side structure of application. As a result it becomes hectic to manage later, when application is modified to release a newer version of the same. As per my personal experience on the same, I found prototyping and object oriented JavaScript a perfect solution. Note: To understand the logic completely, you must have clear understanding on concepts like, Inheritance, constructors, Classes and objects. What is Prototype? For Example:- JavaScript How it works: Example 1:
Summary of JavaScript closures Summary of JavaScript closures If everything seems completely unclear then the best thing to do is to play with the examples. Reading an explanation is much harder than understanding examples. Final points: Whenever you use function inside another function, a closure is used. Links TrimBreakpoint is a tricky use of closures to let you inspect local variables for a function from a popup breakpoint window. addEvent() – Follow Up This is a follow-up to my addEvent solution. From the comments to that post it is clear that there were a couple of things missing. The first was the ability to return a value from the handleEvent function. The second was the ability to use W3C standard methods to cancel the event and stop event propagation (event bubbling). Below are the amendments necessary: function handleEvent(event) { var returnValue = true; event = event || fixEvent(window.event); var handlers = this.events[event.type]; for (var i in handlers) { this. One other issue, pointed out by PPK (via email).
JavaScript Scoping and Hoisting Do you know what value will be alerted if the following is executed as a JavaScript program? var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); If it surprises you that the answer is “10”, then this one will probably really throw you for a loop: var a = 1; function b() { a = 10; return; function a() {} } b(); alert(a); Here, of course, the browser will alert “1”. Scoping in JavaScript One of the sources of most confusion for JavaScript beginners is scoping. #include <stdio.h> int main() { int x = 1; printf("%d, ", x); // 1 if (1) { int x = 2; printf("%d, ", x); // 2 } printf("%d\n", x); // 1 } The output from this program will be 1, 2, 1. var x = 1; console.log(x); // 1 if (true) { var x = 2; console.log(x); // 2 } console.log(x); // 2 In this case, Firebug will show 1, 2, 2. To a lot of programmers who are used to languages like C, C++, C#, or Java, this is unexpected and unwelcome. Declarations, Names, and Hoisting function foo() { bar(); var x = 1; }
Prototype JavaScript Framework | Defining classes and inheritance In early versions of Prototype, the framework came with basic support for class creation: the Class.create() method. Until now the only feature of classes defined this way was that the constructor called a method called initialize automatically. Prototype 1.6.0 now features a richer class system that's backward-compatible and adds some new features. The cornerstone of class creation in Prototype is still the Class.create method. If you have legacy Prototype code, your class-based code will continue to work as before, but now you don't have to work with prototypes directly or use Object.extend to copy properties around. Example Suppose you have legacy Prototype class-based code that looks like htis: Observe the direct interaction with class prototypes and the clumsy inheritance technique using Object.extend. This has changed for the better. You can see how both class and subclass definitions are shorter because you don't need to hack their prototypes directly anymore. How to mix-in modules <?
JavaScript Closures 101- they're not magic JavaScript Closures 101- they're not magic Credits: This tutorial is written by Morris Johns. Morris maintains a personal blog called Developing Thoughts where he can be contacted via. This tutorial explains closures so that a regular programmer can understand them - using working JavaScript code. Closures are not hard to understand once the core concept is grokked. This article is intended for programmers with some programming experience in a main-stream language, and who can read the following JavaScript function: An Example of a Closure Two one sentence summaries: a closure is the local variables for a function - kept alive after the function has returned, or a closure is a stack-frame which is not deallocated when the function returns. The following code returns a reference to a function: Most JavaScript programmers will understand how a reference to a function is returned to a variable in the above code.
Memory Leakage in Internet Explorer - revisited Introduction If you are developing client-side re-usable scripting objects, sooner or later you will find yourself spotting out memory leaks. Chances are that your browser will suck memory like a sponge and you will hardly be able to find a reason why your lovely DHTML navigation's responsiveness decreases severely after visiting a couple of pages within your site. A Microsoft developer Justing Rogers has described IE leak patterns in his excellent article. In this article, we will review those patterns from a slightly different perspective and support it with diagrams and memory utilization graphs. We will also introduce several subtler leak scenarios. Why does the memory leak? The problem of memory leakage is not just limited to Internet Explorer. Don't get me wrong. Each browser has its own strengths and weaknesses. If you have read my previous article, then you already know that I am a usability, accessibility and standards crack. A simple beginning Let us begin with a simple example:
JavaScript Garden Although JavaScript deals fine with the syntax of two matching curly braces for blocks, it does not support block scope; hence, all that is left in the language is function scope. function test() { // a scope for(var i = 0; i < 10; i++) { // not a scope // count } console.log(i); // 10} There are also no distinct namespaces in JavaScript, which means that everything gets defined in one globally shared namespace. Each time a variable is referenced, JavaScript will traverse upwards through all the scopes until it finds it. In the case that it reaches the global scope and still has not found the requested name, it will raise a ReferenceError. The Bane of Global Variables // script Afoo = '42'; // script Bvar foo = '42' The above two scripts do not have the same effect. Again, that is not at all the same effect: not using var can have major implications. // global scopevar foo = 42;function test() { // local scope foo = 21;}test();foo; // 21 Local Variables var foo = 3; bar = 4;}test(10); Hoisting