Últimamente está en boca de mucha gente el concepto "Unobtrusive Scripting", así que voy a explicar este concepto lo más brevemente posible y a mostrar un par de trucos para llevarlo a cabo:
Un script no intrusivo debe cumplir lo siguiente:
- Debe ser usable, es decir, debe conferir un beneficio de usabilidad en el site.
- Debe ser accesible, si javascript no funciona, la pagina debe mantenerse legible y entendible, aunque la pérdida de cierta usabilidad sea inevitable
- Debe ser fácil de implementar; típicamente, un desarrollador web solo debe incluir el fichero en javascript en el documento y el script funciona
- Debe estar separado, reside en su propio archivo .js en lugar de estar plantado en el HTML.
Los desarrolladores sabemos que romper con el hábito es a menudo difícil, pero en el mundo web, la separación puede ser buena. Veamos que significa la separación cuando hablamos de desarrollo web:
- Estructura HTML -> "Qué significa"
- Presentación CSS -> "Cómo se muestra"
- Comportamiento Javascript -> "Qué hace?"
Podemos englobar el punto 1, 2 y 3 en una burbuja cada uno y de esta forma obtener lo que llaman "Las tres capas". Así diremos que cada página web necesita una capa de HTML estructural; sin HTML, no hay página. Sin embargo, las capas de CSS y Javascript son opcionales.
¿Por qué debo separarlos? Sin duda hay múltiples beneficios al separar cada concepto. La idea básica de la separación de la presentación y la estructura es asegurarse de que el HTML define la estructura y solo ésto. Toda la presentación se define en CSS así como el Javascript es definido aparte. Solo así conseguiremos un marcado limpio y funcional 100% sin nada más de por medio.
Por lo tanto, no deberíamos definir más funciones dentro de etiquetas <script>, ni deberíamos asignar eventos tales como onclick, onmouseover en pleno HTML. Y, por supuesto, ni un enlace más del tipo "javascript: hazAlgo();"
Toda la ayuda necesaria la encontraréis en la red, aquí van algunos enlaces:
Para finalizar quería recalcar dos prácticas (en realidad es una sola dividida en dos) que suelo usar en mis proyectos para hacer todo esto más sencillo. Cuando necesitamos pasar variables que vienen desde el lado del servidor para que ejecuten algún script nos encontramos con que en un fichero .js no podemos escribir por ejemplo PHP. La forma de lograr pasar esas variables a nuestro fichero es muy sencilla, la muestro en un ejemplo:
Archivo "
variables.js.php"
Código :
<?php
header("content-type: application/x-javascript");
// Paso de variables PHP a Javascript
echo 'var lang="' . $lang . '";';
echo 'var menu="' . $menu . '";';
echo 'var opcion="' . $opcion . '";';
echo 'var cabecera="' . $cabecera . '";';
echo 'var claim="' . $claim . '";';
?>
Cómo incluirlo en el HTML:
Código :
<script type="text/javascript" src="../code/variables.js.php"></script>
Por supuesto podemos pasar las variables por GET:
...variables.js.php?var1=valor1&var2=valor2
Y listos para usar esas variables en nuestros scripts.
Usuarios que han visto este tema también han visto...
- Encriptar código HTML con Java Script
- Funciones autoejecutables en Javascript
- Funcion: alert() confirm() y prompt() en Javascript
- Métodos del objeto Window en Javascript
- Objetos en JavaScript
- Versión imprimible de este documento
- Enviar por e-mail este documento
