[SOLUCIONADO] Problema con variables globales!

berkeleyPunk · #1 (**permalink**) 09/05/2014, 21:09

Buena noche.

Hasta donde entiendo, una variable es global si se declara fuera de un ámbito cualquiera; o sea, fuera de {}. Y local si se declara dentro de {}.

¿Existen restricciones al respecto o por qué a veces me funcionan las variables globales y a veces no?

Un ejemplo de cuándo funcionan bien se encuentra aquí . Pero he aquí mi código:

Código Javascript:

Ver originalinputA = document.getElementById("inputA"); // Y es indiferente si las declaro o no con "var".
inputB = document.getElementById("inputB");
 
    function x()
    {
        inputA.style.display = "none";
        inputB.style.color = "red";
    }

Por ejemplo, si llamo la función al hacer clic en algún lado, el inputA y el inputB no modifican su estilo, es decir, no jala la función. Ésta funciona sólo si las variables se declaran en su interior.

¿No quedamos que si las declaro fuera de cualquier ámbito, en este caso fuera de la función x(), son globales?

Saludos!

Alexis88 · #2 (**permalink**) 09/05/2014, 22:15

Solo por curiosidad, ¿Ejecutas esa función o la dejas así? Porque probé ejecutándola y funciona bien. El tema del ámbito es correcto, solamente tienes que ejecutarla. Puedes hacerlo de cualquiera de estas dos maneras:

Código Javascript:

Ver original//Función autoejecutable
(function x()
{
    inputA.style.display = "none";
    inputB.style.color = "red";
})();
 
//Forma tradicional
x();

Saludos

berkeleyPunk · #3 (**permalink**) 09/05/2014, 22:43

Cita:

Iniciado por Alexis88

Solo por curiosidad, ¿Ejecutas esa función o la dejas así? Porque probé ejecutándola y funciona bien...

Qué pasó maestro!

Tienes razón maestro, traté de ser tan breve, que me pasé

.

Pero el siguiente código no funciona:

Código Javascript:

Ver originalinputA = document.getElementById("inputA"); // Y es indiferente si las declaro o no con "var".
    inputB = document.getElementById("inputB");
 
    function x()
    {
        inputA.style.display = "none";
        inputB.style.color = "red";
    }
    function y()
    {
        inputA.style.visibility = "hidden";
        inputB.style.color = "green";
    }

Código HTML:

Ver original<a href="#n" onclick="return x()">CLIC 1</a>
    <a href="#n" onclick="return y()">CLIC 2</a>
 
    <input id="inputA" value="HOLA 1" />
    <input id="inputB" value="HOLA 2" />

Alexis88 · #4 (**permalink**) 09/05/2014, 22:50

¿Y de casualidad incluyes al archivo JS en la cabecera o antes de la etiqueta </body>? Porque si fuera lo primero, todo el código debería de ejecutarse luego de cargar la ventana, para lo cual tendrías que colocarlo dentro de una función.

Código Javascript:

Ver original//Forma 1
window.addEventListener("load", function(){
    //Código del script
}, false);
 
//Forma 2
window.onload = function(){
    //Código del script
};

Esto es porque si el archivo JS es incluido en la cabecera del documento HTML y el código que contiene dicho archivo, no lo colocas en una función como las 2 que muestro, entonces nada de dicho archivo JS surtirá efecto en el documento HTML. Personalmente, prefiero colocar mis scripts justo antes de la etiqueta </body>.

Y disculpa por lo otro, no fue con ánimos de ofender, solo pregunté por si las moscas.

Saludos

berkeleyPunk · #5 (**permalink**) 09/05/2014, 23:07

Cita:

Iniciado por Alexis88

¿Y de casualidad incluyes al archivo JS en la cabecera o antes de la etiqueta </body>?...

Justo antes que postearas esto, Alexis88, modifiqué la réplica que tú contestas. Ahí puse un código, que ciertamente no funciona y que se parece más al código que en verdad estoy trabajando.

Hice mis pruebas con este nuevo código y veo que tienes razón, sí funciona si pongo el javascript hasta abajo.

Esta jugada, de poner el JS hasta abajo del documento, ¿funciona igual si el JS lo incluyes mediante un archivo externo? ¿O sea, poner el <script type="text/javascript" src="js.js"></script> hasta abajo, y no en dentro del <head>?

Lo pregunto porque esto fue lo que intenté con mi código original, pero no me funcionó. De cualquier forma, ahora veo dónde está el conflicto. ¡Y juro que no me vuelve a pasar

!

Te reitero la pregunta: ¿Esta jugada funciona igual si el JS lo incluyes mediante un archivo externo?

Alexis88 · #6 (**permalink**) 09/05/2014, 23:19

Claro, ya que al incluir un archivo externo, incluyes a su código, en otras palabras, es como si hicieras un copy/paste de dicho código en tu documento HTML. Particularmente, siempre incluyo a mis archivos JS justo antes de la etiqueta </body>, ahí no hay pierde.

Saludos

berkeleyPunk · #7 (**permalink**) 09/05/2014, 23:39

Ok, seguro el problema es el que comentas.

El problema es que no logro hacer funcionar el código en el que trabajo. Y es que en éste la cosa se complica un poco más. Seré breve, por si acaso tienes algo que comentar.

Si al abrir index.php existe la variable A, entonces se hace un include de un php que muestra cierto contenido. Si al abrir index.php existe la variable B, entonces se hace otro include...

El php que se incluye con el include en el 1er caso, muestra un formulario sencillo en AJAX...

En pocas palabras, hay includes por todos lados y archivos que llaman otros archivos, así que la cosa resulta un poco más complicada, ya que no puedo simplemente poner el Javascript en el fondo del documento del index, porque, y ya lo hice, no funciona.

Ya puse el <script type="text/javascript" src="js.js"></script> al final de cada archivo que meto con include, y nada.

Alexis88 · #8 (**permalink**) 09/05/2014, 23:44

¿En la consola se muestra algún mensaje de error? Y si no es así, coloca una alerta en el código JS que debería funcionar, para ver qué está sucediendo. Y por si las moscas, ¿En qué archivo están los campos que deseas afectar, en el archivo actual o en los que incluyes?

Italico76 · #9 (**permalink**) 10/05/2014, 10:14

Que pena si me meto mal....... tambien soy nuevo en JS... probé la sugerencia de @Alexis88 de usar el evento Onload() y me fue perfecto:

Código Javascript:

Ver original<html>
<head>
<script language="JavaScript">
    
    function al_cargar()
    {
    var inputA = document.getElementById("inputA"); 
    var inputB = document.getElementById("inputB");
    }
    
    function x()
    {       
        inputA.style.display = "none";
        inputB.style.color = "yellow";
        alert('Entre');
    }
</script>
</head>
<body onload="al_cargar();">
    <a href="#n" onclick="x()">CLIC 1</a>
    <a href="#n" onclick="x()">CLIC 2</a>
 
    <input id="inputA" value="HOLA 1" />
    <input id="inputB" value="HOLA 2" /></p>
</body>
</html>

berkeleyPunk · #10 (**permalink**) 10/05/2014, 12:15

Cita:

Iniciado por Italico76

...probé la sugerencia de @Alexis88 de usar el evento Onload() y me fue perfecto...

Qué onda Italico76. Sí, funciona la recomendación de Alexis88, pero si complicamos el ejemplo, como mencioné más arriba, metiendo includes por otros lados, ya no.

Acabo de encontrar otro ejemplo de problema con las variables globales

. Esto:

Código HTML:

Ver original<html>
<head>
    <title></title>
</head>
<body>
    <b id="texto" onmouseover="x()">Poner el cursor aquí</b>
 
    <script type="text/javascript">
        var x = document.getElementById("texto");
 
        function x()
        {
            x.style.color = "red";
        }
    </script>
</body>
</html>

Esto no sirve (y conste que el script está en el fondo del doc). Sólo funciona si se declara la variable x dentro de la función. Alexis88, ¿puedes explicar esto?

En la consola sale un error no detectado:
Uncaught ReferenceError: x is not defined y.html:6
onmouseover

Italico76 · #11 (**permalink**) 10/05/2014, 12:19

Master @berkeleyPunk

Me vuelvo a meter... los includes() en PHP no tienen nada que ver....... excepto estes metiendo tambien codigo JS ahi por ejemplo

Seria bueno saber que incluyes y en que parte lo haces (arriba, abajo ?)

marlanga · #12 (**permalink**) 10/05/2014, 12:36

En javascript no existen el ámbito de las variables, existen "closures" que es un concepto muy parecido pero mucho más complicado (y que permite a la vez códigos increíblemente potentes imposibles de emular en otros muchos lenguajes), idea que se usó por primera vez en el lenguaje SCHEME,de los años 70, y del que javascript coge muchas ideas.
https://developer.mozilla.org/es/doc...Guide/Closures

Las variables que crees sin ponerles un "var" delante, no son variables globales, son atributos que le estás creando al objeto "window", que es uno de los pocos objetos globales de la aplicación.

Código Javascript:

Ver originalvalor1=4;

es lo mismo que

Código Javascript:

Ver originalwindow.valor1=4;

ó

Código Javascript:

Ver originalwindow["valor1"]=4;

Usa siempre "var" en la creación de variables, estén donde estén, así no se las estás metiendo al objeto window, y no perderás el control de tu código.

Por otro lado, para evitar problemas como el que posteas en tu último comentario, olvidate de usar los aributos HTML "style" y "on" + el evento que sea.

