Ir al contenido

JavaScript no obstructivo

De Wikipedia, la enciclopedia libre

Esta es una versión antigua de esta página, editada a las 23:33 15 abr 2011 por 201.223.194.28 (discusión). La dirección URL es un enlace permanente a esta versión, que puede ser diferente de la versión actual.

JavaScript no obstrusivo es un paradigma floreciente en el uso del lenguaje de programación JavaScript, utilizado en la Web. Aunque el término no se define formalmente, sus principios generalmente incluyen:

ojh´ñuojhuity7itfgliytlyfr

Tradicionalmente, se ha escrito el javascript en línea, como parte del contenido de un documento HTML. Por ejemplo, lo siguiente es una práctica típica de validación de formularios JavaScript: 

<input type="text" name="fecha" onchange="validateDate(this);" />

Pero el propósito de HTML es describir la estructura de un documento, no su comportamiento programático. Combinar los dos afecta negativamente la facilidad de mantenimiento, a la accesibilidad y a la velocidad de carga del documento (los archivos javascript externos suelen guardarse en caché para posteriores visitas); por lo tanto es una mala práctica. Lo recomendable es enlazar un archivo externo que contenga código javascript desde el HTML: 

<script type="text/javascript" src="archivoJavascript.js"></script>

La solución no invasiva al código superior podría ser la siguiente: Definir una función que valide un formato de fecha determinado (validaFecha()), y asociar el formulario que contiene el campo (formulario) con dicha función mediante un evento concreto (evento submit) gracias al DOM. En este ejemplo se asocia la función validaFecha(campo) al campo con id campoFecha mediante el método DOM del objeto document getElementById(): 

<form name="formulario" action="recibidor.php" method="post">
	<input type="text" name="fecha" id="campoFecha" />
	<button type="submit">Enviar</button>
</form>

// Función que valida un formato de fecha concreto. 
// Devolverá true o false en función de la evaluación
function validaFecha() {
	// Buscamos el elemento con id "campoFecha"
	var elCampo = document.getElementById("campoFecha"); 
	// Contenido de la función que validará que el formato de elCampo.value 
	// sea el esperado con expresiones regulares. En este caso únicamente (dd/dd/dddd)
	var resultado = /^\d{2}\/\d{2}\/\d{4}$/.test( elCampo.value );
	if( resultado )		// caso positivo
		return resultado;
	else {			 // caso negativo
		alert("El formato de fecha es dd/dd/dddd");
		return false;
	}
} 

// Función que añade un evento a un objeto del DOM 
// válida tanto para el código propietario de IE 
// como para el estándar definido por la W3C
function listen(event, elem, func) {
	if (elem.addEventListener)			// W3C DOM
		return elem.addEventListener(event,func,false);
	else if (elem.attachEvent)			// IE DOM
		return elem.attachEvent("on"+event, func);
	else {
		throw "No es posible añadir evento";
		return false;
	}
}


// Asociamos al evento submit del formulario la función validaFecha
var elFormulario = document.forms["formulario"];
listen("submit", elFormulario, validaFecha);

Es importante tener en cuenta que si javascript está desactivado o no está disponible en el agente del cliente el funcionamiento que se espera del HTML quedará intacto, y el formulario funcionará sin problemas. En caso de tener disponible javascript se complementará la funcionalidad. Es una buena práctica que mejora la accesibilidad.

Mejorando las prácticas

Aunque la esencia JavaScript no obstructivo es el concepto de una capa separada del comportamiento, los seguidores del paradigma suscriben generalmente los principios relacionados, por ejemplo:

  • La adherencia estricta al W3C DOM y modelo de evento, y evasión de extensiones especificas para un navegador.
  • Las mejores prácticas de JavaScript son paralelas a menudo a otros lenguajes de programación, tales como el encapsulamiento y la abstracción, evasión de variables globales, convenciones de nombramiento significativas, uso de los patrones apropiados del diseño, y prueba sistemática. Tales principios son esenciales para el desarrollo de software en gran escala, pero no se han observado extensamente en JavaScript en el pasado; su adopción se considera como componente esencial de la transición de JavaScript de un lenguaje "juguete" a una herramienta para el desarrollo serio.

Véase también

Enlaces externos

Obtenido de «https://es.wikipedia.org/w/index.php?title=JavaScript_no_obstructivo&oldid=45654039»