[SOLUCIONADO] Dudas Javascript

Italico76 · #1 (**permalink**) 23/05/2014, 05:59

Buenas compañeros, me van a disculpar pero quiero terminar de entender algunos conceptos y ojala me puedan ayudar; no me da pena preguntar porque soy novato :)

1) Variables globales : el modelo de eventos favorece las variables globales ?

He notado que es practica comun (mucho mas que en otros lenguajes) mantener variables globales entre funciones, asi por ejemplo las funciones inicializadoras llamadas por onload() crean una cantidad de variables globales.

El objeto window es de alcance global tambien.

2) Jerarquia de objetos ?

Entiendo que no hay clases como tal sino prototipos, entonces la relacion entre window, window.screen, window.document es de herencia del prototipos ?

Gracias desde ya

mnocturno · #2 (**permalink**) 23/05/2014, 06:27

Buenas!!

Las variables locales totalmente desaconsejado, en js o en cualquier otro. Usar parámetros a diestro y siniestro. Bien es cierto que con los eventos da el "tic" de usarlas, pero no.

En cuanto a la jerarquia de objetos, igual estoy en un error (también ando de "novatada"), pero es cosa del DOM que se genera con el HTML.

Otra cosa es que para hacer POO con Javascript, se use esto de los prototipos para emular una clase.

Precisamente sobre el window.onload voy a preguntar, y aprovecho este hilo.

tengo un script principal con un window.onload que llama a unas funciones que están en otro script. Y No rula. No rula porque esas funciones acceden a elementos HTML con el consabido getElementByID.

Si pongo todo dentro del .onload, bien, funciona. Pero se me va a quedar un script de taintas miles lineas como siga así.

Yo pensaba que al poner llamadas a funciones de otros scripts dentro de .onload, pues ya estabá cargada la página y por tanto se puede referenciar los elementos HTML.

Obviamente llamo a los scripts en el head. Primero al principal, y después a los otros.

¿Que puede ser?

mnocturno · #3 (**permalink**) 23/05/2014, 07:21

Se me olvidó poner el código:

En el HTML:

<head>
.....
<script src="..../scriptprincipal.js"></script>
<script src="..../oyente.js"></script>
<script src="..../calendario.js"></script>
...
</head>

En el scriptprincipal:

window.onload=function() {
calendario();
oyente();
}

Y en el script caldendario.js

function calendario() {
.....
}

Italico76 · #4 (**permalink**) 23/05/2014, 07:56

@mnocturno : como dices el DOM debe estar cargado para que tenga sentido inicializar funciones.

Como dicen aca "window.onload is rarely used, because no one wants to wait until all resources load, especially for large pictures." , hecho asi.. esas funciones seran las ultimas en ser llamadas (despues de cargar hasta la ultima imagen)

Me parecio interesante el articulo:

http://javascript.info/tutorial/onlo...mcontentloaded

mnocturno · #5 (**permalink**) 23/05/2014, 08:27

Pues ahí está la cuestión. A mí si me interesa que se haya cargado toda la página (mis imagenes son pocas y pequeñas) para poder precisamente meter mano a los elementos HTML con el getDocumentByID. Es decir, que mi función se inicie cuando ya está creado el DOM de la página, que es lo que se supone que hace window.onload.

No se, igual tengo un problema de "concepto". A ver si alguien nos da un remedio.

Precisamente ahora estaba leyendo sobre los "oyentes" de eventos (de ahí mi script "oyente") para el tema de javascript "no obstrusivo". Ya que estoy empezando, pues hacerlo bien desde el principio.

jp91 · #6 (**permalink**) 23/05/2014, 08:57

@italico76 las variable globales las puedes manejar creando un objeto global y a partir de ahi crear propiedades o metodos.

Código Javascript:

Ver originalvar global = {};
 
global.sumar = function (){
this.numero = 4;
};
 
global.sumar.prototype =
{
suma:function(){}
};

Objeto window se ejecuta en un contexto global puedes hacer varios archivos externos js:

Código Javascript:

