Tuesday, November 19, 2013

JavaScript HTML Form Validation Example

JavaScript Form Validation With All HTML Form Objects Example

<html>
<head>
<script>
function check()
{
if(document.f1.unm.value=="") // document.getElementById('un').value;
{
alert("Username should not be left blank");
document.getElementById('un').focus(); // document.f1.unm.focus();
return false;
}
else
{
s=document.f1.unm.value;
for(i=0;i<s.length;i++)
{
chr=s.charCodeAt(i);
if(!(( chr>=65 && chr<=90 ) || ( chr>=97 && chr<=122 )))
{
alert("Username must contain only Alphabets");
document.f1.unm.value=""
document.getElementById('u').focus();
return false;
}
}
}
/* ---------------------------------------------------- */
if(document.f1.pwd.value=="")
{
alert("Password should not be left blank");
document.getElementById('pw').focus();
return false;
}
/* ---------------------------------------------------- */

if(document.getElementById('s0').checked!=true && document.getElementById('s1').checked!=true)
{
alert("Please select Gender");
return false;
}
/* ---------------------------------------------------- */
if(document.getElementById('c0').checked!=true && document.getElementById('c1').checked!=true)
{
alert("Please select Vehicle");
return false;
}
if(document.getElementById('c1').checked==true)
{
if(document.f1.cars.selectedIndex==0)
{
alert("Plz select your Car");
return false;
}
}
if(document.f1.cv.selectedIndex==-1)
{
alert("Plz select visited Country");
return false;
}
if(document.f1.ftrip.value=="")
{
alert("Plz Describe your favorite airplane trip");
document.f1.ftrip.value==""
document.getElementById('ft').focus();
return false;
}
s=document.f1.email.value;
at=s.indexOf('@');
atat=s.indexOf('@',at+1);
dot=s.indexOf('.');
len=s.length;
adj = s.charAt(at+1);

lchar = s.charAt(len-1);
if(s=="")
{
alert("Plz enter your Email id");
document.getElementById('em').focus();
return false;
}
else
{
if(at<1 || dot==-1 || atat!=-1 || (lchar==".") || (adj=="."))
{
alert("Plz enter valid Email");
document.f1.email.value=""
document.getElementById('em').focus();
return false;
}
}
if(document.f1.resume.value=="")
{
alert("Plz Upload your Resume");
document.f1.resume.value==""
document.getElementById('res').focus();
return false;
}
}
</script>
</head>
<body>
<form method="post" action="a.php" name="f1" enctype="multipart/form-data" onReset="" onSubmit="return check();">
Username : <input type="text" name="unm" id="un"> <br>
Password : <input type="password" name="pwd" id="pw"> <br>
Gender: <input type=radio name=gd value=m id=s0>Male
<input type=radio name=gd value=f id=s1>Female<br>
Choose your vehicle :
<input type=checkbox name=interest id=c0>Bike
<input type=checkbox name=interest id=c1>Car
<br>
Choose your Car :
<select name="cars" id="cr">
<option value=""> Plz select </option>
<option value="Santro"> Santro</option>
<option value="Maruthi"> Maruthi</option>
<option value="Wagon-R"> Wagon-R</option>
</select>
<br>
Which Country you like to visit?<br>
<select multiple size=3 name=cv>
<option value=usa>America
<option value=europe>Europe
<option value=asia>Asia
<option value=australia>Australia
</select>
<br>
Describe your favorite Aeroplane trip:<br>
<textarea name=ftrip rows=5 cols=50 id=ft></textarea> <br>
E-mail : <input type=text name=email id=em> <br>
Resume : <input type=file name=resume id=res> <Br>
<input type="reset" name="clear" id="c" value="Reset" onClick="return confirm('Are u Sure to Clear?');">
<input type="submit" value="Continue">
</form>
</body>
</html>

Output:

JavaScript To Hide or Unhide any Object in Web Page Example

JavaScript To Hide or Unhide any Object in Web Page:

Example:

