JavaScript

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

COURSES 26

WATCH Marius Schulz's COURSE

Asynchronous JavaScript with async/await

Asynchronous JavaScript with async/await

In this course we will learn how to use the ES2017 async and await keywords to write asynchronous code that is more readable an...

8 lessons

WATCH Max Stoiber's COURSE

Write simple asynchronous code with JavaScript generators

Write simple asynchronous code with JavaScript generators

Generators are a useful tool for handling asynchrony in your JavaScript applications. They were added to JavaScript with ES2015...

6 lessons

WATCH Cameron Nokes's COURSE

Build a desktop application with Electron

Build a desktop application with Electron

Electron is a framework that makes it easy to create cross-platform desktop apps with JavaScript, HTML, and CSS. Electron and o...

14 lessons

WATCH Trevor Miller's COURSE

Publish JavaScript packages on npm

Publish JavaScript packages on npm

npm is like a giant library of code building blocks. There are tons of these “blocks”, aka “packages” that we can compose toget...

10 lessons

WATCH Iheanyi Ekechukwu's COURSE

Ember 2 Fundamentals

Ember 2 Fundamentals

Ember is a javascript framework that provides a rich set of tools for building modern web applications. Unlike many frameworks,...

9 lessons

WATCH Guy Bedford's COURSE

Get Started Using WebAssembly (wasm)

Get Started Using WebAssembly (wasm)

This course begins with some small steps for working with WebAssembly straight away using online tools wasm Explorer and wasm F...

15 lessons

WATCH Brad Martin's COURSE

Build Basic NativeScript App Templates

Build Basic NativeScript App Templates

In this course, we will learn how to use the core layouts for NativeScript apps. We will start with the basic principles of Nat...

6 lessons

WATCH Brian Lonsdorf's COURSE

Professor Frisby Introduces Composable Functional JavaScript

Professor Frisby Introduces Composable Functional JavaScript

This course teaches the ubiquitous abstractions for modeling pure functional programs. Functional languages have adopted these ...

29 lessons

WATCH John Lindquist's COURSE

Learn ES6 (ECMAScript 2015)

Learn ES6 (ECMAScript 2015)

This course takes a look at some of the new features that JavaScript has available with ES6 (ECMAScript 2015). It is a "montage...

16 lessons

WATCH Josh Black's COURSE

Build a GraphQL Server

Build a GraphQL Server

In this course we take a look at a new data query language and runtime called GraphQL. GraphQL was designed and built at Facebo...

15 lessons

WATCH Hannah Davis's COURSE

Natural Language Processing in JavaScript with Natural

Natural Language Processing in JavaScript with Natural

In this course we’ll work through Natural’s API for natural language processing in JavaScript. We’ll look at how to process tex...

14 lessons

WATCH Keith Peters's COURSE

Build Complex 3D models with WebGL

Build Complex 3D models with WebGL

We’ll cover per-vertex coloring, advanced use of vertex arrays, more drawing modes for building 3D models, perspective, texture...

8 lessons

WATCH mykola bilokonsky's COURSE

Advanced Logging with the JavaScript Console

Advanced Logging with the JavaScript Console

If you are developing JavaScript applications you are likely using logging as an integral part of your development process. Did...

7 lessons

WATCH Kent C. Dodds's COURSE

Using Webpack for Production JavaScript Applications

Using Webpack for Production JavaScript Applications

Webpack is one of the most popular tools for bundling JavaScript applications and libraries, and it's growing more popular ever...

16 lessons

WATCH Keith Peters's COURSE

Create 3D Graphics in JavaScript Using WebGL

Create 3D Graphics in JavaScript Using WebGL

In this course, we’ll get started creating content with WebGL without any frameworks. You’ll write raw JavaScript code and shad...

10 lessons

WATCH mykola bilokonsky's COURSE

Reduce Data with Javascript Array#reduce

Reduce Data with Javascript Array#reduce

Most examples for reduce show you how to take an array of numbers and reduce them to a simple sum. Reduce is a great tool for t...

8 lessons

