javascript : Making a Library

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.

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.

Making menus with Html-CSS

Continuing the basics of HTML and CSS, lets go further to see how CSS really changes the way of rendering the basic HTML structure. We will be creating some horizontal menus with CSS. The basic HTML structure needed is nothing but an un-ordered list.

  • Page One
  • Page Two
  • Page Three

Well, since these items are going to link to some other pages or other places, we must add some links to them. After all, what is a menu item without a path or link to it! So the final structure will be as below. Note that we have put all the items inside a div with id as “nav-Menu”.


In a real scenario the “href” value would be a real URL, either relative or absolute. But that is part of the content, let us concentrate on building the menus. So all in all the HTML part is over! Thats it! Yes, thats all to it. One simple un-ordered list with links in the list items.
Lets move on to design it with CSS, so that it looks as a horizontal menu items instead of vertical lists. First things first, lets get rid of the default styling of the list items, the CSS would be as below

#nav-Menu ul
{
	list-style: none;
}

Next is to push the list items so as to they come on one line. The CSS for these would be as below

#nav-Menu li
{
	float: left;
}
#nav-Menu li a
{
	float:left;
	display: block;
	width: 9em;
}
#nav-Menu
{
	width: 30em;
}

Thats all to it. One thing to remember here is everything now is a just fine for the menus. But there would be the contents after these menu items and they will be placed after the last menu rather than below the menu items. The fix is to add a style to the next elements with

#main-content
{
	clear: both;
}

Now its the time to add some more visually appealing style to the menu items we just created. These styles are basically margins, borders and color, so the final CSS for the menus look as below.

#nav-Menu ul
{
	list-style: none;
	padding: 0;
	margin: 0;
}

#nav-Menu li
{
	float: left;
	margin: 0 0.15em;
}

#nav-Menu li a
{
	float:left;
	display: block;
	width: 9em;
	height: 2em;
	line-height: 2em;
	border: 0.1em solid #DCDCE9;
	
	text-decoration: none;
	text-align: center;
	
	color: #0D2474;
}

#nav-Menu
{
	width: 30em;
}

Hurray, we have just created a horizontal menu bar with menu items from a simple HTML un-ordered list.

Aptana Studio, free IDE for web design.

This may be apparent by now that web design is not graphics in a page or the colour of the background of the webpage. It has gone well beyond that and for the same reason web designers are attracted towards an IDE (Integrated development environment) that would be best suited for this need. Previously the WYSIWYG kind of IDEs were a thing to look for. But currently it is the web standards, clean code and ease of use is what everyone looks for. Fortunately we are not limited to Notepad in windows or TextEdit on MAC.
One such IDE is APTANA Studio. This is based on the opensource Eclipse IDE. Current version of the IDE is much better than its previous versions and now it comes with project templates for HTML5 applications. There are project templates which are already installed with the IDE itself. There is an option to choose the template to use in your project, and if you are connected to internet then there are options for a template to be downloaded from the source control systems like github. This makes a perfect case for people who are just beginning to use Git or not used to it. That means whenever you create a project with these kind of templates, you are bound to get the latest one form the repository. So you will get the benefit of the awesome developer and designer community, who is constantly contributing to the original source code. And one does not need to know the inside working of the system. Thats a huge plus point.
Well, by this time you must have sensed that Git support is inbuilt with the IDE. So one can always see if the changes are committed or not. That way it will make your code constantly tracked by version control systems. There is a built in terminal(command prompt) inside the IDE. So one dose not need to open it separately to work in a command prompt.
Next is its look and feel and working in different operating systems and this IDE simply the same IDE in Windows and Mac operating systems (I have not tried the Linux version yet).
This supports a lot of languages starting from HTML, Javascript, CSS, PHP, Ruby and Rails. While writing my own CSS and javascript the code hinting and responsiveness of the IDE just blown me away. Its just those simple features, which, if one gets used to, then there would be no coming back to a bare-bone IDE like Notepad or TextEdit. While editing CSS, and adding a colour value, there is a little display as to which colour this value is representing! Thats just too good. There is a web previewer inside the IDE itself, if one needs to test the design one need not leave the IDE too.
Overall in my opinion this is one of the IDEs to get used to if one is doing web design in current age.

Getting into web design action

Once we are familiar with the key concepts of the web, browser and how it works, now its time to see how to get started with it. If you have not yet gone through them, here are the links,
1. introduction
2. getting used to the terms
I hope by now you have gone through the above links. This is not mandatory, but then going through them will bring you to the same page with me. Else it will be a little difficult for any one to understand what is being referred in the tutorial here.
Well, lets get into action. By now, you must be knowing to start with a web-page we at least need 3 files (Not mandatory but good way to segregate different functionality in different files, refer to the “getting used to the terms” reference for more on this ). So the 3 files are, one HTML file, one Javascript file and one CSS file. We will start to put the basic code for these.
The HTML file is stored with an extension of “.html”, CSS files are stored as “.css” and javascript files are stored as “.js” files. Lets write our first html file.
The very basic HTML page code will look something like

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




	





Continue reading