CSS UNIT-I Notes

CLIENT SIDE SCRIPETING (CSS) -22519 ( UNIT-I ) MRS. S.S.
KADAM
1.3 Values and Variables:

Var keyword is used to specify the data type. It can hold any types of values such as
numbers, strings etc.
Following are the values used by javascript:
-Number: A number is a numeric value.

Eg: var a =30;
-String: A string is a sequence of characters that is enclosed within quotation marks.

Eg: var name =”Sampada”;
-Boolean: A Boolean is a value either false or true

Eg: var b =true;
-Null: Null value means no value at all.

Eg: var a =null;
-Object: An object is a instance through which we can access members

Eg: var person={
First name=”sampada”,
Lastname=”kadam”,
};
 Program: Write a javascript code to demonstrate use of variables
<html>
<head>
<title>Logical Operation</title>
<script language="javascript" type="text/javascript">
var a=10;
var name="sampada";
var b=true;
document.write("Entered number : "+a);
document.write("<br>");
document.write("Entered name : "+name);
document.write("Entered boolean value : "+b);
</script>
</head>
<body>
</body>
</html>
10
CLIENT SIDE SCRIPETING (CSS) -22519 ( UNIT-I ) MRS. S.S.KADAM
Output:
1.4 Operators and Expressions:

Javascript includes following categories of operators:
1. Arithmetic operators
2. Comparison operators
3. Logical operators
4. Assignment operators
5. Bitwise operators
1. Arithmetic operators:
Arithmetic operators are used to perform arithmetic on numbers:
Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus (Division Remainder)
++ Increment (increment operands value by one)
-- Decrement (decrement operands value by one)
11
Program: Write javascript code to perform arithmetic operations
<html>
<head>
</head>
<body>
var a=20
var b=10;
document.write("Addition is : "+(a+b));
document.write("Substration is : "+(a-b));
document.write("Multiplication is : "+(a*b));
document.write("Division is : "+(a/b));
</script>
</body>
</html>
Output:
Program:Write a Javascript code to print average of three numbers.
<html>
<head>
<title>Average of three number</title>
var a=10;
var b=20;
var c=30;
var avg=(a+b+c)/3;
document.write("Average of three numbers= "+avg);
</script></head><body></body></html>
12
Output:
2. Comparison operators
== Compares the quality of two operands without considering types
=== Compares the quality of two operands with types
!= Compare inequality of two operands
> greater than
< less than
>= greater than or equal to
<= less than or equal to
Program:Write a javascript to demonstrate comparison operator
<html>
<head>
<title>Comparison Operation</title>
var a=10,b=5,c="10";
document.write("value of a : "+a);
document.write("value of b : "+b);
document.write("value of c : "+c);
13
document.write("a is equal to c without considering type : "+(a==c));

document.write("a is equal to c with type : "+(a===c));
document.write("a is not equal to b : "+(a!=b));
document.write("a is greater than b : "+(a>b));
document.write("a is less than b : "+(a<b));
document.write("a is greater than or equal to b : "+(a>=b));
document.write("a is less than or equal to b : "+(a<=b));
Output:
3.Logical Operators:
logical AND. It check whether two operands are non-zero. If yes then returns
&&
1 otherwise 0.
|| logical OR. It check whether any one of the two operands is non-zero.
! logical NOT.It reverse the Boolean result of the operand
14
Program:Write a javascript code to demonstrate logical operator
<html>
<head>
<title>Logical Operation</title>
var a=10,b=5,
document.write("value of a : "+a);
document.write("value of b : "+b);
document.write("value of c : "+c);
document.write((a>b)&&(a!=b)); // (10>5) && (10!=5) i.e.true
document.write((a<b)||(a!=b)); // (10<5) && (10!=5) i.e.true
document.write(!(a<b)); // (!(10<5)) i.e true
</script>
</head>
<body>
</body></html>
Output:
4.Assignment Operators:
Assignment operators assign values to JavaScript variables.
Operator Example Same As

