Jump Start JavaScript

185 Pages·2013·13.474 MB·English

by  Ara Pehlivanian and Don Nguyen

JUMP START
JAVASCRIPT
BY ARA PEHLIVANIAN
& DON NGUYEN
ii
Jump Start JavaScript
byAraPehlivanianandDonNguyen
Copyright©2013SitePointPty.Ltd.
Product Manager:SimonMackie English Editor:KellySteele
Technical Editor:ColinJ.Ihrig Cover Designer:AlexWalker
Notice of Rights
Allrightsreserved.Nopartofthisbookmaybereproduced,storedinaretrievalsystemortransmitted
inanyformorbyanymeans,withoutthepriorwrittenpermissionofthepublisher,exceptinthecase
ofbriefquotationsembodiedincriticalarticlesorreviews.
Notice of Liability
Theauthorandpublisherhavemadeeveryefforttoensuretheaccuracyoftheinformationherein.
However,theinformationcontainedinthisbookissoldwithoutwarranty,eitherexpressorimplied.
NeithertheauthorsandSitePointPty.Ltd.,noritsdealersordistributorswillbeheldliableforany
damagestobecausedeitherdirectlyorindirectlybytheinstructionscontainedinthisbook,orbythe
softwareorhardwareproductsdescribedherein.
Trademark Notice
Ratherthanindicatingeveryoccurrenceofatrademarkednameassuch,thisbookusesthenamesonly
inaneditorialfashionandtothebenefitofthetrademarkownerwithnointentionofinfringementof
thetrademark.
PublishedbySitePointPty.Ltd.
48CambridgeStreetCollingwood
VICAustralia3066
Web:www.sitepoint.com
Email:[email protected]
ISBN978-0-9873321-8-9(print)
ISBN978-0-9873321-9-6(ebook)
PrintedandboundintheUnitedStatesofAmerica
iii
About Ara Pehlivanian
AraPehlivanianhasbeenworkingonthewebsince1997.Mostrecently,he'sworkedon
high-end,highlyvisibleprojectsasawebdeveloperandpracticeleadatNurun,afront-end
engineeratYahoo!MailandiscurrentlyaJavaScriptdeveloperontheHPCloudServices
team.
About Don Nguyen
Likemanyprogrammers,DondabbledinJavaScriptforanumberyearsasasecondarylan-
guage.Itwasn'tuntilhebeganimplementingserver-sideprojectsinNode.jsthatJavaScript
begantotakecenterstage.Havingbeenheavilyinvolvedinanumberofwebprojectsfrom
theback-endallthewaytothefront,heisnowequallyathomewithJavaScriptontheclient
andontheserver.Hecurrentlyspendshistimeworkingonbuildingstartupsfromhishome
baseofSydney,Australia.
About SitePoint
SitePointspecializesinpublishingfun,practical,andeasy-to-understandcontentforweb
professionals.Visithttp://www.sitepoint.com/toaccessourblogs,books,newsletters,articles,
andcommunityforums.You’llfindastackofinformationonJavaScript,PHP,Ruby,mobile
development,design,andmore.
About Jump Start
JumpStartbooksprovideyouwitharapidandpracticalintroductiontowebdevelopment
languagesandtechnologies.Typicallyaround150pagesinlength,theycanbereadina
weekend,givingyouasolidgroundinginthetopicandtheconfidencetoexperimenton
yourown.

TomylovingwifeKrista,without
whosegrace,patienceandsupport
Iwouldnothavebeenableto
writethis;andtoourtwobrilliant
daughters.
—Ara
ToLorraine,thankyouforkeeping
menourishedwithhotfood,a
warmheartandabeamingsmile.
—Don

Table of Contents
Preface
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
Who Should Read This Book . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
Conventions Used . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
Code Samples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
Tips, Notes, and Warnings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv
Supplementary Materials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv
Do you want to keep learning? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvi
Chapter 1 Setting Up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Console . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Chrome . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Firefox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Safari . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Using JavaScript in HTML Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
In the HTML File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
In a Separate File . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Location of the <script> Tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Chapter 2 Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
First, a Quick Comment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Declarations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Number . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
String . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
viii
Boolean . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Undefined . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Null . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Operations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
The Dangers of Loose Typing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Type Conversion (aka Type Coercion) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Comparison Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Equal (==) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Not Equal (!=) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Strict Equal (===) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Strict Not Equal (!==) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Greater than (>) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Greater than or Equal to (>=) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Less than (<) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Less than or Equal to (<=) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Logic Flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Chapter 3 Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Creating an Array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Adding to an Array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Reading from an Array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Nested Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
What can you do with arrays? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Mutator Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Accessor Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Iteration Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
ix
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Chapter 4 Objects and Functions . . . . . . . . . . . . . . . . . . 47
Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Creating an Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Adding to an Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Reading from an Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Nested Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Prototype Chain . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Looping over an Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Hoisting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Declaration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Arguments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Object-oriented Programming with Functions . . . . . . . . . . . . . . . . . 67
this . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Chapter 5 Loops and Jumps . . . . . . . . . . . . . . . . . . . . . . . . . 79
Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
The while Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
The do ... while Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
The for Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
The for ... in Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Jumps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
break . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85