« anterior próximo »
Páginas: [1]

Autor Tema: Lista de eventos JavaScript focus blur addEventListener a elementos CU01159E.  (Leído 4824 veces)

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Lista de eventos JavaScript focus blur addEventListener a elementos CU01159E.
« en: 11 de Noviembre 2015, 00:20 »
Hola.

Citar
EJERCICIO 1
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.

Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros"><meta charset="utf-8">
<script type="text/javascript">
window.onload = function(){
var elementoImagen = document.getElementById('imagen');
elementoImagen.addEventListener('mouseover', cambiaImagen);
elementoImagen.addEventListener('mouseout', cambiaAImagenInicial);
function cambiaImagen() { this.src = 'http://images4.hiboox.com/images/4111/diapo0289e8e5b4f9fb2375c0e99b518a8807.png?24';}
function cambiaAImagenInicial(){ this.src = 'http://i1336.photobucket.com/albums/o646/alejrod872/Curso%20JavaScript/javascript_logo_zps7835661f.png?t=1392290933';}
}
</script>
</head>
<body>
<h1>La web para aprender programación</h1>
<p>EJERCICIO 1</p>
<p>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.</p>
<img id="imagen" src="http://i1336.photobucket.com/albums/o646/alejrod872/Curso%20JavaScript/javascript_logo_zps7835661f.png?t=1392290933">
</body>
</html>
Citar
EJERCICIO 2
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]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo curso aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
body {background-color:yellow; font-family: sans-serif;}
label {color: maroon; display:block; padding:5px;}
</style>
<script type="text/javascript">
window.onload = function(){
var elementoInput = document.getElementsByTagName('input');
for(var i = 0; i < elementoInput.length; i++){
elementoInput[i].addEventListener('focus', cambiaFondo);
elementoInput[i].addEventListener('blur', verificar);
}
function cambiaFondo(){this.style.backgroundColor = 'white'; this.nextSibling.textContent = '';}
function verificar(){verificaDatos(this);}
}
var nombreCorrecto = false;
var emailCorrecto = false;
var edadCorrecta = false;
function verificaDatosFormulario(){
var nodoNombre = document.getElementById('nombre');
var nodoEmail = document.getElementById('email');
if(nodoNombre.value=='' && nodoEmail.value==''){return false;}
}
function verificaDatos(nodo){
switch(nodo.name) {
case 'nombre':
if(!comprobarNombre(nodo.value)){
cambiaColorDeFondo(nodo);
edadCorrecta = false;
}else{
nombreCorrecto = true;
}
break;
case 'edad':
if(!comprobarEdad(nodo.value)){
cambiaColorDeFondo(nodo);
edadCorrecta = false;
}else{
edadCorrecta = true;
}
break;
case 'email':
nodo.value = pasarEmailAMinusculas(nodo.value);
if (comprobrarAtEnEmail(nodo.value)){nodo.value = cambiarAtEnEmail(nodo.value);}
if(!comprobarEmail(nodo.value)){
cambiaColorDeFondo(nodo);
edadCorrecta = false;
}else{
emailCorrecto = true;
}
break;
default:
break;
}
if(nombreCorrecto && emailCorrecto && edadCorrecta){return true;}else{return false;}
}
function comprobarEdad(edad){
if(edad>0){return true;}
}
function comprobrarAtEnEmail(email){
var expAt = /\w+\sat\s\w+/;
if(expAt.test(email)){return true;}
}
function cambiarAtEnEmail(email){
return email.replace(/\sat\s/g,'@');
}
function pasarEmailAMinusculas(email){
return email.toLowerCase();
}
function comprobarNombre(nombre){
var expReg = /\w{3}/;
if(!expReg.test(nombre)){
return false;
}else{
return true;
}
}
function comprobarEmail(email){
var expArroba = /[@]/;
var expPunto = /[.]/;
var expRegEmail = /\w+[@]\w+[.][A-Za-z]{2}/;
if(!expPunto.test(email) || !expArroba.test(email)){
if(!expArroba.test(email) && !expPunto.test(email)){
alert('Dirección de correo errónea, faltan el signo @ y el .');
}else if(!expArroba.test(email) && expPunto.test(email)){
alert('Dirección de correo errónea, falta el signo @');
}else{
alert('Dirección de correo errónea, falta el signo .');
}
return false;
}else{
if(expRegEmail.test(email)){
return true;
}else{
return false;
}
}
}
function cambiaColorDeFondo(nodo){
nodo.style.backgroundColor = 'orange'; nodo.nextSibling.textContent = 'Campo incorrecto.';
}
</script>
</head>
<body>
<h1>La web para aprender programación</h1>
<p>EJERCICIO 2</p>
<p>Crea un documento HTML que conste de un título h1 con el texto...</p>
<form name ="formularioContacto" class="formularioTipo1" method="get" onsubmit="return verificaDatosFormulario()">
<label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" "><span></span></label>
<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos"><span></span></label>
<label for="edad"><span>Edad:</span> <input id="edad" type="text" name="edad" ><span></span></label>
<label for="email"><span>Correo electrónico:</span> <input id="email" type="text" name="email" ><span></span></label>
<label><input type="submit" value="Enviar"><input type="reset" value="Cancelar"></label>
</form>
</body
</html>
Saludos.
« Última modificación: 13 de Noviembre 2015, 08:27 por Ogramar »
En línea

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Lista de eventos JavaScript.CU01159E.
« Respuesta #1 en: 11 de Noviembre 2015, 22:04 »
Hola, me acabo de dar cuenta que el ejercicio dos que inserte no era el que debía de poner ahí, seria este:

Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo curso aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
body {background-color:yellow; font-family: sans-serif;}
label {color: maroon; display:block; padding:5px;}
</style>
<script type="text/javascript">
window.onload = function(){
var elementoInput = document.getElementsByTagName('input');
for(var i = 0; i < elementoInput.length; i++){
elementoInput[i].addEventListener('focus', cambiaFondo);
elementoInput[i].addEventListener('blur', verificar);
}
function cambiaFondo(){this.style.backgroundColor = 'white'; this.nextSibling.textContent = '';}
function verificar(){verificaDatos(this);}
}
var nombreCorrecto = false;
var emailCorrecto = false;
var edadCorrecta = false;
function verificaDatosFormulario(){
if(nombreCorrecto && emailCorrecto && edadCorrecta){return true;}else{return false;}
}
function verificaDatos(nodo){
switch(nodo.name) {
case 'nombre':
if(!comprobarNombre(nodo.value)){
cambiaColorDeFondo(nodo);
nombreCorrecto = false;
}else{
nombreCorrecto = true;
}
break;
case 'edad':
if(!comprobarEdad(nodo.value)){
cambiaColorDeFondo(nodo);
edadCorrecta = false;
}else{
edadCorrecta = true;
}
break;
case 'email':
nodo.value = pasarEmailAMinusculas(nodo.value);
if (comprobrarAtEnEmail(nodo.value)){nodo.value = cambiarAtEnEmail(nodo.value);}
if(!comprobarEmail(nodo.value)){
cambiaColorDeFondo(nodo);
emailCorrecto = false;
}else{
emailCorrecto = true;
}
break;
default:
break;
}
}
function comprobarEdad(edad){
if(edad>0){return true;}
}
function comprobrarAtEnEmail(email){
var expAt = /\w+\sat\s\w+/;
if(expAt.test(email)){return true;}
}
function cambiarAtEnEmail(email){
return email.replace(/\sat\s/g,'@');
}
function pasarEmailAMinusculas(email){
return email.toLowerCase();
}
function comprobarNombre(nombre){
var expReg = /\w{3}/;
if(!expReg.test(nombre)){
return false;
}else{
return true;
}
}
function comprobarEmail(email){
var expArroba = /[@]/;
var expPunto = /[.]/;
var expRegEmail = /\w+[@]\w+[.][A-Za-z]{2}/;
if(!expPunto.test(email) || !expArroba.test(email)){
if(!expArroba.test(email) && !expPunto.test(email)){
alert('Dirección de correo errónea, faltan el signo @ y el .');
}else if(!expArroba.test(email) && expPunto.test(email)){
alert('Dirección de correo errónea, falta el signo @');
}else{
alert('Dirección de correo errónea, falta el signo .');
}
return false;
}else{
if(expRegEmail.test(email)){
return true;
}else{
return false;
}
}
}
function cambiaColorDeFondo(nodo){
nodo.style.backgroundColor = 'orange'; nodo.nextSibling.textContent = 'Campo incorrecto.';
}
</script>
</head>
<body>
<h1>La web para aprender programación</h1>
<p>EJERCICIO 2</p>
<p>Crea un documento HTML que conste de un título h1 con el texto...</p>
<form name ="formularioContacto" class="formularioTipo1" method="get" onsubmit="return verificaDatosFormulario()">
<label for="nombre"><span>Nombre:</span> <input id="nombre" type="text" name="nombre" "><span></span></label>
<label for="apellidos"><span>Apellidos:</span> <input id="apellidos" type="text" name="apellidos"><span></span></label>
<label for="edad"><span>Edad:</span> <input id="edad" type="text" name="edad" ><span></span></label>
<label for="email"><span>Correo electrónico:</span> <input id="email" type="text" name="email" ><span></span></label>
<label><input type="submit" value="Enviar"><input type="reset" value="Cancelar"></label>
</form>
</body
</html>
Saludos.
En línea

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2664
    • Ver Perfil
