!

nexL !ump, lnc. 2014 #$%&'()%*'+,

!S w/ !C
!avascrlpL wlLh !on Culver
-
nexL !ump, lnc. 2014 #$%&'()%*'+,
!avascrlpL lnLro
WhaL ls !S?
CllenL slde scrlpLs LhaL lnLeracL wlLh Lhe user

8uns ln Lhe browser

Allows us Lo creaLe lnLeracuve ux


.
nexL !ump, lnc. 2014 #$%&'()%*'+,
uCM
uocumenL Cb[ecL Model
uocumenL
hLml
body
head
dlv [ld=conLalner]
/
nexL !ump, lnc. 2014 #$%&'()%*'+,
roLoLype.[s
uCM Selecuon
SelecL an hLml node
SelecL aurlbuLes of a node
0
nexL !ump, lnc. 2014 #$%&'()%*'+,
roLoLype.[s
uCM Manlpulauon
Modlfy class names
Change hLml
Access form values
1
nexL !ump, lnc. 2014 #$%&'()%*'+,
roLoLype.[s
LvenLs
Auach an evenL Lo an hLml elemenL
Common evenLs
2
nexL !ump, lnc. 2014 #$%&'()%*'+,
ueslgn auerns
Why?
8eusable soluuons Lo commonly occurrlng problems

SLrucLure our code ln an opumlzed way, meeung Lhe needs of problems we're
auempung Lo solve

rovlde a common vocabulary Lo descrlbe soluuons

hup://addyosmanl.com/resources/essenual[sdeslgnpauerns/book/


hups://glLhub.com/shlchuan/[avascrlpL-pauerns/Lree/masLer/general-pauerns
3
nexL !ump, lnc. 2014 #$%&'()%*'+,
ueslgn auerns
Ceneral auerns
hups://glLhub.com/shlchuan/[avascrlpL-pauerns/Lree/masLer/general-pauerns
Loops
luncuons
4
nexL !ump, lnc. 2014 #$%&'()%*'+,
ueslgn auerns
Classes
!avascrlpL ls a class-less language buL we can slmulaLe classes wlLh funcuons

1radluonal MeLhod:
!5
nexL !ump, lnc. 2014 #$%&'()%*'+,
ueslgn auerns
8eveallng Module
Allows us Lo furLher emulaLe classes by lncludlng publlc/prlvaLe meLhods/varlables
!!
nexL !ump, lnc. 2014 #$%&'()%*'+,
Lxerclse!
LeL's Code
hup://[sddle.neL/[onaLhanhculver/!Wku/2/
!-
nexL !ump, lnc. 2014 #$%&'()%*'+,
lronLend lrameworks
8ooLsLrap, aLul, ulllbrary
Lnforces conslsLency across Lhe slLe

rovldes a LoolseL of common ul elemenLs
Leverages funcuonallLy already wrluen
hup://nexL[ump.corporaLeperks.com/ulllbrary
!.
nexL !ump, lnc. 2014 #$%&'()%*'+,
1hanks!
console.debug(bye"),
[on[nexL[ump.com