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 - bermartinv

Páginas: 1 ... 3 4 5 6 7 [8] 9 10 11 12 13 ... 15
141
Hola chicos, os adjunto mis soluciones para este tema, ejercicio CU01186E del tutorial de programación web desde cero con JavaScript.

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

image01= new Image()

image01.src="http://i877.photobucket.com/albums/ab336/cesarkrall/Divulgacion/logonotplusplus.png"

image02= new Image()

image02.src="http://i877.photobucket.com/albums/ab336/cesarkrall/Divulgacion/DV00405A_1.jpg"

function rollover(imagename, newsrc){

document.images[imagename].src=newsrc.src

}

</script></head>

<body style="text-align:center; margin:50px;">

<p> Pasa el mouse sobre la imagen </p>

<a  href="#" onmouseover="rollover('example', image02)"

onmouseout="rollover('example', image01)">

<img src="http://i877.photobucket.com/albums/ab336/cesarkrall/Divulgacion/logonotplusplus.png" name="example">

</a>

</body></html>

Citar
a) ¿En qué ámbito se encuentran image01 e image02?
image01 e image02 se encuentran en ámbito global, en cualquier lugar se pondrán utilizar.

Citar
b) ¿Qué tipo de objetos son image01 e image02?
son objetos de tipo Image.

Citar
c) ¿Aparecerán errores debido a la falta de puntos y coma de terminación en las instrucciones de JavaScript? ¿Por qué?
en javascript no hace falta que la sentencia termine con un ; , pero se usa porque es un uso standar en programación.

Citar
d) Al acceder a una imagen con la sintaxis document.images[imagename], ¿se está usando un índice numérico para acceder a la colección? Si es numérico, indicar qué valores son los que se usan. Si no es numérico, indicar qué tipo de índice es.
No, en realidad estamos accediendo desde el atributo  name de la imagen.

Citar
e) El efecto esperado es que la imagen que se muestra cambie cuando pasamos el puntero del ratón por encima de ella. ¿Por qué se produce ese cambio? Explícalo brevemente.
Se produce el cambio porque cuando se produce el evento onmouseover, indicamos que se ejecute la función rollover con la imagen2 y si se produce el evento onmouseout, indicamos que se ejecute la función rollover con la imagen1.

Saludos!!!

142
Hola pandemia, si no has programado nunca yo te recomiendo que hagas primero el de fundamentos de progamación. Esto te servirá para tener las nociones básicas para porder aprender cualquier lenguaje de programación posteriormente.

También te digo que la programación también es mucho de escribir código y escribir código y escribir código ............

Sáludos

143
Adjunto mis soluciones a este tema, CU01185E del tutorial del programador web con JavaScript desde cero.

Citar
a) ¿Cómo se realiza la comprobación de que no hay campos vacíos?
La manera de comprobar que los campos no estén vacios es comprobar con condicionales que el length de los value de todos los campos del formulario no sea cero.
Código: [Seleccionar]
if ((formulario.campo1.value.length == 0) || (formulario.campo2.value.length ==0) || (formulario.cpostal.value.length ==0) || (formulario.dni.value.length ==0) || (formulario.email.value.length ==0)) {

                    alert('Falta información');

                    return false;

                } 

Citar
b) ¿Cómo se realiza la comprobación de que el campo 2 es un número?
Se realiza através de la condicion isNan.Se pasa a entero primero el valor que esté introducido en el campo 2 y posterioemente comprobamos que si no es número salga el alert y retorne false.
 
Código: [Seleccionar]
if (isNaN(parseInt(formulario.campo2.value))) {

                    alert('El campo2 debe ser un número');

                    return false;

                }

Citar
c) ¿En qué consiste la validación del código postal? Explícala paso a paso. Pon ejemplos de tres valores válidos y tres valores no válidos.
El campo de codigo postal está validado con una expresion regular.  si no cumple la expresion retornará un false.
Código: [Seleccionar]
var ercp=/(^([0-9]{5,5})|^)$/;

                if (!(ercp.test(formulario.cpostal.value))) {

                    alert('Contenido del código postal no es un código postal válido');

                    return false; }
/(^ empezamos expresion regular
[0-9] valor numerico entre 0 y 9
{5,5} un valor numerico repetido 5 veces
$/ terminamos expresione regular   
Ahora comprobamos con test la expresion regular. Si no cumple la condicion sale un mensaje de alert y retorna false, de lo contrario es true, Si cumple no hace nada pasa a la siguiente sentencia de codigo.
tres valores validos : 12345, 09890,00000
tres valores no validos: pppp4,23,qqqqq

Citar
d) ¿En qué consiste la validación del DNI? Explícala paso a paso. Pon ejemplos de tres valores válidos y tres valores no válidos.
El campo del dni consiste su validacion de una expresion regular la cual si no cumple la expresion regular devuelve un false y un alert con un mensaje.Si cumple no hace nada pasa a la siguiente sentencia de codigo
Código: [Seleccionar]
var erdni=/(^([0-9]{8,8}\-[A-Z])|^)$/;
                    if (!(erdni.test(formulario.dni.value))) {

                    alert('Contenido del dni no es un DNI válido.');

                    return false;  }
