Name	Name	Last commit message	Last commit date
parent directory ..
README.md	README.md

JavaScript parte 1

Inclusão, Mais tipos de dados,
Clicando em botões e Resolvendo equações 📈

Na última aula (1/3)

JavaScript:
1. Variáveis: let, const e var 🗡❌ (tipos de dados são inferidos)
2. Tipos:
  - 1. Boolean
  - 2. Number
  - 3. String
  - 4. Null
  - 5. Undefined
  - 6. Symbol
  - 7. Object
3. Operadores:
  - Aritméticos + - / * ** % ++ --
  - De atribuição = += -= *= /=
  - Relacionais == === != !== < <= > >=
  - Lógicos ! && ||
4. O objeto Math:
```
Math.sqrt(), Math.random(), Math.PI, Math.round()...
```

Na última aula (2/3)

Funções:

// tradicional
function nomeCompleto(nome, sobre) {
  return nome + ' ' + sobre;
}

// anônima em variável
const nomeCompleto = function(nome, sobre) {
  return nome + ' ' + sobre;
}

Invocação da mesma forma: nomeCompleto('Mijaro', 'Nomuro')

Condicionais:

if (nota >= 8) {
  console.log('show');
} else if (nota >= 6) {
  console.log('bom');
} else if (nota >= 4) {
  console.log('melhorar');
} else {
  console.log('🔴');
}

// operador ternário
// condicional
let vivo = 
        hp > 0 ? 'sim' : 'não';

switch (clima) {
  case 'ensolarado':
    cor = 'yellow';
    break;
  case 'chuvoso':
    gotas = true; // vazar
  default:
    cor = 'gray';
}

Na última aula (3/3)

Vetores

let radios = [106.1, 105.1, 98.3];
let cores = ['azul', 'verde'];

let animais = [];         // <- vetor vazio
animais.push('dogue');    // ['dogue']

Repetição

// tradicional
for(let i=0; i<cores.length;i++){
  console.log(cores[i]);
}
// impr. azul, verde

// for of                      👍
for (let cor of cores) {
  console.log(cor);
}
// impr. azul, verde

// forEach                     👍
cores.forEach(function(cor) {
  console.log(cor);
});
// impr. azul, verde

Vários métodos de ↓ strings e de vetores ⤥

'Hannah'.toLowerCase() === 'hannah'
'Ovo'.replace('O', 'Ou') === 'Ouvo'
'BR4512348ZY'.substr(0, 2) === 'BR'
'Charmander'.indexOf('arma') === 4

radios.push(92.5);      // insere no final
radios.pop();           // remove do final
cores.unshift('verm');  // insere no início
cores.shift();          // remove do início

Em alguma aula anterior

O HTML visto como uma árvore

::: figure .figure-slides.clean.html-tree :::

Hoje veremos...

Resolvendo Equações!
Inserindo JavaScript na página
Mais tipos de dados
Clicando em um botão

Resolvendo Equações!

para roubar na prova

Atividade de hoje
Elementos HTML para:
- Entrada de números (<input>)
- Rótulos (<label>...</label>)
- Botão (<button>...</button>)

Atividade de hoje

O objetivo é começar a usar JavaScript nas páginas
Você deve criar código JavaScript para calcular as raízes reais de uma equação de segundo grau na forma ax² + bx + c = 0
Baixe os arquivos. Instruções detalhadas estão no arquivo README.
Será necessário utilizar novos elementos HTML:
- Campo de entrada de dados numéricos
- Rótulo (ou label)
- Botão

Campo de entrada de dados numéricos

Usuários podem digitar valores em elementos <input type="...">:
Há vários tipos, como text, date, number
- Hoje vamos usar o type="number":
```
<input type="number" id="qtde-de-pasteis" value="4">
```
  ::: result :::
- É possível estilizá-los para, por exemplo, definir a largura:
```
input[type="number"] {  /* apenas <input>s do tipo "number" */
  width: 40px;
}
```

Entrada de dados numéricos - atributos

