This post (book?) is a work-in-progess (labour of love) which I have been planning for 5 years and have notes for in various paper/online notebooks. I decided to follow Addy Osmani's example and write this on GitHub.
His book Learning JavaScript Design Patterns (see below) is shared on GitHub through Creative Commons license. https://github.com/addyosmani/essential-js-design-patterns/blob/1.5.2/book/index.html http://addyosmani.com/resources/essentialjsdesignpatterns/book/
My efforst are realeased under the same license: Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 i.e. you are welcome to read this for free, and make corrections, and share it with anyone provided you attibute the source. (mostly to avoid fragmentation and duplication of effort!)
Learning JavaScript is no longer optional for people that want to build amazing web sites, apps & experiences. But getting started can be daunting. A quick search for JavaScript on Amazon yields over five thousand results! Mercifully you do not have to be overwhelmed by the ocean of books/tutorials/videos!
Unlike most of my colleagues I am not a (formally trained) Computer Scientist or "Software Engineer", I created my own curriculum and learned by doing. To a non-programmer it might look like I bluffed my way into getting paid to write code, but that could not be further from the truth. With enough dedication, coding is something anyone can learn.
Read a shelf of books to acquire the knowledge of expert developers.
Here are 11 I have learned a lot from and recommend:
Since JavaScript does not operate in isolation in the Web Browser, you will need to have some Basic HTML & CSS knowledge to get started:
- Basics of Web Design: HTML5 and CSS3 (Terry Felke-Morris 2011 - 368 pages) http://www.amazon.com/Basics-Web-Design-HTML5-CSS3/dp/0137003382/
After you know a bit of HTML & CSS Keith & Sambells (2010) will give you a gentle and interesting introduction to the Document Object Model (DOM) and how to use JavaScript in the browser:
- DOM Scripting: Web Design with JavaScript and the Document Object Model (Jeremy Keith & Jeffrey Sambells 2010 - 336 pages) http://www.amazon.com/DOM-Scripting-Design-JavaScript-Document/dp/1430233893/
Once you have some foundational web development skills you can pick a book that is focussed on learning JavaScript with plenty of tutorials:
- Javascript for Beginners (Mark Lassoff 2013 - 292 pages): http://www.amazon.com/Javascript-Beginners-Mr-Mark-Lassoff/dp/0988842955/
Once you have learned basics you need to focus on "The Good Parts":
- JavaScript The Good Parts (Douglas Crockford 2008 - 147 pages): http://www.amazon.com/JavaScript-Good-Parts-Douglas-Crockford/dp/0596517742/
Once you have mastered the Good Parts, begin to hone your craft by learning the correct "Patterns" for writing efficient code:
- JavaScript Patterns (Stoyan Stefanov 2010 - 236 pages): http://www.amazon.com/JavaScript-Patterns-Stoyan-Stefanov/dp/0596806752/
- Learning JavaScript Design Patterns (Andy Osmani 2012 - 254 pages): http://www.amazon.com/Learning-JavaScript-Design-Patterns-Osmani/dp/1449331815/
Now that you know the language patterns its time for Test Driven Development (TDD):
- Test-Driven JavaScript Development (Christian Johansen, 2010 - 600 pages): http://www.amazon.com/Test-Driven-JavaScript-Development-Developers-Library/dp/0321683919/
- Testable JavaScript (Mark Ethan Trostler 2013 - 274 pages): http://www.amazon.com/Testable-JavaScript-Mark-Ethan-Trostler/dp/1449323391/
And if you plan on working in a team of more than one person, you will need to ensure your code is maintainable:
- Maintainable JavaScript (Nicholas C. Zakas 2010 - 242 pages): http://www.amazon.com/Maintainable-JavaScript-Nicholas-C-Zakas/dp/1449327680/
Now you are getting quite good at but your JS code is still not performing like Google's ...
- High Performance JavaScript (Nicholas C. Zakas 2010 - 242 pages): http://www.amazon.com/Performance-JavaScript-Faster-Application-Interfaces/dp/059680279X/
You're feeling pretty confident in your JS skills you want to take it to "Ninja" Level:
- Secrets of the JavaScript Ninja (John Resig 2012 - 392 pages): http://www.amazon.com/Secrets-JavaScript-Ninja-John-Resig/dp/193398869X/
- It's for the beginners of javascript.
3303 pages. If you read a page every 2 minutes
(bear in mind that this is code you need to understand because
later chapters build upon the knowledge so you cannot skim-read it...)
it would take 6600 Minutes or 110 Hours.
You could do that in a couple of weeks, right...? ;-)
No! Reading an hour a day it would take you 3.5 months
(if you didn't skip any days)...
What if someone condensed all that knowledge into a Simple Series of Step-by-Step Interactive Online Tutorials ...?
If this sounds like something that would be useful to you or your team, Get in touch and let me know! - http://www.linkedin.com/in/nelsonic
The Preface of JavaScript The Good Parts (Crockford, 2008) explicitly says:
This is not a book for beginners ... This is not a book for dummies.
Douglas Crockford is the Grandfather of JavaScript. He poineered using JS for web application development in the 90's, was the Cheif of JS @Yahoo and is now the "architect" @PayPal. While Crockford is an authority on JS he makes no attempt to teach beginners. This is a tragegy which I intend to remedy.
Watch Crockford's Intro to JS: http://youtu.be/v2ifWcnQs6M its a fantastic video if you already have programming experience, but for people without a CS Degree it uses way too many technical terms.
A few of Douglas Crockford's best videos:
- JavaScript: Your New Overload: http://youtu.be/Trurfqh_6fQ
- JavaScript: Really. JavaScript: http://youtu.be/lTWGoL1N-Kc
One of the most compelling features of JavaScript is that it runs in browsers!
Variables let us (temporarily) store information so we can access ("retrieve") it later. We create a variable using the var keyword:
var favoriteColor = "green"; // quotation marks indicate this is a "String"
console.log("My Favorite Color is: "+favoriteColor);Try: http://repl.it/M3D
Here we are creating a variable called favoriteColor and assign it the value of "green". Later we can use this variable in a console.log() to dispaly a message on the JavaScript console.
The general rule with variable names is: be descriptive and consistent.
- What is a Variable: http://en.wikipedia.org/wiki/Variable_(computer_science)
- JavaScript var: http://stackoverflow.com/questions/2485423/javascript-is-using-var-to-declare-variables-optional
- JavaScript console.log: http://stackoverflow.com/questions/4539253/what-is-console-log
A boolean value can either be true or false.
/*jslint browser: true, devel: true */
var asleep = true; // notice there are no quotation marks for true/false
if (asleep === true) {
console.log("I'm very tired, please do not wake me!");
} else {
console.log("Wide awake, lets write some code!");
}Try: http://repl.it/M3K
An example of how/where we use a boolean value in "real" code:
var connected = true; // if our user is connected to the internet
if(connected === true) {
sendDataToServer(); // Send data to server for processing/saving/sharing
} else {
saveDataLocally(); // Keep data on local machine
}In JavaScript the following values are described as falsy:
- false
- empty string ("")
- null
- undefined
- NaN (which means Not-a-Number!)
- +0 & −0 (Zero)
By contrast everything else is considered "truthy". If in doubt use the tripple-equals comparison === sign to compare two values and confirm if a variable is truthy or falsey.
- Boolean Data Type: http://en.wikipedia.org/wiki/Boolean_data_type
- Truthy vs Fasly (with examples): http://docs.nodejitsu.com/articles/javascript-conventions/what-are-truthy-and-falsy-values
- Sitepoint truthy/falsy article: http://www.sitepoint.com/javascript-truthy-falsy/
Strings are text (characters stringed together). In javascript we use double-quotes when creating ("declaring") a string.
var myString = "Any text inside quotes is a string we can re-use later!";
console.log(myString); // simply displays the myString on the JS consoleTry: http://repl.it/M4E
-
More about *Strings than you will ever need to know: http://en.wikipedia.org/wiki/String_(computer_science)
-
Using single quote character ' for strings is frowned upon by experienced JS developers because they are easily confused with apostrphe or backticks. see: http://www.cs.sfu.ca/~ggbaker/reference/characters/
JavaScript only has one type of number. 1 and 1.0 are considered equal.
var a = 1,
b = 1.0;
console.log(a === b); // trueTry: http://repl.it/MrW
Numbers allow us to do Math!
var a = 1,
b = 2,
c = a + b;
console.log(c); // 3Try: http://repl.it/MrY
We will dive into the Math library later on. If you can't wait, read: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math
Arrays allow us to create a list of items. We create a new array using the square brackets [ ] e.g:
var myArray = []
console.log("My Array has "+myArray.length +" items in it!");Try: http://repl.it/Mr0
Somewhat confusingly (though you will soon get used to it) arrays are
zero-indexed this means that to access the first item
in an array we use myArray[0]
e.g:
var weekDays = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
console.log(weekDays[0] +" is the first weekday!"); // Monday is the first weekday!Try: http://repl.it/Mr1
There are many built-in methods we can use with arrays.
Variables and Functions/Methods Cannot be any of these Reserved Words:
- abstract
- boolean break byte
- case catch char class const continue
- debugger default delete do double
- else enum export extends
- false final finally float for function
- goto
- if implements import in instanceof int interface
- long
- native new null
- package private protected public
- return
- short static super switch synchronized
- this throw throws transient true try typeof
- var volatile void
- while with
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Reserved_Words
- http://en.wikibooks.org/wiki/JavaScript/Reserved_Words
- http://stackoverflow.com/questions/26255/reserved-keywords-in-javascript
One of my biggest gripes with all the "Beginners" JavaScript Books I've read is that they either don't cover testing at all or have an afterthought chapter towards the end of the book like
oh, and there's this thing called "testing" which you really should do...
Meanwhile most books teach you a heap of bad habits which are very difficult to correct later on.
We spend most of our time maintaining code. http://youtu.be/nZihjH6_Qns
Paul Irish (Google): http://youtu.be/bqfoYaKCYUI
Good video by Lea Verou: http://youtu.be/EkluES9Rvak
The original TryRuby online tutorials (available at: http://tryruby.org/levels/1/challenges/0 ) are superb! If I was to chose an online code learing series TryRuby.org would be it!
From the same team: https://www.codeschool.com/paths/javascript
Naturally I signed up to codeschool and completed all the JS tutorials.
This past year I have spent a great deal of time learning Front-end (MVC/MVVM) frameworks (e.g: Angluar, Ember, Knockout and Backbone) while learning Backbone.js I cam across: ScriptyBooks: http://www.scriptybooks.com/books/backbone-coffeescript/chapters/quick-tour paid the $18 and did the interactive tutorials. As good as the Scripty system is I found it lacking in a few key areas:
- No Offline Use (had to be on the website for it to work!)
- Difficult to bit-size the learning (if you only have 2 mins)
- Best Way to Learn JS: http://net.tutsplus.com/tutorials/javascript-ajax/the-best-way-to-learn-javascript/
- Beginners Guide: http://stackoverflow.com/questions/2970314/a-beginners-guide-to-learning-javascript
- Best Resources: http://stackoverflow.com/questions/11246/best-resources-to-learn-javascript
- Eloquent JS: http://eloquentjavascript.net/
- CodeAcademy: http://www.codecademy.com/tracks/javascript
- CodeSchool: https://www.codeschool.com/paths/javascript
- JavaScript Peculiarities: http://tech.pro/tutorial/1669/21-javascript-parts-i-struggle-to-remember-
- NodeJitsu has a few good JS articles: http://docs.nodejitsu.com/articles/javascript-conventions/
- Why Would I use Node.js? http://www.toptal.com/nodejs/why-the-hell-would-i-use-node-js
- Mozilla JavaScript Resources: http://www.elijahmanor.com/2012/09/control-complexity-of-your-javascript.html
- Douglas Crockford Code Conventions: http://javascript.crockford.com/code.html
- Anton Kovalyov explains why he forked JSLint (to create JSHint): http://anton.kovalyov.net/p/why-jshint/
- Stack discussion of JSHint vs JSLint: http://stackoverflow.com/questions/6803305/should-i-use-jslint-or-jshint-javascript-validation
- Presentation on JavaScript Automation: http://kjbekkelund.github.io/presentations/js-build/#1
- Carl's QUnit + Sinon post: http://www.unboxedconsulting.com/blog/making-javascript-testing-in-the-browser-not-suck-with-sinon-js-part-1
@todo: add to Maintainable JS: http://net.tutsplus.com/tutorials/javascript-ajax/principles-of-maintainable-javascript/
@todo categorize: - JS Build tools: http://blog.millermedeiros.com/node-js-ant-grunt-and-other-build-tools/
JSHint: http://www.elijahmanor.com/2012/09/control-complexity-of-your-javascript.html