cefet_web

JavaScript parte 4

Estilizando elementos, Interação com campos, Eventos de mouse e o PhotoSnap 📷

Na última aula… (1/2)

O document.querySelectorAll retorna todos que forem selecionados

É possível alterar o conteúdo de um elemento com elemento.innerHTML:

let contador = 0;
let contadorEl = document.querySelector('#contador');
  
// quando clicado, (1) conta e (2) altera conteúdo
contadorEl.addEventListener('click', () => {
  contador++;                       // (1) conta
  contadorEl.innerHTML = contador;  // (2) altera
});

Na última aula… (2/2)

Alterando classes de um elemento:

booEl.classList.toggle('selecionado');   // add, remove ou toggle (alternar)

Alterando atributos de um elemento:

pokemonLutandoEl.src = 'bulbasaur.png';  // qualquer atributo, aqui foi src

Usando o argumento da callback de um evento:

booEl.addEventListener('click', function(e) {
  let clicadoEl = e.currentTarget;       // elemento alvo (target) do evento
  clicadoEl.classList.toggle('selecionado');
});

Hoje veremos

Estilizando elementos dinamicamente
Interação com campos
Eventos de mouse e formulário
PhotoSnap 📷

Estilizando elementos dinamicamente

Alterando propriedades CSS de elementos

De 2 formas diferentes:
1. Usando classes (já vimos):
  - el.classList.add(...)
  - el.classList.remove(...)
  - el.classList.toggle(...)
2. Usando propriedade style

Alterando o estilo de elementos

Há 2 formas para alterar o estilo de elementos:

Adicionando ou removendo classes (já vimos):

booEl.classList.add('selecionado');    // adiciona .selecionado
botaoEl.classList.remove('oculto');    // remove .oculto

Usa a propriedade .classList do elemento

Alterando a propriedade style:

botaoEl.style.width = '80%';           // define largura como 80%
botaoEl.style.paddingTop = '2px';      // padding-top vira paddingTop

Usa a propriedade .style do elemento

Nomes das propriedades de estilo em JS

Repare a mudança das propriedades CSS para JS:
```
botaoEl.style.backgroundColor = '#cccccc';
```
- CSS ➡️ JavaScript
  - background-color ➡️ backgroundColor
  - border-radius ➡️ borderRadius
  - margin ➡️ margin
  - list-style-type ➡️ listStyleType
  - z-index ➡️ zIndex
  - etc.

Isso acontece porque em JavaScript não podemos usar hífens:

let nome-da-variavel = 'incorreto'; // Uncaught SyntaxError: Unexpected token -

Usar classes ou `elemento.style`?

Devemos preferir usar classes, porque a estilização fica por conta do arquivo CSS
- Lembre-se do princípio da separação de responsabilidades

Contudo, em certos casos é melhor ou necessário usar .style:

Quando precisamos calcular, em JavaScript, o valor de uma propriedade

Exemplo: abelhinhas.js

.abelhinha {
  position: absolute;   /* precisamos de position: absolute */
  left: ??;             /* mas como calcular left e top? */
  top: ??;              /* tem que ser via JavaScript =) */
}

Exemplo: abelhinhas.js

// cria um objeto abelhinha
let abelhinha = {
  x: 0,   // pos. x inicial
  y: 0,   // pos. y inicial
  imagemEl: document.querySelector('#abelhinha')
};

// função que acha a nova posição
function atualizaAbel() {
  abelhinha.x += 1;
  abelhinha.y += Math.sin(abelhinha.x);

  abelhinha.imagemEl.style.left = `${abelhinha.x}px`;
  abelhinha.imagemEl.style.top = `${abelhinha.y}px`;
}

// registra a função em um intervalo
setInterval(atualizaAbel, 33);

Interação com campos

Campos de entrada e escolha

Relembrando
Interação com campos de dados
Interação com campos de escolha

Caixa de texto (p/ usuário digitar)

Elemento HTML onde o usuário pode digitar qualquer coisa
Formato:
```
<input id="palavra" type="text" placeholder="Digite..."> 
<input id="palavra">
<input>
```
- type="text" é o valor padrão para o input
- placeholder="um texto..." define um texto de ajuda que só aparece quando não há nada digitado ::: result :::

Interagindo via JavaScript

