9  JSON & DOM

  Este material não intenciona qualquer aprofundamento na linguagem JavaScript, e sim um direcionamento de seu aprendizado para uso mais confortável de códigos junto ao simulador JSPlotly e seu gerador de códigos GSPlotly. Contudo, dois conceitos importantes surgem quando da construção de objetos interativos mais complexos no aplicativo, e que são descritos suscintamente a seguir.

9.1 JSON

  JSON é um acrônimo para JavaScript Object Notation, um formato de texto popular utilizado no armazenamento e troca de dados. Por essa notação, um subconjunto da linguagem JS, os dados são armazenados por listas separadas por vírgulas e contendo o par chave:valor dentro de um objeto JSON.

  Essa notação também é parecida com XML (eXtensible Markup Language) utilizada para a web, embora JSON tenha a vantagem de extração direta de dados para uma string de fácil leitura. Para tanto, utiliza-se o método JSON.parse(). Na mesma linha, converte-se um objeto JavaScript para um objeto JSON pelo método JSON.stringfy().

  As características gerais da notação JSON envolvem:

1. Objetos: conjunto de pares chave-valor delimitados por chaves; ex: {tipo:carro, marca: fiat, cor:verde};
2. Arrays: lista ordenada de valores delimitada por colchetes; ex:
3. Tipos de dados: strings, números, booleans (true, false);
4. Separadores: vírgulas para separar para chave-valor;
5. Null: sem definição

  Dessa forma, a notação JSON apresenta-se leve, facilmente interpretável tanto por humanos como por máquinas, e compatível com outras linguagens de programação (Java, Python). Além disso, alicerça a construção de APIs (Application Programming Interface), a interface de aplicativos frequentemente utlizada para a comunicação entre o front-end (cliente, interativo) e o back-end (servidor, processamento) de aplicações web.

9.2 DOM

  Também um acrônimo, refere-se a Document Object Model, um formato ramificado em árvore para níveis e subníveis, e que constitui o modo como as páginas web representam todos os seus elementos. Exemplificando, para o ramo window, cabem document, location, history, screen, frames, navigator.

  E dentro do ramo window, inserem-se forms, achors, images, links. Dessa forma produz-se uma lista com todas as propriedades de exibição para um objeto construido para um browser, muitas vezes às centenas. Ilustrando-se, propriedades para scrolling de páginas, janelas pop-up, timer, plugins de navegação, location e history de cada objeto.