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 - Dimitar Stefanov

Páginas: 1 ... 6 7 8 9 10 [11] 12 13 14
201
Posible solución del ejercicio CU01145E del cursjo JavaScript desde cero.

Citar
EJERCICIO

Una de las utilidades de crear objetos vacíos es evitar conflictos de nombres. Supón que creas funciones como:

function crearEntrada() {     // hacer algo  }

function crearSalida() {    // hacer algo  }

 

El problema que se presenta es que en otro momento se pueda definir otra función con el mismo nombre que alguna de las ya definidas, creando un conflicto de nombres.

Crea un objeto vacío denominado GestionDeUsuarios y añádele dos métodos: un método preguntarNombre y un método despedir. Al invocar GestionDeUsuarios.preguntarNombre() se debe establecer la propiedad nombre del objeto con un nombre introducido por el usuario y un id de usuario introducido también por el usuario. Al invocar el método GestionDeUsuarios.despedir() se debe mostrar un mensaje de despedida “Hasta luego nombreDeUsuario” donde nombreDeUsuario será el nombre correspondiente.

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

Solución:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Curso JavaScript</title>
<script type="text/javascript">
var GestionDeUsuarios={
bienvenida:function(){
this.nombre=prompt('Introducir su nombre');
this.id=prompt('Introducir su Id');
},
despedir:function(){alert('Hasta luego '+this.nombre)}
}
GestionDeUsuarios.bienvenida();
GestionDeUsuarios.despedir();

function despedir(){
alert('Como podemos comprobar no se crea un conflicto entre las dos funciones "despedir()" porque esta es externa y la otra es interna (está dentro de un objeto definido creado con el método Sigleton)');
}
</script>
</head>
<body>
<div style="text-align: center; margin: 20% 0;">
<input type="button" value="Invocar la segunda función 'despedir()' " onclick="despedir()"></input>
</div>
</body>
</html>

Gracias.

PD: Contesto a la última pregunta mediante el botón en el código.

202
A continuación pongo una posible solución del ejercicio CU01144E del curso JavaScript desde cero:

Citar
EJERCICIO

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.

Código:

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

function medico(){
this.nombre='Juan Eslava';
this.personasCuradas=8;
this.especialidad='traumatología';
this.curarPersonas=function(){
this.personasCuradas=this.personasCuradas+1;
}
this.mostrarDatos=function(){
var msg='El médico se llama: '+this.nombre+', su especialidad es: '+this.especialidad+' y lleva curadas: '+this.personasCuradas;
alert(msg);
}
}


function ejemploObjetos(){
var datosMedico= new medico();
var datosMedico2=new medico();//no se ve la diferencia, porque las propiedades en la función medico(); tienen el mismo valor, pero vemos que el código funciona.
datosMedico.mostrarDatos();
datosMedico.curarPersonas();
datosMedico.mostrarDatos();
datosMedico.curarPersonas();
datosMedico.mostrarDatos();
datosMedico2.mostrarDatos();
datosMedico2.curarPersonas();
datosMedico2.mostrarDatos();
datosMedico2.curarPersonas();
datosMedico2.mostrarDatos();
}
</script>
</head>
<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplos JavaScript</h3>
</div>
<div style="color: blue;" id="pulsador" onclick="ejemploObjetos()">Probar ejercicio</div>
</body>
</html>

PD: Utilicé funciones internas porque así lo proponían en la entrega CU01144E.

Gracias

203
Posible solución del ejercicio CU01143E del curso JavaScript desde cero.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta />
<title>Curso JavaScript</title>

<script type="text/javascript">

function CuentaBancaria(nombre,apellidos,saldo){
this.nombreCuenta=nombre;
this.apellidosCuenta=apellidos;
this.saldoCuenta=saldo;
this.mostrarDatos=function (){
var msg='\t\tAcaba de crear su nueva cuenta.\n\n';
msg=msg+'Los datos de la cuenta son:\n\n Nombre: '+this.nombreCuenta;
msg=msg+';\n Apellidos: '+this.apellidosCuenta+';\n Saldo: '+this.saldoCuenta+'euros';
alert(msg);
}
}

function entrarDatos(){
var nombre=prompt('Introduzca su nombre');
var apellidos=prompt('Introduzca sus apellidos');
var saldo=prompt('Introduzca el saldo de su cuenta');
var cuenta=new CuentaBancaria(nombre,apellidos,saldo);
cuenta.mostrarDatos();
}
</script>
</head>
<body>
<div id="cabecera" style="text-align: center;">
<h2>Ejercicio CU01143E del curso JavaScript desde cero</h2>
<input type="button" value="Crear cuenta bancaria" onclick="entrarDatos()"></input>
</div>

</body>
</html>

Gracias por corregir :)

204
Solucion del ejercicio CU01142E del curso JavaScript desde cero.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="Curso JavaScript"/>
<meta name="keywords" content="programar,cursos,JavaScript,aprenderaprogramar.com"/>
<link rel="stylesheet" type="text/css" href="CU01142E.css"/>
<script type="text/javascript" src="CU01142E.js"></script>
</head>
<body>
<div id="contenedor">
<form name="formulario1" method="get" onsubmit="validar()">
<h2>Formulario ejemplo cadenas Texto</h2>
<label for="nombre"><span>Nombre:</span><input type="text" id="nombre" name="nombre"></input></label>
<label for="apellidos"><span></span>Apellidos:<input type="text" id="apellidos" name="apellidos"></input></label>
<label for="email"><span>Correo Electrónico:</span><input type="text" id="email" name="email"></input></label>
<label><input type="submit" value="Enviar"></input><input type="reset" value="Cancelar"></input></label>
</form>
</div>

</body>
</html>

Código CSS:

Código: [Seleccionar]
body{
font-family: sans-serif;
text-align: center;
background-color: grey;
font-size: 2em;
}
label{
display: block;
margin: 5px;
}

Código JavaScript:

Código: [Seleccionar]
function validar(){
var datos=document.getElementsByTagName('input');
if(datos[0].value.length<3){
alert('El nombre no cumple tener al menos tres letras');
}
if((datos[2].value.indexOf('@')==-1)&&(datos[2].value.indexOf('.')==-1)){
alert('Falta el símbolo @ y . en el correo electrónico');
}else if(datos[2].value.indexOf('@')==-1){
alert('Falta el símbolo @ en el correo electrónico');
}else if(datos[2].value.indexOf('.')==-1){
alert('Falta el símbolo . en el correo electrónico');
}
datos[2].value=datos[2].value.toLowerCase();
datos[2].value=datos[2].value.replace(/at/g,'@');
datos[2].value=datos[2].value.replace(/ /g,'');
alert(datos[2].value); //comprobar si los valores del campo "correo electrónico" se envían bien.
}


Gracias.

205
Solución del ejercicio CU01141E del curso JavaScript desde cero.

Código primario (inicial):

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;

document.body.appendChild(nodoHijo);

}