(^ empezamos expresion regular
[0-9] esta formado por numeros con un rango de 0 a 9
{8,8} está formado por 8 numeros
\- seguido por un guion
[A-Z] y le sigue por una letra ent mayusculas que se encuentra en el rango de la A a la Z
$/ se termina la expresion regular
tres valores validos:52525252-M,00000000-R,12345678-Y
tres valores no validos:532145-M, 23423423R,12312323-r

Citar
e) ¿En qué consiste la validación del email? Explícala paso a paso. Pon ejemplos de tres valores válidos y tres valores no válidos.
El campo de email consiste su validacion en una expresion regular , si no cumple la expresion sale un mensaje de alert y retorna false.
Código: [Seleccionar]
var ercorreo=/^[^@\s]+@[^@\.\s]+(\.[^@\.\s]+)+$/;       

                if (!(ercorreo.test(formulario.email.value))) {

                    alert('Contenido del email no es un correo electrónico válido.');

                    return false; }
/^ : empezamos expresion regular
[^@\s] : un conjunto de caracteres que no empiece por @ o caracter vacio
+@ : seguido del simbolo @
[^@\.\s]: conjunto de caracteres que no empiece por @,punto o caracter vacio
+(\. : caracter .
[^@\.\s]+) : conjunto de caracteres que no empiece por @,punto o caracter vacio; compuesta por uno o mas caracteres(+)
+$/ : cerramos expresion regular
tres valores válidos: asdasd@pepe.com, 23432@99.pi,epr23@pepe.paol
tres valores no válidos: @@.com, @.  o p, pop.op.es

Citar
f) ¿Cómo se consigue que no se envíe el formulario si no se cumplen los requisitos exigidos?
No se envía el formulario porque si no cumple al menos una de las expresiones regulares se devuelve el valor de false a la llamada de la funcion que está declarada en la etiqueta form en el evento onsubmit. Y este a la vez devuelve el valor booleano que se le mando, como es false no se ejecuta.
 

Saludos!!!

144
si pedro,, en ese sentido tienes batante razón. Por lo que estoy viendo la potencia de javascript es su funcionalidad de objetos y referencias, y sería conveniente crear todo como objetos y trabajar con sus metodos y sus propiedades. ::)

145
Hola chicos adjunto mis soluciones a este tema (CU01184E del tutorial básico de programación web: JavaScript desde cero)

Código: [Seleccionar]
<!DOCTYPE html>

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">

</head>

<body><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3>

<a href="javascript:void(0);" onclick="if (confirm('Are you sure?')) { var f = document.createElement('form');

 f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var m = document.createElement('input');

 m.setAttribute('type', 'hidden'); m.setAttribute('name', '_method'); m.setAttribute('value', 'delete'); f.appendChild(m);

 var s = document.createElement('input'); s.setAttribute('type', 'hidden'); s.setAttribute('name', 'authenticity_token');

 s.setAttribute('value', 'aprenderaprogramar.com='); f.appendChild(s);f.submit(); };return false;">Pulsa aquí para proceder</a>
</body></html>
Citar
a) ¿Para qué se utiliza aquí javascript: void(0)?


Aquí se utiliza para que la etiqueta a de HTML que enlaza a otra página web (en general) al recibir el evento click no se redireccione a ningún sitio y se ejecute el javascript que tenemos dentro de onclick.


Citar
b) Explica paso a paso qué es lo que hace el código JavaScript que se ha incluido como respuesta al evento click.

Inicialmente se espera una respuesa Aceptar/Cancelar a la pregunta 'Are you sure?'
Si pulsamos cancelar devuelve false  no haria nada, al devolver false el evento anula la accion de href,aunque en este caso con la sentencia que tiene no se redireccionaba a ningun sitio.

 var f = document.createElement('form');  crea la etiqueta de formulario

  f.style.display = 'none'; // se le da el estilo de la etiqueta del form display:none, por lo que no se mostrará

  this.parentNode.appendChild(f); //se añade el elemento form al codigo html a parentNode que era body

  f.method = 'POST'; // se añade atributos a la etiqueta form, en este caso method='POST'

  f.action = this.href; // se añade atributos a la etiqueta form, en este caso action='javascript:void(0)'(el mismo href de este elemento)

  var m = document.createElement('input'); //creamos un elemento input
 m.setAttribute('type', 'hidden');// definimos atributos del nuevo elemento y le indicamos que es invisible type=hydden

  m.setAttribute('name', '_method');  // definimos atributo name='_method'

  m.setAttribute('value', 'delete'); // denimos atributo value='delete'

  f.appendChild(m); // añadimos el elemento input y lo insertamos como hujo de f

  var s = document.createElement('input'); //creamos un elemento input

  s.setAttribute('type', 'hidden'); // definimos atributos del nuevo elemento y le indicamos que es invisible type=hydden

  s.setAttribute('name', 'authenticity_token'); // definimos name='authenticity_token'

 s.setAttribute('value', 'aprenderaprogramar.com='); // definimos el atributo value=''aprenderaprogramar.com='

  f.appendChild(s);// lo añadimos como hijo del form

  f.submit(); //enviamos el formulario

  };


Citar
c) ¿Qué implica el uso de return false; en este código?

el return false; es para que no se ejecute el href='' que tiene definido


Citar
d) Modifica el código para que la apariencia y resultados sean iguales pero sin usar un elemento <a> … </a>


Código: [Seleccionar]
<!DOCTYPE html>

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style>
    p.url{
        cursor:pointer;
        color:blue;
        text-decoration:underline;
}
    </style>
