Mostrar Mensajes

Esta sección te permite ver todos los posts escritos por este usuario. Ten en cuenta que sólo puedes ver los posts escritos en zonas a las que tienes acceso en este momento.


Mensajes - lekimb

Páginas: [1]
1
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript addeventlistener onsubmit return false no funciona impedir CU01159E
« en: 27 de Mayo 2020, 21:09 »
Hola a todos y a todas. Comparto mi solución al ejercicio CU01159E del curso de javascript desde cero, así como un par de preguntillas para las que no acabo de encontrar respuesta.

1) No consigo impedir el envío del formulario. Según creo, para lograr esto hay hacer que la función que ha sido invocada con 'onsubmit' devuelva el valor booleano 'false' para que no se ejecute la acción HTML predeterminada (el envío del form) después del script.
Aunque me parece que las condiciones establecidas en los 'if' sí que se ejecutan como debieran, no entiendo porque el formulario se sigue enviando a pesar de todo.

2) No sé si hay alguna manera más eficiente de indicar que "SI alguna de las condiciones no se cumple, ENTONCES return false", más allá de incluirlas todas entre operadores OR(||) como hago el final de la función. Porque si se introduce la sentencia 'return false' después de cada una de las condiciones, el problema es que la función se detendría en cuanto la primera condición no se cumpliera y no ejecutaría ya el resto de acciones para los otros condicionales.

No se si me ha quedado un poco denso todo... En fin, si alguien ve el fallo de 1 o quiere aportar alguna idea para 2, estaré muy agradecido!   ;D

Os dejo el código:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript">

window.onload = function(){
var formulario = document.querySelector('form');
formulario.addEventListener('submit', comprobarEnvio);

var nombre = document.getElementById('nombre');
var apellidos = document.getElementById('apellidos');
var edad = document.getElementById('edad');
var correo = document.getElementById('correo');
var reglaArroba = /@/; //El correo debe contener el símbolo arroba
var reglaPunto = /\./; //El correo debe contener un punto
var regla3 = /^\w{1,}@\w{1,}\.\w{2,}/;

function comprobarEnvio(){
var valorEdad = edad.value
valorEdad = Number(valorEdad);

if (nombre.value == false || apellidos.value == false){
alert('El nombre y los apellidos son campos obligados');
nombre.style.backgroundColor = 'red';
apellidos.style.backgroundColor = 'red';
}
if (reglaArroba.test(correo.value) == false || reglaPunto.test(correo.value) == false){
alert('El campo \"Correo electrónico\" debe contener los símbolos arroba y punto');
correo.style.backgroundColor = 'red';
}
if (regla3.test(correo.value) == false){
alert('Debe haber una letra al menos antes y después de la arroba y dos letras como mínimo después del punto');
correo.style.backgroundColor = 'red';
}
if (valorEdad <= 0){
alert('La edad no puede ser cero o inferior a cero');
edad.style.backgroundColor = 'red';
}
if (nombre.value == false || apellidos.value == false || reglaArroba.test(correo.value) == false || reglaPunto.test(correo.value) == false || regla3.test(correo.value) == false || valorEdad <= 0){
return false;
}
}


/*Devolver el color original a los elementos input con el evento 'focus'*/
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++){
inputs[i].addEventListener('focus', colorOriginal);
}
function colorOriginal(){
if (this.style.backgroundColor == 'red'){
this.style.backgroundColor = 'transparent';
}
}

}
</script>
</head>
<body>
<form method="get" action="">
<label for="nombre">Nombre:</label><input id="nombre" name="nombre" type="text"/> <br/><br/>
<label for="apellidos">Apellidos:</label><input id="apellidos" name="apellidos" type="text"/> <br/><br/>
<label for="edad">Edad:</label><input id="edad" name="edad" type="text"/> <br/><br/>
<label for="correo">Correo electrónico:</label><input id="correo" name="correo" type="text"/> <br/><br/>
<input id="enviar" type="submit" value="Enviar formulario" /><input id="cancelar" type="reset" value="Cancelar" />
</form>
</body>
</html>

2
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:CU01149E Dudas herencia prototipos JavaScript
« en: 20 de Mayo 2020, 18:36 »
Hola Ogramar,