Re:Lista de eventos JavaScript focus blur addEventListener a elementos CU01159E.
« Respuesta #2 en: 13 de Noviembre 2015, 08:30 »
Hola lo he chequeado, ejercicio 1 todo perfecto

Ejercicio 2 si está el formulario vacío y no se escribe nada y se intenta enviar debería mostrar las advertencias pero no hace nada

Salu2
En línea

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Lista de eventos JavaScript focus blur addEventListener a elementos CU01159E.
« Respuesta #3 en: 13 de Noviembre 2015, 17:32 »
Hola.

Rectifiqué la función verificaDatosFormulario(), quedando así:

Código: [Seleccionar]
function verificaDatosFormulario(){
if(nombreCorrecto && emailCorrecto && edadCorrecta){
return true;
}else{
if(!document.getElementById('nombre').value && !document.getElementById('email').value){
alert('No se ha rellenado ni el nombre ni el correo electrónico.');
}else if(!document.getElementById('nombre').value && document.getElementById('email').value){
alert('No se ha rellenado el nombre.');
}else if(document.getElementById('nombre').value && !document.getElementById('email').value){
alert('No se ha rellenado el correo electrónico.');
}
return false;
}
}
En línea

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2664
    • Ver Perfil
Re:Lista de eventos JavaScript focus blur addEventListener a elementos CU01159E.
« Respuesta #4 en: 13 de Noviembre 2015, 19:44 »
Cuadrado!  ;D
En línea
Páginas: [1]
« anterior próximo »
 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".