8.1 PAUSA Y CONSEJOS JAVASCRIPT:
8.1.1 -DISTINTOS NAVEGADORES:
Javascript es un lenguaje muy dinámico y que ha sido implementado poco a poco, a medida que salían nuevos navegadores. Javascript ha cambiado por lo menos tanto como los navegadores y eso representa un problema para los programadores, porque tienen que estar al tanto de las distintas versiones y la manera de funcionar que tienen.
8.1.2 -CONSEJOS PARA HACER UN CÓDIGO SENCILLO Y FÁCIL DE MANTENER:
Una serie de consejos para que el código de nuestros scripts sea más claro y libre de errores.
• Comentarios habitualmente para que lo que estás haciendo en los scripts pueda ser recordado por ti y cualquier persona.
• 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, utilizar las llaves {} siempre, aunque no sean obligatorias y 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. 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:
8.2.1 -ERRORES COMUNES EN JAVASCRIPT:
Errores de sintaxis ocurren por escribir de manera errónea las líneas de código, equivocarse a la hora de escribir el nombre de una estructura, utilizar incorrectamente las llaves o los paréntesis o cualquier cosa similar. Cuando el analizador sintáctico de javascript detecta un error de estos se presenta el mensaje de error.
Errores de ejecución ocurren cuando se están ejecutando los scripts. Por ejemplo pueden ocurrir cuando llamamos a una función que no ha sido definida. javascript no indica estos errores hasta que no se realiza la llamada a la función.
La manera que tiene javascript de mostrar un error puede variar de un navegador a otro. En versiones antiguas se mostraba una ventanita con el error y un botón de aceptar, permanecen un poco más ocultos al usuario.
En versiones de Internet Explorer mayores que la 4 se muestra el error en la barra de estado del navegador y se puede ver una descripción más grande del error si le damos un doble click al icono de alerta amarillo que aparece en la barra de estado. En Netscape aparece también un mensaje en la barra de estado que además nos indica que para mostrar más información debemos teclear "javascript:" en la barra de direcciones (donde escribimos las URL para acceder a las páginas). Con eso conseguimos que aparezca la Consola javascript, que nos muestra todos los errores que se encuentran en las páginas.
También podemos cometer fallos en la programación que hagan que los scripts no funcionen tal y como deseábamos y que javascript no detecta como errores y por lo tanto no muestra ningún mensaje de error.
Por ejemplo trataríamos de sumar dos cifras pero si una de las variables es de tipo texto podríamos encontrarnos con un error.
var numero1 = 23
var numero2 = "42"
var suma = numero1 + numero2
La variable suma vale "2342" porque al intentar sumar una variable numérica y otra textual, se tratan a las dos como si fueran de tipo texto y por lo tanto, el operador + se aplica como una concatenación de cadenas de caracteres. Si no estamos al tanto de esta cuestión podríamos tener un error en nuestro script ya que el resultado no es el esperado.
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.
Usar comillas dobles y simples erróneamente.
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.
Utilizar una variable antes de inicializarla o no declarar las variables con var antes de utilizarlas, 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 EN 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 que tiene un botón de aceptar.
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.
Ejemplo:
var n_actual = 0
var suma = 0
while (suma<300){
n_actual ++
suma += suma + n_actual
alert("n_actual vale " + n_actual + " y suma vale " + suma)
}
Con la función alert() se muestra el contenido de las dos variables que utilizamos en el script.
8.3 CONESEJOS PARA ESCRIBIR CÓDIGO JAVASCRIPT:
8.3.1 -CONSERVA LA SINTAXIS Y ESTRUCTURA DE TU CÓDIGO:
Esto significa que guardes por ejemplo un límite de longitud de línea (80 caracteres) y que programes funciones razonablemente pequeñas. Un fallo es pensar que en una función larga lo podemos hacer todo.
Tener un tamaño razonable para tus funciones significa que las podrás reutilizar cuando amplies el código, tampoco seas
extremista y hagas funciones de una o dos líneas esto puede llegar a ser más confuso que usar una única función.
Ejemplo que muestra cual es la justa medida en cuanto al tamaño de las funciones 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;
}
8.3.2 -UTILIZA INTELIGENTEMENTE LOS NOMBRES DE VARIABLES Y FUNCIONES:
Utiliza nombres de variables y funciones que sean totalmente descriptivos e incluso otra persona pueda llegar a plantearse que función realizan antes de ver el código. Recuerda que es correcto el uso de guiones o mayúsculas para concatenar diferentes palabras, en este caso concreto de es más típico el uso de mayúsculas debido a la sintaxis del lenguaje.
CambioFormatoFecha();
cambio_formato_fecha();
8.3.3 -COMENTA EL CÓDIGO:
Gracias a los comentarios puedes librarte de más de un quebradero de cabeza, es mejor resolver el problema una única vez.
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, de esta maneras siempre sabrás donde encontrar estas variables que son 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);
}
8.3.5 -SEPARA EL TEXTO DEL CÓDIGO:
Separar el texto del código, utilizando un documento llamado texto.js en formato JSON.
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': {
}
};
Esto permitiría a cualquiera que no es programador traducir el texto del script, cambiando unicamente las etiquetas sin necesidad de acceder al código.
8.3.6 -DOCUMENTA EL CÓDIGO:
Escribe una buena documentacion de tu script / librería o efecto.
No hay comentarios:
Publicar un comentario