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.

Temas - bermartinv

Páginas: 1 2 3 4 [5]

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript crear objetos vacíos y añadir métodos Object.defineProperty CU01145E

« en: 11 de Febrero 2016, 09:55 »

Adjunto mi código para el ejercicio CU01145E del curso de JavaScript:

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script>
var GestionDeUsuarios = {};
    
Object.defineProperty(GestionDeUsuarios,'nombreUsuario',{value:'',writable:true},'idUsuario',{value:0,writable:true});
    
GestionDeUsuarios.preguntarNombre = function (){
    var usuario = prompt("Cuál es el nombre de usuario:");
    var identificador = prompt ("Introduzca identificador de usuario");
    GestionDeUsuarios.nombreUsuario = usuario;
    GestionDeUsuarios.idUsuario = identificador;
}

GestionDeUsuarios.despedir = function () {
    alert ("Hasta luego "+GestionDeUsuarios.nombreUsuario);
}
  
function Objetos(){
    GestionDeUsuarios.preguntarNombre();
    GestionDeUsuarios.despedir();
    alert ('Tenemos un objeto gestionDeUsuarios con propiedades nombre:'+GestionDeUsuarios.nombreUsuario + 'e id: '+GestionDeUsuarios.nombreUsuario);
    despedir();   
}

function despedir(){
						alert('Esta es la funcion despedir() y accedemos a la definicion del objeto con nombre:' + GestionDeUsuarios.nombreusuario);
					}      
    
</script>
</head>
<body>
<input type="button" value="Usuario" onclick="Objetos()"/>    
</body>
</html>

Respecto a la pregunta: "¿si se crea una función despedir entrará en conflicto con el método definido?"

No entrará en conflicto porque hemos definido un objeto que tiene un metodo, para acceder a este metedo tenemos que acceder desde el objeto. Sin embargo, para acceder a la funcion su llamada es directa.

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript clases objetos y métodos con referencia a funciones externas CU01144E

« en: 10 de Febrero 2016, 22:29 »

Respuesta para el ejercicio CU01144E del curso de JavaScript:

Citar

Define un tipo de objeto Medico en JavaScript que tenga como propiedades: nombre (String), personasCuradas (número entero), especialidad (String) y como métodos un método denominado curarPersona y otro método denominado mostrarDatos. El método curarPersona deberá añadir una unidad al valor de la propiedad personasCuradas y el método mostrarDatos deberá mostrar los datos el médico. Por ejemplo, “El médico se llama Juan Eslava, su especialidad es traumatología y lleva curadas 8 personas”. Crea dos objetos del tipo definido, e invoca sus métodos para comprobar que funcionan correctamente.

Crea las dos alternativas de código: métodos con funciones internas anónimas o métodos con referencia a funciones externas.

Adjunto código para funciones anónimas

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script>   
    function crearMedico(nombre,curados,especialidad){
     this.nombre = nombre;
     this.curados = curados;
     this.especialidad = especialidad;
     this.curarPersona=function (){
            curados--;  
     }
     this.mostrarDatos=function(){
         var msg = "El nombre del medico "+this.nombre+" lleva "+this.curados+" curados y su especialidad es "+this.especialidad;
         alert (msg);
     }
    }
    
function crearObjeto(){
    var medico1 = new crearMedico("Pep",3,"urologo");
    var medico2=new crearMedico("Paco",5,"traumatólogo");
    medico1.mostrarDatos();
    medico2.mostrarDatos();
    }
     
     
     
</script>
<body>
    <input type="button" value="Añadir medico" onclick="crearObjeto()"/>
</body>
</html>

Y para funciones externas

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script>   
    function crearMedico(nombre,curados,especialidad){
     this.nombre = nombre;
     this.curados = curados;
     this.especialidad = especialidad;
     this.curarPersona=disminuir;
     this.mostrarDatos=muestrear;
    }
    
function disminuir(){
            this.curados--;  
     }
function muestrear(){
         var msg = "El nombre del medico "+this.nombre+" lleva "+this.curados+" curados y su especialidad es "+this.especialidad;
         alert (msg);
     }
    
    
