Future of Web Design: 2014, 45 minute talk on how jQuery developers can break into learning JavaScript through new and standardised APIs. Demystifies how simple JavaScript can really be alongside jQuery examples.
use jQuery, is it necessary? Why JavaScript skills are important Take existing knowledge of jQuery to learn JavaScript Advantages/performance measures of JS/jQuery · · · · · 3/55
on jQuery New developers learning only jQuery Hard to find JavaScript resources/answers Obscured what JavaScript really is "Just use jQuery"... · · · · · · 8/55
time Cross-browser consistencies Easy and consistent API Short learning curve Selectors (Sizzle.js) Class manipulation Great event methods Makes difficult stuff a breeze (Ajax/XHR, animation) · · · · · · · · 11/55
is a one-time investment JavaScript performance far outweighs jQuery's Reliance on jQuery isn't sustainable Total control and understanding over what you write jQuery is heavily DOM focused (JS is on the server now too!) JavaScript and HTML5 are the future! · · · · · · 15/55
s s e s ' , ' [ a t t r i b u t e s ] ' , ' # i d s ' $ ( e l e m ) ; J Q U E R Y / / ' . c l a s s e s ' , ' [ a t t r i b u t e s ] ' , ' # i d s ' d o c u m e n t . q u e r y S e l e c t o r ( e l e m ) ; d o c u m e n t . q u e r y S e l e c t o r A l l ( e l e m s ) ; J A V A S C R I P T 17/55
r y w r a p s y o u r c o d e i n i t s o w n O b j e c t / / w h i c h c o n t a i n s t h e a d d C l a s s ( ) m e t h o d $ ( e l e m ) . a d d C l a s s ( ' f o w d ' ) ; J Q U E R Y / / J a v a S c r i p t u s e s a D O M T o k e n L i s t t o c o n t a i n / / t h e c l a s s n a m e s , r e t u r n e d v i a t h e c l a s s L i s t O b j e c t e l e m . c l a s s L i s t . a d d ( ' f o w d ' ) ; J A V A S C R I P T 19/55
) . a t t r ( ' d a t a - j q u e r y ' , ' t e s t ' ) ; / / s e t $ ( e l e m ) . a t t r ( ' d a t a - j q u e r y ' ) ; / / g e t J Q U E R Y e l e m . s e t A t t r i b u t e ( ' d a t a - j q u e r y ' , ' t e s t ' ) ; / / s e t e l e m . g e t A t t r i b u t e ( ' d a t a - j q u e r y ' ) ; / / g e t J A V A S C R I P T 21/55
) . o n ( ' c l i c k ' , f u n c t i o n ( ) { } ) ; J Q U E R Y e l e m . a d d E v e n t L i s t e n e r ( ' c l i c k ' , f u n c t i o n ( ) { } ) ; J A V A S C R I P T 23/55
e n t ) . r e a d y ( f u n c t i o n ( ) { } ) ; J Q U E R Y d o c u m e n t . a d d E v e n t L i s t e n e r ( ' D O M C o n t e n t L o a d e d ' , f u n c t i o n ( ) { } ) ; J A V A S C R I P T 25/55
t e s a n O b j e c t , w i l l l o o p i n t e r n a l l y $ ( e l e m ) . c s s ( { " b a c k g r o u n d " : " # 0 0 0 " , " c o l o r " : " # f f f " } ) ; J Q U E R Y / / e x t e n d t h e S t y l e O b j e c t , p u r e w r i t e , n o l o o p s v a r e l e m = d o c u m e n t . q u e r y S e l e c t o r ( e l e m ) ; e l e m . s t y l e . b a c k g r o u n d = ' # 0 0 0 ' ; e l e m . s t y l e . c o l o r = ' # f f f ' ; J A V A S C R I P T 27/55
l = ' / / m a p s . g o o g l e a p i s . c o m / m a p s / a p i / g e o c o d e / j s o n ? a d d r e s s = L o n d o n + U K & s e n s o r = f a l s e ' ; $ . a j a x ( u r l ) . d o n e ( f u n c t i o n ( d a t a ) { c o n s o l e . l o g ( ' $ . a j a x ' , d a t a ) ; / / d o n e } ) . f a i l ( f u n c t i o n ( ) { / / f a i l } ) . a l w a y s ( f u n c t i o n ( ) { / / c o m p l e t e } ) ; J Q U E R Y 29/55
l = ' / / m a p s . g o o g l e a p i s . c o m / m a p s / a p i / g e o c o d e / j s o n ? a d d r e s s = L o n d o n + U K & s e n s o r = f a l s e ' ; v a r x h r = n e w X M L H t t p R e q u e s t ( ) ; x h r . o p e n ( ' G E T ' , u r l , t r u e ) ; x h r . o n r e a d y s t a t e c h a n g e = f u n c t i o n ( ) { i f ( x h r . r e a d y S t a t e = = = 4 ) { i f ( x h r . s t a t u s = = = 2 0 0 ) { c o n s o l e . l o g ( ' X M L H t t p R e q u e s t ( ) ' , x h r . r e s p o n s e T e x t ) ; / / d o n e } e l s e { / / f a i l } } } ; x h r . s e n d ( ) ; J A V A S C R I P T 30/55
= [ 5 2 , 9 7 , 3 3 , 2 1 , 7 ] ; $ . e a c h ( o n e , f u n c t i o n ( i n d e x , v a l u e ) { c o n s o l e . l o g ( ' o n e : ' , i n d e x , v a l u e ) ; } ) ; J Q U E R Y v a r t w o = [ 5 2 , 9 7 , 3 3 , 2 1 , 7 ] ; t w o . f o r E a c h ( f u n c t i o n ( v a l u e , i n d e x ) { c o n s o l e . l o g ( ' t w o : ' , i n d e x , v a l u e ) ; } ) ; J A V A S C R I P T 32/55
= { n a m e : ' T o d d ' , l o c a t i o n : ' U K ' } ; $ . e a c h ( o n e , f u n c t i o n ( i n d e x , v a l u e ) { c o n s o l e . l o g ( ' o n e : ' , i n d e x , v a l u e ) ; } ) ; J Q U E R Y v a r t w o = { n a m e : ' T o d d ' , l o c a t i o n : ' U K ' } ; f o r ( v a r p r o p i n t w o ) { c o n s o l e . l o g ( ' t w o : ' , p r o p , t w o [ p r o p ] ) ; } J A V A S C R I P T 34/55
legacy support? Polyfill when appropriate (github.com/modernizr) Try a micro-library or write a wrapper to provide fallbacks Use jQuery if it makes sense! · · · 38/55
it makes sense to, don't rewrite existing functionality When you're saving time! When you're saving a lot of code When you're relying on advanced features that aren't polyfilled · · · · · · 39/55
t h e j Q u e r y O b j e c t + s e l e c t o r v a r $ n a v = $ ( ' . n a v ' ) ; / / f u n c t i o n t o t o g g l e t h e n a v v a r t o g g l e N a v = f u n c t i o n ( ) { i f ( $ ( t h i s ) . h a s C l a s s ( ' a c t i v e ' ) ) { $ ( t h i s ) . r e m o v e C l a s s ( ' a c t i v e ' ) ; } e l s e { $ ( t h i s ) . a d d C l a s s ( ' a c t i v e ' ) ; } } ; / / b i n d e v e n h a n d l e r ( s ) n a v . o n ( ' c l i c k ' , t o g g l e N a v ) ; J Q U E R Y 41/55
h e n e w j Q u e r y O b j e c t , r e v e r t t o q u e r y S e l e c t o r v a r n a v = d o c u m e n t . q u e r y S e l e c t o r ( ' . n a v ' ) ; / / f u n c t i o n d e c l a r a t i o n r e m a i n s , b u t t h e ` t h i s ` v a l u e i s n ' t / / p a s s e d i n t o j Q u e r y - w e r i d e o f f t h e e l e m e n t ' s c l a s s L i s t O b j e c t v a r t o g g l e N a v = f u n c t i o n ( ) { i f ( t h i s . c l a s s L i s t . c o n t a i n s ( ' a c t i v e ' ) ) { t h i s . c l a s s L i s t . r e m o v e ( ' a c t i v e ' ) ; } e l s e { t h i s . c l a s s L i s t . a d d ( ' a c t i v e ' ) ; } } ; / / u s e t h e s t a n d a r d i s e d A E L n a v . a d d E v e n t L i s t e n e r ( ' c l i c k ' , t o g g l e N a v , f a l s e ) ; J A V A S C R I P T 42/55
r y s t o r e s e l e m e n t s i n a n A r r a y $ ( ' . i t e m s ' ) . e a c h ( f u n c t i o n ( i n d e x , v a l u e ) { v a r i t e m = v a l u e ; } ) ; J A V A S C R I P T 43/55
S c r i p t u s e s N o d e L i s t s w i t h q u e r y S e l e c t o r / q u e r y S e l e c t o r A l l / / u s i n g f o r E a c h h e r e w o u l d n ' t w o r k , N o d e L i s t s a r e d i f f e r e n t t o A r r a y s / / a s t h e i r P r o t o t y p e O b j e c t s d o n o t c o n t a i n t h e f o r E a c h p r o p e r t y v a r i t e m s = d o c u m e n t . q u e r y S e l e c t o r A l l ( ' . i t e m s ' ) ; f o r ( v a r i = 0 ; i < i t e m s . l e n g t h ; i + + ) { v a r i t e m = i t e m s [ i ] ; } J A V A S C R I P T 44/55
r n a m e = ' T o d d ' ; l o c a l S t o r a g e . s e t I t e m ( ' n a m e ' , u s e r n a m e ) ; / / { n a m e : ' T o d d ' } J A V A S C R I P T 46/55
s r c = " m y a w e s o m e v i d . m p 4 " c l a s s = " v i d e o - e l e m " > < / v i d e o > < a h r e f = " # " c l a s s = " v i d e o - p l a y " > P l a y < / a > < a h r e f = " # " c l a s s = " v i d e o - p a u s e " > P l a y < / a > J A V A S C R I P T v a r v i d e o = d o c u m e n t . q u e r y S e l e c t o r ( ' . v i d e o - e l e m ' ) ; v a r p l a y = d o c u m e n t . q u e r y S e l e c t o r ( ' . v i d e o - p l a y ' ) ; v a r p l a y V i d e o = f u n c t i o n ( ) { v i d e o . p l a y ( ) ; } ; p l a y . a d d E v e n t L i s t e n e r ( ' c l i c k ' , p l a y V i d e o , f a l s e ) ; J A V A S C R I P T 47/55
u l l S c r e e n = f u n c t i o n ( e l e m ) { i f ( e l e m . r e q u e s t F u l l s c r e e n ) { e l e m . r e q u e s t F u l l s c r e e n ( ) ; } e l s e i f ( e l e m . m o z R e q u e s t F u l l S c r e e n ) { e l e m . m o z R e q u e s t F u l l S c r e e n ( ) ; } e l s e i f ( e l e m . w e b k i t R e q u e s t F u l l s c r e e n ) { e l e m . w e b k i t R e q u e s t F u l l s c r e e n ( ) ; } e l s e i f ( e l e m . m s R e q u e s t F u l l s c r e e n ) { e l e m . m s R e q u e s t F u l l s c r e e n ( ) ; } } g o F u l l S c r e e n ( d o c u m e n t . d o c u m e n t E l e m e n t ) ; J A V A S C R I P T 48/55
i g a t o r . g e o l o c a t i o n ) { n a v i g a t o r . g e o l o c a t i o n . g e t C u r r e n t P o s i t i o n ( f u n c t i o n ( p o s ) { / / p o s . c o o r d s . l a t i t u d e / / p o s . c o o r d s . l o n g t i t u d e } ) ; } e l s e { / / n o G e o s u p p o r t } J A V A S C R I P T 49/55
s > < / c a n v a s > J A V A S C R I P T v a r c a n v a s = d o c u m e n t . q u e r y S e l e c t o r ( ' c a n v a s ' ) ; v a r c t x = c a n v a s . g e t C o n t e x t ( ' 2 d ' ) ; c t x . f i l l S t y l e = ' # f f 0 0 0 ' ; c t x . f i l l R e c t ( 0 , 0 , 1 5 0 , 7 5 ) ; J A V A S C R I P T 50/55
a c k w a r d w i n d o w . h i s t o r y . b a c k ( ) ; / / g o f o r w a r d w i n d o w . h i s t o r y . f o r w a r d ( ) ; / / s p e c i f i c p o i n t s , b a c k 2 w i n d o w . h i s t o r y . g o ( - 2 ) ; / / s p e c i f i c p o i n t s , f o r w a r d 2 w i n d o w . h i s t o r y . g o ( 2 ) ; J A V A S C R I P T 51/55
v i g a t o r . g e t U s e r M e d i a ) { n a v i g a t o r . g e t U s e r M e d i a ( { v i d e o : t r u e , a u d i o : t r u e } , f u n c t i o n ( m e d i a S t r e a m ) { / / d o s o m e t h i n g w i t h m e d i a S t r e a m } , e r r o r C a l l b a c k ) ; } J A V A S C R I P T 52/55
when appropriate, not as an alternative JavaScript APIs are somewhat easier when compared Backwards compatibility won't always be needed Browser quirks may need wrapper fixes, not libraries New APIs aren't perfect, but they won't require huge abstractions Understand what's happening "under the hood" of libraries you use Don't just take the easy route, challenge yourself to understand JavaScript · · · · · · · · 54/55