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:
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.
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
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.
No hay comentarios:
Publicar un comentario