<script>
    window.onload = function(){
        var formulario = document.getElementById('enlace').addEventListener('click',anyadir);
    }
   
    function anyadir(){
        if (confirm('Are you sure?')) {
            var f = document.createElement('form');
            f.style.display = 'none';
            this.parentNode.appendChild(f);
            f.method = 'POST';
            f.action = '';
            var m = document.createElement('input');

            m.setAttribute('type', 'hidden');
            m.setAttribute('name', '_method');
            m.setAttribute('value', 'delete');
            f.appendChild(m);

            var s = document.createElement('input');
            s.setAttribute('type', 'hidden');
            s.setAttribute('name', 'authenticity_token');
            s.setAttribute('value', 'aprenderaprogramar.com=');
            f.appendChild(s);f.submit(); };
       
        return false;
    }
</script>
</head>

<body><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3>

<p class='url' id='enlace'  >Pulsa aquí para proceder</p>
</body></html>

Saludos!!

147
Hola Pandemia,
no está bien resuelto el ejercicio. Me costó encontrar un poco el por qué no hacia lo que se pedía, pero te comento.
En la tabla1 y tabla3 los border tienen que ser collapse, cosa que no sale. El id que aplicas a cada div se lo tienes que aplicar directamente a table y una vez que lo pongas ya verás lo que sucede.
Además recuerda que las etiquetas <caption> son los 'títulos' de las tablas y no se encuentran dentro de las tablas.
Saludos!!!

148
Hola dimiste,
sobre el ejecricio 1, indicarte dos cosas.
1.Al contestar la pregunta inicial hace lo mismo si le le das a Aceptar o a Cancelar.
2.Cuando tienes que introdicir la palabra, si no llegas a poner la palabra que tu pides, no marca los segundos que han pasado o indicar que no ha adivinado la palabra, el mensaje que sale en la ventana alert es un --> 'Has contestado en: Nan segundos!!!'

149
Gracias pedro,,
por corregirme, la verdad que este es uno de los ejercicios que más me ha costado y no por su dificultad. Al comenzar a realizar el ejercicio no me puse un esquema de ataque  ;D, y he ido realizando el código a salto de mata.

Adjunto código rectificado.

Código: [Seleccionar]
<!DOCTYPE html>

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">

<style type="text/css"> body, p {margin-left:30px; font-family: sans-serif;}

.estiloForm {background-color: #f3f3f3; border: solid 2px black; margin-left:20px; width: 330px; padding:10px; }

.estiloForm label {display: block; width: 120px; float: left; text-align:right; margin-bottom: 35px; padding-right: 20px;}

br {clear: left;} input[type="submit"], input[type="reset"] {margin:25px 5px 10px 5px;}

</style>

<script type="text/javascript">

window.onload = function () {

 var select1 = document.formularioContacto.pais;
   
 var select2 = document.formularioContacto.ciudad;
   
    select1.addEventListener('change',function(){primerSelect(this,select2)});
   
    select2.addEventListener('change',function(){segundoSelect(select1,this)});   
   
}   

function primerSelect(select1,select2){
    for (var i=0;i<select1.length;i++){
     if (select1.options[i].selected ){habilitarCiudad(i,select2,select1)}
    }
}
   
   
function habilitarCiudad(opcion,select2,select1){
    switch (opcion){
           
        case 0 :select2.value = '';
                habilitar(select1,false);
                habilitar(select2,false);
            break;
        case 1 :habilitar(select2,true);
                select2.options[1].disabled = false;
                select2.options[2].disabled = false;
            break;
        case 2 :habilitar(select2,true);
                select2.options[3].disabled = false;
                select2.options[4].disabled = false;
            break;
        case 3 :habilitar(select2,true);
                select2.options[5].disabled = false;
                select2.options[6].disabled = false;
            break;
        case 4 :habilitar(select2,true);
                select2.options[7].disabled = false;
                select2.options[8].disabled = false;
            break;
       
    }
       
}
   
function segundoSelect(select1,select2){
    for (var i=0;i<select2.length;i++){
    if (select2.options[i].selected ){habilitarPais(i,select1,select2)}
    }
}
 

function habilitarPais(opcion,select1,select2){
    switch (opcion){
        case 0 :select1.value = '';
                habilitar(select1,false);
                habilitar(select2,false);
            break;
        case 1 :
        case 2 :
                habilitar(select1,true);
                select1.options[1].disabled = false;
                select1.value = 'mejico';
            break;
        case 3 :
        case 4 :
                habilitar(select1,true);
                select1.options[2].disabled = false;
                select1.value = 'españa';
            break;
        case 5 :
        case 6 :
                habilitar(select1,true);
                select1.options[3].disabled = false;
                select1.value = 'peru';
            break;
        case 7 :
        case 8 :
                habilitar(select1,true);
                select1.options[4].disabled = false;
                select1.value = 'colombia';
            break;
       
    }
       
}

   
function habilitar(select,boolean){
    for (var i = 1; i < select.length; i++){
            select.options[i].disabled = boolean;
        }

}

</script>

</head>

<body><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3>

                <div class="estiloForm">

                              <form name ="formularioContacto" method="get" action="http://aprenderaprogramar.com">

                               <label>País de turismo</label><select id="pais" name="pais">

                               <option value="">Elija país</option>
                               <option value="mejico">México</option>
                               <option value="españa">España</option>
                               <option value="peru">Perú</option>
                               <option value="colombia">Colombia</option>
                               </select><br/>
                               
                               <label>Ciudad de turismo</label><select id="ciudad" name="ciudad">

                               <option value="">Elija una ciudad</option>
                               <option value="mejicodf">México D.F.</option>
                               <option value="guadalajara">Guadalajara</option>
                               <option value="madird">Madrid</option>
                               <option value="barcelona">Barcelona</option>     
                               <option value="lima">Lima</option>
                               <option value="trujillo">Trujillo</option>
                               <option value="bogota">Bogotá</option>
                               <option value="cali">Cali</option>
                               </select><br/>

                               <input class="botonFormulario" type="submit" value="Enviar"/>
                               <input class="botonFormulario" type="reset" value="Cancelar"/>

                </form>

                </div>
</body></html>

Por cierto, ¿qué opinas de lo que puse en el primer mensaje de este hilo, sobre las condicionales y sobre el tiempo de ejecución?. Es que aparte de la visualización de código supongo que será más correcto utilizar sentencias for o switch que if o else if, no?

Saludos!!!!

150
Hola chicos!!,

Adjunto mi solución para este tema CU01183E del tutorial de programador web JavaScript desde cero y planteo un problema que me ha surgido.

A la hora de resolver problemas tengo claro que cuanto mas condiciones haya más tiempo tarda en ejecutarse el código. Pero por ejemplo es mucha la diferencia entre por ejemplo:

- Un for o varios if,else if enlazados.
-Un switch o varios if,else if enlazados.

Citar
a) Deberá presentarse un formulario con 2 elementos select. El primer elemento select permitirá elegir país y podrá elegirse entre México, España, Perú y Colombia.

