Java Script Language

Java Script Language Java script Java script is an object oriented language that allows creation of interactive web
pages. Java script allows user entries ,which are loaded in html form to be processed as required. There are two types of scripting languages. They are (i)client side scripting language. (ii) server side scripting language. (i) Client Side Scripting language: client side scripting languages are the such scripting processor which execute on the local client machine ,such as Java Script & VB Script. (ii) Server side scripting language: Server side Scripting languages run at the server side & there output machine either client side script language or generated web page (dynamic web page) & mix of them. Java Script: Variable declaration: var name1;name2; Input: var name=prompt(input message ,default ); var name=Form Name .Field. Value ; Output: alert(output); document.write(output) Form Name .Field .Value=output; To start java script use the following tags : <script language=javascript> Coding------------------------------------------------</script> Rules: (1)If the scripting elements contain only declaration of var & function then the scripting must be inside the head tag. (2)The function call statement & any other statement which is executing directly must be place in body tag. Function in javascript: Function are blocks of java script code that perform task and often returns a value. (1)eval(): The eval() function can be used to convert a string expression to a numeric value. Exp: var n1,n2,result; result=eval(n1)+eval(n2); (2)parseInt: The parseInt function is used to convert a string value to and integer. Exp: n=parseInt(123xyz); Dialog boxes: Java script provides the ability to pickup user input or display small amount of text to the user by using dialog boxes. There are three types of dialog boxes provided by java script: (1):The alert dialog box: The simplest way to direct small amount of textual output to a browsers window is to use an alert dialog box .The java script alert() method tales a string as an argument and display an alert dialog box in the browser window when invoked by appropriate java script. Syntax: alert(message) Exp: alert(click ok to continue); (2): The prompt dialog box : Java script provides a prompt dialog box.The prompt () method instantiates the prompt dialog box which displays a specified message. In addition the prompt dialog box also provides a single data entry field ,which accept user input. Syntax: prompt(Message,Default value); Exp: prompt(Enter your favorite color:,blue); (3): The confirm box: The confirm dialog box ,causes program execution to half until user action takes place.user action can be either the OK button being clicked,or the CANCEL button being clicked ,which causes the following action to take place. Clicking on the OK button causes TRUE to be passed to the program which called the confirm dialog box.
Clicking on the CANCEL button causes FALSE to be passed to the program which called the confirm dialog box. Syntax: Confirm(message0); Exp: confirm(Are you sure you want to exit the window);
Syntax of java script program: <html> <head> <title>------</title> <script language=javascript> var declaration; Input; Process; Output; </script> </html> Program: (1) Using document.write function: <html> <head> <title> Document</title> </head> <body> <script language=javascript> document.write(Nice to meet you); </script> </body> </html> Program: (2) Using alert dialog box: <html> <head> <title> Document</title> </head> <body> <script language=javascript> alert(Hello! India); </script> </body> </html> Program: (3) Using alert/prompt/confirm dialog box: <html> <head> <title>1st Programe</title> </head> <body> <script language="javascript"> var a; alert("Hello"); a=prompt("Enter any no"); alert(a); confirm("Are You Sure?"); </script> </body> </html> Program: (4) Using prompt dialog box: <html> <head> <title> Document</title> </head> <body> <script language=javascript> var d: d=prompt(Enter your name);
document.write(d); alert(d); </script> </body> </html> Program: (5) <html> <body> <script type="text/javascript"> var txt="Hello World!"; document.write("<p>Big: " + txt.big() + "</p>"); document.write("<p>Small: " + txt.small() + "</p>"); document.write("<p>Bold: " + txt.bold() + "</p>"); document.write("<p>Italic: " + txt.italics() + "</p>"); document.write("<p>Blink: " + txt.blink() + " (does not work in IE)</p>"); document.write("<p>Fixed: " + txt.fixed() + "</p>"); document.write("<p>Strike: " + txt.strike() + "</p>"); document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>"); document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>"); document.write("<p>Lowercase: " + txt.toLowerCase() + "</p>"); document.write("<p>Uppercase: " + txt.toUpperCase() + "</p>"); document.write("<p>Subscript: " + txt.sub() + "</p>"); document.write("<p>Superscript: " + txt.sup() + "</p>"); document.write("<p>Link: " + txt.link("http://www.w3schools.com") + "</p>"); </script></body></html> Output: Big: Hello World! Small: Hello World! Bold: Hello World! Italic: Hello World! Blink: Hello World! (does not work in IE) Fixed: Hello World! Strike: Hello World! Fontcolor: Hello World! Fontsize: Hello World! Lowercase: hello world! Uppercase: HELLO WORLD! Subscript: Hello World! Superscript: Hello World! Link: Hello World! Program: (6) <html><body> <script type="text/javascript"> var str="Visit Microsoft!"; document.write(str.replace(/Microsoft/,"W3Schools")); </script></body></html> {Visit W3Schools!} Program: (7) <html> <body> <script type="text/javascript">
var str="Hello world!"; document.write(str.indexOf("Hello") + "<br />"); document.write(str.indexOf("World") + "<br />"); document.write(str.indexOf("world")); </script></body></html> Program: (8) To find the sum of two number: <html> <head> <title>Sum</title> </head> <body> <script language=javascript> var n1,n2,result: n1=prompt(enter first number); n2=prompt(enter second number); result=eval(n1)+eval(n2); document.write(Sum of two number is, =+result);); </script></body></html> Program: (9) To change the background color: <html><head> <title>bgcolor</title> </head> <body> <script language="javascript"> var c=""; c=prompt("Enter Your Favourite Colour","color"); document.bgColor= c; </script></body></html> Program: (10) <html><head> <title>Area</title> <script language="javascript"> var a=10; a=a+1; a++; document.write("the value of the variable a is= " +a); </script></head></html> Program: (11) <html><head> <title>Area</title> <script language="javascript"> var a=10,b=10; document.write(a+b); </script></head></html> Program: (12) <html><head> <title>Area</title> <script language="javascript"> var a,b; b=20; a=b+5; document.write(a); </script></head></html> Program: (13) <html><head> <title>Area</title> <script language="javascript"> var a,b,c,d; a=10; b=a*5; c=b/10; d=c-1;
document.write(a+"<br>"); document.write(b+"<br>"); document.write(c+"<br>"); document.write(d+"<br>"); </script></head></html> Program: (14) C=a+b <html><head> <title>Sum</title> </head> <body> <script language=javascript> var a,b,c; a=eval(prompt(enter first number)); b=eval(prompt(enter second number)); c=a+b; document.write(sum= +c); (or)alert(sum is +c); </script></body></html> Program: (15) C=(a+b)/(d+e) <html><head> <title>Area</title> <script language=javascript> Var a,b,cd,e; a=eval(prompt(enter first number); b=eval(prompt(enter second number); d=eval(prompt(enter third number); e=eval(prompt(enter fourth number); c=(a+b)/(d+e); document.write(Solution= +c); (or)alert(Solution is +c); </script></head></html> Program: (16) Enter length and breadth of rectangle.Calculate area and perimeter of rectangle: a=l*b p=2*(l+b) <html><head> <title> Area and perimeter</title> <script language=javascript> Var a,l,b,p; l=eval(prompt(enter first number); b=eval(prompt(enter second number); a=l*b; p=2*(l+b); document.write(area=,+a perimeter= ,+p); </script></head> </html> Program: (17) Enter quantity and price of any item,print sales: S=q*p <html><head> <title>Sales</title> <script language=javascript> var s,q,p; q=eval(prompt(enter first number)); p=eval(prompt(enter second number)); s=q*p; document.write(Sales= +s); </script></head></html> Program: (18) Enter quantity and price of any item,calculate sales given discount 2% of sales print net sales: s=q*p
d=s*2/100 ns=s-d <html> <head> <title>Sales</title> <script language=javascript> var s,q,p,d,ns; q=eval(prompt(enter first number)); p=eval(prompt(enter second number)); s=q*p; d=s*2/100; ns=s-d; document.write(Net Sales= +ns); </script> </head> </html> Program: (19) Enter marks of three subjects, calculate total and percentage. <html><head> <title>Sales</title> <script language=javascript> var m1,m2,m3,t,p; m1=eval(prompt(enter number)); m2=eval(prompt(enter number)); m3=eval(prompt(enter number)); t=m1+m2+m3; p=t*100/300; document.write(total= +t) document.write(percentage= +p) </script></head></html> Program: (20) <html><head> <title>Sales</title> </head> <body> <script language=javascript> var temp1,temp2,temp3; temp1=10; temp2=20; temp3=temp1+temp2; document.write(temp3= +temp3); </script></body></html> Program: (21) Enter salary of any employee,given da=4% of salary ,hra=8% of salary ,print total salary: ns=s+da+hra da=s*4/100 hra=s*8/100 <html><head> <title>Net salary</title> <script language=javascript> var s,da,hra,ns; s=eval(prompt(enter first number)); da=s*4/100; hra=s*8/100; ns=s+da+hra; document.write(Net salary= +ns); </script> </head> </html> Program: (22) Enter any two number print mult/div/subs/add of each number: <html><head> <title>Solution</title> <script language=javascript>
var n1,n2,m,s,d,a n1=eval(prompt(enter number); n2=eval(prompt(enter number); m=n1*n2 s=n1-n2 d=n1/n2 a=n1+n2 document.write(mult= +m); document.write(subs= +s); document.write(div= +d); document.write(add= +a); </script></head></html> Program: (23) Calculate simple interest: i=p*r*t/100 <html> <head> <title>Solution</title> <script language=javascript> var I,p,r,t; p=eval(prompt(enter principle amount)); r=eval(prompt(enter rate); t=eval(prompt(enter time); i=p*r*t/100; document.write(Interest= +i) </script> </head> </html> Program: (24) Enter radius of circle calculate circumference and area of circle. <html> <head> <title>Solution</title> <script language=javascript> var a,c,r; r=eval(prompt(enter number)); a=3.14*r*r; c=2*3.14*r document.write(Area= +a,circumference= ,+c); </script></head> </html> Program: (25) Enter temp. in c0 and convert into f0. <html> <head> <title> Solution</title> <script language=javascript> var f,c; c=eval (prompt(enter number)); f=.55*(c+32); document.write(temp= +f); </script></head></body> Program: (26) Calculate the area of triangle. <html> <head> <title>Solution</title> <script language=javascript> var a,b,h; b=eval(prompt(enter number)); h= eval(prompt(enter number)); a=.5*b*h; document.write(area = +a);
</script> </head> </body> Program: (27) <html> <head> <title>rekha aggarwal</title> <script language="Javascript"> var a=40,b=20,c=10,d=30 var ans; ans=(a>b)?"a is greater than b" : "b is greater than a"; document.write(ans,"<br>"); ans=(c<d)?"c is less than d" : "d is less than c"; document.write(ans) ; </script></head></html> Program: (28) <html><body> <script type="text/javascript"> var str="Hello world!"; document.write(str.match("world") + "<br />"); document.write(str.match("World") + "<br />"); document.write(str.match("worlld") + "<br />"); document.write(str.match("world!")); </script> </body> </html> Output: world null null world! Program: (29) <html> <head> <script type="text/javascript"> function x(event) { alert("hello") } </script> </head> <body onmouseover="x(event)"> <p>Click in the document. An alert box will tell what type of event that was triggered.</p> </body> </html> Program: (30) Enter 3-digit number .Print sum of digit. <html> <head> <title>percentage</title> <script language="javascript"> var n,r1,r2,r3,s; n=eval(prompt("enter numbre")); r1=n%10; n=parseInt(n/10); r2=n%10; n=parseInt(n/10); r3=n%10; s=r1+r2+r3; document.write("sum ="+s); </script>
</head></html> Program: (31) Enter 3-digit number.Print sum of reverse. <html> <head> <title>percentage</title> <script language="javascript"> var n,r1,r2,r3,s; n=eval(prompt("enter numbre")); r1=n%10; n=parseInt(n/10); r2=n%10; n=parseInt(n/10); r3=n%10; s=r1*100+r2*10+r3*1; document.write("sum ="+s); </script> </head> </html> if statement: The if statement is a powerful decision-making statement and is used to control the flow of execution of statements. (i)Inline(ii)expanded. (i)use of inline: Ternary operator ?: Syntax: Result=condition? value1:value2; {if the(value)condition is true then value 1 is assigned to result otherwise value2 } Syntax: if(test expression) Program: (32) Write a program to find the 1st number is greater or not if the 1stnumber is greater then print any message .By using if statement. <html> <head> <title>If</title> <script language=javascript> var a,b; a=prompt(enter number); b= prompt(enter number); if(a>b) { alert(Welcome to javascript language); } </script></head> </body> If-else statement: The if else statement is an extension of the simple if statement. Syntax: If(test expression) { True-block statement } Else { False-block statement } (or)(ii) Syntax: if(condition) { Statement1; } else {
Statement2; } (i)Inline: Program: (33) calculate 2 no. is greater than 1. <html> <head> <title> If </title> <script language=javascript> var n1,n2,n3; n1=prompt(enter first number,0); n2=prompt(enter first number,0); n3=eval(n1)>eval(n2)?n1:n2; alert(Greater is= +n3); </script> </head> </body> Program: (34) Enter three number and find greater number. <html> <head> <title>If</title> <script language=javascript> var n1,n2,n3,n4; n1=parseInt(prompt(enter first number,0)); n2=parseInt(prompt(enter second number,0)); n3=parseInt(prompt(enter third number,0)); n4=n1>n2?(n1:n3?n1:n3):(n2>n3?n3:n4); alert(Graeter is =+n4); </script></head> </body> (expanded) [If the condition is true then the statement block one is executed, otherwise Statement block two execute.] If we have more than one condition then we can use the if statement as follows: Syntax: If(condition1) { Statement1; } else If(condition2) { Statement2 } else If(condition3) { Statement3 } === === else { Statement n; } Program: (35) (expanded) Enter any two number and print greater. <html> <head> <title> If </title> <script language=javascript> var a,b
a=eval(prompt(enter first number)); b=eval(prompt(enter second number)); if(a>b); document.write(a is greater than b); else document.write(b is greater than a); </script> </head> </body> Program: (36) Enter two number and check the number is even or odd. <html> <head> <title> even or odd </title> <script language=javascript> var n; n=parseInt(prompt(enter number,0)); if(n%2==0) { alert(number is greater); } else { alert(number is odd); } </script> </head> </body> Program: (37) Enter quantity and price of any item if sales is greater than 100 given discount 2% of sales ,other wise no discount ,print net sales. <html> <head> <title>Net sales</title> <script language=javascript> var s,q,p,d,ns; q=eval(prompt(enter quantity)); p=eval(prompt(enter price)); s=q*p; d=s*2/100; ns=s-d; if(s>100) document.write(discount= +d); else document.write(no discount); </script> </head> </body> Program: (38) <html> <head> <title>Grade</title> <script language="javascript"> var m; m=prompt("enter marks",60); if(m<30) alert("fail"); else if(m<40)
alert("Grade:D"); else if(m<50) alert("Grade:C"); else if(m<60) alert("Grade:B"); else if(m>=60) alert("Grade:A"); </script> </head> </html> Program: (39) <html> <head> <title>mspvs </title> <script language="javascript"> var a,b,ch,add,sub,mul,div; a=eval(prompt("enter firts number")); b=eval(prompt("enter second number")); ch=eval(prompt("enter choice")); if(ch==1) { add=a+b; document.write("sum= ",+add) } else if(ch==2) { sub=a-b; document.write("minus= ",+sub) } else if(ch==3) { mul=a*b; document.write("multiply= ",+mul); } else if(ch==4) { mul=a/b; document.write("divide= ",+div); } else document.write("Invalid number"); </script> </head> </html> Program: (40) Enter length and breadth of rectangle check area is greater than perimeter. <html> <head> <title>area & perimeter</title> <script language=javascript> var l,b,a,p
l=eval(prompt(enter length)); b=eval(prompt(enter breath)); a=l*b; p=2*(l+b); if(a>p) document.write(area); else document.write(perimeter); </script> </head> </body> Switch statement: We have a built-in multiple way decision statement known as a switch .The switch statement tests the value of a given value against a list of case value and when match is found ,a block of statements associated with that case is executed .The general form of the switch statement is: Switch(expression) { Case value-1: Block-1 Break; Case value-2: Block-2 Break; Case value-3: Block-3 Break; Default: Default-block Break; } Break: With the help of break statement we can stop the execution of current executed control block. Program: (41) Write a program to find the student ability by using switch statement. These are-excellent,very good,good,poor,very poor. <html> <head> <title>Switch</title> </head> <body> <script language="javascript"> var ability; document.write("Enter the ability number one to five") ability=parseInt(prompt("Enter the ability number")); switch (ability) { case 1: document.write("Excellent"); break; case 2: document.write("very good"); break; case 3: document.write("good"); break; case 4: document.write("poor"); break; default: document.write("very poor"); } </script>
</head> </body> Program: (42) <html> <head> <title>switch </title> <script language="javascript"> var a,b,ch,add,sub,mul,div; a=eval(prompt("enter firts number")); b=eval(prompt("enter second number")); ch=eval(prompt("enter choice")); switch(ch) { case 1: add=a+b; document.write("sum= ",add); break; case 2: sub=a-b; document.write("substract= ",sub); break; case 3: mul=a*b; document.write("multiply= ",mul); break; case 4: div=a/b; document.write("divide= ",div); break; default: document.write("Invalid number"); } </script> </head> </html> Loop Statement: These statements are used for repeating a block of code until a particular condition is true .there are several loop statement. 1. The while statement. 2. The do-while statement. 3. The for statement. The while statement: The while-loop is an entry-controlled loop statement.The test condition is evaluated and if the condition is true,then the body of the loop is executed.This process of repeated execution of the body continues until the test-condition finally becomes false.The basic format of while statement is: While(test condition) { Body of loop } Program: (43) Find the even number series between 1 to 10 by using while loop. <html> <head> <title>even series</title> </head> <body> <script language=javascript> var i=0; while(i<=10); { i=i+2; document.write(<h1>+i+</h1>); }
</script> </body> </html> Program: (44) Find the odd number series between 1 to 10 by using while loop. Program: (44) c-1 2 3 4 5 6 n a-1 3 5 7 9n <html> <head> <title>even series</title> <script language="javascript"> var a=1,c=1,n; n=eval(prompt("enter number")); while(c<=n) { document.write(a); a=a+2; c=c+1; } </script> </head> </body> Program: (45) c-1 2 3 4 5 6 n a-2 4 6 8 10n <html> <head> <title>even series</title> <script language="javascript"> var a=2,c=1,n; n=eval(prompt("enter number")); while(c<=n) { document.write(a); a=a+2; c=c+1; } </script> </head> </body> Program: (46) c-1 2 3 4 5 6 n a-1 3 7 15 n <html> <head> <title>even series</title> <script language="javascript"> var a=1,c=1,n; n=eval(prompt("enter number")); while(c<=n) { document.write(a); a=a*2+1; c=c+1; } </script> </head> </body> Program: (47) c-1 2 3 4 5 6 n a-(2) (2+4) (2+4+6) n <html> <head>
<title>even series</title> <script language="javascript"> var a=2,c=1,n,gap=4; n=eval(prompt("enter number")); while(c<=n) { document.write(a); a=agap; c=c+1; gap=gap+2; } </script> </head> </body> Exp: Program: (48) print the table of any number. <html> <head> <title>table</title> </head> <body> <script language="javascript"> var i,c=1,result; i=prompt("enter the table number"); while(c<=10) { result=i*c; document.write("<h2>"+result+"</h2>"); c++; } </script> </body> </html> The do-while loop: It is same as that of the while loop .The only difference is that the looping condition is checked at the end of the loop,inserted of at the beginning. Syntax: Do { Statement(s) } Which(test condition) Exp: Program: (49) Print the number 1 to 10 by using do-while loop. <html> <head> <title>table</title> </head> <body> <script language="javascript"> var n=1; do { document.write(<h2>+n+</h2>); n++; } while(n<=10) </script> </body> </html> The for statement: The mitialization statement is executed first time the for statement is executed. Syntax: For(initial;condition;updatestatement) {
Statement(s) } Exp: Program: (50) Print the number 1 to 10 by using do-while loop. <html> <head> <title>table</title> </head> <body> <script language="javascript"> var n; for(n=1; n<=10; n++) { document.write(<h1>+n+</h1>); } </script> </body> </html> Function : Function are named block of statement that are referenced and executed as a unit.Data that is required for the execution of a function may be passed as parameters to the function. Defining function: Function must be defined before it can be used. Function definitions are usually placed in the head of on-html document. Syntax: Function function name(argument list) { Statement } Exp: Program: (51) Find the sum of two numbers by using function. <html> <head> <title>table</title> <script language="javascript"> function sum() { var n1,n2,result; n1=prompt("enter first number"); n2=prompt("enter second number"); result=eval(n1)+eval(n2); document.write("<h1>"+"sum of two numbers"+"<br>"+result+"</h1>") } </script> </head> <body> <script language="javascript"> sum(); </script> </body> Exp: Program: (52) <html> <head> <title>table</title> <script language="javascript"> function sum() { var n1,n2,result; n1=prompt("enter first number"); n2=prompt("enter second number"); result=eval(n1)+eval(n2); document.write("<h1>"+"sum of two numbers"+"<br>"+result+"</h1>"); } </script> </head> <body>
<Input type="button" value="sub" onClick="sum()"> </body> </html> Exp: Program: (53) <html> <head> <title>table</title> <script language="javascript"> function qq() { var n1,n2,result; n1=prompt("enter first number"); n2=prompt("enter second number"); result=eval(n1)+eval(n2); document.write("<h1>"+"sum of two numbers"+"<br>"+result+"</h1>"); } function ww() { var n1,n2,result; n1=prompt("enter first number"); n2=prompt("enter second number"); result=eval(n1)-eval(n2); document.write("<h1>"+"sub of two numbers"+"<br>"+result+"</h1>"); } </script> </head> <body> <Input type="button" value="sub" onClick="qq()"> <Input type="button" value="sub" onClick="ww()"> </body> </html> Exp: Program: (54) <html> <head> <title>table</title> <script language="javascript"> function over() { alert("hello"); } function down() { alert("hello world"); } </script> </head> <body> <input type="button" value="onmouseover" onMouseover="over()"> <input type="button" value="onmousedown" onMousedown ="down()"> </body> </html> Exp: Program: (55) <html> <head> <title>color</title> <script language="javascript"> function fun1() { document.bgColor="red" } function fun2() { document.bgColor="green" }
function fun3() { document.bgColor="blue" } function fun4() { document.bgColor="pink" } function fun5() { document.bgColor="yellow" } </script> </head> <body onMouseDown="fun1()" onMouseUp="fun2()" onKeyDown="fun3()" onKeyUp="fun4()" onLoad="fun5()"> </body> </html> Exp: Program: (56) <html><head> <script type="text/javascript"> function formReset() { document.getElementById("myForm").reset(); } </script> </head> <body> <p>Enter some text in the text fields below, and then press the "Reset" button to reset the form.</p> <form name="aa" id="myForm"> Name: <input type="text" size="20"><br /> Age: <input type="text" size="20"><br /> <br /> <input type="button" onclick="formReset()" value="Reset"> </form></body></html> Exp: Program: (57) <html> <head> <script type="text/javascript"> function formSubmit() { document.getElementById("myForm").submit(); } </script> </head> <body> <p>Enter some text in the text fields below, and then press the "Submit" button to submit the form.</p> <form id="myForm" action="200.html" > Firstname: <input type="text" name="firstname" size="20"><br /> Lastname: <input type="text" name="lastname" size="20"><br /> <br /> <input type="button" onclick="formSubmit()" value="Submit"> </form> </body> </html> Exp: Program: (58) <html> <head> <title>table</title> <script language="javascript"> function dosum()
{ var n1,n2,r; n1=frmcal.num1.value; n2=frmcal.num2.value; r=parseInt(n1)+parseInt(n2); frmcal.result.value=r; } function domul() { var n1,n2,r; n1=frmcal.num1.value; n2=frmcal.num2.value; r=parseInt(n1)*parseInt(n2); frmcal.result.value=r; } function dodiv() { var n1,n2,r; n1=frmcal.num1.value; n2=frmcal.num2.value; r=parseInt(n1)/parseInt(n2); frmcal.result.value=r; } function dosub() { var n1,n2,r; n1=frmcal.num1.value; n2=frmcal.num2.value; r=parseInt(n1)-parseInt(n2); frmcal.result.value=r; } </script> </head> <body> <form name="frmcal"> <table border=1 align="center"> <tr> <th>Enter first number</th> <td><input type="text" name="num1"></td></tr> <tr> <th>Enter second number</th> <td><input type="text" name="num2"></td></tr> <tr> <th>result</th> <td><input type="text" name="result"></td></tr> <th colspan=2> <input type="button",value="add" value="add" onClick="dosum()"> <input type="button",value="mul" value="mul" onClick="domul()"> <input type="button",value="div" value="div" onClick="dodiv()"> <input type="button",value="sub" value="sub" onClick="dosub()"> </th> </tr> </table> </form> </body> </html> Exp: Program: (59) <html> <head> <title>table</title> <script language="javascript"> function si() { var p,r,t,i;
p=frmInt.principal.value; r=frmInt.rate.value; t=frmInt.time.value; i=p*r*t/100; frmInt.Int.value=i; } </script> </head> <body> <form name="frmInt"> <table border=1 align="center"> <tr> <th>Enter principal amount</th> <td><input type="textbox" name="principal"></td></tr> <tr> <th>Enter rate</th> <td><input type="textbox" name="rate"></td></tr> <tr> <th>Enter time</th> <td><input type="textbox" name="time"></td></tr> <tr> <th>Interest</th> <td><input type="textbox" name="Int"></td> </tr> <th colspan=2> <input type="button" value="interest" onClick="si()"> </th> </tr> </table> </form> </body> </html> Program: (60)
<html> <head> <title>rekha aggarwal</title> <script language="Javascript"> function clickHandler(e) { alert(e.screenX+","+e.screenY); } </script> </head> <body> <h1>Using the event object</h1> <a href="#" onClick="clickHandler(event)">click this link.</a> </body> </html>
Program: (61) <html><head> <title>Using properties</title></head> <body> <h1>Using Properties</h1> <form> <p><input type="button" name="red" value="Red" onClick='document.bgColor="red"'> </p> <p><input type="button" name="green" value="Green" onClick='document.bgColor="green"'> </p><p><input type="button" name="blue" value="Blue" onClick='document.bgColor="blue"'></p> <p> <input type="button" name="gray" value="Gray" onClick='document.bgColor="gray"'> </p> </form></body></html> Program: (62) <html> <head> <title>Changing Background Color using SetInterval Method</title> <script language="javascript"><br> colors=new Array("red", "Green","Blue","Orange") colorIndex=0; function changecolor() { document.bgColor=colors[colorIndex] colorIndex=(colorIndex+1)%colors.length; } function startchangecolor() { setInterval("changecolor()",3000) } window.onLoad=startchangecolor(); </script> </head> <body> <script language="javascript"> alert("Hello"); </script><br> <h2>Changing Background Color Using SetInterval Method</h2> </body> </html> Program: (63) <html> <head> <title> aa</title> <script language="javascript"> function setTimer() { timer=setTimeout("alert('Too slow!')",10000) } function clearTimer() {
clearTimeout(timer) alert("congratulation!"); } </script> </head> <body> <script language="javascript"> setTimer() </script> <form><br> <input type="button" value="click here within ten second." onClick="clearTimer()"> </form> </body> </html> Program: (64)
<html> <head> <title>setInterval()method</title> <script language="javascript"> var ref; colors=new Array("red", "green", "blue","yellow") Index=0; window.defaultStatus="Time Interval" function func() { len=colors.length; if(Index>len) { Index=0 } document.bgColor=colors[Index] Index++ } function startbk() { ref=setInterval("func()",1000) } function stopbk() { clearInterval(ref) } </script> </head> <body> <center> <form><br> <input type="button" name="but1" value="start Color Change" onClick="startbk()"> <input type="button" name="but2" value="stop Color Change" onClick="stopbk()"> </center> </body> </html>
Program: (65)
<html> <head> <title> window object</title> <script language="Javascript"> var var1; window.defaultStatus="Program using window object" function func1() { var1=open("java2.html","win1","menubar=1,toolbar=0") window.status="window1.html is now opened" } function func2() { if(var1.closed) { alert("window Alert Closed") window.status="window1.html is closed" } else { var1.close() window.status="window1.html is closed" } } function func3() { if(!var1.closed) { alert("Child Window Open-Cannot Close") } else { if(confirm("close Window?")) { window.close() } } } function func4() { if(!var1.closed) { var1.document.bgColor="#ff0000" var1.focus() } else { alert("window1.html Window Not Open") }
} function func5() { if(!var1.closed) { var1.document.bgColor="#0000ff" var1.focus() } else { alert("window1.html Window Not Open") } } function func6() { if(!var1.closed) { var1.document.bgColor="#00ff00" var1.focus() } else { alert("window1.html Window Not Open") } } </script> </head> <body> <center> <br><br><b> <input type="button" name="but1" value="OPen Window1" onClick="func1()"> <input type="button" name="but2" value="close Window1" onClick="func2()"> <input type="button" name="but3" value="close this Window" onClick="func3()"> <br><br> <hr align="center" width="50%"> <p align="center">Click The Button To Change Background Color of new Window</p> <input type="button" name="but4" value="Red" onClick="func4()"> <input type="button" name="but5" value="Blue" onClick="func5()"> <input type="button" name="but6" value="Green" onClick="func6()"> </center> </body> </html> Program: (66)
<html> <head> <title> open and close the window</title> <script language="Javascript"> function directions() { open("window2.html") } </script> </head> <body> <h1>new year</h1> <form>
<Input type="button" value="click for directions" onClick="directions()"> </form> </body> </html> Program: (67)
<html> <head> <title> directions</title></head> <body onLoad="defaultstatus='it is a big star"> <h1>closing the window</h1> <form> <input type="button" value="close windoe" onClick="window.close()"> </form> <script language="Javascript"> alert("hellow! India"); </script> </body> </html> Program: (70)
<html> <head> <title>bb</title> <script language="javascript"> window.defaultStatus="working with TimeOut" function disp() { document.write("<br><br><br>") document.write("<center>") document.write("<img src='imAGE\clouds4.jpg'>") document.write("</center>") } function startbk() { ref=setTimeout("disp()",5000) } </script> </head> <body> </center> <p>An image will be displayed after you click this button</p> <br><br><form> <input type="button" name="b1" value="Start Count Down" onClick="startbk()"> </form> </center> </body> </html> Program: (71)
<html> <head> <title> MouseOver event</title> <script language="Javascript"> function fun(s) { var str="" str="you have placed mouse cursor on the alphabet-" str+=s; alert(str); } function fun1() { alert("place mouse over any alphabet") } </script> </head> <body> <center> <a href=" " onClick='return false' onMouseOver='fun("a")' onMouseOut='fun1()'>a</a> <a href=" " onClick='return false' onMouseOver='fun("b")' onMouseOut='fun1()'>b</a> <a href=" " onClick='return false' onMouseOver='fun("c")' onMouseOut='fun1()'>c</a> <a href=" " onClick='return false' onMouseOver='fun("d")' onMouseOut='fun1()'>d</a> <a href=" " onClick='return false' onMouseOver='fun("e")' onMouseOut='fun1()'>e</a> <a href=" " onClick='return false' onMouseOver='fun("f")' onMouseOut='fun1()'>f</a> <a href=" " onClick='return false' onMouseOver='fun("g")' onMouseOut='fun1()'>g</a> <a href=" " onClick='return false' onMouseOver='fun("h")' onMouseOut='fun1()'>h</a> <a href=" " onClick='return false' onMouseOver='fun("i")' onMouseOut='fun1()'>i</a> <a href=" " onClick='return false' onMouseOver='fun("j")' onMouseOut='fun1()'>j</a> <a href=" " onClick='return false' onMouseOver='fun("k")' onMouseOut='fun1()'>k</a> <a href=" " onClick='return false' onMouseOver='fun("l")' onMouseOut='fun1()'>l</a> <a href=" " onClick='return false' onMouseOver='fun("m")' onMouseOut='fun1()'>m</a> <a href=" " onClick='return false' onMouseOver='fun("n")' onMouseOut='fun1()'>n</a> <a href=" " onClick='return false' onMouseOver='fun("o")' onMouseOut='fun1()'>o</a> <a href=" " onClick='return false' onMouseOver='fun("p")' onMouseOut='fun1()'>p</a> <a href=" " onClick='return false' onMouseOver='fun("q")' onMouseOut='fun1()'>q</a> <a href=" " onClick='return false' onMouseOver='fun("r")' onMouseOut='fun1()'>r</a> <a href=" " onClick='return false' onMouseOver='fun("s")' onMouseOut='fun1()'>s</a> <a href=" " onClick='return false' onMouseOver='fun("t")' onMouseOut='fun1()'>t</a> <a href=" " onClick='return false' onMouseOver='fun("u")' onMouseOut='fun1()'>u</a> <a href=" " onClick='return false' onMouseOver='fun("v")' onMouseOut='fun1()'>v</a> <a href=" " onClick='return false' onMouseOver='fun("w")' onMouseOut='fun1()'>w</a> <a href=" " onClick='return false' onMouseOver='fun("x")' onMouseOut='fun1()'>x</a> <a href=" " onClick='return false' onMouseOver='fun("y")' onMouseOut='fun1()'>y</a> <a href=" " onClick='return false' onMouseOver='fun("z")' onMouseOut='fun1()'>z</a> </script> </body> </html> Program: (72)
<html> <head> <title>using setInterval</title> <script language="Javascript"> colors=new Array("red", "orange", "blue", "purple") colorIndex=0; function changeColor() {
document.bgColor=colors[colorIndex] colorIndex=(colorIndex+1)%colors.length; } function startColorChange() { setInterval("changeColor()",3000) } window.onLoad=startColorChange(); </script> </head> <body bgcolor="white"> <h1>Changing Background</h1> </body> </html> Program: (73)
<html> <head> <title>Using Date Object</title> </head><body> <script language="javascript"> var mydate=new Date(); document.write("Todays's Date:"); document.write(mydate.getDate()+"/"+mydate.getMonth()+"/"+mydate.getYear()); document.write("<br>") document.write("Syntax Time: "); document.write(mydate.getHours()+":"+mydate.getMinutes()+":"+mydate.getSeconds()); </script> </body> </html> Program: (74)
<html> <head> <title> Greating according to time of the day</title> <script language="javascript"> function greeting() { theDate=new Date(); theHour=theDate.getHours(); if(theHour<=6) { alert("Early Good Morning"); } if((theHour>6)&&(theHour<=12)) { alert("Good Morning") } if((theHour>12)&&(theHour<=17))
{ alert("Good Afternoon"); } if((theHour>17)&&(theHour<21)) { alert("Good Evening") } if(theHour>21) { alert("Good Night"); } } </script> </head> <body onLoad="greeting()"> <center> <h1>Greeting according to time of the day</h1> </center> <b><center>Welcome to my home page!</b></center> </body> </html> Program: (75)
<html> <head><title>Blinking effect</title> <script language="javascript"> colours=new Array("black","white") index=0 document.write("<h1 align='center'>Welcome to my home page!</h1>"); ref=setInterval("func()",500) function func() { if(index>1) { index=0 document.fgColor=colours[index] index++ } else { document.fgColor=colours[index] index++ } } </script> </head> <body bgcolor="red"> </body> </html> Program: (76)
<html> <head> <title>function with return statement</title> <script language="javascript"> function cube(num) { return(num*num*num) } </script> </head> <body> <script language="javascript"> x=cube(2) document.write("the cube of 2 is "+"\t\t"+x+"\n") document.write("<hr>") x=cube(3) document.write("the cube of 3 is "+"\t\t"+x+"\n") document.write("<hr>") x=cube(4) document.write("the cube of 4 is "+"\t\t"+x+"\n") document.write("<hr>") x=cube(5) document.write("the cube of 5 is "+"\t\t"+x+"\n") document.write("<hr>") x=cube(6) document.write("the cube of 6 is "+"\t\t"+x+"\n") document.write("<hr>") x=cube(7) document.write("the cube of 7 is "+"\t\t"+x+"\n") document.write("<hr>") x=cube(8) document.write("the cube of 8 is "+"\t\t\t\t"+x+"\n") document.write("<hr>") x=cube(9) document.write("the cube of 9 is "+"\t\t"+x+"\n") document.write("<hr>") x=cube(10) document.write("the cube of 10 is "+"\t\t"+x+"\n") document.write("<hr>") </script> </body> </html> Array: An array is a data structure used to store a set of value .Each element of an array can be referenced using an index.In other words,an array is a collection of multiple variables with the same
data type. Declaration of array: arrayName=new Array(arrayLength) arrayName=new Array() Array-Length properties: Scince javascript is object-based language,array have been implemented as objects.The method length of an array object returns the size of array. Exp: myarray.length Program: (77) <html> <head> <title>Array</title> </head> <body> <script language="javascript"> var s,i; s=new Array(5) for(i=0;i<5; i++); { s[i]=prompt("Enter the elements"); document.write(s[i]); } document.write("<h1>"+"Length of array is"+"</h1>"+s.length); </script> </body> </html> Program: (78) <html> <head> <title>Array</title> </head> <body> <script language=javascript> var sum=0; s=new Array(5) document.write("<h1>"+"Element of array"+"</h1>"+"<br>"); for(i=0;i<5; i++) { s[i]=parseInt(prompt("Enter array elements"); document.write("<h1>"+s[i]+"</h1>"+"<br>"); sum=sum+s[i]; } document.write("<h1>"+"sum of array elements"+"</h1>"+"<br>"); </script> </body> </html> Program: (79) In this example we will show how to use the length property to both return and set the length of an array:
<html> <head> <title> Array</title> </head> <body> <script type="text/javascript"> var arr = new Array(3); arr[0] = "John"; arr[1] = "Andy"; arr[2] = "Wendy"; document.write("Original length: " + arr.length);
document.write("<br />"); arr.length=5; document.write("New length: " + arr.length); </script> </body> </html> Program: (80) Here we create two arrays and show them as one using concat(): {Jani,Tove,Hege,John,Andy,Wendy} <html> <head> <title> Array</title> </head> <body> <script type="text/javascript"> var arr = new Array(3); arr[0] = "Jani"; arr[1] = "Tove"; arr[2] = "Hege"; var arr2 = new Array(3); arr2[0] = "John"; arr2[1] = "Andy"; arr2[2] = "Wendy"; document.write(arr.concat(arr2)); </script> </body> </html> Program: (81) In this example we will create an array, and then reverse the order of it: output Jani,Hege,Stale Stale,Hege,Jani <html> <head> <title> Array</title> </head> <script type="text/javascript"> var arr = new Array(3); arr[0] = "Jani"; arr[1] = "Hege"; arr[2] = "Stale"; document.write(arr + "<br />"); document.write(arr.reverse()); </script> </head> </html> Program: (82) In this example we will create an array containing numbers and sort it: 10,5,40,25,1000,1 1,5,10,25,40,1000 <html> <head> <title> Array</title> <script type="text/javascript"> function sortNumber(a,b) { return a - b; } var arr = new Array(6); arr[0] = "10"; arr[1] = "5";
arr[2] = "40"; arr[3] = "25"; arr[4] = "1000"; arr[5] = "1"; document.write(arr + "<br />"); document.write(arr.sort(sortNumber)); </script> </head> </html> Program: (83)
<html> <head> <script type="text/javascript"> function check() { document.getElementById("myCheck").checked=true; } function uncheck() { document.getElementById("myCheck").checked=false; } </script> </head> <body> <form> <input type="checkbox" id="myCheck" /> <input type="button" onclick="check()" value="Check Checkbox" /> <input type="button" onclick="uncheck()" value="Uncheck Checkbox" /> </form> </body></html> Program: (84)
<html> <head> <title>Handling Selection List Events</title> <script language="javascript"> function updateOrder() { var orderString="" var n=document.diner.entries.length for(i=0;i<n;++i) { if(document.diner.entries.options[i].selected) { orderString+=document.diner.entries.options[i].value+"\n" } } document.diner.summary.value=orderString } </script> </head> <body> <form name="diner"> <h2 align="center">The Web Diner</h2> <P><b>Place your order:</b></p> <select name="entries" size="4" multiple="multiple" onChange="updateOrder()"> <option value="Hamburger">Hamburger</option> <option value="Hot Dog">Hot Dog</option> <option value="Chicken Sandwich">Chicken Sandwich</option> <option value="French Fries">French Fries</option> <option value="Onion Rings">Onion Rings</option> <option value="Soda">Soda</option> <option value="Milk Shake">Milk Shake</option> <option value="Coffee">Coffee</option> </select> <p><b>You Ordered:</b></p> <p> <textarea name="summary"rows="4" cols="20"></textarea> </p> <p> <input type="submit" name="order" value="Let me have it!"</p> </form> </body> </html> Program: (85) <html> <head> <title> join object</title> </head> <body> <script language="javascript"> friends=new Array(5); friends[0]="Aa" friends[1]="bb" friends[2]="cc" friends[3]="dd" friends[4]="ee" document.write("<h1>"+"Array Elements"+"</h1>"+"<br>") document.write(friends[0]+"<br>") document.write(friends[1]+"<br>") document.write(friends[2]+"<br>") document.write(friends[3]+"<br>")
document.write(friends[4]+"<br>") document.write("<h1>"+"Using Join Object"+"</h1>"+"<br>") join_crit=friends.join(); document.write(join_crit) </script> </body></html> Program: (86)
<html><head> <title>Creating Using User Defined Function</title> <script language="javascript"> var name=" "; function hello() { name=prompt("Enter Your Nmae:","Name") alert(Greeting+name+,Welcome to my page!) } Function goodbye() { alert('Goodbye'+name+',Sorry to see you go!') } </script> </head> <body onLoad="hello()" onUnload="goodbye()"> <img src="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water lilies.jpg" width="100"> </body> </html> Program: (87) <html> <head> <title> The Image Object</title> <script language="javascript"> img1=new Image() img2=new Image() img1.src="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water lilies.jpg" img2.src="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Winter.jpg" </script> </head> <body> <a href="something" onClick="returns false" onMouseOver="document.images[0].src=img2.src" onMouseOut="document.images[0].src=img1.src"> <img src="snow3.jpg" border="1"></a>
</body></html>
<html> <head> <title> Array object</title> </head> <body> <br><br> <h1 align="center">THe Array Object</h1> <hr> <script language="javascript"> myarray=new Array(1,4,7,2,5,9,6,0) document.write("<h1>"+"myarray.toString()"+"</h1>") document.write(myarray.toString()+"<br>") document.write("<h1>"+"myarray.join('-')"+"</h1>") document.write(myarray.join('-')+"<br>") document.write("<h1>"+"myarray.reverse()"+"</h1>") document.write(myarray.reverse()+"<br>") document.write("<h1>"+"myarray.sort()"+"</h1>") document.write(myarray.sort()+"<br>") </script> </body> </html> <html> <head> <title> String object</title> </head> <body>
<h1 align="center">The String Object</h1><hr> <script language="javascript"> mystring="Dewsoft Education Academy" document.write("<h1>"+"mystring.toLowerCase()"+"</h1>") document.write(mystring.toLowerCase()+"<br>") document.write("<h1>"+"mystring.toUpperCase()"+"</h1>") document.write(mystring.toUpperCase()+"<br>") document.write("<h1>"+"mystring.substring(7)"+"</h1>") document.write(mystring.substring(7)+"<br>") document.write("<h1>"+"mystring.substring(2,5)"+"</h1>") document.write(mystring.substring(2,5)+"<br>") document.write("<h1>"+"split('Education')"+"</h1>") document.write(mystring.split('Education')+"<br>") document.write("<h1>"+"mystring.charAt(5)"+"</h1>") document.write(mystring.charAt(5)+"<br>") document.write("<h1>"+"mystring.charCodeAt(15)"+"</h1>") document.write(mystring.charCodeAt(15)+"<br>") document.write("<h1>"+"mystring.indexOf('Academy')"+"</h1>") document.write(mystring.indexOf('Academy')+"<br>") </script> </body> </html>

Java Script Language

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Java Script Language

Caricato da

Copyright:

Formati disponibili

Java Script Language Java script Java script is an object oriented language that allows creation of interactive web

Potrebbero piacerti anche