UNIT-3:

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("Rohit")
</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
1. CONVENTIONS
a. Names must start with a letter(a-z, A-Z), _ or $
b. 0-9
c. Case sensitive. a and A are different.

4.2. SCOPE OFA 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 the 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 a="CSE3A"; //holding string
5.1. 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 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 will have it later.
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.
5.2. 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
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
6.1. 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
6.2. 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
6.3. 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
6.4. 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
6.5. 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
6.6. 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.
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
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
7.1.1. 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
7.1.2. 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
7.1.3. 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
7.1.4. 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
The switch statement is fall-through i.e., all the cases will be evaluated if you
don't use the break statement.
Let’s understand the behavior of the switch statement in JavaScript.
<script>
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
8.1. 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
8.2. 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
8.3. 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
10. FUNCTIONS
Functions are used to perform operations. Declared functions are not executed
immediately. They are "saved for later use", and will be executed later, whn they
are invoked (called upon). We can call the JavaScript function many times to
reuse the code.
Advantages of JavaScript function
There are mainly two advantages of JavaScript functions.
1.Code reusability: We can call a function several times so it saves coding.
2.Less coding: It makes our program compact. We don’t need to write many lines
of code each time to perform a common task.
10.1. FUNCTION SYNTAX
The syntax of declaring function is given below.
function functionName([arg1, arg2, ...argN]){
//code to be executed
}
Functions can have 0 or more arguments.
<script>
function msg(){
alert("hello! this is message");
}
</script>
<input type="button" onclick="msg()" value="call function"/>
10.2. FUNCTION ARGUMENTS
We can call the function by passing arguments. Let’s see the example of a
function that has one argument.
<script>
function getcube(number){
alert(number*number*number);
}
</script>
<form>
<input type="button" value="click" onclick="getcube(4)"/>
</form>
10.3. FUNCTION EXPRESSIONS
A JavaScript function can also be defined using an expression. A function
expression can be stored in a variable. After a function expression has been stored
in a variable, the variable can be used as a function.
<script>
var x = function (a, b) {return a * b};
document.write(x(4, 3));
</script>
The function above is actually an anonymous function (a function without a
name). Functions stored in variables do not need function names. They are
always invoked (called) using the variable name.
10.5. FUNCTION HOISTING
Hoisting is a JavaScript mechanism where variables and function declarations
are moved to the top of their scope before code execution. Inevitably, this means
that no matter where functions and variables are declared, they are moved to the
top of their scope regardless of whether their scope is global or local.
<script>
myFunction(5);

function myFunction(y) {
return y * y;
}
</script>
10.6. FUNCTION WITH RETURN VALUE
We can call a function that returns a value and use it in our program. Let’s see
the example of a function that returns a value.
<script>
function getInfo(){
return "hello ! How r u?";
}
</script>
<script>
document.write(getInfo());
</script>
Output of the above example
hello! How r u?
11. DISPLAY POPUP MESSAGE BOX
JavaScript provides different built-in functions to display popup messages for
different purposes e.g. to display a simple message or display a message and
take the user's confirmation on it or display a popup to take a user's input value.
11.1. ALERT BOX
Use alert() function to display a popup message to the user. This popup will
have OK button to close the popup.
alert("This is alert box!"); // display string message
alert(100); // display 100

alert(true); // display true

The alert function can display messages of any data type e.g., string, number,
boolean, etc. There is no need to convert a message to string type.
11.2. CONFIRM BOX
Sometimes you need to take the user's confirmation to proceed. For example,
you want to take the user's confirmation before saving updated data or deleting
existing data. In this scenario, use JavaScript built-in function confirm(). The
confirm() function displays a popup message to the user with two
buttons, OK and Cancel. You can check which button the user has clicked and
proceed accordingly.
<script>
if (confirm("Do you want to save changes?") == true) {
document.write("Data saved successfully!")
} else {
document.write("Save Cancelled!")
}
</script>
11.3. PROMPT BOX
Sometimes you may need to take the user's input to do further actions on a web
page. For example, you want to calculate EMI based on users' preferred tenure
of the loan. For this kind of scenario, use JavaScript built-in function prompt().
The prompt function takes two string parameters. The first parameter is the
message to be displayed and the second parameter is the default value which
will be in the input text when the message is displayed.
Syntax:

prompt([string message], [string defaultValue]);

Example:
<script>
var tenure = prompt("Please enter preferred tenure in years", "15");
 if (tenure != null) {
alert("You have entered " + tenure + " years" );
}
</script>
As you can see in the above example, we have specified a message as the first
parameter and default value "15" as the second parameter. The prompt function
returns a user-entered value. If the user has not entered anything then it returns
null. So, it is recommended to check null before proceeding.
Note:
The alert, confirm and prompt functions are global functions. So it can also be
called using window object like window.alert(), window.confirm() and
window.prompt().
 Points to Remember:
1. Popup message can be shown using global functions - alert(), confirm() and
prompt().
2. alert() function displays popup message with 'Ok' button.
3. confirm() function display popup message with 'Ok' and 'Cancel' buttons. Use
confirm() function to take the user's confirmation to proceed.
4. prompt() function enables you to take the user's input with 'Ok' and 'Cancel'
buttons. prompt() function returns value entered by the user. It returns null if
the user does not provide any input value.
12. JAVASCRIPT USER-DEFINED 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.
1. CREATING OBJECTS
There are 3 ways to create objects.
i. By object literal
ii. By creating instance of Object directly (using the new keyword)
iii. By using an object constructor (using the new keyword)
BY OBJECT LITERAL
The syntax of creating an object using object literal is given below:
object = {property1:value1, property2:value2.....propertyN:valueN}
property and value pair are separated by: (colon).
Let’s see the simple example of creating object in JavaScript.
<script>
emp={id:102,name:"Shyam Kumar",salary:40000}
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>

Output of the above example

