Javascript Super Exa,Plesss
-
Upload
lokesh-verma -
Category
Documents
-
view
115 -
download
1
description
Transcript of 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
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 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