I’ve had a lot of moments when I needed to call a javascript function dynamically. By dynamic function call in javascript, I mean when you do not know the function name to be called before hand i.e. the function name to be executed is provided at runtime.

All you need to do is – window["functionname"]();

Yeah, that’s all! Here functionname would be replaced with the name of your function. As always, I’ll provide a working example so that there is no confusion as to how to make dynamic function calls in Javascript.

Javascript has an inbuilt substring function which helps to extract parts of a string.

substring(start, stop) :

start (mandatory) – The starting index

stop (optional) – The index to stop extraction

Example: If you want to find the first 3 alphabets in the word INDIA, the code would be

var name = “INDIA”;

var firstThreeLetters = name.substring(0,3);

alert(firstThreeLetters);

The alert would display : IND

Note: Here start is 0 hence the extraction starts from the letter in the 0th position i.e. the first letter. The stop index is 3 which means extraction would stop at index 3 (the letter at index 3 will not be extracted)

Since stop is optional, if you only specify the start parameter, all the letters after the starting index (including the one at the start) would be extracted.

Example: Consider the same example as above, for the word INDIA if we were to give the start as 1

var name = “INDIA”;

var extractedLetters = name.substring(1);

alert(extractedLetters);

The alert would display NDIA as the output of the javascript substring method.

————————————————————————————

Indepth Analysis of Javascript substring

Let’s try and create our own Javascript substring function.

String.prototype.mySubstring = function(start,stop) {

var charArray = this.split(‘);

var temp = “”;

for(var i=start;<stop;i++)

{

temp = temp + charArray[i];

}

return temp;

}

Now, you can use this function instead of the default substring function. Include the above code in any page and you can use mySubstring inside any javascript function.

Example:

var name = “INDIA”;

var extractedLetters = name.mySubstring(0,3);

alert(extractedLetters);

The alert would display IND thus emulating the real Javascript substring function!

Note: This method is just a food for thought. To help you understand how exactly such methods would be implemented. For all practical purposes use the default substring function of Javascript.

This post will describe the javascript email validation.

First and foremost, all apologies for such a long delay in writing a new post. I was kind of tied up with some work. But from now on I’ll try my best to be regular

We will be using regular expression for email validation. And don’t you worry. I’ll see to it that by the time you finish reading this post, you would have got a fair idea about Regular Expressions.

Lets try to construct the regular expression that we will be using to check the email entered by the user.

Consider these two email id’s : example@example.com and exam_ple@ex.am.ple

Quick references:

. (dot) matches any single character. Ex. “h.t” will match “hut”, “hot” etc.

[ ] Brackets match a single character that is contained in the given expression. Ex. [a-d] will match ‘a’ or ‘b’ or ‘c’ or ‘d’. Similarly, [a-cx-z] will match ‘a’ or ‘b’ or ‘c’ or ‘x’ or ‘y’ or ‘z’.

^ Matches the starting position within the given string.

$ Matches the ending position of the given string.

* Matches the preceding element zero or more times.

+ Matches the preceding element one or more times.

{n,m} Matches the occurrence of the previous symbol not less than n and not more than m times.

\ Its the escape character. Ex. As shown above, .(dot) matches a single occurrence of any character. But what if we need to match an occurrence of (dot) itself. We write it as \.

Considering the email id’s shown above, we can list our requirements as follows:

1. Email Id needs to start with alphabets or numbers – regex will be ^([a-zA-Z0-9]) i.e. the email id should start with either an alphabet or a number.

2. It can contain any number of alphabets, numbers and a few special characters. RegEx will be ([a-zA-Z0-9\.\_\-])*

3. Then there should be the famous ‘@’ symbol which we simply write as @

4. Then again any number of alphabets or numbers or ‘-’ are allowed. RegEx is (([a-zA-Z0-9\-])+\.)+

5. Finally, the ending of the email ([a-zA-Z]{2,4})+$

Here’s the final regular expression for validating the email id’s :

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

Now, lets see how to use it in the javascript. We make use of the search() function of javascript.

function emailValidation(){

var emailRegEx = /^([a-zA-Z0-9])([a-zA-Z0-9\._-])*@(([a-zA-Z0-9])+(\.))+([a-zA-Z]{2,4})+$/ ;

var testMail = “example@example.com”;

if(testMail.search(emailRegEx)==-1)

alert(“Invalid”);

}

Click Here to view the example.

UPDATE 1 : Please use the regular expression shown below instead of the one above. This fixes the bug which allowed consecutive special charaters i.e. previously example..example@example.com was displayed as valid. It has been fixed now. Please do test the script before you plan to use it. If you find some problems in it then do let me know. I’ll try and fix it.

var emailRegEx = /^([a-zA-Z0-9])(([a-zA-Z0-9])*([\._-])?([a-zA-Z0-9]))*@(([a-zA-Z0-9\-])+(\.))+([a-zA-Z]{2,4})+$/;

UPDATE 2: I’ve changed the regex a bit to allow email with ‘+’ in them. So, test+example@example.com would be a valid email.

var emailRegEx = /^([a-zA-Z0-9])(([a-zA-Z0-9])*([\._\+-])*([a-zA-Z0-9]))*@(([a-zA-Z0-9\-])+(\.))+([a-zA-Z]{2,4})+$/;

If the Number() function was generic in nature then the parseInt() and parseFloat() functions will act to be more specific in what they do.