b) El segundo elemento select permitirá elegir ciudad y podrá elegirse entre México D.F., Guadalajara, Madrid, Barcelona, Lima, Trujillo, Bogotá y Cali.

c) Si el usuario selecciona ciudad sin haber elegido país, deberá mostrarse como opción elegida de país el país correspondiente a la ciudad. Por ejemplo, si el usuario selecciona Bogotá deberá aparecer como país seleccionado Colombia.

d) Si el usuario selecciona un país en primer lugar, deberán deshabilitarse todas las opciones que no correspondan a ciudades de ese país. Por ejemplo si el usuario elige España, sólo podrá elegir entre Madrid y Barcelona, debiendo estar México D.F., Guadalajara, Lima, Trujillo, Bogotá y Cali deshabilitadas. Si el usuario cambia el país, deberán cambiar las ciudades cuya elección es posible.

e) Ampliación opcional para el ejercicio: introduce medidas de seguridad adicionales para que no puedan existir incoherencias entre el país seleccionado y la ciudad. Por ejemplo, imagina que el usuario elige en primer lugar como ciudad México D.F. y luego elige como país Perú. Introduce medidas de seguridad que impidan que esto suceda.

Código: [Seleccionar]
<!DOCTYPE html>

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">

<style type="text/css"> body, p {margin-left:30px; font-family: sans-serif;}

.estiloForm {background-color: #f3f3f3; border: solid 2px black; margin-left:20px; width: 330px; padding:10px; }

.estiloForm label {display: block; width: 120px; float: left; text-align:right; margin-bottom: 35px; padding-right: 20px;}

br {clear: left;} input[type="submit"], input[type="reset"] {margin:25px 5px 10px 5px;}

</style>

<script type="text/javascript">

window.onload = function () {

 var select1 = document.formularioContacto.pais;
   
 var select2 = document.formularioContacto.ciudad;
   
    select1.addEventListener('change',function(){primerSelect(this,select2)});
   
    select2.addEventListener('change',function(){segundoSelect(select1,this)});   
   
}   

function primerSelect(select1,select2){
    for (var i=1;i<select1.length;i++){
     if (select1.options[i].selected ){habilitarCiudad(i,select2)}
    }
}
   
   
function habilitarCiudad(opcion,select2){
    switch (opcion){
        case 1 :habilitar(select2);
                select2.options[1].disabled = false;
                select2.options[2].disabled = false;
            break;
        case 2 :habilitar(select2);
                select2.options[3].disabled = false;
                select2.options[4].disabled = false;
            break;
        case 3 :habilitar(select2);
                select2.options[5].disabled = false;
                select2.options[6].disabled = false;
            break;
        case 4 :habilitar(select2);
                select2.options[7].disabled = false;
                select2.options[8].disabled = false;
            break;
       
    }
       
}
   
function segundoSelect(select1,select2){
    for (var i=1;i<select2.length;i++){
    if (select2.options[i].selected ){habilitarPais(i,select1)}
    }
}
 

function habilitarPais(opcion,select1){
    switch (opcion){
        case 1 :
        case 2 :
                habilitar(select1);
                select1.options[1].disabled = false;
                select1.value = 'mejico';
                break;
        case 3 :
        case 4 :
                habilitar(select1);
                select1.options[2].disabled = false;
                select1.value = 'españa';
                break;
        case 5 :
        case 6 :
                habilitar(select1);
                select1.options[3].disabled = false;
                select1.value = 'peru';
                break;
        case 7 :
        case 8 :
                habilitar(select1);
                select1.options[4].disabled = false;
                select1.value = 'colombia';
                break;
       
    }
       
}

   
function habilitar(select){
    for (var i = 0; i < select.length; i++){
            select.options[i].disabled = true;
        }

}

</script>

</head>

<body><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3>

                <div class="estiloForm">

                              <form name ="formularioContacto" method="get" action="http://aprenderaprogramar.com">

                               <label>País de turismo</label><select id="pais" name="pais">

                               <option value="">Elija país</option>

                               <option value="mejico">México</option>

                               <option value="españa">España</option>

                               <option value="peru">Perú</option>
                               
                               <option value="colombia">Colombia</option>

                               </select><br/>
                               
                               <label>Ciudad de turismo</label><select id="ciudad" name="ciudad">

                               <option value="">Elija una ciudad</option>

                               <option value="mejicodf">México D.F.</option>

                               <option value="guadalajara">Guadalajara</option>

                               <option value="madird">Madrid</option>
                               
                               <option value="barcelona">Barcelona</option>
                               
                               <option value="lima">Lima</option>
                               
                               <option value="trujillo">Trujillo</option>
                               
                               <option value="bogota">Bogotá</option>
                               
                               <option value="cali">Cali</option>

                               </select><br/>

                               <input class="botonFormulario" type="submit" value="Enviar"/>

                               <input class="botonFormulario" type="reset" value="Cancelar"/>

                </form>

                </div>
</body></html>

Saludos!!!!

152
Lo dicho pedro,, gracias por tu tiempo y agradezco tus críticas y opiniones ya sean positivas o negativas, son la manera de aprender.  ;)

