Java Script Notes

What is JavaScript ?

JavaScript started life as LiveScript, but Netscape changed the name, possibly because of
the excitement being generated by Java.to JavaScript. JavaScript made its first appearance
in Netscape 2.0 in 1995 with a name LiveScript.

JavaScript is a lightweight, interpreted programming language with object-oriented

capabilities that allows you to build interactivity into otherwise static HTML pages.

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:

 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 no longer be static HTML, but can include programs that
interact with the user, control the browser, and dynamically create HTML content.

The JavaScript client-side mechanism features 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 explicitly or implicitly initiates.

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.

1
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 with JavaScript:

We can not 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 can not be used for Networking applications because there is no such support
available.

JavaScript doesn't have any multithreading or multiprocess 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 JavaScript's strengths is that expensive development tools are not usually required.
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. Few 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 an interactive web site.

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: This provided a well-liked HTML and JavaScript editor, which will
manage their personal web site just fine.

Where JavaScript is Today ?

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

2
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 each language still supports features that are not part of the standard.

A JavaScript consists of JavaScript statements that are placed within the <script>...
</script> HTML tags in a web page.

You can place the <script> tag containing your JavaScript anywhere within you web page
but it is preferred way to keep it within the <head> tags.

The <script> tag alert the browser program to begin interpreting all the text between these
tags as a script. So simple syntax of your JavaScript will be 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 Script:

Let us write our class example to print out "Hello World".

<html>

<body>

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

<!--

document.write("Hello World!")

3
 //-->

</script>

</body>

</html>

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 in 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. So above code will display following
result:

Hello World!

Whitespace and Line Breaks:

JavaScript ignores spaces, tabs, and newlines that appear in JavaScript programs.

Because you can use spaces, tabs, and newlines freely in your program so 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 your
statements are each 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, the semicolons are required:

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

<!--
var1 = 10; var2 = 20;
//-->
</script>
Note: It is a good programming practice to use semicolons.

Case Sensitivity:

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

So identifiers Time, TIme and TIME will have different meanings in JavaScript.

NOTE: Care should be taken while writing your 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:

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

<!--
// This is a comment. It is similar to comments in C++
/*
* This is a multiline comment in JavaScript
* It is very similar to comments in C Programming
*/
//-->
</script>
All the modern browsers come with built-in support for JavaScript. Many times you may
need to enable or disable this support manually.

This tutorial will make you aware the procedure of enabling and disabling JavaScript support
in your browsers : Internet Explorer, Firefox 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

5
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 simple steps to turn on or turn off JavaScript in your Firefox:

Follow Tools-> Options

from the menu

Select Content option from the dialog box

Select Enable JavaScript checkbox

Finally click OK and come out

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

JavaScript in Opera:

Here are simple steps to turn on or turn off JavaScript in your 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 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>

6
 <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 user's browser does not support JavaScript or JavaScript is not enabled then
message from </noscript> will be displayed on the screen.

There is a flexibility given to include JavaScript code anywhere in an HTML document. But
there are following most preferred ways to include JavaScript in your HTML file.

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

Script in <body>...</body> section.

Script in <body>...</body> and <head>...</head> sections.

Script in and external file and then include in <head>...</head> section.

In the following section we will see how we can put JavaScript 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:

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

7
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, the script goes in the <body> portion of the document. In this case you would not
have any function defined using JavaScript:

<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<p>This is web page body </p>
</body>
</html>
This will produce following result:

Advertisements

This is web page body

JavaScript in <body> and <head> sections:

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

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

8
This will produce following result:

Advertisements

JavaScript in External File :

As you begin to work more extensively with JavaScript, you will likely 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>
To use JavaScript from an external file source, you need to write your all JavaScript source
code in a simple text file with extension ".js" and then include that file as shown above.

For example, you can keep following content in filename.js file and then you can
use sayHello function in your HTML file after including 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.

9
In addition to these primitive data types, JavaScript supports a composite data type known
as object. We will see an object detail in a separate chapter.

Note: Java 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 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 later point in time when you need that variable as
follows:

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

10
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
variable will have only two scopes.

Global Variables: A global variable has global scope which means it is defined everywhere
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. Following example explains it:

<script type="text/javascript">
<!--
var myVar = "global"; // Declare a global variable
function checkscope( ) {
var myVar = "local"; // Declare a local variable
document.write(myVar);
}
//-->
</script>
This produces the following result:

local
JavaScript Variable Names:

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

You should not use any of the JavaScript reserved keyword as 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 the 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:

The following are reserved words in JavaScript. They cannot be used as JavaScript
variables, functions, methods, loop labels, or any object names.

11
 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

What is an operator?

