Prakash Samariya - IT Professional: 09 September 2007

Friday 14 September, 2007

Books for ASP.NET 2.0 AJAX E-COMMERCE

Tuesday 11 September, 2007

Javascript: RegExp (regular expression) object

Regular expressions are a powerful tool for performing pattern matches in Strings in JavaScript. You can perform complex tasks that once required lengthy procedures with just a few lines of code using regular expressions. Regular expressions are implemented in JavaScript in two ways:

Literal syntax:

//match all 7 digit numbers
var phonenumber= /\d{7}/

Dynamically, with the RegExp() constructor:

//match all 7 digit numbers (note how "\d" is defined as "\\d")
var phonenumber=new RegExp("\\d{7}", "g")

The RegExp() method allows you to dynamically construct the search pattern as a string, and is useful when the pattern is not known ahead of time.

Related Tutorials (highly recommended readings)

Pattern flags (switches)

Property	Description	Example
i	Ignore the case of characters.	/The/i matches "the" and "The" and "tHe"
g	Global search for all occurrences of a pattern	/ain/g matches both "ain"s in "No pain no gain", instead of just the first.
gi	Global search, ignore case.	/it/gi matches all "it"s in "It is our IT department"
m	Multiline mode. Causes ^ to match beginning of line or end of string. Causes $ to match end of line or end of string. JavaScript1.5+ only.	/hip$/m matches "hip" as well as "hip\nhop"

Position Matching

Symbol	Description	Example
^	Only matches the beginning of a string.	/^The/ matches "The" in "The night" by not "In The Night"
$	Only matches the end of a string.	/and$/ matches "and" in "Land" but not "landing"
\b	Matches any word boundary (test characters must exist at the beginning or end of a word within the string)	/ly\b/ matches "ly" in "This is really cool."
\B	Matches any non-word boundary.	/\Bor/ matches "or" in "normal" but not "origami."
(?=pattern)	A positive look ahead. Requires that the following pattern in within the input. Pattern is not included as part of the actual match. JavaScript1.5+ only.	/(?=Chapter)\d+/ matches any digits when it's proceeded by the words "Chapter", such as 2 in "Chapter 2", though not "I have 2 kids."
(?!pattern)	A negative look ahead. Requires that the following pattern is not within the input. Pattern is not included as part of the actual match. JavaScript1.5+ only.	/JavaScript(?! Kit)/ matches any occurrence of the word "JavaScript" except when it's inside the phrase "JavaScript Kit"

Literals

Symbol	Description
Alphanumeric	All alphabetical and numerical characters match themselves literally. So /2 days/ will match "2 days" inside a string.
\O	Matches NUL character.
\n	Matches a new line character
\f	Matches a form feed character
\r	Matches carriage return character
\t	Matches a tab character
\v	Matches a vertical tab character
\xxx	Matches the ASCII character expressed by the octal number xxx. "\50" matches left parentheses character "("
\xdd	Matches the ASCII character expressed by the hex number dd. "\x28" matches left parentheses character "("
\uxxxx	Matches the ASCII character expressed by the UNICODE xxxx. "\u00A3" matches "£".

The backslash (\) is also used when you wish to match a special character literally. For example, if you wish to match the symbol "$" literally instead of have it signal the end of the string, backslash it: /\$/

Character Classes

Symbol	Description	Example
[xyz]	Match any one character enclosed in the character set. You may use a hyphen to denote range. For example. /[a-z]/ matches any letter in the alphabet, /[0-9]/ any single digit.	/[AN]BC/ matches "ABC" and "NBC" but not "BBC" since the leading "B" is not in the set.
[^xyz]	Match any one character not enclosed in the character set. The caret indicates that none of the characters NOTE: the caret used within a character class is not to be confused with the caret that denotes the beginning of a string. Negation is only performed within the square brackets.	/[^AN]BC/ matches "BBC" but not "ABC" or "NBC".
.	(Dot). Match any character except newline or another Unicode line terminator.	/b.t/ matches "bat", "bit", "bet" and so on.
\w	Match any alphanumeric character including the underscore. Equivalent to [a-zA-Z0-9_].	/\w/ matches "200" in "200%"
\W	Match any single non-word character. Equivalent to [^a-zA-Z0-9_].	/\W/ matches "%" in "200%"
\d	Match any single digit. Equivalent to [0-9].
\D	Match any non-digit. Equivalent to [^0-9].	/\D/ matches "No" in "No 342222"
\s	Match any single space character. Equivalent to [ \t\r\n\v\f].
\S	Match any single non-space character. Equivalent to [^ \t\r\n\v\f].

Repetition

