Autor Tema: Lista de eventos JavaScript. (on) click, dblclick, mouseover formulario CU01159E (Leído 2005 veces)

paramonso · « **en:** 06 de Febrero 2018, 19:49 »

Hola. Dejo el Ejercicio CU01159E Lista de eventos JavaScript. (on) click, dblclick, mouseover, mouseout, change, submit, keypress del tutorial gratuito de programación JavaScript de aprenderaprogramar.

Ejercicio 1.

Citar

Crea un documento HTML que conste de un título h1 con el texto <<La web para aprender programación>>, dos párrafos de texto y una imagen. Utiliza los eventos onmouseover para que la imagen original sea reemplazada por otra imagen cuando el usuario pasa el ratón sobre ella. Utiliza el evento onmouseout para hacer que cuando el usuario salga del espacio de la imagen, vuelva a aparecer la imagen original.

Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.

Código: [Seleccionar]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>sin título</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="generator" content="Geany 1.32" />
</head>
<script>
	window.onload = function () 
	{
		msg="";
		var elemento=document.querySelectorAll('img') 
		for (var i=0;i<elemento.length;i++) 
		{
		elemento[i].addEventListener("mouseover", ratonDencima)
		elemento[i].addEventListener("mouseout", ratonFuera)
		}
		
		 
function ratonDencima()
		{	
			this.setAttribute('src','https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRmmPTWTF84dFlHa216Clud-J3KHknwjmYGahj4MKwQC6W6o7oCRg');    
		}
function ratonFuera()
		{
		         this.setAttribute('src',"http://buhoprogramador.com/static/images/logo.svg");
		}

	}
</script>
<style>
  body *
 {
    margin: 10px;
    text-align:center;
  }
 body{background-color: yellow; }
 img
 {
	display:block;
	margin:auto;
	width:200px;
	height:200px;
	  
 }
  
 
</style>
<body>
<h1>La web para aprender programación<br></h1>
  
 
    <p>Ejemplo de mouseover y mouseout</p>
    <p>utilizando setAttribute</p>
    <img src="http://buhoprogramador.com/static/images/logo.svg"  >
    
   
</body>

</html>

Ejercicio 2

Citar

Crea un documento HTML que conste de un título h1 con el texto <<La web para aprender programación>>, dos párrafos de texto y un formulario con los campos nombre, apellidos, edad y correo electrónico, así como con botones enviar y cancelar. Utiliza el evento onsubmit y otras herramientas para impedir que se envíe el formulario si se produce alguna de estas circunstancias:

a) El nombre está vacío ó el correo electrónico está vacío.

b) El correo electrónico no contiene los símbolos @ (arroba) y . (punto). Por ejemplo juan arroba gmail.com no es un correo válido.

c) No existe al menos una letra precediendo el símbolo @ del correo electrónico y una letra después de este símbolo. Por ejemplo a@.com no es un correo válido.

d) No existen al menos dos letras después del punto en el correo electrónico. Por ejemplo juan@gmail.c no es un correo válido.

e) La edad es cero o menor de cero.

En caso de producirse una de estas circunstancias, debe mostrarse el campo del formulario de un color distinto y un mensaje de advertencia. El color de advertencia debe desaparecer (dinámicamente) cuando el campo que tenía un problema tome el foco (para ello usa el evento onfocus).

Código: [Seleccionar]

<html>
	<head>
		<title>Ejemplo curso aprenderaprogramar.com</title><meta charset="utf-8">
		 
<script type="text/javascript">
	
/* ************************************************************************ */	 
/* *******************            EJERCICIO         *********************** */	 
/* ************************************************************************ */	 
function Comenzar()
	{
		 
	  idNombre=document.getElementById("nombre");
	  idApellidos=document.getElementById("apellidos");
	  idEdad=document.getElementById("edad");
	  idEmail=document.getElementById("email");
	 
	  idNombre.addEventListener("focus", colorOriginal);
	  idApellidos.addEventListener("focus", colorOriginal);
	  idEdad.addEventListener("focus", colorOriginal);
	  idEmail.addEventListener("focus", colorOriginal);
	  
	}		
	
function colorOriginal(){this.style.background='white'; }
 
	
function validacionConExpReg()	
	{
	msg="";
	
	 
	// a) Validar Nombre
	var regExp=/\w{1}/
		nomTrue=regExp.test(idNombre.value);
		apeTrue=regExp.test(idApellidos.value);
		if (!nomTrue || !apeTrue)
		{
			if(!nomTrue){idNombre.style.background="red";}
			if (!apeTrue){idApellidos.style.background="red";}
			alert("El nombre  o el apellido no puede estar vacio");
			 
			
		}
	// Validar que edad ni cero ni menor que cero
		if(idEdad.value<="0"){
			edadTrue=false;
			alert("La edad no puede ser cero o menor que cero")
			idEdad.style.background="red";
			}
			else {
			edadTrue=true;
			}		
		
	//c) Validar at = @
		regExp=/\w+\sat\s\w+/;
		atTrue=regExp.test(idEmail.value);
		if (atTrue)
			{
				var atEmilio=idEmail.value;
				idEmail.value=atEmilio.replace(/\sat\s/g,'@');
			}
			else{idEmail.style.background="red";}
			 
		
		//b) Validar @ , . y mas de dos caracteres despues de punto
		regExp=/\@{1}\w+\.{1}\w{2}/;
		arroTrue=regExp.test(idEmail.value);
		if (!arroTrue)
			{
			alert('Falta el signo de la arroba @ o el punto .\n'+
							'No se admite menos de una letra despues de arroba\n'+
							'No se admite menos de dos letras despues de punto');
			idEmail.style.background="red";
				
			}
		//Convertir a minusculas
		if (arroTrue)
		{
			Emilio=idEmail.value;
			idEmail.value=Emilio.toLowerCase();
			
		}
		
	
/* ************************************************************************ */	 
/* *******************      FIN   EJERCICIO         *********************** */	 
/* ************************************************************************ */
		//Vaciar datos y no enviar formulario
if (!arroTrue || !nomTrue || !edadTrue)
	{ 
		 alert ("!!!!! LOS DATOS INTRODUCIDOS NO SON CORRECTOS ¡¡¡\n !!!! Y NO SE ENVIARAN ¡¡¡¡¡¡");
		 return false;
	}
	else
	{
		//Presentar datos y enviar formulario
		var msg="Los datos introducidos son:\n";
		 
		msg=msg+"Nombre    :"+idNombre.value+"\n";
		msg=msg+"Apellidos :"+idApellidos.value+"\n";
		msg=msg+"Edad      :"+idEdad.value+"\n";
		msg=msg+"Email     :"+idEmail.value;
		msg=msg+"\n \n OK\n\nLOS DATOS VAN A SER ENVIADOS ¡¡¡¡"
		alert(msg);
	}
 }
	
</script>




<style type="text/css">
	body{
		background-color:green;
		text-align:center;
		}
	#Contenedor {
		background:yellow;
		width:300px;
		height:125px;
		border:solid,red;
		margin:12% auto;
		text-align:center;
		
	}
  p{
	  color:black; 
	  display:block; 
	  margin:0px; 
	  padding:5px;
	}

			 
</style>
	</head>
	<body onload="Comenzar()">
		<h1>La web para aprender programación</h1>
		<h2>Ejercicio CU01159E-2</h2>
		<p>Ejemplo de listas de eventos Javascript</p>
		<p>(on) click, dblclick, mouseover, mouseout, change, submit, keypress.</p>
			
		<div id="Contenedor">
		<form name ="formularioContacto" class="form" method="get" onsubmit="return validacionConExpReg()">
			<p><strong>Nombre : </strong><input id="nombre" type="text" name="nombre"> </p> 
			<p><strong>Apellidos:</strong> <input id="apellidos" type="text" name="apellidos"></p>
			<p><strong>Edad:</strong> <input id="edad" type="text" name="edad"></p>
			<p><strong>Email :</strong> <input id="email" type="text" name="email"></p>
			<p><input type="submit" value="Enviar" ><input type="reset" value="Cancelar"></p>
		</form>
		</div>
		&copy;parasabermas@hayquestudiar.com
	</body
</html>

Espero este todo bien.
Gracias.
Un saludo.

Ogramar · « **Respuesta #1 en:** 16 de Junio 2018, 18:38 »

Buenas, ambos códigos funcionan correctamente y están bien planteados. En el ejercicio 2 en mi navegador se ve mal el cuadro amarillo que donde están los campos del formulario debido a la regla CSS height:125px; Si lo dejo comentado con //height:125px; ya se ve correctamente. Esto ya se ha comentado en algún ejercicio anterior, en general los height no los establecemos mediante CSS sino dejamos que sea el flujo del contenido el que determine los valores de altura.

Salu2

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: