JavaScript Essentials for PHP Developers

There are a lot of similarities, and of course differences, between JavaScript and PHP. Let's begin this course with the fundamentals: code structure, syntax, and a little scope.

JavaScript is a typed language, but it is much looser than PHP. In this episode, we'll go over JavaScript's built-in types and how they differ from PHP.

JavaScript's operators are, for the most part, reminiscent of PHP's, though there are notable differences. Let's explore what JavaScript has to offer.

JavaScript's and PHP's decision and loop structures are almost identical (they are C-based languages, after all). But JavaScript has a few extra kinds of loops. Let's look at them.

Functions are first-class citizens in JavaScript, and you can create functions in a variety of different ways. Let's look at how.

JavaScript gives us many ways to create variables, and how we create them determines their scope. In this episode, I'll show you how to create variables and how it affects your code.

Arrays are a special object in JavaScript that lets you store a collection of values. In this episode, you'll learn how to create arrays, access their contents, and add elements to them.

JavaScript is an object-oriented language, and almost everything you work with in JavaScript are objects. Let's learn how to create them and populate them.

Modern JavaScript uses the pattern of passing objects to functions, instead of passing multiple parameters. It's a different way of thinking, and it has a lot of benefits. Let's look at how.

JavaScript gives us the ability to extract specific information from an object without having to write a lot of code. Let's look at the destructuring syntax.

There are many creational patterns that JavaScript developers use to create objects, but the two primary patterns are factories and classes. Let's look at how to use them.

JavaScript classes can have static members, and defining them is very similar to PHP. Classes and objects can also have property accessors, giving you complete control over how external code accesses an object's data.

this can be a confusing topic, especially considering the dynamic nature of this in JavaScript. But it all comes down to context, and the context a method executes in.

Before we can manipulate the content in a web page, we have to find the elements that we want to change. In this episode, I'll show you the three primary methods we use to find elements.

The DOM provides the objects, properties, and methods we need to create elements and content. It's worth knowing how to create nodes in the DOM, even if it is verbose.

Events are the driving force of every graphical application, and you can set up a multitude of events on various objects in the page. I'll show you two ways to do that.

Forms are the primary way we get input from the user. In this episode, I'll show you how to work with input elements.

The DOM provides several ways to interact with 'select' elements, offering the flexibility needed to work with the data. In this episode, you'll learn not only how to work with select elements but also how to access custom data attributes.

Radio buttons are unique because they are always used in groups, which could complicate things. However, in this episode, you'll learn how the DOM handles most of the work when it comes to getting the value of a radio button group.

Checkboxes are very similar to radio buttons, but they're much easier to work with. They're either checked or they're not—simple as that. In this episode, you'll learn how to work with checkboxes and handle them effectively in your forms.

We sometimes want to filter user input to prevent unwanted characters in a textbox. While the input event is typically used for this purpose, in this episode, you'll learn about the three keyboard events and when to use each.

The DOM gives us various ways to change the style of elements. You've learned about the className property. Now you'll learn about the style and classList properties.

Developing for the browser is very different than writing procedural code. We need to start thinking in terms of events driving our application, and thus we need to refactor.

The user experience (UX) is the most important part of developing graphical applications. Our game needs some help in that department; so, let's add some improvements.

A big part of client-side development is updating the UI based on different application states. Disabling a form is a common task, but it's not always as straightforward as it seems. In this episode, you'll learn how to do it properly.

Callback functions are a common part of JavaScript development. Let's take a look at how to use them in our own code.

Custom events let you create and dispatch your own events in the browser, making it easy to signal when something important happens in your code. You'll learn how to dispatch your own custom events in this episode.

Event bubbling is the process where an event starts at the target element and works its way up through its ancestors in the DOM tree. This allows parent elements to listen for events that happen deeper inside their children without attaching a bunch of separate listeners.

JavaScript modules are separate files where your code stays private unless you choose to share it. You'll learn how to create modules and export/import objects in this episode.

JSON is a simple way to store and share data as text using key-value pairs, kind of like a lightweight dictionary. It's easy to use, and you'll learn how in this episode.

Every modern browser lets you save data that persists between page loads. No, not cookies (thank goodness!). They're the storage objects, and you'll learn how to use them in this episode.

Promises make asynchronous code in JavaScript more readable, predictable, and powerful — no more callback hell. In this episode, we'll break down what a Promise really is, how to use then() and catch(), and why they're essential for modern web apps.

Async/await is syntactic sugar that makes working with Promises feel like writing regular, synchronous code. In this episode, we will demystify how it works, when to use it, and why it makes your async code easier to read and reason about.

Need to grab data from an API or just a web server? In this episode, you'll learn how to use JavaScript's fetch() function with async/await to make clean, readable GET requests.

The fetch() API gives you the ability to make any valid HTTP request. In this episode, you'll learn how to send POST requests with a FormData body and a JSON body.