Existem alguns atributos do <input type="number">:
- value="...": valor inicial ::: result <input type="number" value="4"> :::
- min="...", max="...": valor mínimo/máximo permitido ::: result <input type="number" min="3" max="5"> :::
- step="...": quanto aumentar/diminuir ao clicar nas setinhas ::: result <input type="number" step="0.2"> :::

Rótulo para o campo de entrada

Além do campo de entrada de dados, é comum colocarmos um texto indicando o que deve ser colocado nele, tipo: Pastéis:
- Chamamos isso de rótulo, ou label e usamos <label>...</label>
- Quando clicado, o rótulo move o foco para o <input>
- É necessário especificar a que <input> ele se refere e isso pode ser feito de duas formas:
  1. ```
  <label>Pastéis: <input type="number" value="4"></label>   
```
2. ```
<label for="qtde-de-pasteis">Pastéis:</label>   
<input type="number" value="4" id="qtde-de-pasteis">        
```

Botões de ação

É possível criar botões com o elemento <button>texto</button>, em que:
- texto é o que aparece dentro do botão:
```
<button id="delicia">Sou um delicioso botão</button>
```
  ::: result Sou um delicioso botão - mas não acontece nada?! :::
- Para atribuir comportamento ao clique do botão, é necessário usar JavaScript!
```
let botaoDeliciaEl = document.querySelector('#delicia');
botaoDeliciaEl.addEventListener('click', function() {
  console.log(':3');
});     // veremos como isso funciona!!
```

Inserindo JavaScript na página

.

Três formas de inclusão:
1. arquivo externo
2. embutido
3. inline

Três formas de inclusão

O navegador executa o código assim que vê o elemento <script></script> e faz download do arquivo apontado

Há 3 formas para incluir:

Arquivo externo 👍👍👍

  ...  <!-- dentro do HEAD -->
  <script src="executa-no-inicio.js"></script>
</head>
<body>
  ...
  <!-- última coisa antes de fechar /BODY -->
  <script src="executa-no-fim-da-pagina.js"></script>
</body>

Inclusão em páginas

Código embutido 👎
```
<script>
  // código javascript aqui, dentro do HTML
</script>
```
- Evitar isto, para não ferir o princípio da separação de responsabilidades entre as 3 linguagens da Web
Inline 👎👎👎
```
<button onclick="javascript: window.alert('papagaio');">Mensagem</button>
```
- Além de ferir o princípio, não tem como reaproveitar o mesmo código para outros elementos

Sumário de inclusão de JavaScript

Código	Quando executa?	Reaproveitamento	Fica no cache?	Boa prática?
Externo	Assim que o navegador vê a inclusão e baixa o arquivo	Máximo: entre todas as páginas	Sim	Sim
Embutido	Assim que o navegador vê o `<script>...</script>`	Médio: apenas dentro da página	Não	Não
Inline	Quando acontece o evento (eg, `click`)	Nenhum	Não	Não

Onde colocar `<script src="..."></script>`?

Pode ser colocado em qualquer lugar da página

Os mais comuns:
1. Ao final do <head> (logo antes de fechá-lo com </head>)
2. Ao final do <body> (logo antes de fechá-lo com </body>)

  ...  <!-- dentro do HEAD -->
  <script src="executa-no-inicio.js"></script>
</head>
<body>
  ...
  <!-- última coisa antes de fechar /BODY -->
  <script src="executa-no-fim.js"></script>
</body>
</html>

Aonde colocar então?
- Prefira ao final do <body>
- Um arquivo JavaScript pode atrasar o desenho da página
- Se atrasar depois que já a desenhou, o usuário nem percebe 👍

Mais tipos de dados

Os primitivos e o complexo

1. Boolean 👀 já vimos
2. Number 👀 já vimos
3. String 👀 já vimos
4. Null ⬅
5. Undefined ⬅
6. Symbol 🌐 Symbols? É de comer?
7. Object ⬅

---

O tipo `4. Null`

