• jQuery, una librería para facilitar, mejorar y ampliar el uso de este lenguaje.

Creación:

var obj = {
   name : 'Jeffrey',
   lastName : 'Way'
}

Acceso a sus propiedades:

alert(obj.name);

Propiedades:

• length: Devuelve la longitud de la cadena.

Métodos:

• charAt(indice): Devuelve el carácter situado en la posición especificada por 'indice'.
• lastIndexOf(cadena_buscada, indice): Devuelve la posición de la última ocurrencia de 'cadena_buscada' dentro de la cadena actual, a partir de la posición dada por 'indice', y buscando hacia atrás. Este último argumento es opcional y, si se omite, la busqueda comienza por el último carácter de la cadena.
• split(separador); Parte la cadena en un array de caracteres. Si el carácter separador no se encuentra, devuelve un array con un sólo elemento que coincide con la cadena original.
• substring(primer_Indice,segundo_Indice): Devuelve la subcadena que comienza en la posición 'primer_Indice + 1' y que finaliza en la posición 'segundo_Indice'. Si 'primer_Indice' es mayor que 'segundo_Indice', empieza por 'segundo_Indice + 1' y termina en 'primer_Indice'. Si hacemos las cuentas a partir de 0, entonces es la cadena que comienza en 'primer_Indice' y termina en 'segundo_Indice - 1' (o bien 'segundo_Indice' y 'primer_Indice - 1' si el primero es mayor que el segundo).
• toLowerCase(): Devuelve la cadena en minúsculas.
• toUpperCase(): Devuelve la cadena en mayúsculas.

Saber si un elemento existe en el array:

function existsOnArray (value, array) {
    return (array.indexOf(value) != -1);
}

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

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

Hay que tener en cuenta las dos siguientes frases al programar con JavaScript:

1. Los objetos son diccionarios.
2. Los métodos son objetos.

Los objetos en JavaScript funcionan como pares de clave-valor, como si fuesen diccionarios.

var p = new Object();
p.x = 3;
p.y = 5;
message.innerHTML = p.x + "," + p.y; 

Es lo mismo que:

var p = new Object();
p["x"] = 3;
p["y"] = 5;
message.innerHTML = p["x"] + "," + p.y; 

El hecho que un método (o sea, una función) sea un objeto significa que puede ser asignada a una variable:

var p = new Object();
p["x"] = 3;
p.y = 5;
p["print"] = function() {
  message.innerHTML = p.x + "," + p.y;
}

Otro ejemplo más claro de como asignar una funcion a un objeto:

function add(point) {
      return point.x + point.y;
}
 
var myFunc = add
var p = { x: 1, y:1 };
var result = myFunc(p);
// Devolverá 2
alert(result); 

Existe otra forma de definir objetos en JavaScript (denominada literal), esta es directa y no requiere de declaración:

var p =
{
    x : 5,
    y : 3,
    print : function() { message.innerHTML = p.x + ',' + p.y; }
}
p.print(); 

O…

var person =
{
    name: "Scott Allen",     createdDate: new Date()
    website: "OdeToCode.com",
    address: { state: "MD", postalCode: "21044" },
};
 
alert(person.address.state);
alert(person.createdDate); 

var point1 =
{
    x: 3,
    y: 5,
    add: function(otherPoint)
         {
             this.x = this.x + otherPoint.x;
             this.y = this.y + otherPoint.y;
         }
};

function Point(x,y)
{
    this.x = x;
    this.y = y;
}
var p1 = new Point(3,5);
alert(p1.x, p1.y); 

O lo siguiente también sería válido:

function Point(x,y)
{
    this.x = x;
    this.y = y;
    this.add = function(point2)
        {
            this.x += point2.x;
            this.y += point2.y;
        }
}
var p1 = new Point(3,5);

Mirar combinación de JSON con JavaScript.

Esta es la principal acción que se realiza en una petición AJAX.

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;
    }
}

1. Se crea un objeto XMLHttpRequest para conectar a datos externos.
2. 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…).
3. Se llama a send que hará una petición a la URL indicada.
4. 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.

En IE podemos utilizar el evento onbeforeunload, ya sea desde el mismo body (<body onbeforeunload=“javascript:OnClose();”>) 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?";
}

Acceder al iframe:

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

Acceder al padre desde el iframe:

parent.funcion(id);

Deberían ser releidos y reformateados.

• Recuerda, un script se declara así:

<script type="text/javascript">
...
</script>

• Utilizar === y !== en vez de == ya que mejora el trabajo con elementos tipados.
• No utilizar la función eval.
• Utilizar 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 = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';  

• 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';

• El foreach es…

for(key in object) {
   if(object.hasOwnProperty(key) {
      ...then do something...
   }
}

• 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 JSON2.