====== JavaScript (en el navegador) ====== ===== Básico ===== * [[fw:others:jquery|jQuery]], una librería para facilitar, mejorar y ampliar el uso de este lenguaje. ==== Usar en HTML ==== Para agregar un script externo a una página html hacemos:

Para introducir código directamente en la página:

==== Ventana ==== :?: * ''window.location.reload()'': Se ejecuta la accion reload de la barra de direcciones del navegador. Exactamente como hacer click en el boton reload. * ''history.go(0)'': Se carga la ultima pagina del historico del navegador. Claro que esa entrada coincide con la pagina que estamos viendo actualmente. * ''history.back()'': Redirige el navegador a la última página. * ''window.location.href=window.location.href'': Se ingresa una nueva direccion web, que casualmente es la misma de la pagina que estamos viendo actualmente. * ''window.location = path'': Cambia la ruta de la página actual. ==== Funciones ==== * ''alert'': Muestra un mensaje de alerta al usuario. * ''confirm'': Muestra un mensaje de alerta al usuario con dos opciones: aceptar y cancelar. Si el usuario elige aceptar la función retornará true. ===== Como... ===== ==== JSON ==== Mirar [[tags:json#combinandolo_con_javascript|combinación de JSON con JavaScript]]. ==== Descargar datos ==== Esta es la principal acción que se realiza en una petición AJAX. === XMLHttpRequest === En el siguiente ejemplo se descargan datos en formato JSON utilizando el objeto ''XMLHttpRequest'':


var http_request = new XMLHttpRequest();
var url = "./controller.ashx";

http_request.onreadystatechange = handle_json;
http_request.open("GET", url, true);
http_request.send(null);

function handle_json() {
    if (http_request.readyState == 4) {
        if (http_request.status == 200) {
            var json_data = http_request.responseText;
            var the_object = eval("(" + json_data + ")");
        } else {
            alert("Ha habido un problema con la URL.");
        }
        http_request = null;
    }
}

- Se crea un objeto XMLHttpRequest para conectar a datos externos. - Se inicializa, indicando la función a la que se llamará cuando se reciban los datos mediante la propiedad ''onreadystatechange'' y se indica la acción que se hará mediante la función ''open'' (URL, forma de llamada a los datos...). - Se llama a ''send'' que hará una petición a la URL indicada. - Cuando se reciban datos se llamará a la función que se ha indicado, en ese caso ''handle_json'', si el ''readyState'' es 4 y el ''status'' 200 es que todo ha ido bien y podremos recoger los datos de la propiedad ''responseText''. ==== Pequeños "code snippets" ==== === Impedir cerrar la ventana\pestaña === En IE podemos utilizar el evento ''onbeforeunload'', ya sea desde el mismo body ('''') o agregándolo dinámicamente:


function window.onload() {
  window.attachEvent("onbeforeunload", OnClose);
}
function OnClose() {
  event.returnValue = "Are you sure you want to close this window?";
}

=== Trabajar con iFrames === Acceder al iframe:


document.frames..location = 'http://www.google.es';

Acceder al padre desde el iframe:


parent.funcion(id);

=== Saber la resolución de la pantalla ===


var ancho = screen.width;
var alto = screen.height;

=== Copiar al portapapeles ===


window.clipboardData.setData('Text', $('#divNombre').text());

===== Notas ===== ==== Consejos ==== :!: Deberían ser releidos y reformateados. * Recuerda, un script se declara así:

* No utilizar la función ''eval''. * Utilizar [[http://www.jslint.com/|JSLINT]], programa que analiza el código js. * Poner los scripts js al final de la página. * Hay formas más rápidas que un for para construir un string, por ejemplo:


var arr = ['item 1', 'item 2', 'item 3'];  
var list = '' + arr.join('
') + '';

* Elimina las variables globales, por ejemplo: * Este código...


var name = 'Jeffrey';
var lastName = 'Way';
function doSomething() {...}
console.log(name); // Jeffrey -- or window.name

* Es mejor así...


var DudeNameSpace = {
   name : 'Jeffrey',
   lastName : 'Way',
   doSomething : function() {...}
}
console.log(DudeNameSpace.name); // Jeffrey

* Usar ''{ }'' en vez de ''new Object()''. * Este código...


var o = new Object();
o.name = 'Jeffrey';
o.lastName = 'Way';
o.someFunction = function() {
   console.log(this.name);
}

* Es mejor así...


var o = {
   name: 'Jeffrey',
   lastName = 'Way',
   someFunction : function() {
      console.log(this.name);
   }
};

* Para crear un objeto podemos hacerlo ''var o = {};''. * Para una lista de variables podemos declararlas de la siguiente forma:


var someItem = 'some string',
    anotherItem = 'another string',
    oneMoreItem = 'one more string';

* Para hacer funciones que se autoejecuten las meteremos entre parentesis:


(function doSomething() {
   return {
      name: 'jeff',
      lastName: 'way'
   };
})();

* Para parsear JSON utiliza el parser del creador en [[http://www.json.org/json2.js|JSON2]].