Resources for learning JavaScript in 2019

Build your knowledge

Why should you make learning JavaScript a development goal this year? JavaScript, often abbreviated as JS, is a simple, powerful language that runs beneath 95 percent of websites, most likely including yours.

It’s the juice that turns a static website into an interactive one, controlling dynamic content, animations, pop-up lightboxes, maps and other wonders.

It’s also leg three of the tripod that holds up many websites, sharing the load with HTML and CSS. In fact, you’ll need a good understanding of both HTML and CSS to make quick progress with JavaScript.

If you don’t know at least a little about JavaScript, it’s time to learn, so you can make cool stuff and fix not-so-cool stuff. Fortunately this won’t be too difficult a task. There are plenty of free resources to get you on the road to pounding out JavaScript like a pro.

Related: How to build a website with HTML and CSS

JavaScript glossary

First a quick tour of terminology, then we’ll dive into the top resources:

JavaScript: Also known as JS, is a scripting language that powers interactivity on websites. Because it is a scripting language, it doesn’t have to be compiled or run on a server; it is executed by the user’s browser.

Client-side programming: Programming that primarily deals with the user interface. Processing usually takes place on the user’s computer, in the browser. Also called front-end development. JavaScript is a client-side programming language.

API (Application Programming Interface): Pre-made code blocks you can interact with to give your JavaScript super powers. JavaScript examples include the geolocation API and the DOM (Document Object Model) API.

DOM (Document Object Model): A heavily used API that allows JavaScript to communicate/work with HTML and CSS on the page.

jQuery: The most popular JavaScript framework. This JavaScript framework serves as an interface, making it possible to express common actions with just a few lines of code, such as selecting an object on the page and making it invisible or handling an event such as a click.

Ajax (Asynchronous JavaScript and XML): A subset of JavaScript used for communication between the client-side browser and a server without having to perform a page refresh. For example, to retrieve data from a database and display it without reloading the page.

JSON (JavaScript Object Notation): This is a data format often used by servers to send data retrieved via an API.

Java: A compiled programming language that has little in common with JavaScript.

Angular: A front-end development framework for building interfaces and web apps.

React: Another JavaScript framework for building sophisticated front-end interfaces. Some years ago it overtook Angular as the most popular choice for developers.

Vue.js: Another front-end JS framework, often used as an alternative to React.

Node: A runtime environment for JavaScript, allowing you to build and run JS applications outside of the browser. It effectively turned JavaScript into a “full stack” programming language.

Editor’s note: There are tons of other JavaScript libraries available. If you spend most of your time building websites for businesses, chances are the ones we’ve highlighted above are the most relevant to your needs.

Although you can jump straight into jQuery, React, Vue, Node, etc., it’s a good idea to grind out some “regular” JavaScript first so you have a better grip on what’s going on. From there you can quickly move on to the framework of your choice.

Resources for learning JavaScript basics

One of the cool aspects of learning JavaScript is that you can practice right in your browser. Alternatively, some tutorials include built-in editors that allow you to type in your latest creation and give it a test run. Here are top picks for JavaScript newbies:

Hello World

If you like to dive right in, go here and learn how to write the classic Hello World starter program in JavaScript using your web browser’s JavaScript development console.

MDN introduction to JavaScript

Learning Javascript Mozilla
Photo: Mozilla Developer

The tutorials from the Mozilla Developer Network give good examples of how HTML, CSS and JavaScript work together. A great starting point for newbies.

Learn X in Y Minutes (Where X – JavaScript)

If you’re an experienced programmer, the beginner tutorials might be a bit slow for you. If that’s the case, check out this JavaScript run-through that focuses on data types, operations, functions and objects, getting straight to the meat and potatoes.

JavaScript 30

Build 30 things in 30 days with vanilla JavaScript.

Related: Learning JavaScript, deeply: 7 resources for WordPress developers

Moving up to jQuery

Once you’re comfortable with JavaScript, it’s time to learn about the wonderful world of JQuery and how it will make your front-end development life easier.

jQuery is a JavaScript library that simplifies JavaScript by letting you accomplish a lot with just a few lines of code.

Another great reason to use it is to save yourself trouble when dealing with differences among browsers. For the most part, jQuery will handle them for you.

Here are some helpful tutorials:

Codecademy jQuery Tutorial

A free follow-along course in an interactive, web-based editor. Great for diving right in. (Requires you to create a free Codecademy account.)

Learn jQuery from Scratch

A free video course from CSS Tricks.

jQuery Learning Center

This is HQ for everything jQuery. In addition to a full tutorial, there are FAQs on a variety of jQuery-related topics. This is an open source project, and you’re welcome to contribute if you notice something missing.

Useful resources and advanced tutorials

Once you’ve got the basics down, or if you’re simply in a hurry to accomplish a particular task using JavaScript or jQuery, these resources might help:

JS CheatSheet

Handy snippets of JavaScript in action, covering common tasks ranging from If-Else statements to editing a DOM element.

jQuery CheatSheet

Code snippets demonstrating everything from the basics of loading jQuery through selectors, effects, DOM manipulation, and working with AJAX.

Learning Javascript Cheatsheet
Photo: jQuery CheatSheet

How to Connect to an API with JavaScript

This tutorial walks through the code required to use plain JavaScript to retrieve info from an API, parse the JSON, and display it.

ES6 for Everyone

A premium course covering the latest version of JS and all the goodies it has to offer.

React For Beginners

Another premium course specific to the React framework.

Introduction to Vue.js

The official guide and documentation for Vue.

Learn Node

A premium course for learning Node development.

NodeSchool

Free, open source workshops for learning Node.js.

Scotch.io

A massive library of JavaScript tutorials, both free and paid.

Places to practice

One of the easiest ways to practice JavaScript and/or jQuery is to create a web page on your desktop and insert your JavaScript. Bring up the page in your web browser and the code will execute. You don’t even have to be connected to the internet (unless you’re loading something from it).

Another option is to make use of browser developer tools. From within Chrome, right click on any page and choose Inspect from the menu that pops up. Then click on the Console tab. You can type JavaScript into the console and it will execute immediately. Try it with this:

alert('Hello!');

JSFiddle

Test your JavaScript, HTML and CSS (each in their own window) online with this live code editor. Save your work and come back for more anytime.

QuizGROK for JavaScript

Once you think you know your stuff, test yourself against these quizzes. In Study Mode you can peek at every answer (and explanation). In test mode, no peeking is allowed.

JavaScript is a core technology of the web

It’s used for animation; connecting data on a remote server to data on the user’s screen; transforming static pages into interactive experiences. Commit to learning JavaScript and put its power at your fingertips. You won’t be sorry.