ej.

css

Buscar
Login | Registro

DesarrolloWeb.com > Manuales > Programacin en JavaScript

ConsejosparaescribircdigoJavascript
Por Manu Gutierrez
20 de diciembre de 2007 16 Comentarios Scripts en Javascript

En este artculo puedes encontrar varios consejos bastante

interesantes a la hora de programar cdigo Javascript.
Si estas dando tus primeros pasos en Javacript y
estas empezando ya a ser sucio y desordenado...
No tienes excusa da un giro para escribir el
cdigo ordenado y todo ser ms sencillo.
Los foros estan llenos de peticiones de
informacin sobre Ajax, DOM y como se usan
algunas libreras o efectos. Hay una
extraordinaria cantidad de informacin, scripts,
libreras que estan siendo desarrollados, blogs y
nuevos sitios especializados en esta temtica,
slo necesitas un poco de tiempo y echarle un vistazo... es muy fcil los mejores los
encuentras en Digg.com o en del.icio.us, se acabaron aquellos das en el que Javascript y el
DHTML se convirtieron en persona non grata como habilidad principal en tu CV.
La gran mayora de cdigo Javascript es hoy en dia mucho ms limpio que en la "era"
DHTML.
Ahora es un buen momento para convertirte en un entusiasta de Javascript. Aunque
algunos defectos que ocurrieron tiempo atras se repiten sin embargo.

Aqu os dejo una series de consejos que os har ms sencillo mantener tu cdigo Javascript
ordenado, algunos consejos son demasiado obvios pero todos sabemos que el hombre es
el nico animal que...

Conserva la sintaxis y estructura de tu cdigo limpia y

ordenada

Esto significa que guardes por ejemplo un lmite de longitud de lnea (80 caracteres) y que
programes funciones razonablemente pequeas. Un fallo es pensar que en una funcin
larga lo podemos hacer todo.
Tener un tamao razonable para tus funciones significa que las podrs reutilizar cuando
amplies el cdigo, tampoco seas extremista y hagas funciones de una o dos lneas esto
puede llegar a ser ms confuso que usar una nica funcin.
Este es un ejemplo que muestra cual es la justa medida en cuanto al tamao de las
funciones y la divisin de las tareas:
functiontoolLinks(){
vartools=document.createElement('ul');
varitem=document.createElement('li');
varitemlink=document.createElement('a');
itemlink.setAttribute('href','#');
itemlink.appendChild(document.createTextNode('close'));
itemlink.onclick=function(){window.close();}
item.appendChild(itemlink);
tools.appendChild(item);
varitem2=document.createElement('li');
varitemlink2=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);
}

Puedes optimizar esta funcin separando cada tarea con su propia funcin:

functiontoolLinks(){
vartools=document.createElement('ul');

varitem=document.createElement('li');
varitemlink=createLink('#','close',closeWindow);
item.appendChild(itemlink);
tools.appendChild(item);
varitem2=document.createElement('li');
varitemlink2=createLink('#','print',printWindow);
item2.appendChild(itemlink2);
tools.appendChild(item2);
document.body.appendChild(tools);
}

functionprintWindow(){
window.print();
}

functioncloseWindow(){
window.close();
}

functioncreateLink(url,text,func){
vartemp=document.createElement('a');
temp.setAttribute('href',url);
temp.appendChild(document.createTextNode(text));
temp.onclick=func;
returntemp;
}

Utiliza inteligentemente los nombres de variables y

funciones

Esta es un tcnica esencial de programacin, utiliza nombres de variables y funciones que

sean totalmente descriptivos e incluso otra persona pueda llegar a plantearse que funcin
realizan antes de ver el cdigo.
Recuerda que es correcto el uso de guiones o maysculas para concatenar diferentes
palabras, en este caso concreto de es ms tpico el uso de maysculas debido a la sintaxis
del lenguaje, (ej. getElementsByTagName()).
CambioFormatoFecha();
cambio_formato_fecha();

Comenta el cdigo

Gracias a los comentarios puedes librarte de ms de un quebradero de cabeza, es mejor

resolver el problema una nica vez.

Cmo puedes comprobar en cualquier libro de programacin cada lnea tiene comentarios
explicando su objetivo.

Diferencia las variables dependiendo de su importancia

Este paso es simple: Coloca aquellas variables que son usadas durante todo el script en la
cabecera del cdigo, de esta maneras siempre sabrs donde encontrar estas variables que
son las que determinan el resultado de nuestro cdigo.
functiontoolLinks(){
vartools,closeWinItem,closeWinLink,printWinItem,printWinLink;

//variablestemporales
varprintLinkLabel=?print?;
varcloseLinkLabel=?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);
}

Separa el texto del cdigo

Puedes separar el texto del cdigo, utilizando un documento llamado texto.js en formato
JSON.
Un ejemplo que funciona muy bien podra ser:
varlocales={
'en':{
'homePageAnswerLink':'Answeraquestionnow',
'homePageQuestionLink':'Askaquestionnow',
'contactHoverMessage':'Clicktosendthisinfoasamessage',
'loadingMessage':'Loadingyourdata...',
'noQAmessage':'YouhavenoQuestionsorAnswersyet',
'questionsDefault':'Youhavenotaskedanyquestionsyet',
'answersDefault':'Youhavenotansweredanyquestionsyet.',

'answersDefault':'Youhavenotansweredanyquestionsyet.',
'questionHeading':'MyQuestions',
'answersHeading':'MyAnswers',
'seeAllAnswers':'SeeallyourAnswers',
'seeAllQuestions':'SeeallyourQuestions',
'refresh':'refresh'
},
'es':{
'homePageAnswerLink':'Respondeunapregunta',
'homePageQuestionLink':'Hazunapregunta',
'contactHove':'Cargandodatos...',
'noQAmessage':'Noquedanpreguntas',
'questionsDefault':'Quedanpreguntasporresponder',
'answersDefault':'Noquedanpreguntaspendientes',
'questionHeading':'Mispreguntas',
'answersHeading':'Misrespuestas',
'seeAllAnswers':'Vertodaslasrespuestas',
'seeAllQuestions':'Vertodaslaspreguntas',
'refresh':'Refrescar'
},
'fr':{
}
'de':{
}
};

