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 https://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:
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:
Once you have some foundational web development skills you can pick a book that is focussed on learning JavaScript with plenty of tutorials:
Once you have learned basics you need to focus on "The Good Parts":
Once you have mastered the Good Parts, begin to hone your craft by learning the correct "Patterns" for writing efficient code:
Now that you know the language patterns its time for Test Driven Development (TDD):
And if you plan on working in a team of more than one person, you will need to ensure your code is maintainable:
Now you are getting quite good at but your JS code is still not performing like Google's ...
You're feeling pretty confident in your JS skills you want to take it to "Ninja" Level:
Eloquent Javascript
https://www.amazon.in/Eloquent-JavaScript-Modern-Introduction-Programming/dp/1593272820
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! - https://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: https://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:
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: https://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.
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: https://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:
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.
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 console
Try: https://repl.it/M4E
More about Strings than you will ever* need to know: https://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: https://www2.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); // true
Try: https://repl.it/MrW
Numbers allow us to do Math!
var a = 1,
b = 2,
c = a + b;
console.log(c); // 3
Try: https://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: https://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: https://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:
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. https://youtu.be/nZihjH6_Qns
Paul Irish (Google): https://youtu.be/bqfoYaKCYUI
Good video by Lea Verou: https://youtu.be/EkluES9Rvak
The original TryRuby online tutorials (available at: https://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:
@todo: add to Maintainable JS: https://code.tutsplus.com/tutorials/key-principles-of-maintainable-javascript--net-25536
@todo categorize: - JS Build tools: http://blog.millermedeiros.com/node-js-ant-grunt-and-other-build-tools/
JSHint: https://elijahmanor.com/blog/control-the-complexity-of-your-javascript-functions-with-jshint