This is kind of looking at javascript from a fresh perspective. It does not assume you to know anything about it. Knowing another scripting language is always an advantage to know things better but sometimes it may come to a negative effect. If you know anything before, its better to assume you do not know that so that we can get up to speed in javascript as quickly as possible.
I hope you have a basic understanding of how to include external javascript and css files inside an HTML document. If not, then please go ahead and follow the posts mentioned below for a quick understanding.
Introduction to HTML
Getting used to the terms
Getting into web design action

Lets setup our experiment with the files listed below

index.html
general.css
saumyaJS.js
general.js

Now, the code inside index file is as below

	


		
		
		
		
		
	
	
		

			Hello World.
		
		

			Hello you, this is JS.
			show
			reset
		
		
		
	

Here we are clearly adding all the CSS and JS files into it. The “general.js” file is where we are going to write the experiment codes. The “saumyaJS.js” is kind of a library we are going to write so as to know the javascript basics and help the experiment. The first line of javascript library includes the JQuery library, if you are not sure about it now, do not worry, just remember that I have used it to select HTML elements from my index.html file. And the JQuery library itself is a huge project,so we will get to that in a future post may be.

I am suggesting to go ahead and read Keith’s blog for getting the hang of javascript environment from a learner’s perspective. He has done a splendid job of putting his 31 days continuous blogpost about javascript.
31 days of Canvas tutorials
March is JavaScript Month. And… Introducing WireLibJS

First and the most important thing is variables in javascript. They are by default “Global”, that means if we define a variable as

a="name";
b=2;
c="message";

Then all these variables are global variables by default. That will allow anyone to access these variables from anywhere. Well, to make local variables we have to define them with “var” keyword. So the definition will go as

var a="name";
var b=2;
var c="message";

Well as you can already guess that there is no restriction in datatype for a variable. And the scope of these local variables are inside a function. In short javascript variables have function level scope. Now lets define a function and add some local variables into it,

myFunction=function(){
	var d=0;
	var firstName='saumya';
	counter = 1;
	
	alert('reset');
};

That means anywhere we need to call this function, we have to call it as below

myFunction();

Thats simple as we define a function with name “myFunction” and invoked it with “myFunction()”. Thats how a function is called.
Now one thing to understand and know is, its better to add as little as possible in global scope. Its a best practice and saves a ton of headache later in the development process. Now in our previous example, we are adding the variable “myFunction” in the global scope. But the variables “d” and “firstName” are in local scope. But then the variable “counter” is in global scope!! Thats the scary part of it. Yeah, anything without a “var” keyword is exposed to Global scope.
The previous example showed how to make a function with a name. It is possible to make a function without a name also, those are called anonymous functions. And since we know, to call a function we have to use “()” at the end of a function, the code below describes how to define an anonymous function and call it.

//makes anonymous function
function()
{
	//Code for function
};
//make the anonymous function and call it at the same time
function()
{
	//Code for function
}();//look at the "()" at the end of the function definition

The problem here is, once the function is called and executed, everything inside the function along with the function itself is not accessible any more. In order to get a reference to the function itself, we need to store it with some name. Thats where the named function comes into picture, that we have seen already as to how to define a named function.
Next we want to make an anonymous function, call it and then save the returned value of the function. A function can return value by using a “return” keyword. Example of a function which returns a value is as below

var myFunction=function(){
return 5;
}();

Now we have a variable named “myFunction” with a value of 5. This is simple but as you can imagine this return type can be anything. The code below shows how to return an “Object”.

var myFunction=function(){
return {one:'fistName',two:'lastName'};
}();

Now “myFunction” simply contains an object with properties “one” and “two”. If we want to access these properties, the call would be as below

myFunction.one;
myFunction.two;

With these knowledge we can write something like below,

var saumyaJS=(function(){
	// --------------- Define -----------------------
	var a,b,c,d,e;//define properties and methods
	// --------------- Configure --------------------
	a='saumya';
	b='ray';
	c=function(msg){
		d++;
		alert(d+':'+msg);
	};
	d=0;
	e=function(){
		d=0;
		alert('reset');
	};
	// --------------- Expose -------------------------
	return {
		firstName:a,
		lastName:b,
		show:c,
		reset:e
		};//expose the properties and methods to outer world
}());

Here simply some local variables are defined, then configured them with values and finally whatever needs to be exposed to outside world, is retuned.
Whoaa!!! We have simply written a simple Javascript library.
If you look into the code a little bit, then its visible that the variable and functions inside the main function is accessible only by the names they are given at the time of returning. If one needs to access the value of “a” from outside then the call would be

saumyaJS.firstName;

But if one tries to access the value as

saumyaJS.a;

then one will get “undefined”!! This is how encapsulation works or simply, how one can hide values of an object in javascript.

This is a very basic concept of javascript, but I think this is the most important concept of javascript too.

Now we can see that whatever we want to access, we have to access through the “saumyaJS”, everything inside that function is not exposed outside or there is no more than one variable exposed to the outside world.

The source files are here to download and see for yourself. Hope that helps someone.