= a=b a=b
+= a+=b a=a+b
-= a-=b a=a-b
*= A*=b a=a*b
/= A/=b a=a/b
%= a+%=b a=a%b
15
Program: Write a javascript code to demonstrate assignment operator
<html>
<head>
var a=10;
var b=20;
a=b;
document.write("a=b is "+a);
a+=1;
document.write("<br>a+=b is "+a);
a-=1;
document.write("<br>a-=b is "+a);
a*=5;
document.write("<br>a*=b is "+a);
a/=2;
document.write("<br>a/=b is "+a);
a%=2;
document.write("<br>a%=b is "+a);
</script>
</head>
<body>
</body>
</html>
Output:
16
5.Ternary Operator:
Syntax:
<condition> ? <value1>:<value2>
Ternary operator starts with conditional expression followed by ? operator.

Second part (after ? and before : operator) will be executed if condition turns
out to be true. If condition becomes false then third part (after :) will be
executed.
Program: Write a javascript code to illustrate the use of ternary operator.
<html>
<head>
var a=10;
var b=20;
var c=(a>b)?a:b;
document.write(c);
</script>
</head>
<body>
</body>
</html>
Output:
17
1.5 Conditional Statement:

Conditional statements are used to perform different actions based on different conditions.
In JavaScript we have the following conditional statements:
 Use if to specify a block of code to be executed, if a specified condition is true

 Use if else to specify a block of code to be executed, if the same condition is false
 Use if else if to specify a new condition to test, if the first condition is false
 Use switch to specify many alternative blocks of code to be executed
1.5.1 if Statement
Use the if statement to specify a block of JavaScript code to be executed if a condition is

true.
Syntax:
if (condition) {
// block of code to be executed if the condition is true
}
Program: Write a javascript code to demonstrate if statement.

<html>
<head>
var age=28;
if(age>18)
{
document.write("Your age is greater than 18");
}
</script>
</head>
<body>
</body></html>
Output:
18
1.5.2 if-else statement:

syntax: Use the if statement to specify a block of JavaScript code to be executed if a condition
is true. Use the else statement to specify a block of code to be executed if the condition is
false.
Syntax:
if (condition) {
// block of code to be executed if the condition is true
} else {
// block of code to be executed if the condition is false
}
Program:Write a javascript code to demonstrate if-else statement.
<html>
<head>
<title>Average of three number</title>
var a=10;
var b=20;
if(a>b)
{
document.write("a is greater than than b");
}
else
{
document.write("b is greater than than a");
}
Output:
19
1.5.3 Nested if statement
A nested if is an if statement that is the target of another if or else. if statement inside an if

statement. Javascript allows us to nest if statement within if statement i.e. we can place an
if statement inside another if statement.
Syntax:
if (condition1)
{
// block of code to be executed if condition1 is true
} else if (condition2)
{
// block of code to be executed if the condition1 is false and condition2 is true
} else
{
// block of code to be executed if the condition1 is false and condition2 is false
}
Program: Write a javascript program which compute the average of five

subjects, then determine corresponding grade.
<html>
<head>
var subject1=74;
var subject2=56;
var subject3=80;
var subject4=79;
var subject5=89;
var avg=(subject1+subject2+subject3+subject4+subject5)/5;
document.write("Your Percentage is = "+avg);
if(avg>75)
{
document.write("Your grade is = Distinction");
}
else if((avg>=60)&&(avg<75))
{
document.write("Your grade is = First Class");
}
{
document.write("Your grade is = Second Class");
}
20
{
document.write("Your grade is = Pass");
}
else
{
document.write("Your grade is :Fail");
}
</script>
</head>
<body>
</body>
</html>
Output:
1.6 Switch Case Statement
The switch statement is used to perform different actions based on different conditions.
Use the switch statement to select one of many code blocks to be executed.
Syntax:
switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
21
How Switch Case Statement Works:

 The switch expression is evaluated once.
 The value of the expression is compared with the values of each case.
 If there is a match, the associated block of code is executed.
 If there is no match, the default code block is executed.
