JAVA SCRIPT INTRODUCTION

What is JavaScript ?
JavaScript is a dynamic computer programming language. It is lightweight and most
commonly used as a part of web pages, whose implementations allow client-side script to
interact with the user and make dynamic pages. It is an interpreted programming language
with object-oriented capabilities.

JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript,
possibly because of the excitement being generated by Java. JavaScript made its first
appearance in Netscape 2.0 in 1995 with the name LiveScript. The general-purpose core of
the language has been embedded in Netscape, Internet Explorer, and other web browsers.

The ECMA-262 Specification defined a standard version of the core JavaScript language.

 JavaScript is a lightweight, interpreted programming language.

 Designed for creating network-centric applications.
 Complementary to and integrated with Java.
 Complementary to and integrated with HTML.
 Open and cross-platform

Client-Side JavaScript
Client-side JavaScript is the most common form of the language. The script should be
included in or referenced by an HTML document for the code to be interpreted by the
browser.

It means that a web page need not be a static HTML, but can include programs that interact
with the user, control the browser, and dynamically create HTML content.

The JavaScript client-side mechanism provides many advantages over traditional CGI server-
side scripts. For example, you might use JavaScript to check if the user has entered a valid e-
mail address in a form field.

The JavaScript code is executed when the user submits the form, and only if all the entries
are valid, they would be submitted to the Web Server.

JavaScript can be used to trap user-initiated events such as button clicks, link navigation,
and other actions that the user initiates explicitly or implicitly.

Advantages of JavaScript
The merits of using JavaScript are −
  Less server interaction − You can validate user input before sending the page off to
the server. This saves server traffic, which means less load on your server.
 Immediate feedback to the visitors − They don't have to wait for a page reload to
see if they have forgotten to enter something.
 Increased interactivity − You can create interfaces that react when the user hovers
over them with a mouse or activates them via the keyboard.
 Richer interfaces − You can use JavaScript to include such items as drag-and-drop
components and sliders to give a Rich Interface to your site visitors.

Limitations of JavaScript
We cannot treat JavaScript as a full-fledged programming language. It lacks the following
important features −

 Client-side JavaScript does not allow the reading or writing of files. This has been
kept for security reason.
 JavaScript cannot be used for networking applications because there is no such
support available.
 JavaScript doesn't have any multi-threading or multiprocessor capabilities.

Once again, JavaScript is a lightweight, interpreted programming language that allows you
to build interactivity into otherwise static HTML pages.

JavaScript Development Tools

One of major strengths of JavaScript is that it does not require expensive development
tools. You can start with a simple text editor such as Notepad. Since it is an interpreted
language inside the context of a web browser, you don't even need to buy a compiler.

To make our life simpler, various vendors have come up with very nice JavaScript editing
tools. Some of them are listed here −

 Microsoft FrontPage − Microso< has developed a popular HTML editor called

FrontPage. FrontPage also provides web developers with a number of JavaScript
tools to assist in the creation of interactive websites.
 Macromedia Dreamweaver MX − Macromedia Dreamweaver MX is a very popular
HTML and JavaScript editor in the professional web development crowd. It provides
several handy prebuilt JavaScript components, integrates well with databases, and
conforms to new standards such as XHTML and XML.
 Macromedia HomeSite 5 − HomeSite 5 is a well-liked HTML and JavaScript editor
from Macromedia that can be used to manage personal websites effectively.

Where is JavaScript Today ?

The ECMAScript Edition 5 standard will be the first update to be released in over four years.
JavaScript 2.0 conforms to Edition 5 of the ECMAScript standard, and the difference
between the two is extremely minor.

The specification for JavaScript 2.0 can be found on the following site:
http://www.ecmascript.org/

Today, Netscape's JavaScript and Microsoft's JScript conform to the ECMAScript standard,
although both the languages still support the features that are not a part of the standard.

JavaScript – Syntax

JavaScript can be implemented using JavaScript statements that are placed within the
<script>... </script> HTML tags in a web page.

