Browse all JavaScript lessons.

showing All 520 lessons...

Hoisting in JavaScript

P

NW.js Basics: Overview of the Window and Manifest

P

The "this" keyword: Introduction and Implicit Binding

P

Animating with Canvas

P

The Factory Pattern for Javascript Modules

P

Refactoring: Array.prototype by example [filter, some, forEach]

P

The Module Pattern in Javascript (aka Immediately-Invoked Function Expression aka IIFE)

P

Your first NW.js desktop application in less than 5 minutes

P

Introduction to apiCheck.js

P

Listening for Mouse and Keyboard Events with HTML Canvas

P

Riot JS - Repeating Elements with Each Attribute

P

Riot JS - Scoped CSS and Toggled Classes

P

Riot JS - DOM Events

P

Riot JS - Tag Life Cycle Hooks

P

Canvas and Pixels

P

Riot JS - Tag Options

P

Riot JS - Getting Started with this React-like micro-library

P

Canvas Transformations

P

Advanced Flattening

Interactive Leaflet Maps with GeoJSON data

P

Canvas Effects

P

Webpack CSS, Preprocessors, and url assets

P

Lodash - sortBy and sortedIndex

P

HTML Canvas and Images

P

Webpack Loaders, Source Maps, and ES6

P

Adding Shapes to Maps with Leaflet and GeoJSON

P

Intro to Webpack

P

Drawing Text on Canvas

P

Lodash: Refactoring Simple For Loops

P

Simple drag and drop with Observables

Using the map method with Observable

Introducing the Observable

Create an Array concatAll method

Chaining the Array map and filter methods

The Array filter method

The Array map method

The Array forEach method

Get Started with LeafletJS Mapping

P

Gradient Fills on the HTML5 Canvas

P

Drawing Styles on HTML5 Canvas

P

Drawing Paths - Curves and Arcs

P

Drawing Paths - Lines and Rectangles

Introduction to the HTML Canvas element

Object Enhancements in ES6

P

Editing breakpoints in Chrome devtools

P

Using the ES6 spread operator

P

Shorthand Properties in ES6

P

Introduction to Lodash

P

Cleaning your build folder with grunt-contrib-clean

P

Minifying your output with grunt-uglify

P
js tutorial about Hoisting in JavaScript

Hoisting in JavaScript

3:39 js PRO

In this lesson, we'll walk through variable, function declaration, and function expression hoisting.

js tutorial about NW.js Basics: Overview of the Window and Manifest

NW.js Basics: Overview of the Window and Manifest

3:08 js PRO

Here we modify the manifest to configure the root NW.js browser window. This is the first step to make the app feel native and "desktoppy."

js tutorial about The "this" keyword: Introduction and Implicit Binding

The "this" keyword: Introduction and Implicit Binding

5:58 js PRO

In this lesson we introduce the "this" keyword in JavaScript as well as talk about "implicit binding" or the first rule in discovering what the "this" keyword is referencing.

js tutorial about Animating with Canvas

Animating with Canvas

9:18 js PRO

In this lesson, we cover several different ways to animate graphics drawn to Canvas.

js tutorial about The Factory Pattern for Javascript Modules

The Factory Pattern for Javascript Modules

3:15 js PRO

Javascript modules are a great way to isolate your code, but they are not very re-usable. If we implement the factory pattern inside of one of our modules we get code re-use without losing the encapsulation benefits of a javascript module.

js tutorial about Refactoring: Array.prototype by example [filter, some, forEach]

Refactoring: Array.prototype by example [filter, some, forEach]

5:42 js PRO

Refactoring is a great opportunity to learn and we have an existing Javascript function that is lengthy, hard to understand, and overcomplicated. We'll take a look at putting some of Javascript's built in Array.prototype methods to use to help us clean this up and learn by example through refactoring.

By taking a few minutes to refactor this existing code, we can get a glimpse at how we can harness the power of the Array and lean on some built in Array functions available to us in Javascript's core without any added utility libraries.

In this lesson we touch on just a few of the Array methods:

