In past episodes, we talked about caching a collection of elements to avoid multiple returns to the DOM to fetch the elements. Let’s talk about it now in the context of the script you are writing. You’ll see an additional “why” of caching.
Labs
Labs are hands-on coding projects that you build along with Tonya as she explains the code, concepts, and thought processes behind it. You can use the labs to further your code knowledge or to use right in your projects. Each lab ties into the Docx to ensure you have the information you need.
Each lab is designed to further your understanding and mastery of code. You learn more about how to think about its construction, quality, maintainability, programmatic and logical thought, and problem-solving. While you may be building a specific thing, Tonya presents the why of it to make it adaptable far beyond that specific implementation, thereby giving you the means to make it your own, in any context.
Scope
Scoping deals with who has access to the memory. Every language provides scoping rules. JavaScript is different from PHP. Let’s talk about scoping for JavaScript.
jQuery’s $
The variable $ does not have context and does not natively mean jQuery. It can also stand for Mootools and any value. You need to specifically initialize jQuery to the $ variable. Let’s talk about it in relationship to the IIFE. I’ll show you how to pass jQuery into the IIFE (yes, you can pass in objects) and then assign it to the variable for use within the IIFE’s scope.
Meet the IIFE
IIFE stands for Immediately Invoked Function Expression and is pronounced as “iffy.” Let’s talk about what it is, why and when you want to use it, and then how to write it. You’ll learn about scope too.
Declaring Functions
JavaScript has different approaches to declaring and defining functions: constructor, expression, anonymous, named, etc. Let’s take a look at the most popular that you’ll likely see.
Loading Scripts
Let’s get out of the browser’s console and write your first script. In this episode, you will simply create a script file and then learn how to load that file into the DOM through WordPress. Yes, you will learn about enqueuing script files using the WordPress event wp_enqueue_scripts and its function wp_enqueue_script. Psst…if you need to learn about WordPress’ event-driven engine (you know that thing in Core that handles hooks/filters), go take this hands-on lab. Get the Sandbox Plugin
Basic Events
JavaScript provides plenty of event handlers. jQuery provides you with the sugar to work with key presses, mouse clicks, bindings, and more. Let’s take a look at clicks. You’ll learn about and write code for the click event using both .on() and .click().
Data Types
Let’s do a quick review of data types in JavaScript. We’ll talk about primitive types (string, number, boolean, undefined, and null) as well as objects and arrays. You will learn: JavaScript is a loosely typed (dynamic) language, meaning the data type is assigned by its value Changing data types Checking what the data type is with typeof Arrays and Objects For a more in-depth lesson on data types, make sure you sign up for JavaScript for WordPress and/or MDN JavaScript data types and data structures.
Variables
With all programming languages, you need a way to store a value in a variable, in order to work with that value. JavaScript provides variables for you. Let’s talk about how to declare and use variables. You will use the var variable statement to declare variables. You get to play around with changing (manipulating) the DOM to set different CSS styles to elements. You’ll learn about: The difference between “declaring” and “initializing” variables Browser’s console retains code in memory – until you refresh Why does the console show “undefined?” Optimizing by assigning a DOM lookup to a variable What JavaScript […]
Basic Animation Effects
I bet you’d like to animate an element to increase the front-end interactive. In this episode, you will work with various jQuery effect commands including: hide() show() slideUp() slideDown() You’ll see how to change the duration, which changes the speed of the effect.