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

Páginas: [1]
1
Hola Mario, el código para el punto 3. con los valores de src, alt y title definidos usando arrays, es el que he subido en el primer mensaje.

El punto 4. duplicando el body, no lo había subido. Es éste:

Código: [Seleccionar]
<html><head><title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">
<style type="text/css">
body {text-align: center; font-family: sans-serif;}
div {margin:20px;}
#contenedor {width:405px;margin:auto;}
#adelante, #atras {padding:15px; width: 130px; float: left;
color: white; border-radius: 40px; background: rgb(202, 60, 60);}
#adelante:hover, #atras:hover {background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">
var numeroImagenActual =9;
function moverImagen(movimiento) {

var valorsrc; var valoralt; var valortitle; valorsrc=[]; valoralt=[]; valortitle=[];
valorsrc[0]='http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg';
valorsrc[1]='http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_6_humor_informatico_foto.jpg';
valorsrc[2]='http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_11_humor_informatico_foto.jpg';
valoralt[0]='Camiseta 9 aprenderaprogramar.com'; valoralt[1]='Camiseta 6 aprenderaprogramar.com';valoralt[2]= 'Camiseta 11 aprenderaprogramar.com';
valortitle[0]='Diálogo entre informáticos'; valortitle[1]= 'Desbordado por los números'; valortitle[2]='Estudiando programacion';
 
if (numeroImagenActual == 6 && movimiento == 'atras' || numeroImagenActual == 11 && movimiento == 'adelante') {
alert ('No es posible hacer ese movimiento');
}
if (numeroImagenActual == 11 && movimiento == 'atras' || numeroImagenActual == 6 && movimiento =='adelante') {
valorNuevoNumeroImagen = 9;
document.getElementById('imgCarrusel').src = valorsrc[0];
document.getElementById('imgCarrusel').alt = valoralt[0];
document.getElementById('imgCarrusel').title = valortitle[0];
}
if (numeroImagenActual == 9 && movimiento == 'atras') {
valorNuevoNumeroImagen = 6;
document.getElementById('imgCarrusel').src = valorsrc[1];
document.getElementById('imgCarrusel').alt = valoralt[1];
document.getElementById('imgCarrusel').title = valortitle[1];
document.getElementById('numeracion').nodeValue = '99';
}
if (numeroImagenActual == 9 && movimiento == 'adelante') {
valorNuevoNumeroImagen = 11;
document.getElementById('imgCarrusel').src = valorsrc[2];
document.getElementById('imgCarrusel').alt = valoralt[2];
document.getElementById('imgCarrusel').title = valortitle[2];
}
numeroImagenActual = valorNuevoNumeroImagen;
document.getElementById('numeracion').firstChild.nodeValue = 'Camiseta ' + numeroImagenActual;
}
</script>
</head>
<body>
<div>
<p>Pulsa adelante o atrás</p>
<h1 id="numeracion">Camiseta 9</h1>
<img id="imgCarrusel" src="http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg" alt="Camiseta 9 aprenderaprogramar.com" title="Diálogo entre informáticos">
<div id="contenedor">
<div id ="atras" onclick="moverImagen('atras')"> <<< Atrás </div>
<div id="adelante" onclick="moverImagen('adelante')" >Adelante >>></div>
</div>
</div>
<div>
<p>Pulsa adelante o atrás</p>
<h1 id="numeracion">Camiseta 9</h1>
<img id="imgCarrusel" src="http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg" alt="Camiseta 9 aprenderaprogramar.com" title="Diálogo entre informáticos">
<div id="contenedor">
<div id ="atras" onclick="moverImagen('atras')"> <<< Atrás </div>
<div id="adelante" onclick="moverImagen('adelante')" >Adelante >>></div>
</div>
</div></body></html>


Muchas gracias por tus comentarios

2
Respuestas al ejercicio CU01127E del curso aprender JavaScript como si estuviera en primero. En el ejercicio CU01127E creo que he hecho bien el poner los atributos de la imagen en una Array.

