Javascript: The Important Bits Reviewing javascript and jquery fundamentals as well as a brief intro to nodejs Chris Saylor ( ) from Zumba Fitness ® @cjsaylor 

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? 

Think you know Javascript? r e t u r n { a : " h e l l o " } What does this return? 

Think you know Javascript? 

Let's get started with the basics. 

Variables When declairing a variable without the "var", it puts the variable in global space which can be problematic. f u n c t i o n h e l l o ( ) { t e s t 1 = ' h e l l o ' ; / / g l o b a l s c o p e v a r t e s t 2 = ' h e l l o 2 ' ; / / t h i s f u n c t i o n s c o p e } h e l l o ( ) ; c o n s o l e . l o g ( t e s t 1 ) ; / / ' h e l l o ' ; c o n s o l e . l o g ( t e s t 2 ) ; / / u n d e f i n e d 

Scoping There is no block scoping, only function scoping: f o r ( v a r i = 0 ; i < 1 0 ; i + + ) { c o n s o l e . l o g ( i ) ; } c o n s o l e . l o g ( i ) ; / / p r i n t s 1 0 If you want to block the scope of the above loop: ( f u n c t i o n ( ) { f o r ( v a r i = 0 ; i < 1 0 ; i + + ) { c o n s o l e . l o g ( i ) ; } } ( ) ) ; v a r i ; c o n s o l e . l o g ( i ) ; / / u n d e f i n e d 

Scope in Callbacks In callbacks, you can share variables from the parent function: v a r o b j = { o b j V a l u e : ' h e l l o ' , t e s t : f u n c t i o n ( ) { v a r s e l f = t h i s ; s e t T i m e o u t ( f u n c t i o n ( ) { c o n s o l e . l o g ( t h i s . o b j V a l u e ) ; / / u n d e f i n e d c o n s o l e . l o g ( s e l f . o b j V a l u e ) ; / / ' h e l l o ' } , 1 0 ) ; } } 

Objects and "classes" Objects are like JSON with some class aspects known as prototypes. 

Objects and "classes" An example class: A n i m a l = ( f u n c t i o n ( ) { f u n c t i o n A n i m a l ( n a m e ) { t h i s . n a m e = n a m e ; } A n i m a l . p r o t o t y p e . m o v e = f u n c t i o n ( ) { r e t u r n a l e r t ( t h i s . n a m e + ' m o v e d . ' ) ; } ; r e t u r n A n i m a l ; } ( ) ) ; 

Common javascript patterns 

Immediate Execution Function ( f u n c t i o n ( ) { / / Y o u r l o g i c h e r e } ( ) ) ; This immediately executes your logic as anonymous scope. 

Private pattern v a r g e t C o u n t = f u n c t i o n ( ) { v a r c o u n t = 0 ; r e t u r n f u n c t i o n ( ) { r e t u r n + + c o u n t ; } } v a r n e x t = g e t C o u n t ( ) ; c o n s o l e . l o g ( n e x t ( ) ) ; / / 1 c o n s o l e . l o g ( n e x t ( ) ) ; / / 2 This pattern allows you to expose only what you want exposed. 

Initialization Variable initialization: v a r v a l u e = v a l u e | | ' s o m e v a l u e ' ; Complex object initialization: ( { v a l 1 : 1 , v a l 2 : n u l l , i n i t : f u n c t i o n ( ) { t h i s . v a l 2 = 2 ; r e t u r n t h i s ; } } ) . i n i t ( ) ; 

Let's go over jQuery Optimization. 

Selector Caching Bad: $ ( ' . s o m e c l a s s ' ) . t e x t ( ' r e p l a c e s o m e t e x t . ' ) ; $ ( ' . s o m e c l a s s ' ) . c s s ( ' c o l o r ' , ' r e d ' ) ; $ ( ' . s o m e c l a s s ' ) . f o c u s ( ) ; Good: $ ( ' . s o m e c l a s s ' ) . t e x t ( ' r e p l a c e s o m e t e x t . ' ) . c s s ( ' c o l o r ' , ' r e d ' ) . f o c u s ( ) ; 

