Page No.

JavaScript Programming
INTRODUCTION:
JavaScript is a script language, which was developed by
Netscape originally called LiveScript. On December 4,1995
Netscape and sun jointly introduced JavaScript.
JavaScript is interpreter, loosely coupled language, in
which no need of following language syntaxes exactly. JavaScript
is script language in which no need to declare variable before use.
Features of JavaScript:
 JavaScript is interpreted language.
 JavaScript embedded into an HTML web pages.
 JavaScript code is executed when an event is triggered.
 JavaScript is event driven language.
 JavaScript is multifunctional language.
 JavaScript is object-based language.

Java vs JavaScript :
Java is strongly typed, compiled language, developed
by Sun Micro Systems. JavaScript is loosely coupled language
developed by Netscape, is a lightweight, interpreted programming
language initially called LiveScript. These two languages are not
related.
- Java is a compiled language, platform independent achieved
through JVM.
- JavaScript is an interpreted language, the browser provides
the platform independence for JavaScript.

Other scripting languages are PERL,CGI, these are server side

scripting languages, VBScript, JScript developed by Microsoft
Corporation.
The standardization for JavaScript as by ECMA script (European
Computer Manufacture Association).
 Page No. 2

Advantages:
-JavaScript is script language so string manipulations are
handled easily.
-JavaScript is very useful for Client side validations.
-JavaScript used as server side script for database
connection to give information to user, to maintain user session.
-JavaScript is powerful language to design Dynamic
HTML pages, to capture events in HTML Documents.
-JavaScript is embedded in all popular web browsers.
- In HTML JavaScript use to ensure user input all data into
form in correct format, to create button, to create popup windows
etc.,
HTML has many advantages but doesn’t provide control
for may development. And also fail if we use of server-side program
to handle some of the pages dynamically sites.
The server side functionality to process submitted information
done by CGI (Common Gateway Interface) and generates response to
user. The process is taken at the server side, if any missing or incorrect
information send by user the processing take place at server site,
response to it show the error message by sending through network.
These messages will increase unnecessary traffic in Internet.
If we perform some functionality such as error checking,
empty checking at client side by the browser we can reduce the
network traffic and increase the functionality of page.

Security:
-One of the biggest issues facing Internet development today
in security.
-Java script is most run within a browser's environment.
-Java script program can advantage of a whole in the browser's
security measures to access the file system.
- Even can access private documents.
- Provide security for JavaScript in the two fold
* One responsibility of programmers.
• Second users them selves to run or not to run a
JavaScript on their systems.
 Page No. 3

The JavaScript Syntaxes:

Semicolon: In JavaScript end of statement with ; (semicolon) .But
JavaScript is loosely types language, so no need to end with ; .

Tag : <SCRIPT> Tag

HTML doucment the code between <SCRIPT> and
-
</SCRIPT> should be interpreted by the interpret specified by
LANGUAGE attribute.
- We can use any number of <SCRIPT> tags in a document.
Comments : JavaScript Supports /* */ block comments
- // Single line comment
- <!-- and --> HTML style

Data Types: In JavaScript handling variables is easy ,no restriction on

types of values that a variable hold.

Operators:
Arithmetic: + - / *
% ++ --
Assignment: += -= *= /= %=
<<= >>= >>>= &= \= ^=
Logical: - && || !
Comparison: - == != > < >=
<= === !==
=== Means identity !== Means Non=identity
Conditional:- ?:
Bit wise: - & | ^ ~ << >> >>>
>>> Means right shift fill with zero.

Other operators: . Object property access

[] Array index
() Function call
delete Undefine a property
new Create a new object
typeof Return data type
void Return undefined value
The void operator is used to evalute an expression with out returning a
value.
 Page No. 4

Built-in values:
The numerical constant in Math object.

Math.E Math.LN2 Math.LN10

Math.LOG2E Math.LOG10E Math.PI

Special Values : JavaScript provide special values supported in

mathematical word not in computer world.

Number.MAX_VAL Number.MIN_VALUE Number.NaN

Number.POSITIVE_INFINIT Number.NEGATIVE_INFINITY
Y
Number.NaN means Not-a-Number.

Advanced mathematical methods provided by JavaScript in Math Object.