function crearObjeto(){
    var medico1 = new crearMedico("Pep",3,"urologo");
    var medico2=new crearMedico("Paco",5,"traumatólogo");
    medico1.mostrarDatos();
    medico2.mostrarDatos();
    }
     
     
     
</script>
<body>
    <input type="button" value="Añadir medico" onclick="crearObjeto()"/>
</body>
</html>

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Crear objetos JavaScript significado de this y new inicializar Ejemplo CU01143E

« en: 10 de Febrero 2016, 15:52 »

Adjunto mi código para el ejercicio CU01143E.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script>
var usuario = [];
var i = 0;
    
    function cuenta_Bancaria(nombre,apellidos,saldo){
        this.nombre = nombre;
        this.apellidos = apellidos;
        this.saldo = saldo;
        this.mostrarDatos = function (){
                var msg = 'Los datos de la cuenta nueva son: <br/>'+this.nombre+' '+this.apellidos+' con un saldo de '+this.saldo+' euros';
            document.getElementById("datos_Usuarios").innerHTML = msg;
            
        }
    }
    
    function nuevoCliente(){
        var nombre = prompt ("Introduzca el nombre de cliente:");
        var apellidos = prompt("Introduzca apellidos del cliente\:");
        var saldo = prompt ("Cuál es el saldo de la cuenta:");
        usuario[i] = new cuenta_Bancaria(nombre,apellidos,saldo);
        usuario[i].mostrarDatos();
        i++;
    }
    
    
    </script>
</head>

<body>
    <input type="button" value="Crear cliente" onclick="nuevoCliente()">
    <div id="datos_Usuarios"></div>
</body>
</html>

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript evento onsubmit envío de formulario ejecutar función validar CU01142E

« en: 10 de Febrero 2016, 14:34 »

Adjunto mi código para este ejercicio del curso JavaScript:

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
    form{
        border:solid thin yellow;
        background-color:coral;
        width: 500px;
        height:220px;
    }

    input {
        display:block;
        margin-left:30px;
    }    
    
    .enviar{
         border:solid thin aqua;
        display:inline;
        margin: 10px 10px 5px 50px;
        position: relative;
        top:50px; 
    }
    
</style>
<script>
function validar(){
    var nombre = document.getElementById("nombre").value;
    var email = document.getElementById("email").value;
    validarNombre(nombre);
    email = minusculasEmail(email);
    email = atEmail(email);
    validarEmail(email);  
}
    
function validarNombre(nombre){   
    if ((nombre.length)<3){
        alert("El nombre no cumple tener al menos tres letras");
        }
}
    
function validarEmail(email){
    var contadorArroba=false;
    var contadorPunto=false;
    for (var i=0;i<(email.length);i++){
         if (email[i]=='@'){
                contadorArroba=true;
            }
        if (email[i]=='.'){
                contadorPunto=true;   
            }
         }
    if (contadorArroba==false || contadorPunto==false){
        alert ("Su correo electronico deberia tener un \'@\' y un \'.' ");
    }
}

    function minusculasEmail(correo){
        return correo.toLowerCase();
    }
    
    function atEmail(correo){
        return correo.replace(/at/g,'@');    
    }
    

</script>
</head>
<body>
    <form method="get" onsubmit="validar()" name="formulario">
        <label>Nombre</label>
        <input type="text" name="nombre" id="nombre" placeholder="Introduzca su nombre" size="30"/>
        <label>Apellidos</label>
        <input type="text" name="apellidos" id="apellidos" placeholder="Introduzca sus apellidos" size="60"/>
        <label>Correo electrónico</label>
        <input type="text" name="email" id="email" placeholder="Introduzca email" size="60"/>
        <input class="enviar" type="submit" value="Enviar" />
        <input class="enviar" type="reset" value="Reset"/>
    </form>
    <div id="solucion"></div>
</body>
</html>

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript y HTML crear y copiar nodos del DOM cloneNode appendChild CU01141E

« en: 04 de Febrero 2016, 13:23 »

1) El código sí funciona pero no hace lo que queremos. La opción de copiar un elemento lo que hace es cojerlo de un sitio y ponerlo en otro. Por lo que si lo que queremos es tener dos elementos no funciona, para eso tnemos cloneNode.

