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 − Microsoft 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 attribute specifies what scripting 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 attribute is what is now recommended to indicate the scripting
language in use and its value should be set to "text/javascript".

So your JavaScript segment will look like −

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

Your First JavaScript Code

Let us take a sample example to print out "Hello World". We added an
optional HTML comment that surrounds our JavaScript code. This is to save
our code from a browser that does not support JavaScript. The comment
ends with a "//-->". Here "//" signifies a comment in JavaScript, so we add
that to prevent a browser from reading the end of the HTML comment as a
piece of JavaScript code. Next, we call a function document.write which
writes a string into our HTML document.

This function can be used to write text, HTML, or both. Take a look at the
following code.

<html>

<body>

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

<!--

document.write("Hello World!")

//-->
 </script>

</body>

</html>

This code will produce the following result −

Hello World!

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.

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

<!--

var1 = 10

var2 = 20

//-->

</script>

But when formatted in a single line as follows, you must use semicolons −

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

<!--

var1 = 10; var2 = 20;

//-->

</script>
Note − It is a good programming practice to use 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 writing variable and function 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 //-->.

Example
The following example shows how to use comments in JavaScript.

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

<!--

// This is a comment. It is similar to comments in C++

/*

* This is a multi-line comment in JavaScript

* It is very similar to comments in C Programming

 */

//-->

</script>

All the modern browsers come with built-in support for JavaScript.
Frequently, you may need to enable or disable this support manually. This
chapter explains the procedure of enabling and disabling JavaScript support
in your browsers: Internet Explorer, Firefox, chrome, and Opera.

JavaScript in Internet Explorer

Here are simple steps to turn on or turn off JavaScript in your Internet
Explorer −

 Follow Tools → Internet Options from the menu.

 Select Security tab from the dialog box.
 Click the Custom Level button.
 Scroll down till you find Scripting option.
 Select Enable radio button under Active scripting.
 Finally click OK and come out

To disable JavaScript support in your Internet Explorer, you need to

select Disable radio button under Active scripting.

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.

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.

In the following section, we will see how we can place JavaScript in an

HTML file in different ways.

JavaScript in <head>...</head> section

If you want to have a script run on some event, such as when a user clicks
somewhere, then you will place that script in the head as follows −
Live Demo

<html>

<head>

<script type = "text/javascript">

<!--

function sayHello() {

alert("Hello World")

}
 //-->

</script>

</head>

<body>

<input type = "button" onclick = "sayHello()" value = "Say Hello" />

</body>

</html>

This code will produce the following results −

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. Take a look at the following code.
Live Demo

<html>

<head>

</head>

<body>

<script type = "text/javascript">

<!--

document.write("Hello World")

//-->

</script>

<p>This is web page body </p>

 </body>

</html>

This code will produce the following results −

JavaScript in <body> and <head> Sections

You can put your JavaScript code in <head> and <body> section altogether
as follows −
Live Demo

<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>

This code will produce the following result −

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 srcattribute.

<html>

<head>

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

</head>

<body>

.......

</body>

</html>

To use JavaScript from an external file source, you need to write all your
JavaScript source code in a simple text file with the extension ".js" and then
include that file as shown above.

For example, you can keep the following content in filename.jsfile and
then you can use sayHello function in your HTML file after including the
filename.js file.
function sayHello() {
alert("Hello World")
}
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 distinction between integer values and
floating-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 varkeyword 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 function 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.

break export interface this

byte extends long throw

case false Abstract else instanceof swit

catch final Boolean enum int synchro

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

What is an Operator?
Let us take a simple expression 4 + 5 is equal to 9. Here 4 and 5 are
called operands and ‘+’ is called the operator. JavaScript supports the
following types of operators.

 Arithmetic Operators

 Comparison Operators

 Logical (or Relational) Operators

 Assignment Operators

 Conditional (or ternary) Operators

Arithmetic Operators
Example
The following code shows how to use arithmetic operators in JavaScript.
Live Demo

<html>

<body>

<script type = "text/javascript">

<!--

var a = 33;

var b = 10;

var c = "Test";

var linebreak = "<br />";

document.write("a + b = ");

result = a + b;

document.write(result);

document.write(linebreak);

document.write("a - b = ");

result = a - b;

document.write(result);

document.write(linebreak);

document.write("a / b = ");

result = a / b;

document.write(result);

document.write(linebreak);

document.write("a % b = ");

result = a % b;

document.write(result);

document.write(linebreak);

document.write("a + b + c = ");

