![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”];](https://image.slidesharecdn.com/javascript-beyond-jquery-171111161347/75/Javascript-Beyond-jQuery-4-2048.jpg)
Javascript - Beyond-jQuery
- 1. Javascript * BeyondjQuery * TannerMoushey, @tannermoushey https://iwitnessdesign.com/wcdfw
- 2.
- 3.
- 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 functioninit(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.
- 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 ScriptResult <script> var object_name = { some_string: 'Some string to translate', a_value: '10' }; </script> <script> console.log(window.object_name.some_string); </script>
- 13.
- 19.
- 20. Debugging // Prints tothe 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.
- 23. ES6 (ECMAScript 2015) NewSyntax: let x; const x = 'something'; var x; // Arrow function. () => { // statements }
- 24. ES6 (ECMAScript 2015) ES6Javascript can be used today! But first you need a compiler. Use babeljs directly or Laravel Mix (which uses Babel).
- 25. Resources • Javascript forWP (Zac Gordon) • jsperf.com • developer.mozilla.org • codecademy.com • caniuse.com • Laravel Mix • laracasts.com
- 26. Tanner Moushey CEO, Lead Developer iWitnessDesign slides: iwitnessdesign.com/wcdfw @tannermoushey tanner@iwitnessdesign.com