« anterior próximo »
Páginas: [1]

Autor Tema: JavaScript las variables que se declaran sin "var" son globales ámbito CU01127E  (Leído 3504 veces)

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
JavaScript las variables que se declaran sin "var" son globales ámbito CU01127E
« en: 31 de Enero 2016, 00:37 »
Bueans tardes.

Tengo una duda sobre el siguiente código:

Código: [Seleccionar]
<html><head><title>Curso JavaScript</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){
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='http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg';
document.getElementById('imgCarrusel').alt='Camiseta 9 aprenderaprogramar.com';
document.getElementById('imgCarrusel').title='Diálogo entre informáticos';
}
if(numeroImagenActual==9&&movimiento=='atras'){
valorNuevoNumeroImagen=6;
document.getElementById('imgCarrusel').src='http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_6_humor_informatico_foto.jpg';
document.getElementById('imgCarrusel').alt='Camiseta 6 aprenderaprogramar.com';
document.getElementById('imgCarrusel').title='Desbordado por los números';
}
if(numeroImagenActual==9&&movimiento=='adelante'){
valorNuevoNumeroImagen=11;
document.getElementById('imgCarrusel').src='http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_11_humor_informatico_foto.jpg';
document.getElementById('imgCarrusel').alt='Camiseta 11 aprenderaprogramar.com';
document.getElementById('imgCarrusel').title='Estudiando programacion';
}
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>
Cómo en la function moverImagen() se sabe exactamente la variable  numeroImagenActual" qué valor tiene? Es verdad que en el principio de la function le damos un valor que es igual a 9, pero luego, conforme se vaya cambiando la imágen, cómo sabe el navegador que cuando la imagen es la sexta el valor de la variable "numeroImagenActual" también tiene que cambiar a 6?

Al final de la funtion es verdad que se hace una equiparación entre las variables "numeroImagenActual" y valorNuevoNumeroImagen (numeroImagenActual=valorNuevoNumeroImagen), pero esto sólo es para que el navegador imprima conforme se vaya cambiando la imagen.

Agradecería que alguien me explicara este tema, porque no lo entiendo.

Gracias antemano. Atentamente, dimiste.
« Última modificación: 02 de Febrero 2016, 13:56 por Ogramar »
En línea

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:function JavaScript CU01127E JavaScript
« Respuesta #1 en: 31 de Enero 2016, 02:53 »
Hola dimiste.

numeroImagenActual al estar declarada fuera de una función, se dice que es de ámbito global, es decir, que desde cualquier parte del código javascript tendremos acceso a ella.

numeroImagenActual irá guardando el valor que le damos desde la función moverImagen(), pero no se inicializará cada vez que accedamos a la función moverImagen(), sino que mantendrá el último valor que se le halla dado.

Espero que te valga.
Saludos.

En línea

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
Re:function JavaScript CU01127E JavaScript
« Respuesta #2 en: 31 de Enero 2016, 14:31 »
Gracias por contestarme,

Pedro.

Pero, y qué pasa con la variable "valorNuevoNumeroImagen"? Esta ni siquiera se ha declarado como una variable en la funtion. Y al final de la funtion pone: "numeroImagenActual=valorNuevoNumeroImagen". Eso quiere decir que el navegador volverá a leer otra vez la función y allí donde está la variable "numeroImagenActual" le dará valor como si fuera "valorNuevoNumeroImagen"? Estoy un poco liado con esto.

Porque entiendo que las condicionales "if" están basadas en unas variables y si se cumplen se ejecutará una orden u otra. Pero como va cambiando el valor de la variable "numeroImagenActual"? Mediante los valores que se estén guardando en la variable "valorNuevoNumeroImagen"?

Gracias antemano.

Atentamente,

dimiste.
En línea

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
Re:function JavaScript CU01127E JavaScript
« Respuesta #3 en: 31 de Enero 2016, 15:34 »
Leyendo los demás hilos del ejercicio he llegado a la siguiente conclusión.

1) El código se me ejecuta perfectamente (eso lo he descubierto sin ayuda de los demás hilos, jejeje).

2) Se declara fuera de la funtcion para que no se iniciliza la variable "nuevoImagenActual=9" siempre que demos a los botones "atrás" o "adelante". Si la colocamos dentro de la función (function) siempre la variable "nuevoImagenActual" valdrá 9.

