UNIT-4:

JAVASCRIPT
1. INTRODUCTION
a. Scripting language
b. Client-side language
c. Object-based language i.e. does not have polymorphism or inheritance or both
d. Interpreted language. The browser has the interpreter.
e. Light weighted and does not require server interaction. So, the response is
faster.
f. No API for networking, don't have the concept of file handling, multithreading,
and multi-processing.
g. User inputs can be validated before sending the data to the server.
2. INCORPORATING JAVASCRIPT
i. JS Code is written with the <script> tag
<script type="text/javascript">
document.write("CSE3A")
</script>
ii. Two ways:
a. Internally: embedding code in HTML. There is only one file i.e. file with a
.html extension
i. in the body tag
ii. in the head tag
b. Externally: in separate .js file. There will be two separate files. one with .js
extension and other .html
3. JAVASCRIPT COMMENTS
a. Single line comments: //
b. Multiple line comments: /* */
4. VARIABLE
var a = 10 or a = 1.02
CONVENTIONS
a. Names must start with a letter(a-z, A-Z), _ or $
b. 0-9
c. Case sensitive. a and A are different.

SCOPE OF A VARIABLE
a. Local Scope:
i. Function scope: Variables declared Locally (inside a function)
have Function Scope.
ii. Block scope: Variables declared with the var keyword cannot have Block
Scope.
 Variables declared inside a block {} can be accessed from outside the block.
Before
ES2015 JavaScript did not have a Block Scope. Variables declared with
the let keyword can have Block Scope. Variables declared inside a
block {} cannot
be accessed from outside the block.

b. Global Scope: Variables declared Globally (outside any function)

have Global Scope. Global variables can be accessed from anywhere in a
JavaScript program.
 5. DATA TYPES
JavaScript provides different data types to hold different types of values. There
are two types of data types in JavaScript.
1. Primitive data type
2. Non-primitive (reference) data type

JavaScript is a dynamically-typed language; means we don't need to specify

type the of variable because it is dynamically used by the JavaScript engine. It
can hold any type of value such as numbers, strings, etc. For example:
1. var a=5; //holding number
2. var b="CSE3A"; //holding string
 PRIMITIVE DATA TYPES
There are five types of primitive data types in JavaScript. They are as follows:

Data Type Description

String represents sequence of characters e.g., "hello"
Number represents numeric values e.g. 100.
Boolean represents boolean value either false or true
Undefined represents undefined value. undefined means "does not
exist
Null represents null i.e., no value at all. The property is
defined, but the object it refers to does not exist.
Numbers:
A number data type can be an integer, a floating-point value, an exponential
value, a ‘NaN’ or a ‘Infinity’.
var a=250; // integer value
var b=25.5; // a number containing a decimal
var c = 10e4 // an exponential value which evaluates
to 10*10000;

There are special numeric values e.g. NaN and Infinity.

If a number is divided by 0, the resulting value is infinity.
5/0; // results in infinity
The type of infinity is a number
typeof(infinity); // returns number
A ‘NaN’ results when we try to perform an operation on a number with a non-
numeric value
‘hi’ * 5; // returns NaN
typeof(NaN); // returns a number

We can also create a number literal by using the Number() function:

var c = Number(5);
console.log(c); // This will return 5

We can create a number object using the ‘new’ operator and the Number()
constructor:
var num1= new Number(5);
console.log(num1); // This will return 5
typeof(num1); // This will return ‘number’
String:
The string data type in JavaScript can be any group of characters enclosed by
single or double.
var str1 = “This is a string1”; // This is a string primitive type or string literal
var str2= ‘This is a string2’;

Alternatively, we can use the String() function to create a new string.

var str4 = String(‘hi’); // This creates a string literal with value ' ‘hi’

The String() function is also used to convert a non-string value to a string.

String(4); // This statement will create a string ‘4’
Like the ‘number’ and the ‘boolean’ data types, a ‘String’ object can be created
using the ‘new’ operator:
var str5= new String(“hello”); // This is a string
object
console.log(str4); // This will return the string
‘hello’
Boolean:
The boolean data type has only two values, true and false.
It is mostly used to check a logical condition.
Thus, Booleans are logical data types that can be used for the comparison of two
variables or to check a condition.
When we check the data type of ‘true’ or ‘false’ using typeof operator, it returns
a boolean.
typeof(true) // returns boolean
typeof(false) // returns boolean

Let’s see an example of comparison statement:

var a =5;
var b=6;
a==b // returns false

A boolean value is also used to check a condition in an expression:

if(a<b){
alert(a is a smaller number than b);
}
If the above condition ‘a < b’ is true, the alert will pop on the screen.
We can create a new Boolean variable using the Boolean() function.
var check = Boolean(expression); // If the expression evaluates to true, the
value of ‘check’ will be true or else it will
be false.
var check = Boolean(a<b); // the expression evaluates to true, thus the value
of check will be true.

The Boolean() function converts a non-boolean value to a boolean value.

var mystring = ‘hi there’;
Boolean(mystring); // This will result in true because the ‘mystring’ value
exists.
A Boolean object can be created using the new operator.
var booleanobj = new Boolean(true);

Here ‘booleanobj’ is a Boolean object.

Though we can create an object of the primitive data types, ‘number’,’boolean’
and ‘number’ it is advisable or good practice to use the primitive version of these
types.
Undefined:
Undefined data type means a variable that is not defined.
The variable is declared but doesn’t contain any value.
So, you can say that undefined means lack of value or unknown value.
var a;
console.log(a); // This will return undefined.

The variable ‘a’ has been declared but hasn’t been assigned a value yet.
We can assign a value to a:
a=5;
console.log(a); // This will return 5
Null:
The null in JavaScript is a data type that is represented by only one value,
the ‘null’ itself.
A null value means no value.
You can assign null to a variable to denote that currently, the variable does not
have any value but it will have later on.
A null value evaluates to false in a conditional expression.
So you don't have to use comparison operators like === or !== to check for null
values.
NON-PRIMITIVE DATA TYPES
The non-primitive data types are as follows:

Data Description
Type
Object represents instance through which we can access members
Array represents a group of similar values
RegExp represents regular expression
Date represents properties of date
6. OPERATORS
JavaScript operators are symbols that are used to perform operations on operands.
For example:
var sum=10+20;
Here, + is the arithmetic operator and = is the assignment operator.
There are the following types of operators in JavaScript.
a) Arithmetic Operators
b)Comparison (Relational) Operators
c) Bitwise Operators
d)Logical Operators
e) Assignment Operators
f) Special Operators
 ARITHMETIC OPERATORS
Arithmetic operators are used to performing arithmetic operations on the
operands. The following operators are known as JavaScript arithmetic operators.

Operator Description Example

+ Addition 10+20 = 30
- Subtraction 20-10 = 10
* Multiplication 10*20 = 200
/ Division 20/10 = 2
% Modulus (Remainder) 20%10 = 0
++ Increment var a=10; a++; Now a = 11
-- Decrement var a=10; a--; Now a = 9
 COMPARISON OPERATORS
The JavaScript comparison operator compares the two operands. The comparison
operators are as follows:

Operator Description Example

== Is equal to 10==20 = false
=== Identical (equal and of same type) 10==20 = false
!= Not equal to 10!=20 = true
!== Not Identical 20!==20 = false
> Greater than 20>10 = true
>= Greater than or equal to 20>=10 = true
< Less than 20<10 = false
<= Less than or equal to 20<=10 = false
 BITWISE OPERATORS
The bitwise operators perform bitwise operations on operands. The bitwise
operators are as follows:

Operator Description Example

& Bitwise AND (10==20 & 20==33) =
false
| Bitwise OR (10==20 | 20==33) = false
^ Bitwise XOR (10==20 ^ 20==33) = false
~ Bitwise NOT (~10) = -10
<< Bitwise Left Shift (10<<2) = 40
>> Bitwise Right Shift (10>>2) = 2
>>> Bitwise Right Shift with Zero (10>>>2) = 2
 LOGICAL OPERATORS
The following operators are known as JavaScript logical operators.

Operator Description Example

&& Logical AND (10==20 && 20==33) = false
|| Logical OR (10==20 || 20==33) = false
! Logical Not !(10==20) = true
 ASSIGNMENT OPERATORS
The following operators are known as JavaScript assignment operators.

Operator Description Example

= Assign 10+10 = 20
+= Add and assign var a=10; a+=20; Now a = 30
-= Subtract and assign var a=20; a-=10; Now a = 10
*= Multiply and assign var a=10; a*=20; Now a = 200
/= Divide and assign var a=10; a/=2; Now a = 5
%= Modulus and assign var a=10; a%=2; Now a = 0
 SPECIAL OPERATORS
The following operators are known as JavaScript special operators.

Operator Description
(?:) returns a value based on the condition. It is like if-else.
, allows multiple expressions to be evaluated as a single statement.
delete deletes a property from the object.
in checks if the object has the given property
instanceof checks if the object is an instance of a given type
new creates an instance (object)
typeof checks the type of object.
7. CONDITIONAL STATEMENTS
7.1 IF-ELSE
The if-else statement is used to execute the code whether the condition is true or
false. There are three forms of if statement in JavaScript.
1.If Statement
2.If else statement
3.if else if statement
 IF STATEMENT
It evaluates the content only if the expression is true. The syntax of the JavaScript
if statement is given below.
if(expression){
//content to be evaluated
}
Let’s see the simple example of if statement in JavaScript.
<script>
var a=20;
if(a>10){
document.write("value of a is greater than 10");
}
</script>
Output of the above example
value of a is greater than 10
 IF...ELSE STATEMENT
It evaluates the content whether the condition is true or false. The syntax of the
JavaScript if-else statement is given below.
if(expression){
//content to be evaluated if condition is true
}
else{
//content to be evaluated if condition is false
}
Let’s see the example of if-else statement in JavaScript to find out the even or
odd number.
<script>
var a=20;
if(a%2==0){
document.write("a is even number");
}
else{
document.write("a is odd number");
}
</script>

Output of the above example

a is even number
 IF...ELSE IF STATEMENT
It evaluates the content only if expression is true from several expressions. The
signature of JavaScript if else if statement is given below.
if(expression1){
//content to be evaluated if expression1 is true
} else if(expression2){
//content to be evaluated if expression2 is true
} else if(expression3){
//content to be evaluated if expression3 is true
} else{
//content to be evaluated if no expression is true
}
Let’s see the simple example of if else if statement in JavaScript.
var a=20;
if(a==10){
document.write("a is equal to 10");
} else if(a==15){
document.write("a is equal to 15");
}else if(a==20){
document.write("a is equal to 20");
} else{
document.write("a is not equal to 10, 15 or 20");
}

Output of the above example

a is equal to 20
 SWITCH
The JavaScript switch statement is used to execute one code from multiple
expressions. It is just like else if statement that we have learned in the previous
section. The syntax of JavaScript switch statement is given below.
switch(expression){
case value1:
code to be executed;
break;
case value2:
code to be executed;
break;
......
default:
code to be executed if the above values are not matched;
}
Let’s see the simple example of switch statement in JavaScript.
<script>
var grade='B';
var result;
switch(grade){
case 'A':
result="A Grade";
break;
case 'B':
result="B Grade";
break;
case 'C':
result="C Grade";
break;
default:
 result="No Grade";
}
document.write(result);
</script>

Output of the above example

B Grade
Let’s understand the behavior of the switch statement in JavaScript.
The switch statement is fall-through i.e., all the cases will be evaluated if you
<script>
don't use the break statement.
var grade='A';
var result;
switch(grade){
 case 'A':
result="A Grade";
case 'B':
result="B Grade";
case 'C':
result="C Grade";
break;
default:
result="No Grade";
}
document.write(result);
</script>
Output of the above example
C Grade
<script>
var grade='B';
var result;
switch(grade){
case 'A':
result+=" A Grade";
case 'B':
result+=" B Grade";
case 'C':
result+=" C Grade";
default:
result+=" No Grade";
}
document.write(result);
</script>
Output of the above example
undefined B Grade C Grade No Grade
8. LOOPS
The loops are used to iterate the piece of code using for, while, do-while, or for-
in loops.
There are four types of loops in JavaScript.
1.for loop
2.while loop
3.do-while loop
4.for-in loop
 FOR LOOP
for (initialization; condition; increment)
{
code to be executed
}
Let’s see the simple example of for loop in javascript.
<script>
for (i=1; i<=5; i++)
{
document.write(i + "<br/>")
}
</script>
Output:
1
2
3
4
5
 WHILE LOOP
while (condition)
{
code to be executed
}
Let’s see the simple example of while loop in javascript.
<script>
var i=11;
while (i<=15)
{
document.write(i + "<br/>");
i++;
}
</script>
Output:
11
12
13
14
15
 DO WHILE LOOP
do{
code to be executed
}while (condition);
Let’s see the simple example of do while loop in javascript.
<script>
var i=21;
do{
document.write(i + "<br/>");
i++;
}while (i<=25);
</script>
Output:
21
22
23
24
25