result = a + b + c;

document.write(result);

document.write(linebreak);

a = ++a;

document.write("++a = ");
 result = ++a;

document.write(result);

document.write(linebreak);

b = --b;

document.write("--b = ");

result = --b;

document.write(result);

document.write(linebreak);

//-->

</script>

Set the variables to different values and then try...

</body>

</html>

Output
a + b = 43
a - b = 23
a / b = 3.3
a % b = 3
a + b + c = 43Test
++a = 35
--b = 8
Set the variables to different values and then try...

Comparison Operators
Example
The following code shows how to use comparison operators in JavaScript.
Live Demo

<html>

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

<!--

var a = 10;

var b = 20;

var linebreak = "<br />";

document.write("(a == b) => ");

result = (a == b);

document.write(result);

document.write(linebreak);

document.write("(a < b) => ");

result = (a < b);

document.write(result);

document.write(linebreak);

document.write("(a > b) => ");

result = (a > b);

document.write(result);

document.write(linebreak);

document.write("(a != b) => ");

result = (a != b);

document.write(result);

document.write(linebreak);

document.write("(a >= b) => ");

 result = (a >= b);

document.write(result);

document.write(linebreak);

document.write("(a <= b) => ");

result = (a <= b);

document.write(result);

document.write(linebreak);

//-->

</script>

Set the variables to different values and different operators and then try...

</body>

</html>

Output
(a == b) => false
(a < b) => true
(a > b) => false
(a != b) => true
(a >= b) => false
a <= b) => true
Set the variables to different values and different operators and then try...

Logical Operators
Example
Try the following code to learn how to implement Logical Operators in
JavaScript.
Live Demo

<html>

<body>

<script type = "text/javascript">

 <!--

var a = true;

var b = false;

var linebreak = "<br />";

document.write("(a && b) => ");

result = (a && b);

document.write(result);

document.write(linebreak);

document.write("(a || b) => ");

result = (a || b);

document.write(result);

document.write(linebreak);

document.write("!(a && b) => ");

result = (!(a && b));

document.write(result);

document.write(linebreak);

//-->

</script>

<p>Set the variables to different values and different operators and then
try...</p>

</body>

</html>

Output
(a && b) => false
(a || b) => true
!(a && b) => true
Set the variables to different values and different operators and then try...

Bitwise Operators
Example
Try the following code to implement Bitwise operator in JavaScript.
Live Demo

<html>

<body>

<script type = "text/javascript">

<!--

var a = 2; // Bit presentation 10

var b = 3; // Bit presentation 11

var linebreak = "<br />";

document.write("(a & b) => ");

result = (a & b);

document.write(result);

document.write(linebreak);

document.write("(a | b) => ");

result = (a | b);

document.write(result);

document.write(linebreak);

document.write("(a ^ b) => ");

result = (a ^ b);

document.write(result);
 document.write(linebreak);

document.write("(~b) => ");

result = (~b);

document.write(result);

document.write(linebreak);

document.write("(a << b) => ");

result = (a << b);

document.write(result);

document.write(linebreak);

document.write("(a >> b) => ");

result = (a >> b);

document.write(result);

document.write(linebreak);

//-->

</script>

<p>Set the variables to different values and different operators and then
try...</p>

</body>

</html>
(a & b) => 2
(a | b) => 3
(a ^ b) => 1
(~b) => -4
(a << b) => 16
(a >> b) => 0
Set the variables to different values and different operators and then try...

Assignment Operators
Example
Try the following code to implement assignment operator in JavaScript.
Live Demo

<html>

<body>

<script type = "text/javascript">

<!--

var a = 33;

var b = 10;

var linebreak = "<br />";

document.write("Value of a => (a = b) => ");

result = (a = b);

document.write(result);

document.write(linebreak);

document.write("Value of a => (a += b) => ");

result = (a += b);

document.write(result);

document.write(linebreak);

document.write("Value of a => (a -= b) => ");

result = (a -= b);

document.write(result);

document.write(linebreak);

document.write("Value of a => (a *= b) => ");

 result = (a *= b);

document.write(result);

document.write(linebreak);

document.write("Value of a => (a /= b) => ");

result = (a /= b);

document.write(result);

document.write(linebreak);

document.write("Value of a => (a %= b) => ");

result = (a %= b);

document.write(result);

document.write(linebreak);

//-->

</script>

<p>Set the variables to different values and different operators and then
try...</p>

</body>

</html>

