javascript in wordpress: basics and best practices (wordcamp reno 2011)
TRANSCRIPT
![Page 1: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/1.jpg)
&JavaScript in WordPress
The Basics Best Practices
![Page 2: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/2.jpg)
Daryl KoopersmithWordPress Core Developer
@darylkoopdarylkoop.com
![Page 3: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/3.jpg)
The Basics
![Page 4: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/4.jpg)
Declare variables using the var keyword.
var easy = 'absolutely', really = 'yes';
![Page 5: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/5.jpg)
Global variables arebound implicitly.
Usually to the window object.
var easy = 'absolutely';
easy === window.easy; // trueeasy === this.easy; // true
![Page 6: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/6.jpg)
Variables cascadeinto functions.
var easy = 'absolutely';
function areYouSure() { alert( easy ); // absolutely}
![Page 7: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/7.jpg)
Functions
![Page 8: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/8.jpg)
Functions are objects.
function myFunc() { return true; }var myFunc = function() { return true; };
![Page 9: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/9.jpg)
Functions are closures.
function safe() { var secret = 'sshhh!';}
alert( secret ); // Error: undefined!
![Page 10: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/10.jpg)
Don’t forget to use var!
function safe() { secret = 'sshhh!';}
// Uh oh...alert( secret ); // 'sshhh!'
Otherwise, your variables are declared globally.
![Page 11: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/11.jpg)
Functions are nestable.var a = 1;function outer() { var b = 2; function inner() { var c = 3; alert( a + b + c ); // 6 } alert( a + b + c ); // Error: c is undefined!}
![Page 12: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/12.jpg)
Functions can be anonymous.
jQuery(document).click( function(){ alert('Hello, world.');});
![Page 13: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/13.jpg)
Functions can execute themselves.
(function(){ // this is run immediately})();
![Page 14: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/14.jpg)
Context
![Page 15: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/15.jpg)
The this keywordprovides context.
![Page 16: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/16.jpg)
Global context.
this == window; // true
![Page 17: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/17.jpg)
Global context.
var context = 'global';
function getContext() { alert( this.context );};
getContext(); // global
![Page 18: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/18.jpg)
Object context.
var obj = { context: 'object', getContext: function() { alert( this.context ); } };
obj.getContext(); // object
![Page 19: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/19.jpg)
Instance context.var InstanceConstructor = function() { this.context = 'instance'; this.getContext = function() {
alert( this.context ); } }, instance = new InstanceConstructor();
instance.getContext(); // instance
![Page 20: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/20.jpg)
Hooray!Everything works
as expected!
![Page 21: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/21.jpg)
Except when it doesn’t.var context = 'global', obj = { context: 'object', getContext: function() { alert( this.context ); } }, except = obj.getContext;
// We expect 'object', but see 'global'! except(); // global
![Page 22: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/22.jpg)
Overriding context.
func.call( thisContext, arg1, arg2 );func.apply( thisContext, arguments );
![Page 23: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/23.jpg)
Overriding context.function getContext() { alert( this.context ); };
var context = 'global', override = { context: 'override' };
// We expect global, but .call sets override to 'this'.getContext.call( override ); // override
![Page 24: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/24.jpg)
Binding context.
function bind( fn, context ) { return function() { fn.apply( context, arguments ); };}
![Page 25: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/25.jpg)
JavaScript WordPress&
![Page 26: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/26.jpg)
Load JavaScript with wp_enqueue_script
for example:
wp_enqueue_script( $script_name, $source, $dependencies, $version, $in_footer );
wp_enqueue_script( 'slug', 'file.js', array('jquery'), '2.0', true );
![Page 27: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/27.jpg)
Only load scriptswhen necessary.
![Page 28: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/28.jpg)
Loading jQuery
or
Don’t just print <script> tags.Use wp_enqueue_script wherever possible.
wp_enqueue_script('jquery');
wp_enqueue_script( 'slug', 'file.js', array('jquery'), '2.0', true );
![Page 29: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/29.jpg)
WordPress uses jQuery.noConflict
jQuery.noConflict disables the $ variable.To use $ again, wrap your code in this:
(function($){ /* code code code */ })(jQuery);
![Page 30: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/30.jpg)
AJAX in WordPress: PHP// Action for adminadd_action("wp_ajax_$my_action", 'my_action_callback');
// Action for frontendadd_action("wp_ajax_$my_action", 'my_action_callback');add_action("wp_ajax_nopriv_$my_action", 'my_action_callback');
Do not use $_REQUEST[‘action’] in place of $my_action.
![Page 31: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/31.jpg)
AJAX in WordPress: JS
jQuery.post( ajaxurl, { action: myAction}, function( data ) { // response code});
![Page 32: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/32.jpg)
AJAX in WordPressOn the front end, ajaxurl is not defined.function koop_ensure_ajaxurl() { add_action( 'wp_head', '__koop_ensure_ajaxurl' );}
function __koop_ensure_ajaxurl() { if ( is_admin() ) return; ?><script type="text/javascript"> //<![CDATA[ var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>'; //]]> </script><?php}
![Page 33: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/33.jpg)
Patch core with SCRIPT_DEBUG
define( 'SCRIPT_DEBUG', true );
While you’re at it, use WP_DEBUG:define( 'WP_DEBUG', true );
![Page 34: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/34.jpg)
Best Practices
![Page 35: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/35.jpg)
Validate input server side.Escape untrusted values.
![Page 36: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/36.jpg)
,
![Page 37: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/37.jpg)
Never end an objectwith a comma.
![Page 38: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/38.jpg)
Make animations snappy and noticeable.
![Page 39: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/39.jpg)
Cache jQuery collections.
![Page 40: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/40.jpg)
Throttle repetitive events.
![Page 41: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/41.jpg)
Use event delegation.
jQuery(document).delegate( 'click', 'a', func );
![Page 42: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/42.jpg)
Use event namespaces.
jQuery(document).bind( 'click.namespace', func );
![Page 43: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/43.jpg)
Minimize changesto the DOM.
![Page 44: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/44.jpg)
Use the ready event.Properly.
(function($){
// Non-DOM related code.
$(document).ready( function() { // Code that traverses or manipulates the DOM });
})(jQuery);
![Page 45: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/45.jpg)
Use good judgement.
![Page 46: JavaScript in WordPress: Basics and Best Practices (WordCamp Reno 2011)](https://reader030.vdocument.in/reader030/viewer/2022020207/554ebe9ab4c905de468b49a5/html5/thumbnails/46.jpg)
Questions?Daryl Koopersmith
WordPress Core Developer
@darylkoopdarylkoop.com