[2017-15-02]
CLASE 03:
EVENTOS JAVASCRIPT:
Las aplicaciones web creadas con el lenguaje
JavaScript pueden utilizar el modelo de programación basada en eventos. Los eventos hacen posible que los usuarios
transmitan información a los programas.
Los scripts se dedican a esperar a que el
usuario "haga
algo" (que pulse una tecla, que mueva
el ratón, que cierre la ventana del
navegador), el script responde a la acción del usuario normalmente
procesando esa información y generando un resultado.
Eventos: Condicionados a cualquier clase de
objetos (Botón, Cajas de Texto).
<body>: Es un objeto que contiene todos
los objetos. Es el Contenedor más grande.
TIPOS DE EVENTOS
El nombre de cada evento se construye mediante
el prefijo
on, seguido del nombre en inglés de la acción asociada al
evento.
onblur: Deseleccionar el elemento.
Elementos para los que está definido:
<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>
TOMADO DE:
document.getElementById
Permite obtener la referencia a un elemento de la página mediante
el id de dicho elemento (Llama por medio del id a un elemento).
Por ejemplo, si tenemos una imagen representada por el
siguiente código HTML:
<img
src="foto.jpg" id="mifoto"/>
Podríamos obtener una referencia a dicha imagen mediante el
siguiente código JavaScript:
<script type="text/javascript">
foto=document.getElementById("mifoto")
</script>
Una vez obtenida la referencia al elemento, podemos acceder a
todas sus propiedades, ya sea para lectura o escritura.
EJERCICIO DE CLASE:
Se realiza un ejercicio javascript donde se coloca en
práctica lo explicado por el Docente como lo es la función document.getElementById
y poder modificar texto en cualquier posición del sitio web.
Se tiene dos cajas de texto donde se introducen dos valores y
se tienen tres botones que al oprimirlos darán sus respectivos resultados de
acuerdo a las operaciones asignadas a cada uno de ellos.
<script>
function s(){
var a = parseInt(document.getElementById("a").value);
var b = parseInt(document.getElementById("b").value);
//alert ( a + b);
//document.write( a + b);
var rta = a + b;
document.getElementById("rta").value = rta;
document.getElementById("holita").innerHTML = "<marquee><b><font color='#ff0000'>" + "Esto es el resultado de mi suma = " + (a + b ) + "</font></b></marquee>";
}
function r(){
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("holita").innerHTML = "<marquee><b><font color='#ff0000'>" + "Esto es el resultado de mi resta = " + (a - b ) + "</font></b></marquee>";
}
</script>
<body>
<label>A:</label>
<input type="text" id="a" autocomplete="off">
<br>B: <input type="text" id="b">
<br>Rta: <input type="text" id="rta" readonly >
<hr>
<input type="button" value="Sumar" onclick="s();" >
<input type="button" value="Restar" onclick="r();">
<input type="button" value="Multiplicar" >
<hr>
<div id="holita">esto es mi mensaje</div>
<hr>
</body>
No hay comentarios:
Publicar un comentario