Archive

Archive for the ‘JavaScript’ Category

Where do you need to use javascript MV* framework

August 29, 2013 Leave a comment

I like following while I was reading an article on javascript frameworks: I thought it is worth repeating:

So, where will you likely need an MV* framework and where won’t you?

If you’re writing an application that will likely only be communicating with an API or back-end data service, where much of the heavy lifting for viewing or manipulating that data will be occurring in the browser, you may find a JavaScript MV* framework useful.

Good examples of applications that fall into this category are GMail and Google Docs. These applications typically download a single payload containing all the scripts, stylesheets and markup users need for common tasks and then perform a lot of additional behavior in the background. It’s trivial to switch between reading an email or document to writing one and you don’t need to ask the application to render the whole page again at all.

If, however, you’re building an application that still relies on the server for most of the heavy-lifting of Views/pages and you’re just using a little JavaScript or jQuery to make things a little more interactive, an MV framework may be overkill. There certainly are complex Web applications where the partial rendering of views can* be coupled with a single-page application effectively, but for everything else, you may find yourself better sticking to a simpler setup.

Categories: Frameworks, HTML, HTML5, JavaScript

Tips for Better use of JavaScript

September 18, 2011 Leave a comment

Variables notation and initialization

Object    var oObject = null;
Array    var aArray = [];
Number    var nNumber = -1;
String    var sString = ”;
Boolean    var bBoolean = false;
jQuery    $object

Cache results of DOM search

Twice the same DOM request, not efficient:

document.getElementById(‘tal’).style.display = ‘block’;
document.getElementById(‘tal’).value = ‘Could be cached’;

Better, save the element into a variable:
var oTal = document.getElementById(‘tal’);

oTal.style.display = ‘block’;
oTal.value = ‘Is cached’;

Example of a commented method

/**
* This method does stuff, talk about it here.
* @author Author
* @member ClassName.prototype
* @param {type} oParam Describe the parameter.
* @returns {type} Describe the return value.
*/
ClassName.prototype.aFunction = function(oParam){}

Reference: jsdoc-toolkit

jQuery to Native snippets

jQuery Native  
$(‘#idElement’); document.getElementById(‘idElement’);  
$(‘#idElement’).jQueryMethod(); $(document.getElementById(‘idElement’)).jQueryMethod()  ;
$(‘#idElement’).click(function(){}); $(document.getElementById(‘idElement’)).bind(‘click’, function(){});
$(‘.className’); more than one element:var aArray = $.makeArray($(‘.className’)) // turns a jQuery collection into an array of DOM elements;only one element:

$(‘.className’)[0] // returns the DOM element only;

$object.val() oObject.value;
$object.attr(‘name’) oObject.name // Works for most the attributes of an element
$object.css(‘styleName’, ‘value’) oObject.style.[styleName] = ‘value’
$(‘.className’).each(); var aArray = $.makeArray($(‘.className’));var nArrayLen = aArray.length;var nCounter = 0; // Here initialized at 0 rather than -1!;

for(; nCounter < nArrayLen ; nCounter++){}

$object.addClass(‘className’); oObject.className += ‘ className’;
$object.removeClass(‘className’); oObject.className = oObject.className.replace(‘className’, ”);
$object.html(‘tal’); oObject.innerHTML = ‘tal’;
$object.append(”); oObject.innerHTML = ”;oroObject.appendChild(oChild);
Categories: HTML, JavaScript, jQuery

Browser Web Tools Tutorials

June 4, 2011 Leave a comment

I was going through few blogs to learn jQuery features and come across couple of cool browser developer tools tutorials.

1) This one coves all browsers:

Browser Dev tool tutorial – All Browsers
2) This one is from Google Chrome dev tools section by Paul Irish:
Introduction to The Chrome Developer Tools/

Categories: Browser, HTML, JavaScript

10 Useful Frameworks To Develop HTML-Based Webapps for Touch Devices

August 26, 2010 Leave a comment

I came across this article about different frameworks for building Mobile Apps/ Web sites by Antonio Lupetti

Intro of the Article is:

Make HTML-based touch applications. Easy.

In the last two years the rapid growth and diffusion of touch devices such as iOS or Android based platforms has forced developers and web designers to rethink the model of their own webapps for the new “touch experience” introduced by the iPhone in 2007.

During this period several frameworks have been released to help web developers implement quickly applications for this kind of touch devices. Here is a collection of some useful frameworks to develop easily HTML-based webapps that will work on all popular smartphone and tablet touch platforms.

Link to the article->

Few frequently used Regular Expressions by me.

August 13, 2010 Leave a comment

In ColdFusion:
1) To match a valid UK postcode and returns an array with one item of valid postcode otherwise returns array with no item in it:
Pattern to test (with or without spaces):

