Most developers have some experience with jQuery, but few of them understand the principles of Javascript and how to write and debug Javascript code. This session will cover best practices for writing object-oriented Javascript, benchmarking, and debugging.

1. Javascript
* BeyondjQuery *
Tanner Moushey, @tannermoushey
https://iwitnessdesign.com/wcdfw

2. WhyJavascript?

3. Javascript 101

4. Variables
var text = "YOLO!"; // string variable
window.$body = jQuery("body"); // Global variable
// Initialize an object
var myObject = {
titleEl : ‘h1',
sectionNameEl: 'h3',
color : "blue"
};
// Initialize an array
var myArray = [“item 1", “item 2”];

5. Functions
// Standard function
function init(title) {
// statements
}
init();
// Anonymous function. Runs automatically
(function(title) {
// statements
})();
// Arrow function.
() => {
// statements
}

6. Functions
function Person () {
var that = this;
that.age = 0;
setInterval(function growUp () {
// The callback refers to the `that` variable of which
// the value is the expected object.
that.age++;
}, 1000);
}
function Person () {
this.age = 0;
setInterval(() => {
this.age++; // |this| properly refers to the person object
}, 1000);
}

7. The DOM
var titleEl = document.createElement('h1'),
title = document.createTextNode('Welcome to WordCamp DFW!'),
pEl = document.createElement('p'),
aEl = document.createElement('a'),
linkText = document.createTextNode('Click here to find out about the
terrific speakers');
titleEl.appendChild(title);
aEl.href = "https://2017.dfw.wordcamp.org/speakers/";
aEl.target = "_blank";
pEl.appendChild(aEl)
.appendChild(linkText);
document.body.appendChild(titleEl);
document.body.appendChild(pEl);

8. Variable Scope (Global)
<script>
// Counter 1
var x = 0;
setInterval(function() {
console.log( 'Counter 1: ' + x ++ );
}, 1000)
</script>
<script>
// Counter 2
var x = 0;
setInterval(function() {
console.log( 'Counter 2: ' + x ++ );
}, 1000)
</script>

9. Variable Scope (Private)
<script>
(function() {
// Counter 1
var x = 0;
setInterval(function() {
console.log( 'Counter 1: ' + x ++ );
}, 1000)
})();
</script>
<script>
(function() {
// Counter 2
var x = 0;
setInterval(function() {
console.log( 'Counter 2: ' + x ++ );
}, 1000)
})();
</script>

10. WordPress +JS

11. WP Localize Script
<?php
// Register the script
wp_register_script( 'some_handle', 'path/to/myscript.js' );
// Localize the script with new data
$translation_array = array(
'some_string' => __( 'Some string to translate',
'plugin-domain' ),
'a_value' => '10'
);
wp_localize_script( 'some_handle', 'object_name',
$translation_array );
// Enqueued script with localized data.
wp_enqueue_script( 'some_handle' );

12. WP Localize Script Result
<script>
var object_name = {
some_string: 'Some string to translate',
a_value: '10'
};
</script>
<script>
console.log(window.object_name.some_string);
</script>

13. NameThat Browser!

19. Debugging

20. Debugging
// Prints to the Dev Console
console.log( ‘Console message.' );
// Show JS popup and pause execution
alert( 'Pop up an alert modal' );

21. Debugger;
titleEl.appendChild(title);
aEl.href = “https://2017.dfw.wordcamp.org/speakers/";
aEl.target = "_blank";
// pauses the code execution
debugger;
pEl.appendChild(aEl).appendChild(linkText);
document.body.appendChild(titleEl);

22. Further Learning

23. ES6 (ECMAScript 2015)
New Syntax:
let x;
const x = 'something';
var x;
// Arrow function.
() => {
// statements
}

24. ES6 (ECMAScript 2015)
ES6 Javascript can be used
today! But first you need a
compiler.
Use babeljs directly or
Laravel Mix (which uses
Babel).

25. Resources
• Javascript for WP (Zac Gordon)
• jsperf.com
• developer.mozilla.org
• codecademy.com
• caniuse.com
• Laravel Mix
• laracasts.com

26. Tanner
Moushey
CEO, Lead Developer
iWitness Design
slides:
iwitnessdesign.com/wcdfw
@tannermoushey
tanner@iwitnessdesign.com