</script>

</head>

<body>

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

Citar
EJERCICIO

El siguiente código pretendía duplicar un nodo cada vez que se pulsara sobre él, de modo que inicialmente apareciera en pantalla el mensaje “Pulsa aquí para duplicar este nodo” y que cada vez que se pulsara sobre él, se duplicara (tantas veces como veces se pulsara). El problema es que no funciona, es decir, no obtenemos ningún resultado. Analiza el código y responde estas cuestiones:

1) ¿Por qué no funciona?

1) Realmente, tal y como tenemos el código, lo que hace es sustituir el nodoPadre por el nodoPadre. Visualmente no se ve ningún cambio porque los dos div son idénticos y el nodoHijo se sobrepone al nodoPadre. Podrías ver que funciona el código incluyendo la siguiente línea:

Código: [Seleccionar]
nodoHijo.style.backgroundColor="yellow";
de modo que el código nos quedaría de la siguiente manera:

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;
nodoHijo.style.backgroundColor="yellow";
document.body.appendChild(nodoHijo);
}
</script>
</head>
<body>
<div id="nodoRaiz" onclick="crearNodoHijo(this)">Pulsa aquí para duplicar este nodo</div>
</body></html>

Por lo tanto, podemos concluir que sí funciona el código pero no de la manera que nos gustaría.

Citar
2) Realiza los cambios en el código que nos permitan realizar lo que teníamos previsto creando un nuevo nodo del mismo tipo y con el mismo texto que el deseado y añadiéndolo como último hijo del nodo body.

2) El código de la segunda condición quedaría así:

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() {
    var nodoHijo=document.createElement('div');
    var nodoTexto=document.createTextNode('Pulsa aquí para duplicar este nodo');
nodoHijo.onclick=function (){crearNodoHijo()};
    nodoHijo.appendChild(nodoTexto);
    document.body.appendChild(nodoHijo);
}
</script>
</head>
<body>
<div id="nodoRaiz" onclick="crearNodoHijo()">Pulsa aquí para duplicar este nodo</div>
</body>
</html>

Citar
3) Realiza los cambios en el código que nos permitan realizar lo que teníamos previsto clonando el nodo con el método cloneNode y añadiendo el nodo clonado como último hijo del nodo body.

3) El código del subpunto 3 sería así:

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(true);
document.body.appendChild(nodoHijo);
}
</script>
</head>
<body>
<div id="nodoRaiz" onclick="crearNodoHijo(this)">Pulsa aquí para duplicar este nodo</div>
</body>
</html>

Gracias


206
Posible solución del ejercicio CU01140E del curso JavaScript desde cero con ejercicios resueltos de aprenderaprogramar.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="Curso JavaScript"/>
<meta name="keywords" content="programar,cursos,aprenderaprogramar.com"/>
<title>JavaScript</title>
<link rel="stylesheet" type="text/css" href="CU01140E.css"/>
<script type="text/javascript" src="CU01140E.js"></script>
</head>
<body>
<div>
Curso JavaScript aprenderaprogramar.com
</div><br/>
<input type="button" value="Añadir al final" onclick="alFinal()"/>
<input type="button" value="Anidar" onclick="anidar()"/><br/>
</body>
</html>

Código CSS:

Código: [Seleccionar]
body{
font-family: sans-serif;
text-align: center;
}
div{
border-style: solid;
margin: 20px;
padding: 15px;
display: inline-block;
}

Código JavaScript:

Código: [Seleccionar]
var click=1;

function anidar(){
var nodoHijo=document.createElement('div');
var nodoPadre=document.getElementsByTagName('div');
var nodoText=document.createTextNode('Nodo Creado '+click);
nodoPadre[0].appendChild(nodoHijo);
nodoHijo.appendChild(nodoText);
click++;
}

