Esta é a aula 01 do curso de JSON – Veja o cronograma completo aqui.
JSON (JavaScript Object Notation – Notação de Objetos JavaScript) é uma formatação leve de troca de dados. Ele resolve com eficiência a troca de dados entre servidores, sites e aplicações e é uma excelente alternativa ao uso do XML. Uma descrição mais detalhadas do que esta é esta tecnologia pode ser lida no site oficial do projeto: http://www.json.org/json-pt.html
O JASON, embora tenha diversas particulares e famoso por seus códigos extensos é fácil de usar.
Aonde uso JSON?
Se você tem uma aplicativo mobile, entenda que nela você não conseguirá rodar aplicações em PHP, apenas em HTML 5, também não conseguirá criar um banco de dados no dispositivo, o banco de dados deverá estar armazenado em algum servidor da internet.
Embora existam recursos que permitam embarcar o banco dentro do aplicativos, estas tecnologias fogem do escopo das disciplinas do curso.
Portanto, precisamos deixar o banco de dados em um servidor e nosso aplicativo terá que realizar consultas neste banco para conseguir carregar informações, porém, o HTML não se conecta em banco de dados, então, temos um grande problema.
Problema este que podemos resolver com XML ou JSON. Se o banco de dados não for muito volumoso, JSON é a melhor opção para resolver este problema. O JSON intermediará toda a comunicação entre o seu aplicativo e o seu servidor de banco de dados.
Mas o CORDOVA não faz isso? A resposta é não, ele apenas permite acessar os recursos do dispositivo, o CORDOVA usa JSON para diversas bibliotecas existente nele. Portanto, se você desenvolve usando CORDOVA, JSON deverá ser um aprendizado natural para aproveitar melhor seus códigos e recursos.
Por onde começo?
JavaScript
1. Ler e escrever valores
Você deve aprender imediatamente a ler e escrever dados usando JS. O JSON sozinho não consegue resolver estas questões, por isso, o JS nativo se faz necessário. Basicamente, para ler e escrever valores em uma página usando JS usamos:
document.getElementById("id_do_campo").value
para ler valores e
document.getElementById("id_da_DIV").innerHTML
para escrever valores.
Importante: em JS não importa o nome dos campos, o que importa para o JS é o id dele. Por exemplo, considere um campo de texto em HTML;
<input tpe="text" name="nome" id="teste">
JS irá considerar o id=”teste” para capturar o valor, o código da leitura ficaria assim:
document.getElementById("teste").value
2. Declarar e manipular variáveis
Você também deve saber a declarar variáveis, no JS, declaramos variáveis com a sintaxe var;
var nome="Anderson"; var idade="32";
3. Criar funções
Você deve aprender a criar funções. As funções são usadas principalmente pelos botões, ou seja, quando um botão da sua página for pressionado, ele irá executar uma determinada função. No JS as funções são criadas usando a seguinte sintaxe
function NomeDaFuncao ()
{
//codigo da função aqui.
}
As funções também podem ser parametrizadas, ou podemos passar valores para elas, como números e textos.
function NomeDaFuncao (num1, num2)
{
var resultado = num1 + num2;
alert("a conta deu " + resultado);
}
4. Manipular vetores
Você também deve aprender a manipular vetores. JSON basicamente só trabalha com eles.
var DadosDoSapato = {cor: "marrom", marca: "Nike", tamanho: 42}
alert(DadosDoSapato.cor);
alert(DadosDoSapato.marca);
alert(DadosDoSapato.tamanho);
5. Aprenda eventos JS
Eventos são usados para criar interações nas páginas, por exemplo, ao clicar em um botão podemos usar o evento onclick() para chamar uma determinada função.
| Evento | Descrição |
|---|---|
| onchange | Quando um elemento HTML é alterado, exemplo: digitar um texto dentro de um input |
| onclick | Quando um elemento HTML é clicado, por exemplo, clicar em um botão. |
| onmouseover | Quando o mouse passa sobre um elemento HTML. |
| onmouseout | Quando o mouse sai de cima um elemento HTML. |
| onkeydown | Quando uma tecla é pressionada |
| onload | Quando o navegador carrega uma página |
Exemplos:
- Na formulário a seguir, leia o valor dos campos n1, n2 e n3 e calcule a média entre eles quando o botão calcular for pressionado e exiba dentro da DIV resultado. O código HTML é o da imagem abaixo:
Solução: De cara já sabemos que temos que ler valores, então, deveremos usar o document.getElementById(“id_do_campo”).value para fazer a leitura destes campos. Devemos também fazer o cálculo, portanto, criar uma função para realizar o cálculo é uma boa saída. Porém, o cálculo só será realizado quando o botão for pressionado, então deveremos usar o evento onclick para chamar a função do cálculo e o cálculo será exibido dentro de uma DIV para isso existe o document.getElementById(“id_do_campo”).innerHTML para escrever dentro dela. O Código então ficaria assim;
Os fontes estão disponíveis para download aqui:
DOWNLOAD DA AULA 001
- Em um e-commerce, o cliente sempre pode escolher a quantidade de produtos. Logo, devemos então oferecer um recurso onde ele possa escolher a quantidade de produtos de forma simples e imediatamente calcular o preço x quantidade. Veja um exemplo:
DOWNLOAD DA AULA 002