zParacha.com » Javascript

Why you should stop using onload method.

Zaheer Paracha — Tue, 02 Feb 2010 03:46:27 +0000

Onload

It is amazing that many web developers still use onload method embedded in the BODY tag, like

There are two problems with this line of code.

Embedding code (behavior) with HTML (structure) makes it difficult to maintain the page.
onload() method will executes only after the page is fully displayed.

Let’s see how to fix these problems.
Fixing problem # is quite simple. Just move your JavaScript code to the header section of you HTML page.

Even better approach would be to move the code to an external Javascript file and add a reference to that file in the header section of the HTML document. For example, if the code is in script.js you can import the code like

or more formally.


$(function(){
	document.contact.userID.focus();
}

So now your HTML code will be like

Now our JavaScript code will be executed as soon as the DOM is fully constructed, without waiting for images and other multimedia resources. In this example the focus will be set to your input text field almost instantly and user can start typing in the information without waiting for rest of the page to be downloaded. This is a simple but effective way of improving your website's usability.

Why you should stop using onload method. is a post from: zParacha.com | Effective programming and blogging tips by Zaheer Paracha

RSS feed.',suggestTags: 'focus,Javascript,jQuery,JS,onload',providerName: 'zParacha.com: Effective Programming tips',styling: 'text' });return false" class="evernoteSiteMemoryLink">

Set focus on the first text field of HTML form. A HTML form is a very good channel that you...
Dynamically Resize Text .codeText{color:blue;font-weight:normal;width:100%;} .subhead{color:gray;font-weight:bold;text-decoration:underline;} CSS, combined with little JavaScript, offers great flexibility...
AJAX Contact Form Want to collect input from your web site’s visitors? Don’t...

Nine Must Have JavaScript Tools For Every Web Developer

Zaheer Paracha — Fri, 16 Oct 2009 01:20:35 +0000

Almost all major web development projects include some javascript. Developing Javascript may be easy for some but working around various browsers’ incompatiblities makes it a bit more tedious chore. As a developer I always welcome the opportunity to use development tools that may help in the development process. Following is a list of some useful Javascript tools that I believe every web programmer should have at his or her disposal.

Javascript Frameworks:

Ext JS

ExtJS is a client-side, JavaScript framework for building rich web applications.

Ext JS is a cross-browser JavaScript library for building rich internet applications. It includes:

* High performance, customizable UI widgets
* Well designed and extensible Component model
* An intuitive, easy to use API

Ext JS supports all major web browsers.

SproutCore

SproutCore is another Javascript framework for developing thick-client web applications in JavaScript. The development team of this cross-browser framework claims that their SproutCore offers best performance for web applications. They have incorporated Steve Souders’ recommendations for building high performance websites into the framework that makes any web appliacation developed with this framwork perform much better.

JavaScriptMVC

As the name implies the JavaScriptMVC framework is based on the popular Model-View-Controller (MVC) software architecture. The framework is built using jQuery and offers best practices in software development making it easy to develop and maintain the code for a large project.

JavascriptMVC is an open source framework that incorporates software-development best practices in javascript code. It guides you to successfully completed projects by promoting best practices, maintainability, and convention over configuration.

Documentation:

I know how much all developers love the documentation part of a project. But documentation is an integral part of software development, to ease the pain of the documenation you can use JSDoc Toolkit.

JsDoc Toolkit

Similar to Javadoc, that creates documentation from Java comments, JsDoc can generate documentation from comments in Javascript source code.

Jsdoc-Toolkit is an application, written in JavaScript, for automatically generating template-formatted, multi-page HTML (or XML, JSON, or any other text-based) documentation from commented JavaScript source code.
Image Manipulation

Pixastic

If you need to do image manipulation in your web application Pixastic mya help you. Pixastic is a JavaScript library which allows you to perform a variety of operations, filters and fancy effects on images using just a bit of JavaScript.
“Pixastic is an experimental library which allows you to perform a variety of operations on images using just a bit of JavaScript. The effects supported out of the box include desaturation/greyscale, invert, flipping, brightness/contrast adjustment, hue/saturation, emboss, blur, and many more. For the full list, see the documentation page.”

Pixastic works by utilizing HTML5 Canvas elemtent, so it does not work well with IE that does not support Canvas.
Debugging

Firebug

: Firebug is my favorite debugging tool for Javascript based web applications. It is feature riched JavaScript debugging tool.

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

DamnIT

You can debug your web application only that much. With several different browsers you can never be sure that you have caught and fixed all the bugs in your Javascript code. This is where DamnIT can help. DamnIT is a Javascript error reporting service that can email you detailed error report when a user encounters a Javascript error on your website. It is a free service which can be really useful for debugging large web applications.
Javascript Widgets

LivePipe

LivePipe UI is a suite of high quality widgets and controls for web 2.0 applications. It is built using the Prototype JavaScript Framework. Each control is well tested, highly extensible, fully documented and degrades gracefully for non JavaScript enabled browsers where possible. MIT licensed and actively maintained. It employs event oriented programming concepts that introduces a mechanism to create and observe events on any object, not just DOM elements. This is used by all controls, and allows for fine grained control of your user interface.

Roar-Notifications

Have you ever visited a website that displays pop-up alerts reminding you of their services? Those pop-up alerts of the past were annoyning and I don’t encounter them anymore. But sometimes there is a legitimate reason to display some information to your websitev visitors without innterupting their browsing pleasure. Roar widget is the alternative to those annoying pop-up alerts. This Javascript widget (worked with MooTool Javascript) allows you to display your messages in an unobtrusive way. You can customize the appearance of the widget and control the positions of the messages. The messages are interactive, user can click them to visit other pages on your website or hover over them to read them at their own pace.

Have you used any of these tools? Do you have your favorite Javascript tool?

Nine Must Have JavaScript Tools For Every Web Developer is a post from: zParacha.com | Effective programming and blogging tips by Zaheer Paracha

RSS feed.',suggestTags: 'damnit,firebug,framework,Javascript,javascript frameworks,javascript tools,javascriptmvc,tools,web development tools',providerName: 'zParacha.com: Effective Programming tips',styling: 'text' });return false" class="evernoteSiteMemoryLink">

Top 10 tools for bloggers. If you are looking for ways to improve your blogging...
Compress JavaScript and CSS files to optimize website speed. Referencing external JavaScript and/or CSS files from a web page...
Improve your JavaScript code. Christian Heilmann compiled a list of seven rules for unobtrusive...

How to display RSS feed on your website.

Zaheer — Wed, 21 Jan 2009 05:05:11 +0000

Image credit:Kyle Wegner

OK, admit this. You have a nice-looking website. The color and the graphics look pleasing
to visiting eyes. But you do not get a lot of loyal visitors. The problem may not be your design,
it may be the static content that is turning the visitors off. If you do not update your website regularly, you may not attract enough repeat visitors. One way to juice up your website is to display RSS feeds from other relevant and reputable websites. Don’t know how to incorporate the RSS feeds into your website? Here is what you need:

All you need is some basic JavaScript knowledge. In fact, you don’t even need that if you know how to cut & paste and which files to update. Yes it is that easy and thanks Google for this convenience. What was once considered a tedious task, Google made it super duper easy. Google developed an AJAX based API that you can call from a JavaScript method.

The API returns the content of the RSS feed that you specify. And then you can display that content on your own web site.

You can visit Javascrip Kit for a detailed explanation of Google API.
There you will also find some easy-to-follow examples that you can use on your website. Just change the feed URL in the JavaScript to the ones that you want to display on your website.

For official documentation and examples from Google visit Google APIs page page.
Enjoy!

How to display RSS feed on your website. is a post from: zParacha.com | Effective programming and blogging tips by Zaheer Paracha

RSS feed.',suggestTags: 'Javascript,rss feeds',providerName: 'zParacha.com: Effective Programming tips',styling: 'text' });return false" class="evernoteSiteMemoryLink">

Display external RSS feeds on your website. You have designed a beautiful website. But you still do...
Compress JavaScript and CSS files to optimize website speed. Referencing external JavaScript and/or CSS files from a web page...
Mobilize your website Did you know that there are approximately 1.5 billion mobile...

Validate U.S Phone Numbers using JavaScript Regular expression.

Zaheer — Fri, 29 Feb 2008 04:44:25 +0000

Photo credit: aussiegall

Continuing with our JavaScript regular expression series today we will discuss JavaScript regular expression to validate U.S phone number. Previously we talked about validating email , Social Security number and zip code using JS regex.

In today’s post I’ll show you how to use JavaScript regular expression to validate U.S phone number.

Although in this article we are discussing U.S phone number format I am sure this can be applied to other phone number formats with little or no change.

Let’s begin by looking at the JavaScript code.


function validatePhoneNumber(elementValue){
var phoneNumberPattern = /^\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})$/;
return phoneNumberPattern.test(elementValue);
}