153
Y ahora pedro,, con las modificacione que me dijiste
Código: [Seleccionar]
<!DOCTYPE html>

<html><head><title>Ejemplo 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;margin:20px;}
   
    .campoErroneo {
        background-color: orange;
        color : black;
       
        margin-left: 10px;
    }

</style>
<script>

window.onload=function(){
    var formulario = document.formularioContacto;
    formulario.addEventListener('submit',validarDatos);
    for (var i = 0;i < formulario.elements.length;i++){
        if (formulario.elements[i].type == 'text'){
            formulario.elements[i].addEventListener('focus',estiloIn);
            formulario.elements[i].addEventListener('blur',estiloOut);
        }
       
    }
    formulario.nombre.focus(); 
   
}

function estiloIn(){
    this.style.backgroundColor = 'lightgreen';
    this.nextSibling.innerHTML='';
    this.nextSibling.removeAttribute('class','campoErroneo');
}
   
function estiloOut(){
    this.style.backgroundColor = 'white';
}

function validarDatos(event){
    event.preventDefault();
    var formulario = document.formularioContacto;
    var booleanNombre = false;
    var booleanApellidos = false;
    var booleanEmail = false;
    booleanNombre = validarNombre(formulario);
    booleanApellidos = validarApellidos(formulario);
    booleanEmail =validarEmail(formulario);
   
    if (booleanNombre && booleanApellidos && booleanEmail){
        formulario.submit();
    }
}
   
function validarNombre(formulario){
    var valorNombre = formulario.nombre;
    var msg = '';
    if (valorNombre.value.length > 15){
        msg += 'El nombre debe tener menos de 15 caracteres';
        mensajeError(valorNombre,msg);
        return false;
    }else if (valorNombre.value.length == 0 ){
        msg += 'El campo nombre está vacio';
        mensajeError(valorNombre,msg);
        return false;
    }else if ( /^\s*$/.test(valorNombre.value)){
        msg += 'El nombre no puede estar formado por espacios';
        mensajeError(valorNombre,msg);
        return false;
    }else{
        return true;
    }   
}
   
function validarApellidos(formulario){
   var valorApellidos = formulario.apellidos;
   var msg = '';
    if (valorApellidos.value.length > 30){
        msg += 'Los apellidos deben tener menos de 30 caracteres';
        mensajeError(valorApellidos,msg);
        return false;
    }else if (valorApellidos.value.length == 0 ){
        msg += 'El campo apellidos está vacio';
        mensajeError(valorApellidos,msg);
        return false;
    }else if ( /^\s*$/.test(valorApellidos.value)){
        msg += 'Los apellidos no pueden estar formado por espacios';
        mensajeError(valorApellidos,msg);
        return false;
    }else{
        return true;
    }
}
   
function validarEmail(formulario){
    var valorEmail = formulario.email;
    var msg = '';
    if (valorEmail.value.length > 35){
        msg += 'El email debe tener menos de 35 caracteres';
        mensajeError(valorEmail,msg);
        return false;
    }else if (valorEmail.value.length == 0 ){
        msg += 'El campo email está vacio';
        mensajeError(valorEmail,msg);
        return false;
    }else if ( /^\s*$/.test(valorEmail.value)){
        msg += 'El email no puede estar formado por espacios';
        mensajeError(valorEmail,msg);
        return false;
    }
    else if ( !(/\S+@\S+\.\S+/.test(valorEmail.value))){
        msg += 'Escriba de nuevo un email correcto';
        mensajeError(valorEmail,msg);
        return false;
    }else{
        return true;
    }
}

function mensajeError(nodo,msg){
    nodo.nextSibling.innerHTML = msg;
    nodo.nextSibling.setAttribute('class','campoErroneo');
}

</script>

</head>

<body>

<div id="cabecera"><h1>Portal web aprenderaprogramar.com</h1><h2>Didáctica y divulgación de la programación</h2>

</div>

<!-- Formulario de contacto -->

<form  name ="formularioContacto" class="formularioTipo1" method="get" action="http://aprenderaprogramar.com">