js tutorial about The Module Pattern in Javascript (aka Immediately-Invoked Function Expression aka IIFE)

The Module Pattern in Javascript (aka Immediately-Invoked Function Expression aka IIFE)

5:05 js PRO

Javascript modules are a design pattern that allow you to encapsulate your code into smaller self managing pieces. They help you separate your code, protect your variables, and provide an easy way to expose only the parts of your component that you want to be exposed.

js tutorial about Your first NW.js desktop application in less than 5 minutes

Your first NW.js desktop application in less than 5 minutes

3:42 js PRO

NW.js can be an invaluable tool for building cross-platform desktop applications with javascript and html. In this lesson, we build a simple NW.js app that will act as the starting point to a much bigger application! In less than five minute, no less. :)

js tutorial about Introduction to apiCheck.js

Introduction to apiCheck.js

3:52 js PRO

Because JavaScript is a typeless language, validating your api is a terrific way to help avoid bugs and instruct users of your API without requiring them to check documentation. See how api-check can help you do this. If you're familiar with ReactJS propTypes, this will be familiar to you.

js tutorial about Listening for Mouse and Keyboard Events with HTML Canvas

Listening for Mouse and Keyboard Events with HTML Canvas

10:40 js PRO

In this lesson, listening for and handling mouse and keyboard events in Canvas is covered.

js tutorial about Riot JS - Repeating Elements with Each Attribute

Riot JS - Repeating Elements with Each Attribute

4:01 js PRO

It's easy to repeat over a collection and render many elements. Riot works very similar to Angular and has various syntaxes for it's each attribute. We'll look at the typical syntax for arrays, a shortened syntax, and an object key/value syntax.

js tutorial about Riot JS - Scoped CSS and Toggled Classes

Riot JS - Scoped CSS and Toggled Classes

2:41 js PRO

Riot takes a 'keep your styles close' approach with custom tags. You are encouraged to place your styles for a tags element right inline with the html and javascript. Learn how riot parses the inline styles as well as ways to keep your styles from bleeding out to the rest of your app. Scoped styles provide great isolation for your custom tag. Use the class attribute's special binding syntax to easily add and remove a class based on an expression.

js tutorial about Riot JS - DOM Events

Riot JS - DOM Events

2:49 js PRO

Riot can listen for raw dom events on any element by adding the on* attribute to elements and referencing an event handler. Let's walk through a couple examples.

js tutorial about Riot JS - Tag Life Cycle Hooks

Riot JS - Tag Life Cycle Hooks

2:48 js PRO

Every tag in Riot has a lifecycle. I'll explore the three hooks: mount, update, and unmount while adding an animation feature for an existing tag. Lifecycle hooks are important for setting up, tearing down, and keeping a tag's view up to date after external logic is run.

js tutorial about Canvas and Pixels

Canvas and Pixels

10:38 js PRO

In this lesson, you'll learn how to read and write individual pixel color values from a canvas.

js tutorial about Riot JS - Tag Options

Riot JS - Tag Options

2:20 js PRO

Tag Options allow you to abstract your custom tag elements into reusable objects by allowing the tag-user to specify the dynamic parameters of their component.

js tutorial about Riot JS - Getting Started with this React-like micro-library

Riot JS - Getting Started with this React-like micro-library

2:43 js PRO

Getting started with Riot JS. We'll discuss riot's compile and mount process and build a small hello world component with simple data-binding.

js tutorial about Canvas Transformations

Canvas Transformations

8:44 js PRO

Transformations can change the default canvas coordinate system and create complex drawings with much less code.

js tutorial about Advanced Flattening

Advanced Flattening

11:58 js

In this lesson we solidify our understanding of how to flatten collections. This is perhaps the most important skill when learning to program without loops. We will try our hand at flattening not just a two dimensional collection, but a three-dimensional collection. Later on it will become clear how these skills relate to asynchronous programming.

js tutorial about Interactive Leaflet Maps with GeoJSON data

Interactive Leaflet Maps with GeoJSON data

3:53 js PRO

Rendering GeoJSON data on a map and interacting via mouse over, mouse out, and click.

js tutorial about Canvas Effects