Tecnicamente um tipo, mas na prática contém apenas 1 valor: null
```
let x = null;
console.log(typeof x);    // imprime null
```
Usamos quando uma variável não tem um valor aplicável naquele momento

O tipo `5. Undefined`

Parecido com Null, possui apenas 1 valor: undefined
```
let x;
console.log(typeof x);    // imprime undefined
```
É o tipo padrão de variáveis que não foram associadas a nenhum valor

O tipo `7. Object`

É um "saquinho" de propriedades:
```
let jogador = {
  pontos: 1420,
  vidas: 2
};
console.log(jogador.pontos);
// imprime 1420
```
- Propriedade: (nome → valor)
  - Nome: uma String
  - Valor: qualquer coisa, exceto undefined
No exemplo, o objeto tem 2 propriedades:
1. Nome: pontos, valor: 1420
2. Nome: vidas, valor: 2

Para acessar as propriedades, há 2 formas:

// notação ponto
console.log(jogador.vidas);

// notação colchete
console.log(jogador['vidas']);

Objetos conhecidos

::: did-you-know .push-right width: 250px; Quando um objeto tem uma propriedade que é uma função, chamamos ela de método. ::: Há vários objetos comuns que usamos no dia a dia: Math, console, window. Exemplos:
- O objeto Math possui uma propriedade:
  - ```
  Math.PI
```
  (PI → 3.14159) (cujo valor é Number)
- O objeto console possui uma propriedade
  - ```
  console.log
```
  (log → function() {...})
- O objeto window possui uma propriedade
  - ```
  window.alert
```
  (alert → function() {...})
E se quisermos criar nossos próprios objetos? #mcfaz?

Criando um objeto (2 formas)

Na forma literal:

let jogador = {             // forma mais expressiva, curta e sexy 😎
  pontos: 1420,             // propriedades separadas por vírgula
  vidas: 2
};

let jogador = {};           // um objeto vazio: { }
jogador.pontos = 1420;      // criou jogador.pontos com valor 1420
jogador.vidas = 2;          // criou jogador.vidas

Novas propriedades podem ser atribuídas mesmo após sua criação!

Na forma do operador new:
- ```
let jogador = new Object();
jogador.pontos = 1420;
jogador.vidas = 2;
```
  - Contudo, desta forma sempre cria-se um objeto vazio e deve-se preenchê-lo

Objetos dentro de objetos

let voo = {
    companhia: 'Gol',
    numero: 815,
    decolagem: {
        IATA: 'SYD',
        horario: '2004-09-22 14:55',
        cidade: 'Sydney'
    },
    chegada: {
        IATA: 'LAX',
        horario: '2004-09-23 10:42',
        cidade: 'Los Angeles'
    }
};

Aqui existem 3 objetos:
- O voo, com as propriedades:
  - companhia
  - numero
  - decolagem
  - chegada
- decolagem e chegada são objetos por si mesmos

Métodos de objetos

const loja = {
  livros: [       // prop. é um vetor
    'macunaíma',
    'torre negra'
  ],
  dinheiro: 500,  // propri. é number
  
  // método vender
  vender: function() { // p. é função
    this.dinheiro += 15;
  } 
};

loja.vender(); // loja.dinheiro = 515
loja.vender(); // loja.dinheiro = 530

O valor de uma propriedade pode ser uma função
- Nesse caso, chamamos ela de método
- Todo método tem acesso ao próprio objeto com o ponteiro this
- Objetos com métodos formam o princípio do conceito de Orientação a Objetos

Outros tipos, baseados em `Object`

Existem outros tipos complexos, que são baseados em Object:

Date ~ Por exemplo, para imprimir o horário atual no console: js let agora = new Date(); console.log(agora); //Sun Jan 17 2021 18:11:46...

Function ~ (sim! funções são objetos em JavaScript)

Array ~ (vetores também são objetos)

SeuProprioTipo™ ~ (é possível criar novos tipos também)

Clicando em um botão

Dando comportamento à página