You can place the <script> tags, containing your JavaScript, anywhere within your web page,
but it is normally recommended that you should keep it within the <head> tags.

The <script> tag alerts the browser program to start interpreting all the text between these
tags as a script. A simple syntax of your JavaScript will appear as follows.

<script ...>
JavaScript code
</script>

The script tag takes two important attributes −

 Language − This aBribute specifies what scripDng language you are using. Typically,
its value will be javascript. Although recent versions of HTML (and XHTML, its
successor) have phased out the use of this attribute.
 Type − This aBribute is what is now recommended to indicate the scripDng language
in use and its value should be set to "text/javascript".

<script language = "javascript" type = "text/javascript">

JavaScript code
</script>

Whitespace and Line Breaks

JavaScript ignores spaces, tabs, and newlines that appear in JavaScript programs. You can
use spaces, tabs, and newlines freely in your program and you are free to format and indent
your programs in a neat and consistent way that makes the code easy to read and
understand.

Semicolons are Optional

Simple statements in JavaScript are generally followed by a semicolon character, just as they
are in C, C++, and Java. JavaScript, however, allows you to omit this semicolon if each of
your statements are placed on a separate line. For example, the following code could be
written without semicolons.

Case Sensitivity
JavaScript is a case-sensitive language. This means that the language keywords, variables,
function names, and any other identifiers must always be typed with a consistent
capitalization of letters.

So the identifiers Time and TIME will convey different meanings in JavaScript.

NOTE − Care should be taken while wriDng variable and funcDon names in JavaScript.

Comments in JavaScript
JavaScript supports both C-style and C++-style comments, Thus −

 Any text between a // and the end of a line is treated as a comment and is ignored
by JavaScript.
 Any text between the characters /* and */ is treated as a comment. This may span
multiple lines.
 JavaScript also recognizes the HTML comment opening sequence <!--. JavaScript
treats this as a single-line comment, just as it does the // comment.
 The HTML comment closing sequence --> is not recognized by JavaScript so it should
be written as //-->.

JavaScript in Firefox
Here are the steps to turn on or turn off JavaScript in Firefox −

 Open a new tab → type about: config in the address bar.

 Then you will find the warning dialog. Select I’ll be careful, I promise!
 Then you will find the list of configure options in the browser.
 In the search bar, type javascript.enabled.
 There you will find the option to enable or disable javascript by right-clicking on the
value of that option → select toggle.
If javascript.enabled is true; it converts to false upon clicking toogle. If javascript is disabled;
it gets enabled upon clicking toggle.

JavaScript in Chrome
Here are the steps to turn on or turn off JavaScript in Chrome −

 Click the Chrome menu at the top right hand corner of your browser.
 Select Settings.
 Click Show advanced settings at the end of the page.
 Under the Privacy section, click the Content settings button.
 In the "Javascript" section, select "Do not allow any site to run JavaScript" or "Allow
all sites to run JavaScript (recommended)".

JavaScript in Opera
Here are the steps to turn on or turn off JavaScript in Opera −

 Follow Tools → Preferences from the menu.

 Select Advanced option from the dialog box.
 Select Content from the listed items.
 Select Enable JavaScript checkbox.
 Finally click OK and come out.

To disable JavaScript support in your Opera, you should not select the Enable JavaScript
checkbox.

Warning for Non-JavaScript Browsers

If you have to do something important using JavaScript, then you can display a warning
message to the user using <noscript> tags.

You can add a noscript block immediately after the script block as follows −

<html>
<body>
<script language = "javascript" type = "text/javascript">
<!--
document.write("Hello World!")
//-->
</script>

<noscript>
Sorry...JavaScript is needed to go ahead.
</noscript>
</body>
</html>
Now, if the user's browser does not support JavaScript or JavaScript is not enabled, then the
message from </noscript> will be displayed on the screen.

JavaScript - Placement in HTML File

<html>
<head>
<script type = "text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>

There is a flexibility given to include JavaScript code anywhere in an HTML document.