102 Shyam Kumar 40000
BY CREATING INSTANCE OF OBJECT
The syntax of creating object directly is given below:
var objectname=new Object();
Here, new keyword is used to create an object.
Let’s see the example of creating object directly.
<script>
var emp=new Object();
emp.id=101;
emp.name="Sumit Singh";
emp.salary=50000;
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
Output of the above example
101 Sumit Singh 50000
BY USING AN OBJECT CONSTRUCTOR
Here, you need to create a function with arguments. Each argument value can
be assigned to the current object by using this keyword.
This keyword refers to the current object.
The example of creating object by object constructor is given below.
<script>
function emp(id,name,salary){
this.id=id;
this.name=name;
this.salary=salary;
}
e=new emp(103,"Rakesh",30000);
document.write(e.id+" "+e.name+" "+e.salary);
</script>
Output of the above example
103 Rakesh 30000
12.3. DEFINING METHOD IN JAVASCRIPT OBJECT
We can define a method in the JavaScript object. But before defining the
method, we need to add a property in the function with the same name as the
method.
<script>
function emp(id,name,salary){
this.id=id;
this.name=name;
this.salary=salary;
this.changeSalary=changeSalary;

function changeSalary(otherSalary){ // can be defined outside/inside the constructor

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

Output of the above example

103 ABC 30000
103 ABC 45000
13. JS BUILT-IN OBJECTS: ARRAY
JavaScript array is an object that represents a collection of elements.
There are 2 ways to construct an array in JavaScript
1.Using array literal
2.Using new keyword
13.1. BY ARRAY LITERAL
The syntax of creating array using array literal is given below:
var arrayname = [value1, value2, .....,valueN];
for eg.
var elements = [1,2,3, ‘a’, ‘b’, ‘c’];
values are contained inside [ ] and separated by , (comma).
<script>
var ele=["A","B","C"];
for (i=0;i<ele.length;i++){
document.write(ele[i] + "<br/>");
}
</script>
The length property returns the length of an array.
Output of the above example
A
B
C
13.2. Using new keyword
The syntax of creating array directly is given below:
var arrayname = new Array();
Here, new keyword is used to create instance of array.
<script>
var i;
var ele = new Array();
ele[0] = "Arun";
ele[1] = "Varun";
ele[2] = "John";
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>
Output of the above example
Arun
Varun
John
Array’s Parameterized constructor
<script>
var emp=new Array("Jai", "Vijay", "Smith");
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>
Output of the above example
Jai
Vijay
Smith
13.2. ARRAY METHODS
a. concat() Method
The JavaScript array concat() method combines two or more arrays and returns
a new string. This method doesn't make any change in the original array. Also,
it doesn’t remove the duplicate elements.
The concat() method is represented by the following syntax:
array.concat(arr1,arr2,....,arrn)

<script>
var arr1=["C","C++","Python"];
var arr2=["Java","JavaScript","Android"];
var result=arr1.concat(arr2);
 document.writeln(result);
</script>
Output:
C,C++,Python,Java,JavaScript,Android
b. pop() method
The JavaScript array pop() method removes the last element from the given
array and returns that element. This method changes the length of the original
array.
Syntax:
The pop() method is represented by the following syntax:
array.pop()
Return
The last element of the given array.
Example 1
Here, we will pop an element from the given array.
<script>
var arr=["AngularJS","Node.js","JQuery"];
document.writeln("Orginal array: "+arr+"<br>");
document.writeln("Extracted element: "+arr.pop()+"<br>");
document.writeln("Remaining elements: "+ arr);
</script>
Output:
Orginal array: AngularJS,Node.js,JQuery
Extracted element: JQuery
Remaining elements: AngulaJS,Node.js

Example 2
In this example, we will pop all the elements from the given array.
<script>
 var arr=["AngulaJS","Node.js","JQuery"];
var len=arr.length;
for(var x=1;x<=len;x++)
{
document.writeln("Extracted element: "+arr.pop()+"<br>");
}
</script>
Output:
Extracted element: JQuery
Extracted element: Node.js
Extracted element: AngulaJS
c. push() method
The JavaScript array push() method adds one or more elements to the end of
the given array. This method changes the length of the original array.
Syntax
The push() method is represented by the following syntax:
array.push(element1,element2....elementn)
Parameter
element1, element2....elementn - The elements to be added.
Return
The original array with added elements.
Let's see some examples of push() method
Example 1
Here, we will add an element in the given array.
<script>
var arr=["AngularJS","Node.js"];
arr.push("JQuery");
document.writeln(arr);
</script>
Output:
AngularJS,Node.js,JQuery

Example 2
Let's see an example to add more than one element in the given array.
<script>
 var arr=["AngularJS","Node.js"];
document.writeln("Length before invoking push(): "+arr.length+"<br>");
arr.push("JQuery","Bootstrap");
document.writeln("Length after invoking push(): "+arr.length+"<br>");
document.writeln("Update array: "+arr);
</script>
Output:
Length before invoking push(): 2
Length after invoking push(): 4
Update array: AngularJS,Node.js,JQuery,Bootstrap

d. Array reverse() method

The JavaScript array reverse() method changes the sequence of elements of the
given array and returns the reverse sequence. In other words, the array’s last
element becomes the first and the first element becomes the last. This method
also made the changes in the original array.
Syntax
The reverse() method is represented by the following syntax:
array.reverse()
Return
The original array elements are in reverse order.
Example
<script>
var arr=["AngulaJS","Node.js","JQuery"];
var rev=arr.reverse();
document.writeln(rev);
</script>
Output:
JQuery,Node.js,AngulaJS
e. shift() method
The JavaScript array shift() method removes the first element of the given
array and returns that element. This method changes the length of the original
array.
Syntax
The shift() method is represented by the following syntax:
array. shift()
Return
The first element of an array.
Example
<script>
var arr=["AngularJS","Node.js","JQuery"];
var result=arr.shift();
document.writeln(result);
</script>
Output:
AngularJS
f. Array slice() method
The JavaScript array slice() method extracts the part of the given array and
returns it. This method doesn't change the original array. The slice() method
creates a new array. It does not remove any elements from the source array.
Similar to slicing in Python
Syntax
The slice() method is represented by the following syntax:
array.slice(start,end)
Parameter
start - It is optional. It represents the index from where the method starts to
extract the elements.
end - It is optional. It represents the index at where the method stops extracting
elements.
Return
A new array contains the extracted elements.
Example 1
Let's see a simple example to extract an element from the given array.
<script>
var arr=["AngularJS","Node.js","JQuery","Bootstrap"]
var result=arr.slice(1,2);
document.writeln(result);
</script>
Output:
Node.js

Example 2
Let's see one more example to extract various element from the given array.
<script>
var arr=["AngularJS","Node.js","JQuery","Bootstrap"]
var result=arr.slice(0,3);
document.writeln(result);
</script>
Output:
AngularJS,Node.js,JQuery
Example 3
In this example, we will provide the negative values as index to extract elements.
<script>
var arr=["AngularJS","Node.js","JQuery","Bootstrap"]
var result=arr.slice(-4,-1);
document.writeln(result);
</script>
Output:
AngularJS,Node.js,JQuery
g. sort() method
The JavaScript array sort() method is used to arrange the array elements in some
order. By default, sort() method follows the ascending order.
Syntax
The sort() method is represented by the following syntax:
array.sort(compareFunction)
Parameter
compareFunction - It is optional. It represents a function that provides an
alternative sort order.
Return
An array of sorted elements
Example 1
Let's see a simple example to sort the array of string elements.
<script>
var arr=["AngularJS","Node.js","JQuery","Bootstrap"]
var result=arr.sort();
document.writeln(result);
</script>
Output:
AngularJS,Bootstrap,JQuery,Node.js

Example 2
<script>
var arr=[2,4,1,8,5];
var result=arr.sort();
 document.writeln(result);
</script>
Output:
1,2,4,5,8

Any compareFunction has the following syntax:

function (a, b){
// sorting logic
// return a Number
}
The sort() method compares all values of the array by passing two values at a
time to the compareFunction. The two parameters a and b represent these two
values respectively.
The compareFunction should return a Number. This returned value is used to
sort the elements in the following way:
• If returned value < 0, a is sorted before b ( a comes before b).
• If returned value > 0, b is sorted before a ( b comes before a ).

• If returned value == 0, a and b remain unchanged relative to each other.

Example 3. Sort the array using length:

// custom sorting an array of strings
var names = ["Adam", "Jeffrey", "Fabiano", "Danil", "Ben"];

function len_compare(a, b){

return a.length - b.length;
}

// sort according to string length

names.sort(len_compare);

console.log(names);
 function len_compare(a, b){
return a.length - b.length;
}
Here:
• If a.length - b.length < 0, a comes before b. For example, "Adam" comes
before "Jeffrey" as 4 - 7 < 0.
• If a.length - b.length > 0, b comes before a. For example, "Danil" comes
after "Ben" as 5 - 3 > 0.
• If a.length - b.length == 0, their position is unchanged. For example, the relative

position of "Jeffrey" and "Fabiano" is unchanged because 7 - 7 == 0.

We can see that this results in the sorting of strings according to their length in
ascending order.
Example 4
Let's see an example to extract minimum value from an array.
<script>
var arr=[2,4,1,8,5]
var result=arr.sort(); //1,2,4,5,8
document.writeln(arr[0]);
</script>
Output:
1
Example 5
Let's see an example to extract maximum value from an array.
<script>
var arr=[2,4,1,8,5]
 var result=arr.sort().reverse(); // 8,5,4,2,1
document.writeln(arr[0]);
</script>
Output:
8
h. toString() Method
The toString() method is used for converting and representing an array into
string form. It returns the string containing the specified array elements.
Commas separate these elements, and the string does not affect the original
array.
Syntax
The following syntax represents the toString() method:
array.toString()
Parameters
It does not have any parameters.
Return
It returns a string that contains all the elements of the specified array.
Example 1: Converting a given array into string form seperated by commas.
<html>
<head> <h3>Array Methods</h3> </br>
</head>
<body>
<script>
var arr=['a','b','c','d','e','f','g','h','i','j']; //array elements
var str=arr.toString(); //toString() method implementation
document.write("After converting into string: "+str);
</script>
</body>
</html>

Example2: Converting an array 'season' into string form.

<html>
<head>
<h3>Array Methods</h3> </br>
</head>
<body>
<script>
var season=["Spring","Autumn","Summer","Winter"];
var str=season.toString(); //toString() method implementation
document.write("After converting into string: "+str);
</script>
</body>
</html>
Example3: Converting an array containing numeric values into string.
<html>
<head>
<h5> Array Methods </h5> </br>
</head>
<body>
<script>
var arr=["1","2","3","4"];
document.write(arr.toString()); //After converting into string.
</script>
</br></br>
</body>
</html>
i. unshift() method
The JavaScript Array unshift() method adds one or more elements to the
beginning of an array and returns the new length of the array.
The syntax of the unshift() method is:

arr.unshift(element1, element2, ..., elementN)

Here, arr is an array.

unshift() Parameters
The unshift() method takes in an arbitrary number of elements to add to the
array.
Return value from unshift()
Returns the new (after adding arguments to the beginning of the array) length of
the array upon which the method was called.
Notes:
This method changes the original array and its length.
Example: Using unshift() method
var languages = ["JavaScript", "Python", "Java", "Lua"];
var count = languages.unshift("C++");
console.log(languages); // [ 'C++', 'JavaScript', 'Python', 'Java', 'Lua']
console.log(count); // 5

var priceList = [12, 21, 35];

var count1 = priceList.unshift(44, 10, 1.6);
console.log(priceList); // [ 44, 10, 1.6, 12, 21, 35]
console.log(count1); // 6
Output
[ 'C++', 'JavaScript', 'Python', 'Java', 'Lua']
5
[ 44, 10, 1.6, 12, 21, 35]
6
 j. splice() method
The JavaScript Array splice() method returns an array by changing
(adding/removing) its elements in place.
The syntax of the splice() method is:

arr.splice(start, deleteCount, item1, ..., itemN)

Here, arr is an array.

splice() Parameters
The splice() method takes in:
• start - The index from where the array is changed.
• deleteCount (optional) - The number of items to remove from start.
• item1, ..., itemN (optional) - The elements to add to the start index. If not
specified, splice() will only remove elements from the array.
Return value from splice()
Returns an array containing the deleted elements.
Note: The splice() method changes the original array.

Example 1: Using splice() method

languages = ["JavaScript", "Python", "Java", "Lua"];

// replacing "Java" & "Lua" with "C" & "C++"

removed = languages.splice(2, 2, "C", "C++");
console.log(removed); // [ 'Java', 'Lua' ]
console.log(languages); // [ 'JavaScript', 'Python', 'C', 'C++' ]
// adding elements without deleting existing elements
removed1 = languages.splice(1, 0, "Java", "Lua");
console.log(removed1); // []
console.log(languages); // [ 'JavaScript', 'Java', 'Lua', 'Python', 'C', 'C++' ]

// removing 3 elements
removed = languages.splice(2, 3);
console.log(removed2); // [ 'Lua', 'Python', 'C' ]
console.log(languages); // [ 'JavaScript', 'Java', 'C++' ]

Output
[ 'Java', 'Lua' ]
[ 'JavaScript', 'Python', 'C', 'C++' ]
[]
[ 'JavaScript', 'Java', 'Lua', 'Python', 'C', 'C++' ]
[ 'Lua', 'Python', 'C' ]
[ 'JavaScript', 'Java', 'C++' ]

14. JS BUILT-IN OBJECTS: STRING

The String is an object that represents a sequence of characters.
There are 2 ways to create strings in JavaScript
i. By string literal
ii. By string object (using the new keyword)
i) BY STRING LITERAL
The string literal is created using double-quotes. The syntax of creating a string
using string literal is given below:
var stringname="string value";
Let's see the simple example of creating string literal.
<script>
var str="This is string literal";
document.write(str);
</script>
Output:
This is string literal
ii) By string object (using new keyword)
The syntax of creating a string object using a new keyword is given below:
var stringname=new String("string literal");
Here, new keyword is used to create instance of string.
Let's see the example of creating string in JavaScript by new keyword.
<script>
var stringname=new String("hello javascript string");
document.write(stringname);
</script>

