background preloader

Javascript Closures

Javascript Closures
Introduction Closure A "closure" is an expression (typically a function) that can have free variables together with an environment that binds those variables (that "closes" the expression). Closures are one of the most powerful features of ECMAScript (javascript) but they cannot be property exploited without understanding them. The simple explanation of a Closure is that ECMAScript allows inner functions; function definitions and function expressions that are inside the function bodes of other functions. Unfortunately, properly understanding closures requires an understanding of the mechanism behind them, and quite a bit of technical detail. The Resolution of Property Names on Objects ECMAScript recognises two categories of object, "Native Object" and "Host Object" with a sub-category of native objects called "Built-in Object" (ECMA 262 3rd Ed Section 4.3). Assignment of Values var objectRef = new Object(); A property with the name "testNumber" can be created as:- Reading of Values Finally:- Related:  JavaScript

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:

Maps Javascript API V3 Controls - Google Maps JavaScript API V3 - Google Code Controls Overview The maps displayed through the Maps JavaScript API contain UI elements to allow user interaction with the map. These elements are known as controls and you can include variations of these controls in your application. Alternatively, you can do nothing and let the Maps JavaScript API handle all control behavior. The following map shows the default set of controls displayed by the Maps JavaScript API: Below is a list of the full set of controls you can use in your maps: The Zoom control displays "+" and "-" buttons for changing the zoom level of the map. You don't access or modify these map controls directly. Not all of these controls are enabled by default. The Default UI By default, all the controls disappear if the map is too small (200x200px). The behavior and appearance of the controls is the same across mobile and desktop devices, except for the fullscreen control (see the behavior described in the list of controls). Disabling the Default UI TypeScript JavaScript

MSIE Javascript Annoyances: Using parameters in setTimeout() | Claws and Paws dot Com Today's programmatic venting is brought to you by Internet Explorer's implementation of the setTimeout() function under Javascript. What is setTimeout()? setTimeout() schedules an arbitrary function call for some point in future. This is useful when you have functions that do repetitive tasks some milliseconds apartment, but not constantly. The reason why this is used instead of a simply while (true) { ... } loop is because Javascript is a single-threaded language. So if you tie up the interpreter by executing one piece of code over and over, nothing else in the browser gets a chance to run. setTimeout() allows other pieces of Javascript (or browser events, such as clicking on a button) to run, while guaranteeing that your code will be executed at some point. Sounds cool. Simple, like this: setTimeout(function_name, msec); This will cause a function called function_name to execute a certain number of milliseconds in the future. setTimeout(function_name, msec, arg1); And this works great. f();

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:

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; }

Maps Javascript API V3 Reference - Google Maps JavaScript API V3 - Google Code Release Version Last updated Monday, February 17, 2014 This reference documents version 3.15 (the release version) of the Maps Javascript API released November 15, 2013. To consult the latest (experimental) version of the Maps Javascript API, see the Experimental Development Reference. Reference Table of Contents Map Controls Overlays Services Map Types Layers Street View Events Base Geometry Library AdSense Library Panoramio Library Places Library Drawing Library Weather Library Visualization Library google.maps.Map class This class extends MVCObject. Constructor Methods Properties Events google.maps.MapOptions object specification google.maps.MapTypeId class Identifiers for common MapTypes. Constant google.maps.MapTypeControlOptions object specification Options for the rendering of the map type control. google.maps.MapTypeControlStyle class Identifiers for common MapTypesControls. google.maps.OverviewMapControlOptions object specification Options for the rendering of the Overview Map control. google.maps.Marker class

Javascript Naming Conventions, Coding Guidelines and Best Practices | Live Free. Live Happy. While most of the popular languages (Java, .NET, C++) have elaborate documents on the naming conventions to follow, I couldn't find any such good document for javascript. All I could find was bits and pieces here and there. This is the main reason why I am creating this page listing the javascript naming conventions I follow. This may not be complete but I shall try to make it as comprehensive as possible. 1. All variables should be prefixed with a letter indicating the data type of the variable (Hungarian notation). s - String n - number b - boolean a - Array o - object (Native Objects, Host Objects and user-defined objects) Further, the first letter of each of the words should be capitalized. Ex: var sSampleText = "Hello"; 2. g - global m - All member variables (private and public) var gsSampleText = "Hello"; 3. function Person(_msFirstName, _msLastName) { this.msFirstName = _msFirstName; this.msLastName = _msLastName; } 4. function XmlParser() { // Do something } 5. 1. 2. 3. 4. 6. if (sAge !

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 <?

Related: