1 / 69

J a v a S cript

J a v a S cript. popo. J a v a S cript. JavaScript is a programming language used to make web pages interactive . JavaScript is scripting language used for client side scripting .  JavaScript developed by Netscape in 1995 Case sensitive. popo. JavaScript. Benefits of JavaScript

hanley
Download Presentation

J a v a S cript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JavaScript popo

  2. JavaScript • JavaScript is a programming language used to make web pages interactive. • JavaScript is scripting language used for client side scripting. •  JavaScript developed by Netscape in 1995 • Case sensitive popo

  3. JavaScript • Benefits of JavaScript • JavaScript gives HTML designers a programming tool • JavaScript can react to events Alert Messages • JavaScript can be used to validate data • JavaScript can be used to input Validation • Disadvantages of JavaScript • Depends on the browser popo

  4. JavaScript • Java and JavaScript • Java and JavaScript are two completely different • Java (developed by Sun Microsystems) is a powerful and much more complex programming. • JavaScript is scripting language used for client side scripting.  • JavaScript developed by Netscape in 1995. popo

  5. JavaScript • Embedding JavaScript in HTML • <script> tag is used to insert a JavaScript into an HTML page • <html> • <body> • <script language="javascript"> • document.write ("Hello"); • </script> • </body> • </html> popo

  6. JavaScript • External file • JavaScript can be put in a separate.jsfile <script src="myJavaScriptFile.js"></script> An external .jsfile lets you use the same JavaScript on multiple HTML pages popo

  7. JavaScript • <html> • <body> • <script language="javascript"> • document.write ("<p><b><i>Welcome to popo! Hello"); • </script> • </body> • </html> • document.write()- method used to print text popo

  8. JavaScript • document.writeln() and \n • - used to print in new line(only valid when <PRE> tag) •  (pre format) • <html> • <body> • <pre> • <script language="javascript"> • document.write ("<p><b><i>Welcome to popo! \nHello"); • document.writeln ("and peepe"); • </script> • </body> • </html> popo

  9. JavaScript • lastModified • include the last update date on your page by using the following code: • <script language="JavaScript"> • document.write("This page Last update:" + document.lastModified); • </script> popo

  10. JavaScript • bgColor and fgColor • <script> • document.bgColor="black“; • document.fgColor="#336699“; • </script> popo

  11. JavaScript • Data Types • Basic types of data in JavaScript are • strings, numbers, boolean and null. • String- group of characters enclosed in double quote • Number- integers and floating point values • Boolean- true or false • Null- represents nothing and has a special value, indicated by null popo

  12. JavaScript • Variables • Variables are storage locations used to store date • Variable can be declared as • var variable name= value; • Eg • Var example=“this is a string”; • <html> • <body> • <pre> • <script language="javascript"> • var name="popo"; • document.writeln ("My name " +name); • </script> • </body> • </html>

  13. JavaScript • Operators • JavaScript uses “operators” allows to make mathematical calculations • Assignment operators =, +=, -=, *=,/= • Arithmetic operators +, -, *, /, % • Logical operators &&, || , != • Comp`arison operators <, <=, >, >=, ==, != • Conditional operator (exp1)?(exp2) : (exp3); popo

  14. JavaScript • <html> • <body> • <pre> • <script language="javascript"> • var a=10; • var b=20; • varc=a+b; • document.writeln ("sum of "+a+" + "+b+" = "+ c); • </script> • </body> • </html> popo

  15. JavaScript • <html> • <body> • <pre> • <script language="javascript"> • var a=10; • var b=20; • var c=a+b; • if(c%2==0){document.write("even");} • else{document.write("odd");} • </script> • </body> • </html> popo

  16. JavaScript • loop statements:while (condition) statement; do statement while (condition); for (initialization; condition; increment) statement; • <html> • <body> • <pre> • <script language="javascript"> • vari; • for(i=1;i<=40;i++) • document.writeln(i); • </script> • </body> • </html> popo

  17. JavaScript • The switch statement: switch (expression) • { case label :statement; break; case label :statement; break; ... default : statement; } popo

  18. JavaScript • Alert() method • Used to alert the user on some action, with some information • Syn • alert(“message”); • <html> • <body> • <pre> • <script language="javascript"> • alert("I am popo"); • </script> • </body> • </html> popo

  19. JavaScript • Prompt() Method • Prompt method displays a small dialog box with a provision for text entry along with 2 buttons • Ok and Cancel • The text entered in the box can be stored in a variable • <html> • <body> • <pre> • <script language="javascript"> • var age= prompt("enter age"); • if(age>=20)alert("I am happy"); • else alert("I am popo"); • </script> • </body> • </html> • Can assign value var k=prompt("dfgsdf",“value"); popo

  20. JavaScript • Confirm() method • Enables the user to confirm • <html> • <body> • <pre> • <script language="javascript"> • var age=prompt("enter age"); • if( confirm("is it greater than 20") )alert("I am happy"); • else alert("I am popo"); • </script> • </body> • </html> popo

  21. JavaScript • parseInt()- convert string to integer • parseFloat()-convert string to float • var a= parseInt(b)+parseInt( c); • <html> • <body> • <pre> • <script language="javascript"> • var a="10"; • var b="20"; • var c=a+b; • alert(c); • var d=parseInt(a)+parseInt(b); • alert(d); • </script> • </body> • </html> popo

  22. JavaScript • eval() method • evaluate a numeric expression given as a string into numerical value • Eg • Eval(“10*10”); 100 popo

  23. JavaScript • Date function • Date manipulations can be performed by the method of the Date object • Create an instance of Date object • Using different methods of Date object user can carry out date manipulations • Some methods are

  24. JavaScript • Date methods popo

  25. JavaScript • <html> • <body> • <pre> • <script language="javascript"> • var d=new Date(); • document.write(d.getDate()+"/"+d.getMonth()+1 +"/"+d.getYear()); • </script> • </body> • </html> • Output -10/01/2013 popo

  26. JavaScript • Functions • Function can be defined • function function name(arguments) • { • Function body; • } • Eg • function fact(num) • { • var fact=1; • for(i=1;i<=num;i++) • fact=fact*i; • return fact; • } popo

  27. JavaScript • <HEAD> • <SCRIPT LANGUAGE="JavaScript"> • function square(number) • {alert( number * number);} • </SCRIPT> • </HEAD> • <BODY> • <SCRIPT> • document.write("The function returned ", square(5) ); • </SCRIPT> • </BODY> popo

  28. JavaScript • <HEAD> • <SCRIPT LANGUAGE="JavaScript"> • function square(number) • {return number * number;} • </SCRIPT> • </HEAD> • <BODY> • <SCRIPT> • document.write("The function returned ", square(5)); • </SCRIPT> • </BODY> • The function returned 25. popo

  29. JavaScript • Event handler • Event handlers can be considered as triggers that execute JavaScript when something happens, such as click or move your mouse over a link, submit a form etc. • Events are signals generated when specific action occur.Script can be written to react to these events. popo

  30. JavaScript popo

  31. JavaScript • onClick • onClick handlers execute only when users click on buttons, links, etc. • <script> • function ss() • { • alert("Thank you popo!") • } • </script> • <form> • <input type="button" value="Click here" onClick="ss()"> • </form> • The function ss() is invoked when the user clicks the button. • Note: Event handlers are not added inside the <script> tags popo

  32. JavaScript • onDblclick • Occurs when a mouse double-click • <script> • function ss() • { • alert("Thank you popo!") • } • </script> • <form> • <input type="text" value="10" onDblclick=" ss();"> • </form> popo

  33. JavaScript • onMousedown • Occurs when mouse button is pressed • <script> • function ss() • { • alert("Thank you popo!") • } • </script> • <form> • <input type="text" value="10" onMousedown=" ss();"> • </form> popo

  34. JavaScript • onMousemove • Occurs when mouse pointer moves • <script> • function ss() • { • alert("Thank you popo!") • } • </script> • <form> • <input type="text" value="10" onMousemove=" ss();"> • </form> popo

  35. JavaScript • onMouseout • Occurs when mouse pointer moves out of an element • <script> • function ss() • { • alert("Thank you popo!") • } • </script> • <form> • <table border=2 width=100 heigth=100 > • <tr><td bgcolor=brown onMouseout=" ss();"> • <font color=red >popo • </form> popo

  36. JavaScript • onkeypress • Occurs key is pressed and released • <script> • function ss() • { • alert("Thank you popo!") • } • </script> • <form> • <input type="text" value="10" onkeypress=" ss();"> • </form> popo

  37. JavaScript • onsubmit • Occurs when a form is submitted • <script> • function ss() • { • alert("Thank you popo!") • } • </script> • <form onsubmit=" ss();"> • <input type="submit" value="dfsdfg" onSubmit=" ss();"> • </form> popo

  38. JavaScript • onload • Occurs when a page is loaded • <script> • function ss() • { • alert("popo"); • } • </script> • <body onLoad="ss()"> popo

  39. JavaScript • onmouseover • Occurs when mouse pointer moves over an element • <script> • function ss() • { • document.write("popo"); • } • </script> • <a href="#" onMouseover="ss();">Over Here!</a> popo

  40. JavaScript • unload • Occurs when user leaves a page • <body onUnload="alert('Thank you for visiting us. See you soon')"> popo

  41. JavaScript • Most of the events handlers are associated with the following object popo

  42. JavaScript • Addition of 2 nos (each Nos in 2 text, result in result text, with a button) • <script> • function calcu(f) • { • f.ans.value=parseInt(f.first.value)+parseInt(f.sec.value); • } • </script> • <form name=f> • Enter first no :<input type=text name=first> • <br> • Enter sec no:<input type=text name=sec> • <input type=button value=calculate onClick="calcu(f);"> • <br><br><br> • <input type=text name=ans> • </form> popo

  43. JavaScript • </script> • <form name=f> • Enter first no :<input type=text name=first> • <br> • Enter sec no:<input type=text name=sec><br> • <input type=button value=Add onClick="add(f);"> • <input type=button value=Sub onClick="sub(f);"> • <input type=button value=MultonClick="mult(f);"> • <input type=button value=Div onClick="div(f);"> • <br><br><br> • Answer :<input type=text name=ans> • </form> • All arithmetic operation with 4 buttons & 3 text • <script> • function add(f){ • f.ans.value=parseInt(f.first.value)+parseInt(f.sec.value); • } • function sub(f){ • f.ans.value=parseInt(f.first.value)-parseInt(f.sec.value); • } • function mult(f){ • f.ans.value=parseInt(f.first.value)*parseInt(f.sec.value); • } • function div(f){ • f.ans.value=parseInt(f.first.value)/parseInt(f.sec.value); • }

  44. JavaScript • Print First n nos • <script> • function pr(f) • { var n=parseInt(f.no.value); • for(i=1;i<=n;i++) • document.write(i+" &nbsp;&nbsp;"); • } • </script> • <form> • Enter limt no :<input type=text name=no> • <input type=button value=print onClick="pr(this.form);"> • </form> popo

  45. JavaScript

  46. JavaScript • String length • Varstr="Hello world!"document.write(str.length); • ------------------------------------------------------------------------ • <script> • function s(f) • { • st=f.st.value • alert(st.length); • } • </script> • <form name="feedback"> • Email:<input type="text" size="20" name="st" onblur="s(this.form)"> • </form> • </body></html> popo

  47. JavaScript • charAt() function to get character from a location inside a string • varmy_str="Welcome “document.write(my_str.charAt(3) ); • The output of above code is c . concat() join 2 strings • Var var2=" popo"var var3= " pp"varvar4=var1.concat(var2,var3);document.write(var4); popo

  48. JavaScript • indexOf() to get location of a string • varmy_str="popo and pp" • document.write( my_str.indexOf("and") ) ; • Output 5 . • lastIndexOf()This function returns the position of string by checking from end or right side of the string • varmy_str="popo and pp" • document.write( my_str.lastIndexOf("a") ) ; • Output 5 . popo

  49. JavaScript • Search & replace of part of string by replace() method • varmsg="Welcome to popo"; • msg=msg.replace("popo","Ajith"); • document.write(msg); • Output : Welcome to Ajith popo

  50. JavaScript • Substring() • In substr() function we used start point and length of the substring required • my_string= new String("Welcome to popo"); • document.write(my_string.substring(2,5)); • Output : lco popo

More Related