Blog of Raivo Laanemets

Stories about web development, consulting and personal computers.

Getting started with JavaScript (2014)

On 2014-08-17

Somewhere around the Spring of 2013 I was teaching JavaScript and I relied on a couple of good resources. Here is my attempt to summarize and update them.

These resources are good for people who have had some experience in programming. The list of resources has a strong focus on the client-side (browser) programming but some bits cover the server-side (NodeJS) programming too.

These resources can be used concurrently. There is no need to do the online course first or start with the books only.

If you have a strong Java background then learning proper JavaScript is hard but doable. Avoid emulating classes at any cost. This is what I had the most trouble with after switching from Java and C++ to JavaScript.

Online courses

Codecademy has a good free online JavaScript course. It is divided into sections, from basic to advanced concepts, and uses interactive excercises. It only covers language features but might be the best way to get started. The course is suitable for people without any prior programming experience.

Books

There are lots of books written on JavaScript. Below is the selection of three that I have read and that I found the most practical and the least verbose. I used the Eloquent JavaScript (first edition) as the main teaching book in 2013.

Eloquent JavaScript (second edition) by Marijn Haverbeke (2014)

The second edition has just recently come out and in my opinion it is the best book for getting started with JavaScript. The book is freely available online. It covers both the client-side (browser) and the server-side (NodeJS) JavaScript and also deals with modern concepts such as modules and promises. Exercises contain 5 larger projects.

Effective JavaScript by David Herman (2012)

This is a detailed guide of techniques and approaches that you should prefer or avoid when writing JavaScript code. It is more in-depth book than the first one. I like to keep this one as a language/style reference. The book can be bought online.

JavaScript: The Good Parts by Douglas Crockford (2008)

This book divides JavaScript language features into the three categories: good, awful and bad and then deals mostly with the good features. It contains several very useful techniques. The book is widely referenced in the JavaScript community and everyone should be familiar with it. The book can be bought online.

Online references

MDN

The best online JavaScript reference is the Mozilla Developer Network (MDN). It covers built-in JavaScript features and browser APIs. It also contains the CSS and HTML references and points out which versions of browsers support specific features.

Other sites

The other notable reference sites are Web Platform, Can I use and DevDocs.

Tools

Text editor

You should use a text editor that has syntax highlighting and automatic indentation for JavaScript. Both syntax highlighting and proper indentation make it easier to read code and see possible errors faster, without having to go through full debugging session. Syntax highlighting can directly point out errors such as unterminated strings. I do not recommend full-featured "intelligent" IDEs as they are usually not smart enough for JavaScript's dynamic nature, are slow, and can cause more confusion than help.

Browser debugger

All modern browsers have built-in debuggers that show currently loaded resources (scripts, css, images, cookies fonts, etc), network requests, console output, script errors etc. It is essential to learn to use the debugger as soon as possible so you can inspect script errors and not waste time trying to guess them (as it was in the development process on IE7 in the darker times). Further references for Chrome can be found from here and for Firefox from here.

JSHint

JSHint is a JavaScript linter. This is a successor to the JSLint which was presented in the Good Parts book. It can be run either online or from command line and it will catch syntax errors and weirdness (possible errors) in the code making debugging much easier.

Advanced concepts

The resources above do not cover everything. For the following you need to do your own research with Google/Wikipedia/MDN:

  • various browser APIs
  • external libraries and frameworks
  • external APIs
  • structuring large programs
  • build tools
  • version control
  • project management
  • automated testing
  • deployment

Where to get help

If you happen to get stuck with a problem where references and Googling does not help then it might be possible to get help in IRC. There is a large (~1000 people) ##JavaScript channel on the Freenode network. In IRC, always follow the guideline of Getting help on IRC.