Todo <input> possui o atributo value, que é o valor padrão. Exemplo:
- <input type="number" value="5">:

Para pegar (get) ou definir (set) o valor atual via JavaScript, (a) pegamos o elemento no DOM e (b) acessamos a propriedade value:

let quantidadePizzasEl = document.querySelector('#qtde-pizzas');


// podemos pegar o valor atual no console acessando .value:
let qtdePizzasAtual = quantidadePizzasEl.value; // botão 1
alert(qtdePizzasAtual);


// ou podemos definir um novo valor para o elemento:
quantidadePizzasEl.value = 25;                  // botão 2

Checkbox: caixinha de marcação

Formato:
```
<label>
  <input id="emails" type="checkbox" value="sim"> Inscrever?
</label>
```
- !! Se não colocarmos um <label></label>, o usuário precisará clicar exatamente na caixinha ::: result
  Inscrever (com label)?
  Inscrever ~~(com label)~~?
  
  :::
Atributos:
- checked, para deixar previamente marcado
```
<input id="..." type="checkbox" checked>
```

Radio: escolha dentro de um grupo

Formato:

<label>
  <input type="radio" name="cor" value="azul">Azul
</label>
<label>
  <input type="radio" name="cor" value="verde">Verde
</label>

::: result
Azul Verde

:::

Atributo name: define qual é o nome do input ao enviar o fomulário para o servidor
Repare que apenas uma cor pode ser escolhida
- porque os dois <input> têm o mesmo name

Select e options (lista de opções)

::: result .push-right margin-left: 1em; margin-top: 1.25em Sabor da pizza: ::: Formato:

<label for="sabor">Sabor da pizza:</label>
<select id="sabor">
  <option value="marg">Marguerita</option>
  <option value="muzza" selected>Frango</option>
</select>

Atributos:
- selected, para o option, para deixar selecionado
- multiple, para o select, para permitir mais de um option

Interagindo via JavaScript (2)

Verificando se um checkbox está marcado: Inscrever?

let desejaInscreverEl = document.querySelector('#inscrever');
let estaMarcado = desejaInscreverEl.checked;   // elemento.checked: true/false

Pegando qual opção selecionada em um select:

let saborPizzaEl = document.querySelector('#pizza');
let sabor = saborPizzaEl.value;   // elementoSelect.value: valor da option

Pegando qual a opção marcada em um grupo de radio: Azul Verde
```
let corMarcadaEl = document.querySelector('[name="cor"]:checked');
let cor = corMarcadaEl.value;   // elemento.value: valor do input
```
- Repare o seletor: todo elemento com atributo name="cor" e que esteja no estado :checked (marcado)

Eventos de mouse e campos

Acionados mouse ou teclado

Relembrando event handlers
Eventos ao movimentar o mouse
Eventos de campos

Eventos

Eventos são associados a elementos específicos e causam a invocação de uma função “manipuladora” (event handler ou apenas handler)
Eventos relacionados ao mouse:
- click (clique simples) .
- dblclick (clique duplo) .
- mousedown (press. um botão) .
- mouseup (liberou um botão) .
- mousemove (movimentou) .
- mouseover (sobrevoou um elem.) .
- mouseout (saiu de um elemento) .

Event handlers

Forma bacana :thumbsup::
```
botaoEl.addEventListener('click', umaFuncao);
```
- Pode haver mais de um handler :thumbsup:

É possível retirar também:

botaoEl.removeEventListener('click', umaFuncao);

Comparação: click vs mousedown vs mouseup

mousedown: evento invocado ao apertar o botão do mouse
mouseup: evento invocado ao soltar o botão do mouse
click: após ter sido efetuado o click no mouse
Exemplo:

Comparação: mouseover vs mousemove vs mouseout

Eventos invocados quando:
- mouseover: o mouse entra no elemento
- mousemove: o mouse se movimenta dentro do elemento
- mouseout: o mouse sai do elemento
- Exemplo:

Pegando (x,y) do mouse

Todos os eventos de mouse informam a posição (x,y) do mouse
- Essa informação está em e.pageX e e.pageY

Exemplo: segue-mouse.js

Eventos de campos de formulários

Eventos de entrada de dados:
- change ou input (modificou definitiva ou instantaneamente)
- blur (perdeu foco)
- focus (ganhou foco)
- keydown (pressionou uma tecla)
- keyup (liberou uma tecla)
(Muitos) outros tipos: Eventos na MDN

