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

Autor Tema: JavaScript Lista de eventos, click, dblclick, mouseover onsubmit forms CU01159E  (Leído 4079 veces)

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
JavaScript Lista de eventos, click, dblclick, mouseover onsubmit forms CU01159E
« en: 21 de Marzo 2016, 19:36 »
Buenas tardes.

Procedo a exponer las soluciones del ejericicio CU01159E del curso JavaScript desde cero.

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:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">
window.onload = function(){

var imagen = document.querySelector('img');

imagen.addEventListener("mouseover",cambiarImagen);
imagen.addEventListener("mouseout",volverImagen);

function cambiarImagen(){
imagen.src = "https://www.aprenderaprogramar.com/images/thumbs_portada/thumbs_humor/78_futbolista_ordenador.jpg";
imagen.alt = "cargando imagen";
}

function volverImagen(){
imagen.src = "https://www.aprenderaprogramar.com/images/thumbs_portada/thumbs_humor/43_adictos_a_internet_apr2.jpg";
imagen.alt = "cargando imagen";
}
}
</script>
</head>
<body>
<div id="contenedor" style="text-align: center;">
<h1>La web para aprender programación</h1>
<p>Aquí está el texto del párrafo 1</p>
<p>Aquí está el texto del párrafo 2</p>
<img src="https://www.aprenderaprogramar.com/images/thumbs_portada/thumbs_humor/43_adictos_a_internet_apr2.jpg" alt="cargando imagen1">
</div>
</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>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">

var parrent01 = /\w{1,}/;
var parrent02 = /@/;
var parrent03 = /\./;
var parrent04 = /\w@\w/;
var parrent05 = /\.\w{2,}/;
var parrent06 = /\w+@\w+(?=\w+\.\w+)/;


function verificar(){

var inputs = document.getElementsByTagName('input');
for(var i=0;i<inputs.length;i++){
inputs[i].addEventListener('focus', quitarAtencion);
}

if((document.getElementById('nombre').value).match(parrent01) == null){
document.getElementById('nombre').style.backgroundColor = "red";
alert('El campo nombre es obligatorio!!!');
return false;
}else if((document.getElementById('correo').value).match(parrent01) == null){
document.getElementById('correo').style.backgroundColor = "red";
alert('El campo correo electrónico es obligatorio!!!');
return false;
}else if((document.getElementById('correo').value).match(parrent02) == null){
document.getElementById('correo').style.backgroundColor = "red";
alert('El correo electrónico tiene que contener el símbolo "@"!!!');
return false;
}else if((document.getElementById('correo').value).match(parrent03) == null){
document.getElementById('correo').style.backgroundColor = "red";
alert('El correo electrónico tiene que contener el símbolo "."!!!');
return false;
}else if((document.getElementById('correo').value).match(parrent04) == null){
document.getElementById('correo').style.backgroundColor = "red";
alert('Antes y después del símbolo "@" tiene que haber, por lo menos, una letra!!!');
return false;
}else if((document.getElementById('correo').value).match(parrent05) == null){
document.getElementById('correo').style.backgroundColor = "red";
alert('Después del símbolo "." tiene que haber, por lo menos, dos letras!!!');
return false;
}else if((document.getElementById('correo').value).match(parrent06) == null){
document.getElementById('correo').style.backgroundColor = "red";
alert('En un correo electrónico siempre tiene que estar el "@" antes que el "."!!!');
return false;
}else if((document.getElementById('edad').value)<=0){
document.getElementById('edad').style.backgroundColor = "red";
alert('La edad tiene que ser un valor positivo!!!');
return false;
}else{
alert('Los datos han sido correctos!!!');
return true;}
}

function quitarAtencion(){
this.style.backgroundColor = "";
}

</script>
</head>
<body>
<div id="contenedor" style="text-align: center;">
<h1>La web para aprender programación</h1>
<p onclick="verificar()">Aquí está el texto del párrafo 1</p>
<p>Aquí está el texto del párrafo 2</p>
<form name="formulario01"  method="get" onsubmit="return verificar()">
<label for="nombre"><span>Nombre:</span><input type="text" name="nombre" id="nombre"></label><br><br>
<label for="apellidos"><span>Apellidos: </span><input type="text" name="apellidos" id="apellidos"></label><br><br>
<label for="edad"><span>Edad:</span><input type="text" name="edad" id="edad"></label><br><br>
<label for="mail"><span>Correo Electrónico:</span><input type="text" name="correo" id="correo"></label><br><br>
<label>
<input type="submit" value="Enviar">
<input type="reset" value="Cancelar">
</label>
</form>
</div>

