cefet_front_end

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 ultima 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

Uma árvore com os elementos HTML

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>)

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">

Resultado:

É 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
  
  <input type=”number” value=”4”>
- min="...", max="...": valor mínimo/máximo permitido
  
  <input type=”number” min=”3” max=”5”>
- step="...": quanto aumentar/diminuir ao clicar nas setinhas
  
  <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>
```
- 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

Formas de insercao de JS:

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 :thumbsup::thumbsup::thumbsup:

  ...  <!-- 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 :thumbsdown:
```
<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 :thumbsdown::thumbsdown::thumbsdown:
```
<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>) ```html …
  </head>
  ...
  </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?][symbol]
7. Object ⬅

[symbol]: https://medium.com/trainingcenter/javascript-symbols-decifrando-o-mist%C3%A9rio-383e359e64e3

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

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 botao

Dando comportamento para a pagina

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 :thumbsup:

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

❌

✅