Parte 8: Epílogos primera parte

8.1 Pausa y consejos Javascript

Vamos a dar una serie de consejos a seguir a la hora de programar.


8.1.1 Distintos navegadores

Javascript es un lenguaje que se ha sido implementado poco a poco a medida que nuevas tecnologías como el DHTML se desarrollaban, los navegadores han variado su manera de manejarlas.

Nuestro consejo es que vuestras páginas sean compatibles en el mayor número de navegadores, es decir, no ir a la última, sino ser un poco conservadores.


8.1.2 Consejos para hacer un código sencillo y fácil de mantener

Una serie de consejos para que nuestra tarea como programadores sea mucho más agradable:

• Utiliza comentarios habitualmente para que lo que estás haciendo en los scripts pueda ser recordado por ti y cualquier persona que tenga que leerlos más adelante. 

• Ten cuidado con el ámbito de las variables, recuerda que existen variables globales y locales, que incluso pueden tener los mismos nombres y conoce en cada momento la variable que tiene validez. 

• Escribe un código con suficiente claridad, que se consigue con saltos de línea después de cada instrucción, un sangrado adecuado (poner márgenes a cada línea para indicar en qué bloque están incluidas), utilizar las llaves {} siempre, aunque no sean obligatorias y en general mantener siempre el mismo estilo a la hora de programar. 

• Aplica un poco de consistencia al manejo de variables. Declara las variables con var. No cambies el tipo del dato que contiene (si era numérica no pongas luego texto, por ejemplo). Dales nombres comprensibles para saber en todo momento qué contienen. Incluso a la hora de darles nombre puedes aplicar una norma, que se trata de que indiquen en sus nombres el tipo de dato que contienen. Por ejemplo, las variables de texto pueden empezar por una s (de String), las variables numéricas pueden empezar por una n o las boleanas por una b. 

• Prueba tus scripts cada poco a medida que los vas programando. Puedes escribir un trozo de código y probarlo antes de continuar para ver que todo funciona correctamente. Es más fácil encontrar los errores de código en bloques pequeños que en bloques grandes.

8.2 Tratamiento de errores en javascript

Errores comunes que podemos cometer y cómo evitarlos y depurarlos.


8.2.1 Errores comunes en Javascript

Cuando ejecutamos los scripts pueden ocurrir dos tipos de errores de sintaxis o de ejecución:

1. Errores de sintaxis ocurren a la hora de escribir el nombre de una estructura, utilizar incorrectamente las llaves o los paréntesis.
2. Errores de ejecución ocurren cuando se están ejecutando los scripts. 

En la actualidad los errores de javascript permanecen un poco más ocultos al usuario. Esto viene bien, porque si nuestras páginas tienen algún error en alguna plataforma no será muy molesto para el usuario que en muchas ocasiones ni se dará cuenta. Sin embargo para el programador puede ser un poco más molesto de revisar y se necesitará conocer la manera de que se muestren los errores para que puedan ser reparados.

8.2.2 Evitar errores comunes

• Utilizar = en expresiones condicionales en lugar de == es un error difícil de detectar cuando se comete, si utilizamos un solo igual lo que estamos haciendo es una asignación y no una comparación para ver si dos valores son iguales. 

• No conocerse la precedencia de operadores y no utilizar paréntesis para agrupar las operaciones que se desea realizar. En este caso nuestras operaciones pueden dar resultados no deseados. 

• Usar comillas dobles y simples erróneamente. Recuerda que se pueden utilizar comillas dobles o simples indistintamente, con la norma siguiente: dentro de comillas dobles se deben utilizar comillas simples y viceversa. 

• Olvidarse de cerrar una llave o cerrar una llave de más.

• Colocar varias sentencias en la misma línea sin separarlas de punto y coma. Esto suele ocurrir en los manejadores de eventos, como onclick, que veremos más adelante. 

• Utilizar una variable antes de inicializarla o no declarar las variables con var antes de utilizarlas también son errores comunes. Recuerda que si no la declaras puedes estar haciendo referencia a una variable global en lugar de una local. 

• Contar las posiciones de los arrays a partir de 1. Recuerda que los arrays empiezan por la posición 0.

8.2.3 Depurar errores javascript

Para todo tipo de errores, unos más fáciles de detectar que otros, debemos utilizar alguna técnica de depuración que nos ayude a encontrarlos. Se trata de utilizar una función predefinida, la función alert() que recibe entre paréntesis un texto y lo muestra en una pequeña ventana.

Con la función alert() podemos mostrar en cualquier momento el contenido de las variables que estamos utilizando en nuestros scripts. Para ello ponemos entre paréntesis la variable que deseamos ver su contenido. Cuando se muestra el contenido de la variable el navegador espera a que apretemos el botón de aceptar y cuando lo hacemos continúa con las siguientes instrucciones del script.



8.2.4 Conclusión


La visión que has podido tener del lenguaje será suficiente para enfrentarte a los problemas más fundamentales. En adelante veremos la jerarquía de objetos del navegador, cómo construir nuestros propios objetos, las funciones predefinidas de Javascript, características del HTML Dinámico, trabajo con formularios y otras cosas importantes para dominar todas las posibilidades del lenguaje.

8.3 Consejos para escribir código Javascript

Una serie de consejos que hará más sencillo mantener tu código Javascript ordenado


8.3.1 Conserva la sintaxis y estructura de tu código limpia y ordenada

Guardar por ejemplo un límite de longitud de línea (80 caracteres), programar funciones razonablemente pequeñas...



8.3.2 Utiliza inteligentemente los nombres de variables y funciones
Utiliza nombres de variables y funciones que sean totalmente descriptivos y recuerda que es correcto el uso de guiones o mayúsculas para concatenar diferentes palabras:

CambioFormatoFecha();
cambio_formato_fecha();



8.3.3 Comenta el código

En cualquier libro de programación cada línea tiene comentarios explicando su objetivo.

8.3.4 Diferencia las variables dependiendo de su importancia

Coloca aquellas variables que son usadas durante todo el script en la cabecera del 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);

}


8.3.5 Separa el texto del código

Puedes separar el texto del código, utilizando un documento llamado texto.js
Un ejemplo:

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

'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': {
}

};



8.3.6 Documenta el código

Escribe una buena documentacion de tu script / librería o efecto. Una buena documentación da calidad al código.