</body>
</html>
Como podéis ver, en el segundo ejercicio no he utilizado tantas funciones como mis compañeros. No sé si esto es una práctica errónea por no separar cada función con su cometido. Dejo a vosotros que lo valoréis.

Quería poner atención a un asunto. Para que el formulario no se envíe, ponemos en la etiqueta del formulario "<form onsubmit="return verificar()">" si sólo hubieramos puesto "<form onsubmit="verificar()">" activaría la función pero tanto si se cumplieran como si no las condicionales el formulario se enviará. Si incluimos "return" en la función, decimos que segun lo que devuelva la función (true o false) se enviará el formulario o no.

Gracias.
« Última modificación: 29 de Marzo 2016, 15:22 por César Krall »
En línea

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:JavaScript Lista de eventos, click, dblclick, moueseover... CU01159E
« Respuesta #1 en: 22 de Marzo 2016, 18:04 »
Hola dimiste.

En el primer ejercicio está bien. Solo comentarte que con addEventListener cuando invocas la función cambiarImagen o volverImagen ya le estás pasando el elemento que recive el evento. En dichas funciones deberías usar this y no usar la variable imagen.

El segundo ejercicio al resolverlo de la manera que lo hiciste, no funciona como debería.
Piensa que si yo introduzco mal los datos del nombre, edad y el correo, cuando pulse enviar solo me dirá que el nombre está mal en vez de informarme de todo lo que está mal, es decir, para que yo me entere de que el campo edad está mal, según está ahora, primeramente tendría que introducir los demás datos todos bien. Deberías intentar resolverlo de otra forma.

Saludos.
En línea

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
Re:JavaScript Lista de eventos, click, dblclick, moueseover... CU01159E
« Respuesta #2 en: 23 de Marzo 2016, 02:14 »
Buenas, Pedro.

Gracias por corregirme el ejercicio.

Tomo nota sobre el primer código. Ya lo he corregido.

Sobre el segundo código lo rectificaré y subiré la solución. Aunque me parece, que tal y como me comentas lo que debería de hacer el código, no se podrá hacer sólo con una función. Debería de hacerlo de forma similar a como lo has solucionado tú o Bermatinv.

Saludos.
En línea

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
Re:JavaScript Lista de eventos, click, dblclick, moueseover... CU01159E
« Respuesta #3 en: 24 de Marzo 2016, 15:09 »
Buenas tardes, Pedro y a todos los compañer@s.

He podido modificar el código. He tardado un poco, pero entre semana santa y todas las vacaciones, he estado un poco liado.

Bueno, al lío.

Aquí esta el código del segundo ejecicio.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo aprenderaprogramar.com</title>
<script type="text/javascript">

var parrent01 = /\w{1,}/;
var parrent02 = /@/;
var parrent03 = /\./;
var parrent04 = /\w@\w/;
var parrent05 = /\.\w{2,}/;
var parrent06 = /\w+@\w+(?=\.\w+)/;


function verificar(){

var inputs = document.getElementsByTagName('input');
for(var i=0;i<inputs.length;i++){
inputs[i].addEventListener('focus', quitarAtencion);
}

verificarNombre();
verificarCorreo();
verificarEdad();

if(Nombre && Correo && Edad){
alert('Los datos han sido correctos!!!');
return true;}else
{
alert(msn01+"\n"+msn02+"\n"+msn03);
return false;}

}

function verificarNombre(){
if((document.getElementById('nombre').value).match(parrent01) == null){
document.getElementById('nombre').style.backgroundColor = "red";
msn01 = 'El campo nombre es obligatorio!!!';
Nombre = false;
}else{
msn01 = "Nombre correcto!!!";
Nombre = true;}
}