However the most preferred ways to include JavaScript in an HTML file are as follows −

 Script in <head>...</head> section.

 Script in <body>...</body> section.
 Script in <body>...</body> and <head>...</head> sections.
 Script in an external file and then include in <head>...</head> section.

JavaScript in <body>...</body> section

If you need a script to run as the page loads so that the script generates content in the page,
then the script goes in the <body> portion of the document. In this case, you would not
have any function defined using JavaScript.

JavaScript in <body> and <head> Sections

<html>
<head>
<script type = "text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>

<body>
<script type = "text/javascript">
<!--
document.write("Hello World")
//-->
</script>
 <input type = "button" onclick = "sayHello()" value = "Say Hello" />
</body>
</html>

JavaScript in External File

As you begin to work more extensively with JavaScript, you will be likely to find that there
are cases where you are reusing identical JavaScript code on multiple pages of a site.

You are not restricted to be maintaining identical code in multiple HTML files. The script tag
provides a mechanism to allow you to store JavaScript in an external file and then include it
into your HTML files.

Here is an example to show how you can include an external JavaScript file in your HTML
code using script tag and its src attribute.

<html>
<head>
<script type = "text/javascript" src = "filename.js" ></script>
</head>

<body>
.......
</body>
</html>

JavaScript – Variables

JavaScript Datatypes
One of the most fundamental characteristics of a programming language is the set of data
types it supports. These are the type of values that can be represented and manipulated in a
programming language.

JavaScript allows you to work with three primitive data types −

 Numbers, eg. 123, 120.50 etc.

 Strings of text e.g. "This text string" etc.
 Boolean e.g. true or false.

JavaScript also defines two trivial data types, null and undefined, each of which defines only
a single value. In addition to these primitive data types, JavaScript supports a composite
data type known as object. We will cover objects in detail in a separate chapter.
Note − JavaScript does not make a disDncDon between integer values and floaDng-point
values. All numbers in JavaScript are represented as floating-point values. JavaScript
represents numbers using the 64-bit floating-point format defined by the IEEE 754 standard.

JavaScript Variables
Like many other programming languages, JavaScript has variables. Variables can be thought
of as named containers. You can place data into these containers and then refer to the data
simply by naming the container.

Before you use a variable in a JavaScript program, you must declare it. Variables are
declared with the var keyword as follows.

<script type = "text/javascript">

<!--
var money;
var name;
//-->
</script>

You can also declare multiple variables with the same var keyword as follows −

<script type = "text/javascript">

<!--
var money, name;
//-->
</script>

Storing a value in a variable is called variable initialization. You can do variable initialization
at the time of variable creation or at a later point in time when you need that variable.

For instance, you might create a variable named money and assign the value 2000.50 to it
later. For another variable, you can assign a value at the time of initialization as follows.

<script type = "text/javascript">

<!--
var name = "Ali";
var money;
money = 2000.50;
//-->
</script>

Note − Use the var keyword only for declaration or initialization, once for the life of any
variable name in a document. You should not re-declare same variable twice.

JavaScript is untyped language. This means that a JavaScript variable can hold a value of any
data type. Unlike many other languages, you don't have to tell JavaScript during variable
declaration what type of value the variable will hold. The value type of a variable can change
during the execution of a program and JavaScript takes care of it automatically.
JavaScript Variable Scope
The scope of a variable is the region of your program in which it is defined. JavaScript
variables have only two scopes.

 Global Variables − A global variable has global scope which means it can be defined
anywhere in your JavaScript code.
 Local Variables − A local variable will be visible only within a funcDon where it is
defined. Function parameters are always local to that function.

Within the body of a function, a local variable takes precedence over a global variable with
the same name. If you declare a local variable or function parameter with the same name as
a global variable, you effectively hide the global variable. Take a look into the following
example.

Live Demo
<html>
<body onload = checkscope();>
<script type = "text/javascript">
<!--
var myVar = "global"; // Declare a global variable
function checkscope( ) {
var myVar = "local"; // Declare a local variable
document.write(myVar);
}
//-->
</script>
</body>
</html>

