JSON y tipos de datos en javascript

JSON es una de las maneras de transferir información en Internet. La gran ventaja de este formato es que en realidad es código javascript y por tanto es mucho más fácil trabajar con el que con XML o simple texto plano. Aprovecharemos este artículo no solo para hablar de este formato, que usaremos en próximos artículos, sino también para conocer los tipos de datos usados en javascript y en casi cualquier otro lenguaje de programación. Los siguientes son enlaces útiles para esta lección:

• Los ejemplos interactivos que se usan en la lección y que describiremos a continuación. Podéis descargar también su código fuente si tenéis curiosidad.
• La referencia de JSON (en inglés), más precisa que lo que comento en el artículo.

Ejemplos interactivos

Antes de comenzar, en el siguiente enlace podréis encontrar unos ejemplos interactivos para la lección. Consiste en una lista de ejemplos que muestran diferentes fragmentos de código que se pueden editar y ejecutar con el botón de debajo. He creado una función llamada "mostrar_en_pantalla", que muestra el contenido que le pasemos como parámetro en el área gris de la derecha:

La idea es simplemente que según vayáis leyendo el artículo podáis probar los distintos ejemplos e intentar hacer cambios para comprobar el resultado, sobre todo a la hora de acceder a contenidos. También veremos al final del artículo que para generar la lista de ejemplos hemos usado JSON, con lo que lo usaremos como ejemplo práctico de lo visto en el artículo.

Para quien tenga curiosidad, la clave del programa está en la función "eval(código)", que es una función de javascript que ejecuta sobre la marcha, el código que le pasemos como parámetro. Así que lo que nosotros hacemos es simplemente pasarle lo que hay escrito en el área de texto.

Tipos básicos

Javascript (y por tanto JSON) permite almacenar números, textos, variables booleanas (que toman valores de verdadero y falso) y también valores nulos (null). Esta es la información básica que se utiliza en estructuras más complejas, como veremos más abajo. Pero por el momento veamos un ejemplo de cada uno de estos casos:

var variable_nula; // Una variable sin valor asignado tiene el valor null
var variable_nula2=null; // También se puede asignar directamente

var booleano=true; // Los booleanos pueden ser ciertos (true) 
var booleano2=false; // o falsos (false)

var numero=10; // Número entero
var numero2=-15.5; // Número negativo decimal
var numero3=5.5+e3; // Equivale a 5,5 x 10 elevado a 3 = 5500

var texto="Hola mundo"; // El texto se identifica por ir entre comillas

// Si el propio texto tiene comillas se le pone una barra delante
var texto2="Este texto tiene\"comillas\"";

// Se pueden meter barras (\\), tabulación (\t) y saltos de línea (\n)
var texto3="Texto con \\, tabulador:(\t) \n Esto es una nueva línea" 

Los números, como habréis visto, pueden usar el punto para usar decimales, y el guión para valores negativos, y también permiten fórmulas exponenciales para valores muy grandes o muy pequeños (ej: 10.5e+6 significa 10,5 millones).

