<!--Parte html -->
<div onclick="mensaje()">
Pulsar aquí
</div>
<!-- parte javascript-->
<script>
function mensaje(){
alert("Pulsaste el botón")
}
</script>
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
<!--Parte html -->
<div onclick="mensaje()">
Pulsar aquí
</div>
<!-- parte javascript-->
<script>
function mensaje(){
alert("Pulsaste el botón")
}
</script>
<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>
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>
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>
<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>
<label>Coordenada X</label>
<input id="cX"> </div>
<label>Coordenada Y</label>
<input id="cY"> </div>
</body>
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>
<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>
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>
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';
}
}
<form>
<label>No se aceptan dígitos</label>
<input type="text" id="letras">
</form>
document.addEventListener('keypress', filtrar);
function filtrar(){
let campo = document.getElementById('letras');
let tecla = event.key;
if (!isNaN(tecla))
event.preventDefault();
}