function alFinal(){
var nodoHijo=document.createElement('div');
var nodoText=document.createTextNode('Nodo Creado '+click);
var nodoPadre=document.getElementsByTagName('html');
nodoPadre[0].appendChild(nodoHijo);
nodoHijo.appendChild(nodoText);
click+=1;
}

Gracias.

207
Posible solución del ejercicio CU01138E del curso JavaScript desde cero.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Curso JavaScript</title>
<style type="text/css">
body{
text-align: center;
font-size: 10em;
margin: 10% 30%;
}
div div{
border: solid;
width: 200px;
height: 200px;
float: left;
}
</style>
<script type="text/javascript">
var click;
click=1;
function cambiarAspecto(){
if(click==1){
document.getElementById('caja1').innerHTML='<div style="font-size: 0.5em; line-height: 2.2em; background-color: black; color: white; border: none; ">El</div>';
}
if(click==2){
document.getElementById('caja2').innerHTML='<div style="font-size: 0.5em; line-height: 2em; border: none;">poder</div>';
}
if(click==3){
document.getElementById('caja3').innerHTML='<div style=" font-size: 0.5em; line-height: 2.2em; border: none;">de</div>';
}
if(click==4){
document.getElementById('caja4').innerHTML='<div style="font-size: 0.25em; line-height: 5em; background-color: yellow; border: none;">JavaScript</div>';
}if(click==5){
alert('No es posible avanzar más!');
}
click++;
}
</script>
</head>
<body>
<div id="contenedor">
<div id="caja1">?</div>
<div id="caja2">?</div>
<div id="caja3" style="clear: both;">?</div>
<div id="caja4">?</div>
</div>
<div id="limpiardor" style="clear: both;"></div>
<input type="button" Value="Avanzar" onclick="cambiarAspecto()"></input>
</body>
</html>

Gracias.

208
Posible solución del ejercicio CU01136E del curso JavaScript desde cero usando Notepad++ como editor.

A continuación expongo el código primer intento:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Curso JavaScript</title>
<style type="text/css">
body{
text-align: center;
}
</style>
<script type="text/javascript">
function sumar(){
var nodoDiv=document.getElementsByTagName('div');
var Numero=[];
msg='Multiplicamos por 3 los números introducidos: \n';
var restantes=[5,4,3,2,1]
for(i=0;i<5;i++){
Numero[i]=Number(prompt('Introduce un número. Te quedan: '+restantes[i]+' por introducir'));
msg=msg+Numero[i]+'*3='+Numero[i]*3+',          ';
}
nodoDiv[0].textContent=msg;
}
</script>
</head>
<body>
<h1>Ejercicio curso aprenderaprogramar.com</h1>
<div> </div>
<input type="button" value="Probar ejercicio" onclick="sumar()"></input>
</body>
</html>

Gracias.

209
Código del ejercicio CU01134E del curso JavaScript desde cero.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Ejemplo aprenderaprogramar.com</title>
<style type="text/css">
body {
font-family: sans-serif;
text-align:center;
}
#calculadora {   
font: bold 14px Arial,sans-serif;
background-color:
#9DD2EA;
border-radius: 3px;
height: auto;
margin: 0 auto; 
padding: 20px 20px 9px;
width: 295px;
}
.parteSuperior .pantalla {
background-color: rgba(0, 0, 0, 0.2);
border-radius: 3px;
color: #FFFFFF;
float: right;
font-size: 17px;
height: 40px;
letter-spacing: 1px;
line-height: 40px;
padding: 0 10px;
text-align: right;
width: 180px;
}
.teclas, .parteSuperior {
overflow: hidden;
}
.teclas span, .parteSuperior span.limpiar {     
background-color: #FFFFFF;
border-radius: 3px;
color: #888888;
cursor: pointer;
float: left;
height: 36px;
line-height: 36px;
margin: 0 7px 11px 0;
text-align: center;
transition: all 0.4s ease 0s;
width: 66px;
}
.parteSuperior span.limpiar {
background-color:#FF7C87;
}
.teclas span.operador {
background-color: #FFDAB9;
margin-right: 0;
}
.teclas span.igual {
background-color: #F1FF92;
color: #888E5F;
}
.parteSuperior span.limpiar, {
background-color: #FF9FA8;
color: #FFFFFF;
}
.teclas span:hover, .teclas span.igual:hover, .parteSuperior span.limpiar:hover {
background-color: #9C89F6;
color: #FFFFFF;
}
#contenedor {
width:500px;
margin: 40px auto;
overflow:hidden;
}
#marcaNumeros, #marcaOperadores, #marcaC, #marcaPunto, #marcaPantalla, #restablecer {
padding:15px;
width: 90px;
display: inline-block;
margin: 10px;
cursor: pointer;
color: white;
border-radius: 40px;
background: rgb(202, 60, 60);
}
#marcaNumeros:hover, #marcaOperadores:hover, #marcaC:hover, #marcaPunto:hover, #marcaPantalla:hover, #restablecer:hover {
background: rgb(66, 184, 221);
}
</style>
<script type="text/javascript">
function marcarOperadores(){
var listaNodosOperadores=document.querySelectorAll('#calculadora .teclas span.operador');
var nodoIgual=document.querySelector('.igual');
for(var i=0;i<listaNodosOperadores.length;i++){
listaNodosOperadores[i].style.backgroundColor='yellow';
listaNodosOperadores[i].style.color='black';
listaNodosOperadores[i].style.border='solid 1px';
}
nodoIgual.style.backgroundColor='yellow';
nodoIgual.style.color='black';
nodoIgual.style.border='solid 1px';

}

