unit3-Basics of JavaScript ppt
Short Description
Basics of javaScript ppt for unit 3 as per VTU syllabus from programming the www - robert w sebesta...
Description
Basics of Javascript: Unit-3
Prepared by, Divya Asst. Prof. ISE dept. VCET, Puttur
Overview of Javascript, Object orientation & Javascript, Syntactic characteristics, Primitives, operations, &epressions &epressions,, Screen o!tp!t and "eyboard inp!t, #ontro$ statements, Object creation and modification, %rrays, !nctions, #onstr!ctors, Pattern matchin' !sin' re'!$ar epressions, (rrors in scripts, (amp$es)
1. OVERVIEW OF JAV JA VASCRIPT
Ori'ins
The official name of the standard language is ECAScript. !avaScript can "e divided into three parts# ▪
▪
▪
▪
the core, client side, and server side. The core is the heart of the language, including its operators, e$pressions, statements, and su"programs. #$ient-side JavaScript is a collection of o"%ects that support the control of a "ro&ser and interactions &ith users. Server-side Server-side JavaScript is a collection of o"%ects that ma'e the language useful on a (e" server.
OVERVIEW OF JAV JA VASCRIPT
OVERVIEW OF JAV JA VASCRIPT
Uses Of Javascript
!avaScript is implemented at ) ends#
Client end * is em"edded em"edded in +T- documents Server end !avaScript support D /Document "%ect odel0 &hich ena"les !avaScript to access and modify CSS properties and content of any element of a displayed +T- document
OVERVIEW OF JAV JA VASCRIPT
(vent-driven #omp!tation Of Javascript
supports user interactions through the +T- form form elements on the client display to chec' the values provided in forms "y users perform input chec's at the client side itself &hich saves "oth server time and internet time.
OVERVIEW OF JAV JA VASCRIPT
Browsers Browsers %nd *htm$+Javascript oc!ments
(hen a !avaScript script is encountered in the document, the "ro&ser uses its JavaScript interpre interpreter ter to 1e$ecute2 the script.
) OBJ(# OBJ(#. . O/0(1. O/0(1.%.0O1 %1 %1 J%2 J%2%S#/0P. S#/0P.::
!avaScript is an o"%ect*"ased language Does not have classes* no class*"ased class*"ased inheritance !avaScript cannot support polymorphism. It supports prototype*"ased inheritance
• • • •
JAVASCRIPT OBJECTS
"%ects are collections of properties Each property is either a data property or a function or method property.
Data properties # primitive values and references to other o"%ects
!avaScript uses non*o"%ect types for some of its simplest types3 these non* o"%ect types # primitives. Strings, 4um"ers, 5ooleans, null, undefined
"%ects are varia"les too. var car 6 78iat73 The o"%ects are &ritten as name#value pairs var car 6 9type#78iat7, model#:;;, color#7&hite737B ?formB ?"odyB?htmlB ?"odyB ?htmlB
?htmlB?headB ?script language67!avaScript7B ?** var val 6 4um"er.A+FVA-HE3 var smallest4um 6 4um"er.I4FVA-HE3 var infinite4um 6 4um"er. 4um"er.PSITIVEFI48I4IT3 PSITIVEFI48I4IT3 var negInfinite4um 6 4um"er.4EATIVEFI48I4IT3 document.&rite =7Value of 4um"er.A+FVA-HE # 7 O val O7?"r B7>3 document.&rite =7Value =7Value of smallest4um # 7 O smallest4umO7?"r B7 >3 document.&rite =7Value =7Value of infinite4um # 7 O infinite4um O7?"r B7>3 document.&rite =7Value =7Value of negInfinite4um # 7 O negInfinite4um O7?"r B7>3 var dayfonth6)KJ3 if =dayfonth ? J QQ dayfonth B KJ> 9 dayfonth 6 4um"er. 4um"er.4a4 4a4 alert=7Day of onth must "e "et&een J and KJ.7> < **B ?scriptB?headB?"odyB?"odyB?htmlB
) .h .hee Stri Strin' n' #at #aten enat atio ionn Oper Operat ator or : C N. Im Impl plic icit it Type Co Conv nver ersi sion onss #coercions E$ampleJ# function parses a string and returns an integer. var e 6 parseInt=7R;7> R; var g 6 parseInt=7e &as ;7> 4A4 The parse8loat=> function parses a string and returns a floating point num"er. num"er. var c 6 parse8loat=7J;.KK7> J;.KK parse8loat=7e &as ;7> 4A4 4A4
;;)) Strin' Properties %nd ;; %nd ethods var str 6 1eorge23 var len 6 str str.leng .length3 th3 no& no&,, len6R len6R
var str 6 1eorge23 str.charAt= str.charAt=)> )> is 1o str str.inde inde$ $f= f=1r 1r > is K str str.su" su"st strin ring= g=), ), > > is 1or 1org g str. str.to-o&e to-o&erCa rCase= se=>> is is 1georg 1georgee ‟
‟
‟
‟
;) .7( typeof typeof OP(/%. OP(/%.O/
The typeof operator returns the type of its single operand typeof 7% 7%ohn2 string Var $3 typeof=$> typeof=$ > undefined undef ined
;3) %ssi'nment Statements . a O6 3 means the same as a 6 a O 3 var $ 6 J;3 $ 6 :3 ) ;)
.7( ate OBJ(#. :
var today = new Date()
@) S# S#/( /((1 (1 OU OU.P .PU. U. %1 H( H(6B 6BO% O%/ / 01 01PU PU. . ?htmlB?headB?script ?htmlB?headB?script language67!avaScript7B ?** function my8unction=> 9 a$ert=7ello I am an alert "o$7>3 var person 6 prompt=7Please enter your name7, 7arry Potter7>3 if =person 6 null> 9 doc!ment)write=person>3 < confirm=7Do you &ant to continue this do&nloadU7>3 < **B ?scriptB?headB ?"odyB?formB?"utton onclic'67my8unction=>7BTry it?"uttonB ?formB?"odyB?htmlB
A ta"le of num"ers from :*J: and their sMuares , cu"es using alert
The Muadratic eMuation is given "y# ax) O bx O c 6 ; The e$pression inside the sMuare root is called discriminant and and is denoted "y # 6 b) * ac (hen B;, B;, there are ) real roots
▪
▪
;I8-bCK9+8a9 and I8-b-K9+8a9)
#reate an *7.5 and JavaScript to comp!te the rea$ roots roots of a 'iven L!adratic eL!ation
A) #O1./O5 S.%.((1.S : ;) #ontr troo$ ( (pr preess ssiions : Welational operators
) Se$ection Statements
Wr!te a "ava#r!$t #ode% To 'nd revere o a *!ven n+,-er. ..\web_exercises \chapter4_js\4.14reverse.html
e ! and !/e0e !/e0e tate,ent to #e#2 n+,-er ! $r!,e or not
..\..\web_lab\ js\prime_wrong.html js\prime_wrong.html
..\..\web_lab\ js\prime.html js\prime.html
466J not prime prime 466) prime 8or=$6)3 $?n3$OO> 9If=nX$66;> Weturn not prime < Else prime
3) w!t# Statements ?htmlB?headB?script ?htmlB?headB?script language67!avaScript7B ?** var "s6prompt=7 select "order siYe7>3 s&itch="s> 9 case 7J7# document.&rite=7?ta"leB7>3 "rea'3 case 7)7# document.&rite=7?ta"le "order6@J@B7>3 "rea'3 Case 7K7# document.&rite=7?ta"le "order6@L@B7>3 "rea'3 default# document.&rite=7invalid choice7>3"rea'3 < document.&rite=7?captionBta"leJ?captionB7>3 document.&rite=7?trB?thBA?thB?thB5?thB7>3 document.&rite=7?trB?tdBa?tdB?tdB"?tdB?ta"leB7>3 **B ?scriptB?headB?"odyB?"odyB?htmlB
) 5OO 5OOP P S.% S.%.((1.S whi$e for and do-whi$e ;) Usin' Usin' doc! doc!men ment)w t)writ rite89, e89, write write code code that that disp disp$ays $ays the res!$ts of the ; times tab$e) 0ts o!tp!t sho!$d be the res!$ts of the ca$c!$ations) ))=))=webM$ab=js=;Mtab$es)htm$ ) .o prin printt fac facto tori ria$ a$ of a n!m n!mbe berr ..Z..Z&e"Fla"Z %sZfactorial.html %sZfactorial.html
E) OBJ OBJ(#. (#. #/ #/(% (%. .0O1 %1 O O00# 00#% %.0O1
new operator creates a "lan' o"%ect# no properties.
constructor
var myMobject I new Object89N The varia"le myMobject references the ne& o"%ect var myMcar I ma"e: 3 document.&rite=7?pB7>3 < **B ?scriptB?headB?"odyB?"odyB?htmlB
3) %rray ethods
Join ethod
no parameter /everse ethod T no arrange*no parameter Sort ethod T arrange*no #oncat ethod: to the end of the Array o"%ect
S$ice ethod : returns and R
S$ic S$ ice8 e89 9 ++A, ++A, ,; ,;GG
toStrin' method: These strings are catenated, separated "y commas. p!sh, pop, !nshift, and shift methods
shift and !nshift methods var deer I $ist)shift89N ++ deer is now is !ndefined
5O#%5 5O#% 5 2% 2%/0% /0%B5(S B5(S The scope of a varia"le is the range of statements over &hich it is visi"le. used only &ithin a function ***have local scope they are visi"le in the entire +T- document. '$oba$ variab$e scopeV they If a varia"le that is defined "oth *** local varia"le has precedence
P%/%(.(/S ))=))=Web 1otes by ivya )pdf
The
parameter values that appear in a call to a function are called actual parameters. The parameter names in calls to the function, are called formal parameters. !avaScript
uses the pass*"y*value parameter*passing method. In the function, e$cess actual parameters that are passed are ignored3 e$cess formal parameters are set to undefined. ar'!ments)$en'th - can determine the num"er of actual parameters that &ere &er e passed.
D U U1# 1#.0 .0O1 O1SS : So Sort rt e eth thod od,, /ev /evis isit ited ed ?htmlB ?headB ?script language67!avaScript7B ?** var letters 6 /7Ws7,7s7,78s7,7-s703 var num"ers 6 /)L,:,K03 letters.sort=>3 num"ers .sort=>3 alert=letters>3 alert=num"ers >3
n!mbers )sort8f!nction n!mberMsort8a, b9 ret!rn a - bN bN9N 9N alert=num"ers >3 ascending **B ?scriptB?headB?"odyB?"odyB?htmlB
;G edian of an array: ?htmlB?headB?script ?htmlB?headB?script language67!avaScript7B ?** function median=list> 9
$ist)sort8f!nction 8a, b9 ret!rn a - bN9N var listFlen 6 list.length3 A or if ==listFlen X )> 66 J> G or J
ath)f$oor8;)A9N ath)ro!nd8;)A9
return list/ath.floor=listFlen )>03 else return ath.round==list/listFlen ) * J0 O list/listFlen )0> )>3 < var myFlistFJ 6 /L, K, N, J, , 03 var myFlistF) 6 /J;, *), ;, :, K, J, 03
++even
var med I median8myM$istM;9N document.&rite=7edian of /7, /7, myFlistFJ, myFlistFJ, 70 is# 7, med, 7?"r B7>3
med I median8myM$istM9N document.&rite=7edian of /7, myFlistF), 70 is# 1, **B?scriptB?headB?"odyB?"odyB?htmlB
med, 7?"r B7>3
++; ++
i> To To print the position in the string of the leftmost vo&el. ..Z&e"Fe$ercisesZchapterF%sZ.J;Fvo&el.html
..5we-6e7er#!e 5#a$ter86"58.36re,ove69ero .t,0 ;)
4iven array m!st be modified mo dified to remove a$$ ero va$!es)
. The
splice=> method addsremoves items tofrom an array, ar ray, and returns the removed item=s>. arr.splice=i arr.splice=i, J>3 Index# An An integer that specifies at &hat position to addremove items howmany. The num"er of items to "e removed. If set to ;, no items &ill "e removed
0np!t: %rray %rray of n!mbers O!tp!t: avera'e of each rows of matri
..Z&e"Fe$ercisesZchapterF%sZ.JKFmatri$.html
;) )
inp!t yo!r sentence Sort based on !ser inp!t8ascendin' or descendin'9 J.
The split=> method is used to split a string into an array of su"strings, and returns the ne& array.
).
..Z&e"Fe$ercisesZchapterF%sZ.FsortFuserinput.html
;;)
0n JavaScript, a$most Xeverythin'X is an object)
5ooleans, Strings ,4um"ers can "e o"%ects =or primitive data treated as o"%ects> Dates are al&ays o"%ects aths are al&ays o"%ects Arrays are al&ays o"%ects 8unctions are al&ays o"%ects....
Objects are variab$es variab$es too) B!t objects can contain many va$!es) var person 6 7!ohn Doe73 var person 6 9first4ame#7!ohn7, last4ame#7Doe7, age#:;, eyeColor#7"lue73 var myother 6 ne& person=7Sally7, 7Wally7, L, 7green7>3 my8ather.display=>3 myother.display=>3 function person=first, last, age, eye> 9 this.first4ame 6 first3 this.last4ame 6 last3 this.age 6 age3 this.eyeColor 6 eye3 this.display6display3 < function display=>9 document.&rite=7father is 7 O this.age O 7. mother is 7 O this.first4ameO7?"rB7>3 < **B ?scriptB?headB?"odyB?"odyB?htmlB
;
P%..(/1 %. P%..(/1 %.#70 #7014 14 B6 US0 US014 14 /(4U5%/ (*P/(SS0O1S
approaches:
WegE$p String o"%ect
search method returns the position in the String o"%ect
=through &hich it is called> at &hich the pattern matched The position of the first character in the string is ;. If there is no match, search returns ]J.
Var str61hi hello23 Var position6str.search=hi positio n6str.search=hi>3 >3 ;
#7%/%#.(/ %1 #7%/%#.(/-#5%SS #7%/%#.(/ -#5%SS P% P%..(/1S ..(/1S
etacharacters are characters that have special meanings in some conte$ts in patterns.
.he fo$$owin' are the pattern metacharacters: =Y89QRZ[FC) etacharacters
can themselves "e matched "y "eing immediately preceded
"y a "ac'slash. A period matches any character e$cept ne&line. E$ample# +snow)+ +snow)+ matches E$ample# Qa-hR matches any $owercase $ owercase $etter from \a> to \h> E$ample# QZaeio!R matches any $owercase $etter ecept \a>, \e>, \i>, \o> & \!>
^pearl goldG
Pattern odifiers
The i modifier ma'es the letters in the pattern match either uppercase upper case or lo&ercase letters in the string. Applei matches _APP-E`, _apple`, _APPle`,
The modifier allo&s &hite space to appear in the pattern.
OTHER PTTERN!"T#H$N% "ETHO&' O( 'tr)ng
var str I provided that it is not the first or last character and it &ill not come one after the other. domain name /for e$ample com, org, net, in, us, info0 part contains letters, digits, hyphens and dots.
mysite]o!rearth)com my)ownsite]o!rearth)or' mysite]yo!)me)net
var reg 6^Z&O=/Z.*0UZ&O> ]Z&O=/Z.*0UZ&O>=Z.Z&9),KOG3 =)=w,3----------It matches a . follo&ed "y t&o or three &ord characters, e.g., .edu, .org, .com, .u', .us, .co etc.
JK J.
). K.
(rite (r ite a !avascript that contains, a function named testM phonenoMn!m, &hich tests the phone num"er of the format ddd ] dddd ?;NJ * L):RB and display &hether the given num"er is valid or not using document.&rite. ..Z..Z&e"Fla"Z%sZphoneFnumFvalidate.html (rite (rite a !avaScript to validate the name, the name n ame should "e entered using prompt. The first and last name should not "e more than J; characters and middle name must contain only initial. If so display validation corresponding co rresponding name. The format is the firstFname, secondFname and thirdFname. There should "e single &hite space "et&een 8irstFname, SecondFname and thirdFname.
; (//O/S 01 S#/0P.S
S$ot te error.. var userAge 6 prompt=1Please enter your age2>3 if =userAge 6 ;>3 9 alert=1So you`re a "a"y2>3 < else if = userAge ? ; Q userAge B );;> alert=1I alert=1I thin' you may "e lying a"out your age2>3 else 9 alert=1That`s a good age2>3 <
ERRORS I: SCRIPTS
(rite +T- document and %ava script code to implement implement the follo&ing # i> To count the num"er of names in the given array that end in either 7ie7 or 7y7. ii> ..Z&e"Fe$ercisesZchapterF%sZ.NFieFy.html
.r!e if the strin' has the form: strin';, strin' $etter strin';, strin'-------m!st be $owercase ecept the first $etter $etter-------------m!st $etter------------m!st be !ppercase
..Z&e"Fe$ercisesZchapterF%sZ.J)Fstringpattern.html
2en"atesh %nant 1ai", Prasanna H!mari , Pavan H
View more...
Comments