2)

Código: [Seleccionar]

 <!DOCTYPE html>

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

<style type="text/css">

body {font-family: sans-serif; text-align:center; }

div {border-style:solid;margin: 30px; padding:25px; display:inline-block;}

div div {background-color: yellow;}

</style>

<script type="text/javascript">

function crearNodoHijo(nodoPadre) {

var nodoHijo=document.createElement("div");
    nodoHijo.innerHTML=nodoPadre.innerHTML;
    nodoHijo.onclick=function (){crearNodoHijo(nodoPadre)};
    nodoHijo.style.color="blue";
    document.body.appendChild(nodoHijo);

}

</script>
</head>
<body>
<div id="nodoRaiz" onclick="crearNodoHijo(this)">Pulsa aquí para duplicar este nodo</div>
</body></html>

Código: [Seleccionar]

<!DOCTYPE html>
<html><head> <title>Curso JavaScript aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
body {font-family: sans-serif; text-align:center; }
div {border-style:solid;margin: 30px; padding:25px; display:inline-block;}
div div {background-color: yellow;}
</style>

<script type="text/javascript">
function crearNodoHijo(nodoPadre) {
var nodoHijo =nodoPadre.cloneNode(false);
    nodoHijo.innerHTML=nodoPadre.innerHTML;
    nodoHijo.onclick="";
    document.body.appendChild(nodoHijo);
nodoHijo.style.color="blue";
}

</script>
</head>

<body>
<div id="nodoRaiz" onclick="crearNodoHijo(this)">Pulsa aquí para duplicar este nodo</div>
</body></html>

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript manipular el DOM getElementById createElement appendChild CU01140E

« en: 03 de Febrero 2016, 16:00 »

Adjunto mi código respuesta al ejercicio CU01140E del curso de JavaScript:

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
#cuadrado{
    border:solid thin blue;
    width:300px;
    height:300px;
    margin-left:50px;
    margin-top:10px;
   
}
    
#botones{
    left:100px;
    margin: 30px;
}

input{
    text-align:center;
    margin:10px ;
}
</style>
<script>
var contador =1;    
    
    function anyadir(donde){
    var nodocuadrado=document.getElementById("cuadrado");
    var nodobody=document.body;
    var nodohijo=document.createElement("span");
    nodohijo.style.color="green";
    nodohijo.id="elemento"+(contador+1);
    nodohijo.innerHTML="Nodo creado "+contador+ "<br/>";
    if (donde=="caja"){
        nodocuadrado.appendChild(nodohijo);
        contador++       
    }
    else {
    nodobody.appendChild(nodohijo);
    contador++;    
    }
    }
</script>
</head>
<body>
    <div id="cuadrado">
        <p>Curso JavaScript aprenderaprogramar.com</p>    
    </div>
    <div id="botones">
        <input type="button" value="Añadir fila" onclick="anyadir('caja')" />
        <input type="button" value="Anidar" onclick="anyadir('fuera')" />
    </div>
</body>
</html>

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript HTMLCollection vs NodeList querySelectorAll no funciona? CU01138E#

« en: 02 de Febrero 2016, 13:27 »

Hola chicos, adjunto codigo que veo más cómodo que el que hace un tiempo adjuntaron nuestros compañeros.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style>
#cuadrado{
    position:absolute;
    width:204px;
    height:204px;
    border:solid thin red;
    top:30%;
    left:30%;
    }
div.cuadrante{
    border:solid thin red;
    text-align: center;
    width:100px;
    height:100px;
    float:left;
    line-height: 100px;
    
}
input{
    float:right;
    margin-top:2em;
}

</style>
</head>
<body>
    <div id="cuadrado">
        <div class="cuadrante">
            <span>?</span>                                                                                      
        </div>
        <div class="cuadrante">
            <span>?</span>
        </div>
        <div class="cuadrante">
            <span>?</span>
        </div>        
        <div class="cuadrante">
            <span>?</span>
        </div>
        <input type="button" onclick="avanzar()" value="Avanzar">
    </div>