function marcarNumeros() {
var listaNodosNumeros = document.querySelectorAll("#calculadora .teclas span.numero");
       for (var i=0; i<listaNodosNumeros.length; i++) {
            listaNodosNumeros[i].style.backgroundColor = "black";
            listaNodosNumeros[i].style.color = "white";
            listaNodosNumeros[i].style.border = "solid 1px";
            }
}

function marcarC(){
var nodoC=document.querySelector('.limpiar')
nodoC.style.backgroundColor='red';
nodoC.style.color='white';
}

function marcarPunto(){
var nodoPunto=document.querySelector('.punto');
nodoPunto.style.backgroundColor='purple';
nodoPunto.style.color="white";
}

function marcarPantalla(){
var nodoPantalla=document.querySelector('.pantalla');
nodoPantalla.style.backgroundColor='#0040FF';
}

function restablecer(){
var listaNodosOperadores=document.querySelectorAll('#calculadora .teclas span.operador');
var nodoIgual=document.querySelector('.igual');
var listaNodosNumeros = document.querySelectorAll("#calculadora .teclas span.numero");
var nodoC=document.querySelector('.limpiar')
var nodoPunto=document.querySelector('.punto');
var nodoPantalla=document.querySelector('.pantalla');
for(var i=0;i<listaNodosOperadores.length;i++){
listaNodosOperadores[i].style.backgroundColor='#FFDAB9';
listaNodosOperadores[i].style.color='#888888';
listaNodosOperadores[i].style.border='none';
}

nodoIgual.style.backgroundColor='#F1FF92';
nodoIgual.style.color='#888888';
nodoIgual.style.border='none';

for (var i=0; i<listaNodosNumeros.length; i++) {
            listaNodosNumeros[i].style.backgroundColor = "#FFFFFF";
            listaNodosNumeros[i].style.color = "#888888";
            listaNodosNumeros[i].style.border = "none";
            }

nodoC.style.backgroundColor='#FF9FA8';
nodoC.style.color='#888888';

nodoPunto.style.backgroundColor='#FFFFFF';
nodoPunto.style.color="#888888";

nodoPantalla.style.backgroundColor='rgba(0,0,0,0.2)';
}
</script>
</head>
<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplo calculadora JavaScript</h3>
</div>
<!-- Calculadora -->
<div id="calculadora">
        <!-- pantalla y tecla limpiar -->
        <div class="parteSuperior">
            <span class="limpiar" onclick="pulsada('C')">C</span>
            <div class="pantalla"> </div> <!--Ojo tenemos un espacio para que exista nodeValue-->
        </div>
        <div class="teclas">
            <!-- operadores y otras teclas -->
            <span class = "numero" onclick="pulsada('7')">7</span>
            <span class = "numero" onclick="pulsada('8')">8</span>
            <span class = "numero" onclick="pulsada('9')">9</span>
            <span class="operador" onclick="pulsada('+')">+</span>
            <span class = "numero" onclick="pulsada('4')">4</span>
            <span class = "numero" onclick="pulsada('5')">5</span>
<span class = "numero" onclick="pulsada('6')">6</span>
            <span class="operador" onclick="pulsada('-')">-</span>
            <span class = "numero" onclick="pulsada('1')">1</span>
            <span class = "numero" onclick="pulsada('2')">2</span>
            <span class = "numero" onclick="pulsada('3')">3</span>
            <span class="operador" onclick="pulsada('/')">÷</span>
            <span class = "numero" onclick="pulsada('0')">0</span>
            <span class ="punto" onclick="pulsada('.')">.</span>
            <span class="igual" onclick="pulsada('=')">=</span>
            <span class="operador" onclick="pulsada('*')">x</span>
        </div>
</div>
<div id="contenedor">
<div id ="marcaNumeros" onclick="marcarNumeros()"> Marcar números </div>
<div id="marcaOperadores" onclick="marcarOperadores()" >Marcar operadores</div>
<div id="marcaC" onclick="marcarC()" >Marcar botón C</div>
<div id="marcaPunto" onclick="marcarPunto()" >Marcar botón punto</div>
<div id="marcaPantalla" onclick="marcarPantalla()" >Marcar pantalla</div>
<div id="restablecer" onclick="restablecer()" >Restablecer ajustes</div>


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

Gracias.

210
Posible solución del ejercicio CU01135E del curso JavaScript desde cero.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Curso JavaScript</title>
<script type="text/javascript">
function sumar(){
var msg='Multiplicamos por 5 los números introducidos:\n';
var Numero=[], Cardenal=['primer','segundo','tercer','cuarto','quinto'];
alert('A continuación introduce 5 números.')
for(j=0;j<5;j++){
Numero[j]=prompt('Estás introduciendo el '+Cardenal[j]);
}
for(i in Numero){
msg=msg+Numero[i]+'*5='+Numero[i]*5+'         ';
}
alert(msg);
}
</script>
</head>
<body onload="sumar()">
</body>
</html>

Gracias.

211
Una posible solución del ejercicio CU01132E del curso JavaScript desde cero.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Curso JavaScript</title>
<script type="text/javascript">
function pideUnaPalabra(){
var palabra;
palabra=prompt('Introduce una palabra');
var i=1;
var msg='';
while(i<=palabra.length){
msg=msg+'Letra'+i+': '+palabra.charAt(i-1)+'\n';
i++;
}
alert(msg);
}
</script>
</head>
<body onload="pideUnaPalabra()">
</body>
</html>

Gracias

212
Aquí dejo los códigos del ejercicio CU01131E del curso JavaScript desde cero.

1) Código :

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Portal web</title>
<script type="text/javascript">
function mostrarLetras(){
var palabra=prompt('Por favor introduzca una palabra, para ver sus letras.')
var msg='';
for(i=1; i<=palabra.length; i++){
msg=msg+'Letra'+i+': '+palabra.charAt(i-1)+'\n';}
alert(msg);
}
</script>
</head>
<body onload="mostrarLetras()">
</body>
</html>

2) Código:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo DOM - aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
body {
background-color:white;
font-family:
sans-serif;
}
p {
font-size: 24px;
color: maroon;
float: left;
margin:10px;
border: solid black;
padding:10px;
}
.boton{
padding:15px;
width: 330px; 
text-align:center;
clear:both;
color: white;
border-radius: 40px;
background: rgb(202, 60, 60);
}
.boton:hover {
background: rgb(66, 184, 221);
}
</style>
</head>
<body>
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didáctica y divulgación de la programación</h2>
<div style="width:500px; float:left; margin-bottom:30px;">
<p>Manzana</p><p>Pera</p><p>Fresa</p><p>Ciruela</p>
<p>Naranja</p><p>Kiwi</p><p>Pomelo</p><p>Melón</p>
<p>Sandía</p><p>Mango</p><p>Papaya</p><p>Cereza</p>
<p>Nectarina</p><p>Frambuesa</p>
</div>
<h3 class="boton" onclick="mostrarContParrafos()">Mostrar texto de los párrafos</h3>
<script type="text/javascript">
function mostrarContParrafos(){
var elementosObtenidos=document.getElementsByTagName('p');
var msg='';
for(var i=1; i<=elementosObtenidos.length; i++){
msg=msg+'Párrafo'+i+': '+elementosObtenidos[i-1].firstChild.nodeValue+'\n';
}
alert(msg);
}
</script>
</body>
</html>

PD: Intenté solucionar los 2 ejercicios sin condicionales "if else". En el segundo ejercicio dejé el código abajo, no entre las etiquetas <head>...</head> porque creo que para que se obtengan todas las etiquetas <p> del documento la función javascript lo hace solamente hasta donde está escrita. Es decir, si está entre las etiquetas <head>...</head> no podrá obtener ninguna etiqueta <p>. O puede ser que me esté equivocando....

Gracais.

213
Posible solución del ejercicio CU01130E del curso JavaScript desde cero (programación web).

a) Las dos maneras son correctas, tanto: if (elementosObtenidos[1].checked == true) como: if (elementosObtenidos[1].checked). Se produce este efecto, porque el navegador, con la condicional: if (elementosObtenidos[1].checked) intenta averiguar si ha sido seleccionado o no. Y con la condicional: if (elementosObtenidos[1].checked == true) intenta hacer lo mismo. En el segundo caso le damos explícitamente que valore si es verdadera o falsa esta condicional, pero en el primer caso hace dicha comparación automáticamente.

b) El código quedaría así:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
body {
background-color: white;
font-family:
sans-serif;
}
label {
color: maroon;
display: inline-block;
padding: 5px;
}
</style>
<script type="text/javascript">
function informarItemsElegidos(elemento){
var elementosObtenidos=document.getElementsByName(elemento);
var msg='Los animales que ha elegido: ';
elegidos=0;
if(elementosObtenidos[0].checked){msg=msg+elementosObtenidos[0].value; elegidos=elegidos+1;}
if(elementosObtenidos[1].checked&&elegidos>=1){msg=msg+', ';}
if(elementosObtenidos[1].checked){msg=msg+elementosObtenidos[1].value; elegidos=elegidos+1;}
if(elementosObtenidos[2].checked&&elegidos>=1){msg=msg+', ';}
if(elementosObtenidos[2].checked){msg=msg+elementosObtenidos[2].value; elegidos=elegidos+1;}
if(elementosObtenidos[3].checked&&elegidos>=1){msg=msg+', ';}
if(elementosObtenidos[3].checked){msg=msg+elementosObtenidos[3].value; elegidos=elegidos+1;}
if(elegidos==0){msg='No ha elegido ningún animal';}
alert(msg);
}
</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 -->
<div>
<form name="formularioContacto" class="formularioTipo1" method="get"  action="http://aprenderaprogramar.com"  onsubmit="informarItemsElegidos('animal')">
<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"/></label>
<label for="apellidos"><span>Apellidos: </span><input id="apellidos" type="text" name="apeliidos"/></label>
<p>Elige los animales que te gusten:</p>
<input type="checkbox" name="animal" id="leon" value="leon"/><label for="leon">León&nbsp;&nbsp;&nbsp;   </label>
<input type="checkbox" name="animal" id="tigre" value="tigre"/><label for="tigre">Tigre&nbsp;&nbsp;&nbsp; </label>
<input type="checkbox" name="animal" id="guepardo" value="guepardo"/><label for="guepardo">Guepardo&nbsp;&nbsp;&nbsp; </label>
<input type="checkbox" name="animal" id="jaguar" value="jaguar"/><label for="jaguar">Jaguar</label>
<label for="email"><span>Correo Electrónico: </span><input id="email" type="text" name="email"/></label>
<label>
<input type="submit" value="Enviar"/>
<input type="reset" value="Cancelar"/>
</label>
</div>
</form>
</body>
</html>