This produces the following result −

local

JavaScript Variable Names

While naming your variables in JavaScript, keep the following rules in mind.

 You should not use any of the JavaScript reserved keywords as a variable name.
These keywords are mentioned in the next section. For example, break or boolean
variable names are not valid.
 JavaScript variable names should not start with a numeral (0-9). They must begin
with a letter or an underscore character. For example, 123test is an invalid variable
name but _123test is a valid one.
 JavaScript variable names are case-sensitive. For example, Name and name are two
different variables.

JavaScript Reserved Words

A list of all the reserved words in JavaScript are given in the following table. They cannot be
used as JavaScript variables, functions, methods, loop labels, or any object names.

abstract else instanceof switch

boolean enum int synchronized
break export interface this
byte extends long throw
case false native throws
catch final new transient
char finally null true
class float package try
const for private typeof
continue function protected var
debugger goto public void
default if return volatile
delete implements short while
do import static with
double in super

JavaScript – Operators

JavaScript supports the following types of operators. Arithmetic Operators, Comparison

Operators, Logical (or Relational) Operators, Assignment Operators, Conditional (or ternary)
Operators.

Arithmetic Operators
 JavaScript supports the following arithmetic operators −

Sr.No. Operator & Description

+ (Addition)

1 Adds two operands

Ex: A + B will give 30

- (Subtraction)

2 Subtracts the second operand from the first

Ex: A - B will give -10

 * (Multiplication)

3 Multiply both operands

Ex: A * B will give 200

/ (Division)

4 Divide the numerator by the denominator

Ex: B / A will give 2

% (Modulus)

5 Outputs the remainder of an integer division

Ex: B % A will give 0

++ (Increment)

6 Increases an integer value by one

Ex: A++ will give 11

-- (Decrement)

7 Decreases an integer value by one

Ex: A-- will give 9

Comparison Operators
JavaScript supports the following comparison operators −

Sr.No. Operator & Description

= = (Equal)

Checks if the value of two operands are equal or not, if yes, then the condition
1
becomes true.

Ex: (A == B) is not true.

!= (Not Equal)

Checks if the value of two operands are equal or not, if the values are not equal, then
2
the condition becomes true.

Ex: (A != B) is true.
 > (Greater than)

Checks if the value of the left operand is greater than the value of the right operand,
3
if yes, then the condition becomes true.

Ex: (A > B) is not true.

< (Less than)

Checks if the value of the left operand is less than the value of the right operand, if
4
yes, then the condition becomes true.

Ex: (A < B) is true.

>= (Greater than or Equal to)

Checks if the value of the left operand is greater than or equal to the value of the
5
right operand, if yes, then the condition becomes true.

Ex: (A >= B) is not true.

<= (Less than or Equal to)

Checks if the value of the left operand is less than or equal to the value of the right
6
operand, if yes, then the condition becomes true.

Ex: (A <= B) is true.

Logical Operators
JavaScript supports the following logical operators −

Sr.No. Operator & Description

&& (Logical AND)

1 If both the operands are non-zero, then the condition becomes true.

Ex: (A && B) is true.

|| (Logical OR)

2 If any of the two operands are non-zero, then the condition becomes true.

Ex: (A || B) is true.
! (Logical NOT)
3
 Reverses the logical state of its operand. If a condition is true, then the Logical NOT
operator will make it false.

Ex: ! (A && B) is false.

Bitwise Operators
JavaScript supports the following bitwise operators −

Assume variable A holds 2 and variable B holds 3, then −

Sr.No. Operator & Description

& (Bitwise AND)

1 It performs a Boolean AND operation on each bit of its integer arguments.

Ex: (A & B) is 2.
| (BitWise OR)

2 It performs a Boolean OR operation on each bit of its integer arguments.

Ex: (A | B) is 3.
^ (Bitwise XOR)

It performs a Boolean exclusive OR operation on each bit of its integer arguments.