parseInt() will parse the data into an integer value(if possible) and return the result. It returns ‘NaN’ i.e. ‘Not a Number’ if the data is unparseable.

Similarly, parseFloat() parses float values.

Here are a few examples to help you understand these two functions better:

var a = “10″;

alert(parseInt(a));

alert(parseFloat(a));

output:

10

10

a = “10.12″;

alert(parseInt(a));

alert(parseFloat(a));

output:

10

10.12

a = ” 10.25 as you can see, white spaces are allowed and also alphabets after the number”

alert(parseInt(a));

alert(parseFloat(a));

output:

10

10.25

a = ” nope this is wrong, wont work 100.24″;

alert(parseInt(a));

alert(parseFloat(a));

output:

NaN

NaN

The thought of elaborating on the “contains” function for JavaScript occurred to me while I was writing my previous post . From what I know, JavaScript doesn’t seem to have a function to allow the user to check if a particular letter exists in the given data.

But, it does have an indexOf() function that might just do the trick

All you need to do is check whether the return value is -1 or not. A return value of -1 implies that the specific letter is not present in the given data.

A simple example below will make things clear:

function checkIndexOf()
{
var a = “hello”;

alert(a.indexOf(‘l’));
alert(a.indexOf(‘E’));
alert(a.indexOf(’0′));

}

The output is as follows:

2 // which implies that the letter ‘l’ is present in position 2.

-1 //which implies that the letter ‘E’ is not present.(JavaScript is case sensitive)

-1 //which implies that the number 0 is not present.

The isNaN() function is used to check if the data contained in the Javascript variable is a number or not. The function returns true if the data is not a number and false if the data is a number.

This function is of great help while performing javascript validation to check if a user has entered only numeric values into the textboxes as specified by you.

Here is an example:

var a = “hi”;

var b = “123″;

if(isNaN(a))

{

alert(“Variable ‘a’ is not a number.”);

}

if(isNaN(b))

{

alert(“Variable ‘b’ is not a number.”);

}

The output will be “Variable ‘a’ is not a number.”

A note to remember: “isNaN() ” will return false for “1e1″ .

I mean, if you have numeric data with the letter ‘e’ in it, then the data is still considered to be numeric!

why is that?

Well, cause it treats the value to be exponential. So if you plan to validate for a numeric field and do not want to allow the letter ‘e’ then remember to validate it separately.

Well, as far as validating ‘e’ is considered… I wonder how you do that in Javascript!!

I mean we need to have a function which will tell us if a particular letter exists in a given data. Hmmmm… Donno if there exists a function like that in javascript. My next post will be on this

You might come across a situation wherein you need to perform some mathematical operations on the data entered by the user. Be it addition, subtraction , multiplication or division, you can do these calculations using Javascript easily.

Since all the variables in JavaScript are declared using ‘var’ as a datatype, we need to use a function to tell Javascript to treat the contents of the variable as a number on which calculations have to be performed.

All you need to do is to use the ‘Number()’ function.

The example below will make things clear for you :

var a = “5″;

var b = “5″;

var result = a + b;

alert(“The result is “+result); // This will give you an output of 55 and not 10.

var calculatedResult = Number(a) + Number(b);

alert(“The mathematical result is “+calculatedResult); //This will give the result as 10.

The following is a short example of a code that will enabledisable a textbox at the click of a button :

<html>

<script>

function enableDisable()

{

//This will get the HTML content of the current page

var form = document.testEnableDisable;

//The if condition checks for the value of the button.

if(form.enableDisableButton.value==”Disable”)
{

//If button value is ‘Disable’ then the textbox is made readOnly

form.textBox1.readOnly = true;

//The button value is changed to ‘Enable’

form.enableDisableButton.value=”Enable”

}

else

{

form.textBox1.readOnly = false;

form.enableDisableButton.value=”Disable”

}

}

</script>

<body>

<form name= “testEnableDisable”>

<input type = “text” id = “textBox1″ value=”Enabled”>

<input type=”button” id=”enableDisableButton” onClick=”enableDisable()” value=”Disable”>

</body>

</form>

</html>

Basically, its the readOnly value of the text box that needs to be changed using JavaScript.

Note: JavaScript is case sensitive and hence ‘readonly’ will not give you the right result…‘O’ should be in capital…‘readOnly’ when you use it in JavaScript.

Click here to view the example

Javascript has a function named ‘prompt’ which displays a message box along with a text box in it which allows users to input data.

Here’s how you achieve it :

function testPrompt()

{

var enteredData = prompt(“Type something in the text box below”,”");

alert(“You entered “+enteredData);

}

prompt() takes two parameters. The first parameter is used to display the message above the text box whereas the second parameter fills up the textbox with the values you specify(leave it blank if you want the text box to be empty)

To get a quick glimpse of the promt box copy paste the code below into your browser address bar and press enter :

Note: you’ll have to manually replace the double quotes(with double quotes again) after you copy paste the code due to the formatting in this page

javascript:var s = prompt(“Type something in the text box below”,”");alert(s);

While working on one of my projects I came across a scenario where I needed to convert the DOM object into a String representation to send it as an AJAX request parameter.

The way to do this is as follows:

Suppose you have a form named “Test”.

We first get the DOM object of the current page as follows:

var domObject = document.Test;

//Now lets convert this DOM to String

var domToString = domObject.innerHTML;

Thats it!!! Put an alert and you’ll see the complete DOM in a string representation.

alert(domToString);