Reading a Local File using HTML5 and JavaScript
These APIs are used to read file locally, handling images etc. Some of the specifications are as listed below:
1. File: Provides read-only information about the file like name, filesize, mimetype etc.
2. FileList: Represents an array of individually selected files from the local system
3. Blob: Represents the raw binary data and allows access to range of bytes within the data which can be used for slicing file
4. FileReader: Provides methods to read data from file or Blob
Backbone.js Handling DOM events and working with Collections
To manage data of web applications, Backbone provides a Model creation strategy. The model allows us to define properties to contain data and business logic. The Collection declaration allows to store collection of the data, which is later used by the view.
In Backbone, the View (UI) is generally rendered using HTML Templates, and elements declared in this Template are accessible to View, but it might be possible that the HTML page (or MVC view or .aspx) already contains HTML elements and you need to handle the DOM events for these elements. The question then is how to handle them?
In the following implementation we will see that the ‘click’ event for the html button element is handled inside the View object. The method which gets executed for the click event is used to add the model object into the collection and then the collection is rendered using HTML Table.
The Absolutely Awesome jQuery Cookbook Released
This book covers the latest jQuery v1.11.1 or 2.1 and jQuery UI 1.11.2 versions and contains 120+ practical jQuery recipes (about 70 Recipes and 50+ sub-recipes) you can use in your websites and projects right away. Each recipe includes working code, a live demo and a discussion on why and how the solution works. This eBook is available in PDF, .ePub and .mobi formats.
This book is primarily targeted for the everyday jQuery developer and designer who wants to enhance his/her websites and projects or wants to focus on the practical features of jQuery, and how they can be applied to solving real-world problems. The book assumes you have some working knowledge of HTML, CSS, jQuery and JavaScript. Although the first chapter ‘Getting started with jQuery & jQuery UI’ and the fifth chapter ‘Getting started with $.ajax()’ is a crash course introduction to jQuery and Ajax, I have provided links to additional resources, if you are relatively new to jQuery and want to make the best of this book.
You can download sample chapters over here
Using LocalStorage in HTML5 with JavaScript to manage data locally in a Browser
In the past, we have used cookies to save data generated by user, on the client side. But there have been multiple issues with cookies, mainly due to its insecure nature. Because of these issues, users browse the web by disabling cookies or deleting them from time to time.
In HTML5, a new standard web storage was created called as LocalStorage and sessionStorage. Typically these are really useful to save data in cases where:
- Browser Crashes accidently.
- User closes browser accidently
- Internet connection lost.
Backbone.js Basics and Rendering Collection using View
Backbone Basics
Backbone.js is a lightweight library for structuring client side code. This easily helps to decouple concerns in the application. Typically, this library is used to build SPA’s. The advantage of using backbone is that it provides lightweight data structuring mechanism using model and collection and helps to use these in generated Views. This is very important for designing dynamic applications using JavaScript. You can get detailed information from http://backbonejs.org/.There are some important features provided by Backbone as discussed below:
KnockoutJS Cheat Sheet for Beginners
This article is from the Free DNC Magazine for .NET Developers. Subscribe here for Free
1. Knockout is a JavaScript Library (as opposed to Backbone.js which is a framework) that helps you improve the User Experience of your web application.
2. Knockout provides two way data-binding using a ViewModel and provides DOM Templating, it doesn’t deal with sending data over to server or routing.
3. You use Knockout as a drop-in enhancement library to improve usability and user experience, whereas Framework like Backbone is used to group up in new applications (Single Page Apps is a good example).
4. You can create a KO ViewModel as a JavaScript object or as a Function (known as prototype). It’s outside the jQuery document ready.
Hello AngularJS – Building a Tweet Reader
However these SPA templates are rather opinionated on the usage of the underlying frameworks and may not be the best starting point if we are trying to understand the framework under the hood. So today, we will look at AngularJS in a plain vanilla ASP.NET MVC app. We’ll start with an empty project and go ground up.
What is Angular JS?
Angular JS is (another) client side MVC framework in JavaScript. It was created by a group of developers at Google when they realized that their project (Feedback) had become too unwieldy and needed a cleanup. The three weeks effort at that cleanup lay seed to what we now know as AngularJS. Of course AngularJS was thrown open to community and since then had garnered a pretty vibrant community and a boat load of features.Using FlipView Control in Windows Store Apps using JavaScript and HTML
FlipView, represents an item control which displays one item at a time and enables user to use the flip behavior which is used for traversing through the collection of items. Typically such a control is used for traversing through Product Catalog, Books information etc. Technically the FlipView is a control provided in Windows Store Apps through Windows Library for JavaScript. The data to FlipView is made available through IListDataSource. (Note: You can get data from an external web sources like, web service, WCF service, WEB API in the JSON format).
We will use the FlipView for iterating through Images that’s passed to it from the WinJS List object.
Step 1: Open VS2012 and create a new Windows Store Apps using JavaScript. Name it as ‘Store_JS_FlipView’. In this project add some images in the ‘images’ folder. (I have some images as Mahesh.png, SachinN.png,SachinS.png, KiranP.jpg).
Hello TypeScript – Getting Started
What is TypeScript?
October 1, 2012 will probably be remembered in the history of Software Development when Microsoft Technical Fellow and father of C# Anders Hejlsberg announce TypeScript, a new Type conformant JavaScript. A language that compiles down to plain JavaScript but on its own has all the hallmarks of a language with first class tooling support in Visual Studio. If you have an hour to spare, go through Anders introduction, you’ll love it. If not, go through this article and you’ll get the gist. Bottomline, don’t start ranting too soon. TypeScript has a lot to offer.Getting Started
Microsoft has made it really easy to get started with TypeScript. You have an online web-based code editor cum compiler. They also have a Visual Studio 2012 plugin that works on the Professional and above editions. Since a lot has been made about the benefits of ‘tooling’ while introducing TypeScript, we will download and install the TypeScript plugin.Note: TypeScript is available in Sublime Text, Vi, Emacs editor
Once the Plugin is installed, start Visual Studio, find the Html Application with TypeScript. Strangely enough it goes under the Visual C# category hence it took a minute to find.
Use HTML 5 Elements in IE 8 using HTML 5 Shiv
<!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]—>
This script enables IE to acknowledge the new HTML 5 elements by directing it to create the elements using JavaScript. The conditional comment shown above only loads the html5 shiv code when the version of IE is lower than 9.
You also need some CSS styling to render the elements as block-level elements
Most Popular .NET, jQuery and Web Development articles in 2011
JavaScript Quick Way to Find Max and Min Value in an Array
Array.prototype.max = function () { return Math.max.apply(Math, this); }; Array.prototype.min = function () { return Math.min.apply(Math, this); };
All you have to do now is call these methods on an array:
var max = [10, 12, 18, 24, 15].max(); var min = [10, 12, 18, 24, 15].min(); alert("Max Number: " + max + " Min Number: " + min);
The output is
The Math.max and Math.min can take unlimited arguments which is ideal when finding out the max and min in an array. The apply() function allows you to call a function with a this value and pass an array of any number of arguments. Starting with JavaScript 1.8.5, the arguments can be a generic array-like object instead of an array.
Prefix an Integer using JavaScript
Let’s see how simple it is to prefix an integer in JavaScript. This script was originally shared by a programmer tobytai
<head> <title>Prefix Integers with Zeros - DevCurry.com</title> <script type="text/javascript"> function PrefInt(number, len) { return (Array(len).join('0') + number).slice(-length); } document.writeln(PrefInt(79, 4)); </script> </head>
The OUTPUT is 00079.
If you are not familiar how the Slice() function works, check my article Slice() and Splice() in JavaScript
JavaScript: Find Day of Year
JavaScript, CSS3, Silverlight, ASP.NET, SharePoint articles Link List – July 2011
jQuery, JavaScript and CSS Articles
ASP.NET, MVC and Silverlight articles
.NET and SharePoint Articles
Other Articles
Swap Variables in JavaScript – Different Methods
Swap variable values using a temporary variable
// Using a Temp Variable var x = 10; var y = 20; var tmp = x; x = y; y = tmp; alert("Value of X=" + x + " and value of Y=" + y);
Swap variable values without a temporary variable
// Without using a temp variable var x = 10; var y = 20; x = x + y; y = x - y; x = x - y; alert("Value of X=" + x + " and value of Y=" + y);
Swap using Bitwise XOR operator
// Bitwise Exclusive OR operator var x = 10; var y = 20; x ^= y; y ^= x; x ^= y; alert("Value of X=" + x + " and value of Y=" + y);
Single line Swap (works in Firefox)
// JavaScript 1.7 and above var x = 10; var y = 20; [x, y] = [y, x]; alert("Value of X=" + x + " and value of Y=" + y);
OUTPUT
If you know of any other method to swap variable values in JavaScript, please share it with fellow readers.
Conditional CSS and JavaScript for Different Browsers
JavaScript: Convert CamelCase to Dashes and vice-versa
<script type="text/javascript" language="javascript"> function camelToDash(str) { return str.replace(/\W+/g, '-') .replace(/([a-z\d])([A-Z])/g, '$1-$2'); } function dashToCamel(str) { return str.replace(/\W+(.)/g, function (x, chr) { return chr.toUpperCase(); }) } var str1 = "devCurry"; str1 = camelToDash(str1); var str2 = "dev-curry"; str2 = dashToCamel(str2); alert(str1 + " " + str2); </script>
Let’s see some important bits of the code shown above.
Run the code and you should see the following output
Unary plus operator in JavaScript
+new Date; // implies Number(new Date)
a + “” // implies String(a)
+a // implies Number(a), so “+1.2” becomes 1.2
a = null; a = +a; // value of a is now 0;
Unary plus is the preferred way of converting something into a number!Note: The unary plus operator does not change the sign of an integer. So if the number is negative, the unary + does not change the sign to a positive
JavaScript Object can have Private Methods
Any attempt to call deleteEmployee will result in the following error: