Reviewing javascript and jQuery fundamentals as well as a brief introduction to nodejs.

1. JAVASCRIPT: THE
IMPORTANT BITS
REVIEWING JAVASCRIPT AND JQUERY FUNDAMENTALS AS WELL AS A BRIEF
INTRO TO NODEJS
Chris Saylor ( @cjsaylor ) from Zumba Fitness ®

2. THINK YOU KNOW JAVASCRIPT?
typeof [] === "array"; false
0.1 + 0.2 === 0.3; false
a === null; false
0 == '0'; true
1 == '1'; true
'' == '0'; false
'' == 0; true
'false' == false; false
True or false?

3. THINK YOU KNOW JAVASCRIPT?
rtr
eun
{
a "el"
: hlo
}
What does this return?

4. THINK YOU KNOW JAVASCRIPT?

5. LET'S GET STARTED WITH THE BASICS.

6. VARIABLES
When declairing a variable without the "var", it puts the variable in
global space which can be problematic.
fnto hlo){
ucin el(
ts1='el'
et hlo; / goa soe
/ lbl cp
vrts2='el2; / ti fnto soe
a et hlo' / hs ucin cp
}
hlo)
el(;
cnoelgts1;/ 'el'
osl.o(et) / hlo;
cnoelgts2;/ udfnd
osl.o(et) / neie

7. SCOPING
There is no block scoping, only function scoping:
fr(a i=0 i<1;i+ {
o vr ; 0 +)
cnoelgi;
osl.o()
}
cnoelgi;/ pit 1
osl.o() / rns 0
If you want to block the scope of the above loop:
(ucin( {
fnto )
fr(a i=0 i<1;i+ {
o vr ; 0 +)
cnoelgi;
osl.o()
}
});
()
vri
a ;
cnoelgi;/ udfnd
osl.o() / neie

8. SCOPE IN CALLBACKS
In callbacks, you can share variables from the parent function:
vroj={
a b
ojau:'el'
bVle hlo,
ts:fnto( {
et ucin)
vrsl =ti;
a ef hs
stieu(ucin){
eTmotfnto(
cnoelgti.bVle;/ udfnd
osl.o(hsojau) / neie
cnoelgsl.bVle;/ 'el'
osl.o(efojau) / hlo
} 1)
, 0;
}
}

9. OBJECTS AND "CLASSES"
Objects are like JSON with some class aspects known as prototypes.

10. OBJECTS AND "CLASSES"
An example class:
Aia =(ucin){
nml fnto(
fnto Aia(ae {
ucin nmlnm)
ti.ae=nm;
hsnm ae
}
Aia.rttp.oe=fnto( {
nmlpooyemv ucin)
rtr aetti.ae+'mvd';
eun lr(hsnm oe.)
};
rtr Aia;
eun nml
});
()

11. COMMON JAVASCRIPT PATTERNS

12. IMMEDIATE EXECUTION FUNCTION
(ucin){
fnto(
/ Yu lgchr
/ or oi ee
});
()
This immediately executes your logic as anonymous scope.

13. PRIVATE PATTERN
vrgton =fnto( {
a eCut ucin)
vrcut=0
a on ;
rtr fnto( {
eun ucin)
rtr +cut
eun +on;
}
}
vrnx =gton(;
a et eCut)
cnoelgnx() / 1
osl.o(et); /
cnoelgnx() / 2
osl.o(et); /
This pattern allows you to expose only what you want exposed.

14. INITIALIZATION
Variable initialization:
vrvle=vle| 'oeau'
a au au | smvle;
Complex object initialization:
({
vl:1
a1 ,
vl:nl,
a2 ul
ii:fnto( {
nt ucin)
ti.a2=2
hsvl ;
rtr ti;
eun hs
}
}.nt)
)ii(;

15. LET'S GO OVER JQUERY OPTIMIZATION.

16. SELECTOR CACHING
Bad:
$'smcas)tx(rpaesm tx.)
(.oels'.et'elc oe et';
$'smcas)cs'oo' 'e';
(.oels'.s(clr, rd)
$'smcas)fcs)
(.oels'.ou(;
Good:
$'smcas)
(.oels'
.et'elc sm tx.)
tx(rpae oe et'
.s(clr,'e'
cs'oo' rd)
.ou(;
fcs)

17. SELECTOR CACHING
Caching with callbacks.
vr$oetecas=$'smohrls';
a smohrls (.oetecas)
$'smcas)o(cik,fnto(){
(.oels'.n'lc' ucine
$oetecastx(sm eet)
smohrls.et'oe vn';
};
)
Caching "this":
$'smcas)o(cik,fnto() {
(.oels'.n'lc' ucine)
$hs=$ti)
ti (hs;
$hstx(smtig)
ti.et'oehn';
$hshd(;
ti.ie)
};
)

18. EVENT ATTACHING
When attaching events, use the "on" function.
$''.n'lc' fnto() {
(a)o(cik, ucine)
cnoelg' ln wscikd';
osl.o(A ik a lce.)
};
)
What about dynamically generated links?
$dcmn)o(cik,'' fnto() {
(ouet.n'lc' a, ucine)
cnoelg' ln wscikd';
osl.o(A ik a lce.)
};
)

19. PROPERLY STOPPING EVENTS
Returning false is not always a good thing:
$''.n'lc' fnto(){
(a)o(cik, ucine
cnoelg'tpigpoaain';
osl.o(Sopn rpgto.)
rtr fle
eun as;
/ Sm a:
/ ae s
/ epeeteal(;
/ .rvnDfut)
/ esoPoaain)
/ .tprpgto(;
};
)
$''.n'lc' fnto() {
(a)o(cik, ucine)
cnoelg'nte cik';
osl.o(Aohr lc.)
/ Nvrgt cle bcueo te
/ ee es ald eas f h
/ rtr flei teaoeeet
/ eun as n h bv vn.
};
)

20. BASIC JQUERY PLUGIN STRUCTURE
(ucin$ {
fnto()
$f.yo =fnto( {
.nmLg ucin)
rtr ti.ahfnto( {
eun hsec(ucin)
cnoelg$ti);
osl.o((hs)
};
)
}
}jur);
(Qey)
Usage:
$''.yo(;
(p)mLg)

21. INTRODUCTION TO NODEJS

22. Nodejs is an event-driven language built on Google's V8 (in c).
It's package manager is known as npm and is now packaged with
nodejs.

23. NODEJS: HELLO WORLD
vrht =rqie'tp)
a tp eur(ht';
ht.raeevrfnto (e,rs {
tpcetSre(ucin rq e)
rswieed20 {CnetTp' 'etpan};
e.rtHa(0, 'otn-ye: tx/li')
rsed'el Wrdn)
e.n(Hlo ol';
}.itn13)
)lse(37;
cnoelg'evrrnigo pr 13';
osl.o(Sre unn n ot 37)
Source: http://nodejs.org/about/

24. NODEJS: DEPENDANCY MANAGEMENT
You can manage dependencies for your nodejs app in package.json:
{
"ae:"apeap,
nm" sml-p"
"eso" ".."
vrin: 001,
"eednis:{
dpnece"
"xrs" ".."
epes: 25x
}
}
This allows us to install our project dependencies with npm:
nmisal
p ntl

25. NODEJS: EXPRESS SERVER
Our hello world example in express:
vrepes=rqie'xrs';
a xrs eur(epes)
ap=epescetSre(
p xrs.raeevr)
apgt'' fnto(e,rs {
p.e(/, ucinrq e)
rssn(HloWrd)
e.ed'el ol';
};
)
aplse(37;
p.itn13)
cnoelg'itnn o pr 13';
osl.o(Lseig n ot 37)

26. NODEJS: CONNECT MIDDLEWARE
Routing middleware is anything that implements the request,
response, and next function pattern.
/ Rqetlge
/ eus ogr
fnto lge(e,rs nx){
ucin ogrrq e, et
cnoelg"ahrqetd "+rqpt)
osl.o(Pt euse: e.ah;
nx(;
et)
}
Using this middleware:
apgt'' lge,fnto(e,rs {
p.e(/, ogr ucinrq e)
rssn(HloWrd)
e.ed'el ol';
};
)

27. QUESTIONS?