trisquel

Aprende JavaScript con ejemplos (XXII). Eventos del DOM.

Como ya sabemos, JavaScript puede reaccionar a eventos que ocurran en una página web. ¿Qué tipos de eventos puede controlar JavaScript? Pues por ejemplo:

  1. Pulsar una tecla.
  2. Enviar un formulario.
  3. Modificar un campo de texto.
  4. Cuando el ratón pasa sobre un elemento.
  5. Cuando se carga una imagen.
  6. Cuando el usuario hace click sobre un elemento.
  7. Cuando se carga una página web.

Veamos un ejemplo de control del ratón sobre un texto:

<!DOCTYPE html>
<html>
<body>

<div onmouseover="dentro(this)" onmouseout="fuera(this)">
MyFPSchool</div>

<script>
function dentro(obj) {
obj.innerHTML = "Aprende JavaScript con ejemplos"
}

function fuera(obj) {
obj.innerHTML = "MyFPSchool"
}
</script>

</body>
</html>

Ejercicio 22.1:

Realiza un script que cuando cambie el foco de un campo de texto cambie el mismo a mayúsculas.

Veamos otro ejemplo que comprueba a la carga de la página si las cookies están habilitadas o no:


<!DOCTYPE html>
<html>
<body onload="miraCookies()">

<p id="muestracookies"></p>

<script>
function miraCookies() {
var text = "";
if (navigator.cookieEnabled == true) {
text = "Las cookies están habilitadas.";
} else {
text = "Las cookies están deshabilitadas.";
}
document.getElementById("muestracookies").innerHTML = text;
}
</script>

</body>
</html>

Ejercicio 22.2:

Realiza un script propio que utilice el evento onchange. Lo puedes utilizar para hacer un conversor Romano-Decimal y viceversa.

Deja un comentario

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

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>