Javascript Super Exa,Plesss

Post on 03-Dec-2014

110 views 1 download

Tags:

description

indian students born to lead- facebook(Lokesh verma)

transcript

How to access a URL of parent page in ASP. net

Step 1. Open a new website,  add a button and textboxes control and named this page iframe.aspx. Design code is given below

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="iframe.aspx.cs" Inherits="iframe" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script language="javascript" src="JScript.js"></script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title></head><body><form id="form1" runat="server"> <div> <asp:TextBox ID="TextBox1" runat="server"> </asp:TextBox> <asp:TextBox ID="TextBox2" runat="server" style="top: 66px; left: 10px; position: absolute; height: 22px; width: 128px"> </asp:TextBox> <asp:Button ID="Button1" runat="server" Text="Button" style="top: 120px; left: 12px; position: absolute; height: 26px; width: 56px" OnClientClick="uro()"/> </div> </form></body></html>

Step 2. Add a JavaScript file from Solution Explorer window

The code is written in JavaScript file is

function uro(){alert(parent.document.location.href);}function url(){alert(document.location.href);}

Below code written in the design page to attached the JavaScript file to your project

<script language="javascript" src="JScript.js"></script>

Step 3. Add another page from new item selection menu. The design code of this page is (url.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="url.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script language="javascript" src="JScript.js"></script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>url</title></head><body> <form id="url" runat="server"> <div> <asp:Button ID="Button1" runat="server" Text="Button" onclientclick="url()"/> <iframe src="iframe.aspx" align="middle" height="350px" name="Comments"> </iframe> </div> </form></body></html>

Step 4. Now run the Application.

Confirm Box in JavaScript

Step 1. Written below code in your application.

<html><head><script type="text/javascript">function show_box(){var r=confirm("Press a button");if (r==true) { alert("You pressed OK!"); }else { alert("You pressed Cancel!"); }}</script></head><body><input type="button" onclick="show_box()" value="Confirm box" /></body></html>

Step 2. Run the Application. Click on Button.

Prompt Box in JavaScript

A prompt box is often used if you want the user to input a value before entering a page.

Step 1. Written below code in your application.

<html><head><script type="text/javascript">function show_box(){var name=prompt("Please enter your name","Aditya Tiwari");if (name!=null && name!="") { document.write("Hello " + name + "! How are you today?"); }}</script></head><body>

<input type="button" onclick="show_box()" value="Show" /></body></html>

Step 2. Run the Application. Click on Button.

You Entered in Website

Special Character in JavaScript

Code Output\' single quote\" double quote\\ backslash\n new line\r carriage return\t tab\b backspace\f form feed

Step 1. Written below code in your application.

<html><head><script type="text/javascript">

var txt="I am working in \"r4r\".";document.write(txt);</script></head><body>

</body></html>

Step 2. Run the Application.

How to Swap a Image using JavaScript

Step 1. Written below code in your application.

<html xmlns="http://www.w3.org/1999/xhtml"><script language="javascript">if (document.images) {

smile = new Imagehappy = new Imagesmile.src = "http://images.zaazu.com/img/happy-roll-happy-animation-animated-smiley-emoticon-000359-large.gif"happy.src =

"http://www.animationbuddy.com/Animation/Nature/Sun/Sun_happy.gif"}function imageSwap(thisImage,newImage) {

if (document.images) {document[thisImage].src = eval(newImage + ".src")

}}</script><a href="http://www.r4r.co.in/"onMouseOver="imageSwap('aditya','happy')"onMouseOut="imageSwap('aditya','smile')"><img src="http://images.zaazu.com/img/happy-roll-happy-animation

-animated-smiley-emoticon-000359-large.gif"width="150"height="150"border="0"alt="Picture of Jack"name="aditya">

</a></script></html>

Step 2. Run the Application. Click on Button.

OnMouseOut

OnMouseOver

How to show Day of Week

Step 1. Written below code in your application.

<html><script language="javascript">function get_day(){ var getDay=new Date(); if(getDay.getDay()>0 && getDay.getDay()<6) { alert("Its a Week Day"); } else { alert("Its Week End!!!") }}</script><body><input type="button" onclick="get_day()" value="Show Day" /></body></html>

Step 2. Run the Application. Click on Button.

How To validate a Form in ASP. Net

Step 1. Written below code in your application.

JavaScript Code

<script language="javascript" type="text/javascript">function validate(){if (document.getElementById("<%=TextBox1.ClientID%>").value=="") { alert("Name can not be blank"); document.getElementById("<%=TextBox1.ClientID%>").focus(); return false; } if(document.getElementById("<%=TextBox2.ClientID %>").value=="") { alert("Email id can not be blank"); document.getElementById("<%=TextBox2.ClientID %>").focus(); return false; } var emailPat= /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; var emailid=document.getElementById("<%=TextBox2.ClientID %>").value; var matchArray = emailid.match(emailPat); if (matchArray == null) { alert("Your email address seems incorrect. Please try again."); document.getElementById("<%=TextBox2.ClientID %>").focus(); return false; } if (document.getElementById("<%=TextBox3.ClientID%>").value=="")

{ alert("Contact Number can not be blank"); document.getElementById("<%=TextBox3.ClientID%>").focus(); return false; } var digits="0123456789"; var temp; for (var i=0;i<document.getElementById("<%=TextBox3.ClientID %>").value.length;i++) { temp=document.getElementById("<%=TextBox3.ClientID%>").value.substring(i,i+1); if (digits.indexOf(temp)==-1) { alert("Please enter correct Contact Number"); document.getElementById("<%=TextBox3.ClientID%>").focus(); return false; } } if(document.getElementById("<%=TextBox5.ClientID %>").value=="") { alert("City can not be blank"); document.getElementById("<%=TextBox5.ClientID %>").value; document.getElementById("<%=TextBox5.ClientID %>").focus(); return false; } if(document.getElementById("<%=TextBox6.ClientID %>").value=="") { alert("Password can not be blank"); document.getElementById("<%=TextBox6.ClientID %>").value; document.getElementById("<%=TextBox6.ClientID %>").focus(); return false; } if(document.getElementById("<%=TextBox7.ClientID %>").value=="") { alert("Please Re-Enter Password "); document.getElementById("<%=TextBox7.ClientID %>").value; document.getElementById("<%=TextBox7.ClientID %>").focus(); return false; } return true;}</script>

Default.aspx Code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">

<title>Form Validation</title> </head><body> <form id="form1" runat="server"> <script language="javascript">

//Write JavaScript Code</script> <div> <table > <tr><td>Name</td> <td><asp:TextBox ID="TextBox1" runat="server" Width="193px"></asp:TextBox></td></tr> <tr> <td>Email ID</td> <td><asp:TextBox ID="TextBox2" runat="server" Width="193px" ToolTip="Enter unique Email ID" AutoPostBack="True"> </asp:TextBox></td></tr> <tr><td>Contact Number</td><td> <asp:TextBox ID="TextBox3" runat="server" Width="193px" AutoPostBack="True"></asp:TextBox></td></tr> <tr><td> Sex</td> <td><asp:RadioButton ID="RadioButton1" runat="server" Text="Male" GroupName="a" /> <asp:RadioButton ID="RadioButton2" runat="server" Text="Female" GroupName="a" /></td> </tr> <tr> <td>Enter&nbsp; City</td> <td><asp:TextBox ID="TextBox5" runat="server" Height="22px" Width="193px"></asp:TextBox> </td></tr> <tr><td>Password</td> <td><asp:TextBox ID="TextBox6" runat="server" Width="193px" TextMode="Password" > </asp:TextBox></td> </tr> <tr><td>Re-Enter Password</td> <td> <asp:TextBox ID="TextBox7" runat="server" TextMode="Password" Width="193px" Height="22px"></asp:TextBox> </td> </tr> <tr><td><asp:Button ID="Button1" runat="server" Text="Submit" onclick="Button1_Click" OnClientClick="return validate() " /> </td></tr></table></div> </form></body></html>

Step 2. Run the Application. Click on Button.

 

JavaScript Loops

The for Loop

How many times the script should run then we used for loop.

Syntax

for (variable=startvalue;variable<=endvalue;variable=variable+increment){//code }

The while Loop

The while loop loops through a block of code while a specified condition is true.

Syntax

while (variable<=endvalue){//code }

Example:

Step 1. Written below code in your application.

<html><body><script type="text/javascript">var i=0;for (i=0;i<=10;i++) { document.write("The number is " + i); document.write("<br />"); }</script></body></html>

Step 2. Run the Application. Click on Button.

JavaScript Continue and Break Statements

The continue Statement

The continue statement will break the current loop and continue with the next value.

Example

<html><body><script type="text/javascript">var i=0for (i=0;i<=10;i++){if (i==2){document.write("The number is continue" + i);document.write("<br />");continue;}document.write("The number is " + i);document.write("<br />");}</script></body></html>

Run the Code

The break Statement

The break statement will break the loop and continue executing the code that follows after the loop.

Example

<html><body><script type="text/javascript">var i=0;for (i=0;i<=10;i++)

{if (i==2){document.write("Time to break.." + i);document.write("<br />");break;}document.write("The number is " + i);document.write("<br />");}</script></body></html>

Execute the Code

eval() Method in JavaScript

Evaluates or executes an argument If the argument is an expression, eval() evaluates the expression If the argument is one or more JavaScript statements, eval() executes the statements

Syntax:

eval ( string )

For example:

<html><body><script language="javascript">function fun_name(){ var full_name = 'Aditya Tiwari'; var mySentence = eval('"My name is " + full_name'); alert(mySentence); }</script><button onclick="fun_name()">Eval function</button></body></html>

Output:

 

floor() Method

The floor() method rounds a number to the nearest integer, and returns the result.

Syntax:

Math.floor (value);

For Example:

<html><body><script language="javascript">function math_val(){ var val = 1.1; var stat = eval('"Actual value is=" + val +"

"+ "After truncate value is= " + Math.floor(1.1)'); alert(stat); }</script><button onclick="math_val()">FLOOR</button></body></html>

Output:

createTextNode() Method

The createTextNode() method creates a text node. This method returns a Text object.

Example:

<html><body><script language="JavaScript">function fnct_node() { var my_node = document.createTextNode("Good Morning!!!"); document.body.appendChild(my_node); } </script><button onclick="fnct_node()">Create text node</button></body></html>

Output:

pow() Method

The pow() method returns the value of x to the power of y .

Example:

<html>

<body><button onclick="alert(Math.pow(2,2));">POW</button></body></html>

Output:

link() Method in JavaScript

The link() method is used to display a string as a hyperlink. This method returns the string embedded in the <a> tag, like this: <a href="url">string</a>

Syntax:

string.link(url);

Example:

<html><body><script language="javascript">function new_url(){var myS = new String('r4r.co.in Home Page'); document.write(myS.link('http://www.r4r.co.in/'));}</script><button onclick="new_url()">Create a link from</button></body></html>

Output:

slice() Method

The slice() method extracts a part of a string and returns the extracted part in a new string.

Syntax:

string.slice(begin,end)

Example:

<html><body><script>function slice_string(){var myName = new String('Aditya Tiwari'); alert(myName+'\n'+"After Slice="+ myName.slice(1,6));}</script><button onclick="slice_string()">Slice of Name</button></body></html>

Output:

 

How to use createPopup() Method in JavaScript

The createPopup() method is used to create a pop-up window. Its only support the Internet Explorer

Syntax:

window.createPopup()

Example:

<html><body><script language="JavaScript">var pop_window;function new_window() { pop_window = window.createPopup(); pop_window.document.body.style.backgroundColor = 'red'; pop_window.show(100,100,100,200,document.body); } </script><input type="button" value="Popup Window" onclick="new_window();"></body></html>

Out Put:

Click on Popup window button.

How to use open() Method in JavaScript

Example:

<html><head><script type="text/javascript">function new_window(){myWindow=window.open('','','width=200,height=100');myWindow.document.write("<p>This is new window</p>");}</script></head><body><input type="button" value="Open New Window" onclick="new_window()" /></body></html>

Out Put:

How to use blink() Method in JavaScript

The blink() method is used to display a blinking string. The blink() method only works in Firefox and Opera. It is not supported in Internet

Explorer, Chrome, or Safari.

Syntax:

string.blink()

Example:

<html><body><script language="javascript">function win_blink(){var myString = new String('Am I blinking?'); document.write(myString.blink());}</script><button onclick="win_blink()">Blink</button></body></html>

Out Put:

How to use print() Method in JavaScript

The print() method prints the contents of the current window.

Syntax:

window.print()

Example:

<html><body><script language="JavaScript"> function print_win() { window.print(); }</script><input type="button" value="Print" onclick="print_win();"></body></html>

Out Put:

How to use sup() Method in JavaScript

The sup() method is used to display a string as superscript text.

Syntax:

string.sup()

Example:

<html><body><script language="javascript">function sup_win(){ var myString = new String('Two'); document.write('Square'+myString.sup());}</script><button onclick="sup_win()">sup me</button></body></html>

Out Put:

How to use sort() Method in JavaScript

The sort() method sorts the elements of an array.

Syntax:

array.sort(sortfunc)

Example:

<html><body><script language="javascript">function sort_array(){ var myString = new Array('Anil','Aditya','Ashish'); myString.sort(); alert(myString);}</script><button onclick="sort_array()">Sort Array</button></body></html>

Out Put:

Calculator in JavaScript

<html><body><center>

<form name="keys" action=""><table><B><table border=2 width=50 height=60 cellpadding=1 cellspacing=5><tr><td colspan=3 align=middle><input name="readText" type="Text" size=24 value="0" width=100%></td><td</td><td><input name="buttonClear" type="Button" value=" C " onclick="Clear()"></td><td><input name="buttonClearEntry" type="Button" value=" CE " onclick="ClearEntry()"></td></tr><tr><td><input name="btnSeven" type="Button" value=" 7 " onclick="number_press(7)"></td><td><input name="btnEight" type="Button" value=" 8 " onclick="number_press(8)"></td><td><input name="btnNine" type="Button" value=" 9 " onclick="number_press(9)"></td>

<td></td><td><input name="btnNeg" type="Button" value=" +/- " onclick="Neg()"></td><td><input name="btnPercent" type="Button" value=" % " onclick="Percent()"></td></tr><tr><td><input name="btnFour" type="Button" value=" 4 " onclick="number_press(4)"></td><td><input name="btnFive" type="Button" value=" 5 " onclick="number_press(5)"></td><td><input name="btnSix" type="Button" value=" 6 " onclick="number_press(6)"></td><td></td><td align=middle><input name="btnPlus" type="Button" value=" + " onclick="Operation('+')"></td><td align=middle><input name="btnMinus" type="Button" value=" - " onclick="Operation('-')"></td></tr><tr><td><input name="btnOne" type="Button" value=" 1 " onclick="number_press(1)"></td><td><input name="btnTwo" type="Button" value=" 2 " onclick="number_press(2)"></td><td><input name="btnThree" type="Button" value=" 3 " onclick="number_press(3)"></td><td></td><td align=middle><input name="btnMultiply" type="Button" value=" * " onclick="Operation('*')"></td><td align=middle><input name="btnDivide" type="Button" value=" / " onclick="Operation('/')"></td></tr><tr><td>

<input name="btnZero" type="Button" value=" 0 " onclick="number_press(0)"></td><td><input name="btnDecimal" type="Button" value=" . " onclick="Decimal()"></td><td colspan=3></td><td><input name="btnEquals" type="Button" value=" = " onclick="Operation('=')"></td></tr></table></table></B></form></center><font face="Verdana, Arial, Helvetica" size=2><script language="JavaScript">

var funKeyPad = document.keys;var Accumulate = 0;var NewNum = false;var PendingOp = "";function number_press (Num) {if (NewNum) {funKeyPad.readText.value = Num;NewNum = false; }else {if (funKeyPad.readText.value == "0")funKeyPad.readText.value = Num;elsefunKeyPad.readText.value += Num; }}function Operation (Op) {var Readout = funKeyPad.readText.value;if (NewNum && PendingOp != "=");else{NewNum = true;if ( '+' == PendingOp )Accumulate += parseFloat(Readout);else if ( '-' == PendingOp )Accumulate -= parseFloat(Readout);else if ( '/' == PendingOp )Accumulate /= parseFloat(Readout);else if ( '*' == PendingOp )Accumulate *= parseFloat(Readout);elseAccumulate = parseFloat(Readout);funKeyPad.readText.value = Accumulate;PendingOp = Op;

}}function Decimal () {var curReadOut = funKeyPad.readText.value;if (NewNum) {curReadOut = "0.";NewNum = false; }else{if (curReadOut.indexOf(".") == -1)curReadOut += "."; }funKeyPad.readText.value = curReadOut;}function ClearEntry () {funKeyPad.readText.value = "0";NewNum = true;}function Clear () {Accumulate = 0;PendingOp = "";ClearEntry();}function Neg () {funKeyPad.readText.value = parseFloat(funKeyPad.readText.value) * -1;}function Percent () {funKeyPad.readText.value = (parseFloat(funKeyPad.readText.value) / 100) * parseFloat(Accumulate);}</script>

</body></html>

Out Put:

How to use Image Upload control in JavaScript

Step 1. Written below code in your application.

<html><script language="javascript">var maxWidth=100;var maxHeight=100;var fileTypes=["bmp","gif","png","jpg","jpeg"];var outImage="previewField";var defaultPic="spacer.gif";function preview(what){ var source=what.value; var ext=source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase(); for (var i=0; i<fileTypes.length; i++) if (fileTypes[i]==ext) break; globalPic=new Image(); if (i<fileTypes.length) globalPic.src=source; else { globalPic.src=defaultPic; alert("That is not avalid image\nPlease load an image with an extention of one of the following:\n\n"+fileTypes.join(", ")); } setTimeout("apply_changed()",200);}var globalPic;function apply_changed(){ var field=document.getElementById(outImage); var x=parseInt(globalPic.width); var y=parseInt(globalPic.height); if (x>maxWidth) { y*=maxWidth/x;

x=maxWidth; } if (y>maxHeight) { x*=maxHeight/y; y=maxHeight; } field.style.display=(x<1 || y<1)?"none":""; field.src=globalPic.src; field.width=x; field.height=y;}</script><body><input type="file" id="picField" onchange="preview(this)"></body></html>

Step 2. Run the Application. Click on Button.

How to show the Clock on Button using JavaScript

Step 1. Written below code in your application.

<html><script language="javascript">function get_date(){Todays = new Date();TheDate = "" + (Todays.getMonth()+ 1) +" / "+ Todays.getDate() + " / " + Todays.getYear() document.clock.date.value = TheDate;}var timerID = null;var timerRunning = false;function stopclock (){ if(timerRunning); clearTimeout(timerID); timerRunning = false; }function startclock () { stopclock(); get_date() showtime(); }function showtime () { var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds() var timeValue = "" + ((hours >12) ? hours -12 :hours) timeValue += ((minutes < 10) ? ":0" : ":") + minutes timeValue += ((seconds < 10) ? ":0" : ":") + seconds timeValue += (hours >= 12) ? " P.M." : " A.M." document.clock.face.value = timeValue; timerID = setTimeout("showtime()",1000); timerRunning = true; }</script><body onLoad="startclock()"><form name="clock" onSubmit="0">Date:<input type=text name="date" size=12 value=""> <br />Time:<input type=button name="face" size=12 value="JavaScript!!"></form></html>

Step 2. Run the Application.

How to show  popup window onMouseOver using JavaScript

Step 1. Written below code in your application.

<html><body><script language="javascript">var popup_window = null;function popup(status,url) {if(status != 0) {if(popup != null) popup.focus(); else { var popup = open(url, "Popup", "width=350,height=175"); popup_window = popup; } } else { if(popup_window != null) popup_window.close(); } }</script><center><a href="" onMouseover="popup(1,'http://en.wikipedia.org/wiki/Mohandas_Karamchand_Gandhi')" onMouseout="popup(0)"><img src="http://lh6.ggpht.com/_i9f40ym7Ntw/Swh9r2li-JI/AAAAAAAAACI/ugjMOdtC71E/g.jpg" width=200 height=200></a></center></body></html>

Step 2. Run the Application.

Sending email using JavaScript

Step 1. Written below code in your application.

<html><body><input type="button" value="e_mail" onClick="parent.location='mailto:Email address!?subject=Subject!'"></body></html>

Step 2. Run the Application.

Measuring users time on a page using Java Script

Step 1. Written below code in your application.

<html><body bgcolor=ffffff onLoad='personIN()' onUnLoad='personOut()'><script language="javascript">function personIN() { enter=new Date();}function personOut() { exit=new Date(); time_dif=(exit.getTime()-enter.getTime())/1000; time_dif=Math.round(time_dif); alert ("You've only been here for: " + time_dif + " seconds!!")}</script></body></html>

Step 2. Run the Application.

How to Creating a Animated frame

Step 1. Written below code in your application.

<html><body onload="changeOneFrame()"><script language="javascript">var newWin = window.open('', 'f', 'width=400,height=400');newWin.document.write('<frameset rows="50%,50%" cols="50%,50%">');newWin.document.write('<frame name="f1" src="about:blank">');newWin.document.write('<frame name="f2" src="about:blank">');newWin.document.write('<frame name="f3" src="about:blank">');newWin.document.write('<frame name="f4" src="about:blank">');newWin.document.write('</frameset>');colors = new Array("red","green","blue","yellow","white");windows = new Array(newWin.f1, newWin.f2, newWin.f4, newWin.f3);var c = 0, f = 0;var timeout = null;function changeOneFrame(){ windows[f].document.write('<BODY BGCOLOR="' + colors[c] + '">');

windows[f].document.close(); f = (f + 1) % 4; c = (c + 1) % 5; timeout = setTimeout("changeOneFrame()", 250);}</script><input type="button" value="Stop" onclick="if (timeout) clearTimeout(timeout); if (!n.closed) n.close();" /></body></html>

Step 2. Run the Application.

How to create Collapse Menu in JavaScript

Step 1. Written below code in your application.

<html><body><script language="javascript"> function open_subCategory(n, nn) { var i = 0 for(i=1;i<n+1;i++) { var sel = document.getElementById('insideSubCategory'+i); sel.style.display = 'none'; } var sel = document.getElementById('insideSubCategory'+nn); sel.style.display = 'block'; } function openInside_subCategory(n, nn) { var i = 0 for(i=1;i<n+1;i++) { var sel = document.getElementById('showProducts'+i); sel.style.display = 'none'; } var sel = document.getElementById(nn); sel.style.display = 'block'; }</script><div style="display:block; cursor:pointer; font-size: large; font-weight: bold;"><a href="JavaScript:open_subCategory(2, 1)">Fruit</a></div> <div id="insideSubCategory1" style="border:1px solid white; display:none;"> <div style="display:block; padding-left:6px;"> <a href="JavaScript:openInside_subCategory(2, 'showProducts1')">Orange</a></div> <div id="showProducts1" style="margin:6px; font-size:9px; border:1px solid white; display:none;"> <div style="display:block; padding-left:12px;"><a href="#">Yellow</a></div> </div> <div style="display:block; padding-left:6px;"> <a href="JavaScript:openInside_subCategory(2, 'showProducts2')">Apple</a></div> <div id="showProducts2" style="margin:6px; font-size:9px; border:1px solid white; display:none;"> <div style="display:block; padding-left:12px;"><a href="#">Red</a></div> <div style="display:block; padding-left:12px;"><a href="#">Green</a></div> </div> <div style="display:block; padding-left:6px;"> <a href="JavaScript:openInside_subCategory(2, 'showProducts3')">Banana</a></div> <div id="showProducts3" style="margin:6px; font-size:9px; border:1px solid white; display:none;"> <div style="display:block; padding-left:12px;"><a href="#">Yellow</a></div> </div> </div> <div style="display:block; cursor:pointer; font-size: large; font-weight: bold;"> <a href="JavaScript:open_subCategory(2, 2)">Vegitable</a></div> <div id="insideSubCategory2" style="border:1px solid white; display:none;"> <div style="display:block; padding-left:6px;"> <a href="JavaScript:openInside_subCategory(3, 'showProducts4')">Tomato</a></div> <div id="showProducts4" style="margin:6px; font-size:9px; border:1px solid white; display:none;"> <div style="display:block; padding-left:12px;"><a href="#">Red</a></div> </div>

<div style="display:block; padding-left:6px;"> <a href="JavaScript:openInside_subCategory(3, 'showProducts5')">Brinjal</a></div> <div id="showProducts5" style="margin:6px; font-size:9px; border:1px solid white; display:none;"> <div style="display:block; padding-left:12px;"><a href="#">Purple</a></div> <div style="display:block; padding-left:12px;"><a href="#">White</a></div> </div> <div style="display:block; padding-left:6px;"> <a href="JavaScript:openInside_subCategory(3, 'showProducts6')">Pea</a></div> <div id="showProducts6" style="margin:6px; font-size:9px; border:1px solid white; display:none;"> <div style="display:block; padding-left:12px;"><a href="#">Green</a></div> </div> </div> <div style="display:block; cursor:pointer; font-size: large; font-weight: bold;"><a href="JavaScript:open_subCategory(2, 3)">Grains</a></div><div id="insideSubCategory3" style="border:1px solid white; display:none;"> <div style="display:block; padding-left:6px;"> <a href="JavaScript:openInside_subCategory(4, 'showProducts7')">Rice</a></div> <div id="showProducts7" style="margin:6px; font-size:9px; border:1px solid white; display:none;"> <div style="display:block; padding-left:12px;"><a href="/">Sabarmati</a></div> <div style="display:block; padding-left:12px;"><a href="/">Basmati</a></div> <div style="display:block; padding-left:12px;"><a href="/">Saryu</a></div> </div> <div style="display:block; padding-left:6px;"> <a href="JavaScript:openInside_subCategory(4, 'showProducts8')">Wheat</a></div> <div id="showProducts8" style="margin:6px; font-size:9px; border:1px solid white; display:none;"> <div style="display:block; padding-left:12px;"><a href="/">Shakti</a></div> <div style="display:block; padding-left:12px;"><a href="/">Ashirvad</a></div> </div> <div style="display:block; padding-left:6px;"> <a href="JavaScript:openInside_subCategory(4, 'showProducts9')">Pulse</a></div> <div id="showProducts9" style="margin:6px; font-size:9px; border:1px solid white; display:none;"> <div style="display:block; padding-left:12px;"><a href="/">Chana</a></div> <div style="display:block; padding-left:12px;"><a href="/">Matar</a></div> </div> </div></body></html>

Step 2. Run the Application.

How to create a field's max length using JavaScript

Step 1. Written below code in your application

<html><script language="javascript">function chek_leng(x,y){if (y.length==x.maxLength)

{var next=x.tabIndexif (next<document.getElementById("myForm").length)

{

document.getElementById("myForm").elements[next].focus()}

}}</script><body><p>Enter your key value:</p><form id="myForm"><input size="4" tabindex="1" maxlength="4" onkeyup="chek_leng(this,this.value)"><input size="2" tabindex="2" maxlength="2" onkeyup="chek_leng(this,this.value)"><input size="3" tabindex="3" maxlength="3" onkeyup="chek_leng(this,this.value)"></form>

</body></html>

Step 2. Run the Application.

Selecting whole text on button Click

Step 1. Written below code in your application

<html><script type="text/javascript">function select_text(){document.getElementById("myText").select()}</script><body><input size="25" type="text" id="myText" value="Have a nice day"><input type="button" value="Select text" onclick="select_text()"> </body></html>

Step 2. Run the Application.

Selecting a item from Drop Down List and display it another Text Box using JavaScript

Step 1. Written below code in your application

<html><script type="text/javascript">function favrt_browser(){var mylist=document.getElementById("myList")document.getElementById("favorite").value=mylist.options[mylist.selectedIndex].text}</script><body><form>Select your city:<select id="myList" onchange="favrt_browser()"> <option>Delhi</option> <option>Nashik</option> <option>Varansi</option> <option>Kanpur</option> <option>Lucknow</option> <option>Allahabad</option></select><input type="text" id="favorite" size="20"></form></body></html>

Step 2. Run the Application.

How to Disabling Right Click button of mouse using JavaScript

Step 1. Written below code in your application.

<html><head><script language="JavaScript">function disable(){if (event.button == 2){alert("Sorry no rightclick on this page.\nNow you can not view my source\nand you can not steal my images")}}</script></head><body onmousedown="disable()"><form><a href="#">Good Morning!!!!</a><p>Have a Nice Day!!!</p><p>Have a great Day!!!</p><img src=Image.jpg /></form></body></html>

Step 2. Run the Application.

How to get Monitor Information using JavaScript

Step 1. Written below code in your application.

<html><body><script language="JavaScript">document.write("Screen Resolution: ")document.write(screen.width + "*")document.write(screen.height + "<br>")document.write("Available View Area: ")document.write(window.screen.availWidth + "*")document.write(window.screen.availHeight + "<br>")document.write("Color Depth: ")

document.write(window.screen.colorDepth + "<br>")</script></body></html>

Step 2. Run the Application.

How to know Last Modify Page using Java Script

Step 1. Written below code in your application.

<html><body>This page was last modify:<br /><script language="JavaScript">document.write(document.lastModified)</script><br /><br />View source to see how it is done</body></html>

Step 2. Run the Application.

How to Set the home page

Step 1. Written below code in your application.

<html><head><script language="JavaScript">function Dflt(element){element.style.behavior='url(#default#homepage)'; element.setHomePage('http://www.r4r.co.in');}</script></head><body><p>Click the button to get your home page.</p><form><input type="button" onclick="Dflt(this)" value="Make r4r your default homepage"></form></body></html>

Step 2. Run the Application.

hange back Ground Color onMouseOver using JavaScript

Step 1. Written below code in your application.

<html><body><a href="" onmouseover ="document.bgColor='silver'"><b>Silver</b></a> <a href="" onmouseover="document.bgColor='green'"><b>Green</b></a> <a href="" onmouseover="document.bgColor='blue'"><b>Blue</b></a> <a href="" onmouseover="document.bgColor='red'"><b>Red</b></a> </body></html>

Step 2. Run the Application. When mouse on silver label back ground color changed to silver.

join() Method  in JavaScript

Joins all array elements into a single string separated by the specified delimiter.

Syntax:

arrayName.join(param1)

Example:

<html><body><script language="javascript">function join_a(){ var myArray = new Array('Aditya','Anil','Ashish'); alert(myArray.join('>>'));}</script><button onclick="join_a()">ArrayJoin</button></body></html>

Output