var vs. let vs. const Compared in JavaScript – When and How to Use Each One

var vs. let vs. const Compared in JavaScript – When and How to Use Each One

Most JavaScript developers are familiar with the var keyword as well as the newer additions of “let” and “const” to the language.  In this video we compare var, let and const.

You can see the chart referenced in the video found below:

var let const in JavaScript for WordPress Master Course

To Learn More

For more lessons on how JavaScript works, check out the JavaScript for WordPress Master Course.

An Introduction to “this” and Binding “this” in JavaScript – 3 FREE Videos

An Introduction to “this” and Binding “this” in JavaScript – 3 FREE Videos

An Introduction to "this" in JavaScript with Zac Gordon

One of the important essentials of more advanced JavaScript is how the keyword “this” works in different contexts.

In the three videos below we explore how this works, how you can bind it, and an example of when you might want to bind this in your own code.

An Introduction to Keyword “this” in JavaScript

In this first lesson we introduce what this is, how it works by default, and when it looses its binding.

You may also want to look into the Mozilla Documentation for this in JavaScript.

 

Binding “this” in JavaScript

In this next lesson we look at how you can explicitly bind an object to this with the use of .call(), .apply(), and .bind().

Here again are the Mozilla Docs that also reference .call(), .apply(), and .bind().

 

Example of Binding “this” with .addEventListener()

In this final video we give a practical example of when you might want to explicitly bind this to an object.  That is when using Event Listeners.

Here is the example code used in the video above.

 

Taking Things Further

In the JavaScript for WordPress Master Course we dive deep into learning JavaScript.  In fact, this introduction to “this” above is just that, an introduction.

If you would like to learn JavaScript more deeply, check out the JavaScript for WordPress Master Course.

Project Introduction – A Decoupled WP Powered JavaScript Site

Project Introduction – A Decoupled WP Powered JavaScript Site

In this lesson we introduce a project to pull together everything we have learned.  Try working out what you can on your own using your understanding of the WordPress REST API and JavaScript.

Project Goals:

  • Make Decoupled HTTP Requests with JavaScript
  • Use Endpoints: post, category, tag, comment, user, page, and media
  • Include use of links, embeds and arguments
  • Build a site similar to the demo (or your own design)
  • Architect as a Single Page Web App

Notes:

Decoupled WordPress REST API Calls with Vanilla JavaScript, fetch and webpack

Decoupled WordPress REST API Calls with Vanilla JavaScript, fetch and webpack

This video is an excerpt from the JavaScript for WordPress Master Course.  In this lesson we look at how to make decoupled HTTP calls to the WordPress REST API using native JavaScript and the fetch API along with webpack to handle polyfill imports.

To Setup

  • Download example files below
  • Run npm install
  • Update apiRoot in src/index.js to your own API enabled WP site
  • Run npm start
  • Open https://localhost:9000 in browser

Resources

Learn More

Want to learn the WordPress REST API and JavaScript in more depth?  Reserve a seat in the JavaScript for WordPress Master today!

A Deeper Look at HTTP (for WordPress REST API Users)

A Deeper Look at HTTP (for WordPress REST API Users)

HTTP is one of the important protocols underlying the WordPress REST API and the web at large.  In this ~20 minute video we go over all the important aspects of HTTP that you should know about as you prepare to work with the WordPress REST API or any other APIs using JavaScript or other languages.

Some Important Terms:

  • Hypertext Transfer Protocol (HTTP) – A standard for making requests and responses between clients and servers.
  • HTTP Clients – Applications like web browsers or JavaScript apps that make requests to web servers.
  • HTTP Servers – Computers running software like Apache or NGIX that understand HTTP requests and responses.
  • HTTP Requests – Made from a client to a server. Several Request Methods like GET, POST, PUT, DELETE are available. More than just requesting information, can also do things like post new posts or pages in the case of WordPress or edit existing content.
  • HTTP Responses – Made from a server to a client in response to a request.
  • HTTP Messages – The bundle of data passed in requests and respones are referred to as messages. Includes [1] Request or Status Line, [2] Headers, [3] Message Body (optional)
  • HTTP Request Line (w Requests) – Includes the Request Method (GET, HEAD, POST, PUT, DELETE, CONNECT, OPTIONS, TRACE), the URI of the page or resource you want to access and the HTTP Version (1.1 is most common, although 2.0 was standardized in 2015 though not fully implemented across the web). This line is only included if we are sending a request.Example: GET javascriptforwp.com HTTP/1.1
  • HTTP Status Line (w Responses) – Includes: HTTP Version, Status Code (1XX informational, 2XXX success, 3XX redirect, 4XX client error, 5XX server error)Examples:
    HTTP/1.1 200 OK
    HTTP/1.1 404 Not Found
  • HTTP Headers – Includes metadata for each request and response sent.  Standard header fields (or metadata options) exist and custom header fields can be created as well.
  • HTTP Message Body – Optional data passed along with a request or response.  For a POST request it could be the new post information like title and content.  For a response we might get an HTML webpage or media asset or JSON in the case of the WP API.

A Brief History of HTTP

  • 1989 – Tim Berners-Lee and his team at CERN
    – Started with ability for a client to send a GET request to a server
    – HTML created at same time as a markup language text sent via HTTP (and we see CSS, and JavaScript come out of this birth as well)
  • 1991 – V 0.9
  • 1996 – V 1.0 – Opened a new connection for each request
  • 1997 – V 1.1 – Allowed for single connection to be used for multiple requests
  • 2015 – V 2.0 – Streams and Multiplexing

To Learn How to Make HTTP Requests

