DevelopmentCategory

Learning JavaScript, deeply: 7 resources for WordPress developers

7 min read
Raelene Morey

In his recent State of the Word address at WordCamp US, WordPress co-founder Matt Mullenweg appealed to us to “Learn WordPress, deeply.” While JavaScript has always been a part of WordPress, taking a backseat to PHP, over the past year it has matured from its supporting role to one closer to that of the lead — thanks to the WordPress REST API.

JavaScript is becoming an essential language for serious WordPress developers.

Although the API itself is written in PHP, as it needs to use a server-side language to interact with the database, one can interact with it using JavaScript, specifically using JSON objects. And as WordPress continues growing into a fully-fledged application platform, JavaScript is becoming an essential language for developers who are serious about working with it.

Whether you’ve put off learning JavaScript and have decided 2016 is the year to dive in, or you’re simply looking to brush up on your existing skills and need some advanced resources, here’s a concise list of the best sites worth bookmarking.

Eloquent JavaScript

Eloquent JavaScript

Available both digitally and as a hardcopy book, Eloquent JavaScript is the best place to get started learning JavaScript.

It provides an easy-to-follow overview of the language, split into three main parts: language syntax, working with the browser, and working with Node.js. The book is then split into a further 21 chapters that are easily digestible and include plenty of code samples that you can play around with and edit live. There are also five project chapters that allow you to get stuck into coding small projects — including a virtual ecosystem, your own programming language, a platform game, a paint program, and a skill-sharing website.

Eloquent JavaScript is a comprehensive and well-structured introduction to JavaScript if you’re new to the language, and if you’re an old hat it offers a quick way to get up to speed.

W3Schools: JavaScript Tutorial

It feels like W3Schools has been around forever, and for good reason – it’s an excellent resource for beginners that's crammed full of examples. Best of all, you can edit the examples on the site live and see the results of your changes on the front-end.

The website's mega tutorial on JavaScript starts off with the basics, introducing you to how the language can change HTML content, and progresses through to advanced concepts such as the Document Object Model and the Browser Object Model. The content is arranged into nine sections – tutorials, forms, objects, functions, HTML DOM, browser BOM, libraries, examples, and further references.

W3School’s tutorial turns JavaScript inside-out.

Yes, the website might look like it’s aimed at noobs, but don’t be fooled – this tutorial turns JavaScript inside-out. When you think you’ve got JavaScript figured out, take the 25-question quiz to test your knowledge.

WPMU DEV: JavaScript for WordPress people

If you’ve spent all your time learning PHP and now you’re freaking out because Matt says you need to learn JavaScript, stop! And read this article.

Long-time WordPress developer Rachel McCollin breaks down how JavaScript is already used in WordPress, how to use the language in your themes and plugins, and gives an overview of how to interact with the WordPress REST API.

The article offers lots of reassurances — JavaScript and PHP have many similarities (such as syntax, variables, conditions, operators etc), and JavaScript already powers the WordPress admin, etc. — which should put your mind at ease when delving into learning JavaScript and understanding how exactly it is (and will be) used with WordPress in the coming years.

Codecademy: JavaScript Course

If you’re an interactive and hands-on learner, popular online code school Codecademy offers a free 10-hour course for beginners. It’s divided into eight units that cover concepts including functions, loops, control flow, data structures, and objects. There’s also a final project that involves building a game from scratch – but you’ll have to upgrade to Codecademy Pro to get access.

The great thing about Codecademy is that the courses are interactive. Each lesson is displayed in a pseudo console in your browser where you need to enter code to complete a set of instructions. You can then save and submit your code to move on to the next lesson.

Completing a course like this is a great way to complement any theory you’ve learned, allowing you to put it into practice.

JavaScript Garden

JavaScript Garden is a collection of documentation about the most quirky parts of the programming language. It offers advice on how to avoid common mistake and subtle bugs, as well as performance issues and bad practices that those new to JavaScript may come across in their learning.

The site is set out in four main sections —objects, functions, arrays, types, and core — and provides lots of code examples and external links to help you get your head around what’s going on.

It's certainly not a beginner's resource for learning JavaScript; you definitely need to have a working knowledge of the language to understand the topics that are covered. What it does offer, however, is a resource to expand your existing knowledge of JavaScript, and even test how well you know it. Definitely a great resource for developers looking for advanced documentation.

Envato tuts+: The Best Way to Learn JavaScript

If you are completely new to JavaScript, don’t know where to start, and need some hand holding, this fantastic article is a great launching pad.

It begins with an explanation of JavaScript, names some courses you can complete to learn more, points to screencasts and digital books, and then gets into more complicated stuff like developer tools, building your own JavaScript project, and learning a library.

While this article offers only a brief overview of what you need to learn to become proficient in JavaScript, it’s provides a quick look into the language for busy people.

JavaScript The Right Way

Despite its name, this one-page guide doesn’t offer instructions on the “the right way” to learn JavaScript, rather it stands as a collection of resources submitted by developers, from information on how to get started and best practices, to tools for testing and frameworks like jQuery and Backbone.js.

It feels confusing to get your head into this guide at first, but it’s actually set out in a fairly logical manner with a table of contents conveniently located at the top. While the tutorials are pretty bare bones, the information is attributed so you can click through to other sites for further reading.

What I particularly like about this resource is that is also includes curated lists of articles about more advanced JavaScript topics, as well as suggestions for podcasts, screencasts and top developers you can follow and learn from.

Which JavaScript resource is best?

There’s no right way to go about learning Javascript – as cliche as it sounds, you just need to dive in and get started.

As with learning any new skill, the more you read and practice, the easier learning will become and the sooner you’ll be proficient in another language.

As far as choosing the right place to get started, I would recommend reading over Eloquent JavaScript. It’s a fantastic and thorough overview of the language that breaks down everything you need to know in an easy-to-read yet comprehensive guide.

If you’re a beginner, the W3Schools tutorial is a great starting point for easing into JavaScript. You might then want to complete the Codecademy JavaScript course so you can put theory into practice and cement what you’ve learned.

If you’re experienced with JavaScript and looking to explore the language further, definitely check out JavaScript Garden to pick up any quirks of the language you might not already know. And don’t forget to do the W3Schools quiz to test just know knowledgeable you are.