Javascript 101

Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page

So, you have landed on this page from a google search or your teammate gave a link to here or you stumbled upon my blog accidentally and found the content to be nice but a bit advanced? And you also felt like building these apps but you think your knowledge of Javascript is limited and you want to expand on it. Or you just saw the link Javascript 101 when you visited my blog and landed here.

Whom ever you are Welcome!!!

In this post, I will not teach you Javascript but I will show you how to navigate around it and share resources which will be helpful for you to understand and work with it.

There are so many awesome tutorials out there, this is just a road map on how to connect them. If you think any part of this tutorial can be made better, feel free to drop a comment.

The path we are going to follow is simple. Learn what & how Javascript. What & how Javascript + Web Browser and What & how Javascript + Server.

So, Let us get started.

Javascript Essentials

The first thing you need to know is that Javascript was introduced to make the webpages dynamic. Before Javascript it was all Java Applets. So Brenden Eich, the father of Javascript built this language in 10 days (yes 10 days), back in 1995.

You can find an awesome elaborated video by Douglas Crockford on how it all started.

You can find below another video by Douglas Crockford on the History and basics of Javascript programming language

Also check out

Note : Some content might overlap across videos. 

Now that you have some knowledge about the language and its origins, I recommend going through A re-introduction to JavaScript from MDN.

A re-introduction to JavaScript (JS tutorial)

Moving ahead, now, we will look at how Javascript and DOM go hand in hand. The Document Object Model Eloquent JavaScript

Next, you can go through chapter from  by Marijn Haverbeke.

The Document Object Model :: Eloquent JavaScript

Next check out the Handling Events chapter from the same book. You can also watch the below video on Event bubbling and Capturing for a better understanding of the concepts.

Now that you understand what DOM manipulation is and what events are and why we need them, we will move on to AJAX.

Around the year 2005 the web appeared to be almost dead and Javascript was used for form validation at most. Then came along AJAX – Asynchronous Javascript And XML. The way to communicate with the server without refresh the entire page.

This one component changed the fate of Javascript to what it is today! You can know more about from it Douglas Crockford.

Sweet right!

With this, we kind of covered all the basic parts of native Javascript.

But today, knowing jQuery is as essential as Javascript itself when working with the web. So, I am adding jQuery to the essential Javascript part.

jQuery is a simple wrapper around native Javascript methods that makes ease of interacting with the web easy. You write very little code and you achieve a lot from it. I recommend watching the below video series on jQuery

I would highly recommend lots of hands on. Because “Knowing is different and doing is different.

Advanced Javascript

Now that you have a decent understanding on what Javascript is and where it fits, you are ready to move on to the next level.

First stop Douglas Crockford’s video on Advanced Javascript

You can download all the parts of the video from here

Best resources to learn JavaScript

Next, Introduction to Object-Oriented JavaScript from MDN. Then Inheritance and the prototype chain. Next, go through JavaScript Garden’s most quirky parts of the JavaScript programming language to look at Javascript from a different angle.

Some more quirks from wtfjs.

wtfjs – a little code blog about that language we love despite giving us so much to hate

How can one master Javascript with out going through Addy Osmani’s Learning JavaScript Design Patterns

Learning JavaScript Design Patterns

Also checkout JavaScript Tutorial: Understand JavaScript in Depth

Check out the below video by Rebecca Murphy on Writing Testable JavaScript

And a video : Quick and Easy JavaScript Testing by Tuts+ Code

Now that you have seen the W’s of Javascript, you can get a sense of understanding where frameworks like Backbone.js, Ember.js, Angular.js, Closure library and so on fit in when developing applications on the client side.

This kind of wraps up the Basic to Advance concepts of Javascript. I will keep updating this page when I find something useful and relevant.

Javascript on Server

So far we have dealt with Javascript on the client side now we will take a look at Javascript on the server side.

The first and most important difference between Javascript on the client side and Javascript on the server side is, the global object. In the browser the global object is window. Because it makes sense that we are working inside a windowed environment. And on the server it is the Operating system process. Also Javascript on the server, does not have to deal with DOM or HTML or CSS for processing. Its all Javascript.

Javascript on server started with Node.js. Node.js uses Google Chrome’s Javascript V8 engine to power itself.

New to V8, check this video

An introductory video on Node.js

And then you can follow along the following posts on my blog and be back on your journey


Thanks for reading! Do comment.

@arvindr21

Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Reddit0Buffer this pageFlattr the authorEmail this to someonePrint this page