</body>
<script>
var contador=0;
var cuadrante=document.querySelectorAll(".cuadrante");
function avanzar(){
 
    
    switch (contador){
        case 0: cuadrante[contador].style.backgroundColor="black";
                cuadrante[contador].style.color="white";
                cuadrante[contador].innerHTML="El";
            break;
        case 1:
                cuadrante[contador].innerHTML="poder ";
            break;
        case 2:
                cuadrante[contador].innerHTML="de";
            break;
        case 3: cuadrante[contador].style.backgroundColor="yellow";
                cuadrante[contador].innerHTML="JavaScript";
            break;
        default: alert ("No es posible hacer mas ");
    }
    contador++;
    
}
</script>
</html>

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript mover figura gráfico por pantalla al pulsar teclas cursor CU01161E

« en: 30 de Noviembre 2015, 14:31 »

Adjunto respuesta a ejercicio 2 de la entrega CU01161E del curso JavaScript:

Citar

EJERCICIO 2

Crea un documento HTML que conste de un título h1 con el texto <<Pulsa una flecha>>, y un div de 300 por 300 px con borde color negro, color de fondo amarillo y márgenes de 200px en todas direcciones. Utiliza el evento keypress para determinar si el usuario pulsa una tecla del cursor, y en ese caso utilizando CSS haz que el cuadrado que define el div se desplace 20px en la dirección de flecha elegida por el usuario. Por ejemplo, si el usuario pulsa la flecha derecha, el div debe desplazarse 20 px dentro de la ventana, hacia la derecha.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    h1 {
        text-align: center;
    }
    #cuadrado{
        margin:200px;
        border: solid 1px blue;
        background:yellow;
        width:300px;
        height:300px;
        position: absolute;
    }
</style>
<script>
window.onload=function(){document.onkeydown=desplazar};
    function desplazar(objeto){
    var tecla = objeto.which;
    
        var situacionY = document.getElementById("cuadrado").offsetLeft;
         var situacionX = document.getElementById("cuadrado").offsetTop;
        switch (tecla){
            case 37 :   
                cuadrado.style.left = situacionY-220+"px" ; break;
            case 38 : 
                cuadrado.style.top = situacionX-220+"px" ;break;
            case 39 :  
        cuadrado.style.left = situacionY-180+"px" ;break;
            case 40 : 
                cuadrado.style.top = situacionX-180+"px" ;break;
        default :alert("Se ha equivocado, debe pulsar las flechas del teclado");
        }
    }
</script>
<body>
    <h1>Pulse una flecha</h1>
    <div id="cuadrado"></div>
</body>
</html>

Para personas que vayan a hacer este ejercicio les advierto que no se les olvide añadir al estilo del div la característica de "position:absolute", me volví loco hasta que me dí cuenta.

Una pregunta para César, estuve probando lo que comentaste de onkeypress , pero no sé si es que hago algo mal , pero cuando presionas las teclas de las flechas su valor es cero. Sin embargo, con onkeyup o onkeydown salen sus valores.

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript evento onmousemove determinar dinámicamente coordenada ratón CU01160E

« en: 19 de Noviembre 2015, 13:05 »

Dejo mi código de este ejercicio.Muy útil para hacer slide de imagenes.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h1 {
            display:inline;
        }
        div#pantalla{
            border:black thin solid;
            height:400px;
            width:500px;
            position:absolute;
            top:20%;
            left:20%;
            
        }
    </style>
    <script>
        window.onload=function(){
    document.getElementById("pantalla").onmousemove=situacion; 
    document.getElementById("pantalla").onmouseout=situacionOut;
    }
    function situacion(evento){
        var x=evento.clientX;
        var y=evento.clientY;
        
        valorX=document.getElementById("valorX");
        valorY=document.getElementById("valorY");
        valorX.innerHTML=x;
        valorY.innerHTML=y;
        valorX.style.color="red";
        valorY.style.color="red"
        
    }
        
    function situacionOut(evento){
        document.getElementById("valorX").innerHTML='';
        document.getElementById("valorY").innerHTML='';
    }
    
    </script>
</head>
<body>
    <div id="pantalla">
        <h1 >Posicion x:<span id="valorX"></span></h1>
        <h1 >Posicion y:<span id="valorY"></span></h1>
    </div>
    
</body>
</html>

Saludos.

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript onsubmit dinámico para validar formulario comprobar datos CU01159E

« en: 19 de Noviembre 2015, 11:26 »

Hola chicos, para realizar este ejercicio, que por cierto está muy chulo, me estoy encontrando con un problema y es que no consigo hacer un onsubmit dinámico. Verifico mis datos de forma dinámica, pero el ejercicio pide que cuando presionemos el boton submit se verifique de nuevo y avise al usuario si los datos estan correctamente escritos o que campos no están bien escritos.Aquí es donde estoy encontrando el problema, me gustaría que me dieran una ayuda de lo que hago mal, porque se me envia el formulario sin pasar por mi función validarDatos() que he definido cuando realizo el submit.

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script>
window.onload=function(){
var nombreOk=false;
var apellidoOk=false;
var edadOk=false;
var emailOk=false;
    function validarDatos(){
    if (nombreOk && apellidoOk && edadOk && emailOk){
        alert("Ha introducido todos los datos correctamente");
        return true;
    }else{
        alert("Hay errores");
        return false;
    }
    }
        
    var everyInputs=document.getElementsByTagName('input');
    for (var i=0;i<(everyInputs.length);i++){
        everyInputs[i].addEventListener('focus',estilo);
        everyInputs[i].addEventListener('blur',estilo2);
        var nodoname=everyInputs[i].name;
       
        switch (nodoname){
                case "nombre":
                    everyInputs[i].addEventListener('blur',validarNombre);
                    break;
                case "apellido":
                     everyInputs[i].addEventListener('blur',validarApellido);
                    break;
                case "edad":
                    everyInputs[i].addEventListener('blur',validarEdad);
                    break;
                case "email":
                    everyInputs[i].addEventListener('blur',validarEmail);
                    break;
                default :break;
            }
    }
function estilo(){
    this.style.backgroundColor="yellow";
}
function estilo2(inputElement){
    this.style.background='transparent';
    this.nextSibling.src="http://images.all-free-download.com/images/graphiclarge/tick_ok_sign_4190.jpg";
}
function estiloRojo(inElement){
    inElement.style.backgroundColor="red";
    inElement.nextSibling.src="http://griponclimate.files.wordpress.com/2013/03/wrong.png";
}
       
function validarNombre(){
        var nombre=document.getElementById("nombre");    
        var expresionRegular=/^\w{3,}$/;
        if ((expresionRegular.test(nombre.value))==true){
            nombreOk=true;
            estilo2(nombre);
        }
        else {
            nombreOk=false;
            estiloRojo(nombre);
        }
    
}

function validarApellido(){
        var apellido=document.getElementById("apellido");
        var expresionRegular=/^\w{3,}$/;
        if ((expresionRegular.test(apellido.value))==true){
            apellidoOk=true;
            estilo2(apellido);
        }
        else {
            apellidoOk=false;
            estiloRojo(apellido);
        }
    
}

function validarEdad(){
    var edad=document.getElementById("edad");
    if ((edad.value>10) && (edad.value<99)){
        edadOk=true;
        estilo2(edad);
    }
    else {
        edadOk=false;
        estiloRojo(edad);    
    }
   
}
    
function validarEmail(){
    var valorEmail=document.getElementById("email");
    var expresionRegular=/^([\w-\.]{3,}\@.+\..+)$/;
    var email=convertirMinusculas(valorEmail.value);
    email=comprobarAtEmail(email);
    if ((expresionRegular.test(email))==true) {
        emailOk=true;
        estilo2(valorEmail);
	}
	else {
        emailOk=false;
		estiloRojo(valorEmail);   
	} 
    
}
    
 
function convertirMinusculas(email){
    return email.toLowerCase();    
    }
    
function comprobarAtEmail(email){
    var expresion=/\sat\s/g;
    return email.replace(expresion,'@');
}

function validarDatos(){
    var msg='Los datos que debe rectificar son:';
    if (nombreOk && apellidoOk && edadOk && emailOk){
        alert ("Ha introducido todos los datos correctamente y su formulario va a ser enviado");
        return true;
    }else{
        if (nombreOk===false){
            msg = msg + 'nombre';
        }
        if (apellidoOk===false){
            msg = msg + 'apellido';
        }
        if (edadOk===false){
            msg = msg + 'edad';
        }
        if (emailOk===false){
            msg = msg + 'email';    
        }
        alert (msg);
        return false;
    }
}

   

        
}
    
</script>
<body>
    <h1>La web para aprender programacion</h1>
    <p>Esta cantidad de eventos puede resultar desconcertante por excesiva. No te preocupes por entender ahora el significado de cada uno de ellos. Simplemente ten unas nociones básicas que te permitan resolver los retos que como programador te puedan ir surgiendo.</p>
    <p>Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.</p>
    <img id="img1" src="http://i.imgur.com/tq5Bs.png" />
<form name="miniformualario" class="formulario" method="get" onsubmit="return validarDatos()">
<label >Escriba nombre</label>    
<input type="text" id="nombre" name="nombre"/><img width="20" height="20"/><br/>
<label>apellidos</label>
<input type="text" id="apellido" name="apellido"/><img width="20" height="20"/><br/>
<label>edad</label>
<input type="text" id="edad" name="edad"/><img width="20" height="20"/><br/>
<label>Correo electronico</label>
<input type="text" id="email" name="email"/><img width="20" height="20"/><br/><br/>
<input type="submit"  value="Enviar" />
<input type="reset" value="Reiniciar datos" />   
    
</form>
<script>
        
    
</script>
   

</body>
</html>

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Validar formularios con JavaScript expresiones regulares y HTML5 CU01155E

« en: 17 de Noviembre 2015, 10:59 »

Hola, mi resultado para el ejercicio es el siguiente:

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<form method="get" name="formulario" onsubmit="validar()">
   <label>Introduzca su nombre</label>
   <input type="text" id="nombre" size="20"/><br/>
   <label>Introduzca su apellido</label>
   <input type="text" id="apellido" size="20"/><br/>
   <label>Introduzca su email</label>
   <input type="text" id="email" size="50"/><br/> 
   <input type="submit" value="submit" />
   <input type="reset" value="Reiniciar datos" />
    
</form>  
<script>
var contador=0;
function validar(){
        validarNombre();
        validarApellido();
        validarEmail();
        validarOk();
}
    
function validarNombre(){
        var nombre=document.getElementById("nombre").value;
        var expresionRegular=/^\w{3,}$/;
        if (!(expresionRegular.test(nombre))){
            alert ("Ha introducido los datos de nombre mal. Deberá indicar un nombre superior a tres letras");
        }
        else {
            contador++;
        }
}
    
function validarApellido(){
        var apellido=document.getElementById("apellido").value;
        var expresionRegular=/^\w{3,}$/;
        if (!(expresionRegular.test(apellido))){
            alert ("Ha introducido los datos de apellido mal. Deberá indicar un apellido superior a tres letras");
        }
        else {
            contador++;
        }
}
    
function validarEmail(){
        var email=document.getElementById("email").value;
    email=convertirMinusculas(email);
    email=comprobarAtEmail(email);
	if( !(/^([\w-\.]{3,}\@.+\..+)$/.test(email)) ) {
  alert ("Le recordamos condiciones que debe cumplir su correo electronico:\n\t 1.Su nombre ha de tener almenos 3 caracteres(alfanumericos o el subrayado)\n\t 2.Debe contener la '@' ");
	}
	else {
		contador++;
        
	}    
}
    
function validarOk(){
    if (contador==3){
            alert ("Introdujo todos los valores correctamente y su formulario será enviado");
    }
}
    
function convertirMinusculas(email){
    return email.toLowerCase();    
    }
    
function comprobarAtEmail(email){
    var expresion=/\sat\s/g;
    return email.replace(expresion,'@');
}
    
</script>
</body>
</html>

