Javascript: Conocer si una variable u objeto existe (diferencia entre null y undefined)

Actualizado: Si trabajas con jQuery y quieres saber si un selector existe en la página, revisa esta entrada.

Trabajar en Javascript implica, entre otras cosas, acceder a variables y objetos. Y siempre que accedemos a éstos nos hemos de asegurar de que existen, o correremos el riesgo de provocar un error que impida que se ejecute el resto del script.

Javascript tiene dos formas de avisarnos de que algo pasa con la variable u objeto al que deseamos acceder: las palabras null y undefined. La diferencia entre ambas radica en que mientras que undefined nos informa que el objeto o variable no está definido, null es un objeto vacío. Entonces, un objeto o variable contendrá algún valor, o será null o undefined. Pero, ¿cuándo es null y cuándo undefined? El siguiente ejemplo nos lo dejará más claro:

Sigue leyendo

Recopilación de las diapositivas de SpainJS 2012

Del 5 al 7 de Julio se ha celebrado en el parque del Retiro de Madrid el evento SpainJS, una conferencia de desarrolladores centrada en el ecosistema JavaScript, y de enfoque internacional, ya que muchos de los ponentes y asistentes eran de habla inglesa.

Como no he podido ir y el tema me interesa, en éste post intento recopilar los enlaces a todas las slides o diapositivas de las charlas, y lo iré actualizando según éstas estén disponibles, aunque también se pueden consultar aquí.

La ansiada lista, tras el salto.

Sigue leyendo

Redimensionar los campos de una tabla con jQuery UI

Gracias a jQuery UI podemos realizar acciones o efectos Javascript que normalmente nos costarían muchas líneas de código con un par de simples líneas. En este caso vamos a ver un sencillo ejemplo de cómo poder redimensionar los campos de una tabla.

Para este ejemplo he creado una página simple y he incluido jQuery y jQuery UI enlazándolos en el código desde su página principal (no olvidemos que lo deseable es descargarlos y linkarlos desde nuestra misma página):

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Lo siguiente es crear una tabla HTML, tan básica o llena de estilos como se desee, para posteriormente añadir en la cabecera de la página el siguiente código javascript:

$(document).ready(function(){
    $(".head_1").resizable();
    $(".head_2").resizable({resize: function(event, ui) { ui.size.height = ui.originalSize.height;},handles:'e'});
    $(".head_3").resizable({resize: function(event, ui) { ui.size.height = ui.originalSize.height;},handles:'e'});
    $(".head_4").resizable({resize: function(event, ui) { ui.size.height = ui.originalSize.height;},handles:'e'});
});

Tras el salto seguiremos explicando qué hace cada cosa.

Sigue leyendo

JavaScript: Fundamentos de JSON

JSON (JavaScript Object Notation) es un formato ligero de intercambio de datos basado en un subconjunto de la especificación de JavaScript, y es ampliamente utilizado debido a su simplicidad y a su ligereza, ya que comparado con XML, genera archivos de intercambio de datos menos pesados, al no contener etiquetas. Este estándar es ampliamente utilizado en aplicaciones web para conexiones asíncronas con el servidor en busca de datos mediante AJAX. Entre muchos otros usos, claro.

Existen dos estructuras básicas que conforman las estructuras de datos que se pasan a través de JSON:

  • Las listas ordenadas de valores,
  • Las colecciones de pares nombre-valor, más conocidas como estructuras o objetos.

Combinando estos dos tipos básicos de estructuras podemos representar cualquier dato o colección de datos que se nos ocurra, independientemente de su complejidad. En este post veremos los fundamentos de JSON en JavaScript y cómo tratar con estructuras de datos de este tipo.

Sigue leyendo