Edición de «JavaScript no obstructivo»

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

* [[Separación de intereses|Separación]] de la funcionalidad JavaScript (la "capa del comportamiento") de las capas de estructura/contenido y de presentación de una página.
* Uso de [[buenas prácticas]] a fin de evitar los problemas de incompatibilidad de la programación tradicional en JavaScript (tales como inconsistencias entre [[navegador web|navegadores]] y falta de [[escalabilidad]])

== La necesidad de un nuevo paradigma ==

JavaScript ha tenido durante mucho tiempo la reputación de lenguaje torpe e inadecuado para el desarrollo serio. Esto ha sido en gran parte debido a las implementaciones incompatibles del lenguaje y del [[Document Object Model|DOM]] en varios navegadores, y al uso extenso de código "pegado" lleno de errores por parte de los aficionados. Los errores en [[tiempo de ejecución]] eran tan frecuentes y difíciles de solucionar que pocos programadores intentaban corregirlos.

La reciente aparición de navegadores con un soporte adecuado de los [[estándares web]], [[Framework|frameworks]] para JavaScript tales como [[Prototype (framework)|Prototype]] o [[JQuery]], y herramientas de [[depuración de código|depuración]] de alta calidad han facilitado enormemente la creación de código organizado y escalable en JavaScript, y la aparición de [[AJAX]] lo ha hecho esencial. Mientras hasta hace poco JavaScript era solo utilizado para las tareas relativamente simples y no críticas (validación de formularios y decoraciones llamativas), actualmente se está utilizando para escribir código complejo que a menudo es responsable de buena parte de la funcionalidad básica de un sitio. Los errores en tiempo de ejecución y el comportamiento imprevisible ya no son molestias de menor importancia; son errores fatales.

El JavaScript no obstructivo se puede considerar como parte del movimiento a favor de los [[estándares web]]. Así como la demanda de compatibilidad de los navegadores ha conducido al aumento de estandarización de código y estilo, la demanda creciente de [[Rich Internet Application|aplicaciones ricas]] está haciendo necesarios los métodos más robustos de JavaScript no obstructivo.

== Separando comportamiento y contenido ==

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:

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

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 web|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:

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

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 [[Document Object Model|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()'':

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

<syntaxhighlight lang="javascript">
// 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);

</syntaxhighlight>

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 específicas para un navegador.
* Las buenas prácticas de JavaScript a menudo van acorde a las de otros lenguajes de programación, tales como el [[Encapsulamiento (programación orientada a objetos)|encapsulamiento]] y la [[Abstracción (programación orientada a objetos)|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 ==
* [[JavaScript]]
* [[AJAX]]
* [[Web 2.0]]

== Enlaces externos ==
* [http://www.onlinetools.org/articles/unobtrusivejavascript/ JavaScript no obstructivo (en inglés)]
* [http://alistapart.com/articles/behavioralseparation A List Apart: Separando el comportamiento (en inglés)]
* [http://www.ujs4rails.com/ JavaScript no obstructivo para Ruby on Rails (en inglés)]
* [http://www.bennolan.com/behaviour/ Behaviour], una biblioteca que facilita el desarrollo de JavaScript no obstructivo (en inglés)
* [https://web.archive.org/web/20080912031502/http://developer.mozilla.org/es/JavaScript_no_obstructivo JavaScript no obstructivo en Mozilla Developer Center]
* [http://www.anieto2k.com/2006/10/15/javascript-no-obstructivo-manual-de-buenas-maneras/ Javascript no obstructivo, manual de buenas maneras] (en castellano)

{{Control de autoridades}}
[[Categoría:Desarrollo web]]
[[Categoría:JavaScript]]