Professional Documents
Culture Documents
Javascript: Client Side Scripting
Javascript: Client Side Scripting
Javascript: Client Side Scripting
• Run in the client browser and process requests without call backs to the server
• client-side scripting (JavaScript) benefits
• usability: can modify a page without having to post back to the server (faster
JavaScript UI)
• efficiency: can make small, quick changes to page without waiting for server
• event-driven: can respond to user actions like clicks and key presses
server-side scripting
• server-side programming (PHP,servlets,JSP,..) benefits:
• security: has access to server's private data; client can't see source code
• compatibility: not subject to browser compatibility issues
• power: can write files, open connections to servers, connect to databases, ...
SERVER-SIDE SCRIPTING CLIENT-SIDE SCRIPTING
Works in the back end which could not be visible at the Works at the front end and script are visible among the Java Script
client end. users.
• Single-line Comment
External java Script • // comment text
<html>
<head>
• Multi-line Comment
message.js <script type="text/javascript" src="message.js"></script> • /* comment
function msg(){ </head> ----
alert("Hello ,Welcome to VJIT"); <body>
<p>Welcome to JavaScript</p> */
}
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>
</html>
Data Types
• JavaScript Variable:
• JavaScript is a dynamic type language
• variables are declared with the var keyword
• types are not specified
• There are two types of data types in JavaScript.
• Primitive data type
number🡪represents numeric values e.g. 100
<script type=text/javascript> boolean🡪represents boolean value either false or true
var x = 10; null🡪represents null i.e. no value at all
var y = 20;
var z=x+y;
• Non-primitive (reference) data type
document.write(z); • string🡪represents sequence of characters e.g. "hello"
</script> • Object🡪represents instance through which we can access members
Operator Description Example Operator Description Example
+ Addition 10+20 = 30 & Bitwise AND (10==20 & 20==33) = false
- Subtraction 20-10 = 10 | Bitwise OR (10==20 | 20==33) = false
* Multiplication 10*20 = 200 ^ Bitwise XOR (10==20 ^ 20==33) = false
/ Division 20/10 = 2 ~ Bitwise NOT (~10) = -10
% Modulus (Remainder) 20%10 = 0 << Bitwise Left Shift (10<<2) = 40
++ Increment var a=10; a++; Now a = 11 >> Bitwise Right Shift 10>>2) = 2
-- Decrement var a=10; a--; Now a = 9 >>> Bitwise Right Shift with Zero (10>>>2) = 2
default:
code to be executed if above values are not matched; for (initialization; condition; increment/decrement)
} while (condition)
{
{
code to be executed
code to be executed
}
}
do{
JavaScript Popup Boxes
code to be executed
}while (condition);
</body>
</html>
//Passing Parameters and returning values
<html>
<script>
Arrays
function mul( a , b){
return a*b; The name of function in javascript is reference to the function
• array is an object that represents a collection of elements.
} body
document.write(mul(12,13)); This reference can be used to create other references also; var arrayname=[value1,value2.....valueN];
</script> <script> values are contained inside [ ] and separated by ,
<body > function mul( a , b){
return a*b;
} <html>
</body>
document.write(mul(12,13)); <body>
</html>
<script>
m=mul; var emp=[“Raj",“Ravi","Ram"];
document.write(m(10,12)); for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br/>");
</script> }
</script>
</body>
</html>
Using constructor Methods
Array Functions
concat() It returns a new array object that contains two or more merged arrays.
• Array() var res=array.concat(arr1,arr2,....,arrn) ;
• var array_name=new Array(); indexOf() It searches the specified element in the given array and returns the index of the first match.
• new keyword is used to create instance of array. var n=array.indexOf(element,index) ;
• Ex:
var emp = new Array();
emp[0] = “Raj"; join() It joins the elements of an array as a string.
var res=array.join(separator) ;// default separator is ,
emp[1] = “Ravi";
emp[2] = “Ram"; lastIndexOf() It searches the specified element in the given array and returns the index of the last match.
• Array(parameters) var n=array.lastIndexOf(element,index);
• var array_name=new Array(p1,p2,p3);
• Ex:
• var emp=new Array(“Raj",“Ravi",“Ram");
<html> pop() It removes and returns the last element of an array.
<body> var x=array.pop() ;
<script>
var arr1=["C","C++","Python"]; push() It adds one or more elements to the end of an array.
var arr2=["Java","JavaScript","Android"]; array.push(element1,element2....elementn)
var result=arr1.concat(arr2);
document.writeln(result+"<br>"); reverse() It reverses the elements of given array.
array.reverse()
var arr=["C","C++","Python","C++","Java"]; shift() It removes and returns the first element of an array.
var result= arr.indexOf("C++"); var n=array. shift();
document.writeln(result+"<br>");
unshift() It adds one or more elements in the beginning of the given array.
var arr=["PhP","Servlets","JSP"] array. unshift(e1,e2,....,en);
var result=arr.join(" ")
document.write(result+"<br>"); slice() It returns a new array containing the copy of the part of the given array.
array.slice(start,end)
var arr=["C","C++","Python","C++","Java"];
var result= arr.lastIndexOf("C++"); sort() It returns the element of the given array in a sorted order.
document.writeln(result+"<br>"); array.sort()
splice() It add/remove elements to/from the given array.
</script> array.splice(start,delete,element1,element2,----,elementn)
var result=arr.unshift("J2EE");
document.writeln(arr+"<br>");
var result=arr.slice(0,2);
document.writeln("slice: "+result+"<br>");
Methods Description search() It searches a specified regular expression in a given string and returns its position if a match occurs.
charAt() It provides the char value present at the specified index. string.search(regexp)
var c=String.charAt(index) match() It searches a specified regular expression in a given string and returns that regular expression if a match
charCodeAt() It provides the Unicode value of a character present at the specified index. occurs.
var uc=string.charCodeAt(index) string.match(regexp)
replace() It replaces a given string with the specified replacement.
concat() It provides a combination of two or more strings. substr() It is used to fetch the part of the given string on the basis of the specified starting position and length.
var new_str=string.concat(str1,str2,...,strn) string.substr(start,length)
indexOf() It provides the position of a char value present in the given string. slice() It is used to fetch the part of the given string. It allows us to assign positive as well negative index.
var n=indexOf(ch[,position]) string.slice(start,end)
var n=indexOf(str[,position])
lastIndexOf() It provides the position of a char value present in the given string by searching a character from the last toString() It provides a string representing the particular object.
position. object.toString()
var n=lastIndexOf(ch[,position])
var n=lastIndexOf(str[,position])