Category Archives: Javascript

Web development and debugging tools

MVP Summit at Microsoft was an event with loads of information. Within the short span of three days, i learnt about several new tools that can make life of a developer easier. These tools can be used for development, debugging, testing and more processes. Here are some of the tools which i came across and learnt and found useful for a developer . 1. Fiddler : A free web debugging proxy for any browser, system or platform http://fiddler2.com/ 2. JSHint : A tool that helps to detect errors and potential problems in your JavaScript code.  http://www.jshint.com/ 3. JSComplexity : Software complexity analysis for Javascript projects. http://www.jscomplexity.org/complexity 4. ESPrima : A high performance, standard-compliant ECMAScript parser written in ECMAScript. http://esprima.org/ 5. Postman (Chrome extension) : A REST Client that stores history of sent requests and collections. Chrome Webstore : Postman 6. Poster (Firefox extension) : A developer tool for interacting with… Read the rest

Exclamation mark before a function in Javascript

While digging into bootstrap JavaScript plugin files i stumbled across a piece of code in JavaScript where exclamation mark was used before a function call. !function () {}(); This syntax known as Negated closure is something which i encountered for the first time. Lets see more details about this: Syntax for a function definition in Javascript is : function foo() {} You may note that there’s no semicolon after the curly braces end because this is a statement and you need a separate function call or invocation of foo() to actually run the function. Unlike above code which is a statement, !function foo() {} is an expression, but that still doesn’t make a function call, but we can use !function foo() {}() to do the same, as () has higher precedence than !. So, as we know exclamation mark ! returns Boolean, but it also converts the function declaration statement… Read the rest

Understanding JavaScript Closures

Javascript closures are considered an advanced topic in Javascript and understanding closures is essential to master Javascript. After reading this article, app developers will have an understanding of the following: What are Javascript closures How are Closures useful Why to use Closures How to use Closures Javscript Closure Examples JavaScript is a functional language unlike imperative languages like C/C++/Java. Using Javascript it is possible to assign a function to a var, pass one as an argument to another function, and return a function with the return keyword. Even a function can be declared inside another function, with all the scoping rules. So if there is a function within another function, the inner function has access to variables of the outer function. One of the situation where closures play a role is when a function definition is nested within a parent function that returns the nested function object as the value… Read the rest

WinJS.Binding.optimizeBindingReferences for Windows 8 App

As discussed recently i am working on a Windows 8 app for WindowsVJ readers. The application is in final phase and i submitted the app at the Windows 8 app store to check if it passes the Windows 8 app store requirements. After a few hours of submission i received an email which said my application does not pass the Windows Application Certification Kit test. The report generated mentioned following error: The Optimized Binding References test detected the following errors: Impact if not fixed: When using bindings, WinJS.Binding.optimizeBindingReferences should be set to true to optimize the memory usage. How to fix: Set WinJS.Binding.optimizeBindingReferences to true in the app’s JavaScript. Fixing this error is very simple. By adding WinJS.Binding.optimizeBindingReferences = true in default.js your application can pass through the WACK test. The code to be added would be: WinJS.Binding.optimizeBindingReferences = true; This variable determines whether or not binding should automatically set… Read the rest

Dynamically adding Cascading Style Sheets from within a Javascript file

Last week i discussed how to add Javascript Libraries dynamically in a Javascript file. In this post i will discuss how to add Cascading Style sheets pragmatically from a Javascript file. The reason behind is same. Many a times developer references to external CSS files in their website/project like referring to bootstrap.css, bootstrap-responsive.css etc. When the list of external references increases and you have to use same libraries/files at different pages/projects, they can be included from within a single script. This way including a single script file includes all the other CSS files. A single line of code to refer the master script can add a reference to all these CSS libraries. To add all files add this function in a javascript file used in all the pages (say main.js): function addStylesheet(filename) { var tagPosition = document.getElementsByTagName('head')[0]; var scriptElement = document.createElement('link'); scriptElement.setAttribute('rel', 'stylesheet'); scriptElement.setAttribute('type','text/css'); scriptElement.setAttribute('href',filename); tagPosition.appendChild(scriptElement); } This function works… Read the rest

Consuming REST based JSON services in a Windows 8 application

In this article I will discuss how to consume REST based JSON service in a Windows 8 application. Before i dive into details, here is a brief introduction about terms i would be using here: REST: REST denotes a representation of an object identified by a unique URL. REST services can be accessed using HTTP parameters like GET/POST. JSON: Javascript Object Notation is a data format used to transfer data. Its purpose is very similar to XML, though these two formats have large differences and both being used in industry for data interchange. 1. I will be using a REST based service for Twitter timeline located at specified URL and displaying contents of that service in a Windows 8 app. 2. Once we get a successful response for the call, we use JSON.parse function to convert the JSON string to an object. 3. The WinJS.xhr function is use to perform… Read the rest

Dynamically adding Javascript libraries

Many a times developer references to external Javascript libraries in their website/project like referring to bootstrap.js, jQuery.js etc. When the list of external references increases and you have to use same libraries/files at different pages/projects, they can be included from within a single script. This way including a single script file includes all the other scripts. A single line of code to refer the master script can add a reference to all these libraries. To add all files add this function in master javascript (say index.js): function addScript(filename) { var tagPosition = document.getElementsByTagName('head')[0]; var scriptElement = document.createElement('script'); scriptElement.setAttribute('type', 'text/javascript'); scriptElement.setAttribute('src', filename); tagPosition.appendChild(scriptElement); } This function works as follow: 1. Get the DOM element head and assign it to a variable tagPosition. 2. Create a DOM element script and assign it to a variable scriptElement . 3. Add an attribute ‘type’ with value ‘text/javascript’ for the scriptElement. 4. Add an attribute… Read the rest
http://www.windowsvj.com/outlet