WATCH Shane Osbourne's COURSE

Understand JavaScript Arrays

Understand JavaScript Arrays

Arrays of data is one of the first things we learn about as programmers. Collections of information are a fundamental building ...

11 lessons

WATCH Keith Peters's COURSE

GIF Loop Coder for Creating Animation

GIF Loop Coder for Creating Animation

GIF Loop Coder is a desktop tool for creating looping animations using JavaScript code. It is hours of fun to be had, and the r...

11 lessons

WATCH Kent C. Dodds's COURSE

How to Write an Open Source JavaScript Library

How to Write an Open Source JavaScript Library

Publishing a JavaScript library for public use requires some extra steps. You need to think about how people will use the libra...

24 lessons

WATCH Kent C. Dodds's COURSE

How to Contribute to an Open Source Project on GitHub

How to Contribute to an Open Source Project on GitHub

“Feel free to submit a PR!” - words often found in GitHub issues, but met with confusion and fear by many. Getting started with...

14 lessons

WATCH André Staltz's COURSE

Cycle.js Fundamentals

Cycle.js Fundamentals

Cycle.js is a framework where your app is described as a simple function taking an event stream as input and outputting an even...

21 lessons

WATCH Joe Maddalone's COURSE

Regex in Javascript

Regex in Javascript

Regular expressions are a useful tool for dealing with text data. They allow us to slice and dice strings, and useful extract i...

10 lessons

WATCH Jafar Husain's COURSE

Asynchronous Programming: The End of The Loop

Asynchronous Programming: The End of The Loop

Learning how to build and manage asynchronous programs is perhaps the most important part of becoming an effective JavaScript p...

9 lessons

WATCH Joe Maddalone's COURSE

Creating Custom Web Elements with Polymer

Creating Custom Web Elements with Polymer

Polymer is a framework created at Google for building reusable web components. We use HTML elements every day such as div, a, ...

10 lessons

WATCH J.S. Leonard's COURSE

Learn how to use Immutable.js

Learn how to use Immutable.js

im·mu·ta·ble i(m)ˈmyo͞odəb(ə)l/ adjective - unchanging over time or unable to be changed. Mutating data is the source of never...

16 lessons

WATCH Keith Peters's COURSE

Learn HTML5 Graphics and Animation

Learn HTML5 Graphics and Animation

HTML5 includes powerful drawing APIs that allow you to use the canvas element and JavaScript to draw whatever you want, directl...

12 lessons

Use Lifecycle Events with Functional Components with Inferno

Inferno is an insanely fast, 9kb React-like library for building high-performance user interfaces on both the client & server. Outside of performance, Inferno also offers some nice features tha...

Josh Burgess
4:11

Use dynamic data in a GlimmerJS component

In this lesson we will create an updateContent method that sets the value of our content property to the current epoch timestamp. We need to call toString() on the Date.now() method in order to mak...

Bram Borggreve
2:08

Use template variables in a GlimmerJS component

In this lesson we will add a variable called content to our component class, initialize it as a string and display the variable in our class using the double curly braces syntax, which is the handl...

Bram Borggreve
1:22

Create a new GlimmerJS component

In this lesson we will use the ember cli to generate a new component. Running ember g glimmer-component my-component generates the template and component class. We change the content of our compone...

Bram Borggreve
0:32

Use Traverse & the Maybe Monad to Safely Process Lists of Data with Sanctuary

Sanctuary.js is a functional programming library for JavaScript. It's similar to Ramda, but more strict and includes extra features, like the error handling monads Maybe & Either. It's also sim...

Josh Burgess
8:00

Create an Observable-Based Fetch Wrapper Using Ramda & Most

Unlike RxJS, Most does not include an observable-based AJAX helper utility. However, it can be very convenient to have one, because it allows you to use streams to do things like declaratively hand...

Josh Burgess
2:56

Convert CommonJS Requires to ES6 Imports

In this lesson we'll use cjs-to-es6 to convert CommonJS requires to ES6 imports. We'll also show how to convert over a exported default object to take advantage of named exports.