Simple answer can be given using expression 4 + 5 is equal to 9. Here 4 and 5 are called
operands and + is called operator. JavaScript language supports following type of operators.

Arithmetic Operators

Comparision Operators

Logical (or Relational) Operators

Assignment Operators

Conditional (or ternary) Operators

Lets have a look on all operators one by one.

The Arithmatic Operators:

There are following arithmatic operators supported by JavaScript language:

Assume variable A holds 10 and variable B holds 20 then:

Operator Description Example

+ Adds two operands A + B will give 30

- Subtracts second operand from the first A - B will give -10

* Multiply both operands A * B will give 200

12
/ Divide numerator by denumerator B / A will give 2

Modulus Operator and remainder of after an

% B % A will give 0
integer division

Increment operator, increases integer value by

++ A++ will give 11
one

Decrement operator, decreases integer value by

-- A-- will give 9
one

Note: Addition operator (+) works for Numeric as well as Strings. e.g. "a" + 10 will give
"a10".

The Comparison Operators:

There are following comparison operators supported by JavaScript language

Assume variable A holds 10 and variable B holds 20 then:

Operator Description Example

Checks if the value of two operands are equal or

== (A == B) is not true.
not, if yes then condition becomes true.

Checks if the value of two operands are equal or

!= not, if values are not equal then condition (A != B) is true.
becomes true.

Checks if the value of left operand is greater than

> the value of right operand, if yes then condition (A > B) is not true.
becomes true.

Checks if the value of left operand is less than

< the value of right operand, if yes then condition (A < B) is true.
becomes true.

Checks if the value of left operand is greater than

>= or equal to the value of right operand, if yes then (A >= B) is not true.
condition becomes true.

<= Checks if the value of left operand is less than or (A <= B) is true.
equal to the value of right operand, if yes then

13
 condition becomes true.

The Logical Operators:

There are following logical operators supported by JavaScript language

Assume variable A holds 10 and variable B holds 20 then:

Operator Description Example

Called Logical AND operator. If both the operands

&& (A && B) is true.
are non zero then then condition becomes true.

Called Logical OR Operator. If any of the two

|| operands are non zero then then condition (A || B) is true.
becomes true.

Called Logical NOT Operator. Use to reverses the

! logical state of its operand. If a condition is true !(A && B) is false.
then Logical NOT operator will make false.

The Bitwise Operators:

There are following bitwise operators supported by JavaScript language

Assume variable A holds 2 and variable B holds 3 then:

Operator Description Example

Called Bitwise AND operator. It performs a

& Boolean AND operation on each bit of its integer (A & B) is 2 .
arguments.

Called Bitwise OR Operator. It performs a

| Boolean OR operation on each bit of its integer (A | B) is 3.
arguments.

Called Bitwise XOR Operator. It performs a

Boolean exclusive OR operation on each bit of its
^ integer arguments. Exclusive OR means that (A ^ B) is 1.
either operand one is true or operand two is true,
but not both.

14
 Called Bitwise NOT Operator. It is a is a unary
~ operator and operates by reversing all bits in the (~B) is -4 .
operand.

Called Bitwise Shift Left Operator. It moves all

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 (A << 1) is 4.
one position is equivalent to multiplying by 2,
shifting two positions is equivalent to multiplying
by 4, etc.

Called Bitwise Shift Right with Sign Operator. It

moves all bits in its first operand to the right by
the number of places specified in the second
operand. The bits filled in on the left depend on
the sign bit of the original operand, in order to
preserve the sign of the result. If the first
>> operand is positive, the result has zeros placed in (A >> 1) is 1.
the high bits; if the first operand is negative, the
result has ones placed in the high bits. Shifting a
value right one place is equivalent to dividing by
2 (discarding the remainder), shifting right two
places is equivalent to integer division by 4, and
so on.

Called Bitwise Shift Right with Zero Operator.

This operator is just like the >> operator, except
>>> (A >>> 1) is 1.
that the bits shifted in on the left are always
zero,

The Assignment Operators:

There are following assignment operators supported by JavaScript language:

Operator Description Example

Simple assignment operator, Assigns values from C = A + B will assigne value of

=
right side operands to left side operand A + B into C

Add AND assignment operator, It adds right

C += A is equivalent to C = C
+= operand to the left operand and assign the result
+A
to left operand

15
 Subtract AND assignment operator, It subtracts
C -= A is equivalent to C = C -
-= right operand from the left operand and assign
A
the result to left operand

Multiply AND assignment operator, It multiplies

C *= A is equivalent to C = C
*= right operand with the left operand and assign
*A
the result to left operand

Divide AND assignment operator, It divides left