Canvas Effects

7:14 js PRO

Learn some of the different ways you can affect the graphical content that you are drawing to a canvas. We'll cover global alpha, global composite operations and shadows.

js tutorial about Webpack CSS, Preprocessors, and url assets

Webpack CSS, Preprocessors, and url assets

7:09 js PRO

Webpack enables modularity by allowing you to require the styles needed for a particular component. Adding preprocessors is a breeze and it simplifies the deployment of your css assets.

js tutorial about Lodash - sortBy and sortedIndex

Lodash - sortBy and sortedIndex

3:38 js PRO

Lodash's "sortBy" method helps you sort data in your collections and "sortedIndex" helps you find where to place new data. In this video, John walks you through how to use each of these methods and how they can work together.

js tutorial about HTML Canvas and Images

HTML Canvas and Images

6:50 js PRO

In addition to vector drawing, you can draw bitmap images into a canvas, and also retrieve a bitmap based on the content in a canvas.

js tutorial about Webpack Loaders, Source Maps, and ES6

Webpack Loaders, Source Maps, and ES6

5:03 js PRO

Webpack loaders are how you tell webpack to resolve your dependencies and you can use a loader built for the babel transpiler to easily enable ES6 code in your project. Full sourcemap support is also available using webpack's devtool property.

js tutorial about Adding Shapes to Maps with Leaflet and GeoJSON

Adding Shapes to Maps with Leaflet and GeoJSON

2:56 js PRO

With a basic map in place we can add shapes, like US states. We will then see how to style the shapes to make a visually appealing map.

js tutorial about Intro to Webpack

Intro to Webpack

4:29 js PRO

Webpack is a module bundler that bundles javascript and other assets for the browser. It works really well for applications and javascript libraries and is very simple frontend build tool.

js tutorial about Drawing Text on Canvas

Drawing Text on Canvas

6:45 js PRO

With the HTML canvas you can easily draw text as well as graphics. Let's take a look at basic text manipulation on the canvas.

js tutorial about Lodash: Refactoring Simple For Loops

Lodash: Refactoring Simple For Loops

3:44 js PRO

This lesson shows how to refactor your old loops into using a simpler and more powerful lodash-style. We will start by looking at how many people traditionally write JavaScript for loops and then talk about the alternate style and benefits that Lodash offers.

js tutorial about Simple drag and drop with Observables

Simple drag and drop with Observables

12:35 js

Armed with the map and concatAll functions, we can create fairly complex interactions in a simple way. We will use Observable to create a simple drag and drop example with basic DOM elements.

js tutorial about Using the map method with Observable

Using the map method with Observable

3:45 js

Like an array, Observable has a map method that allows us to transform a sequence into a new Observable.

js tutorial about Introducing the Observable

Introducing the Observable

11:59 js

In this lesson we will get introduced to the Observable type. An Observable is a collection that arrives over time. Observables can be used to model events, asynchronous requests, and animations. Observables can also be transformed, combined, and consumed using the Array methods we learned in the previous lessons. We can write powerful and expressive asynchronous programs using the few simple methods we've learned so far.

js tutorial about Create an Array concatAll method

Create an Array concatAll method

4:17 js

In addition to flat Arrays, programmers must often deal with nested Arrays. For example let's say we have an Array of stock exchanges, each of which is represented by an array of all the stocks listed on that exchange. If we were looking for a stock that matched a certain criteria, we would first need to loop through all of the exchanges, and then all of the stocks within.

In these situations, most developers would nest two loops. However in this lesson we will write a new Array function "concatAll" which will automatically flatten nested arrays buy one dimension. This will remove the need to ever use a nested loop to flatten a nested array.

js tutorial about Chaining the Array map and filter methods

Chaining the Array map and filter methods

3:05 js

Both map and filter do not modify the array. Instead they return a new array of the results. Because both map and filter return Arrays, we can chain these functions together to build complex array transformations with very little code. Finally we can consume the newly created array using forEach. In this lesson, we will learn how to build nontrivial programs without using any loops at all.

js tutorial about The Array filter method

