Olá, meus caros leitores e leitoras. No último artigo fiz uma breve introdução ao JavaScript, criamos um ambiente de desenvolvimento on-line e um exemplo de aplicação web manipulando strings.
Avançando em nossa jornada, vamos falar sobre outros tipos de dados e como podemos criar aplicações mais elaboradas, conforme temos mais ferramentas em nossas mãos.
Vamos lá?
Ei, antes de continuar a leitura, sabia que essa é a segunda parte da nossa série sobre linguagem JavaScript? Dá uma olhadinha no primeiro artigo 😜
Introdução ao JavaScript: Tipo Number
Por mais precário que possa ser seu conhecimento em inglês, posso supor que você entende que number significa número.
E o tipo number representa dados numéricos, como 1, 100.027 ou -32.07.
É importante notar que, em programação, o ponto tem o mesmo significado que a vírgula na nossa notação escrita do dia a dia, indicando que se trata de um número de ponto flutuante, ou seja, o número 3,14 deve ser inserido no programa como 3.14.
Podemos utilizar o tipo number para realizar operações de soma, subtração, divisão, multiplicação e módulo:
let num1 = 10;
let num2 = 3;
let f1 = 5.02;
let neg = -3.8;
let sum = num1 + num2;
let fsum = f1 + num2;
let mul = num1 * num2;
let fmul = f1 * neg;
let div = num1/num2;
let fdiv = num1 / f1;
let mod = num1 % num2;
const op = document.getElementById("operacoes");
op.innerHTML = `<p>Veja alguns exemplos de operações matemáticas:</p>
<ul>
<li>${num1} + ${num2} = ${sum}</li>
<li>${f1} + ${num2} = ${fsum}</li>
<li>${num1} * ${num2} = ${mul}</li>
<li>${f1} * ${neg} = ${fmul}</li>
<li>${num1} / ${num2} = ${div}</li>
<li>${num1} / ${f1} = ${fdiv}</li>
<li>${num1} % ${num2} = ${mod}</li>
</ul>
`;
Este código irá gerar, na saída:
- 10 + 3 = 13
- 5.02 + 3 = 8.02
- 10 * 3 = 30
- 5.02 * -3.8 = -19.075999999999997
- 10 / 3 = 3.3333333333333335
- 10 / 5.02 = 1.9920318725099604
- 10 % 3 = 1
Podemos ver este código no projeto abaixo:
A operação módulo, representada pelo operador %, retorna o valor do resto de uma divisão.
No exemplo acima, 10%3 = 1 pois a divisão inteira de 10 por 3 é igual a 3 e tem por resto 1.
Você pode perceber em nosso exemplo que, quando utilizamos números de ponto flutuante juntamente com números inteiros em uma mesma operação, os resultados são em formato de ponto flutuante.
Outro ponto digno de nota em no nosso exemplo: o JavaScript converteu automaticamente os dados numéricos em strings dentro do nosso template.
Os operadores matemáticos, no JavaScript, são lidos executados da esquerda para a direita, respeitando as regras matemáticas: multiplicações e divisões são executas antes das somas e subtrações.
Além disso, podemos organizar as expressões utilizando parênteses. Assim, as operações dentro de parênteses são executadas antes das expressões. Por exemplo:
3 * 2 / 2 + 5 = 8
Pois, multiplicação e divisão têm prioridade sobre a soma, e são executadas da esquerda para a direita.
Assim, o JavaScript executa 3 * 2 = 6, em seguida 6/2 = 3 e por fim 3 + 5 = 8.
Agora, se inserirmos parênteses na expressão a fim de alterar a forma de execução:
3 * 2 / (2 + 5) = 0.8571428571428571
Pois, primeiro executamos a expressão entre parênteses: 2 + 5 = 7. Assim teremos 3 * 2 / 7 = 6 / 7 = 0.8571428571428571
Você pode confirmar o resultado desta expressões no projeto abaixo:
>>Leitura Recomendada:
Introdução ao uso de arrays em JavaScript
Introdução ao JavaScript: Tipo Object
Agora que aprendemos a utilizar os tipos string e number, vamos introduzir o tipo object.
Este tipo é utilizado para representarmos elementos complexos.
Os objetos são formados por uma chave e um valor, de forma que a chave pode representar uma propriedade do objeto que estamos representando e o valor é dado armazenado por esta propriedade.
Esta estrutura é construída entre chaves, e as propriedades são separadas por vírgula como no exemplo abaixo:
let objJorge = {
nome: 'Jorge da Silva',
idade: 37,
sexo: 'm',
}
Como você pode notar, um mesmo objeto pode conter atributos do tipo string e do tipo number.
Na verdade, as propriedades de um objeto podem armazenar dados de qualquer tipo suportado pelo JavaScript, inclusive outros objetos:
let objUsuario = {
nome: 'Jorge da Silva',
idade: 37,
sexo: 'm',
endereco: {
rua: 'Rua dos Bobos',
numero: 0
}
}
Os valores de um atributo podem ser acessados e alterados com a notação ponto. No trecho de código abaixo nós acessamos o conteúdo do objeto dentro de um template:
let template = `
<p>Nome do usuário: ${objUsuario.nome};</p>
<p>Idade do usuário: ${objUsuario.idade};</p>
<p>Sexo do usuário: ${objUsuario.sexo};</p>
<p>Endereço: ${objUsuario.endereco.rua}, ${objUsuario.endereco.numero}</p>
`
const docRef = document.getElementById("usuario");
docRef.innerHTML = template;
Assim, podemos enviar para o documento HTML as propriedades nome, idade e sexo de nosso usuário.
Perceba também, no trecho const docRef = document.getElementById(“usuario”); que document é um objeto.
Este objeto nos é fornecido pela API DOM e permite que possamos manusear o documento HTML que será renderizado pelo navegador.
E que docRef é outro objeto, que permite que alteramos o elemento HTML de id usuário.
Quando conversarmos sobre métodos e funções, irei de explicar como um objeto pode ser gerado dinamicamente. Por hora, basta que saiba que estes elementos do nosso código são objetos também.
Bem, além de acessar o valor de um objeto, podemos alterá-los.
No código acima alteramos o conteúdo HTML de docRef fazendo docRef.innerHTML = template.
Abaixo, alteramos os valores do nosso objeto usuário e adicionamos mais conteúdo HTML a docRef:
objUsuario.nome = "Maria das Dores";
objUsuario.idade = "27";
objUsuario.sexo = "f";
objUsuario.endereco.rua = "Av. dos Ladrilhos";
objUsuario.endereco.numero = "1000";
objUsuario.endereco.cidade = "São Paulo";
template = `
<hr>
<p>Nome do usuário 2: ${objUsuario.nome};</p>
<p>Idade do usuário 2: ${objUsuario.idade};</p>
<p>Sexo do usuário 2: ${objUsuario.sexo};</p>
<p>Endereço 2: ${objUsuario.endereco.rua}, ${objUsuario.endereco.numero}</p>
<p>Cidade 2: ${objUsuario.endereco.cidade} </p>
`
docRef.innerHTML += template;
Você pode ver todo o código deste exemplo no projeto abaixo:
>>Leitura Recomendada:
Os melhores editores para programadores front-end
Aprendendo JS na prática
Para apresentar tudo o que vimos aqui em uma aplicação simples, criei o projeto abaixo:
Ele utiliza alguns conceitos que iremos explicar a fundo no próximo artigo, mas a principio temos um documento HTML com os campos para inserção de nome, idade e sexo de um usuário:
<main> <h3>Cadstre-se</h3> <p><label>Nome: <input type="text" id="nome"> </label> <p><label>Idade: <input type="number" id="idade"> </label> <p><label>Sexo: <input type="radio" name="sexo" id="sexo" value="m">M <input type="radio" name="sexo" value="f">F </label> <p><button id="cadastrar">Cadastrar</button> <section id="cadastrado"></section> <main>
E um código JavaScript. A primeira parte cria o objeto cadastro, que utilizamos para alterar o HTML que será exibido ao usuário.
E o objeto btn que, quando clicado, irá executar o código dentro da função cadastrar.
Falaremos sobre métodos e funções nos próximos artigos.
const cadastro = document.getElementById("cadastrado");
const btn = document.getElementById("cadastrar");
btn.addEventListener("click", cadastrar);
A parte mais importante do nosso código hoje, e a que eu quero que você realmente entenda é esta:
function cadastrar() {
let objUsuario = {
nome: document.getElementById('nome').value,
idade: document.getElementById('idade').value,
sexo: document.getElementById('sexo').value,
}
let template = `
<hr>
<h3>Usuário cadastrado</h3>
<p>Nome do usuário: ${objUsuario.nome}</p>
<p>Idade do usuário: ${objUsuario.idade}</p>
<p>Sexo do usuário: ${objUsuario.sexo}</p>
`
cadastro.innerHTML = template;
}
>>Leitura Recomendada:
Conheça os 10 frameworks e libraries javascript mais importantes atualmente
A função cadastrar contém o código que será executado quando btn for clicado.
Veja que os valores do objUsuario serão os valores dos elementos HTML de id nome, idade e sexo.
| HTML | JavaScript |
| <label>Nome: <input type=”text” id=”nome”> </label> <p><label>Idade: <input type=”number” id=”idade”></label> <p><label>Sexo: <input type=”radio” name=”sexo” id=”sexo” value=”m”>M <input type=”radio” name=”sexo” value=”f”>F</label> | let objUsuario = { nome: document.getElementById(‘nome’).value, idade: document.getElementById(‘idade’).value, sexo: document.getElementById(‘sexo’).value, } |
Assim, a variável template conterá uma string com os dados informados pelo usuário e estes dados serão renderizados no elemento HTML de id cadastro.
Bom galera, por hoje foi isso! Espero que estejam gostando da nossa série de introdução ao JavaScript. Além de estudar de forma autodidata, você também pode optar por um aprendizado mais rápido, que seriam por meio de bons cursos de JavaScript.
Ah, quase ia esquecendo: dá uma olhada na nossa página com vagas para desenvolvedor front-end. Quem sabe você acha uma oportunidade legal.
Para demonstrar interesse em alguma vaga, basta criar um perfil na Geek, ou, se você já tem, é só sinalizar as vagas que você gostaria de participar do processo seletivo. Simples assim 🙂
