UT2 DESARROLLO DE APPS MEDIANTE LENGUAJES DE SCRIPT

Interacción con el usuario: eventos

eugeniaperez.es

UT 2: lenguajes de scripting

eugeniaperez.es

interacción con el usuario

Se realiza a partir de eventos que representan los cambios en una aplicación web.

Los eventos se sitúan en componentes de la página HTML -> click en botón...

Para controlar un evento necesitamos un manejador. Un manejador es una palabra reservada que indica la acción que va a manejar. 

 

Interacción con el usuario

UT 2: lenguajes de scripting

eugeniaperez.es

interacción con el usuario

En el caso del evento onclick:

 

Normalmente se suele llamar a una función:

 

<button onclick="this.innerHTML=Date()">The time is?</button>
<button onclick="displayDate()">The time is?</button>

<p id="demo"></p>
<script type="text/javascript" src="js/events.js" ></script>
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}

Interacción con el usuario

UT 2: lenguajes de scripting

eugeniaperez.es

EVENTOS DE RATÓN

  • Click: pulsamos el botón izquierdo del ratón.  onclick.
  • Dblclick.  doble click sobre el botón izquierdo.  ondblclick.
  • Mousedown. pulsamos un botón del ratón. onmousedown.
  • Mouseover. El puntero del ratón está dentro de un elemento y es desplazado fuera del elemento. onmouseout.
  • Mouseover.  al revés que el anterior. onmouseover.
  • Mouseup. Soltamos un botón del ratón que previamente teníamos pulsado. onmouseup.

 

Interacción con el usuario

UT 2: lenguajes de scripting

eugeniaperez.es

EVENTOS DE RATÓN

  • Mousemove. Cuando el puntero del ratón se encuentra dentro de un elemento y permanece dentro del mismo. onmousemove.

 

<p ondblclick="helloWorld()">Double-click</p>
<div onmousemove="setCoordinates(event)" onmouseout="clearCoordinates()"></div>
<style>
    div {
        width: 200px;
        height: 100px;
        border: 1px solid black;
     }
</style>

Interacción con el usuario

Nos permite obtener las coordenadas del cursor

UT 2: lenguajes de scripting

eugeniaperez.es

EVENTOS DE RATÓN

 

function helloWorld() {
    document.getElementById("demo").innerHTML = "Hello World";
}

function setCoordinates(e) {
    var x = e.clientX;
    var y = e.clientY;
    var coor = "Coordinates: (" + x + "," + y + ")";
    document.getElementById("demo").innerHTML = coor;
}

function clearCoordinates() {
    document.getElementById("demo").innerHTML = "";
}

Interacción con el usuario

UT 2: lenguajes de scripting

Interacción con el usuario

eugeniaperez.es

EVENTOS DE teclado

  • Keydown. Cuando pulsamos una tecla del teclado. Si la mantenemos pulsada el evento se repitirá . onkeydown.
  • Keypress. Si pulsamos una tecla de un carácter alfanumérico. onkeypress.
  • Keyup. Se produce cuando soltamos una tecla. onkeyup.

UT 2: lenguajes de scripting

Interacción con el usuario

eugeniaperez.es

EVENTOS DE teclado

<input type="text" onkeypress="showMessage()">
function showMessage() {
    alert("You pressed a key inside the input field");
}

UT 2: lenguajes de scripting

Interacción con el usuario

eugeniaperez.es

EVENTOS HTML

  • Load. Cuando la página se ha cargado por completo.  onload.
  • Unload. Cuando la página se ha desaparecido por completo. onunload.
  • Error. Cuando se ha producido un error en JavaScript. onerror.
  • Select. Se acciona cuando seleccionamos texto de los cuadros de texto <input> y <textarea>. onselect.
  • Change. Cuando los cuadros de texto <input> y <textarea> pierden el foco y el contenido que tenían ha variado. onchange.

UT 2: lenguajes de scripting

Interacción con el usuario

eugeniaperez.es

EVENTOS HTML

  • Submit. Cuando pulsamos sobre un botón de este tipo. onsubmit.
  • Reset. Cuando pulsamos sobre un botón de tipo reset. onreset.
  • Resize. Se produce cuando redimensionamos el navegador. Actúa sobre Window. onresize.
  • Scroll. Cuando varía la posición de la barra de scroll.  onscroll.
  • Focus. Se produce cuando un elemento obtiene el foco. onfocus.
  • Blur. Se produce cuando un elemento pierde el foco. onblur.

UT 2: lenguajes de scripting

Interacción con el usuario

eugeniaperez.es

EVENTOS DOM

  • DOMSubtreeModified. Cuando añadimos o elminamos nodos.
  • DOMNodeInserted. Añadimos un nodo hijo a un nodo padre.
  • DOMNodeRemoved. Eliminamos un nodo que tiene un nodo padre.
  • DOMNodeRemovedFromDocument. Cuando eliminamos un nodo del documento.
  • DOMNodeInsertedIntoDocument. Cuando añadimos un nodo al documento.

UT 2: lenguajes de scripting

Interacción con el usuario

eugeniaperez.es

EVENTOS DOM

Para detectar este tipo de eventos producidos sobre elementos del DOM, se debería declarar un Listener sobre el cuerpo, o el contenedor específico a observar.

addEventListener(): registra un evento a un objeto específico, que puede ser un elemento en un archivo, el mismo documento, una ventana, etc.  

 

 

UT 2: lenguajes de scripting

Interacción con el usuario

eugeniaperez.es

EVENTOS DOM

addEventListener

  •  

 

 

window.addEventListener("resize",resizeWindow);
function resizeWindow() {
    alert("You've resized the current window...");
}

ut 2: lenguajes de scripting

 

eugeniaperez.es

Sintaxis de JS II

  • Prueba el ejemplo de la página 68 y 69.
  • Prueba los ejemplos del aula: Examples DOM
  • Realiza el Test 4. JavaScript OO
  • JS Entrega.B-> Juego de memoria en JS
    • ​​7 Octubre 23:30
  •  
Made with Slides.com