-Explicación de concepto y tipos de eventos.
-Ejercicio incluyendo todos los temas vistos el año anterior mas InnerHTML.
6.2. Modelo básico de eventos
6.2.1. Tipos de eventos
En este modelo, cada elemento o etiqueta XHTML define su propia lista de posibles eventos que se le pueden asignar. Un mismo tipo de evento (por ejemplo, pinchar el botón izquierdo del ratón) puede estar definido para varios elementos XHTML diferentes y un mismo elemento XHTML puede tener asociados varios eventos diferentes.
El nombre de cada evento se construye mediante el prefijo
on, seguido del nombre en inglés de la acción asociada al evento. Así, el evento de pinchar un elemento con el ratón se denomina onclick y el evento asociado a la acción de mover el ratón se denomina onmousemove.
La siguiente tabla resume los eventos más importantes definidos por JavaScript:
| Evento | Descripción | Elementos para los que está definido |
|---|---|---|
onblur | Deseleccionar el elemento | <button>, <input>, <label>, <select>, <textarea>, <body> |
onchange | Deseleccionar un elemento que se ha modificado | <input>, <select>, <textarea> |
onclick | Pinchar y soltar el ratón | Todos los elementos |
ondblclick | Pinchar dos veces seguidas con el ratón | Todos los elementos |
onfocus | Seleccionar un elemento | <button>, <input>, <label>, <select>, <textarea>, <body> |
onkeydown | Pulsar una tecla (sin soltar) | Elementos de formulario y <body> |
onkeypress | Pulsar una tecla | Elementos de formulario y <body> |
onkeyup | Soltar una tecla pulsada | Elementos de formulario y <body> |
onload | La página se ha cargado completamente | <body> |
onmousedown | Pulsar (sin soltar) un botón del ratón | Todos los elementos |
onmousemove | Mover el ratón | Todos los elementos |
onmouseout | El ratón "sale" del elemento (pasa por encima de otro elemento) | Todos los elementos |
onmouseover | El ratón "entra" en el elemento (pasa por encima del elemento) | Todos los elementos |
onmouseup | Soltar el botón que estaba pulsado en el ratón | Todos los elementos |
onreset | Inicializar el formulario (borrar todos sus datos) | <form> |
onresize | Se ha modificado el tamaño de la ventana del navegador | <body> |
onselect | Seleccionar un texto | <input>, <textarea> |
onsubmit | Enviar el formulario | <form> |
onunload | Se abandona la página (por ejemplo al cerrar el navegador) | <body> |
Los eventos más utilizados en las aplicaciones web tradicionales son
onload para esperar a que se cargue la página por completo, los eventos onclick, onmouseover, onmouseout para controlar el ratón y onsubmit para controlar el envío de los formularios.
Algunos eventos de la tabla anterior (
onclick, onkeydown, onkeypress, onreset, onsubmit) permiten evitar la "acción por defecto" de ese evento. Más adelante se muestra en detalle este comportamiento, que puede resultar muy útil en algunas técnicas de programación.
Las acciones típicas que realiza un usuario en una página web pueden dar lugar a una sucesión de eventos. Al pulsar por ejemplo sobre un botón de tipo
<input type="submit"> se desencadenan los eventos onmousedown, onclick, onmouseup y onsubmit de forma consecutiva.
Tomado de:http://librosweb.es/libro/javascript/capitulo_6/modelo_basico_de_eventos_2.html
Propiedad de objetos web innerHTML
La propiedad más interesante de los objetos Web a los que podemos acceder, no forma parte del Standard oficial de HTML.
Se trata de la propiedad innerHTML que fue introducida por Microsoft en Internet Explorer como un método de acceso rápido al contenido completo de un contenedor en HTML. Rápidamente el resto de exploradores lo añadieron en su soporte de lenguaje.
Podemos usar innerHTML para recuperar el contenido actual de un contenedor o insertar nuevo contenido en ese contenedor.
Por contenedor entendemos aquello que está entre las cláusulas < div > y < /div >.
El elemento DIV define un contenedor genérico, el cuál permite a los programadores definir estilos o bloques de contenido.
Como parámetros a DIV tenemos ID, CLASS y ALIGN, aunque éste ultimo cada vez se emplea menos en favor de las CSS.
Ejemplos de uso de DIV.
<div id="primero">
<p>Algún texto.</p>
<p>Un poco más de texto.</p></div>
<div id="segundo"></div>
El primero de los ejemplos muestra 2 párrafos de texto en la página, mientras que el Segundo no muestra nada; simplemente es un contenedor vacío en estos momentos.
Podemos recuperar el contenido de DIV de la siguiente forma:
var contenido = document.getElementById('primero').innerHTML;
La variable contenido almacena ahora todo el texto de los dos párrafos así como las marcas < p > y < /p >.
Podríamos reemplazar los dos párrafos completamente asignándoles un nuevo valor.
document.getElementById('primero').innerHTML = '<p>Un parrafo de texto para reemplazar los dos anteriores.</p>’;
TOMADO DE: https://manuais.iessanclemente.net/index.php/Propiedad_de_objetos_web_innerHTML
EJERCICIO:
<script>
function sumar(){
var a= parseInt(document.getElementById("a").value);
var b= parseInt(document.getElementById("b").value);
//alert( a + b );
//document.write( a + b );
document.getElementById("rta").value= a + b;
document.getElementById("mirespuesta").innerHTML= a + b;
}
function sumar2(a, b){
document.getElementById("rta").value= a + b;
document.getElementById("mirespuesta").innerHTML= a + b;
}
function restar(){
var a= parseInt(document.getElementById("a").value);
var b= parseInt(document.getElementById("b").value);
//alert( a + b );
//document.write( a + b );
document.getElementById("rta").value= a - b;
document.getElementById("mirespuesta").innerHTML= a - b;
}
function multi(){
var a= parseInt(document.getElementById("a").value);
var b= parseInt(document.getElementById("b").value);
//alert( a + b );
//document.write( a + b );
document.getElementById("rta").value= a * b;
document.getElementById("mirespuesta").innerHTML= a * b;
}
sumar2(32, 2);
</script>
<body>
<div id="mirespuesta">hola</div>
A: <input type="text" id="a"><br>
B: <input type="text" id="b"><br>
RTA: <input type="text" id="rta" readonly ><br>
<input type="button" value="Sumar" onclick="sumar();" ><br>
<input type="button" value="Restar" onclick="restar();" ><br>
<input type="button" value="multiplicar" onclick="multi();" ><br>
</body>
No hay comentarios.:
Publicar un comentario