Conhecendo o DOM
Selecionando um elemento
Criando um evento de clique

Nosso plano...

Para fazer algo acontecer quando um botão for pressionado, precisamos, em JavaScript:
1. Criar uma função com o código que será executado quando o botão for clicado
2. Recuperar o elemento HTML do botão e colocá-lo em uma variável
3. Atribuir a função ao evento de clique do botão
Já sabemos criar funções (tradicionais e anônimas), então vamos para o item 2...

Conhecendo o DOM

O DOM é uma visão dos elementos HTML da página como uma árvore:

<!DOCTYPE html>
<html>
<head>
  <title>HTML</title>
</head>
<body>
  <!-- Add your content here -->
</body>
</html>

DOM: Document Object Model
- É a versão "viva" do código HTML da página [DOM]: Document Object Model

O objeto document

O objeto document dá acesso ao Document Object Model, ou DOM
Por exemplo, para pegar um elemento a partir de seu id e colocá-lo em uma variável:
```
let botaoDeliciaEl = document.querySelector('#botao-delicia');
```
- Agora é possível fazer várias coisas com o botão, como:
  1. Associar um evento de clique
    - Veja nos próximos slides
  2. Pegar ou alterar seus atributos
  3. Alterar seu texto
  4. Alterar seu estilo

Selecionando um elemento

A função document.querySelector(seletor) permite que, a partir de um código JavaScript, recuperemos um elemento do DOM
- Ela recebe um único argumento que é um seletor CSS. Exemplo:
```
let logoEl = document.querySelector('#logomarca');
let tabelaEl = document.querySelector('#tesouros-pirata');
let principalEl = document.querySelector('main');
```
  - Ela retorna um elemento HTML que pode ser alterado
- Também existe document.querySelectorAll(seletor) (repare o all), que retorna mais de um elemento, mas veremos ele depois

Criando um evento de clique

Para executar alguma coisa quando um botão (ou qualquer elemento, na verdade) é clicado, precisamos registrar uma função para ser chamada quando um clique for feito nele:

// recupera o elemento do botão no DOM
let botaoDeliciaEl = document.querySelector('#botao-delicia');

// atrela uma função ao evento de 'click' do botão
botaoDeliciaEl.addEventListener('click', function() { /* ... */ });

Chamamos essa função de callback

Exemplo de callback

Uma callback é só um nome especial para quando uma função passada como argumento:

// recupera o elemento do botão no DOM
let botaoDeliciaEl = document.querySelector('#botao-delicia');

// atrela uma callback ao evento de 'click' do botão
botaoDeliciaEl.addEventListener('click', function() {
  alert('O botão delícia foi clicado!!');
  // pode fazer várias coisas aqui
});

Implementando a função antes

É possível implementar a função antes da linha onde ela é atribuída ao evento de clique:

// define a função 'mostraMensagem'
function mostraMensagem() {
  alert('O botão delícia foi clicado!!');
}

// atrela uma função ao evento de 'click' do botão
botaoDeliciaEl.addEventListener('click', mostraMensagem);

Isso costuma deixar o código mais legível e organizado 👍

Usando o valor de um `input`

Para pegar o valor digitado em um <input>:

let qtdePasteisEl = document.querySelector('#qtde-de-pasteis');
let quantidade = qtdePasteisEl.value;
console.log(quantidade);    // imprime valor que estava no input

Para definir o valor mostrado no <input> usando JavaScript:

let qtdePasteisEl = document.querySelector('#qtde-de-pasteis');
qtdePasteisEl.value = 25;

Referências

Capítulo 2 do livro "Javascript: The Good Parts"
Mozilla Developer Network (MDN)

Erros comuns durante a prática

01. Falhar na indentação e arejamento (1/2)

01. Falhar na indentação e arejamento (2/2)

02. Código com baixa legibilidade

03. Esquecer `alert` ou `console.log`

04. Nome genérico para arquivo

05. Sufixo "El" para certas variáveis

❌

✅

Files

js1

Directory actions

More options