Javascript Super Exa,Plesss

56
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

description

indian students born to lead- facebook(Lokesh verma)

Transcript of Javascript Super Exa,Plesss

Page 1: Javascript Super Exa,Plesss

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

Page 2: Javascript Super Exa,Plesss

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 3: Javascript Super Exa,Plesss

<%@ 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.

Page 4: Javascript Super Exa,Plesss

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>

Page 5: Javascript Super Exa,Plesss

<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">

Page 6: Javascript Super Exa,Plesss

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

</body></html>

Step 2. Run the Application.

Page 7: Javascript Super Exa,Plesss

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

Page 8: Javascript Super Exa,Plesss

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.

Page 9: Javascript Super Exa,Plesss

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=="")

Page 10: Javascript Super Exa,Plesss

{ 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">

Page 11: Javascript Super Exa,Plesss

<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.

Page 12: Javascript Super Exa,Plesss

 

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

Page 13: Javascript Super Exa,Plesss

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

Page 14: Javascript Super Exa,Plesss

<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++)

Page 15: Javascript Super Exa,Plesss

{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:

Page 16: Javascript Super Exa,Plesss

 

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:

Page 17: Javascript Super Exa,Plesss

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>

Page 18: Javascript Super Exa,Plesss

<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:

Page 19: Javascript Super Exa,Plesss

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:

Page 20: Javascript Super Exa,Plesss

 

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.

Page 21: Javascript Super Exa,Plesss

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:

Page 22: Javascript Super Exa,Plesss

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:

Page 23: Javascript Super Exa,Plesss

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

Out Put:

Page 24: Javascript Super Exa,Plesss

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:

Page 25: Javascript Super Exa,Plesss

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:

Page 26: Javascript Super Exa,Plesss

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>

Page 27: Javascript Super Exa,Plesss

<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>

Page 28: Javascript Super Exa,Plesss

<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;

Page 29: Javascript Super Exa,Plesss

}}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:

Page 30: Javascript Super Exa,Plesss

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;

Page 31: Javascript Super Exa,Plesss

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.

Page 32: Javascript Super Exa,Plesss

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.

Page 33: Javascript Super Exa,Plesss

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.

Page 34: Javascript Super Exa,Plesss

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.

Page 35: Javascript Super Exa,Plesss

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>

Page 36: Javascript Super Exa,Plesss

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] + '">');

Page 37: Javascript Super Exa,Plesss

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.

Page 38: Javascript Super Exa,Plesss

<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>

Page 39: Javascript Super Exa,Plesss

<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.

Page 40: Javascript Super Exa,Plesss

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>

Page 41: Javascript Super Exa,Plesss

</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.

Page 42: Javascript Super Exa,Plesss

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.

Page 43: Javascript Super Exa,Plesss

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.

Page 44: Javascript Super Exa,Plesss

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: ")

Page 45: Javascript Super Exa,Plesss

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.

Page 46: Javascript Super Exa,Plesss

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.

Page 47: Javascript Super Exa,Plesss

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.

Page 48: Javascript Super Exa,Plesss

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