Client Side Scripting
1
• Create interactive web pages
CO1 using program flow control
structure
• Display properties of the given
LO4 object using getters and setters
Department of Information Technology,Government
Polytechnic Awasari(kh)
2
TEACHING AND EXAMINATION SCHEME
Department of Information Technology,Government
Polytechnic Awasari(kh)
3
CONTENTS
1. Querying, setting properties and deleting properties
2. Property getters and setters
4
Department of Information Technology,Government
Polytechnic Awasari(kh)
QUERYING AND SETTING PROPERTIES
• The dot (.) operator or square brackets ([]) are used to obtained values of
properties.
for example: var price=book . price; //get the “price” property of the book.
• The left-hand side should be an expression whose value is an object .
If using the dot operator , the right -hand side must be a simple identifier that
names the property
• If using square brackets, the value within the brackets must be an expression that
evaluates to a string that contains the desired property name.
for example: var author= book[“author”] //get the “author” property of the book.
• Use dot or square bracket to create or set a property but place the properties to
the left hand side of an assignment expression.
for example: Book. price=300; // create an “price” property of the book.
person[“first name”]=“john”; //set the “first name “ property
5
Department of Information Technology,Government
Polytechnic Awasari(kh)
DELETING PROPERTIES
• Delete keyword is used to delete both the value of the property and property itself.
for example: delete person-age; // the person object now has no age property
delete person[“FirstName”]; // the person object now has no FirstName property
• The delete property returns true if deleted successfully.
Example:
<html>
<head>
<script language=“javascript” type=“text/javascript”>
Var car={
Color:”red”,
Brand:”ford”
};
document. Write (car. Color +”<br>”+car. Brand +”<br>”);
document. Write(delete car. Brand);
</script>
</head>
</body>
</html>
6
Department of Information Technology,Government
Polytechnic Awasari(kh)
PROPERTY GETTERS AND SETTERS
• Javascript supports are two kinds of properties
1. Data property
2. Accessor properties
• The accessor properties are represented by “getter” and “setter” methods
for the full name property.
• When the property is accessed ,the return value from the getter is used.
get – a function without arguments , that works when a property is
read.
Program: Use of getter method in javascript
<html>
<head>
<script language=“javascript” type=“text/javascript”>
var car ={
color:”red”,
brand:”ford”,
get company() {
return this.brand; }
};
document. Write(“company=“ + car.company);
</script>
</head>
<body>
</body>
</html>
7
Department of Information Technology,Government
Polytechnic Awasari(kh)
PROPERTY SETTERS
• When a value is set , the setter is called and passed the value that was set.
set – a function with one argument , that is called when the property is set.
Program: Use of setter method in javascript
<html>
<body>
<script language=“javascript” type=“text/javascript”>
Var car ={
Color: “red”,
Brand: “ford”,
Set company(value) {
this. Brand=value;
}
};
document. Write(“company= “+car. Brand+”<br>;
Car.company=“maruti”;
document. Write(“company=“+car.brand);
</script>
</body>
</html>
Department of Information Technology,Government
Polytechnic Awasari(kh)
8
QUIZ TIME
Q1. Which operator are used to Q2. The delete keyword is used for
obtained values of properties?
a) To delete value of property;
a) The dot(.) operator; b) To delete only property itself;
b) Null operator; c) To delete value of property and
c) arithmetic operator; property itself;
d) All of the above; d) To restore the value of property
► Ans. a. The ► Ans. c. To delete value of
dot(.)operator property and property itself
9
Department of Information Technology,Government
Polytechnic Awasari(kh)
QUIZ TIME
Q3. What is get function? Q4. What is set function?
a) A function with two argument, that is
a) A function with arguments called when property is set
b) A function without arguments ,that
works when a property is read. b) A function with no argument, that is
c) A function without arguments ,that called when property is set
works when a property is write
d) A function with arguments ,that works c) A function with no argument, that is
when a property is read. called when property is get
► Ans. b. A function without d) A function with one argument, that is
called when property is set
arguments ,that works
when a property is read. ► Ans. d. A function with one
argument, that is called when
property is set
10
Department of Information Technology,Government
Polytechnic Awasari(kh)
THANK YOU
Thank You
Department of Information Technology,Government
11
Polytechnic Awasari(kh)