Jason Brown
4:16

Refactor Business Logic to Composable Functions with Lodash

Imagine if looking at your business logic read as simple as a story from a children's book. That's exactly what we'll cover by learning how to compose small pieces of business logic and also set th...

Paul Frend
4:45

Use ASTExplorer.net

In this lesson we’ll look at the amazing open source tool ASTExplorer.net. We’ll learn how we can use it to learn about ASTs generated by different tools. We’ll also see how it can be used to help ...

Kent C. Dodds
1:34

Introduction to Abstract Syntax Trees

In this lesson, we’ll learn about the key technology used by JavaScript engines and tools like ESLint and Babel to run, lint, and modify your source code. The JavaScript Abstract Syntax Tree (or AS...

Kent C. Dodds
1:54

Use Test Driven Development

In this lesson, we'll write a brand new function called arrayify using the Test Driven Development workflow of red-green-refactor. Test Driven Development (aka TDD) is great because it helps you fo...

Kent C. Dodds
3:19

Initialize a project using Glimmer.js

GlimmerJS is a UI component library built by the Ember.js team. It is fast and lightweight and uses a combination of TypeScript and Handlebars to build the components. In this lesson we will us...

Bram Borggreve
0:37

FEATURED JAVASCRIPT PLAYLISTS

Browse all JavaScript lessons.

showing All 515 lessons...

Introduction to Grunt

P

Grunt Watch

P

Template

P

Uglify

P

External Config

P

Multitask

P

JavaScript Function Scope Basics

P

Advanced Function Scope

P

Intro to ES6 and traceur compiler

P

traceur compiler and Grunt

P

The let keyword in ES6

Arrow Function => in ES6

Default Values for Function Parameters in ES6

P

Destructuring Assignment in ES6

P

Array Comprehensions - NON-STANDARD

P

Use Template Literals in ES6

P

ES6 (ES2015) - Generators

P

Basic Metaprogramming: Dynamic Method

P

Development Automation Tasks with Grunt

P

Concatenating Your Javascript with grunt-contrib-concat

P

Minifying your output with grunt-uglify

P

Cleaning your build folder with grunt-contrib-clean

P

Introduction to Lodash

P

Shorthand Properties in ES6

P

Using the ES6 spread operator

P

Editing breakpoints in Chrome devtools

P

Object Enhancements in ES6

P

Introduction to the HTML Canvas element

Drawing Paths - Lines and Rectangles

Drawing Paths - Curves and Arcs

P

Drawing Styles on HTML5 Canvas

P

Gradient Fills on the HTML5 Canvas

P

Get Started with LeafletJS Mapping

P

The Array forEach method

The Array map method

The Array filter method

P

Chaining the Array map and filter methods

P

Create an Array concatAll method

P

Introducing the Observable

P

Using the map method with Observable

P

Simple drag and drop with Observables

P

Lodash: Refactoring Simple For Loops

P

Drawing Text on Canvas

P

Intro to Webpack

P

Adding Shapes to Maps with Leaflet and GeoJSON

P

Webpack Loaders, Source Maps, and ES6

P

HTML Canvas and Images

P

Lodash - sortBy and sortedIndex

P

Webpack CSS, Preprocessors, and url assets

P

Canvas Effects

P
js tutorial about Introduction to Grunt

Introduction to Grunt

3:58 js PRO

In this lesson you will install GruntJS and get up and running with your first task, initial configuration, and how to get Grunt methods auto-completing in WebStorm.

Grunt Watch

3:03 js PRO

In this lesson John will show you how to get started with grunt-contrib-watch. Watch is an essential component of any Grunt build, and you will find yourself using it in almost every project.

Template

3:45 js PRO

GruntJS allows you to use underscore/erb style templates to reduce repetition and create variables. This is commonly used to point at build folders and files within your application's structure.

Uglify

1:41 js PRO

In this lesson John will show you how to start using Grunt Uglify to compress your javascript for production deployment.

External Config

3:51 js PRO

In this lesson John will show you how to create a simple external config file for your GruntJS build.

Multitask

1:49 js PRO

Grunt Multitask allows you to write complex tasks that run multiple targets. In this lesson, John will show you how to use Multitask in your GruntJS builds.

js tutorial about JavaScript Function Scope Basics

JavaScript Function Scope Basics

5:45 js PRO

This or that? Javascript scoping can be confusing. This lesson covers the very basics of function scoping.

js tutorial about Advanced Function Scope

Advanced Function Scope

7:06 js PRO

Function scope and closures in JavaScript can be tricky. This lesson builds on the Function Scope Basics video to dive deeper into JS function scope.

js tutorial about Intro to ES6 and traceur compiler

Intro to ES6 and traceur compiler

2:42 js PRO

es6 is the next generation of javascript. You can use it today with the traceur compiler library. Also be sure to check out es6fiddle to start playing with ECMAscript 6 right now.

js tutorial about traceur compiler and Grunt

traceur compiler and Grunt

3:30 js PRO

Build and watch ECMAscript 6 using traceur compiler and Grunt.

js tutorial about The let keyword in ES6

The let keyword in ES6

2:58 js

Block scoping can be surprising, and sometimes confusing, in Javascript. With es6, we have access to the let keyword to remove this pain.

js tutorial about Arrow Function => in ES6

Arrow Function => in ES6

2:57 js

ECMAscript 6 introduces the "arrow function" as a shortcut for creating anonymous functions with this scope bound.

js tutorial about Default Values for Function Parameters in ES6

Default Values for Function Parameters in ES6

2:16 js PRO

With ECMAscript 6 we get the luxury of default parameters for our functions.

js tutorial about Destructuring Assignment in ES6

Destructuring Assignment in ES6

4:33 js PRO

ECMAscript 6 destructuring provides flexible options for variable assignment.

js tutorial about Array Comprehensions - NON-STANDARD

Array Comprehensions - NON-STANDARD

2:28 js PRO

Array Comprehensions didn't make the ES6 cut. You probably shouldn't use them ;)