PhotoSnap 📷

Registrando seus clicks

Atividade de hoje
Atributos de dados
Propriedade CSS filter

PhotoSnap 📷

Crie a página PhotoSnap 📷
- Repositório no GitHub para fazer seu fork
Há 4 exercícios + 1 desafio
Vamos exercitar:
1. diferentes eventos (mouseover, mouseout, mousemove, input);
2. colocar e remover classes;
3. definir o conteúdo de um elemento;
4. exercitar template strings;
5. recuperar e definir atributos de dados;
6. interagir com vários tipos de campos de dados e de escolha;
7. uso da propriedade CSS filter…

Atributos de dados em HTML (1/2)

Podemos criar novos atributos para elementos HTML
- Seu nome deve começar com data- (atributos de dados)

Podem ser usados para estilizar:

<a href="#" data-fecha-modal>✕</a>

[data-fecha-modal] {
  border-radius: 50%;
  background: silver;
}

Podem ser usados em JavaScript:

const fecharEl = modalEl.querySelector('[data-fecha-modal'])
fecharEl.addEventListener('click', ...)

Mais exemplos no próximo slide

Atributos de dados em HTML (2/2)

Para acessar o valor de um atributo de dados, supondo um:
<... data-nome-do-atributo="valor">
```
// pegando o valor
const valor = el.dataset.nomeDoAtributo;
// definindo o valor
el.dataset.nomeDoAtributo = valor;
```
- Repare que o nome do atributo foi “camelCased”

Armazenando informação e usando via JavaScript:

<img src="..." alt="..." data-colecao="verao">
<img src="..." alt="..." data-colecao="verao">
<img src="..." alt="..." data-colecao="inverno">
<img src="..." alt="..." data-colecao="inverno">
<img src="..." alt="..." data-colecao="outono">
<img src="..." alt="..." data-colecao="primavera">
<img src="..." alt="..." data-colecao="primavera">

// da imagem que foi clicada, descobrir sua coleção
const imgs = document.querySelectorAll('img');
imgs.forEach(el => 
  el.addEventListener('click', e =>
    alert(e.currentTarget.dataset.colecao)
  )
);

Propriedade CSS `filter`

É possível aplicar diferentes efeitos em elementos:
- ```
  .f1 { filter: blur(2px); }
  .f2 { filter: brightness(1.5); }
  .f3 { filter: contrast(5); }
  .f4 { 
    filter: drop-shadow(2px 2px 2px black);
  }
  .f5 { filter: grayscale(1); }
  .f6 { filter: hue-rotate(45deg); }
  .f7 { filter: invert(1); }
  .f8 { filter: opacity(0.2); }
  .f9 { filter: sepia(1); }
  .f10 { filter: saturate(5); }
```
  - Referência na MDN
- ::: result .full-width display: grid; grid-template-rows: repeat(2, 1fr); grid-template-columns: repeat(5, 1fr); gap: 1em;
  
  :::

cefet_web

JavaScript parte 4

Estilizando elementos, Interação com campos, Eventos de mouse e o PhotoSnap 📷

Na última aula… (1/2)

Na última aula… (2/2)

Hoje veremos

Estilizando elementos dinamicamente

Alterando propriedades CSS de elementos

Alterando o estilo de elementos

Nomes das propriedades de estilo em JS

Usar classes ou elemento.style?

Exemplo: abelhinhas.js

Interação com campos

Campos de entrada e escolha

Caixa de texto (p/ usuário digitar)

Interagindo via JavaScript

Checkbox: caixinha de marcação

Radio: escolha dentro de um grupo

Select e options (lista de opções)

Interagindo via JavaScript (2)

Eventos de mouse e campos

Acionados mouse ou teclado

Eventos

Event handlers

Comparação: click vs mousedown vs mouseup

Comparação: mouseover vs mousemove vs mouseout

Pegando (x,y) do mouse

Exemplo: segue-mouse.js

Eventos de campos de formulários

PhotoSnap 📷

Registrando seus clicks

PhotoSnap 📷

Atributos de dados em HTML (1/2)

Atributos de dados em HTML (2/2)

Propriedade CSS filter

Referências

Usar classes ou `elemento.style`?

Propriedade CSS `filter`