Gracias por responderme tan rápido. Me he mirado las indicaciones para publicar en los foros y veo que el título del hilo no cumple con las normas por empezar con la referencia a un ejercicio. Si hay alguna otra cosa que te chirría, te agradezco que me la digas.

He hecho algunos cambios en el código y ahora sí devuelve los resultados esperados. Concretamente he invertido el orden de asignación de prototipos, comenzando primero por el más general (vegetal) y construyendo hacia 'abajo' la simulación de herencia. No sé si esta es la única forma posible de definir prototipos o si también podría hacerse hacia 'arriba'; es decir, creando supertipos y asignándolos como prototipos (en vez de creando subtipos y asignándolos como prototipos).

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">

function vegetal() {
this.movilidad = 'ser vivo sin movilidad';
}

function plantaCultivada() {
this.nombreCientifico = 'desconocido';
}

plantaCultivada.prototype = new vegetal();

function hortaliza() {
this.componentePrincipal = 'agua';
this.tipoDeHortaliza = undefined;
}

hortaliza.prototype = new plantaCultivada();

function zanahoria() {
this.valorCalórico = '45 cal';
}

function lechuga() {
this.valorCalórico = '31 cal';
}

function tomate() {
this.valorCalórico = '39 cal';
}

zanahoria.prototype = new hortaliza();
lechuga.prototype = new hortaliza();
tomate.prototype = new hortaliza();

function empezar() {
var tomate1 = new tomate();
tomate1.tipoDeHortaliza = 'tomatillo';
tomate1.nombreCientifico = 'tomatus totalus';
alert(tomate1.tipoDeHortaliza);
alert(tomate1.valorCalórico);
alert(tomate1.componentePrincipal);
alert(tomate1.nombreCientifico);
alert(tomate1.movilidad);
}


</script>
</head>
<body>
<p onclick="empezar()">Empezar</p>
</body>
</html>
Gracias de nuevo!

3
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Herencia prototipos JavaScript crear objetos prototype propiedades item CU01149E
« en: 20 de Mayo 2020, 16:44 »
Hola, estoy intentado resolver el ejercicio CU01149E del curso de JavaScript y la verdad es que no entiendo porqué el código no se ejecuta como debiera.

Tal y como yo he entendido el ejercicio, los objetos zanahoria, lechuga y tomate tienen como prototipo al objeto hortaliza (un prototipo hortaliza para zanahoria, otro para lechuga, y otro para tomate). A su vez, el objeto hortaliza tiene como prototipo al objeto planta cultivada; por último, planta cultivada tiene como prototipo al objeto vegetal.

El caso es que cuando intento acceder a las propiedades definidas para los objetos primarios y sus prototipos, sólo obtengo los resultados esperados para 'tomate' y para 'hortaliza', que es su prototipo directo. Si intento acceder a las propiedades 'nombreCientifico' o 'movilidad, definidas para 'plantaCultivada' y 'vegetal' respetivamente el valor que me devuelve es undefined. No sé porqué ocurre esto.

Si alguien pudiera echarme una mano se lo agradecería. Un saludo.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function zanahoria() {
this.valorCalórico = '45 cal';
this.tipoDeHortaliza = undefined;
}

function lechuga() {
this.valorCalórico = '31 cal';
this.tipoDeHortaliza = undefined;
}

function tomate() {
this.valorCalórico = '39 cal';
this.tipoDeHortaliza = undefined;
}

function hortaliza() {
this.componentePrincipal = 'agua';
}

zanahoria.prototype = new hortaliza();
lechuga.prototype = new hortaliza();
tomate.prototype = new hortaliza();

function plantaCultivada() {
this.nombreCientifico = 'desconocido';
}

hortaliza.prototype = new plantaCultivada();

function vegetal() {
this.movilidad = 'ser vivo sin movilidad';
}

plantaCultivada.prototype = new vegetal();

function empezar() {
var tomate1 = new tomate();
tomate1.tipoDeHortaliza = 'tomatillo';
tomate1.nombreCientifico = 'tomatus totalus';
alert(tomate1.tipoDeHortaliza);
alert(tomate1.valorCalórico);
alert(tomate1.componentePrincipal);
alert(tomate1.nombreCientífico); //undefined
alert(tomate1.movilidad); //undefined
}


</script>
</head>
<body>
<p onclick="empezar()">Empezar</p>
</body>
</html>

Páginas: [1]

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