Learning to write (good) JavaScript - resources for beginners

[Chris]

Hey guys,

since we have a few beginners here on board, trying to make their first steps in the world of HTML5 games, I thought it might be good to point you to a few resources about how to learn to write good javascript code.

 

JavaScript is a language where you have to be a bit careful about your syntax and code style if you want to write maintainable and readable code in the long run.

 

The advice I give to most newcomers is: DONT dive right into developing a complex game! First learn how to handle the language properly.

Spending a week or two with reading through a good JavaScript book and a couple of tutorials will give you enough knowledge that will increase your development speed a thousand times and helps you avoid common pitfalls for beginners.

 

I would suggest every beginner to first decide for a good IDE that supports code completion and syntax checking. If they even support jshint you can't wish for much more!

A few IDEs are: Netbeans, WebStorm, Microsoft Visual Studio, heck even Dreamweaver. Just pick one you like.

 

 

Okay, lets throw a bit content at your brains! First out, a few books I can personally recomment reading:

 

 

JavaScript - The Good Parts by Douglas Crockford

O'Reilly, ISBN: 0596517742

Good for beginners

 

JavaScript Patterns by Stoyan Stefanov

O'Reilly, ISBN: 978-0-596-80675-0

Very good for beginners

 

JavaScript - The Definitive Guide by David Flanagan

O'Reilly, ISBN: 0596805527

 

JavaScript Cookbook by Shelley Powers

O'Reilly, ISBN: 978-0-596-80613-2

 

JavaScript Web Applications by Alex MacCaw

O'Reilly, ISBN: 978-1-449-30351-8

For advanced users

 

High Performance JavaScript by Nicholas C. Zakas

O'Reilly, ISBN: 978-0-596-80279-0

For users with basic to advanced knowledge

 

You may find some of this books in digital PDF format, if you google for it.

 

A list of more books in digital format: http://jsbooks.revolunet.com/

I also recommend a look at the digital books from Addy Osmani.

 

================================================================================================================

 

We don't stop there. When you read even only the top two books of this list, you are armed with a set of JavaScript knowledge to develop 99%

of the games you want to.

 

Lets continue with a list of online resources, for the more digitally aligned people out there

 

 

Basic introduction into Javascript

For beginners and advanced users. Explains what JavaScript is and how it works.

https://developer.mozilla.org/en/JavaScript

 

 

JavaScript learning portal by Mozilla

Take this as your starting point for learning JS online. Mozilla gathers many notable sources and links of good tutorials and documentation on this page. This is one of the best sources for beginners, as well as for advanced users to learn something new.

https://developer.mozilla.org/en-US/learn/javascript

 

Google Code University: Videos for fundamental JavaScript understandment

If you are looking for a quick introduction, watch this videos. The two JS videos are both about 17 minutes long and will give you a good basic understandment if you are a beginner.

There are also videos about CSS and HTML on this page.

http://code.google.com/intl/de-DE/edu/submissions/html-css-javascript/#javascript

 

Learning advanced JavaScript by John Resig

This information collection by John Resig covers basic mechanics of JavaScript but they are meant to be used as supportive content to his upcoming JS book, so lack descriptions and comments.

We recommend to use this only if you already have a fundamental understandment of JS.

http://ejohn.org/apps/learn/

 

Mozilla JavaScript Guide

This advanced JS guide shows you how to work with JavaScript in the browser, what pitfalls and differences you have to watch out for in the different JS versions and good tips and best practices about debugging your JS code.

https://developer.mozilla.org/en/JavaScript/Guide

 

Best practices guide by the Opera guys

This very long article covers many many good tips about what you should avoid when coding with JS. Many beginners mistakes are covered and explained why they should be avoided.

http://dev.opera.com/articles/view/javascript-best-practices/

 

Usage cases for JavaScript by the Opera guys

This article covers the topic what you can achieve with using JS on your websites in the first place. You have many resources for learning JavaScript now - so this one covers what it enables you to do.

http://dev.opera.com/articles/view/javascript-uses/

 

JavaScript Garden

A growing collection of documentation about the most quirky parts of the JavaScript programming language. It gives advice to avoid common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert JavaScript programmers may encounter on their endeavours into the depths of the language.

http://bonsaiden.github.com/JavaScript-Garden/

 

Code Academy

An interactive way to learn coding, with live examples, you solve directly in the browser.

http://www.codecademy.com/

 

================================================================================================================

 

Thats my 50 cent to help the beginners starting with JavaScript.

If you want to add something here I forgot to cover, just post me suggestions.

 

greetings,

Chris

[rich]

Awesome list. I pinned this topic

[Chris]

Thanks, man. Always here to help

[BarrytheBrave]

Thanks so much for taking the time to write this! It can be tricky to find the decent books and tutorials in amongst all of the not so good ones out there - this is much appreciated. 

[abiyasa]

Collection of FREE e-books

http://jsbooks.revolunet.com/

• Beginners & also advanced JavaScript (modularity, unit testing, ...)
• jQuery
• CoffeeScript
• HTML CAnvas
• Node.JS
• DOM
• MongoDB
• and more...

 

Links to lots of articles

http://superherojs.com/

• Understanding JavaScript
• Code organization, modularity, and design pattern
• Testing your application
• Tools and workflow
• Performance and profiling
• Security
• and more...

[eterps]

I second the http://superherojs.com notion.  Also, another decent free book: http://singlepageappbook.com/single-page.html

 

And by far the best introduction to javascript (and programming) - in my opinion: http://eloquentjavascript.net/

[Chris]

@abiyasa:

SuperheroJS looks nice.

If you look into my list, you can see that I already mentioned the JS e-books collection

[abiyasa]

@Chris:

You're right, I didn't see that :-) I just copy-and-paste things from my bookmark

[Rezoner]

intermediate knowledge:

 

Mixins, easiest way to write clear and reusable code without magic:

http://javascriptweblog.wordpress.com/2011/05/31/a-fresh-look-at-javascript-mixins/

 

Three.js - don't have to use or run it - just scavenge the source, learn how to write robust and vanilla library with no heretic inheritance and stuff - it is a model library for me:

https://github.com/mrdoob/three.js/

 

Also good article about code organization - again without crazy abstract "class" systems

http://buildnewgames.com/js-game-code-org/

 

Yes, I am obsessed with fighting any obsolete abstraction layers in code

Also I would not recommend learning jQuery if you are new to JS - you can later have problems with understanding how to make simple essential things like sprites, collisions, mouse support without premade plugins - and end up making your games based on DOM/HTML layout elements which are part of huge GUI library, not a robust game oriented API.

[rich]

Can't say enough how much I agree with the above post. three.js was my watermark standard for how I approached the end user building a game with Phaser. I loathe frameworks that enforce their own class systems on you, or that make heavy use of magic objects.

[Gotama]

Wow thank you for this list! will definitely refer back to it in the future!

Much love

[tarr_bot]

Great collection of info! 

[JacobChristopher]

So I have a quick question then as a complete beginner. Should I learn html and css first before JavaScript? Any advice is appreciated. Thanks!

[remvst]

So I have a quick question then as a complete beginner. Should I learn html and css first before JavaScript? Any advice is appreciated. Thanks!

Of course. You can learn both in a few days

[JacobChristopher]

Of course. You can learn both in a few days

Alright cool thanks. I'll get on it then and then dive into some of the books mentioned above!

[Lachsen]

Another book I can recommend for JavaScript:

Effective JavaScript by David Herman

http://effectivejs.com/

This book isn't much about optimization, but it covers several important details that one should know about the language.

[matheusbn]

Hi all,

 

And to add the list above, there is very good articles in the Douglas Crockford's website: http://javascript.crockford.com/

 

Example of articles:

 

Code Conventions: http://javascript.crockford.com/code.html

Private Members: http://javascript.crockford.com/private.html

Prototypal Inheritance: http://javascript.crockford.com/prototypal.html

 

Matheus.

[Arrow_x86]

I use construct 2 for now ... but I will start learning JavaScript soon .... thanks

[DonRicardoJR]

/* Crockford rocks.  He's a JavaScript god. */   He has some great talks on youtube as well:

 

 

www.teamtreehouse.com  Learn to make websites and mobile apps, etc.  I'm a member...great site!

 

Also check out http://eloquentjavascript.net/ 

 

Eloquent JavaScript is a book providing an introduction to the JavaScript programming language and programming in general.

A concise and balanced mix of principles and pragmatics. I loved the tutorial-style game-like program development. This book rekindled my earliest joys of programming. Plus, JavaScript!

—

Brendan Eich

, the man who gave us JavaScript 

[Gustavgb]

Hey I've made a small tutorial on how to make a simple Javascript canvas game.

Please tell me what I could explain better.

http://dev.gustavgb.dk/tutorial/javascriptcanvasgame

[Fricken Hamster]

Intellij Idea Ultimate is a great ide that also has support for Typescript/Javascript. The JS support is not has good as say the Java or AS3 support, but its mainly because Javascript is retarded.

[Introvert Studios]

Thank you for the articles, very helpful for a developer coming from AS3!

[Yail Peralta]

One book that help me a lot is http://www.packtpub.com/object-oriented-javascript/book is a really great book!

[CJX3M]

Amazed to find out no one has mentioned learn street javascript

 

https://www.learnstreet.com/lessons/study/javascript

 

Awesome way to start coding while learning js on the go!

[Latimed]

Awesome, that will be helpful for many people.

Thank you Chris.