Output
Value of a => (a = b) => 10
Value of a => (a += b) => 20
Value of a => (a -= b) => 10
Value of a => (a *= b) => 100
Value of a => (a /= b) => 10
Value of a => (a %= b) => 0
Set the variables to different values and different operators and then try...

Miscellaneous Operator
Conditional Operator (? :)
Example
Try the following code to understand how the Conditional Operator works in
JavaScript.
Live Demo

<html>

<body>

<script type = "text/javascript">

<!--

var a = 10;

var b = 20;

var linebreak = "<br />";

document.write ("((a > b) ? 100 : 200) => ");

result = (a > b) ? 100 : 200;

document.write(result);

document.write(linebreak);

document.write ("((a < b) ? 100 : 200) => ");

result = (a < b) ? 100 : 200;

document.write(result);

document.write(linebreak);

//-->

</script>

<p>Set the variables to different values and different operators and then
try...</p>

</body>

</html>
Output
((a > b) ? 100 : 200) => 200
((a < b) ? 100 : 200) => 100
Set the variables to different values and different operators and then try...

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"

Example
The following code shows how to implement typeof operator.
Live Demo
<html>

<body>

<script type = "text/javascript">

<!--

var a = 10;

var b = "String";

var linebreak = "<br />";

result = (typeof b == "string" ? "B is String" : "B is Numeric");

document.write("Result => ");

document.write(result);

document.write(linebreak);

result = (typeof a == "string" ? "A is String" : "A is Numeric");

document.write("Result => ");

document.write(result);

document.write(linebreak);

//-->

</script>

<p>Set the variables to different values and different operators and then
try...</p>

</body>

</html>

Output
Result => B is String
Result => A is Numeric
Set the variables to different values and different operators and then try...
Control Statements :
if statement
Example
Try the following example to understand how the if statement works.
Live Demo

<html>

<body>

<script type = "text/javascript">

<!--

var age = 20;