3) El código quedaría de la siguiente manera.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
body {
background-color: white;
font-family:
sans-serif;
}
label {
color: maroon;
display: inline-block;
padding: 5px;
}
</style>
<script type="text/javascript">
function informarItemsElegidos(elemento){
var elementosObtenidos=document.getElementsByName(elemento);
var msg='El número total de animales disponibles era: ';
elegidos=0;
if(elementosObtenidos[0].checked){elegidos=elegidos+1;}
if(elementosObtenidos[1].checked){elegidos=elegidos+1;}
if(elementosObtenidos[2].checked){elegidos=elegidos+1;}
if(elementosObtenidos[3].checked){elegidos=elegidos+1;}
alert(msg+elementosObtenidos.length+' y usted ha elegido: '+elegidos);
}
</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 -->
<div>
<form name="formularioContacto" class="formularioTipo1" method="get"   action="http://aprenderaprogramar.com"  onsubmit="informarItemsElegidos('animal')">
<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"/></label>
<label for="apellidos"><span>Apellidos: </span><input id="apellidos" type="text" name="apeliidos"/></label>
<p>Elige los animales que te gusten:</p>
<input type="checkbox" name="animal" id="leon" value="leon"/><label for="leon">León&nbsp;&nbsp;&nbsp;   </label>
<input type="checkbox" name="animal" id="tigre" value="tigre"/><label for="tigre">Tigre&nbsp;&nbsp;&nbsp; </label>
<input type="checkbox" name="animal" id="guepardo" value="guepardo"/><label for="guepardo">Guepardo&nbsp;&nbsp;&nbsp; </label>
<input type="checkbox" name="animal" id="jaguar" value="jaguar"/><label for="jaguar">Jaguar</label>
<label for="email"><span>Correo Electrónico: </span><input id="email" type="text" name="email"/></label>
<label>
<input type="submit" value="Enviar"/>
<input type="reset" value="Cancelar"/>
</label>
</div>
</form>
</body>
</html>

Gracias.

214
Aquí hago la siguiente entre del ejercicio CU01128E del curso JavaScript desde cero.

Las respuestas del ejercicio están en el código como comentarios.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Curso JavaScript</title>
<style type="text/css">
body {
background-color: white;
font-family: sans-serif;
}
label {
color: maroon;
display: block;
padding: 5px;
}
.cambiarLengua {
border: solid;
float: left;
margin: 5px;
cursor: pointer;
}
</style>
<script type="text/javascript">
function cambiarAspecto(elemento){
var elementosObtenidos=document.getElementsByTagName(elemento);
elementosObtenidos[0].firstChild.firstChild.nodeValue='Name:';
elementosObtenidos[1].firstChild.firstChild.nodeValue='Surname:';
elementosObtenidos[2].firstChild.firstChild.nodeValue='E-mail:';
}
function cambiar(elemento){
var elementos=document.getElementsByTagName(elemento);
elementos[0].firstChild.nodeValue='Nombre:';
elementos[1].firstChild.nodeValue='Apellidos:';
elementos[2].firstChild.nodeValue='Correo Electrónico:';
}
</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 -->
<div style="width: 450px;">
<form name="formularioContacto" class="formularioTipo1" method="get" action="accion.html"
/>
<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"/></label>
<label for="apellidos"><span>Apellidos:</span><input id="apellidos" type="text" name="apellidos"/></label>
<label for="email"><span>Correo electrónico:</span><input id="email" type="text" name="email"/></label>
<label>
<input type="submit" value="Enviar"/><input type="reset" value="Cancelar"/>
</label>
</div>
<div class="cambiarLengua" onclick="cambiarAspecto('label')" >Cambiar a Inglés</div>
<div class="cambiarLengua" onclick="cambiar('span')">Cambiar a Español</div>
</body>
</html>

<!-- Si pasaramos como parámetros div, input, h1 y h2, en vez de label, en algunos casos no se usan los tres índices del array, porque no hay tres etiquetas h1, h2 o div. Si hay más índices que elementos, como en el presente caso, para los que no hay etiquetas, simplemente no se usan. -->

<!-- El ejercicio pedía sólo que modificaramos el código con tal finialidad de cambiar el nodeValue a los etiquetas span a Inglés. En el código que propongo como solución del ejercicio también cambio a Español los nodeValue de los etiquetas span. -->

Gracias.