Los textos en principio son cualquier cadena situada entre comillas dobles (") o simples ('), aunque hay varias excepciones indicadas por una barra invertida que las precede: Si hemos de escribir comillas dentro del texto deberemos anteponer una barra invertida (\") para diferenciarlas de las barras de apertura y cierre, y lo mismo si queremos escribir la barra invertida, que habremos de escribirla dos veces (\\). Las barras también nos permiten hacer saltos de línea (\n) y tabulaciones (\t).

En los ejemplos podéis probar a modificar los números y textos y comprobar el resultado.

Arrays

Un array es una lista de elementos. Pueden ser números, textos, booleanos o incluso otros arrays u objetos:

var array1=[1,2,3,4,5];

var array2=["Juan","María","Pedro","Luisa"];

var array3=[
 [1,2,3,4,5],
 ["Juan","María","Pedro","Luisa"],
 [null,false,[1,2],"Hola mundo",13.5]
];

Los arrays se acceden mediante un índice, comenzando en "0". Es decir, al primer elemento se accede mediante "array[0]", al segundo con "array[1]", al tercero con "array[2]",...

Hay un par de ejemplos de arrays, donde podéis probar a añadir más elementos y acceder a ellos con distintos índices.

Objetos

Un objeto es un elemento con varias propiedades de cualquier tipo, identificadas con etiquetas. Por ejemplo podríamos crear un objeto persona que tuviese una propiedad "nombre", de tipo texto, otra propiedad "edad", de tipo número, otra "fecha_de_nacimiento", que fuese a su vez otro objeto con las propiedades "día", "mes" y "año",...:

var persona={
 "nombre":"Juan",
 "edad":35,
 "soltero":true,
 "fecha":{
  "día":12,
  "mes":6,
  "año":1975
 },
 "amigos":["Pedro","Jose","Marta"]
}

Hay dos maneras de acceder a las propiedades de un objeto: O bien usando un punto (ej: persona.nombre), o usando corchetes (ej: persona["fecha_de_nacimiento"]). El primer método es más habitual, pero el segundo tiene usos interesantes. Podéis ver un ejemplo de esto, y probar ambas formas de acceder a las propiedades, además de añadir vuestros propios campos.

Un ejemplo de JSON

Hasta ahora hemos visto los tipos de datos de javascript, que usaremos en JSON, pero en realidad hemos hablado poco de este lenguaje en si. Para hacerlo, nada mejor que un ejemplo. Como dijimos al principio, el propio programa de ejemplos interactivos utiliza JSON para generar la lista de ejemplos. La idea es muy simple ¿como sabe el programa que ejemplos mostrar en la lista y que códigos corresponden a cada uno? Pues muy sencillo: podemos crear una estructura JSON que lo indique. En nuestro caso:

var ejemplos=[
 {
  "titulo":"Números",
  "codigo":"var numero=10;\n\nmostrar_en_pantalla(numero)"
 },
 {
  "titulo":"Decimales",
  "codigo":"var numero=10.1;\n\nmostrar_en_pantalla(numero)"
 },
 {
  "titulo":"Texto",
  "codigo":"var texto=\"Hola mundo\";"+
   "\n\nmostrar_en_pantalla(texto)"
 },
 {
  "titulo":"Texto con comillas",
  "codigo":"var texto=\"Texto con \\\"comillas\\\"\\b\";"+
   "\n\nmostrar_en_pantalla(texto)"
 },
 {
  "titulo":"Array numérico",
  "codigo":"var array_de_numeros=[1,2,3,4];\n\n// Observa "+
   "que los índices de los arrays empiezan en cero, "+
   "\n// así que el número 3 muestra el cuarto elemento"+
   "\nmostrar_en_pantalla(array_de_numeros[3])"
 },
 {
  "titulo":"Array de texto",
  "codigo":"var array_de_texto=[\"Juan\",\"María\",\"Ana\","+
   "\"Luis\"];\n\nmostrar_en_pantalla(array_de_texto[0])"
 },
 {
  "titulo":"Array de arrays",
  "codigo":"var array_de_arrays=[\n\t[1,2,3,4],"+
   "\n\t[\"Juan\",\"María\",\"Ana\",\"Luis\"],"+
   "\n\t[\"uno\",2,false,null]\n];"+
   "\n\nmostrar_en_pantalla(array_de_arrays[1][2])"
 },
 {
  "titulo":"Objeto",
  "codigo":"var persona={\n\t\"nombre\":\"Juan\",\n\t\"edad\":35"+
   "\n};\n\nmostrar_en_pantalla(persona.nombre)"
 }
];

Como podéis ver se trata de una lista de objetos en el que cada objeto tiene un título para mostrar en el menú, y un código para mostrar en el área de texto editable cuando se pulse en el elemento correspondiente de la lista.

Así que JSON simplemente permite almacenar información de una manera estructurada que luego nuestros programas podrán usar, transmitir o almacenar. En próximos artículos veremos lo útil que es esto en multitud de situaciones.