Javascript: The Important Bits

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.

9673aada5df552a024234a5220d50501?s=128

Zumba Technology

July 11, 2012
Tweet

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?