This document provides an introduction to JavaScript fundamentals and common patterns, jQuery optimization techniques, and an introduction to Node.js. It discusses JavaScript data types and variables, scoping, objects and classes. It also covers immediate execution functions, private patterns, event attaching in jQuery, and dependency management in Node.js projects. The document includes code examples for selecting elements and caching selectors in jQuery as well as creating an Express server and using middleware in Node.js applications.

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?