Java Script

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

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.
1
 Java Script

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

2
 Java Script

 Macromedia HomeSite 5: This provided a well-liked HTML and JavaScript editor,

which will manage their personal web site just fine.

JavaScript Syntax

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

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

To understand it in better way you can Try it yourself.

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

<!--

4
 Java Script

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

5
 Java Script

Enabling JavaScript in Browsers

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:

1. Follow Tools-> Internet Options from the menu

2. Select Security tab from the dialog box
3. Click the Custom Level button
4. Scroll down till you find Scripting option
5. Select Enable radio button under Active scripting
6. 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:

1. Follow Tools-> Options

from the menu

2. Select Content option from the dialog box

3. Select Enable JavaScript checkbox
4. 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:

1. Follow Tools-> Preferences

from the menu

6
 Java Script

2. Select Advanced option from the dialog box

3. Select Content from the listed items
4. Select Enable JavaScript checkbox
5. 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>
<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.

JavaScript Placement in HTML File

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.

7
 Java Script

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

This will produce following result:

To understand it in better way you can Try it yourself.

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>

8
 Java Script

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

</body>
</html>

This will produce following result:

Advertisements

Hello World
This is web page body

To understand it in better way you can Try it yourself.

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>

This will produce following result:

Advertisements

9
 Java Script

Hello World

To understand it in better way you can Try it yourself.

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

10
 Java Script

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
asobject. 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:

11
 Java Script

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

To understand variables in better way you can Try it yourself.

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">
<!--
varmyVar = "global"; // Declare a global variable
function checkscope( ) {
varmyVar = "local"; // Declare a local variable
document.write(myVar);
}
//-->
</script>

12
 Java 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.

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

13
 Java Script

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:

Operato
Description Example
r

+ 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

/ 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 A-- will give 9

14
 Java Script

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

Operato
Description Example
r

== Checks if the value of two operands are equal (A == B) is not true.

or not, if yes then condition becomes true.

!= Checks if the value of two operands are equal (A != B) is true.

or not, if values are not equal then condition
becomes true.

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

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

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

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

The Logical Operators:

15
 Java Script

There are following logical operators supported by JavaScript language

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

Operato
Description Example
r

&& Called Logical AND operator. If both the (A && B) is true.

operands are non zero then then condition
becomes true.

|| Called Logical OR Operator. If any of the two (A || B) is true.

operands are non zero then then condition
becomes true.

! Called Logical NOT Operator. Use to reverses !(A && B) is false.

the logical state of its operand. If a condition is
true 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:

Operato
Description Example
r

& Called Bitwise AND operator. It performs a (A & B) is 2 .

Boolean AND operation on each bit of its
integer arguments.

| Called Bitwise OR Operator. It performs a (A | B) is 3.

Boolean OR operation on each bit of its integer
arguments.

^ Called Bitwise XOR Operator. It performs a (A ^ B) is 1.

Boolean exclusive OR operation on each bit of
its integer arguments. Exclusive OR means that

16
 Java Script

either operand one is true or operand two is

true, but not both.

~ Called Bitwise NOT Operator. It is a is a unary (~B) is -4 .

operator and operates by reversing all bits in
the operand.

<< Called Bitwise Shift Left Operator. It moves all (A << 1) is 4.

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 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 (A >> 1) is 1.

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 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. (A >>> 1) is 1.

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

The Assignment Operators:

There are following assignment operators supported by JavaScript language:

17
 Java Script

Operato
Description Example
r

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

from 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 +A
result to left operand

-= 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 C *= A is equivalent to C = C *

multiplies right operand with the left operand A
and assign 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:

18
 Java Script

Operato
Description Example
r

?: Conditional Expression If Condition is true ? Then value X :

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

Number "number"

String "string"

Boolean "boolean"

Object "object"

Function "function"

Undefined "undefined"

Null "object"

JavaScript if...else Statements

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

19
 Java Script

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

if...else statement:

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

20
 Java Script

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

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{

21
 Java Script

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

22