3 Exclusive OR means that either operand one is true or operand two is true, but not
both.

Ex: (A ^ B) is 1.
~ (Bitwise Not)

4 It is a unary operator and operates by reversing all the bits in the operand.

Ex: (~B) is -4.

<< (Left Shift)

It moves all the bits in its first operand to the left by the number of places specified
in the second operand. New bits are filled with zeros. Shifting a value left by one
5
position is equivalent to multiplying it by 2, shifting two positions is equivalent to
multiplying by 4, and so on.

Ex: (A << 1) is 4.
>> (Right Shift)
6
Binary Right Shift Operator. The left operand’s value is moved right by the number of
 bits specified by the right operand.

Ex: (A >> 1) is 1.
>>> (Right shift with Zero)

This operator is just like the >> operator, except that the bits shifted in on the left are
7
always zero.

Ex: (A >>> 1) is 1.

Assignment Operators
JavaScript supports the following assignment operators −

Sr.No. Operator & Description

= (Simple Assignment )

1 Assigns values from the right side operand to the left side operand

Ex: C = A + B will assign the value of A + B into C

+= (Add and Assignment)

It adds the right operand to the left operand and assigns the result to the left
2
operand.

Ex: C += A is equivalent to C = C + A
−= (Subtract and Assignment)

It subtracts the right operand from the left operand and assigns the result to the left
3
operand.

Ex: C -= A is equivalent to C = C - A
*= (Multiply and Assignment)

It multiplies the right operand with the left operand and assigns the result to the left
4
operand.

Ex: C *= A is equivalent to C = C * A
/= (Divide and Assignment)

It divides the left operand with the right operand and assigns the result to the left
5
operand.

Ex: C /= A is equivalent to C = C / A
 %= (Modules and Assignment)

6 It takes modulus using two operands and assigns the result to the left operand.

Ex: C %= A is equivalent to C = C % A

Conditional Operator (? :)

The conditional operator first evaluates an expression for a true or false value and then
executes one of the two given statements depending upon the result of the evaluation.

typeof Operator
The typeof operator is a unary operator that is placed before its single operand, which can
be of any type. Its value is a string indicating the data type of the operand.

The typeof operator evaluates to "number", "string", or "boolean" if its operand is a

number, string, or boolean value and returns true or false based on the evaluation.

Here is a list of the return values for the typeof Operator.

Type String Returned by typeof

Number "number"
String "string"
Boolean "boolean"
Object "object"
Function "function"
Undefined "undefined"
Null "object"

JavaScript - if...else Statement

JavaScript supports conditional statements which are used to perform different actions based on
different conditions. Here we will explain the if..else statement.

f statement
The if statement is the fundamental control statement that allows JavaScript to make
decisions and execute statements conditionally.

Syntax

The syntax for a basic if statement is as follows −

if (expression) {
Statement(s) to be executed if expression is true
}

if...else statement
The 'if...else' statement is the next form of control statement that allows JavaScript to
execute statements in a more controlled way.

Syntax
if (expression) {
Statement(s) to be executed if expression is true
} else {
Statement(s) to be executed if expression is false
}

JavaScript – Functions

A function is a group of reusable code which can be called anywhere in your program. This
eliminates the need of writing the same code again and again. It helps programmers in
writing modular codes. Functions allow a programmer to divide a big program into a
number of small and manageable functions.

Like any other advanced programming language, JavaScript also supports all the features
necessary to write modular code using functions. You must have seen functions like alert()
and write() in the earlier chapters. We were using these functions again and again, but they
had been written in core JavaScript only once.

JavaScript allows us to write our own functions as well. This section explains how to write
your own functions in JavaScript.

Function Definition
Before we use a function, we need to define it. The most common way to define a function
in JavaScript is by using the function keyword, followed by a unique function name, a list of
parameters (that might be empty), and a statement block surrounded by curly braces.

Syntax

The basic syntax is shown here.

<script type = "text/javascript">