The Array filter method

4:42 js

One very common operation in programming is to iterate through an Array's contents, apply a test function to each item, and create a new array containing only those items the passed the test. For example, let's say you wanted to loop through an array of stocks and select only those with the price larger than a certain value. In this lesson we will demonstrate how to use the Array's filter method to easily perform this operation with less code than a loop would require.

js tutorial about The Array map method

The Array map method

3:02 js

One very common operation in programming is to iterate through an Array's contents, apply a function to each item, and create a new array containing the results. For example, let's say you wanted to loop through an array of stock objects and select only the name for display on screen. In this lesson we will demonstrate how to use the Array's map method to easily perform this operation with less code than a loop would require.

js tutorial about The Array forEach method

The Array forEach method

4:03 js

Most JavaScript developers are familiar with the for loop. One of the most common uses of the for loop is to iterate through the items in an array. In this lesson, we will learn how to replace the for loop with the Array's forEach method - and shorten your code in the process.

js tutorial about Get Started with LeafletJS Mapping

Get Started with LeafletJS Mapping

3:13 js PRO

Leaflet makes creating maps in the browser dead simple. With some HTML and 3 lines of JavaScript, we can quickly have a map displaying.

js tutorial about Gradient Fills on the HTML5 Canvas

Gradient Fills on the HTML5 Canvas

5:20 js PRO

When drawing on the HTML5 canvas element, your fills aren't limited to flat colors. You can use gradients to get smoothly blended color fills on your drawn elements.

js tutorial about Drawing Styles on HTML5 Canvas

Drawing Styles on HTML5 Canvas

5:31 js PRO

You aren't limited to boring black lines when drawing on the HTML5 canvas element. Using styles, you can program interesting colorful images with JavaScript.

js tutorial about Drawing Paths - Curves and Arcs

Drawing Paths - Curves and Arcs

5:16 js PRO

When drawing on your HTML canvas in JavaScript, you aren't restricted to straight lines. Using curves and arcs you are able to create smooth curved lines.

js tutorial about Drawing Paths - Lines and Rectangles

Drawing Paths - Lines and Rectangles

3:06 js

Now that we have an HTML5 canvas to draw on, let's take a look at drawing simple lines and rectangles with JavaScript

js tutorial about Introduction to the HTML Canvas element

Introduction to the HTML Canvas element

4:55 js

The HTML Canvas element allows us to access powerful drawing APIs from JavaScript. In this lesson, the first in a series, we will learn about <canvas>, and get ready to start drawing.

js tutorial about Object Enhancements in ES6

Object Enhancements in ES6

2:12 js PRO

Building on the ES6 Shorthand Properties lesson, John shows the other new Object Enhancements in ES6 that will help you write less code and easily create complex Objects.

js tutorial about Editing breakpoints in Chrome devtools

Editing breakpoints in Chrome devtools

4:29 js PRO

There is more to breakpoints than just setting them. Learn how to edit and disable breakpoints, and log to the console without modifying your code.

js tutorial about Using the ES6 spread operator

Using the ES6 spread operator

1:40 js PRO

The spread operator allows you to "explode" an array into its individual elements.

js tutorial about Shorthand Properties in ES6

Shorthand Properties in ES6

1:01 js PRO

Shorthand properties allow you to compose complex objects from other objects.

js tutorial about Introduction to Lodash

Introduction to Lodash

1:33 js PRO

Lodash is a toolkit of Javascript functions that provides clean, performant methods for manipulating objects and collections. It is a "fork" of the Underscore library and provides additional functionality as well as some serious performance improvements. If you aren't using Lodash, you should be.

js tutorial about Cleaning your build folder with grunt-contrib-clean

Cleaning your build folder with grunt-contrib-clean

2:05 js PRO

Grunt will clean up your build with the grunt-contrib-clean to make sure that no artifacts from previous builds are hanging around.

js tutorial about Minifying your output with grunt-uglify

Minifying your output with grunt-uglify

2:23 js PRO

For production we want to use minified javascript to reduce the payload that is sent from the server. This can easily be accomplished with grunt-uglify.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?