Symbol	Description	Example
{x}	Match exactly x occurrences of a regular expression.	/\d{5}/ matches 5 digits.
{x,}	Match x or more occurrences of a regular expression.	/\s{2,}/ matches at least 2 whitespace characters.
{x,y}	Matches x to y number of occurrences of a regular expression.	/\d{2,4}/ matches at least 2 but no more than 4 digits.
?	Match zero or one occurrences. Equivalent to {0,1}.	/a\s?b/ matches "ab" or "a b".
*	Match zero or more occurrences. Equivalent to {0,}.	/we*/ matches "w" in "why" and "wee" in "between", but nothing in "bad"
+	Match one or more occurrences. Equivalent to {1,}.	/fe+d/ matches both "fed" and "feed"

Alternation & Grouping

Symbol	Description	Example
( )	Grouping characters together to create a clause. May be nested.	/(abc)+(def)/ matches one or more occurrences of "abc" followed by one occurrence of "def".
(?: )	Grouping only, so items are grouped into a single unit, but the characters that match this group are not remembered. In other words, no numbered references are created for the items within the parenthesis. JavaScript 1.5 feature.	/(?:.d){2}/ matches but doesn't capture "cdad".
\|	Alternation combines clauses into one regular expression and then matches any of the individual clauses. Similar to "OR" statement.	/(ab)\|(cd)\|(ef)/ matches "ab" or "cd" or "ef".

Back references

Symbol	Description	Example
( )\n	Matches a parenthesized clause in the pattern string. n is the number of the clause to the left of the back reference.	(\w+)\s+\1 matches any word that occurs twice in a row, such as "hubba hubba." The \1 denotes that the first word after the space must match the portion of the string that matched the pattern in the last set of parentheses. If there were more than one set of parentheses in the pattern string you would use \2 or \3 to match the appropriate grouping to the left of the backreference. Up to 9 backreferences can be used in a pattern string.

Regular Expression methods

Method	Description	Example
String.match( regular expression )	Executes a search for a match within a string based on a regular expression. It returns an array of information or null if no match are found. Note: Also updates the $1…$9 properties in the RegExp object.	var oldstring="Peter has 8 dollars and Jane has 15" newstring=oldstring.match(/\d+/g) //returns the array ["8","15"]
String.replace( regular expression, replacement text )	Searches and replaces the regular expression portion (match) with the replaced text instead. Note: Also supports the replacement of regular expression with the specified RegExp $1…$9 properties.	var oldstring="(304)434-5454" newstring=oldstring.replace(/[-]/g, "") //returns "3044345454" (removes "(", ")", and "-")
String.split ( string literal or regular expression )	Breaks up a string into an array of substrings based on a regular expression or fixed string.	var oldstring="1,2, 3, 4, 5" newstring=oldstring.split(/\s,\s/) //returns the array ["1","2","3","4","5"]
String.search( regular expression )	Tests for a match in a string. It returns the index of the match, or -1 if not found. Does NOT support global searches (ie: "g" flag not supported).	"Amy and George".search(/george/i) //returns 8
RegExp.exec(string)	Applies the RegExp to the given string, and returns the match information.	var match = /s(amp)le/i.exec("Sample text") //returns ["Sample","amp"]
RegExp.test(string)	Tests if the given string matches the Regexp, and returns true if matching, false if not.	var pattern=/george/i pattern.test("Amy and George") //retuns true

