Warning: sprintf(): Too few arguments in /homepages/6/d418854183/htdocs/clickandbuilds/WordPress/pablocia/wp-content/themes/minimal-photography/assets/lib/breadcrumbs/breadcrumbs.php on line 252

¿Qué es el Javascript no intrusivo?

Ya que he empezado a postear algunos artículos sobre utilidades con Javascript no intrusivo, no estaría mal explicar un poco en qué consiste, no?.

Pues la base fundamental es que deberíamos desarrollar nuestras webs separando contenido y presentación, para lo cual utilizamos CSS, pero además también deberíamos separar estas dos cosas de cómo funciona la página. Ha esto se le llama diseño por capas, y su fundamento se explica en el patrón Modelo Vista Controlador, que todo buen programador debería aplicar!!.

Bueno, al grano. Si en una página web tenemos un elemento, como una imágen, y queremos que al pulsar en ella pase algo, podremos hacerlo así: <img src=»imagen.jpg» onclick=»saludo();»/>

Esto es javascript intrusivo, estamos mezclando la presentación, con lo que hace la aplicación. Si por cualquier razón se decide un cambio en lo que va a pasar que al hacer clic sobre esta imagen, tendremos que modificarlo sobre la etiqueta img. Y si esta imagen aparece varias veces en la aplicación, pues tendremos que repetir el cambio muchas veces.

La mejor manera de hacerlo sería la siguiente:

<img scr="imagen.jpg" id="alerta" />

Y en head (o en un archivo js externo) pondríamos el código del onclick de la siguiente forma:

<head>
<script language="javascript" type="text/javascript">
window.onload = function(){
document.getElementById("alerta").onclick = saludo;
}
function saludo()
{
alert("Qué quieres?);
}
</script>
</head>

Este código javascript es no intrusivo porque no lo insertamos dentro de la etiqueta html. Si se producen cambios en la forma de procesar el clic en la imagen, sólo tendremos que cambiarlo en un sito, la funcion asociada al onclick

Javascript no intrusivo (Unobtrusive JavaScript). ¿Qué es? y ¿en que se fundamenta? « a deshoras.

About Post Author

pablocia

Lo mejor para observar la corriente es no estar en ella, así que toma distancia, piensa y verás la solución. <a href="https://es-es.facebook.com/visualxtudio">Facebook</a>
Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Entrada anterior Colección de CSS reset
Entrada siguiente Consejos para el desarrollo web