<p>Si quieres contactar con nosotros envíanos este formulario relleno:</p>

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

Gracias pedro,, por tu tiempo

154
Hola pedro,, por partes. No había usado preventDefault() porque era una de las maneras posibles. Respecto lo de los caracteres del email tienes razon se me pasó al hacer copia-pega. Otra cosa, lo del foco, lo había pensado así porque cuando uno entra en el foco de un campo normalmente es para modificarlo.
Ahora modificaré lo que me has comentado.
De todas maneras iba a poner un código nuevo que había hecho intentando no usar variables globales, que es mi punto débil.
Código: [Seleccionar]
<!DOCTYPE html>

<html><head><title>Ejemplo 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;margin:20px;}
   
    .campoErroneo {
        background-color: orange;
        color : black;
       
        margin-left: 10px;
    }

</style>
<script>

window.onload=function(){
    var formulario = document.formularioContacto;
    for (var i = 0;i < formulario.elements.length;i++){
        if (formulario.elements[i].type == 'text'){
            formulario.elements[i].addEventListener('focus',estiloIn);
            formulario.elements[i].addEventListener('blur',estiloOut);
        }
       
    }
    formulario.nombre.focus(); 
   
}

function estiloIn(){
    this.style.backgroundColor = 'lightgreen';
    this.value = '';
    this.nextSibling.innerHTML='';
    this.nextSibling.removeAttribute('class','campoErroneo');
}
   
function estiloOut(){
    this.style.backgroundColor = 'white';
}

function validarDatos(){
    var formulario = document.formularioContacto;
    var booleanNombre = false;
    var booleanApellidos = false;
    var booleanEmail = false;
    booleanNombre = validarNombre(formulario);
    booleanApellidos = validarApellidos(formulario);
    booleanEmail =validarEmail(formulario);
   
    if (booleanNombre && booleanApellidos && booleanEmail){
        return true;
    }else{
       
        return false;
    }
}
   
function validarNombre(formulario){
    var valorNombre = formulario.nombre;
    var msg = '';
    if (valorNombre.value.length > 15){
        msg += 'El nombre debe tener menos de 15 caracteres';
        mensajeError(valorNombre,msg);
        return false;
    }else if (valorNombre.value.length == 0 ){
        msg += 'El campo nombre está vacio';
        mensajeError(valorNombre,msg);
        return false;
    }else if ( /^\s*$/.test(valorNombre.value)){
        msg += 'El nombre no puede estar formado por espacios';
        mensajeError(valorNombre,msg);
        return false;
    }else{
        return true;
    }   
}
   
function validarApellidos(formulario){
   var valorApellidos = formulario.apellidos;
   var msg = '';
    if (valorApellidos.value.length > 30){
        msg += 'Los apellidos deben tener menos de 30 caracteres';
        mensajeError(valorApellidos,msg);
        return false;
    }else if (valorApellidos.value.length == 0 ){
        msg += 'El campo apellidos está vacio';
        mensajeError(valorApellidos,msg);
        return false;
    }else if ( /^\s*$/.test(valorApellidos.value)){
        msg += 'Los apellidos no pueden estar formado por espacios';
        mensajeError(valorApellidos,msg);
        return false;
    }else{
        return true;
    }
}
   
function validarEmail(formulario){
    var valorEmail = formulario.email;
    var msg = '';
    if (valorEmail.value.length > 15){
        msg += 'El email debe tener menos de 35 caracteres';
        mensajeError(valorEmail,msg);
        return false;
    }else if (valorEmail.value.length == 0 ){
        msg += 'El campo email está vacio';
        mensajeError(valorEmail,msg);
        return false;
    }else if ( /^\s*$/.test(valorEmail.value)){
        msg += 'El email no puede estar formado por espacios';
        mensajeError(valorEmail,msg);
        return false;
    }
    else if ( !(/\S+@\S+\.\S+/.test(valorEmail.value))){
        msg += 'Escriba de nuevo un email correcto';
        mensajeError(valorEmail,msg);
        return false;
    }else{
        return true;
    }
}

function mensajeError(nodo,msg){
    nodo.nextSibling.innerHTML = msg;
    nodo.nextSibling.setAttribute('class','campoErroneo');
}

</script>

</head>

<body>

<div id="cabecera"><h1>Portal web aprenderaprogramar.com</h1><h2>Didáctica y divulgación de la programación</h2>

</div>

<!-- Formulario de contacto -->

<form onsubmit = "return validarDatos()" name ="formularioContacto" class="formularioTipo1" method="get" action="http://aprenderaprogramar.com">

<p>Si quieres contactar con nosotros envíanos este formulario relleno:</p>

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

155
Adjunto la solución del ejercicio de este tema.
Citar
Crear el código JavaScript que cumpla con las siguientes funciones:

a) Si la longitud (número de caracteres) del campo nombre es mayor de 15 o igual a cero, el formulario no se enviará.

b) Si la longitud (número de caracteres) del campo apellidos es mayor de 30 o igual a cero, el formulario no se enviará.

c) Si la longitud (número de caracteres) del campo email es mayor de 35 o igual a cero, el formulario no se enviará. Si el email no contiene el carácter @ el formulario no se enviará.

