lOMoARcPSD|38333337

CSS Notes

Computer Engineering (Government Polytechnic, Nagpur)

Scan to open on Studocu

Studocu is not sponsored or endorsed by any college or university

Downloaded by Aishwarya kinge (aishwaryakinge@gmail.com)
 lOMoARcPSD|38333337

Amrutvahini Polytechnic Sangamner

Subject: Client Side Scripting Language Unit – I Basics of JavaScript Programming (10 Hrs.)

CO
1.1 Features of JavaScript

1.2 Object Name, Property, method, Dot syntax, main event.

1.3 Values and Variables

1.4 Operators and Expressions- Primary Expressions, Object and Array initializers, function definition
expression, property access expressions, invocation expressions.

1.5 If Statement, if…else, if..elseif, nested if statement.

1.6 Switch…case statement

1.7 Loop statement – for loop, for...in loop,
while loop, do…while loop, continue statement.

1.8 Querying and setting properties and deleting properties, property getters and setters.

 1.1 Features of JavaScript

What is JavaScript?

JavaScript is a scripting language that is created for showing HTML pages live. JavaScript does
not require any compilation. It is interpreted language. JavaScript can modify HTML page, writetext
in it, add or remove tags, change styles etc.

Core Features of JavaScript

Various features of JavaScript are as follows:

1. Client – Side Technology

2. Greater Control
3. Detecting the User’s Browser and OS.
4. Performing Simple Calculation on the Client side
5. Validating The User’s Input
6. Handling Date and time
7. Generating HTML on the Fly
8. Semicolon Insertion

Department Of Computer Technology Compiled By: Musale D.S.

Downloaded by Aishwarya kinge (aishwaryakinge@gmail.com)

 lOMoARcPSD|38333337

Amrutvahini Polytechnic Sangamner

Subject: Client Side Scripting Language Unit – I Basics of JavaScript Programming (10 Hrs.)

 1.2 Object Name, Property, method, Dot syntax, main event.

Objects:
A javaScript object is an entity having state and behavior (properties and method). For example:
car, pen, bike, chair, glass, keyboard, monitor etc.

JavaScript is an object-based language. Everything is an object in JavaScript.Creating Objects in

JavaScript There are 3 ways to create objects.
1. By object literal
2. By creating instance of Object directly (using new keyword)
3. By using an object constructor (using new keyword)

1. By object literal

Syntax of creating object using object literal is given below:

object={property1:value1,property2:value2.....propertyN:valueN}
<script>
emp={id:102,name:"Shyam Kumar",salary:40000}
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
2. By creating instance of Object directly (using new keyword)
The syntax of creating object directly
var objectname=new Object();

example

<script>
var emp=new Object();
emp.id=101;
emp.name="Ravi Malik";
emp.salary=50000;
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
3. By using an object constructor (using new keyword)
Here, you need to create function with arguments. Each argument value can be assigned in
the current object by using this keyword.
The this keyword refers to the current object.

The example of creating object by object constructor.

<script>
function emp(id,name,salary){

Department Of Computer Technology Compiled By: Musale D.S.

Downloaded by Aishwarya kinge (aishwaryakinge@gmail.com)

 lOMoARcPSD|38333337

Amrutvahini Polytechnic Sangamner

Subject: Client Side Scripting Language Unit – I Basics of JavaScript Programming (10 Hrs.)

this.id=id;
this.name=name;
this.salary=salary;
}
e=new emp(103,"Vimal Jaiswal",30000);

document.write(e.id+" "+e.name+" "+e.salary);

</script>
Defining method in JavaScript Object

We can define method in JavaScript object. But before defining method, we need to add
property in the function with same name as method. The example of defining method in object
is given below.

<script>
function emp(id,name,salary){
this.id=id;
this.name=name;
this.salary=salary;

this.changeSalary=changeSalary;
function changeSalary(otherSalary){
this.salary=otherSalary;
}
}
e=new emp(103,"Sonoo Jaiswal",30000);
document.write(e.id+" "+e.name+" "+e.salary);
e.changeSalary(45000);
document.write("<br>"+e.id+" "+e.name+" "+e.salary);
</script>

JavaScript Object Methods