C /= A is equivalent to C = C /
/= operand with the right operand and assign the
A
result to left operand

Modulus AND assignment operator, It takes

C %= A is equivalent to C = C
%= modulus using two operands and assign the
%A
result to left operand

Note: Same logic applies to Bitwise operators so they will become like <<=, >>=, >>=,
&=, |= and ^=.

Miscellaneous Operator

The Conditional Operator (? :)

There is an oprator called conditional operator. This first evaluates an expression for a true
or false value and then execute one of the two given statements depending upon the result
of the evaluation. The conditioanl operator has this syntax:

Operator Description Example

If Condition is true ? Then value X :

?: Conditional Expression
Otherwise value Y

The typeof Operator

The typeof 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 the list of return values for the typeof Operator :

Type String Returned by typeof

16
 Number "number"

String "string"

Boolean "boolean"

Object "object"

Function "function"

Undefined "undefined"

Null "object"

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

17
JavaScript if...else Statements

While writing a program, there may be a situation when you need to adopt one path out of
the given two paths. So you need to make use of conditional statements that allow your
program to make correct decisions and perform right actions.

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

JavaScript supports following forms of if..else statement:

if statement

if...else statement

if...else if... statement.

if statement:

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

Syntax:

if (expression){

Statement(s) to be executed if expression is true

Here JavaScript expression is evaluated. If the resulting value is true, given statement(s)
are executed. If expression is false then no statement would be not executed. Most of the
times you will use comparison operators while making decisions.

Example:

<script type="text/javascript">
<!--
var age = 20;
if( age > 18 ){
document.write("<b>Qualifies for driving</b>");
}
//-->
</script>
This will produce following result:

Qualifies for driving

<html>
<body>

18
 <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>
if...else statement:

The if...else statement is the next form of control statement that allows JavaScript to
execute statements in 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

Here JavaScript expression is evaluated. If the resulting value is true, given statement(s) in
the if block, are executed. If expression is false then given statement(s) in the else block,
are executed.

Example:

<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>
This will produce following result:

Does not qualify for driving

<html>

19
 <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>
if...else if... statement:

The if...else if... statement is the one level advance form of control statement that allows
JavaScript to make correct decision out of several conditions.

Syntax:

if (expression 1){

Statement(s) to be executed if expression 1 is true

}else if (expression 2){

Statement(s) to be executed if expression 2 is true

}else if (expression 3){

Statement(s) to be executed if expression 3 is true

}else{

Statement(s) to be executed if no expression is true

There is nothing special about this code. It is just a series of if statements, where each if is
part of the else clause of the previous statement. Statement(s) are executed based on the
true condition, if non of the condition is true then else block is executed.

Example:

<script type="text/javascript">
<!--
var book = "maths";

20
 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>
This will produce following result:

Maths Book

JavaScript Switch Case

You can use multiple if...else if statements, as in the previous chapter, to perform a
multiway branch. However, this is not always the best solution, especially when all of the
branches depend on the value of a single variable.

Starting with JavaScript 1.2, you can use a switch statement which handles exactly this
situation, and it does so more efficiently than repeated if...else if statements.

Syntax:

The basic syntax of the switch statement is to give an expression to evaluate and several
different statements to execute based on the value of the expression. The interpreter
checks each case against the value of the expression until a match is found. If nothing
matches, a default condition will be used.

switch (expression)

case condition 1: statement(s)

break;

case condition 2: statement(s)

break;

...

case condition n: statement(s)

break;

default: statement(s)

21
}

The break statements indicate to the interpreter the end of that particular case. If they were
omitted, the interpreter would continue executing each statement in each of the following
cases.

We will explain break statement in Loop Control chapter.

Example:

Following example illustrates a basic while loop:

<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>
This will produce following result:

Entering switch block

Good job

Exiting switch block

Example:

Consider a case if you do not use break statement:

<script type="text/javascript">
<!--
var grade='A';
document.write("Entering switch block<br />");
switch (grade)

22
 {
case 'A': document.write("Good job<br />");
case 'B': document.write("Pretty good<br />");
case 'C': document.write("Passed<br />");
case 'D': document.write("Not so good<br />");
case 'F': document.write("Failed<br />");
default: document.write("Unknown grade<br />")
}
document.write("Exiting switch block");
//-->
</script>
This will produce following result:

Entering switch block

Good job

Pretty good

Passed

Not so good

Failed

Unknown grade

Exiting switch block

<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");

23
 //-->
</script>

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

</body>
</html>
JavaScript while Loops

While writing a program, there may be a situation when you need to perform some action
over and over again. In such situation you would need to write loop statements to reduce
the number of lines.

JavaScript supports all the necessary loops to help you on all steps of programming.

The while Loop

The most basic loop in JavaScript is the while loop which would be discussed in this tutorial.

Syntax:

while (expression){
Statement(s) to be executed if expression is true
}
The purpose of a while loop is to execute a statement or code block repeatedly as long
asexpression is true. Once expression becomes false, the loop will be exited.

Example:

Following example illustrates a basic while loop:

<script type="text/javascript">
<!--
var count = 0;
document.write("Starting Loop" + "<br />");
while (count < 10){
document.write("Current Count : " + count + "<br />");
count++;
}
document.write("Loop stopped!");
//-->
</script>
This will produce following result:

Starting Loop
Current Count : 0
Current Count : 1
Current Count : 2
Current Count : 3

24
 Current Count : 4
Current Count : 5
Current Count : 6
Current Count : 7
Current Count : 8
Current Count : 9
Loop stopped!

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

The do...while Loop:

The do...while loop is similar to the while loop except that the condition check happens at
the end of the loop. This means that the loop will always be executed at least once, even if
the condition is false.

Syntax:

do{

Statement(s) to be executed;

} while (expression);

Note the semicolon used at the end of the do...while loop.

Example:

Let us write above example in terms of do...while loop.

<script type="text/javascript">

25
 <!--
var count = 0;
document.write("Starting Loop" + "<br />");
do{
document.write("Current Count : " + count + "<br />");
count++;
}while (count < 0);
document.write("Loop stopped!");
//-->
</script>
This will produce following result:

Starting Loop
Current Count : 0
Loop stopped!

JavaScript for Loops

We have seen different variants of while loop. This chapter will explain another popular loop
called for loop.

The for Loop

The for loop is the most compact form of looping and 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 the given condition is true or not. If condition is true
then code given inside the loop will be executed otherwise loop will come out.

The iteration statement where you can increase or decrease your counter.

You can put all the three parts in a single line separated by a semicolon.

Syntax:

for (initialization; test condition; iteration statement){

Statement(s) to be executed if test condition is true

Example:

Following example illustrates a basic for loop:

26
 <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>
This will produce following result which is similar to while loop:

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!

<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>
JavaScript for...in loop

27
There is one more loop supported by JavaScript. It is called for...in loop. This loop is used to
loop through an object's properties.

Because we have not discussed Objects yet, so you may not feel comfortable with this loop.
But once you will have understanding on JavaScript objects then you will find this loop very
useful.

Syntax:

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:

Here is the following example that prints out the properties of a Web
browser's Navigatorobject:

<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>
This will produce following result:

Navigator Object Properties

appCodeName
appName
appMinorVersion
cpuClass
platform
plugins
opsProfile
userProfile
systemLanguage
userLanguage

28
 appVersion
userAgent
onLine
cookieEnabled
mimeTypes
Exiting from the loop!

<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>
JavaScript Loop Control

JavaScript provides you full control to handle your loops and switch statement. There may
be a situation when you need to come out of a loop without reaching at its bottom. There
may also be a situation when you want to skip a part of your code block and want to start
next iteration of the look.

To handle all such situations, JavaScript provides break and continue statements. These
statements are used to immediately come out of any loop or to start the next iteration of
any loop respectively.

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

This example illustrates the use of a break statement with a while loop. Notice how the loop
breaks out early once x reaches 5 and reaches to document.write(..) statement just below
to closing curly brace:

29
 <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>
This will produce following result:

Entering the loop

2
3
4
5
Exiting the loop!
We already have seen the usage of break statement inside a switch statement.

The continue Statement:

The continue statement tells the interpreter to immediately start the next iteration of the
loop and skip remaining code block.

When a continue statement is encountered, program flow will move to the loop check
expression immediately and if condition remain true then it start next iteration otherwise
control comes out of the loop.

Example:

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

<script type="text/javascript">
<!--
var x = 1;
document.write("Entering the loop<br /> ");
while (x < 10)
{
x = x + 1;
if (x == 5){

30
 continue; // skill rest of the loop body
}
document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
//-->
</script>
This will produce following result:

Entering the loop

2
3
4
6
7
8
9
10
Exiting the loop!
Using Labels to Control the Flow:

Starting from JavaScript 1.2, a label can be used with break and continue to control the flow
more precisely.

A label is simply an identifier followed by a colon that is applied to a statement or block of

code. We will see two different examples to understand label with break and continue.

Note: Line breaks are not allowed between the continue or break statement and its label
name. Also, there should not be any other statement in between a label name and
associated loop.

Example 1:

<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 />");

31
 }
}
document.write("Exiting the loop!<br /> ");
//-->
</script>
This will produce following result:

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:

<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>
This will produce following result:

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

33