Output:
hello javascript string
14.2. STRING METHODS
Let's see the list of JavaScript string methods with examples.
a) charAt(index) Method
The JavaScript String charAt() method returns the character at the given index.
<script>
var str="javascript";
document.write(str.charAt(2));
</script>
Output:
v
b) concat(str) Method
The JavaScript String concat(str) method concatenates or joins two strings.
<script>
var s1="javascript ";
var s2="concat example";
var s3=s1.concat(s2);
document.write(s3);
</script>
Output:
javascript concat example
c) indexOf(str) Method
The JavaScript String indexOf(str) method returns the index position of the
given string.
<script>
var s1="javascript from indexof";
var n=s1.indexOf("from");
document.write(n);
</script>
Output:
11
d) lastIndexOf(str) Method
The JavaScript String lastIndexOf(str) method returns the last index position of
the given string.
<script>
var s1="javascript from indexof";
var n=s1.lastIndexOf("java");
document.write(n);
</script>
Output:
16
e) toLowerCase() Method
The JavaScript String toLowerCase() method returns the given string in
lowercase letters.
<script>
var s1="JavaScript toLowerCase Example";
var s2=s1.toLowerCase();
document.write(s2);
</script>
Output:
javascript tolowercase example
f) toUpperCase() Method
The JavaScript String toUpperCase() method returns the given string in
uppercase letters.
<script>
var s1="JavaScript toUpperCase Example";
var s2=s1.toUpperCase();
document.write(s2);
</script>
Output:
JAVASCRIPT TOUPPERCASE EXAMPLE
g) slice(beginIndex, endIndex) Method
The JavaScript String slice(beginIndex, endIndex) method returns the parts of
string from given beginIndex to endIndex. In slice() method, beginIndex is
inclusive and endIndex is exclusive.
<script>
var s1="abcdefgh";
var s2=s1.slice(2,5);
document.write(s2);
</script>
Output:
cde
h) trim() Method
The JavaScript String trim() method removes leading and trailing whitespaces
from the string.
<script>
var s1=" javascript trim ";
var s2=s1.trim();
document.write(s2);
</script>
Output:
javascript trim
i) split() Method
<script>
var str="This is javascript";
document.write(str.split(" ")); //splits the given string.
</script>
 15. EVENT HANDLING