The various methods of Object are as follows:

S.No Methods Description

This method is used to copy enumerable and own properties from a
1 Object.assign()
source object to a target object
This method is used to create a new object with the specified prototype
2 Object.create()
object and properties.

Department Of Computer Technology Compiled By: Musale D.S.

Downloaded by Aishwarya kinge (aishwaryakinge@gmail.com)

 lOMoARcPSD|38333337

Amrutvahini Polytechnic Sangamner

Subject: Client Side Scripting Language Unit – I Basics of JavaScript Programming (10 Hrs.)

This method is used to describe some behavioral attributes of the

3 Object.defineProperty()
property.
4 Object.defineProperties() This method is used to create or configure multiple object properties.
5 Object.entries() This method returns an array with arrays of the key, value pairs.
6 Object.freeze() This method prevents existing properties from being removed.
Object.getOwnPropertyD This method returns a property descriptor for the specified property of
7
escriptor() the specified object.
Object.getOwnPropertyD
8 This method returns all own property descriptors of a given object.
escriptors()

 1.3 Values and Variables

Variables are containers for storing data (storing data values).

In this example, x, y, and z, are variables, declared with the var keyword:

var x = 5;
var y = 6;
var z = x + y;

 1.4 Operators and Expressions- Primary Expressions, Object and Array

initializers

JavaScript Operators use either value or variable to compute some task. This lesson describes the
JavaScript operators with example, and operators precedence. JavaScript has following types
operators,
1. Arithmetic Operators
2. Assignment Operators
3. Comparison Operators
4. Logical Operators
5. Conditional Operator (Ternary Operator)
6. Bitwise Operators

JavaScript Operators with Example

JavaScript Arithmetic Operators

Operator Description Example Results

+ Addition result = x + y result = 15

Department Of Computer Technology Compiled By: Musale D.S.

Downloaded by Aishwarya kinge (aishwaryakinge@gmail.com)

 lOMoARcPSD|38333337

Amrutvahini Polytechnic Sangamner

Subject: Client Side Scripting Language Unit – I Basics of JavaScript Programming (10 Hrs.)

- Subtraction result = x - y result = 5

* Multiplication result = x * y result = 50
/ Division result = x / y result = 2
% Modulus result = x % y result = 0
result = 10
result = x++ result = x result =
++ Increment result = 11
++x
result = 12
result = 12
-- Decrement result = x-- result = x result = --x result = 11
result = 10

Example
<script>
var x = 10, y = 5;
document.writeln(x + y); // Addition: 15
document.writeln(x - y); // Subtraction: 5
document.writeln(x * y); // Multiplication: 50
document.writeln(x / y); // Division: 2
document.writeln(x % y); // Modulus: 0
document.writeln(x++); // x: 10, x become now 11
document.writeln(x); // x: 11
document.writeln(++x); // x become now 12, x: 12
document.writeln(x--); // x: 12, x become now 11
document.writeln(x); // x: 11
document.writeln(--x); // x become now 10, x: 10
</script>

Assignment Operators

Operator Sign Description Example Equivalent to Results

Assign value from one operand to another
Assignment = result = x result = x result = 17
operand value.
Addition Addition of operands and finally assign to result = result
+= result += x result = 22
left operand. +y
Subtraction of operands and finally assign result = result -
Subtraction -= result -= y result = 17
to left operand. y
Multiplication of operands and finally
Multiplication *= result *= y result = result result = 85
assign to left operand.

Department Of Computer Technology Compiled By: Musale D.S.

Downloaded by Aishwarya kinge (aishwaryakinge@gmail.com)

 lOMoARcPSD|38333337

Amrutvahini Polytechnic Sangamner

Subject: Client Side Scripting Language Unit – I Basics of JavaScript Programming (10 Hrs.)

*y
Division of operands and finally assign to result = result /
Division /= result /= y result = 17
left operand. y
Modulus Modulus of operands and finally assign to result = result
%= result %= y result = 2
left operand. %y
result = result &
y
AND operator compare two bits values 25
Bitwise AND &= return a results of 1, If both bits are 1. result &= y = 0000 0010 & result = 0
otherwise return 0. 0000 0101
= 0000 0000 =
0
result = result |
y
OR operator compare two bits values and =2|5
Bitwise OR |= return result of 1, If the bits are result |= y = 0000 0010 | result = 7
complementary. Otherwise return 0.
0000 0101
= 0000 0111 =