Los estilos, a la hoja de estilos SIEMPRE, y el javascript, a su archivo .js o etiqueta <script>, si no quieres cojnseguir un código horrible de seguir y modificar.

Para capturar eventos, usa sus objeto.onloquesea=function(e){ ... }
o objeto.addEventListener u objeto.attachEvent (Explorer viejos).

berkeleyPunk · #13 (**permalink**) 10/05/2014, 12:57

Ok, ok, en mi último comentario mostraba otro problema con las variables globales. Y ya vi cuál es el problema de todo.

Por un lado, Italico76 comentó hace un rato que los includes no tienen nada que ver, a menos que mediante ellos se metiera más JS. Y éste es el caso, así que era posible que sí tuvieran algo que ver.

Por otro lado, resulta que si la función tiene el mismo nombre que la variable que se quiere declarar como global, la cosa va mal. Por eso en el código que puse en el último comentario que hice, no funciona el javascript.

ocp001a · #14 (**permalink**) 10/05/2014, 12:58

Cita:

Iniciado por berkeleyPunk

Qué onda Italico76.
Acabo de encontrar otro ejemplo de problema con las variables globales

. Esto:

Código HTML:

Ver original<html>
<head>
    <title></title>
</head>
<body>
    <b id="texto" onmouseover="x()">Poner el cursor aquí</b>
 
    <script type="text/javascript">
        var x = document.getElementById("texto");
 
        function x()
        {
            x.style.color = "red";
        }
    </script>
</body>
</html>

Esto no sirve (y conste que el script está en el fondo del doc).

Claro que no sirve, se crea la variable x y luego se trata de sobre escribir como función.

Algo así resuelve el problema

Código Javascript:

Ver originalvar y = document.getElementById("texto");
 
        function x()
        {
            y.style.color = "red";
        }

No sé con qué depures, pero si usas firebug te será de mucha utilidad.

berkeleyPunk · #15 (**permalink**) 10/05/2014, 13:12

Cita:

Iniciado por ocp001a

Claro que no sirve, se crea la variable x y luego se trata de sobre escribir como función...

Eso es lo que descubrí un segundo antes que postearas esto, ocp001a, y gracias por responder.

Pero uno pensaría que lo que comentas no debería ser así. Lo digo por lo siguiente. Primero informo en el script que voy a declarar una variable, var x. Y después informo que voy a decalrar una función, function x(). Como digo, uno pensaría que no debería haber confusión ni error, porque aunque ambas cosas lleven el mismo nombre, son tipos distintos.

Digo, uno pensaría que habría problema si después de poner el código como lo puse, añadiéramos, no sé, algo como:

Código Javascript:

Ver originalvar x = x();

¿No?

marlanga · #16 (**permalink**) 10/05/2014, 13:21

No son de distinto tipo. En JS, prácticamente todo son objetos, incluidas las funciones.

Italico76 · #17 (**permalink**) 10/05/2014, 13:27

Cita:

Iniciado por berkeleyPunk

Digo, uno pensaría que habría problema si después de poner el código como lo puse, añadiéramos, no sé, algo como:

Código Javascript:

Ver originalvar x = x();

¿No?

Quizas por ser dinamicamente tipado.....

Código Javascript:

Ver originalx = 5;
x = 'Hola Mundo';
alert(x);  // no hay error, sale "Hola Mundo"

Como Ud dice la funcion x, no es mas que un tipo de datos mas......

---
Sorprendente para mi tambien :)

Aca lo mismo, una vez mas...... descomentando x = ... y no imprime nada.

Código Javascript:

Ver original<html>
<head>  
    <script language="JavaScript">
        function al_cargar()
        {
            function x(){
                return 'Hi world';
            }
            //x = 5;
            //x = 'Hola Mundo';
            alert(x());
                
        }       
    </script>   
</head>
<body onload="al_cargar();">
    
</body>
</html>

Italico76 · #18 (**permalink**) 10/05/2014, 13:34

Cita:

Iniciado por marlanga

No son de distinto tipo. En JS, prácticamente todo son objetos, incluidas las funciones.

Ud sabe muchisismo..... y de hecho estoy aprendiendo de sus comentarios pero le voy a hacer una mini-corrección:

Objetos de distintas clases (incluidas funciones como ud dice) son tipos distintos

marlanga · #19 (**permalink**) 10/05/2014, 13:59

Bueno, el padre de todos los objetos de javascript es el objeto Object, así que todo queda en familia.

jp91 · #20 (**permalink**) 14/05/2014, 15:08

Mmmmmm en javascript todo actua como un objeto las unicas exepciones son null y undefined, practicamente en js no hay clases, eso solo lo hacen porque es un modelo al cual mucha personas estan acostumbradas, una funcion tiene una clase interna pero mas bn es una propiedad llamada Function y de tipo function, un objeto propiedad Object tipo object .