Técnica de los manejadores semánticos
Pasos:
1. Asignar un identificador único al elemento XHTML mediante el atributo id.
2. Crear una función de JavaScript encargada de manejar el evento.
3. Asignar la función externa al evento correspondiente en el elemento deseado. Inconveniente: la página se debe cargar completamente antes de que se puedan utilizar las funciones DOM que asignan los manejadores a los elementos html (evento onload).
Separación de html y Javascript:
Al igual que se intentan separar los contenidos (código html) y el diseño (css), se recomienda separar los contenidos, de su comportamiento (JavaScript). Por ejemplo:
// Elemento XHTML
< input id="boton" type="button" value="Haz Clic" >
1. Asignar un identificador único al elemento XHTML mediante el atributo id.
2. Crear una función de JavaScript encargada de manejar el evento.
3. Asignar la función externa al evento correspondiente en el elemento deseado. Inconveniente: la página se debe cargar completamente antes de que se puedan utilizar las funciones DOM que asignan los manejadores a los elementos html (evento onload).
Separación de html y Javascript:
Al igual que se intentan separar los contenidos (código html) y el diseño (css), se recomienda separar los contenidos, de su comportamiento (JavaScript). Por ejemplo:
<input id="boton" type="button" value="Haz clic"
onclick="alert('Mensaje ventana modal');" />
Se puede transformar en...
<script ...
// Función externa
function muestraMensaje() {
alert('Mensaje ventana modal');
}
window.onload = function() {
document.getElementById("boton").onclick = muestraMensaje;
} // Elemento XHTML
< input id="boton" type="button" value="Haz Clic" >