!
!
!
"#$%&'#()*!+,%,"'$&-.!/$&0#$!
!
!
!
!
!
!
!
1!2345!"#$%&'#()*6!78'9!:;;!$&<=.>!$#>#$%#?9!!
"#$%&'#()*!,8?!.=#!"#$%&'#()*!;)<)!,$#!.$,?#0,$@>!)A!"#$%&'#()*6!78'9!:;;!).=#$!B$,8?!,8?!-$)?C'.!8,0#>!,$#!.$,?#0,$@>!)$!$#<&>.#$#?!.$,?#0,$@>!)A!.=#&$!$#>-#'.&%#!=);?#$>9!
2
JavaScript*Primer!
!
Contents!
Overview!........................................................................................................................................!3!
The$Language!..................................................................................................................................!4!
Syntax!99999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999!4!
Variables)and)Data)Types!................................................................................................................!6!
Variables!999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999!6!
Data$Types!9999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999!6!
Functions!........................................................................................................................................!6!
Defining'a'Function!99999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999!7!
Modularization!999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999!7!
Readability!999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999!7!
If/Else(if/Else!................................................................................................................................!10!
Comparison*Operators!9999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999!10!
Compound(Comparisons!9999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999!10!
If/Else(if/E lse !9999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999!11!
Review!..........................................................................................................................................!13!
Syntax!999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999!13!
Variables!9999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999!13!
Functions!999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999!13!
If/Else(if/E lse !9999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999!13!
Exercises!.......................................................................................................................................!14!
Exercise(1!D!Variables!99999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999 9999!14!
Exercise(2!D!Functions!99999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999!14!
Exercise(3!D!If/Else (if/ Els e !99999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999!14!
Resources!.....................................................................................................................................!14!
JavaScript*Boo ks:!9999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999!14!
New$to$JavaScript:!99999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999!14!
Online&Resources:!99999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999 999999999!14!
!
!
!
1!2345!"#$%&'#()*6!78'9!:;;!$&<=.>!$#>#$%#?9!!
"#$%&'#()*!,8?!.=#!"#$%&'#()*!;)<)!,$#!.$,?#0,$@>!)A!"#$%&'#()*6!78'9!:;;!).=#$!B$,8?!,8?!-$)?C'.!8,0#>!,$#!.$,?#0,$@>!)$!$#<&>.#$#?!.$,?#0,$@>!)A!.=#&$!$#>-#'.&%#!=);?#$>9!
3
JavaScript*Primer!
!
Overview!
JavaScript*is*OO P*(O b ject*O rie nted*Programming)!D!this%means%you%build%sm aller%ob jects%that%make%up%the%whole.%There%
are$3!"flavors")of)JavaScript:!
!
49 E;.F"&?#!+,%,"'$&-.!GE"+"H!D!,8!#I.#8?#?!%#$>&)8!)A!+,%,"'$&-.!.=,.!#8,B;#>!.=#!#8=,8'#0#8.!,8?!0,8&-C;,.&)8!
)A!*#B!-,<#>!,8?!';.!B$)*>#$>!
!
29 "#$%#$F"&?#!+,%,"'$&-.!G""+"H!D!,8!#I.#8?#?!%#$>&)8!)A!+,%,"'$&-.!.=,.!#8,B;#>!B,'@F#8?!,''#>>!.)!.,B;#>6!
?,.,B,>#>6!A&;#!>J>.#0>6!,8?!>#$%#$>!G;&@#!.=#!,A)$#0#8.&)8#?!"#$%&'#()*!K;&?#L#')$?>H!
!
M9 E)$#!+,%,"'$&-.!D!.=#!B,>#!+,%,"' $&-.!;,8<C,<#!C>#?!BJ!B).=!';.!,8?!>#$%#$F>&?#!+,%,"'$&-.>9!
!
!
Core%JavaScript%encompasses%all%of%the%statements,%operators,%objects,%and%functions%that%make%up%the%basic%JavaScript%
language.(JavaScript(is(the$world's$most$popular$programming$language,$used$on$m ore$platforms$and$in$more$languages$
than%any%other%programming %langu age%in%history.%It's%been%licensed%by%more%than%175%comp anie s%for%inclusion%in%their%web%
tools.&JavaScript&is&even&available&as&a&standalone'scripting'language.!
!
As#you#can#see,#core#JavaScript#contains#objects#that#are#applicable#to#both#client#and#server.#If#you#know#core#JavaScript,#
you$can$easily$write$clientFside%and%ser verFside%JavaScript.%Again,%the%only%distinction%is%that%clientFside%and%serverFside%
JavaScript*have*additional*obje cts*a nd *fu nc tion s*th at*you*can*use*that*are*specific*to*clientFside%or%serverFside%
functionality.,Any,JavaScript,libraries,(.js,files),you,create,in,core,JavaScript,can,be,u sed ,on ,b oth ,the ,client,and ,the#server#
with%no%changes%whatsoever.!
!
When%writing%JavaScript,%you%have%to%follow%strict%syntax%rules.%While%white%space%means%nothing%when%you%are%coding%in,%
for$example,$HTML,$how$much$space$you$leave$between$words$or$paragraphs$doesn't$matter$!D!!the$“shape”'of'your'
HTML%code%doesn’t%matter.!
!
The$opposite$is$true$of$JavaScript$!D!!it#does#h ave#a#shape .#S o,#if#you#open #a#text#editor#and #ty p e :!
!
!
N>'$&-.!;,8<C,<#OP+,%,"'$&-.P!.J-#OP.#I.QR,%,>'$&-.PS!
NTFF!
?)'C0#8.9*$&.#GPNA)8.!');)$OU$#?USV=&>!7>!L#?!V#I.NQA)8.SPH!
QQ!FFS!
NQ>'$&-.S!
!
!
Stick!it#in!the!middle!of#some!HTML!code!and!you$get:!This!is!Red!Tex t !
!
document.write("<font!color='red'>This!Is!Red!Text</font>")!
!
So,$in$this$exam ple$JavaScript,$the$document,"in"this"case"the"HTML"document,"is"announced."The"document"will"be"altered"
by#writeFing$something$to$it.$What$will$be$written$to$the$document$is$inside$the$parentheses$!"#$%&'()%*%+,-+./-01234(54(
Red$Text</font>")!
!
Remember,'JavaScript'is'an'objectForiented$language!D!this%mea ns%functions%and%properties%are%grouped%into%logical%units%
called&objects.!
!
!
!
!
1!2345!"#$%&'#()*6!78'9!:;;!$&<=.>!$#>#$%#?9!!
"#$%&'#()*!,8?!.=#!"#$%&'#()*!;)<)!,$#!.$,?#0,$@>!)A!"#$%&'#()*6!78'9!:;;!).=#$!B$,8?!,8?!-$)?C'.!8,0#>!,$#!.$,?#0,$@>!)$!$#<&>.#$#?!.$,?#0,$@>!)A!.=#&$!$#>-#'.&%#!=);?#$>9!
4
JavaScript*Primer!
!
If#you#want#to#write#to#the#status#bar#at#the#bottom#of#the#browser#window,#you'd#set#the#status#property#of#the#Window#
object'like'this:!
!
window.status!=(“God!Save!the!Que en”)!
!
!
Every&element&of&a&Web&page&gets&represented&as&an&object.&The&objects&are&related&to&one&another&in&a&hierarchical&
structure.!
!
The$Language!
Syntax!
Basic&needFtoFknow:!
!
• EVERYTHING*is*caseFsensitive!
!
var$stringA$=$"String$A";$!
var$stringa(=("String(a";!
alert(stringA,==,stringa);,//,false!
!
• Use$as$much,$or$as$little$extra$whitespace$as$you$like.!
!
var$stringA!=! "String(A";(!
var$string="String$B";!
!
• Semicolons*are*JavaScript's*equivalent*of*a*period.*After*you*complete*a*statement*(sentence),&end&it&with&a&";"&
character.!
!
• When%defining%string%values%("this%is%a%string%of%characters"),%single%(')%and%double%(")%quotes%are%interchangeable,%
as#long#as#the#closing#matches#the#opening.!
!
• Parentheses)are)used)for)2)reasons:!
!
49 Checking)equality)(evaluating+2+or+m ore+items+to+simply+"true"+o r+'false')!
!
if#(stringA#==#stringa){!
!!!!//"do"something!
}!
!
29 Sending'or'receiving'a'value!
!
var$product$=$multiply(7,$3);$//$send$7$and$3!
!"#$%&'#()" *%&+*,-. /(01234%"3#(.5067(88 (34$4&94(:(.;(<.<(=(>(. ;(<0<!
!
• Comments$are$a$way$to$explain$to$others$(or$leave$reminders$for$yourself)$what$you're$doing,$and$are$denoted$
one$of$two$ways:!
!
49 SingleF!line%comments%are%den o ted%by%a%d o u b le %sla sh %" // "!
!
//"This"is"a"friendly"reminder"!
var$product$=$multiply$(4,$6);!
!
!
!
!
1!2345!"#$%&'#()*6!78'9!:;;!$&<=.>!$#>#$%#?9!!
"#$%&'#()*!,8?!.=#!"#$%&'#()*!;)<)!,$#!.$,?#0,$@>!)A!"#$%&'#()*6!78'9!:;;!).=#$!B$,8?!,8?!-$)?C'.!8,0#>!,$#!.$,?#0,$@>!)$!$#<&>.#$#?!.$,?#0,$@>!)A!.=#&$!$#>-#'.&%#!=);?#$>9!
5
JavaScript*Primer!
!
29 MultiFline%comments'are'denoted'by'a'slashFstar%to%start%"/*"%and%a%starFslash%"*/"%to%end.!
!
/*!
//"This"is"a"friendly"reminder"that"the"following"lines!
//"do"not"get"evaluated!
var$product$=$multiply(8,"7);#product#=#m ultip ly(p roduct,#7);!
*/!
!
• When%working%with%strings%!"#$%&'#()*# +,-.* /)0$)1 2 -%"%'-#)3"45.67)%&*4*)"4*).-3*)+&"4"+%*4.)%&"%)&"8*).9*+'",)
!"#$%$&'()#('*"+('#*,$"'-%**'./"#0'1,2/'34/%5(6'7)"3"'%$4*28"'#5,3(/,5)"3'9:;'#$8'8,2.*"'<2,("3'9=;6'>,/'()"3"?'
you$need$to$use$an$"escape$character".$An$escape$character$e!"#$%&'()*'+)')*+,*+'-."/"-+%/&'()*'0)*$1!2+'
normally(be(able(to,(usually(because(they(will(be(interpreted(differently(than(what(you(intended.!!
!
There%are%also%a%few%special%characters%(or%escape%sequences)%that%represent%those%characters%that%cannot%be%
typed$from$the$keyboard.$For$example,$'\n'#means#start#a#new#line.!
!
Here's&an&example&of&it&being&used&two&different&ways.&The&'\n'#inserts#a#new#line.#The#line#break#I've#added#for#
readability*in*stringA*between*the*two*lines*of*the*song*(along*with*a*"+"*t!"#$$"!%"&'!('#)*(#)*&")+*"),!"-)%.(/-"
!"#$!%$&'()*"$+,-!)./!0.112).**).)13,$)4&$.5)3,)!%$)4&"6+$&).1$&!Wthe$"\n"#does.!
!
var$stringA$=$'Here\'s#to#you# Mrs.#Robinson\n'#+!
!!!!!!!!!!!!!!!!!!!!!!!!'Jesus&loves&you &more&than&you &will&know ';!
var$stringB$=$'God$bless%you%please,%Mrs.%Robinson\nHeaven&holds&a&place&for&those&who&pray';!
alert(stringA);.!
alert(stringB);!
!
String'A:'! ! ! ! ! ! String'B:'!
!
!
!
!
!
!
!
!
!
Also%note%that%there%are%a%number%of%"reserved"%words%that%have%special%meaning%in%JavaScript.%You%will%see%some%of%these%
in#action#later.!
!
They%are:%!
!
break!
case!
catch!
Continue!
default!
delete!
do!
#;>#!
A,;>#!
A&8,;;J!
A)$!
AC8'.&)8!
&A!
&8!
&8>.,8'#)A!
8#*!
8C;;!
$#.C$8!
>*&.'=!
.=&>!
.=$)*!
.$C#!
.$J!
.J-#)A!
%,$!
%)&?!
*=&;#!
*&.=!
!
!
!
!
1!2345!"#$%&'#()*6!78'9!:;;!$&<=.>!$#>#$%#?9!!
"#$%&'#()*!,8?!.=#!"#$%&'#()*!;)<)!,$#!.$,?#0,$@>!)A!"#$%&'#()*6!78'9!:;;!).=#$!B$,8?!,8?!-$)?C'.!8,0#>!,$#!.$,?#0,$@>!)$!$#<&>.#$#?!.$,?#0,$@>!)A!.=#&$!$#>-#'.&%#!=);?#$>9!
6
JavaScript*Primer!
!
Variables)and)Data)Types!
Variables!
Variables)are)the)workhorse)of)JavaScript.)They)allow)you)to)create)a)container)that)holds)a)piece)of)data,)then)reference)
and$manipulate$what$it$contains.$One$thing$to$remember$about$JavaScript$is$that$variable$can$contain$any!type%of%dataW
string'values,'integers,)object s,)a rrays,)functions.!
!
You$"open"$or$initiate$a$new$variable$by$using$the$"var"$keyword:!
!
var$myVariableName$=$"My$Variable$Value";!
!
Data$Types!
There%are%five%basic%data%types%in%JavaScript:!
!
49 Strings:!
%,$!>.$&8<!O!"V=&>!&>!,!>.$&8<!)A!'=,$,'.#$>"X!
!
29 Numbers:!!
%,$!8C0B#$!O!42YX!
!
M9 Boolean:!V=#!#ZC&%,;#8.!)A!,!4!)$!3!G)8Q)AA6!.$C#QA,;># H!
%,$!B));!O!.$C#X!
!
59 Array:!V=&>!=);?>!,!8C0B#$!)A!%,;C#>!G8).!,;;!.=#!%,;C#>!=,%#!.)!0,.'=!?,.,!.J-#>6!B#!',$#AC;H!
%,$!,$$,J!O![P%,;C#4P6!P.*)P6!26!P%,;C#5P6!A,;>#\X!
!
]9 Object:!^BR#'.>!,$#,!*,J!.)!=);?!>.$C'.C$#?!?,.,!D!;&@#!,8!,$$,J6!BC.!*&.=!_8,0#?`!-$)-#$.&#>!
%,$!)BR#'.!O!a8,0#b!PcJ!A&$>.!)BR#'.P6!
!!!!.J-#b!P^BR#'.F;&.#$,;P6!
!!!!');)$b!P-C$-;#P6!
!!!!')8.#8.>b!P>=,@#86!8).!>.&$$#?PdX!!
,;#$.G)BR#'.9')8.#8.>HX!QQ!,;#$.>!P>=,@#86!8).!>.&$$#?P!&8!.=#!B$)*>#$!
!
Functions!
Functions)serve)2)major)purposes:!
!
49 Make%reusable%code%(modularization)!
!
29 Clean&your&code&for&legibility!
!
!
!
!
1!2345!"#$%&'#()*6!78'9!:;;!$&<=.>!$#>#$%#?9!!
"#$%&'#()*!,8?!.=#!"#$%&'#()*!;)<)!,$#!.$,?#0,$@>!)A!"#$%&'#()*6!78'9!:;;!).=#$!B$,8?!,8?!-$)?C'.!8,0#>!,$#!.$,?#0,$@>!)$!$#<&>.#$#?!.$,?#0,$@>!)A!.=#&$!$#>-#'.&%#!=);?#$>9!
7
JavaScript*Primer!
!
Defining'a'Function!
We#have#the#following#parts:!
!
49 Name:&Just%like%a%variable%where%we%call%“var”#and#give#that#a#name,#to#create#a#function,#we#call#“function”#and#
give%it%a%name%in%the%same%way!
function!myName(!)!{! }!
!
29 Arguments:!!V=#>#!,$#!.=#!inputs!.=,.!.=#!AC8'.&)8!*&;;!0,8&-C;,.#!D!>#-,$,.#!0C;.&-;#!&8-C.>!*&.=!')00,>!
function!myName(a,!b)!{! }!
!
M9 :!_block`!.=,.!<#.>!#I#'C.#?9!:!B;)'@!&>!8).=&8<!0)$#!.=,8!,!_-,$,<$,-=`!D!)8#!)$!0)$#!>.,.#0#8.>!<$)C-#?!,8?!
#I#'C.#?!)$!_$#,?`!&8!>#ZC#8'#!
AC8'.&)8!0J(,0#G,6!BH!a!
var!c!=!a*b;!
return!c;!
}!
!
Modularization!
This%practice%allows%you%to%define%once,%then%use$many$times.$Take$a$look$at$our$multiplication$function:!
!
!"#$%&'#()" *%&+*,-. /(012!
!!!!!!var$c$=$a*b;!
!! !!return&c;!
}!
!
Once%it's%defined,%we%can%use%it%as%many%times%as%we%like:!
!
var$prod1$=$multiply(3,$4);!
var$prod2$=$multiply(prod1,$17);$$!
var$prod3$=! multiply!"#$%&'("#$%)*+(!
alert(prod3);-//result-is-2448!
!
Readability!
As#of#now#we#haven't#seen#code#that#is#long#enough#to#be#difficult#to#read#or#follow,#but#when#your#scripts#get#longer,#
you'll&run&into&the&readability&problem.!
!
Here's&an&example&of&a&longer'piece'of'code'(in'S e rviceNow,'this'is'the'o u tFofFbox$VIP$caller$highlighting$script):!
!
!"#$%&'#('#) * +# ,-.$'#%/'01('023+0"-1(#-43+0"-1(&56'+2 &#, 7(8!
!! !//wait&until&there&is&a&valid&re cord&in&the&field!
!! !if#(!newValue)!
!! !return;!
!
!
!
1!2345!"#$%&'#()*6!78'9!:;;!$&<=.>!$#>#$%#?9!!
"#$%&'#()*!,8?!.=#!"#$%&'#()*!;)<)!,$#!.$,?#0,$@>!)A!"#$%&'#()*6!78'9!:;;!).=#$!B$,8?!,8?!-$)?C'.!8,0#>!,$#!.$,?#0,$@>!)$!$#<&>.#$#?!.$,?#0,$@>!)A!.=#&$!$#>-#'.&%#!=);?#$>9!
8
JavaScript*Primer!
!
!!!!!g_form.getReference('caller_id',-vipCallerCallback);!
}!
!
!"#$%&'#()&*+, --./+ ,--0 ,$1 2$,--./3(4!
!!!!!!//get%the%caller%object%so%we%can%access%fields!
!!!!!!var$callerLabel$=$gel('label.incident.caller_id');!
!! !!var$callerField$=$gel('sys_display.incident.caller_id');!
!
!!!!!//check&for&VIP&status!
!!!!!if#(caller.vip=='true ')#{!
!
!!!!!!!!!!//change(the(caller(label(to(red(background!
!
! //style'object'is'CSSStyleDeclaration,'style'names'are'not'standard'css'names!
!! if#(callerLabel)#{!
!!!!callerLabel.style.backgroundImage! ="!!!'url(images /ico n s /v i p .gif)';!
!!!!!!callerLabel.style.backgroundRepeat! ="!!!'noFrepeat';!
!!!!!!callerLabel.style.backgroundPosition4=4'95%455%';!
!!!!!!//change(the(caller's(name(field(to(red(text!
!!!!!!if#(callerField)!
!! !!!!!!!!!!!!!callerField.style.color='red';!
!
!! }!
!! }!
!! else${!
!//not%a%VIP,%remove%temporary%styles!
if#(callerLabel)!
!! !!!!!!!!callerLabel.style.backgroundImage4=4'';!
!
!! !!!!if#(callerField)!
!! !!!!!!!!callerField.style.color='';!
!
!! }!
}!
!
It's%still%mostly%readable,%bu t%let's%s e e %if%we%can %make%it%clearer.%!
!
There%are%three%main%pieces%to%the%script,%and%only%1%function:!
!
49 Get$the$Caller's$reference$from$the$database$(make$a$server$call)!
29 Once%the%server%responds,%check%the%VIP%flag!
M9 If#the#person'is'a'VIP,'flag'them!
59 Otherwise,*remove*the*flag,!if#any!
!
Above,'the'vipCallerCallback!!"#$%&'#(&)(*+,-,()%,.)(/0(10(2#3(4(2-,(%25(.72$ ,(8/ 9(7&#, )('!($'3, :;(<(3'# =%(-,277>(#,,3 (%'(
see#the#code#for#steps#3#and#4#unless#something#isn't#working.#I#really#just#care#about#the#logic,#an d #w h at#th e#cod e #should!
be#doing.!
!
!
!
!
1!2345!"#$%&'#()*6!78'9!:;;!$&<=.>!$#>#$%#?9!!
"#$%&'#()*!,8?!.=#!"#$%&'#()*!;)<)!,$#!.$,?#0,$@>!)A!"#$%&'#()*6!78'9!:;;!).=#$!B$,8?!,8?!-$)?C'.!8,0#>!,$#!.$,?#0,$@>!)$!$#<&>.#$#?!.$,?#0,$@>!)A!.=#&$!$#>-#'.&%#!=);?#$>9!
9
JavaScript*Primer!
!
Once%again,%with%modularization%(I've%highlighted%the%function%calls%for%easier%tracing):!
!
!"#$%&'#('#) * +# ,-.$'#%/'01('023+0"-1(#-43+0"-1(&56'+2 &#, 7(8!
!!!!!//wait&until&there&is&a&valid&record%in%the%field!
!!!!!if#(!newValue)#{!
!!!!!!!!!!return;!
!! !}!
!! g_form.getReference('caller_id',4vipCallerCallback);!
}!
!
function(vipCallerCallback!"#$$%&'()!
!!!!!//get%the%caller%field%object%so%we%can%access%fields!
!! !var$callerLabel$=$gel('label.incident.caller_id');!
!! !var$callerField$=$gel('sys_display.incident.caller_id');!
!
!!!!!//check&for&VIP&status!
!! !if#(caller.vip=='tru e ')#{!
!! !!!!!!setVIPStyles(callerLabel,*callerField);!
!! !}!
!! !else${!
!! !!!!!!removeVIPStyles(callerLabel,*callerField);!
!! !}!
}!
!
function(setVIPStyles(label,'field){!
!!!!!!!if#(label)#{!
!!!!!!!!!!!label.style.backg round Image! ="'url(images/icons/vip.gif)';!
!!!!!!!!!!!label.style.backg round Repeat! ="'noFrepeat';!
!!!!!!!!!!!label.style.backg round Position3= 3'95 %355%';!
!!!!!!!}!
!!!!!!!//change(the(caller's(name(field(to(red(text!
!!!!!!!if#(field)#{!
!!!!!!!!!!!field.style.color='red';!
!!!!!!!}!
}!
!
function(removeVIPStyles(labe l,'field){!
!!!!!!!if#(label)#{!
!!!!!!!!!!!label.style.backg round Image3=3'';!
!!!!!!!}!
!!!!!!!if#(field)#{!
!!!!!!!!!!!label.style.color='';!
!!!!!!}!
}!
!
Now$the$vipCallerCallback!function(is(only(10 (lines(o f(code.(T he (general(coding(approach(has(b ee n(left(unc ha nged ,(but(
the$amount$of$code$required$to$be$read$in$order$to$understand$the$logic$has$bee n$reduced.$You$can$now$reuse$the$
setStyles'function'repeatedly.!
!
!
!
!
1!2345!"#$%&'#()*6!78'9!:;;!$&<=.>!$#>#$%#?9!!
"#$%&'#()*!,8?!.=#!"#$%&'#()*!;)<)!,$#!.$,?#0,$@>!)A!"#$%&'#()*6!78'9!:;;!).=#$!B$,8?!,8?!-$)?C'.!8,0#>!,$#!.$,?#0,$@>!)$!$#<&>.#$#?!.$,?#0,$@>!)A!.=#&$!$#>-#'.&%#!=);?#$>9!
10
JavaScript*Primer!
!
If/Else(if/Els e !
The"if/then"switch"is"the"primary"building"block"of"program ming ,"and"most"of"your"time"will"probably"be"spent"trying"to"
boil%down%your%objective%into%a%small%set%of%absolute%rules.!
!
Once%you%have%these%rules,%you%may%still%need%to%diagram%the%conditions,%flo!"#$%&'(&)*+,'(-')-./**'#$0+'$'01(. $*'$123 ' 4.&'
for$now,$the$basics.!
!
Comparison*Operators!
The$key$to$asking$a$question$(if…)$is$comparing$two$things.$You$will$need$to$study$and$remember$these$operators$as$they$
will$be$used$over$and$over$again$in$your$scripting:!
!
==!
Equal!
!=!
Not$equal!
>!
Greater!than!
>=!
Greater!than!or#equal!to!
<!
Less!than!
<=!
Less!than!or!equal!to!
===!
Equal!to,!and$the!same!data!type!(Identical)!
!==!
Not$identical!
!
Once%you%are%comfortable%with%using%the%operators%above,%you%can%start%comparing*values*with*reckless*abandon.*Let's*try*
it!!
!
if#("a"#==#"A" ){!
!!!!alert('The*As*have*it!');*//*won't*alert!
}!
if#(0#<=#"1"){!
!!!!alert('Naught,it,is!');,//,will,alert!
}!
!
!
if#(0#===#"0" ){!
!!!!alert('these*are*not*identical!');*//*won't*alert!
}!
!
Compound(Comparisons!
The$above$is$all$well$and$good,$but$what$happens$if$you$want$to$compare$multiple$items$at$one$time?$!
!
!
!
!
1!2345!"#$%&'#()*6!78'9!:;;!$&<=.>!$#>#$%#?9!!
"#$%&'#()*!,8?!.=#!"#$%&'#()*!;)<)!,$#!.$,?#0,$@>!)A!"#$%&'#()*6!78'9!:;;!).=#$!B$,8?!,8?!-$)?C'.!8,0#>!,$#!.$,?#0,$@>!)$!$#<&>.#$#?!.$,?#0,$@>!)A!.=#&$!$#>-#'.&%#!=);?#$>9!
11
JavaScript*Primer!
!
Well,%we%could%do%the%following,%and%nest%if%statements:!
!
var$precipitation$=$true;$!
var$temperature$="55;!
!
if#(precipitation#==#true){!
!!!!if#(temperature#<=#60){!
!!!!!!!!alert("It's+cold+and+wet+today!");!
!!!!}!
}!
!
!
This%looks%a%little%messy,%and%if%you%have%a%lot%of%conditions,%it%will%quickly%get%hard%to%read.%What%we%can%do%is%apply%
Boolean'logic,'use'AND'("&&")'and'OR'("||")'operators(to(combine(conditions(to(this(result:!
!
var$precipitation$=$true;$!
var$temperature$="55;!
!
if#(precipitation#==#true#&&#temperature#<=#60){!
!! alert("It's+cold+and+wet+today!");!
}!
!
!
If/Else(if/Else!
Now$that$we$understand$comparisons,$we$can$make$them%much%m ore%useful#by#adding#an#otherwise#clause#D!th!"#!$%!#"
clause.!
!
!"#$%&'(%')*%'+,%+-./0'1#'2%%'.3'1,%'(%)1,%*'.2'+#45')/5'(%1&'"61'(%7*%'/#1'5#./0')/81,./0'.3'1,%'(%)1,%*'.2'9:;'+#45')/5'
wet.!
!
In#our#weather#info,#we#have#essentially#4#potential#results:!
!
49 Both%cold%and%wet!
29 Just%cold!
M9 Just%wet!
59 Neither!
!
!
!
1!2345!"#$%&'#()*6!78'9!:;;!$&<=.>!$#>#$%#?9!!
"#$%&'#()*!,8?!.=#!"#$%&'#()*!;)<)!,$#!.$,?#0,$@>!)A!"#$%&'#()*6!78'9!:;;!).=#$!B$,8?!,8?!-$)?C'.!8,0#>!,$#!.$,?#0,$@>!)$!$#<&>.#$#?!.$,?#0,$@>!)A!.=#&$!$#>-#'.&%#!=);?#$>9!
12
JavaScript*Primer!
!
!
By#adding#an#"else"#clause,#you#can#continue#to#check#conditions#until#you#find#the#right#one#without#having#to#check#ALL#
the$conditions,$every$time.!
!
var$precipitation$=$true;$!
var$temperature$="65;!
!
if#(precipitation#==#true#&&#temperature#<=#60){!
! !alert("It's+cold+and+wet+today!");!
}!
else{!
! !if(precipitation,==,false,&&,tempe rature,<=,60){!
! !!!!!alert("It's+cold+but+dry+today");!
! }!
! else{!
! !!!!!if(precipitation,==,true,&&,temperature,>,60){!
!! !!!!!!!!!alert("It's+wet,+but+not+cold+out+there");!
!! !!!!}!
!! !!!!else{!
! !!!!!!!!!alert("We've+looked +at+the+conditions,+and+it's+neither+cold+nor+wet!");!
!!! !!!!}!
!! }!
}!
!
It’s%a%little%better%but%hard%to%follow%D!can#we#simplify#it#even#further?#!
!
Introducing:&the&"else&if"&statement.!
!
With%the%else%if%statement,%we%can%develop%a%multiFposition'switch'of'sorts,'only'checking'the'conditions'we'need:!
!
var$precipitation$=$true;$!
var$temperature$="55;!
!
if#(temperature#<=#60#&&#precipitation#==#tru e){!
! !alert("It's+cold+and+wet+today!");!
}!
else$if$(temperature$<=$60$&&$precipitation$==$false){!
!! !alert("It's+cold+but+dry+today");!
}!
else$if(precipitation$==$true){!
!! !alert("It's+wet,+but+not+cold+out+there");!
}!
else{!
!! !alert("We've+looked+at+the+conditions,#and#it's#neither#cold#nor#wet!");!
!
!
!
1!2345!"#$%&'#()*6!78'9!:;;!$&<=.>!$#>#$%#?9!!
"#$%&'#()*!,8?!.=#!"#$%&'#()*!;)<)!,$#!.$,?#0,$@>!)A!"#$%&'#()*6!78'9!:;;!).=#$!B$,8?!,8?!-$)?C'.!8,0#>!,$#!.$,?#0,$@>!)$!$#<&>.#$#?!.$,?#0,$@>!)A!.=#&$!$#>-#'.&%#!=);?#$>9!
13
JavaScript*Primer!
!
}!
!
!
Since&our&conditions&are&pretty&simple&and&we&only&have&two&on/off&switches,&we&can&logically&omit&the&temperature&check&
from%the%third%and%fourth%conditionals.!
!
Review!
Syntax!
• Everything+is+caseFsensitive'(e.g.'Javascript(is(not(the(same(as(JavaScript)!
• As#long#as#the#starting#matches#the#ending,#you#can#use#"double#quotes"#or#'single#quotes'!
• Parentheses)are)used)for)checking)conditions,)and)sending)or)receiving)a)value)to/from)a)function!
• Put$reminders$to$a$future$yo!"#$"!%&'(")*++,'-%."/%,"0110"2*3"4"%&'(5,"5&',6"*3"0170"4'8"0710"-*")*++,'-"*!-"
large&blocks&of&code!
!
Variables!
• A"variable"lets"you"set"it"up"once"to"hold"a"value"and"then"allows"you"to"manipulate"its"value&all&throughout&the&
script!
• Variables)can)have)different&data&types!D!the$common$ones$are:!
49 String'(string'of'characters)!
29 Number!
M9 A"true"or"false"value!
59 Array%(a%single%object%that%holds%a%number%of%values)!
]9 Object'(like'an'array,'but'with'named'elements'instead'of'numbered)!
!
Functions!
• Let$you$make$pieces$of$code%reusable!
• Make%your%code%more%legible!
• Need$a$name,$arguments$(variables$to$act$upon),$and$a$block$of$code$that$act$upon$the$inputs!
• Use$the$"return"$statement$to$send$the$result$back$to$the$place!that$initially$called$the$code!
!
If/Else(if/E ls e!
• Compares)values,)and!evaluates!them%to%just!"true"!or!"false"'for'the'sake'of!runnin g&(or$not$running)!a"block&of!
code!
• Can$check$many$values!at!a!time,!!"#$%&''&()*+,!and$||$(OR)$operators!
• Must%have!an!"if"!statement,!and$can!have!zero%or!more%"else!if"$statements,(and! may!have%one!else$clause!
!
!
!
!
1!2345!"#$%&'#()*6!78'9!:;;!$&<=.>!$#>#$%#?9!!
"#$%&'#()*!,8?!.=#!"#$%&'#()*!;)<)!,$#!.$,?#0,$@>!)A!"#$%&'#()*6!78'9!:;;!).=#$!B$,8?!,8?!-$)?C'.!8,0#>!,$#!.$,?#0,$@>!)$!$#<&>.#$#?!.$,?#0,$@>!)A!.=#&$!$#>-#'.&%#!=);?#$>9!
14
JavaScript*Primer!
!
Exe rcises!
Exercise(1(–!Variables!
• Create&3!variables)of)different)object)types!
!
Exercise(2(–!Functions!
• Create&a&function&(name&it&what&you&like)&that&takes&2&numbers,&adds&them&together,&and&multiplies&that&by&fortyF
two,%and%returns%the%result!
!
Exercise(3(–!If/Else(if/Else !
• Using&the&"weather"&example&given,&write&a&simple&if/else&if/else&check&to&determine&if&a&coffee&cup&is&larger&than&
12#fl.#oz.#and#is#currently#hot#or#pipin g#h o t!
!
For$further$challenges$and$learn in g,)chec k)o u t)th e )following)resou rces)below.)W3Schoo ls&is&especially&powerful&as&it&
allows&you&to&write&and&test&code&right&in&the&browser&so&that&you&can&see&how&changes&to&the&code&affect&the&result!!
!
Resources!
JavaScript*Books:!
• “Simply'JavaScript”!by#Kevin#Yan k#&#Came ron#Ad ams,#SitePoint!
• “JavaScript+Pocket+Reference”+by+David+Flanagan,+O’Reilly!
• “Head&First&JavaScript ”&by&Michael&Morrison,&O’Reilly!
• !"#$#%&'()*+,-./(0(*($.,12(3.4,56,-#$(3,78#0#9#0:,O’Reilly!
!
New$to$JavaScript:!
• For$the$NonFProgramm er:!http://webteacher.com/javascript!
• JavaScript*Prime rs:!http://www.htmlgoodies.com/primers/jsp/!
• W3Schools)JavaScript)Tutorial:))http://www.w3schools.com/js/default.asp!
• Mozilla'Developer'Network'Doc'Center:'A'reFintroduction)to)JavaScript:))
https://develope r. mozilla.org/en/JavaScript/A_reFintroductio n _ to_JavaScript!
!
Online&Resources:!
• Online&JavaScript&Reference:!https://developer.mozilla.org/en/JavaScript/Guide!
• About&JavaScript:!https: //developer.mozilla.org/en/About _JavaScr ipt!
• Prototype'Object'Model:!
https://developer.mozilla.org/en/JavaScript/Guide/Detail s_of_the_O bject_Model#ClassF!!Based_vs._PrototypeF
Based_Languages!
• Google&Code&University:&HTML,&CSS&and&JavaScript&from&the&Ground&Up:&&
http://code.google.com/edu/submissions/htmlFcssFjavascript/!
• About.com)JavaScript*Tutorials:**http://javascript .about.com/od/hintsandtips/Javascript_Tutorials.htm!
• Webucator*JavaScript*Tutorial:*http://www.learnFjavascriptFtutorial.com/!
!