Ver original(function () {
  'use strict';
 
  function funciona() {}
 
  funciona.prototype = {
    
    algo: function () {
    }
 
  window['global'] = window['global'] || {};
  window['global'].funciona = funciona;
 
}());

Código Javascript:

Ver originalvar local = window['global'];
local.funciona

el objeto window es creado en cada ventana que abres entonces aqui empieza una jerarquia
window es el padre del cual se desprende document el cual tambien tiene sus propiedades y metodos.

jp91 · #7 (**permalink**) 23/05/2014, 09:03

@mnocturno es simple que la funcion calendario ejecutada en el evento onload reciba como parametro el "id" con el que quieres trabajar.

mnocturno · #8 (**permalink**) 23/05/2014, 09:14

Cita:

Iniciado por jp91

@mnocturno es simple que la funcion calendario ejecutada en el evento onload reciba como parametro el "id" con el que quieres trabajar.

En el html tengo el <div id="calendario">

entonces en window.onload: calendario("calendario");

¿Sería así?

Gracias.

Italico76 · #9 (**permalink**) 23/05/2014, 09:51

@jp91 : has notado que tus ejemplos casi nunca funcionan ?

Agradezco la intencion pero si los pruebo..... siempre me dan error:

Código Javascript:

Ver original(function () {
  'use strict';
 
  function funciona() {}
 
  funciona.prototype = {
    
    algo: function () {
    }
 
  window['global'] = window['global'] || {};
  window['global'].funciona = funciona;
 
}());

En el primer ejemplo tu metodo sumar no hace lo que dice tampoco

Carlangueitor · #10 (**permalink**) 23/05/2014, 10:49

Realmente no entiendo bien tus dudas, pero a ver si puedo aclarar algunas cosas.

Regularmente se trata de minimizar las variables globales, ya que principalmente pueden causar colisiones, entonces es una buena práctica definir un módulo global donde estarán almacenadas tus funciones y variables. Por ejemplo, una manera sencilla sería:

Código Javascript:

Ver original// Declara tu namespace global.
var App = App || {};
 
App.method = function() {
    /* Magic Here */
    console.log("Ponies and Rainbows"); 
};
 
App.method();

Fiddle: http://jsfiddle.net/y6Edp/

O algo mejor sería algo como esto (inspirado en angularjs), te permite tener variables "privadas" y exponer una API de buena manera:

Código Javascript:

Ver original(function (window) {
    var app = (function () {
        return window.app || (window.app = Object());
    })();
 
    app.method = function () {
        /* Magic Here */
        console.log("Ponies and Rainbows"); 
    };
})(window);
 
app.method();

Fiddle: http://jsfiddle.net/2eYmF/

El asunto de la jerarquía de objetos tampoco lo entiendo.

window es el objeto global, que usa la interfaz Window; window.screen y window.document son propiedades de este objeto, no tiene que ver con jerarquias o herencias.

Saludos

Italico76 · #11 (**permalink**) 23/05/2014, 11:03

@Carlangueitor : te agradezco mucho y tambien a @jp91 que creo quizo expresar lo mismo aunque no se lo entendí.

Respecto de la duda original de variables globales.. viene de por ejemplo haber modificado un script para otro forero en el cual ya de por si el codigo original manejaba dos funciones una que inicializaba variables y la otra que las leia y rotaba un texto

Respecto a lo segundo, hasta ahora he trabajado principalmente con PHP donde el modelo POO es de Clases y no de prototipos y tambien leido algun libro de JAVA y es la misma historia: jerarquia de clases.

Que seria una Interfaz en JS ?

Carlangueitor · #12 (**permalink**) 23/05/2014, 11:33

Sigo sin ver el primer problema, el código de ese post simplemente es malo, pero no veo por que el usar eventos te genera variables globales.

Y lo segundo es que no tiene que ver con nada de eso. Simplemente son propiedades. Por ejemplo con PHP sería algo así:

Código PHP:

Ver original<?php
    class Window {
        var $screen = new Screen;
    }
?>

Como ves no emplea nada de jqrarquía de clases ni nada por el estilo.

Y una interfaz en javascript es lo mismo que una interfaz en Java o PHP, es un elemento básico de la programación orientada a Objetos. Aunque la programación sea basada en prototipos y no en classes incluye los elementos de programación orientada objetos básicos (aunque se implementen de distinta manera).

Saludos

Italico76 · #13 (**permalink**) 23/05/2014, 12:10

Gracias @Carlangueitor .. lo habia inferido del post tuyo anterior, entonces:

window es un objeto

screen es otro objeto

window.screen.heigth es una propiedad del objeto screen el cual a su vez esta referenciado dentro de una propiedad del objeto window

Carlangueitor · #14 (**permalink**) 23/05/2014, 12:11

Efectivamente.

Saludos

jp91 · #15 (**permalink**) 23/05/2014, 12:13

Te dan error? ps hay dos pciones o estoy equivocado o tu no has comprendido del todo js y siendo sincero dudo mucho que sea la primera ejejejej, todos mis juegos usan una sintaxis similar o mas complicada , lo que hace @Carlangueitor es la manera de algunos frameworks de hacerte la tarea facil, debido que si quieres comunicar modulos en diferentes archivos js ps eso es una forma.
En mi primer ejemplo solo es cuestion de crear una nueva instancia:

Código Javascript:

Ver originalvar otro = new global.sumar()  //blablabla

En el segundo ejemplo ps si puede que sea mas dificil de entender jjjj pero igual funciona jjjj

jp91 · #16 (**permalink**) 23/05/2014, 12:20

Veamos el significado de jerarquia:
Organización de personas o cosas en una escala ordenada y subordinante según un criterio de mayor o menor importancia o relevancia dentro de la misma.

Aplicando a nuestra contexto , entonces si hay una jeraquia el actual window encabeza la lista , este apunta asi mismo, a window objects, document, navigator,location history, screen etc..., y por ende hay una herencia de objetos.

Carlangueitor · #17 (**permalink**) 23/05/2014, 12:22

Damn! @jp91, no hagas eso, no instancies cada rato un objeto de ese tipo para acceder a funciones, puedes tener un problema de leaks de memoria.

Saludos

jp91 · #18 (**permalink**) 23/05/2014, 12:24

Cita:

Iniciado por mnocturno

En el html tengo el <div id="calendario">

entonces en window.onload: calendario("calendario");

¿Sería así?

Gracias.

Sip asi es:

Código Javascript:

Ver originalfunction algo (id){
var local = document.getElementById(id);
//blablabla
}

o tambien una funcion que retorne el id obtenido:

Código Javascript:

Ver originalfunction obtener(id)        { return document.getElementById(id);  };

Carlangueitor · #19 (**permalink**) 23/05/2014, 12:26

Cita:

Iniciado por jp91

y por ende hay una herencia de objetos.

No, eso da lugar a confusiones. Herencia de objetos, se entiendo como crear una subclase (o sub prototipo) que herede propiedades y/o metodos del padre.

Saludos

jp91 · #20 (**permalink**) 23/05/2014, 12:33

Cita:

Iniciado por Carlangueitor

Damn! @jp91, no hagas eso, no instancies cada rato un objeto de ese tipo para acceder a funciones, puedes tener un problema de leaks de memoria.

Saludos

?????????? Esto es simple:

Código Javascript:

Ver originalEngine.Game.prototype.constructor = Engine.Game;
 
//Engine variable global
Engine.fisica.normal.fuerza = function () {
};
 
Engine.fisica.normal.fuerza.prototype = Object.create(clase.fuerza.prototype);
Engine.fisica.normal.fuerza.prototype.constructor = Engine.fisica.normal.fuerza

;

tranquilo hasta ahora mis juegos corren en pc a 60 fps estables Saludos.

jp91 · #21 (**permalink**) 23/05/2014, 12:36

@Carlangueitor sip puede traer confusiones mejor lo borro pero me estoy refiriendo es la jerarquia en si.

mnocturno · #22 (**permalink**) 23/05/2014, 14:39

Pues lo mío solucionado con lo apuntado por jp91.

Poniendo el parametro en la llamada a la función en el window.onload y la variable local=documet.get..... en la propia función, funciona perfectamente. Y no uso la variable para nada más.

Como en mi función llama a otras funciones que interesan otros divs, no he tenido más que ir "arrastrando" los divs internos de la manera apuntada arriba.

Que cosas. Y ya por curiosidad, ¿a que se debe esto? ¿Que razón "técnica" tiene?

Muchísimas gracias. Con esto he avanzado un montón con mi proyecto.

Y otra preguntita, ya del funcionamiento del foro. ¿Como haceís para poner el código "en bonito"?

jp91 · #23 (**permalink**) 23/05/2014, 16:26

jejej razon tecnica ps nada aqui esta:

El evento load dispara el evento al final del proceso de carga del documento. En este punto, todos los objetos del documento son DOM, y todas las imágenes y sub-frames han terminado de cargarse.

y Para ponder el codigo bonito jejej
escribes el codigo lo seleccionas y luego donde esta el menu despegable "highlight" escoges el lenguaje y listo

mnocturno · #24 (**permalink**) 23/05/2014, 23:13

Ya. Pero me refería a la necesidad de poner el id del div como parámetro, que no funcionara con función() a secas, dado que se supone que ya estaba el DOM hecho.

jp91 · #25 (**permalink**) 24/05/2014, 08:54

Ps en teoria el navegador va descargando y ejecutando, digamos colocar una funcion js en el "head" llamando una etiqueta en el body ps..... ,el navegador lee e interpreta el codigo html antes que las etiquetas por lo tanto cuando se intenta llamar aun no existe. Lo raro es porque a ti no te sirve llamarlo directamente puedes mostrar el codigo de una de tus funciones.

mnocturno · #26 (**permalink**) 25/05/2014, 05:55

Cita:

Iniciado por jp91

Ps en teoria el navegador va descargando y ejecutando, digamos colocar una funcion js en el "head" llamando una etiqueta en el body ps..... ,el navegador lee e interpreta el codigo html antes que las etiquetas por lo tanto cuando se intenta llamar aun no existe. Lo raro es porque a ti no te sirve llamarlo directamente puedes mostrar el codigo de una de tus funciones.

HTML:

Código HTML:

Ver original<div id="calendario">
    <div id="fechaactual"></div> <!-- Div para mostrar la fecha actual -->
    <div id="mesactual"></div> <!-- Div para el mes y el año y los enlaces anterior y posterior -->
    <table id="tabladias">
        <tr id="fila0"><th></th><th></th><th></th><th></th><th></th><th></th><th></th><th></th></tr>
        <tr id="fila1"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr id="fila2"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr id="fila3"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr id="fila4"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr id="fila5"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
        <tr id="fila6"><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
    </table>
    <div id="reloj"></div> <!-- Div para el reloj -->
</div>

script principal:

Código Javascript:

Ver originalwindow.onload=function()
    {
        //Hay que pasar el id del div
        calendario("calendario");
    }

script calendario:

Código Javascript:

Ver originalfunction calendario(calen)
    {
        //var local sirve para que conozca el div donde actuar (si no, no funciona)
        var local=document.getElementById(calen);
        
        var meses=["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"];
        var diasemana=["Domingo","Lunes","Martes","Mi&eacutercoles","Jueves","Viernes","S&aacutebado"];
        var diasemanacorto=["Sem","Lu","Ma","Mi","Ju","Vi","S&aacute","Do"];
        var i, j, celda, fila;
 
        var hoy=new Date();
        var diasemanahoy=hoy.getDay(); //Día de la semana actual
        var diahoy=hoy.getDate(); //Día del mes actual
        var meshoy=hoy.getMonth(); //Mes actual
        var anniohoy=hoy.getFullYear(); //Año actual
        var fila=document.getElementById("fila0");
        var mescal=meshoy; //mes principal para el anterior y el posterior
        var anniocal=anniohoy;// año principal para el anterior y el posterior
        
        var primeromes, prsem, diaprmes, prcelda, empezar;
        var diames, midia, mimes, miannio;
    
        //Rellana la cabecera con la fecha de hoy, el mes y años y los marcadores para cambiar de mes y años
        document.getElementById("fechaactual").innerHTML="Hoy, "+diasemana[diasemanahoy]+" "+diahoy+" de "+meses[meshoy]+" de "+anniohoy;
    
        //Rellena la primera fila de la tabla calendario con los días de la semana de dos letras
        for (i=0;i<8;i++)
            {
            celda=fila.getElementsByTagName("th")[i];
            celda.innerHTML=diasemanacorto[i];
            }
...

jp91 · #27 (**permalink**) 25/05/2014, 07:16

Ps si yo hago esto en la funcion calendario sin necesidad de pasar el parametro funciona:

Código Javascript:

Ver originalvar local=document.getElementById("calendario");

mnocturno · #28 (**permalink**) 25/05/2014, 12:18

Cierto!!!

Nada, ha sido un cruce de cables. O más bien, "la novatada".

Muchísimas gracias.

jp91 · #29 (**permalink**) 25/05/2014, 13:13

Cita:

Iniciado por mnocturno

Cierto!!!

Nada, ha sido un cruce de cables. O más bien, "la novatada".

Muchísimas gracias.

jejejejej genial que te haya funcionado.

Italico76 · #30 (**permalink**) 26/05/2014, 08:18

Amigo:

Le pregunto por que dice que la form de hacer el Namespace de AngularJS permite "exponer una API de buena (mejor) manera" ?

De por si no entiendo bien que sucede al escribir:

Código Javascript:

Ver originalvar App = App || {};

menos de la forma:

Código Javascript:

Ver originalwindow.app || (window.app = Object());

y menos que menos... por que la segunda forma que a todas luces es mas complicada es mejor ?

Que pena ser tan ignorante!!! pero en serio estoy leyendo

Cita:

Iniciado por Carlangueitor

Código Javascript:

Ver original// Declara tu namespace global.
var App = App || {};
 
App.method = function() {
    /* Magic Here */
    console.log("Ponies and Rainbows"); 
};
 
App.method();

Fiddle: http://jsfiddle.net/y6Edp/

O algo mejor sería algo como esto (inspirado en angularjs), te permite tener variables "privadas" y exponer una API de buena manera:

Código Javascript:

Ver original(function (window) {
    var app = (function () {
        return window.app || (window.app = Object());
    })();
 
    app.method = function () {
        /* Magic Here */
        console.log("Ponies and Rainbows"); 
    };
})(window);
 
app.method();