jrmmendes/const-var-let.md

## const-var-let.md

      
    Raw
  

              const-var-let.md
            
          
    Variáveis e Constantes


Não utilize var: existem problemas com escopo associados (o único caso em que ocorre algo bem comportado é com escopo de funções. Em outros blocos, ele irá vazar.

Por exemplo, o seguinte código retornará erro:
function sayHello(){
 var text = 'Hello world';
 console.log(text);
}

console.log(text);
Porém, o seguinte executará normalmente:
function imprimeIdade() {
  for (var idade = 30; idade <= 40; idade++) {
    console.log('Idade dentro do for:', idade)
  }
  console.log('Idade fora do for:', idade)
}
imprimeIdade();
E o escopo da variável não ficará dentro do for (o que pode gerar problemas);

Crie variáveis sempre com uso de let e constantes com o uso de const;

Objetos/Arrays

Usando a palavra reservada const você não será capaz de reatribuir o conteúdo, mas para objetos e estruturas dinâmicas, as propriedades e elementos podem ser mudadas. Por exemplo, o seguinte não irá funcionar:
const person = { name: 'Junior', age: 20 };
person = { name: 'Amancio', age: 21 };
Mas isso é possível:
const person = { name: 'Junior', age: 20 };
person.name ='Amancio';
person.age = 21;
(Basicamente, a refência é constante, mas os valores das propriedades podem mudar).

  
## document-object-model.md

      
    Raw
  

              document-object-model.md
            
          
O Modelo de Objeto de Documento  (DOM) é uma interface de programação para documentos HTML, XML e SVG . Ele fornece uma representação estruturada do documento como uma árvore. O DOM define métodos que permitem acesso à árvore, para que eles possam alterar a estrutura, estilo e conteúdo do documento. O DOM fornece uma representação do documento como um grupo estruturado de nós e objetos, possuindo várias propriedades e métodos. Os nós também podem ter manipuladores de eventos que lhe são inerentes, e uma vez que um evento é acionado, os manipuladores de eventos são executados. Essencialmente, ele conecta páginas web a scripts ou linguagens de programação.

Fazendo queries

Você pode utilizar diversos métodos para fazer queries no DOM. Estes métodos podem ser acessados por qualquer elemento, sendo o document a raiz do DOM (tag html).
TL;DR


Query por ID: getElementById(id)
Query por classe: getElementsByClassName(className) (lista de elementos)
Query por tag: getElementsByTagName(tagHTML) (lista de elementos)
Query com seletores CSS: querySelector(queryCSS) ou querySelectorAll(queryCSS).

Exemplos

Imagine o seguinte HTML:
<!DOCTYPE html>
<html>
  <body>
    <div class="card" id="first-card">
      <h1 class="title"> Hello world </h1>
      <p class="description"> Lorem ipsum sit amet. </p>
    </div>
    
    <div class="card" id="second-card">
      <h1 class="title"> Hello world </h1>
      <p class="description"> Lorem ipsum sit amet. </p>
    </div>
  </body>
</html>
As seguintes queries podem ser feitas:
Selecionar todos os elementos com classe `card':

const cards = document.getElementsByClassName('card');
ou
const cards = document.querySelectorAll('.card');
Selecionar o elemento com id first-card:

const firstCard = document.getElementById('first-card');
ou
const firstCard = document.querySelector('#first-card');

Selecionar os elementos com tag <div>:

const divs = document.getElementsByTagName('div');
ou
const divs = document.querySelectorAll('div');

  
## events.md

      
    Raw
  

              events.md
            
          
    Os eventos são coisas que podem acontecer (possivelemente no HTML) e ativarem reações pelo javascript (uma implementação de um design pattern conhecido como Observable).
TL;DR


Elementos HTML podem emitir diversos eventos (e.g. click, mouseenter, mousehover);
Listeners podem ser criados através do método addEventListener a partir do elemento de interesse do DOM;
Sempre que o evento for desparado, o listener executará a ação associada.

Exemplo

Pense no seguinte código HTML:
<body>
  <button id="target-button"> Click-me </button>
</body>
É possível fazer diversas ações ao clickar nesse botão com o seguinte código:
function myAction(){
  //o que deve ser feito
}

// selecionando o elemento no DOM
const targetButton = document.querySelector('#target-button');

// Criando um eventListener e associado ao elemento com a função de interesse
targetButton.addEventListener('click', myAction);