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

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

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.

JavaScript Embedding JavaScript in HTML tag is used to insert a JavaScript into an HTML page document.write ("Hello");

JavaScript External file JavaScript can be put in a separate.js file An external.js file lets you use the same JavaScript on multiple HTML pages

JavaScript document.write (" Welcome to popo! Hello"); document.write()- method used to print text

JavaScript document.writeln() and \n - used to print in new line(only valid when tag)  (pre format) document.write (" Welcome to popo! \nHello"); document.writeln ("and peepe");

JavaScript lastModified include the last update date on your page by using the following code: document.write("This page Last update:" + document.lastModified);

JavaScript bgColor and fgColor document.bgColor="black“; document.fgColor="#336699“;

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

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”; var name="popo"; document.writeln ("My name " +name);

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

JavaScript var a=10; var b=20; var c=a+b; document.writeln ("sum of "+a+" + "+b+" = "+ c);

JavaScript var a=10; var b=20; var c=a+b; if(c%2==0){document.write("even");} else{document.write("odd");}

JavaScript loop statements: while ( condition ) statement ; do statement while ( condition ); for ( initialization ; condition ; increment ) statement ; var i; for(i=1;i<=40;i++) document.writeln(i);

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

JavaScript Alert() method Used to alert the user on some action, with some information Syn alert(“message”); alert("I am 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 var age= prompt("enter age"); if(age>=20)alert("I am happy"); else alert("I am popo"); Can assign value var k=prompt("dfgsdf",“value");

JavaScript Confirm() method Enables the user to confirm var age=prompt("enter age"); if( confirm("is it greater than 20") )alert("I am happy"); else alert("I am popo");

JavaScript parseInt()- convert string to integer parseFloat()-convert string to float var a= parseInt(b)+parseInt( c); var a="10"; var b="20"; var c=a+b; alert(c); var d=parseInt(a)+parseInt(b); alert(d);

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

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 getDateReturn day of the month as integer(1-31) getDayReturn day of the week as integer(0-6) getMonthReturn month as integer (0-11) getSecondsReturn seconds as integers (0-59) getYearReturn year as two digit integer setDateset the day of the month as integer(1-31)

JavaScript var d=new Date(); document.write(d.getDate()+"/"+d.getMonth()+1 +"/"+d.getYear()); Output -10/01/2013

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

JavaScript function square(number) {alert( number * number);} document.write("The function returned ", square(5) );

JavaScript function square(number) {return number * number;} document.write("The function returned ", square(5)); The function returned 25.

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.

JavaScript onclick Occurs when user clicks on link or form element ondblclick Occurs when a mouse double-click onmousedown Occurs when mouse button is pressed onmousemove Occurs when mouse pointer moves onmouseout Occurs when mouse pointer moves out of an element onmouseover Occurs when mouse pointer moves over an element onmouseup Occurs when mouse button is released onkeydown Occurs when a key is pressed onkeypress Occurs key is pressed and released onchange Occurs when user changes the value in form field onreset Occurs when a form is reset onsubmit Occurs when a form is submitted onfocus Occurs when user clicks inside the field onblur Occurs when user clicks outside a field onload Occurs when a page is loaded unload Occurs when user leaves a page

JavaScript onClick onClick handlers execute only when users click on buttons, links, etc. function ss() { alert("Thank you popo!") } The function ss() is invoked when the user clicks the button. Note: Event handlers are not added inside the tags

JavaScript onDblclick Occurs when a mouse double-click function ss() { alert("Thank you popo!") }

JavaScript onMousedown Occurs when mouse button is pressed function ss() { alert("Thank you popo!") }

JavaScript onMousemove Occurs when mouse pointer moves function ss() { alert("Thank you popo!") }

JavaScript onMouseout Occurs when mouse pointer moves out of an element function ss() { alert("Thank you popo!") } popo

JavaScript onkeypress Occurs key is pressed and released function ss() { alert("Thank you popo!") }

JavaScript onsubmit Occurs when a form is submitted function ss() { alert("Thank you popo!") }

JavaScript onload Occurs when a page is loaded function ss() { alert("popo"); }

JavaScript onmouseover Occurs when mouse pointer moves over an element function ss() { document.write("popo"); } Over Here!

JavaScript unload Occurs when user leaves a page

JavaScript Most of the events handlers are associated with the following object ObjectEvent Handlers SelectionlistonBlur, onChange, onFocus Text elementonBlur, onChange, onFocus, onSelect Textarea elementonBlur, onChange, onFocus, onSelect Button elementonClick CheckboxonClick Radio buttononClick Hyper linkonClick, onMouseover Submit buttononClick Reset buttononClick DocumentonLoad, onUnload WindowonLoad, onUnload FormonSubmit

JavaScript Addition of 2 nos (each Nos in 2 text, result in result text, with a button) function calcu(f) { f.ans.value=parseInt(f.first.value)+parseInt(f.sec.value); } Enter first no : Enter sec no:

JavaScript All arithmetic operation with 4 buttons & 3 text function add(f){ f.ans.value=parseInt(f.first.value)+parseInt(f.sec.va lue); } 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); } Enter first no : Enter sec no: Answer :

JavaScript Print First n nos function pr(f) { var n=parseInt(f.no.value); for(i=1;i<=n;i++) document.write(i+" "); } Enter limt no :

JavaScript

String length Var str="Hello world!" document.write(str.length); function s(f) { st=f.st.value alert(st.length); }

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

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.

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

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

JavaScript

String reversal using charat and length property 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)); }

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. var my_str="Welcome to popo" var str="popo"; document.write (my_str.search(str)); Output 11

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 "); }

JavaScript Number to string To convert a number to a string, do: var c = (16 * 24)/ ; d = c.toString();

JavaScript Check validation function validate() { if(document.login.userName.value=="") { alert ("Please enter User Name") } if(document.login.password.value=="") {alert ("Please enter Password") } }

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 var colors = ["red", "green", "blue"]; for(i=0;i<3;i++) document.write(colors[i]+" ");

JavaScript II Array Example var colors = new Array(); for(i=0;i<10;i++) { colors[i]="color"+i; document.write(colors[i]+" "); }

JavaScript

File popo.js Contents: function popup() { alert("Hello popo") } HTML & JavaScript Code:

JavaScript Print Index of select function check(n){ var t=parseInt(n)+1; alert("index is "+ t); } one two three four

JavaScript

javaScript Print Script - window.print() The JavaScript print function window.print() will print the current webpage when executed.

JavaScript JavaScript Redirect function delayer(){ window.location = " } This page is waiting for redirect location, poposir.orgfree.com" 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 the number of millisecods to wait before executing our function 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. function notEmpty(){ var myTextField = document.getElementById('myText'); if(myTextField.value != "") alert("You entered: " + myTextField.value) else alert("Would you please enter some text?") }

JavaScript Cuttent Time AM/ PM It is now 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");}

JavaScript