function verificarCorreo(){

if((document.getElementById('correo').value).match(parrent01) == null){
document.getElementById('correo').style.backgroundColor = "red";
msn02 = 'El campo correo electrónico es obligatorio!!!';
Correo = false;
}else if((document.getElementById('correo').value).match(parrent02) == null){
document.getElementById('correo').style.backgroundColor = "red";
msn02 = 'El correo electrónico tiene que contener el símbolo "@"!!!';
Correo = false;
}else if((document.getElementById('correo').value).match(parrent03) == null){
document.getElementById('correo').style.backgroundColor = "red";
msn02 = 'El correo electrónico tiene que contener el símbolo "."!!!';
Correo = false;
}else if((document.getElementById('correo').value).match(parrent04) == null){
document.getElementById('correo').style.backgroundColor = "red";
msn02 = 'Antes y después del símbolo "@" tiene que haber, por lo menos, una letra!!!';
Correo = false;
}else if((document.getElementById('correo').value).match(parrent05) == null){
document.getElementById('correo').style.backgroundColor = "red";
msn02 = 'Después del símbolo "." tiene que haber, por lo menos, dos letras!!!';
Correo = false;
}else if((document.getElementById('correo').value).match(parrent06) == null){
document.getElementById('correo').style.backgroundColor = "red";
msn02 = 'En un correo electrónico siempre tiene que estar el "@" antes que el "."!!!';
Correo = false;
}else{
msn02 = "Correo correcto!!!";
Correo = true;}

}

function verificarEdad(){
if((document.getElementById('edad').value) <= 0 || (isNaN(document.getElementById('edad').value))){
document.getElementById('edad').style.backgroundColor = "red";
msn03 = 'La edad tiene que ser un valor positivo!!!';
Edad = false;
}else{
msn03 = "Edad Correcta!!!";
Edad = true;}
}

function quitarAtencion(){
this.style.backgroundColor = "";
}

</script>
</head>
<body>
<div id="contenedor" style="text-align: center;">
<h1>La web para aprender programación</h1>
<p onclick="verificar()">Aquí está el texto del párrafo 1</p>
<p>Aquí está el texto del párrafo 2</p>
<form name="formulario01"  method="get" onsubmit="return verificar()">
<label for="nombre"><span>Nombre:</span><input type="text" name="nombre" id="nombre"></label><br><br>
<label for="apellidos"><span>Apellidos: </span><input type="text" name="apellidos" id="apellidos"></label><br><br>
<label for="edad"><span>Edad:</span><input type="text" name="edad" id="edad"></label><br><br>
<label for="mail"><span>Correo Electrónico:</span><input type="text" name="correo" id="correo"></label><br><br>
<label>
<input type="submit" value="Enviar">
<input type="reset" value="Cancelar">
</label>
</form>
</div>

</body>
</html>
Ahora vemos que cumple con lo que me habías comentado, Pedro. Enseguida cuando se da al botón "Enviar" te informa de todos los errores que has cometido. Lo he solucionado, un poco, a mi manera. Quería que fuera una alternativa a como lo habéis solucionado vosotros. Aunque, al fin y a la cabo, muy diferente no pude ser, jeje.

Saludos. (y espero vuestras opinión:))
En línea

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:JavaScript Lista de eventos, click, dblclick, moueseover... CU01159E
« Respuesta #4 en: 26 de Marzo 2016, 00:50 »
Hola dimiste.

Ahora el código hace lo que pide el enunciado.

Cosas que podrías cambiar, usas demasiadas variables con ámbito global, sin ser necesario.
Las variables parrent02 ,parrent03, parrent04, parrent05 y parrent06 solo las usas dentro de la función verificarCorreo(), así que sería mas práctico declararlas con ámbito local dentro de dicha función.

También usas Nombre, Correo y Edad con ámbito global, para evitarlo podrías cambiar esta parte del código:
Código: [Seleccionar]
verificarNombre();
verificarCorreo();
verificarEdad();
por esta:

Código: [Seleccionar]
var nombre = verificarNombre();
var correo = verificarCorreo();
var edad = verificarEdad();y desde esas funciones devolver true o false.
A parte de estas variables usas otras mas como msn01... Que seguro se podrían evitar.

Tienes que intentar corregir esto.

Saludos. ;D
En línea

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
Re:JavaScript Lista de eventos, click, dblclick, moueseover... CU01159E
« Respuesta #5 en: 26 de Marzo 2016, 13:53 »
Graicas por corregirme el ejercicio, Pedro.

Las modificaciones que mencionas las he corregido. Después miraré, a ver como puedo sustituir también las variables: msn01, msn02, etc.

Gracias.

Saludos.
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".