In the JavaScript for WordPress Master Course we learn about how to make all sorts of HTTP requests to the WordPress REST API using the browser, Postman, JavaScript, PHP and the Command Line.

An Introduction to the VanillaPress Project – A mock WordPress front and back end using Native JavaScript

Introducing VanillaPress

After covering an Introduction to JavaScript, JavaScript Language Basics, The DOM, Events, JSON and Local Storage we finally get around to building our first major project, VanillaPress.

VanillaPress is a single page web app that displays posts and pages from a JSON file and even lets you edit and save content to local storage with a Customizer like editor.

In this short video we introduce the app.

 

Reverse Engineering VanillaPress V0.1

Now that we have introduced the app we introduce the first major task of the course. Try to reverse engineer VanillaPress V0.1, building out the displaying of a blog post listing page and single page views all based on a single JSON file.

 

Taking it Further with JavaScript

If you have figured out how to build out the blog post section of VanillaPress, keep going and build out the rest of the app as introduced in the first video.

In this JavaScript for WordPress Master Course we go in depth into how to build out VanillaPress using best practices like MVC architecture, routing to map URLs to content and views, and eventually how to leverage JavaScript development tools and the latest ES6 JavaScript.

To learn more about building projects like VanillaPress, save a seat in the next JavaScript for WordPress Master Course enrollment period.

An Introduction to Local Storage with JavaScript

Local Storage Basics

Local storage allows us to store JSON data about our app, site or plugin in the user’s browser and access it for faster loading, custom information and offline content.

Support for local storage comes native with the DOM and JavaScript using the following simple commands:

  • localStorage.setItem()
  • localStorage.getItem()
  • localStorage.removeItem()

It is important to remember to pass in valid JSON as well as parse the JSON back out into a native JavaScript object before you use in your app. Often folks save the parsed content as store in their apps.

Watch the Video

In this video we look at how to add, edit and delete local storage information. Follow along and see how simply you can integrate local storage into your app.

Taking Local Storage Further

In this JavaScript for WordPress Master Course we use local storage again and again when building JavaScript apps with and without WordPress.

To learn more about working with JSON and Local Storage save a seat in the next JavaScript for WordPress Master Course enrollment period.

DOM Event Propagation with JavaScript – Capturing and Bubbling Explained

Basic Terms Explained

Event propagation is an important yet little understood topic. In this post and related video we will go in depth into event propagation, explaining the terms capturing and bubbling and showing examples of when and how to use each.

  • Event propagation – An overarching term that includes the three different phases of DOM Events: capturing, targeting and bubbling.
  • Capturing Phase – When an event occurs in the DOM, notification of the event is passed starting at the top of the DOM tree and passing down through all parent element nodes all the way to the target node where the event occurred.
  • Target Phase – After the capturing phase occurs, the Target phase occurs. The target phase only includes a notification of Node where the event took place.
  • Bubbling Phase – This is the final phase to occur, although many people think this is the first phase. In the bubbling phase a notice is passed from the target Node up through all of the parent Nodes all the way back to the top root of the DOM.

Event Propagation, Capturing and Bubbling Video

Code Samples Used: Download

Taking it Further with Learning JavaScript

Now that you have learned the basics of event propagation it is important for you to build out a demo like the one you have seen in the video above.

If this content was a little advanced for you, you can go back and watch our Introduction to JavaScript Events video. Or if you’re looking to take things further, check out our Local Storage video.

To take your learning even further, reserve a seat for the JavaScript for WordPress Master Course. We cover everything you need to know about Events and much much more!!!

Introduction to Events in the DOM with JavaScript

Some of What DOM Events Can Do

DOM events allow us find out when certain actions take place and then run our own code. Some common type of DOM events include:

  • Mouse events like onclick, on mouse over
  • Keyboard events on for figuring out what keys are pressed and when
  • Form elements like on submit, focus or change
  • Media events like onplay, on pause, on onseeked
  • Drag events like ondrag, ondragenter, ondrop
  • General object events like onload, onresize, onscroll
  • Other – clipboard, print, touch, transition, speech recognition

In this overview video we look at demos of the different types of events you can work with in the DOM API using JavaScript.

Watch the Demos

 

Download the Demo Code

Taking it Further with Learning JavaScript

This video introduces a number of different types of Events in JavaScript that this JavaScript for WordPress Master Course goes into much more depth with.

If you are looking for a more advanced JavaScript Events video, check out our post on Event Propagation with Capturing and Bubbling.

To take your learning even further, reserve a seat for the JavaScript for WordPress Master Course. We cover everything you need to know about Events and much much more!!!

Creating and Adding Text and Element Nodes to the DOM

Creating Nodes in the DOM

In the JavaScript for WordPress Course, Part 1 on Learning JavaScript Deeply, we explore the DOM in depth, looking at the relationship between Nodes and DOM. Check out our Introduction to the DOM video if you are new to the DOM.

Once we cover how to work with Nodes, we show how we can create our own Text and Element Nodes and append them to each other to build more complex Node clusters. Watch the videos below to learn how to do this with JavaScript and the DOM.

 

Adding Nodes to the DOM

Now that we have looked at how to create nodes and append them to each other we can move on to looking at how to add our created elements into the DOM using the same techniques used for appending nodes to each other.

This is the point in working with the DOM where we can finally start adding our own content and building webpages dynamically.

Taking it Further with Learning JavaScript

Once you know how to work with creating and adding DOM nodes, it’s a good idea to move on to Working with Events.

If this content was a little advanced for you, you may also want to go back and look at our Introduction to the DOM video

To take your learning even further, reserve a seat for the JavaScript for WordPress Master Course. We cover everything you need to know about the DOM and much much more!!!