Math.abs() Math.acos() Math.asin() Math.atan()

Math.atan2() Math.ceil() Math.cos() Math.exp()
Math.floor() Math.log() Math.max() Math.min()
Math.pow() Math.random() Math.round() Math.sine()
Math.sqrt() Math.tan()

Boolean :
JavaScript supports Boolean data type which contains either
true (0) or false (1)

null : JavaScript supports keyword null mean unknown.

Loops and conditional Syntaxes:

Conditional Syntax :
if (expression)
{
statements
}
else {
statements...
}
 Page No. 5

switch (expression)
{
case lable1:
statements;
break;
case label2:
statements;
break;
…….
default:

}
In switch we can also use strings as expression.

Loops:
for: for(initialize;condition;adjust) {
statements;
}
while while(expression)
{
statements;
}
do..while do {
statement,
} while(expression)
for...in for(variable in object)
{
statement...
}
break: Used to jump from the block.
continue: Uses to jump to condition expression in loops.

VARIABLES :
JavaScript is case sensitive.
Assigning Values:
The keyword var used to declare variables.
The assignment with (=) operator.
 Page No. 6

The values assigned to a variable but not using var keyword,

will be treated as as global variables.

Type conversion:-
-JavaScript allows a variable to hold any data type at any time.
-JavaScript will perform necessary steps to type conversion.

String:
Syntax: var variable = new String(string);
“string”
The String() object one of the core of the JavaScript.
Escape sequences character:-
\b \f \n \r
\t \' \\ \”
\xxx character represented by three octal digits.
\xx character represented by two octal digits.
\uxxxx character represented by unsigned decimal.

Properties length Returns the length of the string

prototype To add properties to instances.
Methods:
Methods Description
replace() Replaces using RegExp
charAt() Returns the character at the index passed.
concat() Concatenates two string, return new String instance.
Search() Returns the index location of passed string in document.
slice() Returns the string between beginning and ending indexed
passed .
substr() Returns the string beginning with the index,number of
characters passed .
toLowerCase() Converts all the characters to lower case.
toUpperCase() Converts all the characters to upper case.
match() Returns an array containing the match, argument passed is
RegExp.

The follow methods returns the instances of tag corresponding the methods.

anchor() blink() fontcolor()

bold() fontsize() link()
 Page No. 7

Pattern Matching :
JavaScript uses the RegExp(regular expresses) object to handle
pattern matching, by providing patterndefinition and methods to perform
matching.
Definition: The RegExp object created in two ways by the keyword new
using constructor.
Ex: var name=new RegExp("Hai");
Creates object name and assigning pattern "Hai".
By direct assignment we use / to designate the beginning and end of pattern.
Ex: var name= /Hai/ ;

Special Pattern matching characters:

Character Description
\a Match any word character(alphanumeric).
\w Match any non word character.
\d Match any digit.
\D Match any non-digit.
[...] Match any character with in brackets
[x-y] Match any character range x to y.
[^] Match not with in or range.
? Match any previous item once or not at all.
+ Match any previous at least once.
| Match any the expression to the left or right of | char.
(...) Group every thing provide () into such pattern.
^ Match begins of single /line/multi line match.
$ Match the end of single /line/multi line match.

If we want to find the string started with + symbol we define pattern as \+

same are.

\f formfeed \n new line \r carriage return

\t tab \v verticaltab.

\/ \\ \. \* \+ \? \| \> \[ \]
\{ \}
\cx control character represented by x.
\xxx ascii char representation by the octal xxx number.
\xhh ascii char representation by the hexa hh number.
 Page No. 8

Attributes:- g Global.
i Ignore case.

Methods for matching in string object:

Method Description
match(regExpObj) searches for regExpObj in string
replace(regExpObj,scr) replace all occurrences of the
regExpObj with scr string
search(regEpObj) Return the position.
split(regExpObj,max) string in split everywhere in a
matching pattern upto man splits and
returns in array.

Pattern matching methods in RegExp Object:

Method Description
exp(str) Searches for pattern and return result.
exec(str) Searches for pattern and return result in
Boolean.
test(str) Searches for pattern and return result in
Boolean.
(str) same as exec.

Ex: <script language="javascript">