Example- Replace "<", ">", "&" and quotes (" and ') with the equivalent HTML entity instead

function html2entities(){
var re=/[(<>"'&]/g
for (i=0; i<arguments.length; i++)
arguments[i].value=arguments[i].value.replace(re, function(m){return replacechar(m)})
}

function replacechar(match){
if (match=="<")
return "<"
else if (match==">")
return ">"
else if (match=="\"")
return """
else if (match=="'")
return "'"
else if (match=="&")
return "&"
}

html2entities(document.form.namefield.value, document.form.hobbyfield.value)

--
Prakash Samariya (IT Professional, HDSE)
Mob: 9879074678 Res: +91-79-32924610
http://ps-india.blogspot.com/
http://psamariya.googlepages.com/
Below Nelson's School, Opp SBI, Punit Ahram Road, Maninagar, Ahmedabad - 380008, Gujarat, India.

Javascript: Add Event Listner for IE5+

function createIEaddEventListeners()
{
    if (document.addEventListener  || !document.attachEvent)
        return;

    function ieAddEventListener(eventName, handler, capture)
    {
        if (this.attachEvent)
            this.attachEvent('on' + eventName, handler); 
    }

    function attachToAll()
    {
        var i, l = document.all.length;

        for (i = 0; i < l; i++)
            if (document.all[i].attachEvent)
                document.all[i].addEventListener = ieAddEventListener; 
    }

    var originalCreateElement = document.createElement;

    document.createElement = function(tagName)
    {
        var element = originalCreateElement(tagName);
        
        if (element.attachEvent )
            element.addEventListener = ieAddEventListener;

        return element;
    }
    
    window.addEventListener = ieAddEventListener;
    document.addEventListener = ieAddEventListener;
 
    var body = document.body;
    
    if (body)
    {
        if (body.onload)
        {
            var originalBodyOnload = body.onload;

            body.onload = function()
            { 
                attachToAll();
                originalBodyOnload();
            };
        }
        else
            body.onload = attachToAll;
    }
    else
        window.addEventListener('load', attachToAll); 
}

createIEaddEventListeners();

Scripting in Modersn Browser

Overview of scripting in modern browsers such as IE6+ and Firefox

This tutorial aims to provide a quick overview of scripting ( JavaScript ) in modern browsers such as IE6 + and Firefox 1+, where it differs and is similar to scripting in legacy browsers proceeding them.

Detecting modern browsers

To the heart of the matter first- how to detect modern browsers in your script. The easiest way and one that is relatively reliable is to see if the browser supports document.getElementById, one of the primary methods of the DOM that any modern browser supports.

//1) Detect IE5+ and Firefox (including NS6+)
if (document.getElementById)
alert("You are using a modern browser that supports the DOM")

//2) Detect Firefox (and NS6+) exclusively
if (document.getElementById && !document.all)
alert("You are using Firefox or NS6+")

//3) Detect Opera 6+ exclusively
if (window.opera && window.print)
alert("You are using Opera 6 or above")

For most JavaScripts you'll write, just detecting support for document.getElementById will suffice in ensuring the script will run in that browser.

if (document.getElementById)
//do something modern

Out with document.all

document.all is a proprietary property of IE introduced in IE4 that arguably ushered in the era of DHTML, allowing any element on the page to be accessed and manipulated. This property continues to be supported in IE6, and most likely for the next few versions ahead. However, just because it is supported doesn't mean you should use it. The DOM equivalent of document.all is document.getElementById, and you should use the later whenever possible for cross browser compatibility and ease of maintenance. FYI document.getElementById is supported in IE5 and above, and of course, all other modern browsers such as Firefox and Opera 6+.

Access the document by traversing the DOM

The old way of accessing and manipulating the document is being deprecated as developers are encouraged to use the DOM style instead. This means using the properties and methods of the DOM to access an element, change its attribute, or bind events to the page. The most demonstrative example is accessing a form- instead of using the property document.forms, you should now assign the form an ID and use that instead:

<form id="myform">
<input type="text" name="telephone" />
</form>

<script type="text/javascript">
//proper way to access a form
 document.getElementById("myform").telephone

//Legacy, improper way to access a form (assuming "formname" is the name of the form)
document.forms.formname.telephone
</script>

Here we have a form that can be accessed in two different ways, though the DOM way is the only one that will validate, as the <form> tag should no longer contain a "name" attribute, only "id".

To add or modify attributes of an element, you should now use the DOM methods for this, which are:

getAttribute(attributeName)
removeAttribute(attributename)
setAttribute(attributename, value)

For example:

<img id="myimage" src="dog.gif" />

<script type="text/javascript">
var imgsrc=document.getElementById("myimage").getAttribute("src")
document.getElementById ("myimage").setAttribute("src", "cat.gif")
</script>

Last but no least, whenever possible, you should bind event handlers to the document by doing so inside your script and using the DOM. For example, instead of:

<body onload="dothis()">

you should instead do this:

<script type="text/javascript">
if (window.addEventListener) //DOM method for binding an event
window.addEventListener("load", dothis, false)
else if (window.attachEvent) //IE exclusive method for binding an event 
window.attachEvent("onload", dothis)
else if (document.getElementById) //support older modern browsers
window.onload=dothis
</script>

Some things are still proprietary

While everything revolves around the DOM in modern browsers, there are still properties and methods that are proprietary to specific browsers, whether it's Firefox or IE. Here are a couple of examples:

window.pageXOffset, window.pageYOffset //Firefox properties for document scroll coordinates
document.body.scrollLeft, document.body.scrollTop //Firefox properties for document scroll coordinates 

window.innerWidth , window.innerHeight //Firefox properties for window dimensions
document.body.clientWidth, document.body.clientHeight ////IE properties for window dimensions

Conclusion

The DOM is really nothing to be timid about. In fact, as you learn about the DOM, you'll see how it in facts simplifies your life, but providing you with a logical, browser neutral way of manipulating the document. The days of coding multiple versions of a script for multiple browsers are gone, if not very close to.

Prakash Samariya - IT Professional