<!--
function functionname(parameter-list) {
statements
}
//-->
</script>
Function Parameters
Till now, we have seen functions without parameters. But there is a facility to pass different
parameters while calling a function. These passed parameters can be captured inside the
function and any manipulation can be done over those parameters. A function can take
multiple parameters separated by comma.

The return Statement

A JavaScript function can have an optional return statement. This is required if you want to
return a value from a function. This statement should be the last statement in a function.

For example, you can pass two numbers in a function and then you can expect the function
to return their multiplication in your calling program.

JavaScript - Objects

JavaScript is an Object Oriented Programming (OOP) language. A programming language can

be called object-oriented if it provides four basic capabilities to developers −

 Encapsulation − the capability to store related informaDon, whether data or

methods, together in an object.
 Aggregation − the capability to store one object inside another object.
 Inheritance − the capability of a class to rely upon another class (or number of
classes) for some of its properties and methods.
 Polymorphism − the capability to write one funcDon or method that works in a
variety of different ways.

Objects are composed of attributes. If an attribute contains a function, it is considered to be

a method of the object, otherwise the attribute is considered a property.

Object Properties
Object properties can be any of the three primitive data types, or any of the abstract data
types, such as another object. Object properties are usually variables that are used
internally in the object's methods, but can also be globally visible variables that are used
throughout the page.

The syntax for adding a property to an object is −

objectName.objectProperty = propertyValue;

For example − The following code gets the document Dtle using the "title" property of the
document object.

var str = document.title;

Object Methods
Methods are the functions that let the object do something or let something be done to it.
There is a small difference between a function and a method – at a function is a standalone
unit of statements and a method is attached to an object and can be referenced by the this
keyword.

Methods are useful for everything from displaying the contents of the object to the screen
to performing complex mathematical operations on a group of local properties and
parameters.

For example − Following is a simple example to show how to use the write() method of
document object to write any content on the document.

document.write("This is test");

User-Defined Objects
All user-defined objects and built-in objects are descendants of an object called Object.

The “new “Operator

The new operator is used to create an instance of an object. To create an object, the new
operator is followed by the constructor method.

In the following example, the constructor methods are Object(), Array(), and Date(). These
constructors are built-in JavaScript functions.

var employee = new Object();

var books = new Array("C++", "Perl", "Java");
var day = new Date("August 15, 1947");

The Object() Constructor

A constructor is a function that creates and initializes an object. JavaScript provides a special
constructor function called Object() to build the object. The return value of the Object()
constructor is assigned to a variable.

The variable contains a reference to the new object. The properties assigned to the object
are not variables and are not defined with the var keyword.

How to create an Object using java script in html.?

<html>
<head>
<title>User-defined objects</title>
<script type = "text/javascript">
var book = new Object(); // Create the object book
book.subject = "Perl"; // Assign properties to the object
 book.author = "Mohtashim";// Assign properties to the object
</script>
</head>

<body>
<script type = "text/javascript">
document.write("Book name is : " + book.subject + "<br>");
document.write("Book author is : " + book.author + "<br>");
</script>
</body>
</html>

How to create an object with a User-Defined Function?. Here this keyword is used to refer
to the object that has been passed to a function.

<html>
<head>
<title>User-defined objects</title>
<script type = "text/javascript">
function book(title, author)// Pass properties to the object {
this.title = title;
this.author = author;
}
</script>
</head>

<body>
<script type = "text/javascript">
var myBook = new book("Perl", "Mohtashim");//using var create new object and assign values to them
document.write("Book title is : " + myBook.title + "<br>");
document.write("Book author is : " + myBook.author + "<br>");
</script>
</body>
</html>

Defining Methods for an Object

we need to complete the definition of an object by assigning methods to it.
<html>

<head>
<title>User-defined objects</title>
<script type = "text/javascript">
// Define a function which will work as a method
function addPrice(amount) {
this.price = amount;
}

function book(title, author) {

this.title = title;
this.author = author;
this.addPrice = addPrice; // Assign that method as property.
}
</script>
 </head>