Citar
1.Comprueba que el código anterior te permite cambiar la imagen que se muestra haciendo uso de los botones.

Respuesta: Sí, comprobado que funciona.


Citar
2. En el código anterior hay una declaración de variables (var numeroImagenActual =9;) que no está dentro de una función. ¿Por qué crees que se ha hecho esto así? Prueba a colocarla dentro de la función, comprueba qué ocurre y razona el por qué.

Respuesta: Al sacar la línea var numeroImagenActual =9; de la función, una vez que desaparece la camiseta 9 ya no vuelve. Con adelante - atrás, sólo pasas de la 6 a la 11. Pues por muchas vueltas que le de, no tengo ni idea de por qué es esto así...

Citar
3. Modifica el código anterior para que en lugar de definirse src, alt y title para cada imagen dentro de los if, se definan estos valores usando arrays declarados en cabecera de la función. Las asignaciones dentro de los if deberán hacer referencia a los elementos del array y el resultado de ejecución deberá ser el mismo que se obtenía con el código original.

Respuesta:

Código: [Seleccionar]
<html><head><title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">
<style type="text/css">
body {text-align: center; font-family: sans-serif;}
div {margin:20px;}
#contenedor {width:405px;margin:auto;}
#adelante, #atras {padding:15px; width: 130px; float: left;
color: white; border-radius: 40px; background: rgb(202, 60, 60);}
#adelante:hover, #atras:hover {background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">
var numeroImagenActual =9;
function moverImagen(movimiento) {

var valorsrc; var valoralt; var valortitle; valorsrc=[]; valoralt=[]; valortitle=[];
valorsrc[0]='http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg';
valorsrc[1]='http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_6_humor_informatico_foto.jpg';
valorsrc[2]='http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_11_humor_informatico_foto.jpg';
valoralt[0]='Camiseta 9 aprenderaprogramar.com'; valoralt[1]='Camiseta 6 aprenderaprogramar.com';valoralt[2]= 'Camiseta 11 aprenderaprogramar.com';
valortitle[0]='Diálogo entre informáticos'; valortitle[1]= 'Desbordado por los números'; valortitle[2]='Estudiando programacion';
 
if (numeroImagenActual == 6 && movimiento == 'atras' || numeroImagenActual == 11 && movimiento == 'adelante') {
alert ('No es posible hacer ese movimiento');
}
if (numeroImagenActual == 11 && movimiento == 'atras' || numeroImagenActual == 6 && movimiento =='adelante') {
valorNuevoNumeroImagen = 9;
document.getElementById('imgCarrusel').src = valorsrc[0];
document.getElementById('imgCarrusel').alt = valoralt[0];
document.getElementById('imgCarrusel').title = valortitle[0];
}
if (numeroImagenActual == 9 && movimiento == 'atras') {
valorNuevoNumeroImagen = 6;
document.getElementById('imgCarrusel').src = valorsrc[1];
document.getElementById('imgCarrusel').alt = valoralt[1];
document.getElementById('imgCarrusel').title = valortitle[1];
document.getElementById('numeracion').nodeValue = '99';
}
if (numeroImagenActual == 9 && movimiento == 'adelante') {
valorNuevoNumeroImagen = 11;
document.getElementById('imgCarrusel').src = valorsrc[2];
document.getElementById('imgCarrusel').alt = valoralt[2];
document.getElementById('imgCarrusel').title = valortitle[2];
}
numeroImagenActual = valorNuevoNumeroImagen;
document.getElementById('numeracion').firstChild.nodeValue = 'Camiseta ' + numeroImagenActual;
}
</script>
</head>
<body>
<div>
<p>Pulsa adelante o atrás</p>
<h1 id="numeracion">Camiseta 9</h1>
<img id="imgCarrusel" src="http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg" alt="Camiseta 9 aprenderaprogramar.com" title="Diálogo entre informáticos">
<div id="contenedor">
<div id ="atras" onclick="moverImagen('atras')"> <<< Atrás </div>
<div id="adelante" onclick="moverImagen('adelante')" >Adelante >>></div>
</div>
</div></body></html>



