POTHURAI

Java Script is one popular scripting language over internet. Scripting means a small
sneak (piece). It is always independent on other languages.
There are no relationship between in java & java script. Java Script is a
scripting language that always dependent in T!" language. It used to css
commands. It is mainly used to creating #T!" pages & validating the data. This
is called client side validations.
$ops% & Inheritance' polymorphism' abstraction' encapsulation etc...
Java script is object based oriented language.
Inheritance is does not support in JavaScript' so it is called object based
oriented language.
JavaScript was developed by (etscape (company name) & initially called live
script. "ater !icroso)t developed and adds some )utures live script then it is called
*Jscript+. Jscript is nothing but Java script. ,e cannot create own classes in java
script.
Java script is designed to add interactivity to T!" pages. It is usually
embedded directly into html pages.
Java script is mainly use)ul to improve designs o) ,eb-ages' validate )rom data
at client side' detects ()ind) visitor.s browsers' create and use to cookies' and much
more.
Java script is also called light weight programming language' because Java
script is return with very simple synta/. Java script is containing e/ecutable code.
Java script is also called interpreted language' because script code can be
e/ecuted without preliminary compilation.
0reating a java script% & html script tag is used to script code inside the html page.
1script2 13script2
The script is containing 4 attributes. They are
5) "anguage attribute% & It represents name o) scripting language such as
JavaScript' 6bScript.
1script language7*JavaScript+2
4) Type attribute% & It indicates !I!8 (multi purpose internet mail e/tension) type
o) scripting code. It sets to an alpha&numeric !I!8 type o) code.
1script type7*te/t 3 JavaScript+2
"ocation o) script or placing the script% & Script code can be placed in both head &
body section o) html page.
Script in head section Script in body section
1html2 1html2
1head2 1head2
1script type7*te/t 3 JavaScript+2 1script type7 *te/t 3 JavaScript+2
Script code here 13script2
13script2 13head2
SUDHEER REDDY
1
POTHURAI
13head2 1body2
1body2 Script code here
13body2 13body2
13html2 13html2
Scripting in both head & body section% & we can create unlimited number o) scripts
inside the same page. So we can locate multiple scripts in both head & body section
o) page.
8/% &
1html2
1head2
1script type7*te/t 3 JavaScript+2
Script code here
13script2
13head2
1body2
1script type7*te/t 3 JavaScript+2
Script code here
13script2
13body2
13html2
-rogram% &
1html2
1head2
1script language79JavaScript92
document.write(9hai my name is Sudheer :eddy9)
13script2
13head2
1body te/t79red92
1mar;uee2
1script language79JavaScript92
document.write(9hai my name is Sunil <umar :eddy9)
13script2 13mar;uee2
13body2
13html2
$3-% &
hai my name is Sudheer :eddy
hai my name is Sunil <umar :eddy
document. write is the proper name o) object.
There are 4 ways o) e/ecuting script code
5) direct e/ecute
4) to e/ecute script code dynamically
=)
:eacts to events% & JavaScript can be set to e/ecute when something happens. ,hen
the page is )inished loading in browser window (or) when the user clicks on html
element dynamically.
SUDHEER REDDY
2
POTHURAI
8/% &
1>#$0T?-8 T!" -@A"I0 9&33,=033#T# T!" B.C Transitional 33 8(92
1T!"2
18D#2
1script language79JavaScript92
)unction my)( )
E
document.write(9ai Sudheer9)
F
13script2
138D#2
1A$#?2
to e/ecute script code%
1input type79button9 value79click me9 onclick79my)( )92
To e/ecute script code%
1input type79button9 value79touch me9 onmouseover79my)( )92
13A$#?2
13T!"2
$3-% & to e/ecute script code% To e/ecute script code%
0reating e/ternal script% & some times you might want to run same script on several
pages without having to write the script on each page. To simpli)y this' write
e/ternal script & save .js e/tension. To use e/ternal script speci)y .js )ile in src
attribute o) script tag.
(ote% & e/ternal script can not contain script tag.
document.write(9this is e/ternal script code 5 9G91br29)H
document.write(9this is e/ternal script code 4 9G91br29)H
document.write(9this is e/ternal script code = 9G91br29)H
document.write(9this is e/ternal script code B 9)H
save% & e/ternal.js
1T!"2
1A$#?2
1script language79JavaScript92
document.write(9this is document code 5 9G91br29)H
document.write(9this is document code 4 9G91br29)H
13script2
1script src79e/ternal.js92
13script2
13A$#?2
13T!"2
$3-% &
this is document code 5
this is document code 4
SUDHEER REDDY
3
POTHURAI
this is e/ternal script code 5
this is e/ternal script code 4
this is e/ternal script code =
this is e/ternal script code B
JavaScript synta/ rules% & JavaScript is case sensitive language. In this upper case
lower case letters are di))erentiated (not same).
8/% & a74CH
D74CH
Those the variable name Ia. is di))erent )rom the variable named ID..
8/% & my)( ) 33 correct
myJ( ) 33 incorrect
H is optional in general JavaScript.
8/% & a74C 33 valid
b7=C 33 valid
D75CH b7BCH 33 valid
owever it is re;uired when you put multiple statements in the same line.
JavaScript ignore white space. In java script white space' tag space & empty
lines are not preserved.
To display special symbols we use K.
0omment lines% & comments lines are not e/ecutable.
33 single line comment
3L this is multi line comment L3
#eclaring variable% & variable is a memory location where data can be stored. In
java script variables with any type o) data are declared by using the keyword Ivar..
Dll keywords are small letters only.
var aH a74CH
var strH str7 *Sunil+H
var cH c7.a.H
var dH d7=C.MH
Aut the keyword is not mandatory when declare o) the variable.
cH not valid. In this solution var keyword must be declared.
#uring the script' we can change value o) variable as well as type o) value o)
variable.
8/% &
a74CH
a7=C.MH
$perators% & when ever you combined operators & operands then it is called
operation. There are = types o) operators.
5) @nary operator% & i) operator acts upon single operand then it I called unary
operator.
4) Ainary operator% &i) operator acts upon two operands then it I called binary
operator.
SUDHEER REDDY
4
POTHURAI
=) Ternary operator% & i) operator acts upon three operands then it I called
ternary operator.
5) Drithmetic operators% & G ' & ' L ' 3 ' N ' GG ' &&
a74CH
& aH 33 & operator act upon only single operand' so it is called unary operator.
a74CH
b7BCH
a & bH 33 & operator act upon only single operand' so it is called binary
operator.
L' 3 ' N pure binary operators.
4) Dssignment operators% &
7 is 5
st
category it assigns variables.
G 7 ' & 7 ' L 7 ' 3 7 ' N 7 4
nd
category.
These sets o) operators are compound assignment operators & combine
couple o) the statements.
a 7 a G bH aG7bH 33 both are same.
=) :elational operators% & 1 ' 2 ' 2 7 ' 1 7 ' 7 7
> 7 7 ' 7 7 7 ' > 7 7 7 (newly de)ined)
,hen you compare two ;uantities' we can use relational operators.
L8/% &
a74CH
b7*4C+H
a77b returns true
a777b returns )alse.
Aecause 7 7 checks only content o) variable' 7 7 7 checks both data & type o)
data o) variable in java script.
B) "ogical operators% & && ' OO ' >
0ompare two or more ;uantities we can use logical operators. These
operators are just like boolean (true 3 )alse)
((cond5)&&(cond4)&&(cond=))
Dll conditions must be true it is true otherwise )alse.
((cond5)OO(cond4)OO(cond=))
Dny one condition is true it is true otherwise )alse.
P) 0onditional operators% & % ' Q
var57(cond)Qvar4%var=
8/% & a74CH b7=CH
big7(a2b)Qa%b
document.write(big)
R) (ew operator% & new operator is creating one object dynamically.
var obj7new classname( )
SUDHEER REDDY
5
POTHURAI
8/% & var d7new #ate( )H
d.get!onth( )H
0onditional statements% &
In Java Script conditional statements are use)ul to e/cuse di))erent action )or
di))erent decisions (conditions).
5) i) statement.
4) i)&else statement.
=) switch statement.
i) statement is use)ul to per)orm(e/ecute) a single statement or group o)
statements when the condition is true.
i) S else statement is use)ul to e/ecute a one block o) code )rom two blocks
where one condition.
Switch statement is very )re;uently to select one o) many blocks o) code )or
e/ecution.
8/% &
1T!"2
1A$#?2
1script language79JavaScript92
var d7new #ate( )H
var day7d.get#ay( )H
switch(day)
E
case C%
document.write(9enjoy Sunday9)H
breakH
case 5%
document.write(9learning !onday9)H
breakH
case 4%
document.write(9popper Tuesday9)H
breakH
case =%
document.write(9middle ,ednesday9)H
breakH
case B%
document.write(9temple Thursday9)H
breakH
case P%
document.write(9)inally Jriday9)H
breakH
case P%
document.write(9super Saturday9)H
breakH
de)ault %
SUDHEER REDDY
6
POTHURAI
document.write(9I am looking )orward )or this week end9)H
F
13script2
13A$#?2
13T!"2
$3-% & learning !onday
0ontrol structures %&( loops)
In java script loops are use)ul to per)orm one block o) code repeatedly )or speci)ied
no o) times. There are = types o) loops.
5) while loop
4) do&while loop
=) )or loop.
5) while loop%& while loop is use)ul to e/ecute a block o) code repeatedly bussed on
condition. It is also entry controlled loop.
Synta/% & while(cond) E &&& F
8/% & 1T!"2
18D#2
1TIT"82 (atural (oTs up to 5CC using while 13TIT"82
138D#2
1A$#?2
1script language79JavaScript92
a75H
while(a175CC)
E
document.write(aG9 9)H
aGGH
F
13script2
13A$#?2
13T!"2
$3-% & 5 4 = B P R M U V 5C 55 54 5= 5B 5P 5R 5M 5U 5V 4C 45 44 4= 4B 4P 4R 4M 4U 4V
=C =5 =4 == =B =P =R =M =U =V BC B5 B4 B= BB BP BR BM BU BV PC P5 P4 P= PB PP PR PM PU
PV RC R5 R4 R= RB RP RR RM RU RV MC M5 M4 M= MB MP MR MM MU MV UC U5 U4 U= UB UP UR UM
UU UV VC V5 V4 V= VB VP VR VM VU VV 5CC
4) do&while loop% & do&while loop is use)ul to e/ecute a block o) code repeatedly
based on condition. It is also called e/it controlled loop.
Synta/% & do E &&& F while(cond)H
8/% & 1T!"2
18D#2
1TIT"82 Jibonacci series up to 5C 13TIT"82
138D#2
1A$#?2
SUDHEER REDDY
7
POTHURAI
1script language79JavaScript92
a7CH
b75H
document.write( aG9 9GbG9 9)
c74H
do
E
s7aGbH
document.write( sG9 9)H
cGGH
a7bH
b7sH
F
while (c15C)H
13script2
13A$#?2
13T!"2
$3-% & C 5 5 4 = P U 5= 45 =B
=) )or loop% &
Synta/% & )or(initialiWationH condH (inc 3 dec)) E &&&&&& F
8/% & 1T!"2
18D#2
1TIT"82 -rime noTs up to 5CC 13TIT"82
138D#2
1A$#?2
1script language79JavaScript92
)or(i7CHi175CCHiGG)
E
c7CH
)or(j7CHj17iHjGG)
E
i)(iNj77C)
cGGH
F
i)(c774)
document.write( iG9 9)H
F
13script2
13A$#?2
13T!"2
$3-% & 4 = P M 55 5= 5M 5V 4= 4V =5 =M B5 B= BM P= PV R5 RM M5 M= MV U= UV VM
JavaScript comes with many utility classes' that stores di))erent types o) data' but
we should create object to the class be)ore using it.
SUDHEER REDDY
8
POTHURAI
5) String class% & It is used to store te/t String that lets you to do process on it. There
are 4 ways to store that string as shown below
5) var str7*Sunil+
4) var str7new String(*Sunil+)
String object contains so many methods & properties.
:epresentation% $bjname.method( )
!ethod #escription
big( ) displays a string in a big )ont.
small( ) displays a string in a small )ont.
blink( ) displays a blinking string.
bold( ) displays a string in bold.
italics( ) displays a string in italic.
)ontsiWe( ) displays a string in speci)ic siWe.
)i/ed( ) displays a string in speci)ic siWe.
)ontcolor( ) displays a string in speci)ied color.
strike( ) displays a string with a strike through.
sub( ) displays a string as a subscript.
sup( ) displays a string as a super script.
to"ower0ase( ) displays a string in lower case letters.
to@pper0ase( ) displays a string in upper case letters.
charDt( ) returns the character at a speci)ied position.
concat( ) join 4 or more strings.
inde/$)( ) returns the position o) the 5
st
occurrence o) a
speci)ied string value in a string.
lastInde/$)( ) returns the position o) the last occurrence o) a
speci)ied string value searching backwards
)rom the speci)ied position in a string.
link( ) displays a string as a hyper link.
match( ) searches )or a speci)ied string value in a string
and return sub string.
replace( ) replace some characters with some other
characters in a string.
search( ) searches a string )or a speci)ied value.
slice( ) e/tracts a part o) a string add returns the
e/tracted part in a new string.
spilt( ) splits a string in an array o) strings.
substr( ) e/tracts a speci)ied a number characters in a
string )rom a start inde/.
subString( ) e/tracts the character in a string between two
speci)ied indices.
-roperty #escription
length returns the no. o) characters in a string.
8/% &
SUDHEER REDDY
9
POTHURAI
1T!"2
18D#2
1TIT"82 String class13TIT"82
138D#2
1A$#?2
1script language79JavaScript92
var t7new String(9-.Sudheer :eddy9)
var s7new String(9-.Sunil <umar :eddy9)
document.write(91p29G9Small 7 9Gt.small( )G913p29)
document.write(91p29G9Alink 7 9Gt.blink( )G913p29)
document.write(91p29G9Aold 7 9Gt.bold( )G913p29)
document.write(91p29G9Italics 7 9Gt.italics( )G913p29)
document.write(91p29G9Jont siWe 7 9Gt.)ontsiWe(4C)G913p29)
document.write(91p29G9Ji/ed 7 9Gt.)i/ed( )G913p29)
document.write(91p29G9Jont color 7 9Gt.)ontcolor(9red9)G913p29)
document.write(91p29G9strike 7 9Gt.strike( )G913p29)
document.write(91p29G9Sub class 7 9Gt.sub( )G913p29)
document.write(91p29G9Super 0lass 7 9Gt.sup ( )G913p29)
document.write(91p29G9"ower case 7 9Gt.to"ower0ase( )G913p29)
document.write(91p29G9@pper case 7 9Gt.to@pper0ase( )G913p29)
document.write(91p29G90har at 7 9Gt.charDt( )G913p29)
document.write(91p29G90oncat 7 9Gt.concat( )G913p29)
document.write(91p29G9Inde/ o) 7 9Gt.inde/$)(9:eddy9)G913p29)
document.write(91p29G9"ast inde/ o) 79Gt.lastInde/$)(9Sudheer9)G913p29)
document.write(91p29G9"ink 7 9Gt.link(9www.google.com9)G913p29)
document.write(91p29G9!atch 7 9Gs.match(9Sunil9)G913p29)
document.write(91p29G9:eplace 7 9Gt.replace(9sunil kumar reddy9)G913p29)
document.write(91p29G9Search 7 9Gt.search(9Sudheer9)G913p29)
document.write(91p29G9Slice 7 9Gs.slice(9Sudheer9)G913p29)
document.write(91p29G9Split 7 9Gt.split(9:eddy9)G913p29)
document.write(91p29G9Substr 79Gt.substr(9Sunil9)G913p29)
document.write(91p29G9Substring 7 9Gt.substring(9Sunil9)G913p29)
13script2
13A$#?2
13T!"2

$3-% & Small 7 -.Sudheer :eddy
Alink 7 -.Sudheer :eddy
Aold 7 -.Sudheer :eddy
Italics 7 P.Sudheer Reddy
Jont siWe 7 -.Sudheer :eddy
Ji/ed 7 P.Sudheer Reddy
SUDHEER REDDY
10
POTHURAI
Jont color 7 -.Sudheer :eddy
strike 7 -.Sudheer :eddy
Sub class 7 -.Sudheer :eddy
Super 0lass 7
-.Sudheer :eddy
"ower case 7 p.sudheer reddy
@pper case 7 -.S@#88: :8##?
0har at 7 -
0oncat 7 -.Sudheer :eddy
Inde/ o) 7 5C
"ast inde/ o) 7 4
"ink 7 -.Sudheer :eddy
!atch 7 Sunil
:eplace 7 -.Sudheer :eddy
Search 7 4
Slice 7 -.Sunil <umar :eddy
Split 7 -.Sudheer '
Substr 7-.Sudheer :eddy
Substring 7 -.Sudheer :eddy
4) #e)ining Drrays%&
The array class is used to store a set o) values in a single variable name with
uni;ue inde/ number. ,e can de)ine an Drray object with the operator new. There
are two ways o) adding values to an array.
5) a) var my0ars7new Drray( )H
my0arsXCY 7 *,agner+
my0arsX5Y 7 *innova+
my0arsX4Y 7 *Santro+
?ou called also pass an integer argument to control the array.s siWe.
b) var my cars 7new Drray(=)
my0arsXCY 7 *,agner+
SUDHEER REDDY
11
POTHURAI
my0arsX5Y 7 *innova+
my0arsX4Y 7 *santro+
4) var my0ars 7 new Drray ( *,agner+' *innova+' *Santro+)
Drray object contains so many methods & properties.
:epresentation% $bjname.method( )
!ethod #escription
concat( ) joins 4 or more arrays and returns the result.
join ( ) puts all the elements o) an array into a string. The elements
are separated by a speci)ied delimiter.
pop( ) removes & return the last element o) an array.
push( ) adds 5 or more elements to the end o) an array & returns
the new length.
shi)t( ) removes & returns the )irst element o) an array.
unshi)t( ) adds 5 or more elements to the beginning o) an array &
returns the new length.
reverse( ) reverse the order o) the elements in an array.
slice( ) returns selected element )rom an e/isting array.
sort( ) sorts the array elements o) an array.
splice( ) removes & adds new elements to an array.
-roperty #escription
length sets or return the no. o) elements in an array.
8/% &
1T!"2
18D#2
1TIT"82 Drray class 13TIT"82
138D#2
1A$#?2
1script language79JavaScript92
var a7new Drray(=)H
aXCY79Sudheer9
aX5Y79Sunil9
aX4Y79Aalu9
var b7new Drray(=)H
bXCY79latha9
bX5Y79Saraswathi9
bX4Y79@sha9
)or(i7CHi1a.lengthHiGG)
E
document.write(91p29GaXiYG913p29)
F
document.write(91p29G90oncat 7 9Ga.concat(b)G913p29)
document.write(91p29G9Joined 7 9Ga.join(9&&&&&&&& 9)G913p29)
document.write(91p29G9-oped 7 9Ga.pop( )G913p29)
document.write(91p29G9-oped 79Ga.pop( )G913p29)
SUDHEER REDDY
12
POTHURAI
document.write(91p29G9Shi)t 79Ga.shi)t( )G913p29)
document.write(91p29G9@nshi)t 79Gb.unshi)t()G913p29)
document.write(91p29G9Sort 79Gb.sort( )G913p29)
document.write(91p29G9:everse 79Gb.reverse( )G913p29)
document.write(91p29G9Slice 79Gb.slice( )G913p29)
document.write(91p29G9-ushed 79Ga.push(9Sirisha9)G913p29)
document.write(91p29G9pushed 79Ga.push(9Sandhya9)G913p29)
document.write(91p29G9pushed 79Ga.push(9Jeevitha9)G913p29)
document.write(91p29G9Sort 79Ga.sort( )G913p29)
)or(i7CHi1a.lengthHiGG)
E
document.write(91p29GaXiYG913p29)
F
13script2
13A$#?2
13T!"2
$3-% & Sudheer
Sunil
Aalu
0oncat 7 Sudheer'Sunil'Aalu'latha'Saraswathi'@sha
Joined 7 Sudheer&&&&&&&& Sunil&&&&&&&& Aalu
-oped 7 Aalu
-oped 7Sunil
Shi)t 7Sudheer
@nshi)t 7unde)ined
Sort 7Saraswathi'@sha'latha
:everse 7latha'@sha'Saraswathi
Slice 7latha'@sha'Saraswathi
-ushed 75
pushed 74
pushed 7=
SUDHEER REDDY
13
POTHURAI
Sort 7Jeevitha'Sandhya'Sirisha
Jeevitha
Sandhya
Sirisha
#ate class% & The date class used to work with dates & time.
0reate #ate object% & var d7new #ate( )H
#ate object methods% &
!ethod #escription
#ate( ) returns today.s date & time.
get#ate( ) returns the day o) the month.
get#ay( ) returns the day o) the week (Jrom C S R).
get!onth( ) returns the month ()rom C S 55)
getJull?ear( ) returns the year as a B digit number.
getours( ) returns the hour ()rom C & 4=).
get!inutes( ) returns the minutes ()rom C S PV).
getSeconds( ) returns the seconds ()rom C S PV).
get!illeSeconds( ) returns the milliseconds ()rom C S VVV).
getTime( ) returns the no. o) milliseconds since midnight jan 5'5VMC.
set#ate( ) sets the day o) the month.
set!onth( ) set the month (C &55)
setJull?ear( ) sets the year (B digits)
setours( ) set the our (C S 4=)
set!inutes( ) set the minutes (C & PV)
setSeconds( ) set the seconds (C S PV)
8/% &
1>&& to display current week day' month' date' & time based on system time&&2
1html2
1head2
1title2 #ate class 13title2
13head2
1body2
1script type79te/t3JavaScript92
document.write(91b2today date13b2%9G#ate( )G91br29)
33 to calculate years )rom 5VMC
var minutes75CCCLRC
hours7minutesLRC
days7hoursL4B
years7daysL=RP
var d7new #ate( )
var t7d.getTime( )
var y7t'years
document.write(9itTs been% 9Gy G9years since 5VMC3C53C5>9G91br29)
SUDHEER REDDY
14
POTHURAI
33 to set a speci)ic date
var d7new #ate( )
d.setJull?ear(4CCM'U'5V)
document.write(9set speci)ic date%9 GdG91br29)
33 an array to write a week day & not just a number
var d7new #ate( )
var weekday7new Drray(M)
weekdayXCY79Sunday9
weekdayX5Y79!onday9
weekdayX4Y79Tuesday9
weekdayX=Y79,ednesday9
weekdayXBY79Thursday9
weekdayXPY79Jriday9
weekdayXRY79Saturday9
document.write(9Today it is 9GweekdayXd.get#ay( )Y)
13script2
13body2
13html2
$3-% &
today date%!on Sep 5C 5P%44%CV 4CCM
itTs been% 55UVB5MV4VRCVyears since 5VMC3C53C5>
set speci)ic date%,ed Sep 5V 5P%44%CV @T0GCP=C 4CCM
Today it is !onday
!ath class% & the math class allows you to per)orm common mathematical tasks.
(ote% & it is not re;uired to create object to math class be)ore using it.
,e can call methods o) math class as shown below.
g.)% !ath.method(ame( )
!ath object methods% &
!ethod #escription
abs(/) returns the absolute value o) a number
ceil(/) returns the value o) a number round upwards
to the nearest integer.
)loor(/) returns the value number rounded downwards
to the nearest integer.
e/p(/) returns the value o) e/ponent.
log(/) returns the natural algorithm (base 8) o) a no.
ma/(/'y) returns the number with the heights value
min(/'y) returns the number with the lowest value.
pow(/'y) returns the value o) / to the power o) y.
random( ) return a random number between C & 5
round(/) rounds a number to the nearest integer 5'4'=
s;rt(/) returns the s;uire root o) a number.
sin(/) returns the sine o) an angle.
cos(/) returns the cosine value o) an angle.
tan(/) returns the tangent o) an angle.
SUDHEER REDDY
15
POTHURAI
8/% &
1html2
1head2
1title2 !ath class 13title2
1body2
1script language79JavaScript92
/7B.RH
y7VH
document.write(91b2absolute79G!ath.abs(/)G91br29)
document.write(91b2ceil79G!ath.ceil(/)G91br29)H
document.write(91b2)loor79G!ath.)loor(/)G91br29)H
document.write(91b2e/ponent79G!ath.e/p(/)G91br29)H
document.write(91b2logarithm79G!ath.log(/)G91br29)H
document.write(91b2ma/imum79G!ath.ma/(/'y)G91br29)H
document.write(91b2minimum79G!ath.min(/'y)G91br29)H
document.write(91b2power79G!ath.pow(y'/)G91br29)H
document.write(91b2random79G!ath.random(/)G91br29)H
document.write(91b2round79G!ath.round(/)G91br29)H
document.write(91b2s;uire79G!ath.s;rt(/)G91br29)H
document.write(91b2sin79G!ath.sin(/)G91br29)H
document.write(91b2cos79G!ath.cos(/)G91br29)H
document.write(91b2tan79G!ath.tan(/)G91br29)H
13script2
13body2
13html2
$3-% &
absolute7B.R
ceil7P
)loor7B
e/ponent7VV.BUB=5PRB5V==MM
logarithm75.P4RCPR=C=BVPCBV5
ma/imum7V
minimum7B.R
power74BP5V.M44CUBBP445
random7C.BRUUC554MUCV555
round7P
s;uire74.5BBMR5CPUVP4M45M
sin7&C.VV=RV5CC=R==BRBB
cos7&C.5545P4P4RV=PCPBUM
tan7U.URC5MBUVPRBUCBP
JavaScript )unctions% & in java script )unctions are created with the keyword
I)unction. as shown below
Synta/% & )unction )unname( )
E
&&&&&&&&
F
SUDHEER REDDY
16
POTHURAI
Zenerally we can place script containing )unction head section o) web page. There
are 4 ways to call the )unction.
5) direct call )unction
4) 8vents handlers to call the )unction dynamically.
5 ,e can pass data to )unction as argument but that data will be available inside
the )unction.
8/% &
1T!"2
18D#2
1TIT"82 Junction direct call13TIT"82
1script language79JavaScript92
)unction add(/'y)
E
W7/Gy
return W
F
13script2
138D#2
1A$#?2
1script2
var r7add(=C'RC)
document.write(9addition is %9Gr)H
13script2
13A$#?2
13T!"2
$3-% & addition is %VC
4 to add dynamical e))ects' java script provide a list o) events that call )unction
dynamically. are each event is one attribute that always speci)ied in html tags.
attrname7+attrval+
event(ame7+)unname( )+
8/% &
1T!"2
18D#2
1TIT"82 Junction dynamically13TIT"82
1script language79JavaScript92
)unction add( )
E
/74C
y7=C
W7/Gy
document.write(9addition is %9GW)H
F
13script2
SUDHEER REDDY
17
POTHURAI
138D#2
1A$#?2 to call )unction%
1input type79button9 value79click hare9 onclick79add( )92
13script2
13A$#?2
13T!"2
$3-% & to call )unction%
addition is %VC
8vents are not case sensitive.
Java script events% &
Dttribute The event occurs when[
onclick mouse click an object
ondblclick mouse double clicks
onmouseover a mouse cursor on touch here
onmousedown a mouse button is pressed
onmousemove the mouse is moved
onmouseout the mouse is moved out an element
onmouseup a mouse button is released
onkeydown a keyboard key is pressed
onkeypress a keyboard key is pressed or held down
onkeyup a keyboard key is released
on)ocus an elements get )ocus
onblur an element loses )ocus
onchange the content o) a )ield change
onselect te/t is selected
onload a page or an image is )inished loading
onunload the user e/ist the page
onerror an error occurs when loading a document or an image
onabort loading an image is interrupted
onresiWe a window or )rame is resiWed
onreset the reset button is pressed
onsubmit the submit button is clicked
8/% &
1T!"2
18D#2
1TIT"82 !ouse 8vents 13TIT"82
1script language79JavaScript92
)unction add()
E
a7PP
b7BP
c7aGb
SUDHEER REDDY
18
POTHURAI
document.write(9addition is %9Gc)
F
13script2
138D#2
1A$#?2
1b onclick79add( )92
to call )unction click here %
13b2
1br2
1b onmouseover79add( )92
to call )unction touch here %
13b2
1br2
1b ondblclick79add( )92
to call )unction double click here %
13b2
1br2
1b onmousemove79add( )92
to call )unction cursor move here %
13b2
1br2
1b onmouseup79add( )92
to call )unction cursor up here %
13b2
1br2
1b onmouseout79add( )92
to call )unction cursor out here %
13b2
13A$#?2
13T!"2
$3-% &
to call )unction click here %
to call )unction touch here %
to call )unction double click here % addition is %5CC
to call )unction cursor move here %
to call )unction cursor up here %
to call )unction cursor out here %
-rogram% &
1T!"2
18D#2
1TIT"82 display student name 13TIT"82
1script language79JavaScript92
)unction disp( )
E
33 access )rom data
SUDHEER REDDY
19
POTHURAI
var name7window.document.student.sname.value
33 (or) var name7window.document.get8lementAyId(9snameid9).value
33checking name
i)(name799OO>is(a((name)OO>is(a((name.charDt(C)))
window.alert(9sname you entered is invalid9)
else
document.write(9sname you have entered is % 9Gname)H
F
13script2
138D#2
1A$#?2
1)orm name79student92
8nter Student name%
1input type79te/t9 name79sname9id79snameid9 value79enter9 onblur79disp( )92
13)orm2
13A$#?2
13T!"2
$3-% &
8nter Student name%
1
8nter Student name%
1
sname you have entered is % true
-opup bo/es% & popup (arises) bo/ is a small window that always shown be)ore
opening the page. The purpose o) popup bo/ is to write message' accept some thing
)rom user. Java script provides = types o) popup bo/es. They are 5) alert 4)
0on)irm. =) -rompt.

5) alert popup bo/ %&
Dlert bo/ is a very )re;uently use)ul to send or write cautionary messages to end
use alert bo/ is created by alert method o) window object as shown below.
Synta/% & window S alert (*message+)H
,hen alert popup' the user has to click ok be)ore continue browsing.
8/% &
1html2
1head2
1title2 alert bo/ 13title2
1script language79JavaScript92
SUDHEER REDDY
20
POTHURAI
)unction add( )
E
a74C
b7BC
c7aGb
window.alert(9This is )or addition o) 4 noTs9)
document.write(9:esult is% 9Gc)
F
13script2
13head2
1body onload79add( )92
13body2
13html2
$3-% &
:esult is% RC
4) con)irm popup bo/%&
This is use)ul to veri)y or accept some thing )rom user. It is created by con)irm
method o) window object as shown below.
Synta/%&
window.con)irm (*messageQ+)H
,hen the con)irm bo/ pop.s up' user must click either ok or cancel buttons to
proceed. I) user clicks ok button it returns the boolean valve true. I) user clicks
cancel button' it returns the boolean value )alse.
8/% &
1T!"2
18D#2
1TIT"82 0on)irm 13TIT"82
1script2
)unction sub( )
E
a7PC
b7BP
c7a&b
/7window.con)irm(9#o you want to see subtraction o) numbers9)
i)(/77true)
E
document.write(9result is %9Gc)
F
SUDHEER REDDY
21
POTHURAI
else
E
document.write(9you clicked cancel button9)
F
F
13script2
138D#2
1A$#? onload79sub( )92
to see the o3p in pop up bo/%
13A$#?2
13T!"2
$3-% &
to see the o3p in pop up bo/%
result is %P
=) -rompt popup bo/%& It is use)ul to accept data )rom keyboard at runtime. -rompt
bo/ is created by prompt method o) window object.
window.prompt (*message+' *de)ault te/t+)H
,hen prompt dialog bo/ arises user will have to click either ok button or cancel
button a)ter entering input data to proceed. I) user click ok button it will return
input value. I) user click cancel button the value *null+ will be returned.
8/% &
1T!"2
18D#2
1TIT"82 -rompt 13TIT"82
1script2
)unction )act( )
E
var b7window.prompt(9enter Gve integer %9'9enter here9)
var c7parseInt(b)
a75
)or(i7cHi275Hi&&)
E
a7aLi
F
window.alert(9)actorial value %9Ga)
F
13script2
138D#2
SUDHEER REDDY
22
POTHURAI
1A$#? onload79)act( )92
13A$#?2
13T!"2
$3-% &
#ocument object model%&
*The ,=0 document object model (#$!) is a plat)orm and language
neutral allows inter)ace that programs & scripts to dynamically structure and
style o) document+.
The ,=0 #$! provides a standard set o) object )or representing T!" and
\!" documents and a standard inter)aces )or accessing and manipulating them.
The )ollowing is the hierarchy o) the #$!.
O& #ocument &&&&&&&&&&&&&&O& images
O "inks
O& istory anchors
O $bjects
O& "ocation 8mbeds
O Jorms
,indow &&&&&&&&&&& O
O
O& (avigator te/t )ields
O pass words
O& 8vent )ields
O hidden )ields
O& Jrames :adio button
Select
Submit
:eset
Autton
Te/t area
Jill upload
0heckbo/
SUDHEER REDDY
23
POTHURAI
navigator. app name ( )
navigator. app version ( ).
#ocument object properties%&
#ocument object is object that always re)ers current document body with this
object you can access e/isting documents and update content (te/t' image' list'
table' )orms) o) them.
g.)%& document. property name.
-roperty description
bgcolor sets return the background color o) the document
)gcolor sets or return the te/t color
last!odi)ied returns the date & time the document was last
modi)ied
link0olor sets or returns the color o) the links in the document
alink0olor sets or return the color o) active links
title returns the title
@:" returns the @:" o) the current document
vlink0olor sets or return the color o) the visited links
#ocument object methods% &
g.) % document.methodname( )
!ethod #escription
clear( ) clear all the elements in the document
createDttribute(*name+) create an attribute with a speci)ied a name
create8lement(*tag+) creates an element
createTe/t(ode(*t/t+) create a te/t string
)ocus( ) gives the document )ocus
get8lementAyId( ) returns a re)erence to the )irst object with the
speci)ied I#
get8lementAy(ame( ) returns a collection o) objects with the
speci)ied name
get8lementAyTag (ame(*tag+) returns a collection o) objects with the speci)ied
TDZ(D!8
open( ) opens a document )or writing
close( ) close the output stream & displays the sent data
write( ) write a te/t string to a document
8/5% &
1T!"2
18D#2
1TIT"82 document 13TIT"82
1script2
)unction title5( )
E
window.alert(9Title o) the document is %9Gdocument.title)H
F
SUDHEER REDDY
24
POTHURAI
)unction address( )
E
window.alert(9@:" o) the document is %9Gdocument.@:")H
F
)unction bgcolor( )
E
document.bg0olor79yellow9H
F
)unction mdate( )
E
window.alert(9The last modi)ied date is %9Gdocument.last!odi)ied)H
F
13script2
138D#2
1A$#?2
1input type79button9 value79page title9 onclick79title5( )921br2
1b onmouseover79address( )92to get page address just touch this te/t
13b21br2
1input type79button9value79change bgcolor9 onclick79bgcolor( )92 1br2
1input type79button9 value79"ast modi)ied date9 onclick79mdate( )92
13A$#?2
13T!"2
$3-% &
8/4% &
1T!"2
18D#2
1TIT"82 see tag 13TIT"82
1script2
)unction get8lement( )
E
var /7document.get8lementAyId(9mar;ueeid9)H
window.alert(9i am a 9G/.tag(ameG9element9)
SUDHEER REDDY
25
POTHURAI
F
13script2
138D#2
1A$#?2
1mar;uee id79mar;ueeid9onclick79get8lement( )92
1b21b2
0lick to see what element I am i
13mar;uee2
13A$#?2
13T!"2
$3-% &
0lick to see what element I am i
8/=% &
1T!"2
18D#2
1TIT"82 This is main page 13TIT"82
1script2
)unction create(ew#oc( )
E
var new#oc7document.open( )
var t/t791html21head21title2This is new document 13title2 13head21body2
0reating about #$! is )un> 13body2 13html29H
new#oc.write(t/t)
new#oc.close()H
F
13script2
138D#2
1A$#? onclick79create(ew#oc( )92
1b2
To see the ne/t page click here
13b2
13A$#?2
13T!"2
$3-% &
SUDHEER REDDY
26
POTHURAI
#$! window object% &
,indow object% & the window object represents the current browser window. D
window object is created automatically with every instance o) a 1body2 or 1)rame2
tag.
,indow object properties% &
-roperty description
de)aultStatus sets or return the de)ault te/t in the status bar o) the
window.
dialogDrguments returns all variables passed into the model dialog
window.
dialogeight sets or return the height o) the modal dialog window.
dialog"e)t sets or return the le)t co&ordinates o) the modal dialog
window.
dialogTop set or return the top co&ordinates o) the modal dialog
window.
dialog,idth sets or return the width co&ordinates o) the modal
dialog window.
length sets or return the number o) )rames in the window.
name sets or return the name o) the window.
opener sets or return a re)erence to the window that created
the window.
parent returns the parent window.
return6alue sets or return the value returned )rom the modal
dialog window.
sel) returns a re)erence to the current window.
status sets or return the te/t in the status bar o) the window.
top returns the topmost ancestor window.
,indow object methods% &
!ethod description
alert( ) display an alert bo/ with a speci)ied message & an ok
button.
blur( ) removes )ocus )rom the current window.
close( ) closes the current window.
SUDHEER REDDY
27
POTHURAI
con)irm( ) displays a dialog bo/ with a speci)ied message & ok &a cancel button.
create-op( ) create a pop&up window.
)ocus( ) sets )ocus on the current window.
moveAy(/'y) moves the window a speci)ied number o) pi/els in
relation to its current co&ordinates.
navigate(*@:"+) loads the speci)ied @:" into the window.
open( ) open a new browser window.
print( ) print the content o) the current window.
prompt( ) displays a dialog bo/ that prompts the user )or input.
resiWeAy(/'y) resiWes the window by the speci)ied pi/els.
scrollAy( ) scrolls the content by the speci)ied no. o) pi/els.
setInterval calls a )unction 3 evaluate an e/pression every time a
()unction' speci)ied interval. The arguments can take the
milliseconds) )ollowing values. Junction re;uired. D pointer to a
)unction or the code to be e/ecuted millisec re;uired.
clearInterval(I#) cancels a timeout that is set with the set interval ( )
method.
setTimeout( calls a )unction or evaluates an e/pression a)ter a
)unname'millisec). speci)ied number o) milliseconds.
clearTimeout(I#) cancels a timeout that is set with the setTimeout( ) method.
8/% &
1T!"2
18D#2
1TIT"82 Time display13TIT"82
1script2
)unction startTime( )
E
var today7new #ate( )
var h7today.getours( )
var m7today.get!inutes( )
var s7today.getSeconds( )
33 add a C in )ront o) noTs 15C
m7cheakTime(m)
s7cheakTime(s)
document.get8lementAyId(9bid9).innerT!"7hG9%9GmG9%9Gs
t7window.setTimeout(TstartTime( )T'PCC)
F
)unction cheakTime(i)
E
i)(i15C)
E
i79C9Gi
F
return i
F
13script2
SUDHEER REDDY
28
POTHURAI
138D#2
1A$#? onload79startTime( )92
1b id79bid92 13b2
13A$#?2
13T!"2
$3-% & 5M%CP%5M
0lient side validations% &
1T!"2
18D#2
1TIT"82 client side validation 13TIT"82
1script2
33 validating emp name
)unction cheakname( )
E
var name7window.document.get8lementAyId(9enameid9).value
i)(name799OO>is(a((name)OO>is(a((name.charDt(C)))
E
window.alert(9name enterd is invalid9)
window.document.get8lementAyId(9enameid9).)ocus( )
window.document.get8lementAyId(9enameid9).value799
F
else
E
window.document.get8lementAyId(9noid9).disabled7)alseH
F
F
33 validating eno
)unction cheakno( )
E
var no7window.document.get8lementAyId(9noid9).value
var no7parseInt(no)
i)(no799OOis(a((no))
E
window.alert(9numbered enter is invalid9)
window.document.get8lementAyId(9noid9).)ocus( )
window.document.get8lementAyId(9noid9).value799
F
else
E
window.document.get8lementAyId(9submitid9).disabled7)alseH
window.document.get8lementAyId(9resetid9).disabled7trueH
F
F
13script2
138D#2
SUDHEER REDDY
29
POTHURAI
1A$#?2
1)orm name79emp9 action799method79get92
enter emp name%1input type79te/t9 name79ename9 id79enameid9 onblur7
9cheakname( )92
1br2
enter emp id%1input type79te/t9 name79no9 id79noid9 onblur79cheakno( )
9disabled21br2
1input type79submit9 id79submitid9 value79send9 disabled2
1input type79reset9 id79resetid9 value79clear92
13)orm2
13A$#?2
13T!"2
$3-% &
enter emp name% :
Latha

enter emp id:
Sunil
send clear
enter emp name% :
Latha

enter emp id:
2
send clear
SUDHEER REDDY
30