<script>
function check(n)
{
if(n==0)
{
document.getElementById('hbtn').style.display="none";
document.getElementById('sbtn').style.display="block";
document.getElementById('siframe').style.display="none";
}
else
{
document.getElementById('hbtn').style.display="block";
document.getElementById('sbtn').style.display="none";
document.getElementById('siframe').style.display="block";
}
}
</script>
<body>
<input type="button" value="Hide Iframe" id="hbtn" onClick="check(0)" />
<input type="button" value="Show Iframe" id="sbtn" style="display:none" onClick="check(1)" />
<hr/>
<iframe src="http://www.in.com" width="400" height="300" id="siframe" ></iframe>
<p>Welcome To www.itjobcareers.blogspot.com site.</p>
</body>

Output:

JavaScript To Display Error Message After the Form Object Example

JavaScript To Display Error Message After the Form Object:

Example:

<script>
function check()
{
if(document.getElementById('sid').value=="")
{
document.getElementById('stxt').innerHTML="* Enter any Search Key word";
document.getElementById('stxt').style.color="red";
document.getElementById('sid').style.backgroundColor="yellow";
}
else
alert("Searching Result...");
}
</script>
</head>
<body>
<input type="text" name="searchtxt" id="sid" /><span id="stxt">*Require</span>
<br/>
<input type="button" value="Search" onClick="check()" />

</body>

Output:
*Require

JavaScript To Set Password Strength By OnKey Event Example

JavaScript To Set Password Strength By OnKey Event:
<script>
function pwstrength(pwl)
{
if(pwl>0 && pwl<=5)
{
document.getElementById('pwspan').innerHTML="Very Weak";
document.getElementById('pwspan').style.color="yellow";
document.getElementById('pwspan').style.backgroundColor="red";
}
else if(pwl>=6 && pwl<=8)
{
document.getElementById('pwspan').innerHTML="Weak";
document.getElementById('pwspan').style.color="blue";
document.getElementById('pwspan').style.backgroundColor="pink";
}
else if(pwl>=9)
{
document.getElementById('pwspan').innerHTML="Strong";
document.getElementById('pwspan').style.color="orange";
document.getElementById('pwspan').style.backgroundColor="green";
}
else
{
document.getElementById('pwspan').innerHTML="* Required";
document.getElementById('pwspan').style.color="#CCF";
document.getElementById('pwspan').style.backgroundColor='';
}
}
</script>
<body>
Enter Password:
<input type="password" name="pwd" id="pw" onKeyUP="pwstrength(this.value.length)" />
<span id="pwspan" style="color:#CCF">*Required</span>
</body>

Output:
Enter Password: *Required

JavaScript OnKeyUp/OnKeyDown/OnKeyPress Event Example

JavaScript OnKeyUp/OnKeyDown/OnKeyPress Event: When we hit each key in keyboard a function called.

Example:


<html>
<head>
</head>
<body>
<form>
Enter Key: <input type="text" name="field1" id="f1" size="5"
onkeyup="if(this.value.length>=4)
document.getElementById('f2').focus();" /> -
<input type="text" name="field2" id="f2" size="5"
onkeyup="if(this.value.length>=4)
document.getElementById('f3').focus();" /> -
<input type="text" name="field3" id="f3" maxlength="4" size="5"/>
</form>
</body>
</html>

Output:

JavaScript InnerHTML Content For Overflow In DIv Tag

JavaScript InnerHTML Content For Overflow:

Example:

<script>
function add_text()
{
n=document.getElementById('un').value;
p=document.getElementById('list').innerHTML;
document.getElementById('list').innerHTML=n + "<br/>" + p;
document.getElementById('un').value="";
document.getElementById('un').focus();
}
</script>
<body>
<input type="text" name="unm" id="un"/>
<input type="button" name="Add" value="Add" onClick="add_text()" />
<hr/>
<div id="list" style="width:200px; height:100px; overflow:auto;">
</div>
</body>

Output:

JavaScript Onchange Event Example To Change Div Content

To Change Div Content: Through innerHTML we can change any div content by its tag id of the element.