var str=reg no 1799125;
document.write(str);
var patt=newregexp("[a-z]");
document.write("after replacing");
document.write(str.replace(patt,"g");
<script>.

ARRAYS:-
We can create an instance of array object by following 4 ways.
 var x = new array ();
 var x = new array ("red","yellow","green",1,5,8);
 var x = new array(6);
 var x = ["red","yellow","green",1,2,3];
 Page No. 9

We access array element with [] operator, with subscript. Arrays in

JavaScript can hold any data types.
String Indexes:
JavaScript supports to access any elements via [] operator with
index. The index is integer in all other languages, but JS index may be of
string type.
<HTML> <H2> <U> Clothing store inventory </U> <H2>
<SCRIPT LANGAGE = "JavaScript ">
function populate_array (products) {
products["shirts"] = 46;
products["parts"] = 23;
products["ties"] = 14;
}
function display_army (products) {
document.write ( product['shirts'],"shirts.<BR>");
document.write ( product['pants'],"pants.<BR>");
document.write ( product['ties'],"hats.<BR>");
}
// creating army
var product qty = new army ();
// set product quantity
populate army ( productqty);
display army (productqty);
< / SCRIPT> </HTML>

JavaScript treats arrays as objects so we can use indexes as objects

property. array[“idx”] can be represent as array.idx .
length Attribute of array contain number of elements in the array.

Array Object provides some methods:

join() Concatenates all elements into one string
reverse() Reverse order of elements
sort() Sort elements in array
concate() Concatenates an array on to an array
join() Concatenates all elements of an array in to one array
push () Adds elements at the end of an array.
pop() Deletes the last element form array.
shift() Delete elements from front of an array.
toString() Converts elements to a string
 Page No. 10

Date:
Syntax: var variable = new Date();
var variable = new Date(millisecond1);
var variable = new Date(string);
var variable = new Date(year, month, day,
hour, minutes, seconds, milliseconds2);

The Date() object represents all aspects of date and time from year
to milliseconds.
Arguments
millisecond1 calculated from th midnight jan 1 1970.
millisecond2 Is integer represent millisecond from 0 to 999.

Methods:
getDate() getday() getFullyear()
getHours() getMunites() getMilliseconds()
getMonth() getSeconds() getTime()
getYear()
These methods return corresponding values.

setDate() setday() setFullyear()

setHours() setMunites() setMilliseconds()
setMonth() setSeconds() setTime()
setYear()
These methods set corresponding values to date instance.
toString() Return Date and time as string.

Object:
Syntax: var variable = new Object();
The Object() object is a primitive data type from all JavaScript
objects are derived.
Property Description
constructor Function that creates an Object.
eval() Evaluates a string of JavaScript code for the
specified object.
prototype Add new properties for the specific object
 Page No. 11

toString() Converts the object to its string

representation.
valueOf() Returns the value.

Packegses:
The packages is built in object that provides access to various Java
packages with in browser.

Ex : Packages.java.lang.System.out.println(“Java—JavaScript”);

parseFloat()
Syntax parseFloat(string)
This method used to convert a string to number.

parseInt()
Syntax parseInt(string)
parseInt(string,base)

This method used to convert a string to number.

this
Syntax this.property
This this keyword is used to refer the current object and is used to
pass entire object.

Multi Dimensional Arrays:

The element of a array is another array.
Array as Objects:
In JavaScript array as objects i.e instance olf the class array,
So we can access the element as its properly rather than [] operator.

Ex: product["tie"] = 100;

document.write(product.tie "ties");

with: JavaScript provides with statement to access objects property with

out repeatedly typing object name.
with(object) {
 Page No. 12
.property of object
.property of object
}
function :
All functions declared with keyword function followed by name
of function.
Call by values vs Call by references:
In JavaScript default in call by value. To call by reference,
declare the function with empty() and on the argument object and []to access
arguments.
//eg call by reference.
<script language="javascript">
function disp() {
document.write("argument passed:<br>);
for(i=0;i<arguments.length;i++)
document.write(i,"i=",arguments[i],"<br>");
}
disp(34,"KSK",-7945,"Dra");
</script>

Returning Values:-
JavaScript provide return keyword.
function as objects:-
we can create function statically as well as dynamically. Creating
function dynamically, treated as function as objects.

sy:- var fun=new function(argument1,......lastargument);

function keyword used to create dynamically, all the arguments must be

string,the last argument must be return value.

eg:- var mulfun=new function("y","return y*s");

 Page No. 13

C l i e n t S i d e J a v a S c r

W i n d o w L a y e r
T e x t u r e
L i n k
T e x t

F r a m e I m a g e
F ile U p lo a d

A r e a
H id d e n

A n c h o r
D o c u m e n t P a s s w o r d

A p p l e t
S u b m it

P l u g i n
R e s e t
L o c a t i o n F o r m
R a d io

C h e c k b o x

H i s t o r y B u t t o n

S e le c t O p t io n

N a v ig a t o r

P lu g in

M im e T y p e
 Page No. 14

Server-side Java Script Object hierarchy

C u r s o r

D b P o o l C o n n e c t i o n

S t p r o c R e s u l s e t

C u r s o r

D a t a b a s e

S t p r o c R e s u l t s e t

CLIENT SIDE BROWSER SYNTAX

DOCUMENT:
The document object represents a web page that is displayed in a
browser window, frame or layer.An instance is created when each document
loded by the browser.
Properties:
alinkColour Color of active link.
all Array of all HTML tags in the document.
anchors Array of anchor objects.
applets Array of applet objects.
bgColor Batch ground color of documents
 Page No. 15

cookie Cookie associated with document.

class Style sheet classes array.
domain Domain of document.
embeds Array of embedded objects
fgColor Color of tent in document.
forms Array of form objects.
images Array of image objects
lastModified Data when document was last modified.
layers Array of layer object.
linkColor Color of links.
links Array of link objects.
Rereffer URL of document to which the current document was
linked.
url URL of document.
vlink color Color of visited links.
tags Style sheet tag array.
title Title of document.
Methods:
captureEvents() Captures events to be handled by the documents.
close() Closes output stream to document.
getSelection() Return the selected text in the document.
open() Opens output stream to document.
releaseEvents() Releases events captured by document.
routeEvent() Route captured events to other objects.
write() Appends text to document.
writeln() Appends text and new line to character.

Event handlers:
onClick Handler for clicks events.
onDblClick Handler for double click events.
onKeyDown Handler for Key down event.
oKeyPress Handler for Key press events
onKeyUp Handler for key up events
onMouseDown Handler for mouse down events
onMouseUp Handler for mouse up events
onLoad Handler used when document has finished loading.
onUnLoad Handler used when document from window.
 Page No. 16

document.captureEvents()
Syntax document.captureEvents(eventMask)
This method specifies the type of event that should be passed to the
document rather than to the object for which they are invoked. The event
mask argument captures more with | symbol.

Event.ABORT Event.BLUR Event.CHANGE

Event.CLICK Event.DBCLICK Event.DRAGDROP
Event.RROR Event.FOCUS Event.KEYDOWN
Event.KEYUP Event.KEYPRESS Event.MOUSEOUT
Event.MOVE Event.MOUSEUP Event.MOUSEDOWN
Event.MOUSEUP Event.OVER Event.RESET
Event.SELECT Event.SUBMIT Event.LOAD
Event.RESIZE Event.UNLOAD

Ex: <form>
<input type =”button” value=”yellow/purple”
onMouseDown=”document.bgColor=’yellow’”
onMouseUp=”document.bgColor=’green’”> </form>
<script language =”JavaScript”>
document.captureEvent(Event.MOUSEDOWN|Event.MOUSEUP);
document.onmousedown=function(event){document.bgColor=’red’})’;
document.onmouseup=function(event){document.bgColor=’blue’});
</script>

