Ejercicios Javascript sobre eventos

Ejercicios para practicar
Evalúate

Para Javascript los eventos de una página web son señales de que algo ha ocurrido. Ante esta señal javascript puede ejecutar las acciones que programemos.

Para esto a cada evento se le puede asignar un script (handler). Esto puede hacerse directamente con HTML (onclick, onmosumove...) o mediante Javascript con el método addEventListener()

Repasa más sobre en la página dedicada a los eventos

Lo que se pide
Aclaraciones
En una página web vas a colocar un elemento tipo div con un argumento onclick() para que al pulsar sobre el bloque se abra una ventana alert con el mensaje "Pulsaste sobre el botón". El bloque div deberá tener como texto "Pulsa aquí".
Al pulsar sobre el ratón sobre el bloque saltará la ventana alert. El bloque div puede ser un bloque simple, o puedes aplicarle estilos css para que quede como un botón.

<!--Parte html -->

<div onclick="mensaje()">

Pulsar aquí

</div>

<!-- parte javascript-->

<script>

function mensaje(){

   alert("Pulsaste el botón")

}

</script>

Necesitas una página web con dos bloques div. El primer bloque contiene el texto "Pasa por aqui" y el segundo "Efectos del movimiento" con un argumento id = "efecto" . Cuando el ratón pase por el primer bloque se llamará a la función color que cambia el fondo del segundo bloque a color verde (backgroundColo:  green")
Recuerda que los nodos se pueden seleccionar con getElementById(). Usa estilos en linea (style)

<div onmousemove="colorFondo()">Psar por aquí</div>

<div id="efecto">Efectos del movimiento</div>

<script>

function colorFondo(){

  let cuadro =  document.getElementById('efecto');

  cuadro.style.backgroundColor = 'green';

}

</script>

En esta págian web debes agregar un script para asignar un manejador de eventos al botón button. Este script deberá escribir en el campo total el valor de multiplicar los otros dos campos.

<form>

<input id="precio" type="number">

<input id="cantidad" type="number">

<input type="button" id="enviar" value="Calcular">

<input id="total" readonly>

</form>

La página mostrará el formulario, si se escribe 5 y 8 al pulsar sobre el botón de calcular  aparecerá 40 en el campo total. Coloca el script al final del body.

let boton = document.getElementById('enviar');

let resdo = document.getElementById('total');

boton.addEventListener('click', multiplicar);

function multiplicar(){

   let precio = document.getElementById('precio');

   let cantidad = document.getElementById('cantidad');

   total.value = precio*cantidad;

}

Crea un script para que se active cuando la página se haya cargado completamente (evento load de window). Una vez cargada la página el script asignará un evento al bloque de manera que al entrar el ratón su fondo pase a rojo y al salir vuelva al blanco.

El script se colocará en la sección head. de la página.

<div style="display: block; width: 100px; height: 100px;" id="cuadro">

  Cuadro que cambia al entrar el ratón

</div>

 

Si el script se coloca en head solo se debe ejecutar cuando el documento se haya cargado, por eso el  evento onload.

window.addEventListener('load', asignar);

function asignar(){

let blq = document.getElementById('test');

blq.addEventListener('mouseenter', ponRojo);

blq.addEventListener('mouseout', ponBlanco);

}

function ponRojo(){

let cuadro = document.getElementById('test')

cuadro.style.backgroundColor= 'red'

}

function ponBlanco(){

let cuadro = document.getElementById('test')

cuadro.style.backgroundColor= 'white'

}

En esta página tienes dos bloques div a modo de botones, como ves en este código HTML de abajo. Debes escribir una única función Javascript (llamada pulsar) para manejar los eventos click de ambos botones. Cuando pulses con el ratón en cualquier botón deberá aparecer una ventana alert indicando el id del botón donde se ha pulsado.

<head>

<style>

.boton{display:block; width:100px;cursor:pointer;margin: 10px;border:1px solid black}

</style>

</head>

<body>

<div id="boton1" class="boton">Pulsar aquí</div>

<div id="boton2" class="boton">Pulsar aquí</div>

</body>

Debes usar el objeto event para este ejercicio. Coloca el script al final de la página.

<script>

let btn1 = document.getElementById('boton1');

let btn2 = document.getElementById('boton1');

btn1.addEventListener('click', pulsar);

btn1.addEventListener('click', pulsar);

function pulsar(){

alert(event.target.id);

}

</script>

La página descrita con este código HTML posee dos bloques div cuyos atributos id son cX, cY. Debes escribir un manejador para el evento de movimiento del ratón por el documento. Este script deberá anotar en los cuadros cX y cY las coordenadas donde se encuentra el puntero del ratón mientras se mueve por todo el documento.

<label>Coordenada X</label>

<input id="cX"> </div>

<label>Coordenada Y</label>

<input id="cY"> </div>

</body>

A medida que se mueve el ratón en los cuadros aparecerá la posición x e y del ratón medidas respeto a la pantalla (screen) del navegador, o sea, cX distancia horizontal a la esquina superior izquierda y cY distancia vertical a la esquina superio derecha

document.addEventListener('mousemove', posicion);

function posicion(){

 let cX = document.getElementById('cX');

 let cY = document.getElementById('cY');

  cX.value = event.screenX;

  cY.value = event.screenY;

}

En la página que puedes construir con este código HTML tienes tres bloques: uno de color rojo otro de color blanco y otro de color azul. Crea un script para que cuando el ratón se mueva desde el bloque rojo al central éste se pongo rojo. Si se mueve desde el azul al central, éste se pondrá azul. Si entra en el bloque desde otro sitio el bloque recuperará el color blanco.

<head>

<style>

div{ width: 100px; height:100px;}

</style>

</head>

<body>

   <div id="c1" style="background: red"></div>

   <div id="c2" style="background: white"></div>

   <div id="c3" style="background: blue"></div>

</body>

Usa el objeto evento pasado como argumento. Lee y pon los colores usando  style.background. El script lo que hace es que al entrar en el bloque central arrastra el color del bloque por el que pasa.

<script>

c2.addEventListener('mouseenter', pintar);

function pintar(e){

  let bloque = e.currentTarget;

  let origen = e.relatedTarget;

  if(origen.id != 'BODY'){

       bloque.style.background = origen.style.background;

      }

  else{

       bloque.style.background = 'white';

      }

}

</script>

En esta página existen tres bloques ocultos. Debes crear un evento de teclado para que actúe cuando el usuario pulsa una etcla. si pulsa la tecla 1 se abre el bloque con id ficha1, si pulsa 2 se abre el bloque ficha2 y si 3 se abre el de ficha3.

<head>

<style>

.oculto{ display: none}

.visible {display:baock}

</style>

</head>

<body>

<div class="oculto" id="ficha1">

Hola, soy el bloque 1</div>

<div class="oculto" id="ficha2">

Hola, soy el bloque 2</div>

<div class="oculto" id="ficha3">

Hola, soy el bloque 3</div>

</body>

Los bloques no se ven hasta que se pulda la tecla de cada uno. Solo hay un bloque visible cada vez. Puedes usar las clases definidas y el objeto classList.

document.addEventListener('keypress', alternar);

function alternar(e){

let id='';

switch (e.key){

    case '1':

        id="ficha1";

        break;

    case '2':

        id="ficha2";

        break;

    case '3':

        id="ficha3";

        break;

}

if (id != ''){

    let o = document.querySelector('.visible')

    if(o){

        o.classList.replace('visible', 'oculto')

        }

    o = document.getElementById(id)

    o.classList.replace('oculto', 'visible');

    }

}

Escribe un script que responda al evento scroll y que muestre un boton o bloque div en el fondo de la pantalla cuando deje de verse la linea superior del documento

<head>

<style>

#boton{ position: absolute; display:none}

body{height: 200vh}

</style>

</head>

<body>

Primera linea o cabecera

<div id="boton">Boton</div>

</body>

 

El botón se queda quieto en el fondo de la pantalla. Recuerda que el alto de la ventana del navegador viene dado por window.innerHeight mientras que el desplazamiento vertical de la ventana está en window.scrollY

document.addEventListener('scroll', fijar);

function fijar(){

let btn = document.getElementById('boton');

if(window.scrollY > 30){

   let posFondo = window.innerHeigh + window.scrollY;

   posFondo -=32;

   btn.style.display ='block';

   btn.style.top = posFondo+'px';

   }

}

En este input no se deben aceptar valores que sean numéricos. Todo lo que esté entre 0 y 9 no se deben aceptar. Diseña un manejador de eventos para evitar que en el control se anoten números.

<form>

<label>No se aceptan dígitos</label>

<input type="text" id="letras">

</form>

Al pulsar una tecla numérica debe interrumpirse el flujo normal predefinido del input para no admitir la tecla pulsada.

document.addEventListener('keypress', filtrar);

function filtrar(){

    let campo = document.getElementById('letras');

   let tecla = event.key;

    if (!isNaN(tecla))

       event.preventDefault();

}

scripts