Example:

<html>
<head>
<script>
function f1(str)
{
document.getElementById('d1').innerHTML=str+'<p>content....</p>';
document.getElementById('d1').style.color="green";
document.getElementById('d1').style.backgroundColor='pink';
document.getElementById('d1').style.border="double";
document.getElementById('d1').style.borderColor="blue";
}
</script>
</head>
<body>
<form>
<select name="cars" id="c" onChange="f1(this.value);">
<option value="">Select the Car</option>
<option value="Santro "> Santro </option>
<option value="Wagon-R"> Wagon-R</option>
<option value="Getz">Getz</option>
</select>
</form>
<div id="d1">Not Selected!</div>
</body>
</html>

Not Selected!

JavaScript OnChange Event Example

JavaScript OnChange Event: When we change option on the combo box/Drop Down List.

Example:

<body>
Open Site:
<select name="sites" onChange="document.getElementById('fm1').src=this.value;">
<option value="http://www.google.com">Google</option>
<option value="http://www.yahoo.com">Yahoo</option>
<option value="http://www.sify.com">Sify</option>
</select>
<hr/>
<iframe src="http://www.google.com" width="600px" height="550" frameborder="1" name="frm1" id="fm1" ></iframe>
</body>

JavaScript OnMouseDown And OnMouseUp Event Example

JavaScript OnMouseDown And OnMouseUp Event

Example

<body>
<img src="images/Winter.jpg" width="300" height="250" onMouseDown="this.src='images/Water lilies.jpg';" onMouseUp="this.src='images/Winter.jpg';" />
<br>
<img src="images/Water lilies.jpg" width="300" height="250" onMouseOver="this.src='images/Winter.jpg';" onMouseOut="this.src='images/Water lilies.jpg';" />
<br>
<img src="images/Winter.jpg" width="300" height="250" onMouseDown="this.src='images/Blue hills.jpg';" onMouseUp="this.src='images/Winter.jpg';" onMouseOver="this.src='images/Water lilies.jpg';" onMouseOut="this.src='images/Winter.jpg';" />
</body>

JavaScript OnMouseOver And OnMouseOut Event Example

JavaScript OnMouseOver And OnMouseOut Event

Example:

<body>
<img src="images/flower1.gif" width="250" height="300" border="0" onMouseOver="this.src='images/Water lilies.jpg'; document.getElementById('p1').src='images/Blue hills.jpg';" onMouseOut="this.src='images/flower1.gif'; document.getElementById('p1').src='images/Sunset.jpg';" />

<br>
<img src="images/Sunset.jpg" id="p1" width="200" height="200" border="0" />
</body>

JavaScript OnBlur Event Example

JavaScript OnBlur Event: When control jumps from current object then onBlur event function called automatically.

Example:

<html>
<head>
<script>
function f1(len)
{
if(len<6)
{
document.getElementById('un').style.background="red";
alert("User name should be >6");
document.getElementById('un').value="";
document.getElementById('un').focus();
}
else
document.getElementById('un').style.backgroundColor='yellow';
}
</script>
</head>
<body>
<form>
User Name:
<input type="text" name="unm" id="un" onBlur="f1(this.value.length);"> <br>
Password:
<input type="password" name="pwd" id="pw" onBlur="if((this.value).length<6) { this.style.backgroundColor='red'; alert('Password should be grater then 6');}">
</form>
</body>
</html>

Output:

JavaScript OnFocus Event Example

JavaScript OnFocus Event: When Control Jumps on the current object then onFocus event function called automatically.

Example:

<html>
<head>
<script>
function f1(str)
{
document.getElementById(str).value ="";
document.getElementById(str).style.backgroundColor="yellow";
document.getElementById(str).style.color="green";
}
</script>
</head>

<body>
<form>
User Name:<input type="text" name="uname" id="un" placeholder="Enter User Name" onFocus="f1('un');">
<br>
Password: <input type="text" name="pwd" id="pw" placeholder="Enter Password" onFocus="f1('pw'); this.type='password';">
<input type="button" value="Show Password" onClick="document.getElementById('pw').type='text'" />
</form>
</body>
</html>

