Avinash Kundaliya: Javascript and WordPress

JAVASCRIPT
&
WORDPRESS
AVINASH KUNDALIYA (@HARDFIRE)
<3 JS & PHP

USED BY 92.3% SITES
OCTOBER 2012 - W3TECHS.COM

>80% RELY FOR IMPORTANT FUNCTIONALITY

CAN MAKE SITE SLOW
IF DONE THE WRONG WAY

CAN MAKE SITE UNUSABLE
IF DONE TOTALLY THE WRONG WAY

I AM CONVINCED !!
WE SHOULD USE JS, THE RIGHT WAY

JAVASCRIPT
SOME DIFFERENTIATING PARTS

GLOBAL SCOPE BY DEFAULT
a=5;
function say() {
a=3;
console.log(a);
}
say();
console.log(a);

3
3 // whoa!

USE VAR KEYWORD
a=5;
function say() {
var a=3;
console.log(a);
}
say();
console.log(a);

3
5 // thank god! :D

HOISTING
var val = 'namaste';
(function() {
console.log(val); // namaste
})();

var val = 'namaste';
(function() {
console.log(val); // undefined
var val = 'ola!';
})();

Wherever i define my variable, the initialization will be *hoisted*
to the top.

THIS
Elsewhere : current object instantiated by the class
JS : depends on how the function is called.
this refers to the owner of the function

THIS : WINDOW ( FUNCTION CALL )
function what_is_this() {
console.log(this);
}
what_is_this(); //window

THIS : OBJECT ( OBJECT METHOD )
var thisObject = {
thisFunc: function(){
console.log(this);
}
}
thisObject.thisFunc(); //thisObject

THIS : OBJECT ( CONSTRUCTING OBJECTS USING NEW )
function WordCamp(year){
this.year = year;
this.yellOut = function(){
console.log("Yay! it is WC "+ this.year);
}
}
var wc2012 = new WordCamp(2012);
wc2012.yellOut(); // Yay! it is WC 2012

var wc2011 = WordCamp(2011);
wc2012.yellOut(); // Undefined
yellOut(); // Yay! it is WC 2011

FUNCTION DECLARATION
function say() {
var a=3;
console.log(a);
}
say();

FUNCTION EXPRESSION
var say = function(){
var a=3;
console.log(a);
}
say();

function say(func) {
var a=3;
func(a);
}
say(console.log);

SEE, I CAN PASS FUNCTIONS
function say(func) {
var a=3;
func(a);
}
say(function(name){alert(name)});

EVEN FUNCTIONS WITHOUT A NAME

CODE TWISTERS
function foo(){
function bar() {
return 3;
}
return bar();
function bar() {
return 8;
}
}
alert(foo());

Output : 8

CODE TWISTERS
function foo(){
var bar = function() {
return 3;
};
return bar();
var bar = function() {
return 8;
};
}
alert(foo());

Output : 3
Code examples from http://javascriptweblog.wordpress.com/

THINGS MIGHT JUST GO WRONG
function getTenFunctionsBad() {
var result = [];
for (var i = 0; i < 10; i++) {
result.push(function () {
return i;
});
}
return result; }
var functionsBad = getTenFunctionsBad();
for (var i = 0; i < 10; i++) {
console.log(functionsBad[i]()); }

10 , 10 , 10 , 10 , 10 , 10 , 10 , 10 , 10 , 10

BUT WE CAN FIX THEM
function getTenFunctions() {
var result = [];
for (var i = 0; i < 10; i++) {
result.push((function (i) {
return function () {
return i;
}
})(i)); }
return result; }
var functions = getTenFunctions();
for (var i = 0; i < 10; i++) {
console.log(functions[i]()); }
0 , 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9

OK! LET'S TALK ABOUT WORDPRESS

add_action('wp_head', 'add_my_script');