1. INTRODUCTION TO EVENT HANDLING

• Event Handling is a routine that processes actions, such as keystrokes and

mouse movements.
• It is the receipt of an event at some event handler from an event producer and
subsequent processes.
15.3. EVENT HANDLERS
Event Handler Description
onAbort It executes when the user aborts loading an image.
It executes when the input focus leaves the field of a text,
onBlur
textarea or a select option.
It executes when the input focus exits the field after the user
onChange
modifies its text.
In this, a function is called when an object in a button is
onClick clicked, a link is pushed, a checkbox is checked or an image
map is selected.
It executes when an error occurs while loading a document or
onError
an image.
It executes when input focus enters the field by tabbing in or
onFocus
by clicking but not selecting input from the field.
 onLoad It executes when a window or image finishes loading.
The JavaScript code is called when the mouse is placed over a
onMouseOver
specific link or an object.
The JavaScript code is called when the mouse leaves a
onMouseOut
specific link or an object.
It executes when the user resets a form by clicking on the
onReset
reset button.
It executes when the user selects some of the text within a text
onSelect
or textarea field.
onSubmit It calls when the form is submitted.
onUnload It calls when a document is exited.
15.4. EXAMPLES
15.4.1. MOUSE EVENTS
15.4.2. CLICK EVENT
Submit
Button
15.4.3. ONLOAD EVENT
15.4.4. KEY EVENTS
16. FORM VALIDATION
16.1. NAME AND PASSWORD VALIDATION
15.2. VALIDATING DROPDOWN
15.3. VALIDATING EMAIL ADDRESS
15.4. CONFIRM PASSWORD VALIDATION
16.1 HTML Document Object Model
• The DOM is a structural representation of a HTML document;
it represents the document as a collection of nodes.
• HTML elements, text inside HTML elements and
comments are represented as element nodes, text nodes and
comment nodes, respectively.