The following instance are created with each instance of tag appear
in HTML document. For following objects object represents that object
and contain length property ,the number of occurrences and
object[index] returns corresponding object in array.

Instance tag name attributes

Anchores <A> name,text,x,y
Applets <APPLET> name,text,x,y

AREA:-
 Page No. 17

• the <AREA> tag in HTML is used in conjuction with the <MAP>

tag to define on area with in a picture that will act as a hyperlink.
• An instance AREA object is created with each occurrance of the
<area>tag with in an HTML document.

Properties methods and event handeler are

Properties :
host host name href
pathname protocol target
Methods:
handleEevent() Calls the event handler associated with this event.
Event handlers:
onDblClick Invoked when mouse is double-clicked in the area.
onMouseOut Invoked when mouse is moves outside the area.
onMouseOver Invoked when mouse is moves into the region.
Syntax:
<area name=“areaname“ coords=“x1,x2,y1,y2” href = “href”
onmouseover=“function in<script>” onmouseout=“function ”>
fs
onDblClick, onMouseOver,onMouseOut,are invoke the function
which are specified in the <area> tag.

BUTTON:-
The botton object represents a graphical button that the user can
click initiate an action.Buttons are created by using <input> tag in HTML
document.Once created buttons are we can access through JS through
from.obect method.

Argument
string The string to appear in the graphical representation of a button
num: An index number that allows access to button through a form
elements list.
Properties:
form name type value

Methods:
click( ) Calls the button’s onClick event handling.
focus( ) Applies focus to a button.
handleEvent() Passes an event to the appropriate event handler
 Page No. 18

associated with a button.

Event handle:
onClick The handler invoked when a button is clicked.
onFocus The handler invoked when a button focus is applied
onMouseDown The handler invoked when a button is pressed.
onMouseUp The handler invoked when a button is released.

button.handlEvent( )
This method provides a way to invoke a button’s event handler
eventhough the event was not triggered by the user
Ex:-
<input type = ”button” value = “click” name=“clickbutton”
onClick = ”dispcmsg( )” onMouseDown = “dispmdmsg( )”
onMouseUp = “dispmumsg( )” >
the code for dispcmsg( ) ,dispmdmsg( ), dispmumsg( ) written
in <SCRIPT >tag.

onFocus: Event handler in defined in an <input > tag and specifies

what to do when the button given focus.

Eg:
<HTML><form name=“myform” value=“buttonone”
name=“onebut” onfocus = “alert( ocus event occurred)”>
</form> </HTML>

onMouseUp and onMouseDown : event handler in defined in <input >

tag and specifies that action to the value the button in chosen.

Checkbox:-
The checkbox object represents a graphical checkbox that the user
can click to toggle the check on or off. The check box are created
using <INPUT> tag with the type attribute set to checkbox in HTML
document. The checkbox can also be grouped together under the same name
and accessed as an array by using brackets.
Argument:
num1 An index number that allows acces to checkbox through
a form's element list
num2 That grouped together under same name.
 Page No. 19

Properties:
checked A Boolean value to determine if the checkbox is checked .
Form Return the form object the checkbox.
Name The string that is specified in the NAME attribute.
Value Returned when the form is submitted.
Method:
Blur() Remove the focus from the checkbox
Click() Calls the checkboxes on click event handler.
Handleevent() Passes an event to the appropriate event handler with the
checkbox.

EventHandlers:
onblur Invoked when focus in remove for the checkbox.
onClick Invoked when selected.
onFocus Invoked when focus in applied to the checkbox.

RADIO BUTTON: -
The radio object represents a graphical checkbox that the user can
click to toggle the on or off. The radio box are created using <INPUT> tag
with the type attribute set to radio in HTML document.
Properties/Methods:
checked A Boolean value to determine if the radio is checked .
form Return the form object the Radio button.
name The string that is specified in the NAME attribute.
value Reverss to the value attribute of the HTML <input> tag.
blur() Remove the focus from the radio object.
click() Calls the click event handler.
handlEvent() Invokes the event handler.
focus() sets focus t button.
onblur Invoked when focus in removed.
onClick Invoked when selected.
onFocus Invoked when focus in applied.

RESET: -
The Reset button represent reset button with in HTML document.
The button is created using <input> tag specify the type to RESET in HTML
document.
 Page No. 20

Properties/Methods:
form Return the form object the Reset button.
name The string that is specified in the NAME attribute.
type HTML type attribute for the Reset button.
value Refers to the value attribute of the HTML.
blur() Remove the focus from the reset object.
click( ) Calls the button’s onClick event handling.
focus() Sets focus to button.
handlEvent() Invokes the event handler.
onBlur Invoked when focus in removed.
onClick Invoked when selected.
onFocus Invoked when focus in applied.