function add_my_script() {
?>
<script type="text/javascript"
src="<?php bloginfo('wpurl'); ?>/wp-content/plugins/my-plugin/jquery.js"></sc
ript>

<script type="text/javascript"
src="<?php bloginfo('wpurl'); ?>/wp-content/plugins/my-plugin/my-script.js"><
/script>

<?php
}

LET'S DO IT LIKE THE PRO'S
wp_register_script
wp_deregister_script
wp_enqueue_script
wp_dequeue_script

WP_REGISTER_SCRIPT @COD EX

Yo WP! Remember this script

(
$handle, //name of the script
$src, // url to script
$deps, // array of dependencies
$ver, //version of code
$in_footer // place in footer?
);

WP_REGISTER_SCRIPT - EXAMPLE
wp_register_script (
'mytheme-custom', // handle WP will know JS by
get_template_directory_uri() . '/js/custom.js',
array('jquery'), // requires jQuery
1.0, // version 1.0
true // can load in footer
);

Don't hardcode. Use plugins_url or
get_template_directory_uri

Many predefined libraries @codex

WP_DEREGISTER_SCRIPT @COD EX

Yo WP! forget about this script
wp_deregister_script('jquery');

WP_ENQUEUE_SCRIPT @COD EX

Yo WP! Please put the script in my page

wp_enqueue_script( $handle , $src , $deps ,
$ver , $in_footer );

A LITTLE COMPLEX EXAMPLE
function my_scripts_method() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/
jquery.min.js');
wp_enqueue_script( 'jquery' );
}

add_action('wp_enqueue_scripts', 'my_scripts_method');

Use jQuery from google CDN instead of WordPress local

WP_DEQUEUE_SCRIPT @COD EX

Hey WP! Someone put this script in my page, remove it please
wp_dequeue_script($handle);

EXAMPLE
wp_register_script( 'jquery.flexslider',
get_template_directory_uri().'/js/flex.js',
array('jquery'), '1.7', true );
wp_register_script( 'home-page-slider',
get_template_directory_uri().'/js/slider.js',
array('jquery.flexslider'), '1.0', true );
if ( is_front_page() ) {
wp_enqueue_script('home-page-slider');
}

WP_LOCALIZE_SCRIPT @COD EX

Send data from WordPress to JavaScript
wp_localize_script( $handle, $object_name, $l10n );

SIMPLE EXAMPLE
wp_enqueue_script( 'some_handle' );
$translation_array = array( 'some_string' => __( 'Some string to translate' ), 'a_val
ue' => '10' );
wp_localize_script( 'some_handle', 'object_name', $translation_array );

console.log(object_name.some_string);

WP_LOCALIZE_SCRIPT EXAMPLE
wp_localize_script(
'simplecatch_custom_slider', 'js_value',
array(
'transition_effect' => $transition_effect,
'transition_delay' => $transition_delay,
'transition_duration' => $transition_duration
));

AJAX IN WP
require_once( "../../../../wp-config.php" );
// or require_once( "../../../../wp-load.php" );

PLEASE DON'T TRY THIS AT HOME!

WP_AJAX_(ACTION) @COD EX

jQuery.post(
MyAjax.ajaxurl,
{
'action':'add_foobar',
'data':'foobarid'
},
function(response){
alert('The server responded: ' + response);
}
);

WP_AJAX_(ACTION)
add_action('wp_ajax_add_foobar',
'prefix_ajax_add_foobar');

function prefix_ajax_add_foobar() {
//Do Something really awesome here :)
exit;
}

SUMMING UP
var
this
functions awesomeness
use wordpress helper functions

WHAT NEXT
"use strict"
closures
functional programming
more quirks : JS Garden
“ Go make something awesome! ”

THE END :'(
- AVINASH KUNDALIYA / @HARDFIRE

Avinash Kundaliya: Javascript and WordPress

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to Avinash Kundaliya: Javascript and WordPress (20)

More from wpnepal (18)

Recently uploaded (20)

Avinash Kundaliya: Javascript and WordPress