DesarrolloWeb.com > Manuales > Programación en JavaScript

ej. css Buscar

Login | Registro

Por Manu Gutierrez

20 de diciembre de 2007 16 Comentarios Scripts en Javascript

En este artículo puedes encontrar varios consejos bastanteinteresantes a la hora de programar código Javascript.

Consejos para escribir código Javascript

Si estas dando tus primeros pasos en Javacript yestas empezando ya a ser sucio y desordenado...No tienes excusa da un giro para escribir elcódigo ordenado y todo será más sencillo.

Los foros estan llenos de peticiones deinformación sobre Ajax, DOM y como se usanalgunas librerías o efectos. Hay unaextraordinaria cantidad de información, scripts,librerías que estan siendo desarrollados, blogs ynuevos sitios especializados en esta temática,

sólo necesitas un poco de tiempo y echarle un vistazo... es muy fácil los mejores losencuentras en Digg.com o en del.icio.us, se acabaron aquellos días en el que Javascript y elDHTML se convirtieron en persona non grata como habilidad principal en tu CV.

La gran mayoría de código Javascript es hoy en dia mucho más limpio que en la "era"DHTML.

Ahora es un buen momento para convertirte en un entusiasta de Javascript. Aunquealgunos defectos que ocurrieron tiempo atras se repiten sin embargo.

Aquí os dejo una series de consejos que os hará más sencillo mantener tu código Javascriptordenado, algunos consejos son demasiado obvios pero todos sabemos que el hombre esel único animal que...

Conserva la sintaxis y estructura de tu código limpia yordenadaEsto significa que guardes por ejemplo un límite de longitud de línea (80 caracteres) y queprogrames funciones razonablemente pequeñas. Un fallo es pensar que en una funciónlarga lo podemos hacer todo.

Tener un tamaño razonable para tus funciones significa que las podrás reutilizar cuandoamplies el código, tampoco seas extremista y hagas funciones de una o dos líneas estopuede llegar a ser más confuso que usar una única función.

Este es un ejemplo que muestra cual es la justa medida en cuanto al tamaño de lasfunciones y la división de las tareas:

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);

}

Puedes optimizar esta función separando cada tarea con su propia función:

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(text));

temp.onclick = func;

return temp;

}

Utiliza inteligentemente los nombres de variables yfuncionesEsta es un técnica esencial de programación, utiliza nombres de variables y funciones quesean totalmente descriptivos e incluso otra persona pueda llegar a plantearse que funciónrealizan antes de ver el código. Recuerda que es correcto el uso de guiones o mayúsculas para concatenar diferentespalabras, en este caso concreto de es más típico el uso de mayúsculas debido a la sintaxisdel lenguaje, (ej. getElementsByTagName()).

CambioFormatoFecha();

cambio_formato_fecha();

Comenta el códigoGracias a los comentarios puedes librarte de más de un quebradero de cabeza, es mejorresolver el problema una única vez.

Cómo puedes comprobar en cualquier libro de programación cada línea tiene comentariosexplicando su objetivo.

Diferencia las variables dependiendo de su importanciaEste paso es simple: Coloca aquellas variables que son usadas durante todo el script en lacabecera del código, de esta maneras siempre sabrás donde encontrar estas variables queson las que determinan el resultado de nuestro código.

function toolLinks(){

var tools, closeWinItem, closeWinLink, printWinItem, printWinLink;

// variables temporales

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);

}

Separa el texto del códigoPuedes separar el texto del código, utilizando un documento llamado texto.js en formatoJSON.

Un ejemplo que funciona muy bien podría ser:

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.',

AutorManu Gutierrez

'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'

},

'es': {

'homePageAnswerLink':'Responde una pregunta',

'homePageQuestionLink':'Haz una pregunta',

'contactHove' : 'Cargando datos...',

'noQAmessage' : 'No quedan preguntas',

'questionsDefault': 'Quedan preguntas por responder',

'answersDefault': 'No quedan preguntas pendientes',

'questionHeading' : 'Mis preguntas',

'answersHeading' : 'Mis respuestas',

'seeAllAnswers' : 'Ver todas las respuestas',

'seeAllQuestions' : 'Ver todas las preguntas',

'refresh': 'Refrescar'

},

