Editando JavaScript no obstructivo (sección)

== 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.