<body>
<script type = "text/javascript">
var myBook = new book("Perl", "Mohtashim");
myBook.addPrice(100);

document.write("Book title is : " + myBook.title + "<br>");

document.write("Book author is : " + myBook.author + "<br>");
document.write("Book price is : " + myBook.price + "<br>");
</script>
</body>
</html>

The ‘with’ keyword is used as a kind of shorthand for referencing an object's properties or
methods.

The object specified as an argument to with becomes the default object for the duration of
the block that follows. The properties and methods for the object can be used without
naming the object.

JavaScript Native Objects

JavaScript has several built-in or native objects. These objects are accessible anywhere in
your program and will work the same way in any browser running in any operating system.

Here is the list of all important JavaScript Native Objects −

 JavaScript Number Object

 JavaScript Boolean Object
 JavaScript String Object
 JavaScript Array Object
 JavaScript Date Object
 JavaScript Math Object
 JavaScript RegExp Object

Errors & Exceptions Handling

Syntax errors, also called parsing errors, occur at compile time in traditional programming languages
and at interpret time in JavaScript.

Runtime Errors
Runtime errors, also called exceptions, occur during execution (after
compilation/interpretation).
Logical Errors
Logic errors can be the most difficult type of errors to track down. These errors are not the
result of a syntax or runtime error. Instead, they occur when you make a mistake in the logic
that drives your script and do not get the expected result.

The try...catch...finally Statement

The latest versions of JavaScript added exception handling capabilities. JavaScript
implements the try...catch...finally construct as well as the throw operator to handle
exceptions.

You can catch programmer-generated and runtime exceptions, but you cannot catch
JavaScript syntax errors.

Here is the try...catch...finally block syntax −

<script type = "text/javascript">

<!--
try {
// Code to run
[break;]
}

catch ( e ) {
// Code to run if an exception occurs
[break;]
}

[ finally {
// Code that is always executed regardless of
// an exception occurring
}]
//-->
</script>

The try block must be followed by either exactly one catch block or one finally block (or one
of both). When an exception occurs in the try block, the exception is placed in e and the
catch block is executed. The optional finally block executes unconditionally after try/catch.

The throw Statement

Use “throw” statement to raise your built-in exceptions or your customized exceptions.
Later these exceptions can be captured and you can take an appropriate action.

The onerror() Method

The onerror event handler was the first feature to facilitate error handling in JavaScript. The
error event is fired on the window object whenever an exception occurs on the page.

JavaScript HTML DOM

When a web page is loaded, the browser creates a Document Object Model of the page. With the
object model, JavaScript gets all the power it needs to create dynamic HTML:

 JavaScript can change all the HTML elements in the page

 JavaScript can change all the HTML attributes in the page
 JavaScript can change all the CSS styles in the page
 JavaScript can remove existing HTML elements and attributes
 JavaScript can add new HTML elements and attributes
 JavaScript can react to all existing HTML events in the page
 JavaScript can create new HTML events in the page

HTML DOM methods are actions you can perform (on HTML Elements).

HTML DOM properties are values (of HTML Elements) that you can set or change.

The DOM Programming Interface

The HTML DOM can be accessed with JavaScript (and with other programming languages).

In the DOM, all HTML elements are defined as objects.

The programming interface is the properties and methods of each object.

A property is a value that you can get or set (like changing the content of an HTML
element).

A method is an action you can do (like add or deleting an HTML element).

Finding HTML Elements

Method Description
document.getElementById(id) Find an element by element id
document.getElementsByTagName(name) Find elements by tag name
document.getElementsByClassName(name) Find elements by class name
Changing HTML Elements
Property Description
element.innerHTML = new html content Change the inner HTML of an element
Change the attribute value of an HTML
element.attribute = new value
element
element.style.property = new style Change the style of an HTML element
Method Description
Change the attribute value of an HTML
element.setAttribute(attribute, value)
element

Adding and Deleting Elements

