Learning to write (good) JavaScript - resources for beginners

[Charliechin]

Hi guys! I'm doing this course and so far so good, I'm learning about how ECMAScript works behind the scenes. But I'm facing a big problem...

 

How do I apply  my (little) knowledge in JS? I know how to assign  a single function to handle multiple events for example, but I can't create a challenge for myself with some abstract concepts.

 

Any ideas?

 

BTW, this thread is very useful to me!! Thanks a lot guys

[plicatibu]

May a suggest you add books / links related to game development theory?

[Riddik]

Hi everybody!

 

I am C++ game programmer.

I want to try to write a game for browsers.  I know Javascript a little bit. 

Me start with the books for beginners or is there a more appropriate solution for me? 

Thanks for you help.

[plicatibu]

If I were you (well, I'm in the same shoes as you) I'd start learning with Phaser's examples.

 

 

Hi everybody!

 

I am C++ game programmer.

I want to try to write a game for browsers.  I know Javascript a little bit. 

Me start with the books for beginners or is there a more appropriate solution for me? 

Thanks for you help.

[Riddik]

If I were you (well, I'm in the same shoes as you) I'd start learning with Phaser's examples.

 

Awesome! 

Thank you.

[WhiteSoul]

Thank you so much for all this information.

Indeed is a very good place to start and keep learning.

 

Regards, Daniel.

[Canvas]

Thank you Chris for this big list of tutorials, however have you got any specific to developing javascript code for html5 canvas? I.E. how to structure a basic game with javascript? Or how to development a html5 canvas game with javascript?

[vitali-attila]

Hello. I've a question. How do I add image files to my project in Brackets and NetBeans IDE?  I am reading "Discover Phaser" by Thomas Palef now. In his "First Project" chapter I am creating animation. Though I tried coding it on several IDEs, I didn't get it work. And code editors found mistakes in phaser.min.js as well as couldn't define the variable Phaser in main.js. What am I doing wrong with it? Please answer.

[Sir_Everard]

Noticed this book was not on the list:

Learning Javascript Design Patterns

http://addyosmani.com/resources/essentialjsdesignpatterns/book/

 

It's free as an ebook and I think after you learn the basics of javascript this book is a real boost to your tool kit as a developer, especially if you haven't done any programming at all.

[rich]

This blog post is absolutely essential reading (for any level developer)

 

http://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html

[trasheater]

Really loving the resources here. Should keep me occupied for a few weeks.

 

@rich That was a hard read. I may need to read it a few more times to really understand it.

[agileTron]

Jon Duckett's books on  Javascript and JQuery (and also his HTML and CSS book) are outstanding for visual learners. I'm also liking Kyle Simpson's You Don't Know JS series. His first in that series is on Github for free, I believe. Admittedly most of the O'Reilly books I own put me to sleep and end up getting used as door stops.

 

Code Avengers teaches you Javascript through game tutorials. General Assembly offers a free class called Dash which is for web design, but they have a fun build your own robot in CSS with some  beginner Javascript and also a Javascript Mad Libs game.  Aquent Gymnasium also offers a free Javascript class. Those sites are along the lines of the same type of tutorials you might get with Codecademy(free), Treehouse Tuts or CodeSchool. Most of these are not specific to working with Canvas however. Udacity has this course but I haven't tried it: https://www.udacity.com/course/cs255.

[druphoria]

By far the best resource for progressing beyond a beginner stage in javascript:

 

https://github.com/getify/You-Dont-Know-JS

 

Required reading for all HTML5 game developers. This will turn you from someone who hacks away blindly without understanding the language into a true javascript ninja who understands how the language works and how to make it do what you want it to do.

[zigazak]

This video helped me IMMENSELY in understanding the JavaScript language from a low level perspective. A lot of "ohhhh, so that's how it works", moments.

 

https://www.youtube.com/watch?v=Bv_5Zv5c-Ts

[Website-Design1]

Hey there!

 

 

I learn the basics of javascript from this source, Just feel free to open his link its nice: https://www.brotsky.tv/category/javascript/

[Oliver]

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

 

Thank you for writing this! It's really useful to see as many different examples of JS as possible when trying to learn. You've made a lot of games!

 

I'm working through the W3Schools JavaScript tutorials now http://www.w3schools.com/js/default.asp

 

I've never used W3Schools Tutorials before but now I am I really like them. They get stuck in straight away, rather than showing you a single line with var a = "number" and building on this incredibly slowly chapter by chapter they are instead written as though it's been assumed I've already seen words like function and if before. I know these are programming things, I just want some examples of them in use now please!! Luckily this is where the well known W3Schools turns up! There's already things I can click on to change by page 2!

<html><body><h1>JavaScript Can Change Images</h1><img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180"><p>Click the light bulb to turn on/off the light.</p><script>function changeImage() {    var image = document.getElementById('myImage');    if (image.src.match("bulbon")) {        image.src = "pic_bulboff.gif";    } else {        image.src = "pic_bulbon.gif";    }}</script></body></html>

[spritelygames]

For me, the most useful thing to learn about Javascript was modules. Without it games can quickly become unwieldy.

 

Browserify is an easy way of implementing modules in your Javascript code.

[hudwol]

Forgive me for reviving this, although it is sticky. I'm much past learning JavaScript for web design and development. I just don't aspire to do that anymore. I feel, though, that all these tutorials and books are going to teach me JS in relation to web design. Is there a path to take in order to learn JS as it applies to creating games?

[Skratti]

I did have severe problems getting the knack of javascript, despite (or because of) having some knowledge in other languages.

 

The book "making isometric social real-time games with html5 css3 and javascript" finally got me on the right track. It's rather short (165 pages), but the examples are good and it teaches the basics of objects in JS.

Later, I read "JavaScript: The Definitive Guide",  which was fun since I had already some experience, and could verify and deepen my knowledge...

[antonio]

For me, the best single source of learning and understanding JS was this course by Anthony Alicea:

 

https://www.udemy.com/understand-javascript/

 

Usually it's not that cheap but Udemy does sales really often, where the whole course about 20 € or $.

He explains everything slowly and very low-level; what does the compiler understand when it reads a "." or ";".

(I also did his Angular and Node courses—highly recommended if you're into web-development)

 

 

One post which helped me understand JS-Game-Development was:

http://vasir.net/blog/game-development/how-to-build-entity-component-system-in-javascript

 

It's about the Entity-Component-System-Way of doing things.

I had quite some experience with JS.

But for making games, this was a huge step.

I knew this principle from Construct and Unity, but never knew how to do it myself.

[pokeaang]

Oh those are some great links! Thanks!

[Nikos123]

Here is a step by step video series on making space invaders in JS:

Screenshot: 

[special_ed]

I've spent the past two years using JavaScript almost exclusively. Before JavaScript, I spent about 8 years working mostly with Java, C, C++, and Python.

Here are my own recommendations, based on these past 2 years:

#1 Don't take anyone's word as gospel. Don't take my word as gospel either. JS is a very flexible language. There's a lot of freedom to do things in a lot of different ways. No one is in agreement about JavaScript best practices. Very smart, popular people within the community will oftentimes directly contradict each other or just change their minds. Don't think that you're not a newb because you read a book, read a tutorial, or watched a video where the author promised to take you from beginner to intermediate, or intermediate to advanced - none will. You'll have to take in around a dozen of those resources and work on at least half a dozen significant projects before you're not a newb.

#2 Learn functional programming. To a certain degree, this is essential for JS developers because a lot of it's power comes from it's functional aspects. To a certain degree, it's not that essential because of the aforementioned flexibility and ability to write in or mimic multiple paradigms. Anyway, just do it, if for no other reason than the fact that your first language was likely an object-oriented language with classical inheritance like Java or Python. In which case, you may struggle when you brush up against functional concepts or codebases - don't act like you already know everything. The functional programming priesthood will say that classical inheritance, the "new" keyword, mutable state, and impure functions are the devil. I'm not sure if that's the case and I find a lot of their arguments about it kind of porous. Regardless, you should definitely at least learn how to do what their espousing and recognize when it'll save you from headaches in your own code.

#3 Go ahead and start using ES6+. You certainly don't have to.. You can write in ES5 and everything will be fine. The majority of tutorials out there will be in ES5, as will most libraries, frameworks, and codebases. If you're interested in game development, however, then I imagine that you're someone who likes to be ahead of the curve. Using ES6+ will force you to start using things like Node, npm, and the various tools related to transpilation. The ability to create modules is also a default part of the language, and that will help you architect your code base in a fashion similar to other languages that support imports/exports by default. You might also discover that ES6+ is just better than ES5. I'd further recommend using Webpack (with Babel and eslint) and configuring so that everything is compiled and the browser is refreshed every time you save a file.

#4 Find an editor or IDE that works for you. I've used many. I don't like most of them. Right now I use Vim and occasionally Atom when I'm feeling lazy. I'd recommend Atom for beginners. I'd recommend Vim for people who quickly discover that they hate most editors and IDEs, making sure to pimp it out with lots of plugins to bring common IDE-like functionality.

#5 Go ahead and start using Git and GitHub. Make sure that you know what you're doing. Start committing as often as possible and put the link to your GitHub on your resume, portfolio, or LinkedIn page. If you're not doing these things, then you're going to look dumb to most people if you start shopping around for a job.

#6 Don't get too distracted by the JavaScript community. There are a lot of people with a lot of different ideas. There are a lot of frameworks, libraries, and tools. There's more than one version of JS that people are actively using and some people essentially compose their own. People are compiling/transpiling JS from a variety of other languages. People are writing JS for the front end, back end, mobile devices, smart TVs, embedded systems, and more. Front-end web development, however, is where it all started and most within the community still come from that mindset - be wary of them, especially since you want to be a game developer. I personally think that web app development has a lot to learn from the history of game development because web apps are obviously becoming increasingly complex with graphics and interactivity. You might discover that after developing games, you'll have a leg up on other web developers for their own jobs.

[Bhupi]

On 17/11/2016 at 7:39 AM, special_ed said:

#4 Find an editor or IDE that works for you.

#5 Go ahead and start using Git and GitHub.

#6 Don't get too distracted by the JavaScript community.

Sorry for commenting so late. This is an awesome thread and has some really good material.

Agree with the above, specially with #5. This is going to become more important as time progresses.

For a vast majority of developers, the approach towards learning a language is to somehow make things work!! This approach shows results in the beginning, but is counter productive in the long run. Learning what to do is as important as what not to do. Most resources focus on the former.

BTW, I liked the "https://github.com/getify/You-Dont-Know-JS" series.

[Nihar]

You can learn a ton about the language itself by reading. A good place to start is this collection of free online resources.

http://jsbooks.revolunet.com/

My favorites from this site are as follows: http://eloquentjavascript.net/contents.html http://bonsaiden.github.com/JavaScript-Garden/http://www.addyosmani.com/resources/essentialjsdesignpattern... http://jstherightway.com/  https://hackr.io/tutorials/learn-javascript

Mozilla has excellent JavaScript material: https://developer.mozilla.org/en-US/docs/JavaScript/Guide https://developer.mozilla.org/en-US/docs/JavaScript/Referenc...

As far as print goes, you'll want these books in your reading list:

JavaScript: The Good Parts by Douglas Crockford Secrets of the JavaScript Ninga by John Resig