Además quería comentar, que podriamos usar en este ejercicio muchos atributos nuevos que salieron con HTML5, podriamos haber añadido el atributo required para obligar al usuario a que rellenase los campos, además para el email podriamos añadir type="email", una ayuda que facilitaria al usuario introducir los campos es añadir placeholder="descripcion del campo". También podemos añadir dentro de input la expresion regular, en el caso de nombre y apellido podriamos poner pattern="[A-Za-z]{3,}".

Tengo una cuestión, que estoy planteandome que no sé si es correcto mi idea para hacer una verificiacion sincrona de los formularios. Quiero que cada campo cada vez que sea rellenado y se cambie a otros campo se verifique(si es correcto aparezca un tic de correcto y si no lo es una cruz de incorrecto).Estaba pensando en utilizar el evento onfocusout para que cada vez que se cambien de campo se verifique, ¿sería correcto el planteamiento?

Otra cosa que me ha parecido muy comodo para la verificación de formularios es el poder cambiar el mensaje de verificación con setCustomValidity().

Saludos.

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Herencia JavaScript prototype función call indica objeto this ejercicio CU01150E

« en: 12 de Noviembre 2015, 12:52 »

Para el primer ejercicio esta es mi solucion:

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<button onclick="mostrarObjeto()">Mostrar Objeto</button>
<script>

    function persona(nombre,nacionalidad){
        this.nombre = nombre || 'Desconociso' ;
        this.nacionalidad = nacionalidad || 'Desconocido';
    }
    persona.prototype.mostrarNacionalidad=function(){
            alert ('La nacionalidad de '+this.nombre+' es '+this.nacionalidad);     
    }
    
    function medico(nombre,nacionalidad,centroDeTrabajo){
            persona.call(this,nombre,nacionalidad);
            this.centroDeTrabajo=centroDeTrabajo || 'Desconocido';
    }
    
    function medicoEspecialista(especialidad,centroDeTrabajo,nacionalidad,nombre){
            medico.call(this,nombre,nacionalidad,centroDeTrabajo);
            this.especialidad=especialidad || 'Desconocida';
    }
    
    medico.prototype=new persona;
    medicoEspecialista.prototype=new medico;
    
    function mostrarObjeto(){
        var primerMedico=new medicoEspecialista('traumatologo','Hospital 9 de Octubre','española','Beltran');
        var msg = ('El medico '+primerMedico.nombre+' con nacionalidad '+primerMedico.nacionalidad+' trabaja en '+primerMedico.centroDeTrabajo+' y tiene la especialidad de ' +primerMedico.especialidad);
        primerMedico.mostrarNacionalidad();
        alert(msg);
        
    }
    
    
    </script>
</body>
</html>

Y para el segundo ejercicio esta:

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<button onclick="crearObjetos()">Mostrar Objetos</button>
<script>
    function Persona(nombre){
        this.nombre = nombre || 'Desconociodo'    
        this.saludar = function (){
            alert ('Soy  '+this.nombre+' profesor '+this.tipo);
        }
    }
    Persona.prototype.definicion="Una persona es una persona";
    
    function Profesor(nombre,institucionAcademica,tipo){
        Persona.call(this,nombre);
        this.institucionAcademica = institucionAcademica || 'Desconocido';
        this.tipo = tipo || 'Desconocido';
    }
    
    function ProfesorInterino(nombre,institucionAcademica,tipo,mesesContratado){
        Profesor.call(this,nombre,institucionAcademica,tipo);
        this.mesesContratado = mesesContratado;
    }
    
    function ProfesorTitular(nombre,institucionAcademica,tipo,anyosTrabajados){
        Profesor.call(this,nombre,institucionAcademica,tipo);
        this.anyosTrabajados=anyosTrabajados;
    }
    
Profesor.prototype=new Persona();
ProfesorInterino.prototype = new Profesor();
ProfesorTitular.prototype = new Profesor();
    
    function crearObjetos(){
        var ProfesorTitular1=new ProfesorTitular('Juan','Universidad de Leon','titular',8);
        var msg1 = ('El profesor '+ProfesorTitular1.tipo+' '+ProfesorTitular1.nombre+' ha trabajado durante '+ProfesorTitular1.anyosTrabajados+' anyos en '+ProfesorTitular1.institucionAcademica);
        var ProfesorInterino1=new ProfesorInterino('Pedro','Universidad Politecnica de Valencia','interino',5);
        var msg2 = ('El profesor '+ProfesorInterino1.tipo+' '+ProfesorInterino1.nombre+' ha trabajado durante '+ProfesorInterino1.mesesContratado+' meses en '+ProfesorInterino1.institucionAcademica);
        alert(msg1);
        alert(msg2);
        ProfesorTitular1.saludar();
        ProfesorInterino1.saludar();
    }