Output:

JavaScript DOM By ID Example For Standard Calculator

JavaScript Program For Standard Calculator:

<head>
<script>

function calc(k)
{
if(k=="+" || k=='-' || k=='*' || k=='/')
{
v1=parseInt(document.getElementById('res').value);
op=k;
document.getElementById('res').value="";
}
else if(k=="=")
{
v2=parseInt(document.getElementById('res').value);
document.getElementById('res').value="";
if(op=='+')
ans=(v1+v2);
else if(op=='-')
ans=(v1-v2);
else if(op=='*')
ans=(v1*v2);
else
ans=(v1/v2);
document.getElementById('res').value=ans;
}
else
{
no=document.getElementById('res').value;
if(no)
document.getElementById('res').value=no+k;
else
document.getElementById('res').value=k;
}
}
</script>
</head>

<body>
<form>
<input type="text" name="result" id="res" readonly > <br>
<input type="button" onClick="calc(1);" value="1">
<input type="button" onClick="calc(2);" value="2">
<input type="button" onClick="calc(3);" value="3">
<br/>
<input type="button" onClick="calc(4);" value="4">
<input type="button" onClick="calc(5);" value="5">
<input type="button" onClick="calc(6);" value="6">
<br/>
<input type="button" onClick="calc(7);" value="7">
<input type="button" onClick="calc(8);" value="8">
<input type="button" onClick="calc(9);" value="9">
<input type="button" onClick="calc(0);" value="0">
<br/>
<input type="button" onClick="calc('+');" value="+">
<input type="button" onClick="calc('-');" value="-">
<input type="button" onClick="calc('*');" value="*">
<input type="button" onClick="calc('/');" value="/">
<br/>
<input type="button" onClick="calc('=');" value="=">
<input type="reset" value="Clear">
</form>
</body>

Output:

JavaScript DOM By Id Example To Calculate Two Values

Example:
<head>
<script>

function calc(ch)
{
x=document.getElementById('v1').value;
x=parseFloat(x);
y=document.getElementById('v2').value;
y=parseFloat(y);
switch(ch)
{
case '+' : a=(x+y); break;
case '-' : a=x-y; break;
case '*' : a=x*y; break;
case '/' : a=x/y; break;
default: a="Invalid Input";
}
document.getElementById("result").value=a;
document.getElementById("result").style.color="green";
document.getElementById("result").style.backgroundColor="pink";
}

</script>
</head>

<body>
<form>
Enter Value1:
<input type="text" name="v1" id="v1"> <br>
Enter Value2:
<input type="text" name="v2" id="v2"> <br>

<input type="button" onClick="calc('+')" value="+">
<input type="button" onClick="calc('-')" value="-">
<input type="button" onClick="calc('*')" value="*">
<input type="button" onClick="calc('/')" value="/">
<input type="reset" value="Clear" />
<br/>
Result: <input type="text" name="res" id="result" readonly> <br>
</form>
</body>

Output:

JavaScript DOM getElementById Example1

JavaScript DOM Example by Id:

<head>
<script>
function get()
{
document.getElementById("un2").value=document.getElementById("un").value;
document.getElementById("un2").style.color="RED";
document.getElementById("un2").style.backgroundColor="yellow";
}
</script>
</head>
<body>
<input type="text" name="unm" id="un" />
<br />
<input type="button" value="Copy & Paste" onClick="get()" />
<br />
<input type="text" name="unm2" id="un2" readonly="readonly" />
</body>

Output:

Thursday, November 14, 2013

JavaScript Event Attribute Statements

Onclick : When we click on the current object.

Ondblclick: When we double click on the current object.

Onchange: When we change an option on the dropdown menu.

Onreset: To Clear Form Content for confirmation.

Onsubmit: To check form validation

Onfocus: When control enters on the current object.

Onblor: When controljumps on the current object.

Onload: When Web Page Loads.

