JavaScript & WordPress

Talk at WordCamp Nepal 2012

Transcript

3. JAVASCRIPT & WORDPRESS AVINASH KUNDALIYA (@HARDFIRE) <3 JS & PHP
4. IS JAVASCRIPT IMPORTANT ??
5. USED BY 92.3% SITES OCTOBER 2012 - W3TECHS.COM
6. >80% RELY FOR IMPORTANT FUNCTIONALITY
7. UBIQUITOUS.
8. CAN MAKE SITE SLOW IF DONE THE WRONG WAY
10. CAN MAKE SITE UNUSABLE IF DONE TOTALLY THE WRONG WAY
11. I AM CONVINCED !! WE SHOULD USE JS, THE RIGHT WAY
12. JAVASCRIPT SOME DIFFERENTIATING PARTS
13. V A R
14. GLOBAL SCOPE BY DEFAULT a = 5 ; f u n c t i o n s a y ( ) { a = 3 ; c o n s o l e . l o g ( a ) ; } s a y ( ) ; c o n s o l e . l o g ( a ) ; 3 3 / / w h o a !
15. USE VAR KEYWORD a = 5 ; f u n c t i o n s a y ( ) { v a r a = 3 ; c o n s o l e . l o g ( a ) ; } s a y ( ) ; c o n s o l e . l o g ( a ) ; 3 5 / / t h a n k g o d ! : D
16. HOISTING Wherever i define my variable, the initialization will be *hoisted* to the top. v a r v a l = ' n a m a s t e ' ; ( f u n c t i o n ( ) { c o n s o l e . l o g ( v a l ) ; / / n a m a s t e } ) ( ) ; v a r v a l = ' n a m a s t e ' ; ( f u n c t i o n ( ) { c o n s o l e . l o g ( v a l ) ; / / u n d e f i n e d v a r v a l = ' o l a ! ' ; } ) ( ) ;
17. T H I S Elsewhere : current object instantiated by the class JS : depends on how the function is called. t h i s refers to the owner of the function
18. THIS : WINDOW ( FUNCTION CALL ) f u n c t i o n w h a t _ i s _ t h i s ( ) { c o n s o l e . l o g ( t h i s ) ; } w h a t _ i s _ t h i s ( ) ; / / w i n d o w
19. THIS : OBJECT ( OBJECT METHOD ) v a r t h i s O b j e c t = { t h i s F u n c : f u n c t i o n ( ) { c o n s o l e . l o g ( t h i s ) ; } } t h i s O b j e c t . t h i s F u n c ( ) ; / / t h i s O b j e c t
20. THIS : OBJECT ( CONSTRUCTING OBJECTS USING N E W ) f u n c t i o n W o r d C a m p ( y e a r ) { t h i s . y e a r = y e a r ; t h i s . y e l l O u t = f u n c t i o n ( ) { c o n s o l e . l o g ( " Y a y ! i t i s W C " + t h i s . y e a r ) ; } } v a r w c 2 0 1 2 = n e w W o r d C a m p ( 2 0 1 2 ) ; w c 2 0 1 2 . y e l l O u t ( ) ; / / Y a y ! i t i s W C 2 0 1 2 v a r w c 2 0 1 1 = W o r d C a m p ( 2 0 1 1 ) ; w c 2 0 1 2 . y e l l O u t ( ) ; / / U n d e f i n e d y e l l O u t ( ) ; / / Y a y ! i t i s W C 2 0 1 1
21. F U N C T I O N S : FIRST CLASS
22. FUNCTION DECLARATION FUNCTION EXPRESSION f u n c t i o n s a y ( ) { v a r a = 3 ; c o n s o l e . l o g ( a ) ; } s a y ( ) ; v a r s a y = f u n c t i o n ( ) { v a r a = 3 ; c o n s o l e . l o g ( a ) ; } s a y ( ) ;
23. SEE, I CAN PASS FUNCTIONS EVEN FUNCTIONS WITHOUT A NAME f u n c t i o n s a y ( f u n c ) { v a r a = 3 ; f u n c ( a ) ; } s a y ( c o n s o l e . l o g ) ; f u n c t i o n s a y ( f u n c ) { v a r a = 3 ; f u n c ( a ) ; } s a y ( f u n c t i o n ( n a m e ) { a l e r t ( n a m e ) } ) ;
24. CODE TWISTERS Output : 8 f u n c t i o n f o o ( ) { f u n c t i o n b a r ( ) { r e t u r n 3 ; } r e t u r n b a r ( ) ; f u n c t i o n b a r ( ) { r e t u r n 8 ; } } a l e r t ( f o o ( ) ) ;
25. CODE TWISTERS Output : 3 Code examples from http://javascriptweblog.wordpress.com/ f u n c t i o n f o o ( ) { v a r b a r = f u n c t i o n ( ) { r e t u r n 3 ; } ; r e t u r n b a r ( ) ; v a r b a r = f u n c t i o n ( ) { r e t u r n 8 ; } ; } a l e r t ( f o o ( ) ) ;
26. THINGS MIGHT JUST GO WRONG f u n c t i o n g e t T e n F u n c t i o n s B a d ( ) { v a r r e s u l t = [ ] ; f o r ( v a r i = 0 ; i < 1 0 ; i + + ) { r e s u l t . p u s h ( f u n c t i o n ( ) { r e t u r n i ; } ) ; } r e t u r n r e s u l t ; } v a r f u n c t i o n s B a d = g e t T e n F u n c t i o n s B a d ( ) ; f o r ( v a r i = 0 ; i < 1 0 ; i + + ) { c o n s o l e . l o g ( f u n c t i o n s B a d [ i ] ( ) ) ; } 1 0 , 1 0 , 1 0 , 1 0 , 1 0 , 1 0 , 1 0 , 1 0 , 1 0 , 1 0
27. BUT WE CAN FIX THEM f u n c t i o n g e t T e n F u n c t i o n s ( ) { v a r r e s u l t = [ ] ; f o r ( v a r i = 0 ; i < 1 0 ; i + + ) { r e s u l t . p u s h ( ( f u n c t i o n ( i ) { r e t u r n f u n c t i o n ( ) { r e t u r n i ; } } ) ( i ) ) ; } r e t u r n r e s u l t ; } v a r f u n c t i o n s = g e t T e n F u n c t i o n s ( ) ; f o r ( v a r i = 0 ; i < 1 0 ; i + + ) { c o n s o l e . l o g ( f u n c t i o n s [ i ] ( ) ) ; } 0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9
28. OK! LET'S TALK ABOUT WORDPRESS
29. a d d _ a c t i o n ( ' w p _ h e a d ' , ' a d d _ m y _ s c r i p t ' ) ; f u n c t i o n a d d _ m y _ s c r i p t ( ) { ? > < s c r i p t t y p e = " t e x t / j a v a s c r i p t " s r c = " < ? p h p b l o g i n f o ( ' w p u r l ' ) ; ? > / w p - c o n t e n t / p l u g i n s / m y - p l u g i n / j q u e r y . j s " > < / s c r i p t > < s c r i p t t y p e = " t e x t / j a v a s c r i p t " s r c = " < ? p h p b l o g i n f o ( ' w p u r l ' ) ; ? > / w p - c o n t e n t / p l u g i n s / m y - p l u g i n / m y - s c r i p t . j s " > < / s c r i p t > < ? p h p }
31. LET'S DO IT LIKE THE PRO'S w p _ r e g i s t e r _ s c r i p t w p _ d e r e g i s t e r _ s c r i p t w p _ e n q u e u e _ s c r i p t w p _ d e q u e u e _ s c r i p t
32. WP_REGISTER_SCRIPT Yo WP! Remember this script @CODEX ( $ h a n d l e , / / n a m e o f t h e s c r i p t $ s r c , / / u r l t o s c r i p t $ d e p s , / / a r r a y o f d e p e n d e n c i e s $ v e r , / / v e r s i o n o f c o d e $ i n _ f o o t e r / / p l a c e i n f o o t e r ? ) ;
33. WP_REGISTER_SCRIPT - EXAMPLE Don't hardcode. Use p l u g i n s _ u r l or g e t _ t e m p l a t e _ d i r e c t o r y _ u r i Many predefined libraries w p _ r e g i s t e r _ s c r i p t ( ' m y t h e m e - c u s t o m ' , / / h a n d l e W P w i l l k n o w J S b y g e t _ t e m p l a t e _ d i r e c t o r y _ u r i ( ) . ' / j s / c u s t o m . j s ' , a r r a y ( ' j q u e r y ' ) , / / r e q u i r e s j Q u e r y 1 . 0 , / / v e r s i o n 1 . 0 t r u e / / c a n l o a d i n f o o t e r ) ; @codex
34. WP_DEREGISTER_SCRIPT Yo WP! forget about this script @CODEX w p _ d e r e g i s t e r _ s c r i p t ( ' j q u e r y ' ) ;
35. WP_ENQUEUE_SCRIPT Yo WP! Please put the script in my page @CODEX w p _ e n q u e u e _ s c r i p t ( $ h a n d l e , $ s r c , $ d e p s , $ v e r , $ i n _ f o o t e r ) ;
36. A LITTLE COMPLEX EXAMPLE Use jQuery from google CDN instead of WordPress local f u n c t i o n m y _ s c r i p t s _ m e t h o d ( ) { w p _ d e r e g i s t e r _ s c r i p t ( ' j q u e r y ' ) ; w p _ r e g i s t e r _ s c r i p t ( ' j q u e r y ' , ' h t t p : / / a j a x . g o o g l e a p i s . c o m / a j a x / l i b s / j q u e r y / 1 . 7 . 2 / j q u e r y . m i n . j s ' ) ; w p _ e n q u e u e _ s c r i p t ( ' j q u e r y ' ) ; } a d d _ a c t i o n ( ' w p _ e n q u e u e _ s c r i p t s ' , ' m y _ s c r i p t s _ m e t h o d ' ) ;
37. WP_DEQUEUE_SCRIPT Hey WP! Someone put this script in my page, remove it please @CODEX w p _ d e q u e u e _ s c r i p t ( $ h a n d l e ) ;
38. EXAMPLE w p _ r e g i s t e r _ s c r i p t ( ' j q u e r y . f l e x s l i d e r ' , g e t _ t e m p l a t e _ d i r e c t o r y _ u r i ( ) . ' / j s / f l e x . j s ' , a r r a y ( ' j q u e r y ' ) , ' 1 . 7 ' , t r u e ) ; w p _ r e g i s t e r _ s c r i p t ( ' h o m e - p a g e - s l i d e r ' , g e t _ t e m p l a t e _ d i r e c t o r y _ u r i ( ) . ' / j s / s l i d e r . j s ' , a r r a y ( ' j q u e r y . f l e x s l i d e r ' ) , ' 1 . 0 ' , t r u e ) ; i f ( i s _ f r o n t _ p a g e ( ) ) { w p _ e n q u e u e _ s c r i p t ( ' h o m e - p a g e - s l i d e r ' ) ; }
39. WP_LOCALIZE_SCRIPT Send data from WordPress to JavaScript SIMPLE EXAMPLE @CODEX w p _ l o c a l i z e _ s c r i p t ( $ h a n d l e , $ o b j e c t _ n a m e , $ l 1 0 n ) ; w p _ e n q u e u e _ s c r i p t ( ' s o m e _ h a n d l e ' ) ; $ t r a n s l a t i o n _ a r r a y = a r r a y ( ' s o m e _ s t r i n g ' = > _ _ ( ' S o m e s t r i n g t o t r a n s l a t e ' ) , ' a _ v a l u e ' = > ' 1 0 ' ) ; w p _ l o c a l i z e _ s c r i p t ( ' s o m e _ h a n d l e ' , ' o b j e c t _ n a m e ' , $ t r a n s l a t i o n _ a r r a y ) ; c o n s o l e . l o g ( o b j e c t _ n a m e . s o m e _ s t r i n g ) ;
40. WP_LOCALIZE_SCRIPT EXAMPLE w p _ l o c a l i z e _ s c r i p t ( ' s i m p l e c a t c h _ c u s t o m _ s l i d e r ' , ' j s _ v a l u e ' , a r r a y ( ' t r a n s i t i o n _ e f f e c t ' = > $ t r a n s i t i o n _ e f f e c t , ' t r a n s i t i o n _ d e l a y ' = > $ t r a n s i t i o n _ d e l a y , ' t r a n s i t i o n _ d u r a t i o n ' = > $ t r a n s i t i o n _ d u r a t i o n ) ) ;
41. AJAX IN WP PLEASE DON'T TRY THIS AT HOME! r e q u i r e _ o n c e ( " . . / . . / . . / . . / w p - c o n f i g . p h p " ) ; / / o r r e q u i r e _ o n c e ( " . . / . . / . . / . . / w p - l o a d . p h p " ) ;
42. WP_AJAX_(ACTION) @CODEX j Q u e r y . p o s t ( M y A j a x . a j a x u r l , { ' a c t i o n ' : ' a d d _ f o o b a r ' , ' d a t a ' : ' f o o b a r i d ' } , f u n c t i o n ( r e s p o n s e ) { a l e r t ( ' T h e s e r v e r r e s p o n d e d : ' + r e s p o n s e ) ; } ) ;
43. WP_AJAX_(ACTION) a d d _ a c t i o n ( ' w p _ a j a x _ a d d _ f o o b a r ' , ' p r e f i x _ a j a x _ a d d _ f o o b a r ' ) ; f u n c t i o n p r e f i x _ a j a x _ a d d _ f o o b a r ( ) { / / D o S o m e t h i n g r e a l l y a w e s o m e h e r e : ) e x i t ; }
44. BUT WHY ?
45. SUMMING UP var this functions awesomeness use wordpress helper functions
46. WHAT NEXT "use strict" closures functional programming more quirks : JS Garden “ Go make something awesome! ”
47. ?
48. THE END :'( - AVINASH KUNDALIYA / @HARDFIRE