Department Of Computer Technology Compiled By: Musale D.S.

Downloaded by Aishwarya kinge (aishwaryakinge@gmail.com)

 lOMoARcPSD|38333337

Amrutvahini Polytechnic Sangamner

Subject: Client Side Scripting Language Unit – I Basics of JavaScript Programming (10 Hrs.)

Example

<script>
var x = 17, y = 5;
var result = x; // Assignment to left operand(result) base on right operand(y).
document.writeln(result);
document.writeln(result += x);
document.writeln(result -= y);
document.writeln(result *= y);
document.writeln(result /= y);
document.writeln(result %= y);
document.writeln(result &= y);
result = 2; // Reassign value
document.writeln(result |= y);
document.writeln(result ^= y);
document.writeln(result <<= y);
document.writeln(result >>= y);
</script>

Comparison Operators
JavaScript comparison operator determine the two operands satisfied the given condition.
Comparison operator return either true or false.

Operator Sign Description

Equal == If both operands are equal, returns true.

Identical equal === If both operands are equal and/or same data type, returns true.
Not equal != If both operands are not equal, returns true.
Identical not equal !== If both operands are not equal and/or same data type, returns
true.
Greater than > If left operand larger than right operand, return true.
Less then < If left operand smaller than right operand, return true.
Greater than, equal >= If left operand larger or equal than right operand, return true.
Less than, equal <= If left operand smaller or equal than right operand, return true.

Example
<script>
document.writeln(5 == 5); // true

Department Of Computer Technology Compiled By: Musale D.S.

Downloaded by Aishwarya kinge (aishwaryakinge@gmail.com)

 lOMoARcPSD|38333337

Amrutvahini Polytechnic Sangamner

Subject: Client Side Scripting Language Unit – I Basics of JavaScript Programming (10 Hrs.)

document.writeln(5 == '5'); // true

document.writeln(5 === '5'); // false type not same
document.writeln(5 != 10); // true
document.writeln(5 != '10'); // true
document.writeln(5 !== '10'); // true
document.writeln(5 > 10); // false
document.writeln(5 < 10); // true
document.writeln(5 >= 5); // true
document.writeln(5 <= 5); // true
</script>

Logical Operators (Boolean Operators)

JavaScript logical operators return boolean result base on operands.

Operator Sign Description

Logical AND && If first operand evaluate and return a true, only that evaluate the second operand
otherwise skips.
Return true if both are must be true, otherwise return false.
Logical OR || Evaluate both operands,
Return true if either both or any one operand true,
Return false if both are false.
Logical NOT ! Return the inverse of the given value result true become false, and false become
true.

Example
<script>
document.writeln((5 == 5) && (10 == 10)); // true
document.writeln(true && false); // false
document.writeln((5 == 5) || (5 == 10)); // true
document.writeln(true || false); // true
document.writeln(5 && 10); // return 10
document.writeln(5 || 10); // return 5
document.writeln(!5); // return false
document.writeln(!true); // return false
document.writeln(!false); // return true
</script>

Department Of Computer Technology Compiled By: Musale D.S.

Downloaded by Aishwarya kinge (aishwaryakinge@gmail.com)

 lOMoARcPSD|38333337

Amrutvahini Polytechnic Sangamner

Subject: Client Side Scripting Language Unit – I Basics of JavaScript Programming (10 Hrs.)

Conditional Operator (also call Ternary Operator)

JavaScript conditional operator evaluate the first expression(operand), Base on expression result
return either second operand or third operand.

answer = expression ? answer1 : answer2; // condition ? true : false

Example
document.write((10 == 10) ? "Same value" : "different value"

JavaScript Bitwise Operators

JavaScript bitwise operators evaluate and perform specific bitwise (32 bits either zero or one)
expression.

Operator Sign Description

Bitwise AND & Return bitwise AND operation for given two operands.
Bitwise OR | Return bitwise OR operation for given two operands.
Bitwise XOR ^ Return bitwise XOR operation for given two operands.
Bitwise NOT ~ Return bitwise NOT operation for given operand.
Bitwise Shift Left << Return left shift of given operands.
Bitwise Shift Right >> Return right shift of given operands.
Bitwise Unsigned >>> Return right shift without consider sign of given operands.
Shift Right

Example
<script>
document.writeln(5 & 10); // return 0, calculation: 0000 0101 & 0000 1010 = 0000 0000
document.writeln(5 | 10); // return 15, calculation: 0000 0101 | 0000 1010 = 0000 1111
document.writeln(5 ^ 10); // return 15, calculation: 0000 0101 ^ 0000 1010 = 0000 1111
document.writeln(~5); // return -6, calculation: ~ 0000 0101 = 1111 1010
document.writeln(10 << 2); // return 40, calculation: 0000 1010 << 2 = 0010 1000
document.writeln(10 >> 2); // return 2, calculation: 0000 1010 >> 2 = 0000 0010
document.writeln(10 >>> 2); // return 2, calculation: 0000 1010 >>> 2 = 0000 0010
</script>

Department Of Computer Technology Compiled By: Musale D.S.

Downloaded by Aishwarya kinge (aishwaryakinge@gmail.com)

 lOMoARcPSD|38333337

Amrutvahini Polytechnic Sangamner

Subject: Client Side Scripting Language Unit – I Basics of JavaScript Programming (10 Hrs.)

 1.5 If Statement, if…else, if..elseif, nested if statement.

If Statement

if is used to check for a condition whether its true or not. Condition could be any expression that returns
true or false. When condition satisfies then statements following if statement are executed.

Syntax if(condition)
{
statement1
statement2
...
}

Example
<script>

if(5>4)
{
document.write("yes 5 is greater than 4");
document.write("<br />" + "JavaScript is fun");
document.write("<br />");
}
</script>

else statement

else statements are used with if statements. When if condition gets fail then else statement is
executed. Syntax
if(condition)
{
statements
}
else
{
Statements
}

Department Of Computer Technology Compiled By: Musale D.S.

Downloaded by Aishwarya kinge (aishwaryakinge@gmail.com)

 lOMoARcPSD|38333337

Amrutvahini Polytechnic Sangamner

Subject: Client Side Scripting Language Unit – I Basics of JavaScript Programming (10 Hrs.)

Example
<script>
if(3>4)
{
document.write("True");
}
else
{
document.write("False");
}

</script>

else if statement

Suppose there are variety of conditions that you want to check. You can use
multiple if statements to do this task. All the if conditions will be checked one by one. But
what if you want that if one condition satisfies then don't perform further conditional
checks. At this point else if statement is what you need.

Syntax
if(condition)
{
statements
}
else if(condition)
{
statements
}
else
{
statements
}
When every condition fails then final else statement is executed.
Example
<script>

var a=3;
var b=4;
if(a > b)
{

Department Of Computer Technology Compiled By: Musale D.S.

Downloaded by Aishwarya kinge (aishwaryakinge@gmail.com)

 lOMoARcPSD|38333337

Amrutvahini Polytechnic Sangamner

Subject: Client Side Scripting Language Unit – I Basics of JavaScript Programming (10 Hrs.)

document.write("a is greater than b");

}
else if(a < b)
{
document.write("a is smaller than b");
}
else
{
document.write("Nothing worked");
}
</script>

 1.6 Switch…case statement

1.6 Switch…case statement

1.7 Loop statement – for loop, for...in loop,
while loop, do…while loop, continue statement.

1.8 Querying and setting properties and deleting properties, property getters and setters.

Department Of Computer Technology Compiled By: Musale D.S.

Downloaded by Aishwarya kinge (aishwaryakinge@gmail.com)

 lOMoARcPSD|38333337

Amrutvahini Polytechnic Sangamner Deparment Of Computer Technology

Unit – I Basics of JavaScript Programmingng ( 10 Hrs.)

Subject: Client Side Scripting Language (CSS) Compiled By: Musale D.S.
13

Downloaded by Aishwarya kinge (aishwaryakinge@gmail.com)