Explanation:

The argument to this method is the phone number you want to validate.

In the method body we define a variable (‘phoneNumberPattern’) and assign a regular expression to it.

Phone Number format: The regular expression for phone number is

/^$?(\d{3})$?[- ]?(\d{3})[- ]?(\d{4})$/

Let’s divide this regular expression in smaller fragments to make is easy to understand.

/^\(?: Means that the phone number may begin with an optional “(“.

(\d{3}): After the optional “(” there must be 3 numeric digits. If the phone number does not have a “(“, it must start with 3 digits. E.g. (308 or 308.

\)?: Means that the phone number can have an optional “)” after first 3 digits.

[- ]?: Next the phone number can have an optional hyphen (“-”) after “)” if present or after first 3 digits.

(\d{3}): Then there must be 3 more numeric digits. E.g (308)-135 or 308-135 or 308135

[- ]?: After the second set of 3 digits the phone number can have another optional hyphen (“-”). E.g (308)-135- or 308-135- or 308135-

(\d{4})$/: Finally, the phone number must end with four digits. E.g (308)-135-7895 or 308-135-7895 or 308135-7895 or 3081357895.

On the final line we call test method for our regular expression and pass the phone number as input. If the input phone number satisfies our regular expression, Ã¢â‚¬ËœtestÃ¢â‚¬â„¢ will return true otherwise it will return false. We return this value to the calling method.

Validate U.S Phone Numbers using JavaScript Regular expression. is a post from: zParacha.com | Effective programming and blogging tips by Zaheer Paracha

RSS feed.',suggestTags: 'Javascript,RegEx,Regular Expression',providerName: 'zParacha.com: Effective Programming tips',styling: 'text' });return false" class="evernoteSiteMemoryLink">

Validate Zip code using JavaScript Regular expression Continuing with my series of JavaScript regular expression today we...
Validate email address using JavaScript regular expression Last month I wrote about regular expressions in Java, today...
How to validate Social Security Number (SSN) using JavaScript Regular Expressions When I wrote the JS regular expression article last week...

Validate Zip code using JavaScript Regular expression

Zaheer — Mon, 18 Feb 2008 17:37:24 +0000

Zip Code

Continuing with my series of JavaScript regular expression today we will see how easy it is to validate zip code using regular expression in JavaScript. Previously we talked about validating email and Social Security number using JS regex.

In today’s post I’ll show you how to use JavaScript regular expression to validate zip code. Let me first show you the JS code.


function validateZipCode(elementValue){
    var zipCodePattern = /^\d{5}$|^\d{5}-\d{4}$/;
     return zipCodePattern.test(elementValue);
}

Explanation:

The argument to this method is the zip code you want to validate.

In the method body we define a variable (‘zipCodePattern’) and assign a regular expression to it.

ZipCode format: The regular expression for zip code is

/^\d{5}$|^\d{5}-\d{4}$/

This is quite a simple regular expression.

What we are saying here is that a valid zip code can either have 5 digits or 5 digits followed by an hyphen(-) and ends with four digits. So, zip codes 38980 and 83900-8789 will pass validation. However, 83900- or 839008789 will not pass our validation test.
If you don’t want to have a zip+4 format you can use /^\d{5}$/ as the regular expression to validate simple zip code.

Image credit:smcgee

Validate Zip code using JavaScript Regular expression is a post from: zParacha.com | Effective programming and blogging tips by Zaheer Paracha

RSS feed.',suggestTags: 'Javascript,RegEx,Regular Expression',providerName: 'zParacha.com: Effective Programming tips',styling: 'text' });return false" class="evernoteSiteMemoryLink">

Validate U.S Phone Numbers using JavaScript Regular expression. Photo credit: aussiegall Continuing with our JavaScript regular expression series...
Validate email address using JavaScript regular expression Last month I wrote about regular expressions in Java, today...
How to validate Social Security Number (SSN) using JavaScript Regular Expressions When I wrote the JS regular expression article last week...

How to validate Social Security Number (SSN) using JavaScript Regular Expressions

Zaheer — Sat, 16 Feb 2008 03:44:37 +0000

When I wrote the JS regular expression article last week I had no idea that it will attract so many visitors. Not only did so many people read this post, many more visited my blog searching for other regular expressions. So I decided to write few more posts about JavaScript regular expressions and how to use them to validate Social Security number, zip code, phone number and numeric data. I’ll divide these into smaller posts discussing one regular expression per post to keep it simple for the readers.

In today’s post I’ll show you how to use JavaScript regular expression to validate Social Security number. Let me first show you the JS code.

    function validateSSN (elementValue){
       var  ssnPattern = /^[0-9]{3}\-?[0-9]{2}\-?[0-9]{4}$/;
       return ssnPattern.test(elementValue);
   }

Explanation:

The argument to this method is the social security number you want to validate.

In the method body we define a variable (‘ssnPattern’) and assign a regular expression to it.

SNN format: The regular expression for social security number (SSN) is

/^[0-9]{3}\-?[0-9]{2}\-?[0-9]{4}$/

To understand the regular expression we will divide it into smaller components:

/^[0-9]{3}: Means that the social security number must begin with at least three numeric characters.

\-?: Means that SSN can have an optional hyphen (-) after first 3 digits.

[0-9]{2}: First 3 digits (or optional hyphen) must be followed by 2 more digits.

\-?: After the second group of digits there may be another optional hyphen (-) character.

[0-9]{4}$/: Finally, the social security number must end with four digits.

On the final line we call test method for our regular expression and pass the social security number as input. If the input SSN satisfies our regular expression, ‘test’ will return true otherwise it will return false. We return this value to the calling method.

You can call this method whenever you want to validate social security number.

Examples:

Following SSNs will pass validation : 345-90-98023, 234908908; 239-586767; 73467-8790

The method will return false for following SSNs. 34-909-9098; 34a-20-7678;

How to validate Social Security Number (SSN) using JavaScript Regular Expressions is a post from: zParacha.com | Effective programming and blogging tips by Zaheer Paracha

RSS feed.',suggestTags: '',providerName: 'zParacha.com: Effective Programming tips',styling: 'text' });return false" class="evernoteSiteMemoryLink">

Validate U.S Phone Numbers using JavaScript Regular expression. Photo credit: aussiegall Continuing with our JavaScript regular expression series...
Validate Zip code using JavaScript Regular expression Continuing with my series of JavaScript regular expression today we...
Validate email address using JavaScript regular expression Last month I wrote about regular expressions in Java, today...

Validate email address using JavaScript regular expression

Zaheer — Fri, 08 Feb 2008 03:52:06 +0000

Last month I wrote about regular expressions in Java, today I’ll show you how to use regular expression in JavaScript to validate email address.

Here is the code to validate email address in JavaScript using regular expression.

function validateEmail(elementValue){
   var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
   return emailPattern.test(elementValue);
 }

Explanation:

The argument to this method is the email address you want to validate.
In the method body we define a variable (‘emailPattern’) and assign a regular expression to it.

Email format: The regular expression for email is

/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/

To understand the regular expression we will divide it into smaller components:

/^[a-zA-Z0-9._-]+: Means that the email address must begin with alpha-numeric characters (both lowercase and uppercase characters are allowed). It may have periods,underscores and hyphens.

@: There must be a ‘@’ symbol after initial characters.

[a-zA-Z0-9.-]+: After the ‘@’ sign there must be some alpha-numeric characters. It can also contain period (‘.’) and and hyphens(‘-’).

\.: After the second group of characters there must be a period (‘.’). This is to separate domain and subdomain names.

[a-zA-Z]{2,4}$/: Finally, the email address must end with two to four alphabets. Having a-z and A-Z means that both lowercase and uppercase letters are allowed.
{2,4} indicates the minimum and maximum number of characters. This will allow domain names with 2, 3 and 4 characters e.g.; us, tx, org, com, net, wxyz).

On the final line we call test method for our regular expression and pass the email address as input. If the input email address satisfies our regular expression, ‘test’ will return true otherwise it will return false. We return this value to the calling method.

You can call this method whenever you want to validate email address.

Validate email address using JavaScript regular expression is a post from: zParacha.com | Effective programming and blogging tips by Zaheer Paracha

RSS feed.',suggestTags: '',providerName: 'zParacha.com: Effective Programming tips',styling: 'text' });return false" class="evernoteSiteMemoryLink">

Ultimate Java Regular Expression to validate any email address. My post about Java regular expression gets a lot of...
Validate Zip code using JavaScript Regular expression Continuing with my series of JavaScript regular expression today we...
Validate U.S Phone Numbers using JavaScript Regular expression. Photo credit: aussiegall Continuing with our JavaScript regular expression series...

Set focus on the first text field of HTML form.

Zaheer — Thu, 31 Jan 2008 05:14:06 +0000

A HTML form is a very good channel that you can offer to your visitors to contact you. An aesthetically appealing form encourages user to fill and submit it. It is equally important to make the form as user friendly as possible. Today I’ll share a small JavaScript function that will set the focus on the first editable text field of your form. So when the web page loads the users don’t have to click on the text field. They can just start typing as soon as the form loads.

Here is the JavaScript code.

function setFocus(){
 var flag=false;
 for(z=0;z

How to use this script.

Save the script in a text file and name it focus.js.

To use script copy and paste following line into the header section of your form HTML file.

zParacha.com » Javascript

Why you should stop using onload method.

Nine Must Have JavaScript Tools For Every Web Developer

Javascript Frameworks:

Documentation:

Image Manipulation

Debugging

Javascript Widgets

How to display RSS feed on your website.

Validate U.S Phone Numbers using JavaScript Regular expression.

Explanation:

Validate Zip code using JavaScript Regular expression

Explanation:

How to validate Social Security Number (SSN) using JavaScript Regular Expressions

Explanation:

Validate email address using JavaScript regular expression

Explanation:

Set focus on the first text field of HTML form.

How to use this script.