^ : is for start of the string

$: is for end of the string

?: zero or one letter (optional)

{1,2}: minimum 1 or maximum 2 characters

Pattern Example
A9 9AA M1 1BA
A99 9AA N12 1UD
AA9 9AA EH9 4UA
AA99 9AA RG6 1WG
A9A 9AA W1A 1NA
AA9A 9AA SW1A 1HQ
Special case for National Girobank
AAA 9AA GIR 0AA

<cfset arr = REMatch(“^[A-Za-z]{1,2}[0-9R][0-9A-Za-z]?[[:space:]]?[0-9][ABD-HJLNP-UW-Zabd-hjlnp-uw-z][A-Za-z]$”,request.postcode)>
<cfif len(arr) GT 1>
<cfreturn true >
</cfif>
<cfreturn true >

2) Another one for UK post code, little bit complicated

<cfset arr = REMatch(“^([Gg][Ii][Rr] 0[Aa]{2})|((([A-Za-z][0-9]{1,2})|(([A-Za-z][A-Ha-hJ-Yj-y][0-9]{1,2})|(([A-Za-z][0-9][A-Za-z])|([A-Za-z][A-Ha-hJ-Yj-y][0-9]?[A-Za-z])))) {0,1}[0-9][A-Za-z]{2})$”,request.postcode)>

Few references for UK Postcode regex)

Ref Site Link 1, Ref Site Link 2

3) To validate number with minimum 11 char and maximum 14 car using isValid function

isValid(‘regex’,request.mobileNo,”^[0-9]{11,14}”)

4) To remove all characters from the string except alpha numeric:

REReplace(stringvar, “[^a-zA-Z0-9]”,””,”All”);

In JavaScript:

To restrict any thing except alpha numeric (case insensitive)

string.replace(/[^a-zA-Z0-9]/g, “”)

To Replace brackets, dots and spaces from string globally

string.replace(/[\(\)\.\-\ ]/g, ”)

In ActionScript:

1) Phone number check through regEx validator:

private const UK_PHONE_NO_REGEX:String = ‘^[0+][0-9]{10,14}$’;

number can start with 0 or plus (+) , with minimum 10 and maximum 14 characters

2) removes double quotes from string:

var pattern1:RegExp = new RegExp(‘”‘, “g”);

str.replace(pattern1,”);

JavaScript Regular expression replacement:

Add comma separator to numbers like 10,000.00

variable.toString().split(“”).reverse().join(“”).replace(/(\d\d\d)(?=.)/g, “$1,”).split(“”).reverse().join(“”);
if you want to separate by (.) dot than replace comma with dot in here “$1,” in above string.

How to fire event from javascript (Dynamic)

August 13, 2010 Leave a comment

I had a requirement to call onchange event of a select box (combo box) from JavaScript and the function has an input param as event. I found one article which helped me to achieve this for one of my clients mobile web site (Land Rover UK), when I was working at www.2ndbyte.com.

The article link is Firing Javascript Events (like onchange)

Here is the code which I had to change a little bit to fit in my code:

function fireEvent(element,event){
if (document.createEventObject){
// dispatch for IE
var evt = document.createEventObject();
return element.fireEvent('on'+event,evt)
}
else{
// dispatch for firefox + others
var evt = document.createEvent("HTMLEvents");
evt.initEvent(event, true, true ); // event type,bubbling,cancelable
return !element.dispatchEvent(evt);
}
}

Here is the code for how to call this method:

fireEvent(obj,’change’);

Thanks to Jehiah

Categories: Browser, HTML, JavaScript Tags: , ,

HTML5 and touch phone devices

June 29, 2010 Leave a comment

Here is the first (I think) framework for Mobile phone (touch) devices, I need to explore more on this and will post in detail soon.

http://www.sencha.com/

Sencha Touch allows your web apps to look and feel like native apps. Beautiful user interface components and rich data management, all powered by the latest HTML5 and CSS3 web standards and ready for Android and Apple iOS devices. Keep them web-based or wrap them for distribution on mobile app stores

Categories: HTML5, JavaScript, Mobile, Sencha