See comments.

js tutorial about Use Template Literals in ES6

Use Template Literals in ES6

4:12 js PRO

ECMAscript 6 lets us use string templates to gain a lot more control over strings in JavaScript.

js tutorial about ES6 (ES2015) - Generators

ES6 (ES2015) - Generators

5:28 js PRO

Generators in ECMAscript 6 are first-class coroutines that produce encapsulated suspended execution contexts. Whew! Yield values and iterate over them until no more values exist in the generator. We'll talk more about practical use later ;)

js tutorial about Basic Metaprogramming: Dynamic Method

Basic Metaprogramming: Dynamic Method

4:27 js PRO

Metaprogramming is a powerful tool for dynamically applying behavior to JavaScript objects. It can be a confusing concept, "code that writes code", but is very useful when you understand a few simple concepts. This lesson will show you how to create dynamic methods on your Javascript objects.

js tutorial about Development Automation Tasks with Grunt

Development Automation Tasks with Grunt

4:24 js PRO

With Grunt you can automate core tasks for your AngularJS project. In this lesson we will take a look at converting Stylus files to CSS, and add a watch task to convert those files automatically whenever a change is detected.

js tutorial about Concatenating Your Javascript with grunt-contrib-concat

Concatenating Your Javascript with grunt-contrib-concat

2:02 js PRO

You can use Grunt to combine all of your Javascript files into a single concatenated file.

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.

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 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 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 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 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 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 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 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 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 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 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 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 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 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 filter method

The Array filter method

4:42 js PRO

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 Chaining the Array map and filter methods

Chaining the Array map and filter methods

3:05 js PRO

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 Create an Array concatAll method

Create an Array concatAll method

4:17 js PRO

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 Introducing the Observable

Introducing the Observable

11:59 js PRO

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 Using the map method with Observable

Using the map method with Observable

3:45 js PRO

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

js tutorial about Simple drag and drop with Observables

Simple drag and drop with Observables

12:35 js PRO

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 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 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 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 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 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 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 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 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 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.

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