Selector Caching Caching with callbacks. v a r $ s o m e o t h e r c l a s s = $ ( ' . s o m e o t h e r c l a s s ' ) ; $ ( ' . s o m e c l a s s ' ) . o n ( ' c l i c k ' , f u n c t i o n ( e ) { $ s o m e o t h e r c l a s s . t e x t ( ' s o m e e v e n t ' ) ; } ) ; Caching "this": $ ( ' . s o m e c l a s s ' ) . o n ( ' c l i c k ' , f u n c t i o n ( e ) ) { $ t h i s = $ ( t h i s ) ; $ t h i s . t e x t ( ' s o m e t h i n g ' ) ; $ t h i s . h i d e ( ) ; } ) ; 

Event Attaching When attaching events, use the "on" function. $ ( ' a ' ) . o n ( ' c l i c k ' , f u n c t i o n ( e ) ) { c o n s o l e . l o g ( ' A l i n k w a s c l i c k e d . ' ) ; } ) ; What about dynamically generated links? $ ( d o c u m e n t ) . o n ( ' c l i c k ' , ' a ' , f u n c t i o n ( e ) ) { c o n s o l e . l o g ( ' A l i n k w a s c l i c k e d . ' ) ; } ) ; 

Properly stopping events Returning false is not always a good thing: $ ( ' a ' ) . o n ( ' c l i c k ' , f u n c t i o n ( e ) { c o n s o l e . l o g ( ' S t o p p i n g p r o p a g a t i o n . ' ) ; r e t u r n f a l s e ; / / S a m e a s : / / e . p r e v e n t D e f a u l t ( ) ; / / e . s t o p P r o p a g a t i o n ( ) ; } ) ; $ ( ' a ' ) . o n ( ' c l i c k ' , f u n c t i o n ( e ) ) { c o n s o l e . l o g ( ' A n o t h e r c l i c k . ' ) ; / / N e v e r g e t s c a l l e d b e c a u s e o f t h e / / r e t u r n f a l s e i n t h e a b o v e e v e n t . } ) ; 

Basic jQuery Plugin Structure ( f u n c t i o n ( $ ) { $ . f n . m y L o g = f u n c t i o n ( ) { r e t u r n t h i s . e a c h ( f u n c t i o n ( ) { c o n s o l e . l o g ( $ ( t h i s ) ) ; } ) ; } } ( j Q u e r y ) ) ; Usage: $ ( ' p ' ) . m y L o g ( ) ; 

Introduction to nodejs 

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

Nodejs: Hello world v a r h t t p = r e q u i r e ( ' h t t p ' ) ; h t t p . c r e a t e S e r v e r ( f u n c t i o n ( r e q , r e s ) { r e s . w r i t e H e a d ( 2 0 0 , { ' C o n t e n t - T y p e ' : ' t e x t / p l a i n ' } ) ; r e s . e n d ( ' H e l l o W o r l d \ n ' ) ; } ) . l i s t e n ( 1 3 3 7 ) ; c o n s o l e . l o g ( ' S e r v e r r u n n i n g o n p o r t 1 3 3 7 ' ) ; Source: http://nodejs.org/about/ 

Nodejs: Dependancy Management You can manage dependencies for your nodejs app in package.json: { " n a m e " : " s a m p l e - a p p " , " v e r s i o n " : " 0 . 0 . 1 " , " d e p e n d e n c i e s " : { " e x p r e s s " : " 2 . 5 . x " } } This allows us to install our project dependencies with npm: n p m i n s t a l l 

Nodejs: Express server Our hello world example in express: v a r e x p r e s s = r e q u i r e ( ' e x p r e s s ' ) ; a p p = e x p r e s s . c r e a t e S e r v e r ( ) a p p . g e t ( ' / ' , f u n c t i o n ( r e q , r e s ) { r e s . s e n d ( ' H e l l o W o r l d ' ) ; } ) ; a p p . l i s t e n ( 1 3 3 7 ) ; c o n s o l e . l o g ( ' L i s t e n i n g o n p o r t 1 3 3 7 ' ) ; 

Nodejs: Connect middleware Routing middleware is anything that implements the request, response, and next function pattern. / / R e q u e s t l o g g e r f u n c t i o n l o g g e r ( r e q , r e s , n e x t ) { c o n s o l e . l o g ( " P a t h r e q u e s t e d : " + r e q . p a t h ) ; n e x t ( ) ; } this middleware: a p p . g e t ( ' / ' , l o g g e r , f u n c t i o n ( r e q , r e s ) { r e s . s e n d ( ' H e l l o W o r l d ' ) ; } ) ; 

Questions?