215
Códigos del primer ejercicio:

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Curso Java</title>
<script type="text/javascript" src="CU01122E(1).js"></script>
<style>
div {
float: left;
border: solid;
width: 20%;
margin: 5%;
font-size: 110%;
color: white;
padding: 5%;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div style="background-color: black;" onclick="obtenerImporteConImpuestos(100,1);">IVA 21%</div>
<div style="background-color: red;" onclick="obtenerImporteConImpuestos(100,2);">IVA 10%</div>
<div style="background-color: green;"onclick="obtenerImporteConImpuestos(100,3);">IVA 5%</div>
</body>
</html>

Código JavaScript: "CU01122E(1).js"

Código: [Seleccionar]
function obtenerImporteConImpuestos(importeSinImpuestos,a){
var msg;
msg=('El importe sin impuestos es: '+importeSinImpuestos+'\n\n');
if(a==1){
alert(msg+'El importe con impuestos es:'+ivaA(importeSinImpuestos));
}else if(a==2){
alert(msg+'El importe con impuestos es:'+ivaB(importeSinImpuestos));
}else if(a==3){
alert(msg+'El importe con impuestos es:'+ivaC(importeSinImpuestos));
}
}

function ivaA(importeSinImpuestos){
var importeConImpuestos;
importeConImpuestos=importeSinImpuestos*1.21;
return importeConImpuestos;
}

function ivaB(importeSinImpuestos){
var importeConImpuestos;
importeConImpuestos=importeSinImpuestos*1.10;
return importeConImpuestos;
}

function ivaC(importeSinImpuestos){
var importeConImpuestos;
importeConImpuestos=importeSinImpuestos*1.05;
return importeConImpuestos;
}

Los códigos del segundo ejercicio:

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Curso Java</title>
<script type="text/javascript" src="CU01122E(2).js"></script>
<style>
div {
float: left;
border: solid;
width: 20%;
margin: 5%;
font-size: 110%;
color: white;
padding: 5%;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div style="background-color: black;" onclick="alert(obtenerImporteConImpuestos(100));">Ver ejercicio</div>
</body>
</html>

Código JavaScript: "CU01122E(2)"

Código: [Seleccionar]
function obtenerImporteConImpuestos(importeSinImpuestos){
var resultado;
resultado=[];
resultado[0]=undefined;
resultado[1]=importeSinImpuestos*1.21;
resultado[2]=importeSinImpuestos*1.10;
resultado[3]=importeSinImpuestos*1.05;
return ('Para precio sin impuestos'+importeSinImpuestos+' si el producto es tipo 1 el importe es '+resultado[1]+' , si el producto es tipo 2 el importe es '+resultado[2]/100+' y si el producto es tipo 3 el importe es '+resultado[3]);
}

Saludos.

216
Aquí dejo los códigos del ejercicio CU01121E del curso JavaScript desde cero.

Código HTML:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="description" content="Curso JavaScript"/>
<meta name="keywords" content="programar,cursos"/>
<title>Curso JavaScript</title>
<script type="text/javascript" src="CU01121E.js">
</script>
</head>
<body>
<div>
<p>Aquí un párrafo de texto situado antes de la imagen, dentro de un div contenedor.</p>
<img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto"/>
<p onclick="alert('Alerta JavaScript');" style="background-color: #D2691E;">Aquí otro párrafo de texto. JavaScript es un lenguaje utilizado para dotar de efectos dinámicos a la página web.</p>
</div>
</body>
</html>

Código JavaScript: "CU01121E.js"

Código: [Seleccionar]
var nombre=[];
a=prompt('Introduce un sustantivo');
b=prompt('Introduce un verbo');
c=prompt('Introduce un adverbio (ej.:rápido, lento)');
nombre[0]=a;
nombre[1]=b;
nombre[2]=c;
alert('Has construido esta frase: El/La '+a+' '+b+' '+c);

Gracias.

217
Una posible solución del ejercicio CU01120E del curso JavaScript desde cero.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Curso JavaScript</title>
<script type="text/javascript" src="CU01120E.js">
</script>
</head>
<body>
<div>
<p>Aquí un párrafo de texto situado antes de la imagen, dentro de un div contenedor.</p>
<img onclick="dimeTipoMotor();" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto"/>
<p onclick="alert('Alerta JavaScript');" style="background-color: yellow;">Aquí otro párrafo de texto. JavaScript es un lenguaje utilizado para dotar de efectos dinámicos a la página web.</p>
</div>
</body>
</html>

Y el código JavaScript: "CU01120E.js"

Código: [Seleccionar]
function dimeTipoMotor(){
var tipo;
tipo=prompt('Introduce tipo motor \n (valores posibles: 1, 2, 3 y 4)');
if(tipo==""){alert('No has introducido tipo motor');}
tipo=Number(tipo);
switch(tipo){
case 0: alert('No has establecido un valor definido para el tipo de bomba'); break;
case 1: alert('La bomba es una bomba de agua'); break;
case 2: alert('La bomba es una bomba de gasolina'); break;
case 3: alert('La bomba es una bomba de hormigón'); break;
case 4: alert('La bomba es una bomba de pasta alimenticia'); break;
default: alert('No existe un valor válido para tipo de bomba'); break;
}
}

Saludos.

218
A continuación coloco el códgio del ejercicio CU01119E del curso JavaScript desde cero.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Portal web aprenderaprogramar.com</title>
<script type="text/javascript" src="CU01119E.js">
</script>
</head>
<body>
<div>
<p>Aquí un párrafo de texto situado antes de la imagen, dentro de un div contenedor.</p>
<img onclick="mostrarMensaje1();" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto"/>
<p onclick="alert('Alerta JavaScript');" style="background-color: yellow;">Aquí otro párrafo de texto. JavaScript es un lenguaje utilizado para dotar de efectos dinámicos a la página web.</p>
</div>
</body>
</html>


Y el código JavaScript: "CU01119E.js"

Código: [Seleccionar]
function mostrarMensaje1(){
var a, b;
a=prompt('Diámetro de la rueda');
a=Number(a);
if (a>1.4){
alert('La rueda es para un vehículo grande');
} else if(a<=1.4&&a>0.8){
alert('La rueda es para un vehículo mediano');
} else {
alert('La rueda es para un vehículo pequeño.');
}
b=prompt('Grosor de la rueda');
b=Number(b);
alert('El diámetro que haz introducido es este: '+a+'\n y el grosor este: '+b);
if ((a>1.4&&b<0.4)||(a<=1.4&&a>0.8&&b<0.25)){
alert('El grosor para esta rueda es inferior al recomendado');
}
}

Gracias.

219
El código del primer ejercicio será:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Curso JavaScript</title>
<script type="text/javascript">
function mostrarMensaje1(){
var a, b, c;
A=5;
B=3;
C=-12;
alert('a) Valor de verdad para A>3 es: '+(A>3));
alert('b) Valor de verdad para A>C es: '+(A>C));
alert('c) Valor de verdad para A<C es: '+(A<C));
alert('d) Valor de verdad para B<C es: '+(B<C));
alert('e) Valor de verdad para B!=C es: '+(B!=C));
alert('f) Valor de verdad para A==3 es: '+(A==3));
alert('g) Valor de verdad para A*B==15 es: '+(A*B==15));
alert('h) Valor de verdad para A*B==-30 es: '+(A*B==-30));
alert('i) Valor de verdad para C/B<A es: '+(C/B<A));
alert('j) Valor de verdad para C/B==-10 es: '+(C/B==-10));
alert('k) Valor de verdad para C/B==-4 es: '+(C/B==-4));
alert('l) Valor de verdad para A+B+C==5 es: '+(A+B+C==5));
alert('m) Valor de verdad para (A+B==8)&&(A-B==2) es: '+(A+B==8&&A-B==2));
alert('n) Valor de verdad para (A+B==8)||(A-B==6) es: '+(A+B==8||A-B==6));
alert('o) Valor de verdad para A>3&&B>3&&C<3 es: '+(A>3&&B>3&&C<3));
alert('p) Valor de verdad para A>3&&B>=3&&C<-3 es: '+(A>3&&B>=3&&C<-3));
}
</script>
</head>
<body>
<div>
<p>Aquí un párrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1();" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto"/>
<p onclick="alert('Alerta JavaScript');" >Aquí otro párrafo de texto. JavaScript es un lenguaje utilizado para dotar de efectos dinámicos a las páginas web.</p>
</div>
</body>
</html>

Los resultados mostrados por pantalla coincidieron con lo que había previsto.

El código del segundo ejercicio:

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Curso JavaScript</title>
<script type="text/javascript">
function mostrarMensaje1(){
var a, b;
a='arbol';
b='flor';
alert('a) Valor de verdad para a==b es: '+(a==b));//El resultado es false porque a tiene un valor numérico y b otro diferente.
alert('b) Valor de verdad para a===b es: '+(a===b));//El resultado también es false, porque los dos valores numérico de las dos palabras no son exactamente igual.
alert('c) Valor de verdad para a!==a es: '+(a!==a));//El resultado otra vez es false, porque a es igual a a.
}
</script>
</head>
<body>
<div>
<p>Aquí un párrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1();" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto"/>
<p onclick="alert('Alerta JavaScript');" >Aquí otro párrafo de texto. JavaScript es un lenguaje utilizado para dotar de efectos dinámicos a las páginas web.</p>
</div>
</body>
</html>

Las respuestas están en el mismo código como comentarios.

Gracias.

220
Buenas tardes,

aquí dejo el código del ejercicio CU01116E del curso JavaScript desde cero.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Portal web</title>
<script type="text/javascript">
function mostrarMensaje1(){
var num1, num2, result1, result2, result3;
a=Number(prompt("Introduzca un número, por favor:"));
b=Number(prompt("Ahora otro, por favor:"));
result1=a%5;
alert("El resto (módulo) de dividir "+a+" entre 5 es: "+result1);//Muestra el resto (módulo) de dividir el número introducido entre 5.
result2=a/b;
alert("El resultado de dividir "+a+" entre "+b+" es: "+result2);//Muestra el resultado de dividir el primer número introducido por el usuario entre el segundo. 
alert('El resultado de sumar los dos números es: '+(a+b));//Suma los dos números introducidos por el usuario. No pude hacerlo con el prompt, tenía que utilizar el valor parseInt.
}
</script>
</head>
<body>
<div onclick="mostrarMensaje1();" style="border: solid; border-radius: 40px; background-color: yellow; width: 100%; position: absolute; top: 10%; left: 0;">
<a href="#" style="text-decoration: none; text-align: center; color: black; font-size: 5em;"><p>Haz click aquí para hacer un cálculo simple</p></a>
</div>
</body>
</html>

Saludos.

Páginas: 1 ... 6 7 8 9 10 [11] 12 13 14

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