<html>
<head>
<title>About Nodes</title>
</head>
<body>
<p>Text 1</p>
<p>Text 2</p>
</body>
</html>
16.1 HTML Document Object Model
• The DOM above contains two types of nodes: element nodes
and text nodes.
• Elements nodes are represented using angle brackets. There are
a total of 6 element
nodes: <html>, <head>, <title>, <body> and two <p> nodes.
• These element nodes are arranged to show the parent-child and
sibling relationships between them.
• Let’s consider the <head> node.
• If you study the HTML document, you can see that
the <head>…</head> tags are enclosed within
the <html> opening tag and the </html> closing tag.
• Hence, the <head> element is a child of
the <html> element. Therefore, the <head> node is placed
under the <html> node in the DOM diagram.
16.1 HTML Document Object Model
• The <body>…</body> tags are also enclosed within the
<html>…</html> tags in the HTML document.
• Hence, the <body> element is also a child of the <html>
element and is considered a sibling of the <head> element.
• Thus, the <body> node is on the same level as the <head>
node in the DOM diagram.
• Within the <head>…</head> tags in the HTML document, we
have the <title>…</title> tags.
• In other words, the <title> element is a child of the <head>
element.
• The <title> node is thus placed below the <head> node in the
DOM diagram.
• In short, if a certain HTML element is enclosed within another
HTML element in the HTML document, the former will be
represented as a child node of the latter in the DOM diagram.
16.2 Selecting Nodes in DOM
• Nodes in the DOM can be accessed and modified in Javascript.
• In order to access nodes in DOM, we need to use the document
object.
• The document object is a built-in Javascript object that
represents the HTML document.
• It comes with a few useful methods and properties for
accessing and modifying DOM nodes.
16.2 Selecting Nodes in DOM
<html>
<head>
<title>DOM Practice</title>
</head>
<body>
<div id = "first">The first div tag</div>
<div class = "myclass">The second div tag</div>
<div class = "myclass">The third div tag</div>
<script type="text/javascript" src="chap7.js"></script>
</body>
</html>
16.2 Selecting Nodes in DOM
16.2.1 getElementById()
• The first method that we will be using is the
getElementById() method.
• This method allows us to select an element in Javascript using
its id attribute. For instance, the first <div> element has id =
"first".
• To select this element using its id, we write
• document.getElementById("first");
• The getElementById() method simply selects the element
and returns the selected element to the caller
16.2 Selecting Nodes in DOM
16.2.2 textContent and innerHTML
To change the text enclosed within this element, we can use
either the textContent or the innerHTML property.