d) Si se produce cualquiera de las circunstancias anteriores, debe aparecer un recuadro con color de fondo naranja y texto negro a la derecha de la casilla de introducción de datos, informando del problema detectado en ese campo (si es que ese campo presenta algún problema). Nota: estos mensajes se deben mostrar sólo si el campo es erróneo después de pulsado el botón enviar, y deben desaparecer si el usuario realiza un nuevo intento y el campo es correcto. Los mensajes se incorporarán al DOM (no serán mensajes usando alert).

Código: [Seleccionar]
<!DOCTYPE html>

<html><head><title>Ejemplo 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;margin:20px;}
   
    .campoErroneo {
        background-color: orange;
        color : black;
       
        margin-left: 10px;
    }

</style>
<script>
var nombre = false;
var apellidos = false;
var email = false;
window.onload=function(){
    var formulario = document.formularioContacto;
    for (var i = 0;i < formulario.elements.length;i++){
        if (formulario.elements[i].type == 'text'){
            formulario.elements[i].addEventListener('focus',estiloIn);
            formulario.elements[i].addEventListener('blur',estiloOut);
        }
       
    }
    formulario.nombre.focus(); 
   
}

function estiloIn(){
    this.style.backgroundColor = 'lightgreen';
    this.value = '';
    this.nextSibling.innerHTML='';
    this.nextSibling.removeAttribute('class','campoErroneo');
}
   
function estiloOut(){
    this.style.backgroundColor = 'white';
}

function validarDatos(){
    validarNombre();
    validarApellidos();
    validarEmail();
   
    if (nombre && apellidos && email){
        return true;
    }else{
       
        return false;
    }
}
   
function validarNombre(){
    var msg = '';
    if (document.formularioContacto.nombre.value.length > 15){
        msg += 'El nombre debe tener menos de 15 caracteres';
        nombre = false;
    }else if (document.formularioContacto.nombre.value.length == 0 ){
        msg += 'El campo nombre está vacio';
        nombre = false;
    }else if ( /^\s*$/.test(document.formularioContacto.nombre.value)){
        msg += 'El nombre no puede estar formado por espacios';
        nombre = false;
    }else{
        nombre = true;
    }
   
    var mensaje = document.getElementById('nombre').nextSibling;
    mensaje.innerHTML = msg;
    mensaje.setAttribute('class','campoErroneo');
   
}
   
function validarApellidos(){
   
   var msg = '';
    if (document.formularioContacto.apellidos.value.length > 30){
        msg += 'Los apellidos deben tener menos de 30 caracteres';
        apellidos = false;
    }else if (document.formularioContacto.apellidos.value.length == 0 ){
        msg += 'El campo apellidos está vacio';
        apellidos = false;
    }else if ( /^\s*$/.test(document.formularioContacto.apellidos.value)){
        msg += 'Los apellidos no pueden estar formado por espacios';
        apellidos = false;
    }else{
        apellidos = true;
    }
   
    var mensaje = document.getElementById('apellidos').nextSibling;
    mensaje.innerHTML = msg;
    mensaje.setAttribute('class','campoErroneo');
   
}
   
function validarEmail(){
   
    var msg = '';
    if (document.formularioContacto.email.value.length > 15){
        msg += 'El email debe tener menos de 35 caracteres';
        email = false;
    }else if (document.formularioContacto.email.value.length == 0 ){
        msg += 'El campo email está vacio';
        email = false;
    }else if ( /^\s*$/.test(document.formularioContacto.email.value)){
        msg += 'El email no puede estar formado por espacios';
        email = false;
    }
    else if ( !(/\S+@\S+\.\S+/.test(document.formularioContacto.email.value))){
        msg += 'Escriba de nuevo un email correcto';
        email = false;
    }else{
       email = true;
    }
   
    var mensaje = document.getElementById('email').nextSibling;
    mensaje.innerHTML = msg;
    mensaje.setAttribute('class','campoErroneo');
   
}
   

</script>

</head>

<body>

<div id="cabecera"><h1>Portal web aprenderaprogramar.com</h1><h2>Didáctica y divulgación de la programación</h2>

</div>

<!-- Formulario de contacto -->

<form onsubmit = "return validarDatos()" name ="formularioContacto" class="formularioTipo1" method="get" action="http://aprenderaprogramar.com">

<p>Si quieres contactar con nosotros envíanos este formulario relleno:</p>

<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="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!!!!

156
Si pedro,, referente a lo que dices de las variables globales tienes razón. Lo que quería haber dicho que lo dije mal, y no es aplicable en este ejercicio es que:
Una manera de minimizar el uso de variables globales es crear una variable global para cada aplicación y dentro de esta las propiedades,etc.... .Así también evitamos entrar en conflicto con propiedas o variables de otras librerias.
Saludos y gracias  ;)

157
Gracias pedro,, por mandarme el enlace. No lo había leido y me ha gusto mucho, no pensaba que se pudiera hacer tantas cosas con for.
Saludos  ;)

158
Gracias César porcorregir mis respuestas.
Respecto al apartado b), tienes toda la razón me fui por la nubes al ver los [].La respuesta sería que devuelve la union de los valores contenidos dentro [] unidos por separación.
Respecto al apartado l) al no haber entendido bien el apartado b) no hice bien el código. Ahora que sé lo que quiere decir, adjunto código.
Código: [Seleccionar]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script>
 function conversor(toUnit, factor, offset, fromUnit, input) {

    offset = offset || 0;

    return [input, fromUnit, 'son',((offset+input)*factor).toFixed(2), toUnit].join(" ");

}

 

