Javascript: The Important Bits

This is a talk given to internally at Zumba to bring people up to speed on javascript who were not familiar.

The most important piece of this talk to take away is the knowledge of scoping.

Transcript

1. Javascript: The Important Bits Reviewing javascript and jquery fundamentals as well as a brief intro to nodejs Chris Saylor ( ) from Zumba Fitness ® @cjsaylor
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? r e t u r n { a : " h e l l o " } 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. 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
7. 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
8. 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 ) ; } }
9. Objects and "classes" Objects are like JSON with some class aspects known as prototypes.
10. 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 ; } ( ) ) ;
11. Common javascript patterns
12. 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.
13. 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.
14. 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 ( ) ;
15. Let's go over jQuery Optimization.
16. 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 ( ) ;
17. 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 ( ) ; } ) ;
18. 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 . ' ) ; } ) ;
19. 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 . } ) ;
20. 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 ( ) ;
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 and is now packaged with nodejs. npm
23. 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/
24. 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
25. 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 ' ) ;
26. 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 ' ) ; } ) ;
27. Questions?