if( age > 18 ) {

document.write("<b>Qualifies for driving</b>");

//-->

</script>

<p>Set the variable to different value and then try...</p>

</body>

</html>

Output
Qualifies for driving
Set the variable to different value and then try...

if...else statement
Example
Try the following code to learn how to implement an if-else statement in
JavaScript.
Live Demo
<html>

<body>

<script type = "text/javascript">

<!--

var age = 15;

if( age > 18 ) {

document.write("<b>Qualifies for driving</b>");

} else {

document.write("<b>Does not qualify for driving</b>");

//-->

</script>

<p>Set the variable to different value and then try...</p>

</body>

</html>

Output
Does not qualify for driving
Set the variable to different value and then try...

if...else if... statement

Example
Try the following code to learn how to implement an if-else-if statement in
JavaScript.
Live Demo

<html>

<body>

<script type = "text/javascript">

<!--
 var book = "maths";

if( book == "history" ) {

document.write("<b>History Book</b>");

} else if( book == "maths" ) {

document.write("<b>Maths Book</b>");

} else if( book == "economics" ) {

document.write("<b>Economics Book</b>");

} else {

document.write("<b>Unknown Book</b>");

//-->

</script>

<p>Set the variable to different value and then try...</p>

</body>

<html>

Output
Maths Book
Set the variable to different value and then try...

switch statement
Example
Try the following example to implement switch-case statement.
Live Demo

<html>

<body>

<script type = "text/javascript">

<!--

var grade = 'A';

 document.write("Entering switch block<br />");

switch (grade) {

case 'A': document.write("Good job<br />");

break;

case 'B': document.write("Pretty good<br />");

break;

case 'C': document.write("Passed<br />");

break;

case 'D': document.write("Not so good<br />");

break;

case 'F': document.write("Failed<br />");

break;

default: document.write("Unknown grade<br />")

document.write("Exiting switch block");

//-->

</script>

<p>Set the variable to different value and then try...</p>

</body>

</html>

Output
Entering switch block
Good job
Exiting switch block
Set the variable to different value and then try...

The while Loop

Example
Try the following example to implement while loop.
Live Demo

<html>

<body>

<script type = "text/javascript">

<!--

var count = 0;

document.write("Starting Loop ");

while (count < 10) {

document.write("Current Count : " + count + "<br />");

count++;

document.write("Loop stopped!");

//-->

</script>

<p>Set the variable to different value and then try...</p>

</body>

</html>
Output
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!
Set the variable to different value and then try...

The do...while Loop

Example
Try the following example to learn how to implement a do-whileloop in
JavaScript.
Live Demo

<html>

<body>

<script type = "text/javascript">

<!--

var count = 0;

document.write("Starting Loop" + "<br />");

do {

document.write("Current Count : " + count + "<br />");

count++;

while (count < 5);

document.write ("Loop stopped!");

//-->
 </script>

<p>Set the variable to different value and then try...</p>

</body>

</html>

Output
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Loop Stopped!
Set the variable to different value and then try...

for loop
Example
Try the following example to learn how a for loop works in JavaScript.
Live Demo

<html>

<body>

<script type = "text/javascript">

<!--

var count;

document.write("Starting Loop" + "<br />");

for(count = 0; count < 10; count++) {

document.write("Current Count : " + count );

document.write("<br />");

document.write("Loop stopped!");

//-->

</script>
 <p>Set the variable to different value and then try...</p>

</body>

</html>

Output
Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3
Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!
Set the variable to different value and then try...

for-in’ loop

The for...in loop is used to loop through an object's properties. As we have

not discussed Objects yet, you may not feel comfortable with this loop. But
once you understand how objects behave in JavaScript, you will find this
loop very useful.

Syntax
The syntax of ‘for..in’ loop is −

for (variablename in object) {

statement or block to execute
}

In each iteration, one property from object is assigned

to variablename and this loop continues till all the properties of the object
are exhausted.

Example
Try the following example to implement ‘for-in’ loop. It prints the web
browser’s Navigator object.
Live Demo
<html>

<body>

<script type = "text/javascript">

<!--

var aProperty;

document.write("Navigator Object Properties<br /> ");

for (aProperty in navigator) {

document.write(aProperty);

document.write("<br />");

document.write ("Exiting from the loop!");

//-->

</script>

<p>Set the variable to different object and then try...</p>

</body>

</html>

Output
Navigator Object Properties
serviceWorker
webkitPersistentStorage
webkitTemporaryStorage
geolocation
doNotTrack
onLine
languages
language
userAgent
product
platform
appVersion
appName
appCodeName
hardwareConcurrency
maxTouchPoints
vendorSub
vendor
productSub
cookieEnabled
mimeTypes
plugins
javaEnabled
getStorageUpdates
getGamepads
webkitGetUserMedia
vibrate
getBattery
sendBeacon
registerProtocolHandler
unregisterProtocolHandler
Exiting from the loop!
Set the variable to different object and then try...

The break Statement

Example
The following example illustrates the use of a break statement with a while
loop. Notice how the loop breaks out early once xreaches 5 and reaches
to document.write (..) statement just below to the closing curly brace −
Live Demo

<html>

<body>

<script type = "text/javascript">

<!--

var x = 1;

document.write("Entering the loop<br /> ");

while (x < 20) {

if (x == 5) {

break; // breaks out of loop completely

x = x + 1;

document.write( x + "<br />");

}
 document.write("Exiting the loop!<br /> ");

//-->

</script>

<p>Set the variable to different value and then try...</p>

</body>

</html>

Output
Entering the loop
2
3
4
5
Exiting the loop!
Set the variable to different value and then try...

The continue Statement

Example
This example illustrates the use of a continue statement with a while loop.
Notice how the continue statement is used to skip printing when the index
held in variable x reaches 5 −
Live Demo

<html>

<body>

<script type = "text/javascript">

<!--

var x = 1;

document.write("Entering the loop<br /> ");

while (x < 10) {

x = x + 1;
 if (x == 5) {

continue; // skip rest of the loop body

document.write( x + "<br />");

document.write("Exiting the loop!<br /> ");

//-->

</script>

<p>Set the variable to different value and then try...</p>

</body>

</html>

Output
Entering the loop
2
3
4
6
7
8
9
10
Exiting the loop!
Set the variable to different value and then try...

Using Labels to Control the Flow

Example 1
The following example shows how to implement Label with a break
statement.
Live Demo

<html>

<body>

<script type = "text/javascript">

<!--
 document.write("Entering the loop!<br /> ");

outerloop: // This is the label name

for (var i = 0; i < 5; i++) {

document.write("Outerloop: " + i + "<br />");

innerloop:

for (var j = 0; j < 5; j++) {

if (j > 3 ) break ; // Quit the innermost loop

if (i == 2) break innerloop; // Do the same thing

if (i == 4) break outerloop; // Quit the outer loop

document.write("Innerloop: " + j + " <br />");

document.write("Exiting the loop!<br /> ");

//-->

</script>

</body>

</html>

Output
Entering the loop!
Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 1
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 2
Outerloop: 3
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 4
Exiting the loop!
Example 2
Live Demo

<html>

<body>

<script type = "text/javascript">

<!--

document.write("Entering the loop!<br /> ");

outerloop: // This is the label name

for (var i = 0; i < 3; i++) {

document.write("Outerloop: " + i + "<br />");

for (var j = 0; j < 5; j++) {

if (j == 3) {

continue outerloop;

document.write("Innerloop: " + j + "<br />");

document.write("Exiting the loop!<br /> ");

//-->

</script>

</body>

</html>
Output
Entering the loop!
Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 1
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 2
Innerloop: 0
Innerloop: 1
Innerloop: 2
Exiting the loop!

Function Definition
Syntax

The basic syntax is shown here.

<script type = "text/javascript">
<!--
function functionname(parameter-list) {
statements
}
//-->
</script>

Example
Try the following example. It defines a function called sayHello that takes
no parameters −

<script type = "text/javascript">

<!--

function sayHello() {

alert("Hello there");

//-->

</script>
Calling a Function
Live Demo

<html>

<head>

<script type = "text/javascript">

function sayHello() {

document.write ("Hello there!");

</script>

</head>

<body>

<p>Click the following button to call the function</p>

<form>

<input type = "button" onclick = "sayHello()" value = "Say Hello">

</form>

<p>Use different text in write method and then try...</p>

</body>

</html>

Output
Function Parameters
Example
Try the following example. We have modified our sayHellofunction here.
Now it takes two parameters.
Live Demo
<html>

<head>

<script type = "text/javascript">

function sayHello(name, age) {

document.write (name + " is " + age + " years old.");

</script>

</head>

<body>

<p>Click the following button to call the function</p>

<form>

<input type = "button" onclick = "sayHello('Zara', 7)" value = "Say Hello">

</form>

<p>Use different parameters inside the function and then try...</p>

</body>

</html>

Output
The return Statement
Example
Try the following example. It defines a function that takes two parameters
and concatenates them before returning the resultant in the calling
program.
Live Demo

<html>

<head>

<script type = "text/javascript">

 function concatenate(first, last) {

var full;

full = first + last;

return full;

function secondFunction() {

var result;

result = concatenate('Zara', 'Ali');

document.write (result );

</script>

</head>

<body>

<p>Click the following button to call the function</p>

<form>

<input type = "button" onclick = "secondFunction()" value = "Call Function">

</form>

<p>Use different parameters inside the function and then try...</p>

</body>

</html>

Output
There is a lot to learn about JavaScript functions, however we have covered
the most important concepts in this tutorial.

 JavaScript Nested Functions

 JavaScript Function( ) Constructor
 JavaScript Function Literals

What is an Event ?
JavaScript's interaction with HTML is handled through events that occur
when the user or the browser manipulates a page.

When the page loads, it is called an event. When the user clicks a button,
that click too is an event. Other examples include events like pressing any
key, closing a window, resizing a window, etc.

Developers can use these events to execute JavaScript coded responses,

which cause buttons to close windows, messages to be displayed to users,
data to be validated, and virtually any other type of response imaginable.

Events are a part of the Document Object Model (DOM) Level 3 and every
HTML element contains a set of events which can trigger JavaScript Code.

Please go through this small tutorial for a better understanding HTML Event
Reference. Here we will see a few examples to understand a relation
between Event and JavaScript −

onclick Event Type

This is the most frequently used event type which occurs when a user clicks
the left button of his mouse. You can put your validation, warning etc.,
against this event type.

Example
Try the following example.
Live Demo

<html>

<head>

<script type = "text/javascript">

<!--

function sayHello() {

alert("Hello World")

//-->

</script>
 </head>

<body>

<p>Click the following button and see result</p>

<form>

<input type = "button" onclick = "sayHello()" value = "Say Hello" />

</form>

</body>

</html>

Output
onsubmit Event Type
onsubmit is an event that occurs when you try to submit a form. You can
put your form validation against this event type.

Example
The following example shows how to use onsubmit. Here we are calling
a validate() function before submitting a form data to the webserver.
If validate() function returns true, the form will be submitted, otherwise it
will not submit the data.

Try the following example.

<html>

<head>

<script type = "text/javascript">

<!--

function validation() {

all validation goes here

.........

return either true or false

}
 //-->

</script>

</head>

<body>

<form method = "POST" action = "t.cgi" onsubmit = "return validate()">

.......

<input type = "submit" value = "Submit" />

</form>

</body>

</html>

onmouseover and onmouseout

These two event types will help you create nice effects with images or even
with text as well. The onmouseover event triggers when you bring your
mouse over any element and the onmouseout triggers when you move
your mouse out from that element. Try the following example.
Live Demo

<html>

<head>

<script type = "text/javascript">

<!--

function over() {

document.write ("Mouse Over");

function out() {

document.write ("Mouse Out");

}
 //-->

</script>

</head>

<body>

<p>Bring your mouse inside the division to see the result:</p>

<div onmouseover = "over()" onmouseout = "out()">

<h2> This is inside the division </h2>

</div>

</body>

</html>

Output
HTML 5 Standard Events
The standard HTML 5 events are listed here for your reference. Here script
indicates a Javascript function to be executed against that event.

Attribute Valu Description

e

Offline script Triggers when the document goes

offline

Onabort script Triggers on an abort event

onafterprint script Triggers after the document is

printed

onbeforeonload script Triggers before the document loads

onbeforeprint script Triggers before the document is

 printed

onblur script Triggers when the window loses

focus

Triggers when media can start play,

oncanplay script
but might has to stop for buffering

Triggers when media can be played

oncanplaythrough script to the end, without stopping for
buffering

onchange script Triggers when an element changes

onclick script Triggers on a mouse click

oncontextmenu script Triggers when a context menu is

triggered

ondblclick script Triggers on a mouse double-click

ondrag script Triggers when an element is dragged

ondragend script Triggers at the end of a drag

operation

Triggers when an element has been

ondragenter script
dragged to a valid drop target

Triggers when an element is being

ondragleave script
dragged over a valid drop target

ondragover script Triggers at the start of a drag

 operation

ondragstart script Triggers at the start of a drag

operation

ondrop script Triggers when dragged element is

being dropped

ondurationchange script Triggers when the length of the

media is changed

Triggers when a media resource

onemptied script
element suddenly becomes empty.

onended script Triggers when media has reach the

end

onerror script Triggers when an error occur

onfocus script Triggers when the window gets focus

onformchange script Triggers when a form changes

onforminput script Triggers when a form gets user input

onhaschange script Triggers when the document has

change

oninput script Triggers when an element gets user

input

oninvalid script Triggers when an element is invalid

onkeydown script Triggers when a key is pressed

onkeypress script Triggers when a key is pressed and

released

onkeyup script Triggers when a key is released

onload script Triggers when the document loads

onloadeddata script Triggers when media data is loaded

Triggers when the duration and other

onloadedmetadata script media data of a media element is
loaded

Triggers when the browser starts to

onloadstart script
load the media data

onmessage script Triggers when the message is

triggered

onmousedown script Triggers when a mouse button is

pressed

onmousemove script Triggers when the mouse pointer

moves

Triggers when the mouse pointer

onmouseout script
moves out of an element

Triggers when the mouse pointer

onmouseover script
moves over an element

onmouseup script Triggers when a mouse button is

 released

onmousewheel script Triggers when the mouse wheel is

being rotated

onoffline script Triggers when the document goes

offline

onoine script Triggers when the document comes

online

ononline script Triggers when the document comes

online

onpagehide script Triggers when the window is hidden

onpageshow script Triggers when the window becomes

visible

onpause script Triggers when media data is paused

onplay script Triggers when media data is going to

start playing

onplaying script Triggers when media data has start

playing

onpopstate script Triggers when the window's history

changes

Triggers when the browser is fetching

onprogress script
the media data
 Triggers when the media data's
onratechange script
playing rate has changed

onreadystatechange script Triggers when the ready-state

changes

onredo script Triggers when the document

performs a redo

onresize script Triggers when the window is resized

Triggers when an element's scrollbar

onscroll script
is being scrolled

Triggers when a media element's

onseeked script seeking attribute is no longer true,
and the seeking has ended

Triggers when a media element's

onseeking script seeking attribute is true, and the
seeking has begun

onselect script Triggers when an element is selected

Triggers when there is an error in

onstalled script
fetching media data

onstorage script Triggers when a document loads

onsubmit script Triggers when a form is submitted

 Triggers when the browser has been
fetching media data, but stopped
onsuspend script
before the entire media file was
fetched

ontimeupdate script Triggers when media changes its

playing position

onundo script Triggers when a document performs

an undo

onunload script Triggers when the user leaves the

document

Triggers when media changes the

onvolumechange script volume, also when volume is set to
"mute"

Triggers when media has stopped

onwaiting script
playing, but is expected to resume