parent
103597186d
commit
720147a2ee
@ -0,0 +1,195 @@
|
||||
# Noções básicas de JavaScript: Tipos de dados
|
||||
|
||||
![Noções básicas de JavaScript: Tipos de dados](/sketchnotes/webdev101-js-datatypes.png)
|
||||
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## Quiz Pré-Aula
|
||||
[Quiz Pré-Aula](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/7)
|
||||
|
||||
Esta lição cobre o básico do JavaScript, a linguagem que fornece interatividade na web.
|
||||
|
||||
[![Tipos de dados em JavaScriptt](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Tipos de dados em JavaScript")
|
||||
|
||||
|
||||
Vamos começar com variáveis e os tipos de dados que as preenchem!
|
||||
|
||||
## Variáveis
|
||||
|
||||
Variáveis armazenam valores que podem ser usados e alterados em todo o código.
|
||||
|
||||
A criação e **declaração** de uma variável tem a seguinte sintaxe **[palavra-chave] [nome]**. É composto de duas partes:
|
||||
|
||||
- **Palavra-chave**. Palavras-chave podem ser `let` ou` var`.
|
||||
|
||||
> Nota, a palavra-chave `let` foi introduzida no ES6 e dá a sua variável o chamado _block scope_ ou escopos do bloco. É recomendado que você use `let` sobre `var`. Abordaremos os escopos do bloco mais detalhadamente em partes futuras.
|
||||
- **O nome da variável**, este é um nome que você escolhe.
|
||||
|
||||
### Tarefa - trabalhando com variáveis
|
||||
|
||||
1. **Declare uma variável**. Vamos declarar uma variável usando a palavra-chave `let`:
|
||||
|
||||
```javascript
|
||||
let minhaVariável;
|
||||
```
|
||||
|
||||
`minhaVariável` agora foi declarada usando a palavra-chave`let`. Atualmente não tem um valor.
|
||||
|
||||
1. **Atribua um valor**. Armazene um valor em uma variável com o operador `=`, seguido pelo valor esperado.
|
||||
```javascript
|
||||
minhaVariável = 123;
|
||||
```
|
||||
|
||||
> Nota: o uso de `=` nesta lição significa que fazemos uso de um "operador de atribuição", usado para definir um valor para uma variável. Não denota igualdade.
|
||||
|
||||
`minhaVariável` agora foi *inicializada* com o valor 123.
|
||||
|
||||
1. **Refatorar**. Substitua seu código pela seguinte instrução.
|
||||
|
||||
```javascript
|
||||
let minhaVariável = 123;
|
||||
```
|
||||
|
||||
O acima é chamado de _inicialização explícita_ quando uma variável é declarada e recebe um valor ao mesmo tempo.
|
||||
|
||||
1. **Altere o valor da variável**. Altere o valor da variável da seguinte maneira:
|
||||
|
||||
```javascript
|
||||
minhaVariável = 321;
|
||||
```
|
||||
|
||||
Uma vez que uma variável é declarada, você pode alterar seu valor em qualquer ponto do seu código com o operador `=` e o novo valor.
|
||||
|
||||
✅ Tente isso! Você pode escrever JavaScript diretamente no seu navegador. Abra uma janela do navegador e navegue até Ferramentas do desenvolvedor. No console, você encontrará um prompt; digite `let myVariable = 123`, pressione return e, em seguida, digite` myVariable`. O que acontece? Observe que você aprenderá mais sobre esses conceitos nas lições subsequentes.
|
||||
|
||||
## Constantes
|
||||
|
||||
A declaração e a inicialização de uma constante seguem os mesmos conceitos de uma variável, com exceção da palavra-chave `const`. Normalmente, as constantes são declaradas com todas as letras maiúsculas.
|
||||
|
||||
```javascript
|
||||
const MY_VARIABLE = 123;
|
||||
```
|
||||
|
||||
As constantes são semelhantes às variáveis, com duas exceções:
|
||||
|
||||
- **Deve ter um valor**. As constantes devem ser inicializadas ou ocorrerá um erro ao executar o código.
|
||||
- **A referência não pode ser alterada**. A referência de uma constante não pode ser alterada depois de inicializada, ou ocorrerá um erro ao executar o código. Vejamos dois exemplos:
|
||||
- **Valor simples**. O seguinte NÃO é permitido:
|
||||
|
||||
```javascript
|
||||
const PI = 3;
|
||||
PI = 4; // NÃO é permitido
|
||||
```
|
||||
|
||||
- **A referência do objeto está protegida**. O seguinte NÃO é permitido.
|
||||
|
||||
```javascript
|
||||
const obj = { a: 3 };
|
||||
obj = { b: 5 } // NÃO é permitido
|
||||
```
|
||||
|
||||
- **O valor do objeto não está protegido**. O seguinte é permitido:
|
||||
|
||||
```javascript
|
||||
const obj = { a: 3 };
|
||||
obj.a = 5; // permitido
|
||||
```
|
||||
|
||||
Acima você está alterando o valor do objeto, mas não a referência em si, o que o torna permitido.
|
||||
|
||||
> Nota, um `const` significa que a referência está protegida contra reatribuição. O valor não é _imutável_ e pode mudar, especialmente se for uma construção complexa como um objeto.
|
||||
|
||||
## Tipos de Dados
|
||||
|
||||
As variáveis podem armazenar muitos tipos diferentes de valores, como números e texto. Esses vários tipos de valores são conhecidos como **tipo de dados**. Os tipos de dados são uma parte importante do desenvolvimento de software porque ajudam as pessoas desenvolvedoras a tomar decisões sobre como o código deve ser escrito e como o software deve ser executado. Além disso, alguns tipos de dados têm recursos exclusivos que ajudam a transformar ou extrair informações adicionais em um valor.
|
||||
|
||||
✅ Os tipos de dados também são chamados de primitivos de dados JavaScript, pois são os tipos de dados de nível mais baixo fornecidos pela linguagem. Existem 6 tipos de dados primitivos: string, number, bigint, boolean, undefined, e symbol. Reserve um minuto para visualizar o que cada uma dessas primitivas pode representar. O que é uma `zebra`? Que tal `0`? `true`?
|
||||
|
||||
### Números (Numbers)
|
||||
|
||||
Na seção anterior, o valor de `myVariable` era um tipo de dado numérico.
|
||||
|
||||
`let myVariable = 123;`
|
||||
|
||||
As variáveis podem armazenar todos os tipos de números, incluindo decimais ou números negativos. Os números também podem ser usados com operadores aritméticos, abordados na [próxima seção](#operadores).
|
||||
|
||||
### Operadores aritméticos
|
||||
|
||||
Existem vários tipos de operadores para usar ao executar funções aritméticas, e alguns estão listados aqui:
|
||||
|
||||
| Símbolo | Descrição | Examplo |
|
||||
| ------ | ------------------------------------------------------------------------ | -------------------------------- |
|
||||
| `+` | **Adição**: Calcula a soma de dois números | `1 + 2 //a resposta esperada é 3` |
|
||||
| `-` | **Subitração**: Calcula a diferença de dois números | `1 - 2 //a resposta esperada é -1` |
|
||||
| `*` | **Multiplicação**: Calcula o produto de dois números | `1 * 2 //a resposta esperada é 2` |
|
||||
| `/` | **Divisão**: Calcula o quociente de dois números | `1 / 2 //a resposta esperada é 0.5` |
|
||||
| `%` | **Restante**: Calcula o resto da divisão de dois números | `1 % 2 //a resposta esperada é 1` |
|
||||
|
||||
✅ Tente isso! Tente uma operação aritmética no console do seu navegador. Os resultados surpreendem você?
|
||||
|
||||
### Strings
|
||||
|
||||
Strings são conjuntos de caracteres que residem entre aspas simples ou duplas.
|
||||
|
||||
- `'Isso é uma string'`
|
||||
- `"Isso também é uma string"`
|
||||
- `let myString = 'Este é um valor de string armazenado em uma variável';`
|
||||
|
||||
Lembre-se de usar aspas ao escrever uma string, caso contrário, o JavaScript assumirá que é um nome de variável.
|
||||
|
||||
### Formatando Strings
|
||||
|
||||
Strings são textuais e requerem formatação de vez em quando.
|
||||
|
||||
Para **concatenar** duas ou mais strings, ou juntá-las, use o operador `+`.
|
||||
|
||||
```javascript
|
||||
let myString1 = "Olá";
|
||||
let myString2 = "Mundo";
|
||||
|
||||
myString1 + myString2 + "!"; //OláMundo!
|
||||
myString1 + " " + myString2 + "!"; //Olá Mundo!
|
||||
myString1 + ", " + myString2 + "!"; //Olá, Mundo!
|
||||
|
||||
```
|
||||
|
||||
✅ Por que `1 + 1 = 2` em JavaScript, mas` '1' + '1' = 11? `Pense nisso. Que tal `'1' + 1`?
|
||||
|
||||
**Template literals (Literais de modelo)** são outra maneira de formatar strings, exceto em vez de aspas, o crase é usado. Qualquer coisa que não seja texto simples deve ser colocado dentro dos espaços reservados `$ {}`. Isso inclui todas as variáveis que podem ser strings.
|
||||
|
||||
```javascript
|
||||
let myString1 = "Olá";
|
||||
let myString2 = "Mundo";
|
||||
|
||||
`${myString1} ${myString2}!` //Olá Mundo!
|
||||
`${myString1}, ${myString2}!` //Olá, Mundo!
|
||||
```
|
||||
|
||||
Você pode atingir seus objetivos de formatação com qualquer um dos métodos, mas os Template literals respeitarão todos os espaços e quebras de linha.
|
||||
|
||||
✅ Quando você usaria um literal de modelo em vez de uma string simples?
|
||||
|
||||
### Booleanos
|
||||
|
||||
Os booleanos podem ter apenas dois valores: `true` ou` false`. Os booleanos podem ajudar a tomar decisões sobre quais linhas de código devem ser executadas quando certas condições são atendidas. Em muitos casos, [operadores](#operadores) auxiliam na configuração do valor de um booleano e você freqüentemente notará e escreverá variáveis sendo inicializadas ou seus valores sendo atualizados com um operador.
|
||||
|
||||
- `let myTrueBool = true`
|
||||
- `let myFalseBool = false`
|
||||
|
||||
✅ Uma variável pode ser considerada 'true' se for avaliada como um booleano `true`. Curiosamente, em JavaScript, [todos os valores são verdadeiros, a menos que definidos como falsos](https://developer.mozilla.org/docs/Glossary/Truthy).
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Desafio
|
||||
|
||||
JavaScript é notório por suas maneiras surpreendentes de lidar com tipos de dados ocasionalmente. Pesquise sobre essas 'pegadinhas'. Por exemplo: a diferenciação de maiúsculas e minúsculas pode afetar! Tente isto em seu console: `let age = 1; deixe Idade = 2; age == Age` (resolve `false` - por quê?). Que outras dicas você pode encontrar?
|
||||
|
||||
## Quiz Pós-Aula
|
||||
[Quiz Pós-Aula](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/8)
|
||||
|
||||
## Revisão e autoestudo
|
||||
|
||||
Dê uma olhada [nessa lista de exercícios de JavaScript](https://css-tricks.com/snippets/javascript/) e tente um. O que você aprendeu?
|
||||
|
||||
## Tarefa
|
||||
|
||||
[Prática de Tipos de Dados](assignment.pt.md)
|
Loading…
Reference in new issue