SUBMIET: -
The submit object represent submit button with in HTML
document. The button is created using <input> tag specify the type to
SUBMIT in HTML document.
Properties/Methods:
form Return the form object the Submit button.
name The string that is specified in the NAME attribute.
type HTML type attribute for the Submit button.
value Refers to the value attribute of the HTML.
blur() Remove the focus from the submit object.
click( ) Calls the button’s onClick event handling.
focus() Sets focus to button.
handlEvent() Invokes the event handler.
onBlur Invoked when focus in removed.
onClick Invoked when selected.
onFocus Invoked when focus in applied.

WINDOW:
The window object is one of the top-level JavaScript objects that
are created when a <body>, <frameset>or<frame> tag or with openopen().

Methods:
alert Displays a dialogue box with the text passed.
back Loads the previous page in place of window instance.
 Page No. 21

captureEvents Sets the window to capture all the events of specified type.
clearInterval Clears the Interval set with the setInterval method.
close Closes the instance of window.
find Displays a find Dialogue box, we enter text and searcg.
forward Loads the next page in the place of next instance.
handleEvent Invokes the handler for the event passed.
moveTo Move the window to specified location.
open Opend a new instance of a window
print Prints the current window.
prompt displays a prompt dialogue box.
releaseEvent Released the capture events of specified type.
resizeTo Resizes the window to specified size.
scroll scroll the window to a specified location.
setInterval Invokes a function every time the number of milliseconds
has passed.
setTimeout Invokes a function when the number of milliseconds has
passed.
stop Stops the current window when it loading other items.

Properties:
closed specifies the window has been closed.
document Reference all the information about document.
frames Reference all the information about Frames.
history Reference all the URLs that the user visited.
length Represents number of frames int the window.
location The current URL loaded in window.
name Name of the window.
parent Reference to the upper most window.
scrollbars Reference to the scrollbar of the window.
self References the current window.
status Reference to the status bar’s message.
statusbar reference to the status browser.
window Reference to the current window.

NAVIGATOR:
The navigator object is used to obtain information related to the
navigator browser.
 Page No. 22

Property/Method:
appName Reffers to official browser name.
appVersion Refers to version information of the browser name.
platform Reffers to the platform on which browser is running.
javaEnabled() tests to see java supports in the web browser.

HISTORY:
The history is predefined JavaScript object that allows us to
navigate through the history of websites.
The browser stores the history of URL’s in the History object references.

Property/Method:
back() Loads the URL for the previous visited site.
current Refers to the current URL in the history.
forword() Loads the next URL in the history.
go() Loads the URL for the history list.
length Returns the number of elements in the history list.
next Refers to the next URL in the history.
previous Refers to the previous URL in the history.

LOCATION:
The Location object represent the current address displayed in the
browser.

Property/Method:
hash Represents an anchor name in URL that begins with the #
character
host Represents the host name and port number of URL.
hostname Represents the host name partr of URL.
href Represents the complete URL.
pathname Represents the pathname part of URL.
port Represents the port part of URL.
protocol Represents the protocol part of URL.
reload() Reloads the current URL.
replace() Loads a new web page in the current browser.
 Page No. 23

FRAME:
A Window can display multiple, independent scrollable frames on
a single screen, each with its own URL. The frame object’s instant created
with each occurrence of <frame> tag. JavaScript represents a frame using a
window object. Every frame object is a window object.

Methods:
blur Remove focus from the frame.
clearInterval Cancel a repeated execution.
clearTimeout Cancels any delayed execution.
document Reference all the information about document.
focus() Applies focus to frame.
frames Array containing references to child frames.
length Length of the frame array
name HTML name attribute of Frame object.
setInterval Sets function schedule for repeated execution.
setTimeout Sets function schedule for delayed execution.
parent Main window or frame from which frames are created.
print Invokes the print dialog window.
self Refers to the current frame.
top Browser window that executes script.
onBlur Event handler for blur event.
onFocus Event handler for Focus event.
onMove Event handler for Move event.
onResize Event handler for Resize event.

Conclusion:
To gain user’s attention on page, to add dynamism we can implement
JavaScript in static HTML documents.

By making certain validation and process at client side we can reduce the
traffic of network and increases the performance of server.

JavaScript can be used for client side validation i.e. before sending the
data from client to the server validations are done at client side. So that
reducing complexity at server side and send correct and sufficient data.