Every time I make a search either in Google® or in Bing® about how to do some coding in JavaScript I noticed that most programmers are using the famous Scriptaculous. So I end up not knowing exactly how to do something from scratch and I had to figure out how.
Today I want to show how to simplify your JavaScript like those fancy set of codes. I’m not saying they are bad, not at all, but when you need to modify something is hard when you use someone else code. The best practice is to create your own. Specially for special clients that are always asking for new things.
In most of this set of codes they’ve make it easy when you need to request for an HTML object with an identifications. For example:
<div id="special"></div>
When you’re using JavaScript to add some text in this specific -div- you need to use the following code:
document.getElementById('special').innerHTML="The message to display";
This will write in the client side – what you see in the browser after loaded – the message written after the innerHTML. Nothing fancy, but when your code is getting bigger and bigger, writing this line get annoying. But how can we avoid that? Simply write your own function. I do it like this:
function ei(divId)
{
var eir = document.getElementById(divId);
return eir;
}
Now if I want to refer to an specific id to write something on it I just need to code:
ei('special').innerHTML="The message to display";
The function is very simple. First I named the function – ei – that means “element id“, is easier for me to remember instead of $ sign as in many sets of codes. The the function will request a variable called divId:
function ei(divId)
When the function is running is going to enclose the JavaScript statement – that are case sensitive – “document.getElementById” in a variable called eir and then the variable divId will grab the value you put in the function ei([name of id value]):
var eir = document.getElementById(divId);
Then to return this statement with the value just command to return the variable eir value back:
return eir;
This help me to code faster. As I say, it’s very simple.
Another function I like to use is hiding and displaying an element. For this you need to use two set of codes in JavaScript and CSS. As you might know, to fully hide an element in CSS you need to use two attributes: display:none; and visibility:hidden;. If you only use visibility:hidden; you will notice that the element in the HTML is not displayed but the space is still there (specially with Internet Explorer – which represents 56% of internet users). So, in order to make it completely disappear you need to use both attributes. For example:
CSS code
#special {
display:none;
visibility:hidden;
}
Now if you want JavaScript to change these attributes after the page is loaded you need to code the following:
document.getElementById('special').style.display='inline-block';
document.getElementById('special').style.visibility='visible';
But, as I’m trying to show in this tutorial, to simplify your coding you might want to create a set of two functions so you don’t need to code this every time. The code will be as follow: –will use the first function I create with these functions too–
function showElement(divId)
{
ei(divId).style.display='inline-block';
ei(divId).style.visibility='visible';
}
function hideElement(divId)
{
ei(divId).style.display='none';
ei(divId).style.visibility='hidden';
}
As you see, I create two functions, one to show and another one to hide back. This three simple functions will help you a little to unclogged your codes. You could also use conditional variables to simplify even further these two functions into one. But that might be another tutorial.
In an HTML script you can use it with any JavaScript attributes like this:
<a class="ajaxbutton" onclick="showElement('special');">Show</a>
If you create a set of functions in JavaScript as the one I just show you, after a couple month you might end up with a set of codes as Scriptaculous, JQuery and many others. But the advantage you will have, is that you will be able to debug it and understand them better.
When you use set of codes, they are just a pack of functions as the ones we just create. If you are new to JavaScript as I am, you know that the best way to learn is to hard code instead of getting the easy way out. For me is essential to know how things work in other to be able to fix any problems that might appears as they will with a customer web page.
Other point is that you can debug your own script easier instead of trying to figure out other programmer’s code. When you’re designing using the help of a browser as Firefox, with the add-on Firebug or Web Developer Toolbar, you will notice that most of these codes are filled with bugs. And when you use them you might have to forget about the W3 page validation approved seal because of those bugs.
Hope it helps. Happy Designing and Coding!