Citar
4. Duplica todo el código HTML existente dentro de la etiqueta body, de modo que se muestren dos veces el texto, dos veces la imagen y dos veces los botones. Cuando pulsas el botón situado debajo de la imagen inferior, ¿qué ocurre? ¿Por qué ocurre esto?

Al duplicar las líneas del body, los botones de la camiseta de abajo sólo mueven a la de arriba. Las dos tienen el mismo id, por lo que creo que tendrían que moverse las dos con cualquiera de los botones. Así que si esto no pasa, supongo que es debido a que la función encuentra el primer elemento con el id solicitado y ya no sigue buscando, sino que ejecuta en él las instrucciones ignorando al que venga detrás.


3
Muchas gracias Mario, me gusta mucho tu propuesta sobretodo porque al englobar las dos cajas centrales en un div #central evitamos todos los problemas que yo he tenido para colocar cada cajita en su sitio. 
Gracias!

4
Gracias, todo está claro. Y tienes toda la razón, debería haber contestado en el post anterior y no lo he hecho, lo arreglo enseguida.
Y muchas gracias por la ayuda que nos prestáis a los novatos en este foro. Estoy aprendiendo muchísimo gracias a vosotros.
 

5
si pongo doble ++ no se ejecuta el script  :-\

6
Ja!
En el siguiente capítulo viene el truco:

numeroA=Number(numeroA);
numeroB=Number(numeroB);

Pero es necesario esto siempre? En otros ejercicios he obtenido la suma sin este truco, sigo sin saber qué he hecho mal en el ejercicio...
 :( :(

7
Hola a todos. Estoy con el curso de Javascript desde cero y es un ejercicio en principio muy simple, me hace bien todas las operaciones y al llegar a la suma, en vez de sumar concatena los números.
Por mucho que lo miro no lo pillo.   :-\
Gracias por vuestra ayuda!
un saludo
Arantza

8
Envío el ejercicio a ver si alguien está en ello y lo ve bien o propone otra solución más fácil.

Gracias!

Código HTML:

Código: [Seleccionar]
<html>
<head>
<title>hoja con cajas float</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="prueba css11.css">
</head>
<body>
<div id="contenedor">
<div id="div1">Bienvenidos a aprenderaprogramar.com</div>
<div id="div2">Menú
<ul>
<li>Cursos</li>
<li>Humor</li>
<li>Divulgación</li>
</ul></div>
<div id="div3">Conoce las últimas novedades del lenguaje JavaScript.</div>
<div id="div4">Espacio reservado para publicidad</div>
<div id="div5">Artículo sobre Gimp, un programa de software libre para el diseño gráfico.</div>
<div id="div6">Contacta con nosotros</div>
<div id="div7">Aviso legal</div>
</div>
</body>


Código CSS:

Código: [Seleccionar]
/* estilos prueba css11*/
*{ font-family:Arial}
#contenedor{width: 600px; height: 200px;}
div{border: solid grey 2px; padding: 2px; margin: 1px;}
/*anchura div1: 600 -padding6 -border4 =590*/
#div1{width:590px; text-align: center; height: 30px}
/*anchura div2= 590/4=147*//*altura div2=200 -div1 30 -div6 30 -border12 -margin5 -padding12= 125*/
#div2 {width: 150px; height: 111px; float: left; text-align: center;}
/*anchura div3= 590 -div 146 -div5 146 -border12 -margin5 -padding12=269*/
/*altura div3=111/2=55 -border6 =49*/
#div3{width: 269px; height: 51px; float:left; text-align: center; background-color: #ADD8E6;}
#div4{width: 151px; height: 111px; float:right; text-align: center;}
#div5{width: 269px; height: 50px; float:left; text-align: center; background-color: #90EE90;}
/*anchura div6y7=590/2= 295 -border4 -margin2= 289*/
#div6{width: 290px; height: 30px; CLEAR:left; text-align: center; background-color: #DDA0DD;float: left;}
#div7{width: 290px; height: 30px; text-align: center;float: right;}

Páginas: [1]

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".