/learn-javascript

A Series of Simple Steps in JavaScript :-)

Primary LanguageHTMLOtherNOASSERTION

learn-javascript

Open Source Love

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.

Temp Start Image

Where do I Start?!

Option 1

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 & CSS3

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

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

Once you have learned basics you need to focus on "The Good Parts":

JavaScript: The Good Parts

Once you have mastered the Good Parts, begin to hone your craft by learning the correct "Patterns" for writing efficient code:

JavaScript Patterns

Learning JavaScript Design Patterns

Now that you know the language patterns its time for Test Driven Development (TDD):

Test-Driven JavaScript Development

Testable JavaScript

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

Now you are getting quite good at but your JS code is still not performing like Google's ...

High Performance JavaScript

You're feeling pretty confident in your JS skills you want to take it to "Ninja" Level:

Secrets of the JavaScript Ninja

Eloquent Javascript


  • It's for the beginners of 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 ...?

Option 2

Coming Soon Sign

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

Introduction

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:

Nothing to "Install" or "Configure"

One of the most compelling features of JavaScript is that it runs in browsers!

Basic Data Types

Variables

Storage

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.

What Should I Call My Variable?

The general rule with variable names is: be descriptive and consistent.

Read More

Boolean

True or False

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
}
Truthy & Falsy ... What?!

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.

Read More

Strings

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: http://repl.it/M4E

Read More

Numbers

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: http://repl.it/MrW

Numbers allow us to do Math!

var a = 1,
    b = 2,
    c = a + b;
console.log(c); // 3

Try: 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

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.

Objects

Null

Undefined

Reserved Words

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

Read More

Functions

Test First Development

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.

Maintainable JavaScript

We spend most of our time maintaining code. http://youtu.be/nZihjH6_Qns

Workflow

Paul Irish (Google): http://youtu.be/bqfoYaKCYUI

REgular Expressions

Good video by Lea Verou: http://youtu.be/EkluES9Rvak

Research

Existing Online Learning Tools

Try Ruby > Code School

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.

Scripty Books = Interactive Tutorials (Paid)

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)

References / Bibliography

Unrelated but Interesting

@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