Onmouseover: When mouse pointer enters on the current object.

Onmousemove: When mouse pointer moves on the current object.

Onmousedown: When mouse left click down on the current object.

Onmouseup: When mouse left click Up on the current object.

Onmouseout: When mouse pointer comes out on the current object

Onkeypress: When Keyboard Key press on the current object

Onkeyup: When Keyboard Key press up on the current object

Onkeydown: When Keyboard Key press down on the current object

JavaScript Auto Re-Direct To Open Other Page

JavaScript Auto Re-Direct:

Example:
<html>
<head>
<script>
window.location.href="http://www.helpmeboss.com"
</script>
</head>

<body>

</body>
</html>

Tuesday, October 1, 2013

JavaScript document.getElementsByTagName() Example

document.getElementsByTagName():-

This function is used to call the html elements by Tag Name then to apply some task on same TagName's. This DOM Function is used to apply styles to multiple html elements which are same TagName.

Example:-

<head>
<script>
function getstyle(col1, col2)
{
a=document.getElementsByTagName('h2');
for(i=0; i<a.length; i++)
{
a[i].style.color=col1;
a[i].style.backgroundColor=col2;
a[i].style.padding="12px";
a[i].style.border="double";
a[i].style.borderColor="red";
}

a=document.getElementsByTagName('p');
for(i=0; i<a.length; i++)
{
a[i].style.color=col2;
a[i].style.backgroundColor=col1;
a[i].style.padding="6px";
}
}
</script>
</head>

<body>
<h2>WELCOME TO JS</h2>
<p>Types Of DOM Functions</p>
<h2>1. document.getElementById()</h2>
<p>2. document.getElementsByName()</p>
<h2>3. document.getElementsByTagName()</h2>

<input type="button" value="Apply Style1" onClick="getstyle('red','yellow')" />
<input type="button" value="Apply Style2" onClick="getstyle('blue','orange')" />
<input type="button" value="Apply Style3" onClick="getstyle('green','pink')" />
</body>

Output:-

WELCOME TO JS

Types Of DOM Functions

1. document.getElementById()

2. document.getElementsByName()

3. document.getElementsByTagName()

JavaScript document.getElementsByName() Example

document.getElementsByName():-

This function is used to call the html elements by Name Value of the Tag then to applay some task on same name value tags. This DOM Function is used to apply styles to multiple html elements which are defined by same name value.

Example:

<head>
<script>
function getstyle(col1, col2)
{
a=document.getElementsByName('t1');
for(i=0; i<a.length; i++)
{
a[i].style.color=col1;
a[i].style.backgroundColor=col2;
a[i].style.padding="12px";
a[i].style.border="double";
a[i].style.borderColor="red";
}

a=document.getElementsByName('p1');
for(i=0; i<a.length; i++)
{
a[i].style.color=col2;
a[i].style.backgroundColor=col1;
a[i].style.padding="6px";
}
}
</script>
</head>

<body>
<h1 name="t1">WELCOME TO JS</h1>
<p name="p1">Types Of DOM Functions</p>
<h2>1. document.getElementById()</h2>
<h2 name="t1">2. document.getElementsByName()</h2>
<h2 name="p1">3. document.getElementsByTagName()</h2>

<input type="button" value="Apply Style1" onClick="getstyle('red','yellow')" />
<input type="button" value="Apply Style2" onClick="getstyle('blue','orange')" />
<input type="button" value="Apply Style3" onClick="getstyle('green','pink')" />
</body>

Output:---------------------------------------------------->

WELCOME TO JS

Types Of DOM Functions

1. document.getElementById()

2. document.getElementsByName()

3. document.getElementsByTagName()

JavaScript Inline Event Effect Example

With out using DOM Function we can apply JavaScript Inline Event Effect:

Example:-

<body>
<p>Keep Mouse Pointer on below heading!</p>
<h2 onmouseover="this.style.color='red'; this.style.backgroundColor='yellow'; this.style.padding='12px';" onMouseOut="this.style.color='green'; this.style.backgroundColor='pink'; this.style.padding='12px';">Welcome TO JS DOM Functions</h2>
</body>

