appiweb: diciembre 2012

lunes, 10 de diciembre de 2012

Ejecutar una función al cargar la página

Buenas a todos!!
Ejecutar una función al cargar la página puede ser de gran utilidad, sobretodo en páginas que requieren cargar recursos al principio, realizar llamadas ajax o cachear elementos del DOM.

<html>

<head>

<title>Función que se ejecuta al inicio</title>

</head>

<body>

    <div id='c'></div>



    <script type="text/javascript">

        var div_c;

        function init() {

//Carga de recursos

             //Cacheo de variables
             div_c = document.getElementById("c");

//Peticiones AJAX


        }

      

        window.onload = init;
          

    </script>

</body>

</html>

En el código anterior defino una función init(), que será la que se ejecutará al cargarse la página, para conseguir esto es tan simple como:

window.onload = init;

Un saludo a todos!

Cambiar el contenido de un DIV

Buenas a todos!!
Para cambiar el contenido de un DIV de forma dinámica, lo más fácil es modificar el contenido del atributo innerHTML del elemento div.

<html>
<head>
<title>Div</title>
</head>
<body>
    <div id='c'></div>

    <script languaje="JavaScript">
        var divContainer = document.getElementById("c");
        function init() {
            divContainer.innerHTML = "Nuevo contenido en del div!";
        }

        
        window.onload = init;
        
    </script>
</body>
</html>

En el código anterior tenemos un div con id "c".
Por si quisieramos cambiar el contenido del div varias veces, creamos la variable 'divContainer' que guardará en memoria la instancia del elemento div, así no tendremos que buscar en el DOM del documento HTML el elemento con id "c", cada vez que queramos cambiar o consultar su contenido.

var divContainer = document.getElementById("c");

Ahora simplemente hemos creado una función init(), que se ejecutará cuando el contenido del documento HTML haya sido cargado por completo en el navegador.

window.onload = init;

Como podéis ver solamente hace falta asignar al atributo innerHTML el nuevo String que contendrá el div.

divContainer.innerHTML = "Nuevo contenido en del div!";

Para cambiar en una sola línea el contenido de un div, es tan simple como lo siguiente:


document.getElementById("c").innerHTML = "Cambiar contenido en el div";

El string que asignamos puede contener tags html, con esto tenemos la posibilidad de insertar nuevos elementos en un div, o dar estilo al texto:

document.getElementById("c").innerHTML = "Cambiar contenido </br> en el div";

Eso es todo!! Un saludete!