Javascript - Beyond-jQuery

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

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”];

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

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);
}

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 ﬁnd out about the
terriﬁc 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);

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

Variable Scope (Private)
<script>
(function() {
// Counter 1
var x = 0;
}, 1000)
})();
</script>
<script>
(function() {
// Counter 2
var x = 0;
}, 1000)
})();
</script>

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' );

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>

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

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);

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

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

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

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

Javascript - Beyond-jQuery

More Related Content

What's hot

Similar to Javascript - Beyond-jQuery

Recently uploaded

Javascript - Beyond-jQuery