</script>
</body>
</html>

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript diferencia entre propiedades estáticas y herencia prototype CU01147E

« en: 11 de Noviembre 2015, 23:21 »

Necesito un empujón ,para poder tener claro cuando utilizar prototype o propiedades estáticas. No veo diferencia alguna y me gustaría me pudieran ayudar a entender cuando usar una u otra.

EN EL CASO DE PROTOTYPE:

Código: [Seleccionar]

function construyendoProto(){
    this.definicionSegunDiccionario="Un cometa es muy chulo";
    this.obtenerRadio=function(){
        return(this.diametro)/2;        
    }
    this.obtenerTemperaturaFarenheit=function(){
        return (1.8*this.temperatura)+32;
        
    }
}
    
cometaDef.prototype=new construyendoProto();

Y EN EL CASO DE METODOS/PROPIEDADES ESTÁTICAS:

Código: [Seleccionar]

cometaDef.definicionSegunDiccionario="Un cometa es muy chulo";
cometaDef.obtenerRadio=function(){
        return(this.diametro)/2;        
    }
cometaDef.obtenerTemperaturaFarenheit=function(){
        return (1.8*this.temperatura)+32;   
    }

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Herencia en JavaScript Crear objetos y usar prototype para generalizar CU01147E

« en: 11 de Noviembre 2015, 14:56 »

Hola, ya resolví el ejercicio CU01147E

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <button onclick="mostrar()">Cometas</button>
   
<script>   
// Definicion del objeto
function cometaDef(diametro,temperatura,nombre){
    this.diametro=diametro;
    this.temperatura=temperatura;
    this.nombre=nombre;
    
    }
   
//Definicion Metodo Clase del objeto
function construyendoProto(){
    this.definicionSegunDiccionario="Un cometa es muy chulo";
    this.obtenerRadio=function(){
        return(this.diametro)/2;        
    }
    this.obtenerTemperaturaFarenheit=function(){
        return (1.8*this.temperatura)+32;       
    }
}
    
cometaDef.prototype=new construyendoProto();

function mostrar(){
    var cometa=new Array();    
    cometa[0]=new cometaDef(13,12,"arena de mal");
    cometa[1]=new cometaDef(120,12,"bonito");
    cometa[2]=new cometaDef(123,12,"rueda amarilla");
    var msg='';
				for(i in cometa){
					msg = 'Definicion de cometa ' + cometa[i].definicionSegunDiccionario + '\n';				
					msg = msg + 'El cometa ' + cometa[i].nombre + ' tiene de diametro ' + cometa[i].diametro + ' y su radio es de  '+cometa[i].obtenerRadio()+ "\n";
                    msg = msg + 'Además tiene una temperatura de ' +cometa[i].obtenerTemperaturaFarenheit()+ ' de grados Farenheit, y una temperatura en grados centigrados de '+cometa[i].temperatura;
                    alert(msg);
				}
}   
</script>    
</body>
</html>

Pero a raiz de este ejercicio me han surgido nuevas dudas que no he podido resolver.

Estoy intentando el usuario puede dar los valores de los satelites, he creado varios botones para cada cometa, asi cuando apreta el boton de cometa 1, había pensado en este código

Código: [Seleccionar]

function cometa1(){
    var diametro=prompt("Cual va a ser su diametro:");
    var temperatura=prompt("Que temperatura tiene:");
    var nombre=prompt("Que nombre le vas a poner:");
    var cometa[0]=new cometaDef(diametro,temperatura,nombre);
}

No consigo meter los datos. Necesito una ayudita.

Páginas: 1 2 3 4 [5]

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

Noticias: