j a v a s cript
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
JavaScript
popo
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
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
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
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
JavaScript• External file• JavaScript can be put in a separate .js
file<script
src="myJavaScriptFile.js"></script>
An external .js file lets you use the same JavaScript on multiple HTML pages
popo
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
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
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
JavaScript• bgColor and fgColor• <script>• document.bgColor="black“;• document.fgColor="#336699“;• </script>
popo
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
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>
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
JavaScript• <html>• <body>• <pre>• <script language="javascript">• var a=10;• var b=20;• var c=a+b;• document.writeln ("sum of "+a+" + "+b+" = "+ c);• </script>• </body>• </html>
popo
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
JavaScript• loop statements:
while (condition) statement; do statement while (condition); for (initialization; condition; increment) statement;
• <html>• <body>• <pre>• <script language="javascript">• var i;• for(i=1;i<=40;i++)• document.writeln(i);• </script>• </body>• </html>
popo
JavaScript• The switch statement:
switch (expression)• {
case label : statement; break; case label : statement; break; ... default : statement; }
popo
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
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
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
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
JavaScript• eval() method• evaluate a numeric expression given as a
string into numerical value• Eg• Eval(“10*10”); 100
popo
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
JavaScript• Date methods
getDate Return day of the month as integer(1-31)
getDay Return day of the week as integer(0-6)
getMonth Return month as integer (0-11)
getSeconds Return seconds as integers (0-59)
getYear Return year as two digit integer
setDate set the day of the month as integer(1-31)
popo
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
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
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
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
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
JavaScriptonclick Occurs when user clicks on link or form elementondblclick Occurs when a mouse double-clickonmousedown Occurs when mouse button is pressedonmousemove Occurs when mouse pointer movesonmouseout Occurs when mouse pointer moves out of an element
onmouseover Occurs when mouse pointer moves over an element
onmouseup Occurs when mouse button is releasedonkeydown Occurs when a key is pressedonkeypress Occurs key is pressed and releasedonchange Occurs when user changes the value in form fieldonreset Occurs when a form is resetonsubmit Occurs when a form is submitted onfocus Occurs when user clicks inside the fieldonblur Occurs when user clicks outside a fieldonload Occurs when a page is loadedunload Occurs when user leaves a page
popo
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
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
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
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
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
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
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
JavaScript• onload• Occurs when a page is loaded• <script>• function ss()• {• alert("popo");• }• </script>• <body onLoad="ss()">
popo
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
JavaScript• unload• Occurs when user leaves a page• <body onUnload="alert('Thank you for
visiting us. See you soon')">
popo
JavaScript• Most of the events handlers are associated with
the following objectObject Event Handlers
Selectionlist onBlur, onChange, onFocusText element onBlur, onChange, onFocus, onSelectTextarea element onBlur, onChange, onFocus, onSelectButton element onClickCheckbox onClickRadio button onClickHyper link onClick, onMouseoverSubmit button onClickReset button onClickDocument onLoad, onUnloadWindow onLoad, onUnloadForm onSubmit
popo
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
JavaScript• 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);• }
• </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=Mult
onClick="mult(f);">• <input type=button value=Div
onClick="div(f);">• <br><br><br>• Answer :<input type=text name=ans>• </form>
JavaScript• Print First n nos• <script>• function pr(f)• { var n=parseInt(f.no.value);• for(i=1;i<=n;i++)• document.write(i+" ");• }• </script>• <form>• Enter limt no :<input type=text name=no>• <input type=button value=print onClick="pr(this.form);">
• </form>
popo
JavaScript
JavaScript• String length• Var str="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
JavaScript• charAt() function to get character from a location
inside a string• var my_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"var var4=var1.concat(var2,var3);document.write(var4);
popo
JavaScript• indexOf() to get location of a string• var my_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
• var my_str="popo and pp"• document.write( my_str.lastIndexOf("a") ) ;• Output 5 .
popo
JavaScript• Search & replace of part of string by
replace() method• var msg="Welcome to popo";• msg=msg.replace("popo","Ajith");• document.write(msg);• Output : Welcome to Ajith
popo
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
JavaScript
JavaScript• String reversal using charat and length property• <script type="text/javascript">• var my_str="nattop"• var i=my_str.length;• i=i-1;• for (var x = i; x >=0; x--)• {• document.write(my_str.charAt(x));• }• </script>
popo
JavaScript• String Search• WE can search for presence of a string inside a main string in
client side JavaScript by using string.search function. • If the search string is found inside the main string then it will
return the position of the location of the string. • If the string is not found inside the main string then it returns -
1.• <script type="text/javascript">• var my_str="Welcome to popo"• var str="popo";• document.write (my_str.search(str));• </script>• Output 11
popo
JavaScript• Lower case text to Uppercase • var a1 = str.toUpperCase(); • Uppercase letters to Lower case• var a2 = str.toLowerCase(); • Checking number using isNaN function• isNaN() to check any data is number or string• var my_string="This is a string";
if(isNaN(my_string)){document.write ("this is not a number ");}else{document.write ("this is a number ");}
popo
JavaScript• Number to string• To convert a number to a string, do:• var c = (16 * 24)/49 + 12; • d = c.toString();
JavaScript• Check validation• <script>• function validate()• {• if(document.login.userName.value=="")• { alert ("Please enter User Name") }• if(document.login.password.value=="")• { alert ("Please enter Password") }• }• </script>• <form name="login" onSubmit="return validate()">• <input type="text" size="20" name="userName">• <input type="text" size="20" name="password">• <input type="submit" name="submit" value="Submit">• </form>
popo
JavaScript
JavaScript II• Array• Different ways to declare Array• 1) var colors = ["red", "green", "blue"];• colors[0] is "red"
• 2) new Array() - to create an empty array:– var colors = new Array();– Add elements to the array later:
colors[0] = "red"; – colors[1]="green"; colors[2] = "blue";
• 3) new Array(n) to create an array of that size– var colors = new Array(3);
JavaScript II• Array example• <html>• <body>• <pre>• <script language="javascript">• var colors = ["red", "green", "blue"];• for(i=0;i<3;i++)• document.write(colors[i]+" ");• </script>• </body>• </html>
JavaScript II• Array Example• <html>• <body>• <pre>• <script language="javascript">• var colors = new Array();• for(i=0;i<10;i++)• {• colors[i]="color"+i;• document.write(colors[i]+" ");• }• </script>• </body>• </html>
JavaScript
JavaScript• File popo.js Contents:• function popup() {• alert("Hello popo")• }• --------------------------------------------------------------------------------------• HTML & JavaScript Code:• <html>• <head>• <script src=“popo.js">• </script>• </head>• <body>• <input type="button" onclick="popup()" value="Click Me!">• </body>• </html>
JavaScript• Print Index of select• <html>• <script language="javascript">• function check(n){• var t=parseInt(n)+1;• alert("index is "+ t);• }• </script>• <body>• <select name=a onChange="check(selectedIndex )">• <option value=one >one</option>• <option value=one >two</option>• <option value=one >three</option>• <option value=one >four</option>• </select>• </body>• </html>
JavaScript
JavaScript• javaScript Print Script - window.print()• The JavaScript print function
window.print() will print the current webpage when executed.
• <form>• <input type="button" value="Print This
Page" onClick="window.print()" />• </form>
JavaScript• JavaScript Redirect• <html>• <script type="text/javascript">• function delayer(){• window.location = "http://www.poposir.orgfree.com"• }• </script>• <body onLoad="setTimeout('delayer()', 5000)">• <h2>This page is waiting for redirect location , poposir.orgfree.com"• </body>• </html>
• The delayer() function to be used after 5 seconds or 5000 milliseconds , so we pass the setTimeout() two arguments.
• 'delayer()' - The function we want setTimeout() to execute after the specified delay.• 5000 - the number of millisecods to wait before executing our function. • 1000 miliseconds = 1 second.
JavaScript• document.getElementById()• To quickly access the value of an HTML element. • This small script below will check to see if there is any text in the text field "myText". • The argument that getElementById requires is the id of the HTML element you wish to
utilize.• <script type="text/javascript">• function notEmpty(){• var myTextField = document.getElementById('myText');• if(myTextField.value != "")• alert("You entered: " + myTextField.value)• else• alert("Would you please enter some text?")• }• </script>• <input type='text' id='myText' />• <input type='button' onclick='notEmpty()' value='Form Checker' />
JavaScript• Cuttent Time AM/ PM• <h4>It is now • <script type="text/javascript">• var currentTime = new Date();• var hours = currentTime.getHours();• var minutes = currentTime.getMinutes();• if (minutes < 10){minutes = "0" + minutes;}• document.write(hours + ":" + minutes + " ");• if(hours > 11){document.write("PM");}• else {document.write("AM");}• </script>• </h4>
JavaScript