Program: Write a javascript code to demonstrate Switch Case statement
<html>
<head>
var a=prompt("Enter number from 1 to 4");
switch(a)
{
case "1":
document.write("perform Addition");
break;
case "2":
document.write("Perform substraction");
break;
case "3":
document.write("Perform Multiplication");
break;
case "4":
document.write("Perform Division");
break;
default:
document.write("Number sholud be in between 1 to 4");
}
</script>
</head>
<body></body></html>
Output:
22
1.7 Loop Statement
Loops can execute a block of code a number of times.
JavaScript supports different kinds of loops:
 for - loops through a block of code a number of times

 for/in - loops through the properties of an object
 while - loops through a block of code while a specified condition is true
 do/while - also loops through a block of code while a specified condition is true
1.7.1 for loop:
Syntax:
For (initial condition; terminating condition; stepping condition)
// line of code to be executed
Program:Write a javascript code to print “welcome student” 10 times by

using for..loop.
<html>
<head>
var a;
for(a=0;a<10;a++)
{
document.write("Welcome student<br>");
}
</script>
</head>
<body>
</body>
</html>
23
Output:
Program:Write a javascript code to print even numbers from 1 to 100 by

using for loop.
<html>
<head>
var a;
for(a=2;a<=100;a=a+2)
{
document.write(a+"<br>");
}
</script>
</head>
Output:
24
1.7.2 for In loop:

For…in loop iterate(loop) over the properties of an object. The code block inside the loop is
executed once for each property.
Syntax:
for (key in object) {

// code block to be executed
}
 let keyword is used to declare variables in Javscript. The var keyword can also be
used to declare variables, but the key difference between them lies in their scopes.
 var is function scoped while let is block scoped.
Program:Write a javascript to demonstrate for… In loop.
<html>
<head>
</head>
<body>
var person={
name:"sampada",
age:30,
classname:"TYCM"
};
for(let x in person)
{
document.write(person[x]);
}
</script>
</body>
</html>
Output:
25
Program: Write a javascript to demonstrate for In loop.

<html>
<head>
var person={
name:"sampada",
age:30,
dept:"comp"
};
var txt="";
for(let x in person)
{
txt=txt+person[x]+" ";
}
document.write(txt);
</script>
</head>
<body>
</body>
</html>
Output:
26
1.7.3 while Loop:
The while loop loops through a block of code as long as a specified condition
is true.
Syntax:
while (condition) {
// code block to be executed
}
Program: Write a javascript code to print 1 to 10 numbers by using while loop.
<html>
<head>
var i=1;
while(i<=10)
{
document.write(i+"<br>");
i++;
}
</script>
</head>
<body>
</body>
</html>
Output:
27
1.7.4: Do…While Loop
The do...while statements combo defines a code block to be executed once,

and repeated as long as a condition is true.
The do...while is used when you want to run a code block at least one time.
Syntax:
do {
code block to be executed
}
while (condition);
Program: Write a javascript code to print 1 to 10 by using do…while loop
<html>
<head>
</head>
<body>
var a=1;
do
{
document.write(a+"<br>");
a=a+1;
}while(a<=10)
</script>
</body>
</html>
Output:
28
1.8
1.8.1 Querying and Setting properties:
The dot (.) operator or square bracket ( [] ) are used to obtained values of properties.
To get properties from student object:
var name=student.name;
var rollno=student.rollno;
if using square brackets, the value within the brackets must be an expression that evaluates
to a string that contains the desired property name.
To get properties from student object:

var name=student[name];
avr rollno=student[rollno];
To set properties of student object:

student.name=”sampada”;
student.rollno=30;
OR
Student[“name”]=”sampada”;
Student[“rollno”]=30;
1.8.2: Deleting Properties:

The delete keyword is used to delete both the value of the property and property itself.
Eg:
delete student.name;
OR
delete student[“name”];
Program: Write a javascript to delete property of object

<html>
<head>
</head>
<body>
var student={
name:"sampada",
rollno:30,
};
document.write("Name: "+student.name);
delete student.name;
document.write("Name: "+student.name);
</script>
</body>
</html>
29
Output:
Program: Write a javascript to create person object with properties firstname,

lastname, age, eyecolor. Delete eye color property and display remaining
properties of person object.
<html>
<head>
var person={
firstname:"sampada",
lastname:"kadam",
age:30,
eyecolor:"black"
};
delete person.eyecolor;
document.write("Your First Name is :"+person.firstname);
document.write("<br>Your Second Name is :"+person.lastname);
document.write("<br>Your Age is :"+person.age);
document.write("<br>Your eyecolor is :"+person.eyecolor);
</script>
</head>
Output:
30
1.8.3 Property Getters and Setters:

Getters and setters allow you to define Object Accessors (Computed Properties).
get- a function without arguments, that works when a property is read.
Program:Write a javascript code to illustrate the use of getter method.
<html>
<head>
</head>
<body>
var student={
name:"sampada",
rollno:30,
get getname(){
return this.name;
}
};
document.write("Student Name is : "+student.getname);
</script>
</body>
</html>
Output:
31
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:Write a javascript code to illustrate the use of setter method.
<html>
<head>
</head>
<body>
var student={
name:"sampada",
rollno:30,
set setname(value)
{
this.name=value;
}
};
student.setname="shourya";
document.write("Student Name is : "+student.name);
</script>
</body>
</html>
Output:
32
Program:Write a javascript code to illustrate the use of getter and setter

method.
<html>
<head>
</head>
<body>
var student={
name:"sampada",
rollno:30,
get getname(){
return this.name;
},
set setname(value){
this.name=value;
}
};
document.write("Student Name is : "+student.getname);
student.setname="shourya";
document.write("<br>Student Name is : "+student.getname);
</script>
</body>
</html>
Output:
33

CSS UNIT-I Notes

Uploaded by

Copyright:

Available Formats

CSS UNIT-I Notes

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS UNIT-I Notes

Uploaded by

Copyright:

Available Formats

CLIENT SIDE SCRIPETING (CSS) -22519 ( UNIT-I ) MRS. S.S.

1.3 Values and Variables:

Following are the values used by javascript:

-Number: A number is a numeric value.

-String: A string is a sequence of characters that is enclosed within quotation marks.

-Boolean: A Boolean is a value either false or true

-Null: Null value means no value at all.

-Object: An object is a instance through which we can access members

 Program: Write a javascript code to demonstrate use of variables

1.4 Operators and Expressions:

Arithmetic operators are used to perform arithmetic on numbers:

% Modulus (Division Remainder)

++ Increment (increment operands value by one)

-- Decrement (decrement operands value by one)

Program: Write javascript code to perform arithmetic operations

Program:Write a Javascript code to print average of three numbers.

== Compares the quality of two operands without considering types

=== Compares the quality of two operands with types

!= Compare inequality of two operands

> greater than

< less than

>= greater than or equal to

<= less than or equal to

Program:Write a javascript to demonstrate comparison operator

document.write("a is equal to c without considering type : "+(a==c));

! logical NOT.It reverse the Boolean result of the operand

Program:Write a javascript code to demonstrate logical operator

Operator Example Same As

Program: Write a javascript code to demonstrate assignment operator

Ternary operator starts with conditional expression followed by ? operator.

Program: Write a javascript code to illustrate the use of ternary operator.

1.5 Conditional Statement:

 Use if to specify a block of code to be executed, if a specified condition is true

Use the if statement to specify a block of JavaScript code to be executed if a condition is

Program: Write a javascript code to demonstrate if statement.

1.5.2 if-else statement:

Program:Write a javascript code to demonstrate if-else statement.

1.5.3 Nested if statement

A nested if is an if statement that is the target of another if or else. if statement inside an if

Program: Write a javascript program which compute the average of five

1.6 Switch Case Statement

How Switch Case Statement Works:

Program: Write a javascript code to demonstrate Switch Case statement

1.7 Loop Statement

Loops can execute a block of code a number of times.

JavaScript supports different kinds of loops:

 for - loops through a block of code a number of times

1.7.1 for loop:

For (initial condition; terminating condition; stepping condition)

// line of code to be executed

Program:Write a javascript code to print “welcome student” 10 times by

Program:Write a javascript code to print even numbers from 1 to 100 by

1.7.2 for In loop:

for (key in object) {

Program: Write a javascript to demonstrate for In loop.

1.7.3 while Loop:

Program: Write a javascript code to print 1 to 10 numbers by using while loop.

1.7.4: Do…While Loop

The do...while statements combo defines a code block to be executed once,

Program: Write a javascript code to print 1 to 10 by using do…while loop