Method Description
document.createElement(element) Create an HTML element
document.removeChild(element) Remove an HTML element
document.appendChild(element) Add an HTML element
document.replaceChild(new, old) Replace an HTML element
document.write(text) Write into the HTML output stream

Adding Events Handlers

Method Description
document.getElementById(id).onclick = Adding event handler code to an onclick
function(){code} event

Finding HTML Objects

The first HTML DOM Level 1 (1998), defined 11 HTML objects, object collections, and
properties. These are still valid in HTML5.

Later, in HTML DOM Level 3, more objects, collections, and properties were added.

Property Description DOM

document.anchors Returns all <a> elements that have a name attribute 1
document.applets Returns all <applet> elements (Deprecated in HTML5) 1
document.baseURI Returns the absolute base URI of the document 3
document.body Returns the <body> element 1
document.cookie Returns the document's cookie 1
document.doctype Returns the document's doctype 3
document.documentElement Returns the <html> element 3
document.documentMode Returns the mode used by the browser 3
document.documentURI Returns the URI of the document 3
document.domain Returns the domain name of the document server 1
document.domConfig Obsolete. Returns the DOM configuration 3
document.embeds Returns all <embed> elements 3
document.forms Returns all <form> elements 1
document.head Returns the <head> element 3
document.images Returns all <img> elements 1
document.implementation Returns the DOM implementation 3
document.inputEncoding Returns the document's encoding (character set) 3
document.lastModified Returns the date and time the document was updated 3
Returns all <area> and <a> elements that have a href
document.links 1
attribute
document.readyState Returns the (loading) status of the document 3
document.referrer Returns the URI of the referrer (the linking document) 1
document.scripts Returns all <script> elements 3
document.strictErrorChecking Returns if error checking is enforced 3
document.title Returns the <title> element 1
document.URL Returns the complete URL of the document 1

Finding HTML Elements

Often, with JavaScript, you want to manipulate HTML elements. To do so, have to find the
elements first. There are several ways to do this:

 Finding HTML elements by id

 Finding HTML elements by tag name
 Finding HTML elements by class name
 Finding HTML elements by CSS selectors
 Finding HTML elements by HTML object collections

The following HTML objects (and object collections) are also accessible:

 document.anchors
 document.body
 document.documentElement
 document.embeds
 document.forms
 document.head
  document.images
 document.links
 document.scripts
 document.title

JavaScript - Changing CSS

Using Events
The HTML DOM allows you to execute code when an event occurs.

Events are generated by the browser when "things happen" to HTML elements:

 An element is clicked on
 The page has loaded
 Input fields are changed

What is Page Redirection ?

You might have encountered a situation where you clicked a URL to reach a page X but
internally you were directed to another page Y. It happens due to page redirection. This
concept is different from JavaScript Page Refresh.

There could be various reasons why you would like to redirect a user from the original page.
We are listing down a few of the reasons −

 You did not like the name of your domain and you are moving to a new one. In such
a scenario, you may want to direct all your visitors to the new site. Here you can
maintain your old domain but put a single page with a page redirection such that all
your old domain visitors can come to your new domain.
 You have built-up various pages based on browser versions or their names or may be
based on different countries, then instead of using your server-side page redirection,
you can use client-side page redirection to land your users on the appropriate page.
 The Search Engines may have already indexed your pages. But while moving to
another domain, you would not like to lose your visitors coming through search
engines. So you can use client-side page redirection. But keep in mind this should not
be done to fool the search engine, it could lead your site to get banned.

How Page Re-direction Works ?

The implementations of Page-Redirection are as follows.
Example 1

It is quite simple to do a page redirect using JavaScript at client side. To redirect your site
visitors to a new page, you just need to add a line in your head section as follows.

Live Demo
<html>
<head>
<script type = "text/javascript">
<!--
function Redirect() {
window.location = "https://www.tutorialspoint.com";
}
//-->
</script>
</head>

<body>
<p>Click the following button, you will be redirected to home page.</p>

<form>
<input type = "button" value = "Redirect Me" onclick = "Redirect();" />
</form>

</body>
</html>