var firstDiv = document.getElementById("first");

firstDiv.textContent = "I've changed";

In the code above, we first assign the result of getElementById()

to a variable called firstDiv.
Next, we use the textContent property of the selected element to
change the text enclosed within it.
16.2 Selecting Nodes in DOM
• If we want to change the formatting of the text as well? For
instance, what if we want the text to be in italics?
• To do that, we can use the <em>…</em> HTML tags. Try
changing line 2 above to

firstDiv.textContent = "<em>I've changed</em>";

• The <em> and </em> tags are printed on the webpage instead
of being recognised as HTML code.
• If you want the browser to interpret <em>…</em> as HTML
tags, you need to use the innerHTML property. Change the
line to
firstDiv.innerHTML = "<em>I've changed</em>";
• In other words, the browser now recognizes <em> and </em>
as tags and displays the text in italics.
16.2 Selecting Nodes in DOM
16.2.3 getElementsByClassName()
This method selects all the elements that have a certain class
name.
Hence, the method name is getElementsByClassName (plural)
instead of getElementByClassName (singular).
The elements selected are returned as an array.
var myclassDiv =
document.getElementsByClassName("myclass");
myclassDiv[0].textContent = "MyClass 1";
myclassDiv[1].textContent = "MyClass 2";
16.2 Selecting Nodes in DOM
16.2.4 getElementsByTagName()
This method allows us to select elements using tag names.
Similar to the getElementsByClassName() method above, this
method returns more than one element.
Specifically, it returns all the elements that have a certain tag
name. The elements are returned as an array.

document.getElementsByTagName("div")[0].textContent = "Tag
Name 1";
document.getElementsByTagName("div")[1].textContent = "Tag
Name 2";
document.getElementsByTagName("div")[2].textContent = "Tag
Name 3";