Esto permitira a cualquiera que no es programador traducir el texto del script, cambiando
unicamente las etiquetas sin necesidad de acceder al cdigo.

Documenta el cdigo

Escribe una buena documentacion de tu script / librera o efecto. Una buena

documentacin da calidad al cdigo, sino preguntate porque existe la clsica
documentacin en cualquier API con todas las posibles propiedades y parametros, pero sin
duda lo mejor de todo es explicar con ejemplos que contienen una lista de posibilidades.

Make Javascript Readable

Statistical Javascript deobfuscation and beautification

Autor

Manu Gutierrez

Subir

Manual
Programacin en JavaScript
Tratamiento de errores en javascript

Compartir
1
Compartir

0
Tweet

1
Recomendar

Comentarios
Enviar un comentario al artculo

Chiquita
Bien!

03/9/2009

Saludos gracias por colocar este manual esta muy bien y me sirvio de mucho,,, gracias
Marcar como spam

Manuel
Cdigo Javascript

21/4/2010

Es perfecto este tutorial.

Estoy interesado en introducir un cdigo Javascript en mi pgina, en el que cada vez que cargue la
pgina, aparezca un directorio de forma aleatoria:
texto + enlace a una pgina.
Ejemplo:
1 texto: mi presentacin 123 enlace: www.mipresentacion.com
2 texto: hola como estis enlace: www.hola.com
3 texto: Europa en el mundo enlace: www.europa.com
De tal manera que cada vez que cargue la pgina, el orden de aparicin cambie.
Hay algn cdigo construdo en desarrolloweb que pueda descargar?
Gracias,

Gracias,
Manuel.
Marcar como spam

thrasherita
muy bueno

22/6/2010

este manual esta muy claro y sencillo me ayudo a recordar demasiado la sintaxis de C, se
agradece el material
Marcar como spam

Fracisco
Muy buen toturial para principiantes!

15/7/2010

La verdad que se te agradece al subir este tutorial, ya que de lo contrario tendri que
pagar para aprender java!
Esta bien echo, con algunas faltas de ortografia, pero eso es lo de menos! Gracias!!!
Marcar como spam

penelope
Exclente

06/8/2010

Ha sido muy productivo leer todo sus consejos, ha sido claro y sencillo de leer.
Marcar como spam

smith
felicitaciones

20/12/2010

los felicito por tan grande manual , es muy explisito y muy claro para los que estamos
aprendiendo de programacion , ojala siga actualizando dia a dia esta informacion. gracias.
Marcar como spam

dvd
Gran manual

08/3/2011

Felicitaciones ;)
Marcar como spam

nimiac

nimiac
Curso

15/3/2011

Gracia por la informacin, estoy empezando en el mundo de la programacin y

unnamigo me recomend javascript y la verdad es que me ha gustado mucho la informacin, clara,
concisa y nada aburrida.
Gracias
Marcar como spam

vacku
_ -- -

16/8/2011

Excelente manual..
Marcar como spam

Carlos
Acerca del tutorial

29/6/2012

El tutorial es genial para gente como yo, que tenamos muy poca idea sobre javascript.
Gracias a l puedes ir despegando e ir haciendo ms cositas.... ENHORABUENA :D
Marcar como spam

Manolo
Enhorabuena

02/5/2013

Os quiero dar mi Enhorabuena por el artculo. Me ha permitido comenzar a entender

este mundo y ha hecho que le pierda el respeto. Adems quiero resaltar lo didctico y bien explicado
que est. Me ha gustado mucho. Gracias.
Marcar como spam

Niko
Gran aporte

08/1/2014

Gracias por el manual me resulto de mucha ayuda, ahora voy a leer el segundo. Me
parecio ameno y muy oportuno en las observaciones.
Marcar como spam

mi6uelo
Gracias

04/3/2014

Muy buen curso

Marcar como spam

Chapo Guzman
Javascript

26/3/2014

Esta muy basico, te voy a tronar por esto.

Marcar como spam

NetRevolutions
Excelente Articulo

19/5/2014

A pesar de que uno cuenta con experiencia en javascript y jquery siempre es bueno
regresar a las bases, este manual es muy bueno por lo basico y elemental que muestra en los
diferentes capitulo, lo recomiendo tanto a las personas con experiencia en el uso de este lenguaje
para fortalecer temas y para los nuevos para que forjen una base solidad del uso de este lenguaje y
cuando empiecen a pasar al siguiente nivel con jquery ser mucho mas entendible.
Saludos.
Jose Rodriguez.
Marcar como spam

Rosy_Soto
Recomiendo el curso

19/11/2014

Perfectamente entendible, de lo mejor que se encuentra en internet.

Marcar como spam
Enviar un comentario al artculo

Principales

Monotemticos

Blogging

Manuales

Desde cero

Actualidad

FAQs

HTML, CSS

De inters

En directo

Javascript, Ajax

Agenda

Vdeos

Diseo, ASP

Powered by:

Desarrolloweb.com Copyright Publicidad Acerca de Datos legales P. de cookies Contacta