3) El código con los arrays será el siguiente:

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, valorAlt, valorTitle;
valorSrc=[];
valorAlt=[];
valorTitle=[];
valorSrc=['http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_6_humor_informatico_foto.jpg','http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg','http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_11_humor_informatico_foto.jpg'];
valorAlt=['Camiseta 6 aprenderaprogramar.com', 'Camiseta 9 aprenderaprogramar.com', 'Camiseta 11 aprenderaprogramar.com'];
valorTitle=['Desbordado por los números', 'Diálogo entre informáticos', '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[1];
document.getElementById('imgCarrusel').alt=valorAlt[1];
document.getElementById('imgCarrusel').title=valorTitle[1];
}
if(numeroImagenActual==9&&movimiento=='atras'){
valorNuevoNumeroImagen=6;
document.getElementById('imgCarrusel').src=valorSrc[0];
document.getElementById('imgCarrusel').alt=valorAlt[0];
document.getElementById('imgCarrusel').title=valorTitle[0];
}
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>
(Para esta respuesta me han ayudado los hilos del ejercicio y sobre todo los de Pedro (en los foros consta como :pedro (en minúscula))).

https://www.aprenderaprogramar.com/foros/index.php?topic=3264.msg14401#msg14401

4) Al dubplicar el cuerpo del código y pulsar a los botones de abajo, lo que cambia es la imagen de arriba. Esto ocurre, porque los dos botones llevan el mismo id y la función actua sobre el primer id que encuentra.

El código quedará de la siguente manera:

Código: [Seleccionar]
<html><head><title>Curso JavaScript</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){
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='http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg';
document.getElementById('imgCarrusel').alt='Camiseta 9 aprenderaprogramar.com';
document.getElementById('imgCarrusel').title='Diálogo entre informáticos';
}
if(numeroImagenActual==9&&movimiento=='atras'){
valorNuevoNumeroImagen=6;
document.getElementById('imgCarrusel').src='http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_6_humor_informatico_foto.jpg';
document.getElementById('imgCarrusel').alt='Camiseta 6 aprenderaprogramar.com';
document.getElementById('imgCarrusel').title='Desbordado por los números';
}
if(numeroImagenActual==9&&movimiento=='adelante'){
valorNuevoNumeroImagen=11;
document.getElementById('imgCarrusel').src='http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_11_humor_informatico_foto.jpg';
document.getElementById('imgCarrusel').alt='Camiseta 11 aprenderaprogramar.com';
document.getElementById('imgCarrusel').title='Estudiando programacion';
}
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 style="clear: both" ></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>
</div>
</body>
</html>
Gracias a todos los que han visto este hilo y al Pedro por la ayuda.

Saludos,

dimiste.
En línea

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:function JavaScript CU01127E JavaScript
« Respuesta #4 en: 31 de Enero 2016, 17:27 »
Buenas,,

En cuanto a lo que comentas sobre valorNuevoNumeroImagen, pues decirte que también está declarada con ámbito global. Las variables que se declaran sin "var" dentro de una función, son variables de ámbito global también.  En el momento que haces "valorNuevoNumeroImagen=9;", ya está declarando la variable. Esto lo verás en el curso, pero más adelante.

En la función solo se entrará cada vez que pulses sobre "adelante" o "atrás".
Y numeroImagenActual irá cogiendo el valor que valorNuevoNumeroImagen le vaya asignando, que dependerá del if en el que se entre.

 ;D

En cuanto a la tus respuestas del ejercicio decirte que las veo bien.

Saludos.


 
« Última modificación: 31 de Enero 2016, 17:36 por pedro,, »
En línea

Dimitar Stefanov

  • Experto
  • *****
  • Mensajes: 598
    • Ver Perfil
Re:function JavaScript CU01127E JavaScript
« Respuesta #5 en: 31 de Enero 2016, 19:22 »
Gracias por la corrección y por la explicación, Pedro.

Poco a poco veo la luz, jejejeje. Evidentemente con ayuda de gente como tu!!!

Saludos y gracias
En línea
Páginas: [1]
« anterior próximo »
 

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