var milesToKm = conversor.bind(undefined, 'km', 1.60936, 0, 'millas');

var poundsToKg = conversor.bind(undefined, 'kg', 0.45460, 0, 'pounds');

var farenheitToCelsius = conversor.bind(undefined, 'gradosC',0.5556, -32, 'farenheit');

 

alert(milesToKm(10));           

alert(poundsToKg(2.5));         

alert(farenheitToCelsius(98));   
</script>
</head>
<body>
   
</body>
</html>

Saludos y gracias por tu tiempo César Krall

159
Hola chicos,
pongo mis soluciones de este tema.
Citar
Otra forma de detener el envío de un formulario se basa en que si el código de respuesta a un evento submit es el valor booleano false, no se producirá el envío del formulario. En otro caso, sí se producirá el envío. Examina el siguiente código y responde a las cuestiones que se muestran a continuación:
Código: [Seleccionar]
<!DOCTYPE html>

<html><head><script>

function validarForm() {

    var x = document.forms["elForm1"]["nombre"].value;

    if (x==null || x=="") { alert("El formulario no puede enviarse sin rellenar el nombre");

        return false; }

}

</script></head>

<body><form style ="margin:30px;" name="elForm1" action="http://aprenderaprogramar.com" onsubmit="return validarForm()" method="get">

Nombre: <input type="text" name="nombre">

<input type="submit" value="Enviar">

</form>
</body></html>

a) ¿Qué cometido cumple este código?
Este código sirve de validacion para el input de name="nombre", cuando el campo esté vacio o sea nulo el formulario no podrá ser enviado, saliendo por pantalla un mensaje de alert y devolviendo como false a onsubmit.

Citar
b) ¿Qué ocurre si en lugar de onsubmit="return validarForm()" escribes onsubmit="validarForm()"? ¿Por qué?
Se necesita un return como respuesta al onsubmit, si no lo tenemos da igual que la función de validación devuelva true o false, ya que será enviado de todas las maneras.

Citar
c) Si x no es null ni es vacío, ¿qué devuelve la función validarForm()? ¿Qué implicaciones tiene esto en relación al envío del formulario?
No devuelve nada, pero al no devolver false el submit se realiza y se envia el formulario.

Saludos.

160
Hola chicos, pongo mis soluciones a este tema, CU01180E del tutorial JavaScript desde cero.

 
Citar
Examina el siguiente código y responde a las cuestiones que se muestran a continuación:
Código: [Seleccionar]
var arr = [];

var divs = document.querySelectorAll('div');

for(var i = divs.length; i--; arr.unshift(divs[i]));


a) ¿Qué cometido cumple este código?
El cometido que tiene es pasar los elemento de un array-like a un array.

b) Aplicando la idea que podemos extraer de este código, modifica el código que hemos visto como ejemplo en esta entrega para crear un array con los elementos input y select del formulario y  mostrar por pantalla el número de elementos input y select existentes en el formulario.

Código: [Seleccionar]
<!DOCTYPE html>

<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">

<style type="text/css"> body {margin-left:30px; font-family: sans-serif;}

.estiloForm {background-color: #f3f3f3; border: solid 2px black; margin-left:20px; width: 330px; padding:10px; }

.estiloForm label {display: block; width: 120px; float: left; text-align:right; margin-bottom: 35px; padding-right: 20px;}

br {clear: left;} input[type="submit"], input[type="reset"] {margin:25px 5px 10px 5px;}

</style>

<script type="text/javascript">

window.onload = function () {

                var elementosInput = document.getElementsByTagName('input'); //Elementos input

                var elementosSelect = document.getElementsByTagName('select');

                var arrInput = [];
   
                var arrSelect = [];

                for(var i = elementosInput.length; i--; arrInput.unshift(elementosInput[i]));
   
                for(var i= elementosSelect.length; i--; arrSelect.unshift(elementosSelect[i]));
   
                alert ("Tenemos "+arrInput.length+" elementos de tipo input y "+arrSelect.length+" elementos de tipo select.");

}

</script></head>

<body><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos JavaScript</h3>

    <div class="estiloForm"> <form name ="formularioContacto" method="get" action="#">

        <label>Tratamiento</label>

        <input type="radio" name="tratamiento" id="tratarSr" value="Sr."/>Sr.

                               <input type="radio" name="tratamiento" id ="tratarSra" value="Sra."/>Sra.<br/>

                               <label>Nombre</label><input id="nombre" name="nombre" type="text"/><br/>

        <label>Apellidos</label><input id="apellidos" name="apellidos" type="text"/><br/>

        <label>Dirección</label><input id="direccion1" name="direccion1" type="text"/><br/>

        <label>Ciudad</label><select id="ciudad" name="ciudad">

                                               <option value="">Elija opción</option>

            <option value="Mexico">México D.F. (MX)</option>

            <option value="Madrid">Madrid (ES)</option>

            <option value="Santiago">Santiago (CL)</option>

        </select><br/>

        <label>Preferencias</label><input name="Libros" type="checkbox" />Libros

        <input name="Peliculas" type="checkbox"  />Películas

        <input type="submit" value="Enviar"/> <input type="reset" value="Cancelar"/>

    </form></div>
</body></html>

Saludos.

Páginas: 1 ... 3 4 5 6 7 [8] 9 10 11 12 13 ... 15

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