Output:-

Keep Mouse Pointer on below heading!

Welcome TO JS DOM Functions

JavaScript document.getElementById() Example

document.getElementById() :-

This function is used to call the html element by tag id name then to apply some task on it.

Example:

<head>
<script>
function style1()
{
a=document.getElementById('t1');
a.style.color="green";
a.style.backgroundColor="yellow";
a.style.padding="12px";
a.style.border="double";
a.style.borderColor="red";
}
</script>
</head>

<body>
<h2 id="t1">WELCOME TO JS DOM Functions</h2>
<input type="button" value="Apply Style" onClick="style1()" />
</body>

Output:-

WELCOME TO JS DOM Functions

JavaScript DOM (Document Object Model) Functions

DOM (Document Object Model) Functions

These functions are used to perform some task on HTML elements.
These are mainlu used for documantation effects. Those effects will occured by javascript event attributes in html tag.

These are mainly 3 types:-

1. document.getElementById()

2. document.getElementsByName()

3. document.getElementsByTagName()

Monday, September 30, 2013

JavaScript External Functions Linking To HTML Page

Filename: functions.js
====================================
// JavaScript Document

// Function With no Arguments and no return type
    function line1() // called function
    {
        document.write("<br/>**********################***********<br/>");
    }

    // Function With Arguments and no return type
    function line(s, n) // called function
    {
        document.write("<br/>");
        for(i=0; i<n; i++) {
            document.write(s);
        }
        document.write("<br/>");
    }

// Function With both Arguments and return type
    function clac(x, s, y) // called function
    {
        switch(s)
        {
        case '+': return(x+y); break;
        case '-': return(x-y); break;
        case '*': return(x*y); break;
        case '/': return(x/y); break;
        case '%': return(x%y); break;

        }
    }

===========================
File Name: Ext-jsfun-htmlpage.html

<head>
<script src="functions.js" type="text/javascript">
</script>
</head>
<body>
    <script>
    line1();
    res=clac(5, '*', 80);   // calling function
    document.write("<br/>Res="+ res);
    line('$', 50);
    document.write("<br/>ANs=" + clac(52, '/', 3));
    </script>

</body>

Output:

**********################***********

Res=400
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

ANs=17.333333333333332

JavaScript Function With Both Arguments And Rreturn Type

<head>
<script>
// Function With both Arguments and return type
    function clac(x, s, y) // called function
    {
        switch(s)
        {
        case '+': return(x+y); break;
        case '-': return(x-y); break;
        case '*': return(x*y); break;
        case '/': return(x/y); break;
        case '%': return(x%y); break;

        }
    }
</script>
</head>
<body>
    <script>
    line1();
    res=clac(5, '*', 80);   // calling function
    document.write("<br/>Res="+ res);
    line('$', 50);
    document.write("<br/>ANs=" + clac(52, '/', 3));
    </script>
</body>

output:

Res=400
ANs=17.333333333333332

JavaScript Function With Arguments and no Return Type

<head>
<script>
// Function With Arguments and no return type
    function line(s, n) // called function
    {
        document.write("<br/>");
        for(i=0; i<n; i++) {
            document.write(s);
        }
        document.write("<br/>");
    }
</script>
</head>
<body>
    <script>
    line('*', 80);   // calling function
    </script>
    <h2>Welcome to JS</h2>
    <script>
    line('$', 50);
    </script>
</body>

outpou:-

******************************************************

Welcome to JS

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

JavaScript Function With no Arguments and no Return Type

<head>
<script>
// Function With no Arguments and no return type
    function line() // called function
    {
        document.write("<br/>**********################***********<br/>");
    }
</script>
</head>
<body>
    <script>
    line();   // calling function
    </script>
    <h2>Welcome to JS</h2>
    <script>
    line();
    </script>
</body>

Output:

**********################***********

Welcome to JS

**********################***********

JavaScript Functions And Its Types

JavaScript Function: A function is used to group a set of statements then we can call no.of times any where in the project files. Functions are mainly used for re-usability.

Functions Are Mainly Two Types:

Pre Defined/ Bulletin Functions
User Defined/ Derived Functions

Pre Defined/ Bulletin Functions : Those functions which are defined by the system. We can use directly with out calling function definition.

Types of Pre Defined Functions:

Number Function
Math Functions
String Functions
Date and Time Functions
Input and Output Functions
Array Functions
DOM Functions

User Defined/ Derived Functions: Those functions which are defined by the User. We can use directly by calling function definition which is defined by user.

Types of User Defined Functions:

Function with no arguments and no return type
Function with arguments and no return type
Function with both arguments and with return type

Friday, September 27, 2013

JavaScript Multi-Dimensional Array With Example

Multi Dimensional Array:

Two/Multi-Dimensional Array is nothing but an Array in another Array

In an array each element is assigned with another array and so on....
i.e 2D Array, 3D Array, .....

Example:

<script>
var a = new Array(1234, "Kumar", "MGR", 35000);    // 1D Array
var b = new Array(1534, "Ravi", "Acc", 25000);     // 1D Array
var c = new Array(1643, "Hari", "HR", 15000);       // 1D Array
var emp = new Array(a, b, c); // 2D Arry

document.write("<br/>emp Array length: " + emp.length);

// To print All emp array elements
for(i=0; i<emp.length; i++)
{
    document.write("<br/>");
        for(j=0; j<emp[i].length; j++)
        document.write(emp[i][j] + "   ");
}

// To print All emp array elements in the Table
document.write('<table align="center" border="5" width="400" ><tr><th>E.No</th><th>EName</th><th>Job</th><th>Sal</th></tr>');

for(i=0; i<emp.length; i++)
{
    document.write("<tr>");
        for(j=0; j<emp[i].length; j++) {
        document.write("<td>"+ emp[i][j] + "</td>");
        }
    document.write("</tr>");
}

document.write("</table>");
</script>

Output:

emp Array length: 3
1234 Kumar MGR 35000
1534 Ravi Acc 25000
1643 Hari HR 15000

E.No	EName	Job	Sal
1234	Kumar	MGR	35000
1534	Ravi	Acc	25000
1643	Hari	HR	15000

Tuesday, September 10, 2013

JavaScript Associative Array WIth Example

JavaScript Associative Array: An array with Index/Keys as String. In Each array element we can store two values. In index one value and in array of index another value.

Example:
<script>

a=new Array(4);
a['rno']=1234;
a['name']="Raju";
a['job']="Manager";
a['sal']=35000;

document.write(a['name']); // Raju

// To Print All Associative Array Elements

for(i in a) {
document.write("<br/>" + i + " =========> " + a[i]);
}

</script>

output:

Raju
rno =========> 1234
name =========> Raju
job =========> Manager
sal =========> 35000

JavaScript Numeric Array With Example

JavaScript Numeric Array: An array with index/keys as sequence numbers.

Syntax1:
a = new Array(123, "hello", 78.96);

Syntax2:
a = new Array();
a[0]=123;
a[1]="hello";
a[2]=78.96;

document.write(a); // 123, hello, 78.96

To find Array Length:

document.write(a.length); // 3

To print all Array elements:

for(i=0; i<a.length; i++)
{
document.write("<br/>" + a[i] );
}

output:-
123
hello
78.96

Pages

Tuesday, November 19, 2013

Thursday, November 14, 2013

JavaScript Event Attribute Statements

JavaScript Auto Re-Direct:

Tuesday, October 1, 2013

WELCOME TO JS

1. document.getElementById()

3. document.getElementsByTagName()

WELCOME TO JS

1. document.getElementById()

2. document.getElementsByName()

3. document.getElementsByTagName()

Welcome TO JS DOM Functions

WELCOME TO JS DOM Functions

Monday, September 30, 2013

Welcome to JS

Welcome to JS

Friday, September 27, 2013

Tuesday, September 10, 2013