Tips for Javascript

If you are taking your first steps in Javacript and you are already starting to be dirty and messy ... You have no excuse for a twist to write the ordered code and everything will be easier.
The forums are full of requests for information about Ajax, DOM and how some libraries or effects are used. There is an extraordinary amount of information, scripts, libraries that are being developed, blogs and new sites specialized in this subject, you just need a little time and have a look ... it is very easy to find the best ones on Digg.com or on . icio.us , those days were over when Javascript and DHTML became persona non grata as the main skill in your CV.
The vast majority of Javascript code is today much cleaner than in the "era" DHTML.
Now is a good time to become a Javascript enthusiast. Although some defects that happened long ago are repeated however.
Here is a series of tips that will make it easier for you to keep your Javascript code organized, some tips are too obvious but we all know that man is the only animal that ...
Keep the syntax and structure of your code neat and clean
This means that you save, for example, a line length limit (80 characters) and that you program reasonably small functions. A fault is to think that in a long function we can do everything.
Having a reasonable size for your functions means that you can reuse them when you extend the code, do not be extremist and do functions of one or two lines. This can be more confusing than using a single function.
This is an example that shows what is the right measure in terms of the size of the functions and the division of tasks:
function toolLinks () {
var tools = document.createElement ('ul');
var item = document.createElement ('li');
var itemlink = document.createElement ('a');
itemlink.setAttribute ('href', '#');
itemlink.appendChild (document.createTextNode ('close'));
itemlink.onclick = function () {window.close ();}
item.appendChild (itemlink);
tools.appendChild (item);
var item2 = document.createElement ('li');
var itemlink2 = document.createElement ('a');
itemlink2.setAttribute ('href', '#');
itemlink2.appendChild (document.createTextNode ('print'));
itemlink2.onclick = function () {window.print ();}
item2.appendChild (itemlink2);
tools.appendChild (item2);
document.body.appendChild (tools);
}
You can optimize this function by separating each task with its own function:

function toolLinks () {
var tools = document.createElement ('ul');
var item = document.createElement ('li');
var itemlink = createLink ('#', 'close', closeWindow);
item.appendChild (itemlink);
tools.appendChild (item);
var item2 = document.createElement ('li');
var itemlink2 = createLink ('#', 'print', printWindow);
item2.appendChild (itemlink2);
tools.appendChild (item2);
document.body.appendChild (tools);
}

function printWindow () {
window.print ();
}

function closeWindow () {
window.close ();
}

function createLink (url, text, func) {
var temp = document.createElement ('a');
temp.setAttribute ('href', url);
temp.appendChild (document.createTextNode ( buy essay ));
temp.onclick = func;
return temp;
}

Cleverly uses the names of variables and functions
This is an essential programming technique, it uses variable names and functions that are totally descriptive and even another person can get to think about what function they perform before seeing the code.
Remember that the use of hyphens or capital letters to concatenate different words is correct, in this case it is more typical to use capital letters due to the syntax of the language, (eg getElementsByTagName ()).

ChangeFormatDate ();
change_date_date ();

Comment the code
Thanks to the comments you can get rid of more than one headache, it is better to solve the problem only once.

How can you check in any programming book each line has comments explaining its objective.

Difference the variables depending on their importance
This step is simple: Place those variables that are used throughout the script in the header of the code, in this way you will always know where to find these variables that are what determine the result of our code.

function toolLinks () {
var tools, closeWinItem, closeWinLink, printWinItem, printWinLink;

// temporary variables
var printLinkLabel = 'print';
var closeLinkLabel = 'close'; #

tools = document.createElement ('ul');
closeWinItem = document.createElement ('li');
closeWinLink = createLink ('#', closeLinkLabel, closeWindow);
closeWinItem.appendChild (closeWinLink);
tools.appendChild (closeWinItem);
printWinItem = document.createElement ('li');
printWinLink = createLink ('#', printLinkLabel, printWindow);
printWinItem.appendChild (printWinLink);
tools.appendChild (printWinItem);
document.body.appendChild (tools);
}

Separate the code text
You can separate the text from the code, using a document called texto.js in JSON format.

An example that works very well could be:

var locales = {
'en': {
'homePageAnswerLink': 'Answer a question now',
'homePageQuestionLink': 'Ask a question now',
'contactHoverMessage': 'Click to send this info as a message',
'loadingMessage': 'Loading your data ...',
'noQAmessage': 'You have no Questions or Answers yet',
'questionsDefault': 'You have not asked any questions yet',
'answersDefault': 'You have not answered any questions yet.',
'questionHeading': 'My Questions',
' answersHeading ':' My Answers',
'seeAllAnswers':' See all your Answers',
'seeAllQuestions':' See all your Questions',
'refresh': 'refresh'
},
' is': {
'homePageAnswerLink': 'Answer a question',
'homePageQuestionLink': 'Ask a question',
'contactHove': 'Loading data ...',
'noQAmessage': 'No questions left',
'questionsDefault': 'Questions remain unanswered' ,
'answersDefault': 'No questions remain',
'questionHeading': 'My questions',
' answersHeading ':' My answers',
'seeAllAnswers':' See all answers',
'seeAllQuestions':' See all questions ',
' refresh ':' Refresh '
},
' fr ': {
}
' of ': {
}
};

This would allow anyone who is not a programmer to translate the text of the script, changing only the tags without having to access the code.

Document the code
Write a good documentation of your script / library or effect. Good documentation gives quality to the code, but ask yourself because there is the classic documentation in any API with all the possible properties and parameters, but without a doubt the best thing of all is to explain with examples that contain a list of possibilities.

Comments

[Tyler V. (he/him)]

I think you have some good ideas in this article, but adding formatting to your code will help make it an easier read (triple backtick before and after block). Then it will display as:

function(var x){
    /** do stuff **/
}