2

DOM - Parte 3

#JavaScript
Paulo Alexandre
Paulo Alexandre

Para esse exercicio iremos usar LESS (um compilador de CSS).

Um compilador é um programa que converte linguagem em código. Em nosso caso, LESS é a linguagem e CSS é o código de saída. Utilizamos compiladores para fornecer mais recursos do que o CSS padrão pode oferecer.


Instalar nosso ambiente de trabalho pode ser assustador no início. Estaremos cobrindo muito terreno.


Instruções de instalação passo a passo para PC

Etapa 1: instalar o Node.js


Etapa 2: instalar o Git Bash (Git SCM)


Depois que o instalador terminar, abra git bash e execute node -v para garantir que o node esteja instalado corretamente.


Se você não vir alguns números de versão do Node na janela do git bash, reinicie o git bash e tente novamente


Etapa 3: instalando LESS


NOTA: Você verá que nossos comandos têm -g neles. Escreva os comandos exatamente como os vê. A instalação global de pacotes é ideal para nossa situação.


Abra o git bash e execute

npm install -g less

Se não estiver funcionando, reinicie seu git bash e tente novamente


Etapa 4: Instale o less-watch-compiler


Abra o git bash e execute

npm install -g less-watch-compiler


Etapa 5: use less-watch-compiler em seu projeto


Dê 'Fork' no seguinte repositorio:

https://github.com/PauloFurtunatoAlexandre/Preprocessing-I/tree/Paulo-Alexandre


CD em seu projeto em sua máquina local

Quando estiver na raiz de seu projeto, execute less-watch-compiler less css index.less


Seu projeto deve estar instalado e funcionando, altere alguns estilos em seu arquivo .less e salve o arquivo para ter certeza de ver uma alteração em seu CSS.


Bom trabalho, está tudo pronto!


Visão Geral

Usamos Javascript para tornar nossas páginas dinâmicas e utilizáveis. Agora que podemos acessar e manipular elementos em nossa página, você pode estar se perguntando: “Por que não mudamos apenas os elementos no arquivo HTML diretamente? Por que temos que passar por tudo isso apenas para mudar o estilo de um elemento? ” Essas são perguntas válidas, e da maneira como temos usado Javascript até agora, faria sentido mudar nosso HTML.


Mas, o verdadeiro poder do Javascript está em sua capacidade de tornar as páginas interativas. Além de manipular elementos, o Javascript também nos permite adicionar recursos e fazer modificações em nosso site, reagindo diretamente às interações do usuário. Pense em um clique de botão, arrastar e soltar, zoom ou qualquer número de interações do usuário. Criamos funcionalidade para essas interações usando JavaScript. Agora que sabemos como manipular e modificar os nós DOM, podemos aprender sobre os eventos.


Cada interação do usuário com um site é um evento: um clique, mover o mouse, rolar a página, pressionar uma tecla do teclado, são todos eventos da página e o navegador pode detectar todos eles. Existem muitos eventos diferentes que o navegador rastreia. Quando um evento ocorre em uma página, é conhecido como gatilho.


Agora que sabemos o que é um evento e sabemos que o navegador está sempre rastreando-os, precisamos ser capazes de ouvir eventos específicos em elementos específicos. Um usuário clicou nesse botão? O mouse do usuário passou sobre um elemento? Foi inserido algum texto no campo de entrada? Existem dezenas de eventos que um elemento pode escutar. Quando um desses eventos acontece naquele elemento, podemos fazer algo a respeito. O processo de rastreamento e a ação subsequente executada são chamados de event listener - "ouvir um evento". Colocamos um event listener em um elemento e fornecemos um retorno de chamada. Quando esse evento é disparado no elemento, o retorno de chamada é executado.


Visão Geral

.addEventListener

Assim que tivermos um elemento selecionado, podemos usar o método ‘.addEventListener’ nesse elemento. .addEventListener leva dois argumentos, primeiro o evento para ouvir e, segundo, o retorno de chamada para disparar quando o evento for disparado. Para uma lista completa de eventos, consulte os recursos abaixo. Em uso, parece algo como element.addEventListener ('click', callback);


Eventos

Vimos antes que existem diferentes tipos de eventos que podemos ouvir. Os mais comuns são eventos de mouse destacados pelo evento ‘click’, mas existem dezenas de outros eventos que podemos ouvir. Podemos adicionar ouvintes de eventos para tantos eventos quantos houver para cada elemento, o que significa que podemos ouvir um clique do mouse, pressionamento de tecla, foco e mais, tudo no mesmo elemento. Embora para fazer isso, precisamos chamar .addEventListener e passar um retorno de chamada para cada um.


Andando a segunda milha:

Reserve 5 minutos e estude esta página MDN. Escolha um evento que NÃO seja um evento de mouse e leia sobre ele e como funciona:

MDN


O retorno de chamada e o objeto de evento

O retorno de chamada (também conhecido como manipulador de eventos) terá um único argumento; isso é conhecido como objeto de evento. Este é um objeto Javascript e contém tudo o que precisamos saber sobre o evento e o elemento em que ele aconteceu.


por exemplo: element.addEventListener ('click', (event) => {// Handle event});

Uma das propriedades mais importantes do objeto de evento é .target, essa propriedade nos dará todas as informações sobre o nó DOM onde o evento aconteceu. Ele tem muitas das mesmas propriedades de um nó DOM regular, .children, .parent, .style, innerText, etc. Podemos usar essas propriedades para manipular o próprio elemento ou seus parentes.


Podemos usar isso para manipular o alvo da maneira que quisermos, por exemplo, para alterar a cor de fundo, escreveríamos o seguinte: element.addEventListener ('click', (event) => {event.target.style.backgroundColor = ' blue ';});


Dependendo do tipo de evento ouvido, podemos ter acesso a outras informações sobre o evento também, como a tecla pressionada (na forma de um código) e outras coisas. Passe 5 minutos lendo sobre o objeto de evento aqui: Objeto de evento MDN: Propriedades


Depois precisaremos falar sobre os event bubbles/event propagation, mas vamos deixar isso para uma proxima oportunidade.

0
14

Comentários (0)

Front End Developer

Estados Unidos