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
<!DOCTYPE HTML>
<html>
<head>
<title>Study_01</title>
<link type="text/css" rel="stylesheet" media="screen" href="general.css"/>
<script type="text/javascript" src="js/jquery-1.6.2.js"></script>
<script type="text/javascript" src="saumyaJS.js"></script>
<script type="text/javascript" src="general.js"></script>
</head>
<body>
<div id="greet">
Hello World.
</div>
<div id="greetPerson">
Hello you, this is JS.
<button id="showBtn" type="button">show</button>
<button id="resetBtn" type="button">reset</button>
</div>
<canvas id="graphics" width="600" height="400"></canvas>
</body>
</html>
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.
