Jump to content


Photo
* * * * * 3 votes

Learning to write (good) JavaScript - resources for beginners


  • Please log in to reply
32 replies to this topic

#1 Chris

Chris

    Moderator from Hell

  • Moderators
  • 369 posts
  • twitter:paratron
  • LocationFrankfurt, Germany

Posted 16 April 2013 - 09:57 PM

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.mo...g/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.mo...earn/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.c...ipt/#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.mo...avaScript/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...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...avascript-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.git...aScript-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


  • benny!, Mike, EmployeeNumber8 and 11 others like this

I am one of the people behind Kiss, a smart HTML5 app company and the creators of SimpLESS, SpritePad and WhitePage.

 

Join us in the #html5gamedevs and #bbg IRC channel on freenode.net! More information in this thread.


#2 rich

rich

    Administrator

  • Administrators
  • 4069 posts
  • twitter:photonstorm
  • LocationUK

Posted 16 April 2013 - 10:01 PM

Awesome list. I pinned this topic :)


phaser-header.png

 

phaser docshttp://www.photonstorm.com | "Quality is a great business plan. Period." - John Lasseter, Pixar


#3 Chris

Chris

    Moderator from Hell

  • Moderators
  • 369 posts
  • twitter:paratron
  • LocationFrankfurt, Germany

Posted 16 April 2013 - 10:03 PM

Thanks, man. Always here to help :)


I am one of the people behind Kiss, a smart HTML5 app company and the creators of SimpLESS, SpritePad and WhitePage.

 

Join us in the #html5gamedevs and #bbg IRC channel on freenode.net! More information in this thread.


#4 BarrytheBrave

BarrytheBrave

    Member

  • Members
  • PipPip
  • 25 posts
  • twitter:BarrytheBrave
  • LocationUK

Posted 17 April 2013 - 06:28 AM

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. 


Check out my dev blog: syntaxerrorready.com

 


#5 abiyasa

abiyasa

    Newbie

  • Members
  • Pip
  • 7 posts
  • LocationBerlin

Posted 17 April 2013 - 02:15 PM

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

  • P.Uri.Tanner and eterps like this

Twitter @abiyasasuhardi - Blog abiyasa.com


#6 eterps

eterps

    Member

  • Members
  • PipPip
  • 12 posts
  • twitter:eterps

Posted 17 April 2013 - 02:23 PM

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

 

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



#7 Chris

Chris

    Moderator from Hell

  • Moderators
  • 369 posts
  • twitter:paratron
  • LocationFrankfurt, Germany

Posted 17 April 2013 - 02:33 PM

@abiyasa:

SuperheroJS looks nice.

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


I am one of the people behind Kiss, a smart HTML5 app company and the creators of SimpLESS, SpritePad and WhitePage.

 

Join us in the #html5gamedevs and #bbg IRC channel on freenode.net! More information in this thread.


#8 abiyasa

abiyasa

    Newbie

  • Members
  • Pip
  • 7 posts
  • LocationBerlin

Posted 17 April 2013 - 02:36 PM

@Chris:

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


Twitter @abiyasasuhardi - Blog abiyasa.com


#9 Rezoner

Rezoner

    Advanced Member

  • Members
  • PipPipPip
  • 81 posts
  • twitter:rezoner
  • LocationPoland

Posted 19 April 2013 - 11:42 AM

intermediate knowledge:

 

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

http://javascriptweb...ascript-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...-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.


  • P.Uri.Tanner likes this

cCKq4qD.png


#10 rich

rich

    Administrator

  • Administrators
  • 4069 posts
  • twitter:photonstorm
  • LocationUK

Posted 19 April 2013 - 11:58 AM

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.


phaser-header.png

 

phaser docshttp://www.photonstorm.com | "Quality is a great business plan. Period." - John Lasseter, Pixar


#11 Gotama

Gotama

    Member

  • Members
  • PipPip
  • 15 posts
  • LocationSouth Africa

Posted 12 May 2013 - 05:55 PM

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

Much love



#12 tarr_bot

tarr_bot

    Newbie

  • Members
  • Pip
  • 9 posts
  • twitter:@megalodactyl
  • LocationCalifornia

Posted 25 June 2013 - 04:24 PM

Great collection of info! 



#13 JacobChristopher

JacobChristopher

    Newbie

  • Members
  • Pip
  • 2 posts
  • twitter:@jakemcms

Posted 08 August 2013 - 11:11 AM

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!



#14 remvst

remvst

    Advanced Member

  • Members
  • PipPipPip
  • 357 posts
  • twitter:remvst
  • LocationAmiens, France

Posted 08 August 2013 - 12:22 PM

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 ;)



#15 JacobChristopher

JacobChristopher

    Newbie

  • Members
  • Pip
  • 2 posts
  • twitter:@jakemcms

Posted 08 August 2013 - 12:25 PM

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!



#16 Lachsen

Lachsen

    Member

  • Members
  • PipPip
  • 15 posts
  • twitter:lachsen

Posted 20 August 2013 - 03:39 PM

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.

www.cross-code.com - Throwing Energy Balls in HTML5!


#17 matheusbn

matheusbn

    Member

  • Members
  • PipPip
  • 18 posts

Posted 26 August 2013 - 10:56 AM

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.cr...d.com/code.html

Private Members: http://javascript.cr...om/private.html

Prototypal Inheritance: http://javascript.cr...prototypal.html

 

Matheus.


My HTML5 Games/Demos
 
#1 - Prince of Persia Clone: http://www.mazeware....ceofcanvas.html
 
#2 - Super Mario Kart Clone: http://www.mazeware....canvaskart.html
 
 
 

#18 Arrow_x86

Arrow_x86

    Member

  • Members
  • PipPip
  • 22 posts
  • twitter:https://twitter.com/Arrow_x86
  • LocationAlgeria

Posted 07 September 2013 - 04:30 PM

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



#19 DonRicardoJR

DonRicardoJR

    Newbie

  • Members
  • Pip
  • 1 posts
  • twitter:@DRicardoDesigns

Posted 24 October 2013 - 08:48 PM

/* 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 

  • Yail Peralta likes this

#20 Gustavgb

Gustavgb

    Advanced Member

  • Members
  • PipPipPip
  • 80 posts
  • LocationDenmark

Posted 26 October 2013 - 03:32 PM

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


Check out my games at http://games.gustavgb.dk!





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users