MODULE 2
JAVASCRIPT
JavaScript
JavaScript is a programming language that can be included on web pages to make
them more interactive. We can use it to check or modify the contents of forms,
change images, open new windows, and write dynamic page content. We can
even use it with CSS to make DHTML (Dynamic HyperText Markup Language).
JavaScripts only execute on the pages that are on our browser window at any set
time. When the user stops viewing that page, any scripts that were running on it
are immediately stopped. The only exceptions are cookies or various client-side
storage APIs, which can be used by many pages to store and pass information
between them, even after the pages have been closed.
JavaScript, originally nicknamed LiveWire and then LiveScript when it was created
by Netscape, should be called ECMAscript as it was renamed when Netscape
passed it to the ECMA for standardization. JavaScript is a client-side, interpreted,
object-oriented, high-level scripting language, while Java is a client-side, compiled,
object-oriented high-level language.
Features of JavaScript
Client-side programming runs on the user's computer.
Programs are passed to the computer that the browser is on, and that
computer runs the script.
JavaScript code is typically embedded in the HTML.
It is used to make web pages more interactive.
It executes on our web browser window.
Interpreted and run by the client‘s browser.
The file is stored using the extension .js
JavaScript code is case-sensitive.
White space between words and tabs are ignored.
Line breaks are ignored except within a statement.
JavaScript statements end with a semi-colon ;
Disadvantages: The limit of control and problems with operating systems and
web browsers.
Client-Side Scripting
Programs are passed to the computer that the browser is on, and that computer
runs them. The alternative is server side, where the program is run on the server
and only the results are passed to the computer that the browser is on. Examples
of this would be PHP, Perl, ASP, JSP etc.
Client-side programming runs on the user's computer. The programs are passed
to the computer that the browser is on, and that computer runs the script. But,
the problem is the limit of control and problems with operating systems and web
browsers.
Script Tag
The <SCRIPT> tag alerts a browser that JavaScript code follows. It is typically
embedded in the HTML. The <script> tag is used to define a client-side script, such
as JavaScript. The <script> element either contains scripting statements, or it
points to an external script file through the src attribute. Common uses for
JavaScript are image manipulation, form validation, and dynamic changes of
content. The script tag has two purposes:
1. It identifies a block of script in the page.
2. It loads a script file.
Which it does depends on the presence of the src attribute. A </script> close tag
is required in either case.
A script tag can contain these attributes:
1. src="url"
If it is present, then its value is a url which identifies a .js file. The loading
and processing of the page pauses while the browser fetches, compiles, and
executes the file.
2. language="javascript"
This attribute specifies what scripting language you are using. Typically, its
value will be javascript.
3. type="text/javascript"
This attribute is what is now recommended to indicate the scripting
language in use and its value should be set to "text/javascript".
Example:
<html>
<head>
<script language="javascript" type="text/javascript">
documents.write("Welcome to the script tag test page.");
</script>
</head>
<body>
<h2>Good Morning</h2>
</body>
</html>
Javascript Comments
Comments can be added to explain the JavaScript, or to make the code more
readable.
JavaScript Single-Line Comments
Single line comments start with //. The following example uses single line
comments to explain the code:
Example:
<script type="text/javascript" language="javascript">
// Write a heading
document.write("<h1>This is a heading</h1>");
// Write two paragraphs:
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>
JavaScript Multi-Line Comments
Multi line comments start with /* and end with */. The following example uses a
multi line comment to explain the code:
Example:
<script type="text/javascript" language="javascript">
/*
The code below will write
one heading and two paragraphs
*/
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>
Using Comments at the End of a Line
In the following example the comment is placed at the end of a code line:
Example:
<script type="text/javascript">
document.write("Hello"); // Write "Hello"
document.write(" Dolly!"); // Write " Dolly!"
</script>
Variables
Variables are used to store data. A variable's value can change during the
execution of a script. We can refer to a variable by its name to display or change
its value. The rules for JavaScript variable names:
1. Variable names are case sensitive (num and NUMBER are two different
variables)
2. Variable names must begin with a letter, the $ character, or the underscore
character.
3. Because JavaScript is case-sensitive, variable names are case-sensitive.
Declaring JavaScript Variables
Creating variables in JavaScript is most often referred to as "declaring" variables.
We declare JavaScript variables with the var keyword:
var x;
var carname;
After the declaration shown above, the variables are empty (they have no values
yet). However, we can also assign values to the variables when we declare them:
var x=5;
var carname="Volvo";
After the execution of the statements above, the variable x will hold the value 5,
and carname will hold the value Volvo. When we assign a text value to a variable,
use quotes around the value. If we re-declare a JavaScript variable, it will not lose
its value.
Local JavaScript Variables
A variable declared within a JavaScript function becomes LOCAL and can only be
accessed within that function (the variable has local scope). We can have local
variables with the same name in different functions, because local variables are
only recognized by the function in which they are declared. Local variables are
destroyed when we exit the function.
Global JavaScript Variables
Variables declared outside a function become GLOBAL, and all scripts and
functions on the web page can access it. Global variables are destroyed when we
close the page. If we declare a variable, without using "var", the variable always
becomes GLOBAL.
If we assign values to variables that have not yet been declared, the variables will
automatically be declared as global variables. These statements:
var x=5;
var carname="Volvo";
It will declare the variables x and carname as global variables (if they don't already
exist).
Including JavaScript in Html
We have to include JavaScript code in HTML using three deferent ways
Within <head> tag
<html>
<head>
<script type="text/javascript" language="javascript">
document.write("Good Morning");
</script>
</head>
<body>
<p>Welcome to JavaScript</p>
</body>
</html>
Within <body> tag
<html>
<head> </head>
<body>
<p>Welcome to JavaScript</p>
<script type="text/javascript" language="javascript">
document.write("Good Morning");
</script>
</body>
</html>
Using external .js file
We can use the SRC attribute of the <SCRIPT> tag to call JavaScript code from an
external text file. This is useful if we have a lot of code or we want to run it from
several pages, because any number of pages can call the same external JavaScript
file. The text file itself contains no HTML tags.
Example:
<html>
<head>
<script type="text/javascript" language="javascript" src="mysript.js">
</script>
</head>
<body>
<p>Welcome to GEMS College</p>
</body>
</html>
The myscript.js file containing the following code only:
document.write("Good Afternoon");
document.write("Helloo");
Data Types
JavaScript is a dynamic type language, means you don't need to specify type of
the variable because it is dynamically used by JavaScript engine. You need to use
var here to specify the data type. It can hold any type of values such as numbers,
strings etc. For example:
var a = 40; //holding number
var b = "Hello"; //holding string
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 (Complex) data type
Primitive Data Type
1. String
Strings are used for storing text. Strings must be inside of either double or
single quotes.
var str1 = "It is alright, ";
var str2 = `He is Johnny`;
var str3 = 'Good Morning "Tomy"';
2. Number
There is only one type of Number is used to represent positive or negative
numbers with or without a decimal point.
var x = 125;
var y = x + 3.7;
var z= x + y;
3. Boolean
A boolean represents only one of two values: true, or false.
var bval = false;
OR
var bval = true;
4. Null
Null has one value: null. It is explicitly nothing. A null value means that
there is no value. It is not equivalent to an empty string ("") or 0, it is simply
nothing.
var a = null;
5. Undefined
The meaning of undefined is “value is not assigned”. If a variable is declared,
but not assigned, then its value is undefined:
var car;
Non-Primitive (Complex) Data Type
1. Object
The object is a complex data type that allows you to store collections of
data. An object contains properties, defined as a key-value pair. A property
key (name) is always a string, but the value can be any data type, like
strings, numbers, booleans, or complex data types like arrays, function and
other objects.
Example:
<script type = “text/javascript” language="javascript">
var person = {
firstName : "Adnan",
lastName : "Sami",
age : 50,
eyeColor : "blue"
};
</script>
2. Array
An array is a type of object used for storing multiple values in single
variable. Each value (also called an element) in an array has a numeric
position, known as its index, and it may contain data of any data type-
numbers, strings, booleans, functions, objects, and even other arrays. The
array index starts from 0, so that the first array element is arr[0]. The
simplest way to create an array is by specifying the array elements as a
comma-separated list enclosed by square brackets.
Example:
var colors = ["Red", "Yellow", "Green", "Orange"];
var cities = ["London", "Paris", "New York"];
document.write(colors[0]); // Output: Red
document.write(cities[2]); // Output: New York
3. Function
JavaScript doesn’t have a function data type but when we find the data
type of a function using the typeof operator, we find that it returns a
function. This is because a function is an object in JavaScript. Ideally the
data type of a function should return an object but instead, it returns a
function.
Example:
function greetings()
{
return ("Hello World!");
}
typeof(greetings); // This will return data type function
Operators in JavaScript
1. Arithmetic Operators
Arithmetic operators are used to perform arithmetic between variables
and/or values.
2. Assignment Operators
Assignment operators are used to assign values to JavaScript variables.
3. String Operators
The + operator can also be used to add string variables or text values
together. To add two or more string variables together, use the + operator.
Example:
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
After the execution of the statements above, the variable txt3 contains
"What a very nice day". To add a space between the two strings, insert a
space into one of the strings.
Example:
txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;
or insert a space into the expression:
txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;
After the execution of the statements above, the variable txt3 contains
"What a very nice day"
4. Relational (Comparison) Operators
Comparison operators are used in logical statements to determine equality
or difference between variables or values.
5. Logical Operators
Logical operators are used to determine the logic between variables or
values.
CONDITIONAL STATEMENTS
In JavaScript we have the following conditional statements:
1. If Statement
This statement to execute some code only if a specified condition is true.
Syntax:
if (condition)
//code to be executed if condition is true
Note: if is written in lowercase letters. Using uppercase letters (IF) will
generate a JavaScript error.
Example:
<script>
var myAge = 20;
var yourAge = 21;
if(myAge < yourAge)
document.write("My Age is LESS than your Age");
</script>
2. If...else Statement
This statement to execute some code if the condition is true and another
code if the condition is false.
Syntax:
if (condition)
//code to be executed if condition is true
else
code to be executed if condition is not true
Example:
<script>
var myAge = 22;
var yourAge = 20;
if(myAge < yourAge)
document.write("My Age is Less than your Age");
else
{
document.write("My Age is Greater than your Age");
</script>
3. If...else if...else Statement
This statement to select one of many blocks of code to be executed.
Syntax:
if (condition1)
//code to be executed if condition1 is true
else if (condition2)
//code to be executed if condition2 is true
else
//code to be executed if neither condition1 nor condition2 is true
Example:
<script type="text/javascript">
var a = 10;
var b = 5;
if (a>b)
document.write("<b>a is larger than b</b>");
else if (a<b)
document.write("<b>b is larger than a</b>");
else
document.write("<b>a nd b are equal</b>");
</script>
4. Switch Statement
This statement to select one of many blocks of code to be executed.
Syntax:
switch(n)
case 1:
//execute code block 1
break;
case 2:
//execute code block 2
break;
default:
//code to be executed if n is different from case 1 and 2
First we have a single expression n (most often a variable), that is evaluated
once. The value of the expression is then compared with the values for
each case in the structure. If there is a match, the block of code associated
with that case is executed. Use break to prevent the code from running into
the next case automatically.
Example:
<script type = "text/javascript">
var grade = 'C';
switch (grade) {
case 'A':
document.write("Good job<br />");
break;
case 'B':
document.write("Pretty good<br />");
break;
case 'C':
document.write("Average<br />");
break;
case 'D':
document.write("Not so good<br />");
break;
case 'F':
document.write("Failed<br />");
break;
default:
document.write("Unknown Grade<br />")
</script>
Loops
Loops execute a block of code a specified number of times, or while a specified
condition is true. Often when you write code, you want the same block of code to
run over and over again in a row. Instead of adding several almost equal lines in a
script we can use loops to perform a task like this. In JavaScript, there are two
different kinds of loops:
1. The for Loop
The for loop is used when you know in advance how many times the script
should run. For loop repeats until a specified condition evaluates to false
Syntax:
for (initialization; condition; increment/decrement)
//code to be executed
}
For statement includes the following three important parts:
The loop initialization where we initialize our counter to a starting
value. The initialization statement is executed before the loop begins.
The test statement which will test if a given condition is true or not.
If the condition is true, then the code given inside the loop will be
executed, otherwise the control will come out of the loop.
The iteration statement where we can increase or decrease our
counter.
We can put all the three parts in a single line separated by
semicolons.
Example:
2. The while loop
The while loop loops through a block of code while a specified condition is
true.
The condition is evaluated before executing the statement
Syntax:
while (condition)
//code to be executed
Example:
3. The do...while Loop
The do...while loop is a variant of the while loop. This loop will execute the
block of code ONCE, and then it will repeat the loop as long as the specified
condition is true. Don’t miss the semicolon after the while statement
Syntax:
do
//code to be executed
while (condition);
Example:
Loop Control Statements
1. Break Statement
The break statement, which was briefly introduced with the switch
statement, is used to exit a loop early, breaking out of the enclosing curly
braces.
Example:
Output:
2. Continue Statement
The continue statement tells the interpreter to immediately start the next
iteration of the loop and skip the remaining code block. When a continue
statement is encountered, the program flow moves to the loop check
condition immediately and if the condition remains true, then it starts the
next iteration, otherwise the control comes out of the loop.
Example:
Output:
Output Functions
Two output functions are used in JavaScript
1. Write() method outputs one or more values to the screen without a
newline character.
2. Writeln() method outputs one or more values to the screen with a newline
character.
Example:
<html>
<body>
<p>Note that write() does NOT add a new line after each statement:</p>
<script type="text/javascript" language="javascript">
document.write("Hello World!");
document.write("Have a nice day!");
</script>
<p>Note that writeln() add a new line after each statement:</p>
<script type="text/javascript" language="javascript">
document.writeln("Hello World!");
document.writeln("Have a nice day!");
</script>
</body>
</html>
Popup Boxes
In JavaScript, three types of popups are used
1. Alert Box
An alert box is often used if we want to make sure information comes
through to the user. When an alert box pops up, the user will have to click
"OK" to proceed.
Syntax:
alert("some text");
Example:
Output:
2. Confirm Box
A confirm box is often used if we want the user to verify or accept
something. When a confirm box pops up, the user will have to click either
"OK" or "Cancel" to proceed. If the user clicks "OK", the box returns true. If
the user clicks "Cancel", the box returns false.
Syntax:
confirm("some text");
Example:
Output:
3. Prompt Box
A prompt box is often used if we want the user to input a value before
entering a page. When a prompt box pops up, the user will have to click
either "OK" or "Cancel" to proceed after entering an input value. If the user
clicks "OK" the box returns the input value. If the user clicks "Cancel" the
box returns null.
Syntax:
prompt("some text");
Example:
Output:
Functions
There are two types of functions:
1. Built-in Functions
2. User Defined Functions
Built-in Functions
1. Alert()
2. Confirm()
3. Prompt()
4. isNan()
It determines whether a value is NaN or not. The NaN means Not-a-
Number. It checks the value is an illegal number. This function will returns
Boolean value. That is, it returns true if the value equates to NaN.
Otherwise, it returns false.
Example:
isNan(123); //returns false
isNan(“hello”); //returns true
5. Number()
It is used to convert a specified object into a number. It converts variable to
number
Example:
Number(true); //return 1
Number(123); //return 123
Number(“hello”); //return NaN
6. parseInt()
The parseInt() function parses a string argument and returns an integer of
the specified radix (the base in mathematical numeral systems). The radix
parameter is used to specify which numeral system to be used. If the string
cannot be converted to an integer value, NaN is returned
Syntax: parseInt(value, radix);
User Defined Function
A function will be executed by an event or by a call to the function. To keep the
browser from executing a script when the page loads, you can put your script into
a function. A function contains code that will be executed by an event or by a call
to the function. We may call a function from anywhere within a page (or even
from other pages if the function is embedded in an external .js file). Functions can
be defined both in the <head> and in the <body> section of a document. However,
to assure that a function is read/loaded by the browser before it is called, it could
be wise to put functions in the <head> section. Every function should begin with
the keyword function followed by function name. The function name should be
unique. A list of parameters enclosed within parenthesis and separated by comma.
A list of statement composing the body of the function enclosed within curly
braces { }. Function can be called (invoked) by typing its name followed by a set of
parenthesis. Function can return a value (result) back to the script using return
statement.
Syntax:
function function_name(var1,var2,...,varX)
{
//function body
The parameters var1, var2, etc. are variables or values passed into the function.
The { and the } defines the start and end of the function. A function with no
parameters must include the parentheses () after the function name. Do not
forget about the importance of capitals in JavaScript! The word function must be
written in lowercase letters, otherwise a JavaScript error occurs! Also note that
we must call a function with the exact same capitals as in the function name.
Example:
<html>
<head>
<script type="text/javascript">
function fact()
var n = 5;
var f = 1;
for(i=1;i<=n;i++)
f = f * i;
}
document.write("the factorial of "+n+" is: "+f);
</script>
</head>
<body>
<script type="text/javascript">
fact();
</script>
</body>
</html>
Calling Functions With Timer
To execute a function after a certain period of time, we use setTimeout(). Its basic
syntax is setTimeout(function, milliseconds) This function accepts two parameters:
A function, which is the function to execute. An optional delay parameter, in
milliseconds
Example 1:
<html>
<head>
<script type="text/javascript" language="javascript">
function display()
alert("Good Morning");
}
</script>
</head>
<body>
<script type="text/javascript" language="javascript">
setTimeout(display,3000);
</script>
</body>
</html>
To execute a function repeatedly, starting after the interval of time, then
repeating continuously at that interval, we can use setInterval(). Its basic syntax is
setInterval(function, milliseconds);
Example 2:
<html>
<head>
<script type="text/javascript" language="javascript">
function display()
alert("Good Morning");
}
</script>
</head>
<body>
<script type="text/javascript" language="javascript">
setInterval(display,3000);
</script>
</body>
</html>
Javascript Events
By using JavaScript, we have the ability to create dynamic web pages. Events are
actions that can be detected by JavaScript. Every element on a web page has
certain events which can trigger a JavaScript.
1. onClick
We can use the onClick event of a button element to indicate that a
function will run when a user clicks on the button. We define the events in
the HTML tags. Execute a JavaScript when the user clicks on an element.
Events are normally used in combination with functions, and the function
will not be executed before the event occurs.
Example:
<html> <head>
<script>
function display() {
alert("onclick event ");
</script> </head>
<body>
<form >
<input type="button" onclick="display()" value="Click Me" />
</form>
</body>
</html>
2. onLoad
The onload event occurs immediately after a page is loaded. The onload is
triggered when the user enters the web page. The onLoad event is often
used to check the visitor's browser type and browser version, and load the
proper version of the web page based on the information. The onLoad
event is also often used to deal with cookies that should be set when a user
enters a web page. For example, we could have a popup asking for the
user's name upon his first arrival to our page. The name is then stored in a
cookie.
Example:
<html> <head>
<script>
function display() {
alert("onload event ");
</script> </head>
<body>
<form >
<input type="button" onload="display()" value="Click Me" />
</form>
</body>
</html>
3. onBlur()
It occurs when an object loses focus. The onblur event is most often used
with form validation code. When the user leaves a form field, it will occur.
The onblur event is the opposite of the onfocus event.
Example:
<html>
<body>
Enter your name: <input type="text" id="fname" onblur="display()">
<h3>When the focus is lost, the input text converts into upper case.</h3>
<script>
function display()
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
</script>
</body>
</html>
4. onChange
The onchange event occurs when the content of an element, the selection,
or the checked state have changed. The onchange event occurs when the
value of an element has been changed. For radio buttons and checkboxes,
the onchange event occurs when the checked state has been changed. Only
works on <input>, <textarea> and <select> elements.
Example:
<html>
<body>
Enter your name: <input type="text" id="fname" onChange="display()">
<h3>When the focus is lost, the input text converts into upper case.</h3>
<script>
function display()
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
</script>
</body>
</html>
5. onSubmit
The onsubmit event occurs when the submit button in a form is clicked. The
onSubmit event is used to validate ALL form fields before submitting it.
Below is an example of how to use the onSubmit event. The checkForm()
function will be called when the user clicks the submit button in the form. If
the field values are not accepted, the submit should be cancelled. The
function checkForm() returns either true or false. If it returns true the form
will be submitted, otherwise the submit will be cancelled:
Example:
<html>
<body>
<h3>When you submit the form, a function is triggered which alerts some
text.</h3>
<form action="server.php" onsubmit="display()">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
function display()
alert("The form was submitted Sucessfully.... ");
</script>
</body>
</html>
Document Object Model (DOM)
The Document Object Model (DOM) is a programming interface for HTML and
XML documents. It represents the page so that programs can change the
document structure, style, and content. The DOM represents the document as
nodes and objects. That way, programming languages can connect to the page. A
Web page is a document. This document can be either displayed in the browser
window or as the HTML source. But it is the same document in both cases. The
Document Object Model (DOM) represents that same document so it can be
manipulated. The DOM is an object-oriented representation of the web page,
which can be modified with a scripting language such as JavaScript.
The Document Object Model (DOM) is an application programming interface (API)
for manipulating HTML and XML documents. The DOM represents a document as
a tree of nodes. It provides API that allows you to add, remove, and modify parts
of the document effectively. Note that the DOM is cross-platform and language-
independent ways of manipulating HTML and XML documents. JavaScript can
access all the elements in a webpage making use of Document Object Model
(DOM). In fact, the web browser creates a DOM of the webpage when the page is
loaded. The DOM model is created as a tree of objects like this:
String Object
A string is a sequence of letters, numbers, special characters, or combinations of
all. It is a global object is used to store strings. A string can be any text inside
double or single quotes:
String Property
Length: Returns the length of a string
The following table lists the standard methods of the String object.
Example:
<html>
<body>
<script type="text/javascript" language=”javascript>
var str="Hello, Good Morning to All, Have a Nice Day!<br>";
document.write(str);
document.write("<BR>The length is: <BR> " +str.length);
var pos = str.indexOf("Morning");
document.write("<br>The position of Morning is:");
document.write("<br>"+pos);
var up=str.toUpperCase();
document.write(up);
var lw=str.toLowerCase();
document.write(lw);
var sub=str.substring(15,30);
document.write(sub);
</script>
</body>
<html>
Date Object
The Date object is a datatype built into the JavaScript. The date objects are
created with the new Date() constructor. By default, JavaScript will use the
browser's time zone and display a date as a full text string:
Mon Jul 20 2020 17:33:21 GMT+0530 (India Standard Time)
Most methods simply allow us to get and set the year, month, day, hour, minute,
second, and millisecond fields of the object.
There are 4 ways to create a new date object:
1. new Date()
2. new Date(milliseconds)
3. new Date(date string)
4. new Date(year, month, day, hours, minutes, seconds, milliseconds)
Date Property
Example:
<html>
<body>
var d = new Date();
document.write(d);
var d1 = new Date(2018, 11, 24, 10, 33, 30, 38);
document.getElementById("demo").innerHTML = d1;
var d2 = new Date(2018, 11, 24);
document.write("<br><br>"+d2);
var d = new Date();
document.write("The current Year is: "+d.getFullYear());
document.write("<br>The current Month is: "+d.getMonth());
document.write("<br>The current Date is: "+d.getDate());
document.write("<br>The current Hours is: "+d.getHours());
document.write("<br>The current Minute is: "+d.getMinutes());
document.write("<br>The current Second is: "+d.getSeconds());
document.write("<br>The current Milliseconds is: "+d.getMilliseconds());
document.write("<br>The current Day is: "+d.getDay());
</script>
</body>
<html>
Array Object
An array is a type of object used for storing multiple values in a single variable. A
fixed-size sequential collection of elements of the same type. Each value in an
array has a numeric position, called index. The array index starts from zero (0)
var cars = [“Hyundai", "Volvo", "BMW"];
Array Property
Example:
<html>
<body>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var fname=["Raju", "Kumar", "Babu", "Arjun","Lakshmi", "Divya"];
document.write("<br>"+fruits.toString());
document.write("<br>The No. of elements in array is: "+fruits.length);
document.write("<br>The deleted element is: "+fruits.pop());
document.write("<br>"+fruits.toString());
document.write("<br>Now No. of elements in array is: "+fruits.length);
document.write("<br>Adding two elements");
fruits.push("Grape","Chicku");
document.write("<br>"+fruits.toString());
document.write("<br>Now No. of elements in array is: "+fruits.length);
document.write("<br>Reverseof the array is: "+fruits.reverse());
document.write("<br>"+fruits.toString());
document.write("<br>Sorted array is: "+fruits.sort());
document.write("<br>"+fruits.toString());
</script>
</body>
</html>