'fr': {

}

'de': {

}

};

Esto permitiría a cualquiera que no es programador traducir el texto del script, cambiandounicamente las etiquetas sin necesidad de acceder al código.

Documenta el códigoEscribe una buena documentacion de tu script / librería o efecto. Una buenadocumentación da calidad al código, sino preguntate porque existe la clásicadocumentación en cualquier API con todas las posibles propiedades y parametros, pero sinduda lo mejor de todo es explicar con ejemplos que contienen una lista de posibilidades.

Make Javascript ReadableStatistical Javascript deobfuscation and beautification

Subir

ManualProgramación en JavaScript

Tratamiento de errores en javascript

1

Tweet

0

Compartir

03/9/2009

21/4/2010

Chiquita

Marcar como spam

Manuel

Comentarios Enviar un comentario al artículo

Bien!

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

Código Javascript

Es perfecto este tutorial.

Estoy interesado en introducir un código Javascript en mi página, en el que cada vez que cargue la

página, aparezca un directorio de forma aleatoria:

texto + enlace a una página.

Ejemplo:

1 texto: mi presentación 123 enlace: www.mipresentacion.com

2 texto: hola como estáis enlace: www.hola.com

3 texto: Europa en el mundo enlace: www.europa.com

De tal manera que cada vez que cargue la página, el orden de aparición cambie.

¿Hay algún código construído en desarrolloweb que pueda descargar?

Gracias,

Compartir

1

Recomendar

22/6/2010

15/7/2010

06/8/2010

20/12/2010

08/3/2011

Marcar como spam

thrasherita

Marcar como spam

Fracisco

Marcar como spam

penelope

Marcar como spam

smith

Marcar como spam

dvd

Marcar como spam

nimiac

Gracias,

Manuel.

muy bueno

este manual esta muy claro y sencillo me ayudo a recordar demasiado la sintaxis de C, se

agradece el material

Muy buen toturial para principiantes!

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!!!

Exclente

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

felicitaciones

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.

Gran manual

Felicitaciones ;)

15/3/2011

16/8/2011

29/6/2012

02/5/2013

08/1/2014

04/3/2014

nimiac

Marcar como spam

vacku

Marcar como spam

Carlos

Marcar como spam

Manolo

Marcar como spam

Niko

Marcar como spam

mi6uelo

Curso

Gracia por la información, estoy empezando en el mundo de la programación y

unnamigo me recomendó javascript y la verdad es que me ha gustado mucho la información, clara,

concisa y nada aburrida.

Gracias

_ -- -

Excelente manual..

Acerca del tutorial

El tutorial es genial para gente como yo, que teníamos muy poca idea sobre javascript.

Gracias a él puedes ir despegando e ir haciendo más cositas.... ENHORABUENA :D

Enhorabuena

Os quiero dar mi Enhorabuena por el artículo. Me ha permitido comenzar a entender

este mundo y ha hecho que le pierda el respeto. Además quiero resaltar lo didáctico y bien explicado

que está. Me ha gustado mucho. Gracias.

Gran aporte

Gracias por el manual me resulto de mucha ayuda, ahora voy a leer el segundo. Me

parecio ameno y muy oportuno en las observaciones.

Gracias

Principales

Manuales

FAQs

En directo

Vídeos

Monotemáticos

Desde cero

HTML, CSS

Javascript, Ajax

Diseño, ASP

Blogging

Actualidad

De interés

Agenda

Powered by:

26/3/2014

19/5/2014

19/11/2014

Marcar como spam

Chapo Guzman

Marcar como spam

NetRevolutions

Marcar como spam

Rosy_Soto

Marcar como spam

Muy buen curso

Javascript

Esta muy basico, te voy a tronar por esto.

Excelente Articulo

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.

Recomiendo el curso

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

Enviar un comentario al artículo

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