Photo by Blake Connally on Unsplash

Javascript all you need to get start

O que é JavaScript?

JavaScript (JS) é uma linguagem de programação amplamente utilizada, inicialmente desenvolvida para adicionar interatividade às páginas web. Ela é uma linguagem de script que pode ser integrada ao HTML e CSS para criar páginas web dinâmicas.

Composição do JavaScript

JavaScript é composto por vários elementos fundamentais, incluindo:

1. Sintaxe Básica: As regras e estruturas que definem como o código JavaScript deve ser escrito.
2. Tipos de Dados: Inclui números, strings, arrays, objetos, booleanos, null, undefined e símbolos.
3. Operadores: Ferramentas para realizar operações em variáveis e valores.
4. Funções: Blocos de código reutilizáveis que podem ser chamados em qualquer parte do programa.
5. Objetos: Estruturas que contêm dados e funcionalidades relacionadas.
6. Eventos: Ações ou ocorrências que acontecem no navegador, que podem ser manipuladas pelo JavaScript.
7. DOM (Document Object Model): Representação do conteúdo de uma página web que pode ser manipulada usando JavaScript.
8. API do Navegador (Browser Object Model BOM): Funcionalidades adicionais fornecidas pelos navegadores, como armazenamento local, geolocalização e manipulação de elementos HTML.

JavaScript foi criado por Brendan Eich em 1995, enquanto trabalhava na Netscape Communications Corporation. Originalmente chamado de Mocha, foi renomeado para LiveScript e, finalmente, para JavaScript.

Características Principais

1. Linguagem Dinâmica: JavaScript é uma linguagem de tipagem dinâmica, o que significa que as variáveis não têm tipos fixos.
2. Orientação a Objetos: Suporta programação orientada a objetos com protótipos e classes.
3. Event-Driven: Muitas operações em JavaScript são baseadas em eventos, como cliques do mouse ou carregamento de páginas.
4. Linguagem Interpretada: O código JavaScript é interpretado pelo navegador em vez de ser compilado.

Variáveis e tipo de dados em javascript

Operadores

Operadores aritmeticos

Operadores relacionais

Operadores lógicos

Operadores shortcut de atribuição

Operadores Bitwise

Estruturas condicionais, Seleção, Repetição e Exceção

Modelo de Objeto de Documento (Document Object Model aka DOM)

O Modelo de Objeto de Documento (DOM) é uma maneira de conectar páginas web a scripts ou linguagens de programação, como o JavaScript. Ele faz isso representando a estrutura de um documento (como o HTML de uma página web) na memória do computador.

Pense no DOM como um mapa da sua página web. Esse mapa ajuda o JavaScript a encontrar e modificar partes da página. Mesmo que o DOM seja mais frequentemente usado com JavaScript, ele também pode ser usado para modelar documentos HTML, SVG ou XML como objetos, embora isso não seja parte essencial da linguagem JavaScript em si.

Resumidamente o DOM é como uma árvore de família para um documento (como uma página web). Cada ramo termina em um “nó,” e cada nó é como um membro da família que contém informações.

Você pode usar comandos do DOM para mudar a árvore, como adicionar ou remover membros da família, mudar suas roupas (estilo) ou o que eles dizem (conteúdo).

Os nós também podem ter “botões” que acionam ações. Quando você aperta um desses botões, a ação acontece.

Does DOM matters to HMTL how?

Um documento com HTML é descrito usando a interface Document, que é melhorada pela especificação HTML para incluir várias funcionalidades específicas do HTML. Em particular, a interface Element é aprimorada para se tornar HTMLElement e várias subclasses, cada uma representando um ou um grupo de elementos relacionados.

A API do HTML DOM oferece acesso a várias funcionalidades do navegador, como abas e janelas, estilos CSS e folhas de estilo, histórico do navegador, etc. Essas interfaces são discutidas mais detalhadamente na documentação da API do HTML DOM.

Para deixar mais simples:

• Documento com HTML: Pensa no HTML como um livro.
• Interface Document: É a descrição do livro.
• Interface Element/HTMLElement: São os capítulos e seções do livro.
• API do HTML DOM: São ferramentas que ajudam a controlar coisas no navegador, como abas, janelas e estilos.

Explorando as interfaces (Document e Eelement/HTMLElement)

Começando pelo objecto Document

Documento (Document)

A interface Document representa qualquer página web carregada no navegador e serve como um ponto de entrada para o conteúdo da página, que é a árvore do DOM.

A árvore do DOM inclui elementos como <body> e <table>, entre muitos outros. Ela oferece funcionalidades globais para o documento, como obter a URL da página e criar novos elementos no documento.

DOM tree represented

Acima uma representação da árvore DOM que é uma estrutura em árvore cujos nós representam o conteúdo de um documento HTML ou XML.

O Constructor Document

Document or Element or HTMLElement's (Instance properties)

Vamos explorar o contrutor Document , suas propriedades e métodos, este contructor or interface ela herda o object oNode e EventTarget

Document.activeElement

Document.activeElement é uma propriedade somente leitura que retorna o elemento que atualmente tem o foco.

Exemplos:

1. Realçar o elemento focado dinamicamente: neste exemplo, adiciona uma borda vermelha ao elemento que recebe o foco

//css

 .highlight {
      border: 2px solid red;
    }

//html
  <input type="text" placeholder="Clique aqui" id="input1">
  <input type="text" placeholder="Ou aqui" id="input2">


//js
 <script>
    document.addEventListener('focusin', () => {
      document.querySelectorAll('.highlight').forEach(el => el.classList.remove('highlight'));
      if (document.activeElement.tagName === 'INPUT') {
        document.activeElement.classList.add('highlight');
      }
    });
  </script>

Exemplo 2 : Mostrar o nome do elemento focado em tempo, neste exemplo exibe o nome da tag do elemento atualmente focado em um div. Quando o foco muda, a exibição é atualizada automaticamente.

//html
  <input type="text" placeholder="Digite algo aqui" id="input1">
  <textarea placeholder="Ou aqui"></textarea>
  <div id="output"></div>

//jsscript
 <script>
    function updateActiveElement() {
      document.getElementById('output').textContent = 'Elemento ativo: ' + document.activeElement.tagName.toLowerCase();
    }
    document.addEventListener('focusin', updateActiveElement);
    document.addEventListener('focusout', updateActiveElement);

    updateActiveElement();

  </script>

Desafio-1: Reproduzir o seguinte: desativa um botão enquanto um campo de entrada (input) especificamente of campo senha está focado. O botão é reativado quando o foco sai do input e somente se a senha for maior que 8.

como será seu html: dois inputs e um botão , input(name), input(password)?

Document.body

Document.body é uma propriedade que retorna o nó <body> ou <frameset> do documento atual.

Exemplos

1. Alterar o estilo do <body> dinamicamente:

//html

<button id="changeStyle">Mudar Estilo do Corpo</button>

//script
<script>
    document.getElementById('changeStyle').addEventListener('click', () => {
      document.body.style.backgroundColor = 'lightblue';
      document.body.style.fontFamily = 'Arial, sans-serif';
      document.body.style.color = 'darkblue';
    });
  </script>

Exemplo-2: Adicionar elementos ao <body> dinamicamente:

//html
 <button id="addElement">Adicionar Elemento</button>

//script

 <script>
    document.getElementById('addElement').addEventListener('click', () => {
      const newDiv = document.createElement('div');
      newDiv.textContent = 'Este é um novo elemento adicionado ao corpo.';
      newDiv.style.border = '1px solid black';
      newDiv.style.padding = '10px';
      newDiv.style.margin = '10px 0';
      document.body.appendChild(newDiv);
    });
  </script>

Exemplo-3:(Detectar a rolagem da página: scroll event) exibir a posição atual de rolagem da página em um div fixo no canto superior esquerdo. O texto é atualizado sempre que ocorre a rolagem.

//css

    body {
      height: 2000px; /* Para permitir rolagem */
    }
    #scrollStatus {
      position: fixed;
      top: 10px;
      left: 10px;
      background: rgba(0, 0, 0, 0.7);
      color: white;
      padding: 5px;
      border-radius: 3px;
    }

//html
 <div id="scrollStatus">Posição de rolagem: 0</div>


//script
  <script>
    document.addEventListener('scroll', () => {
      const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
      document.getElementById('scrollStatus').textContent = `Posição de rolagem: ${scrollTop}`;
    });
  </script>

Document.childElementCount (Apenas leitura)

Retorna o número de elementos filhos do documento atual.

Apenas leitura = propriedade não atribuivel ou seja que não recebe valor apenas retorna

Document.children (Apenas leitura)

Retorna os elementos filhos do documento atual.

Exemplos Avançados

1. Contar e exibir o número de elementos filhos do documento:

//html
  <h1>Contagem de Elementos Filhos</h1>
  <p>Este é um parágrafo.</p>
  <div>Este é um div.</div>
  <footer>Este é um rodapé.</footer>
  <button id="countChildren">Contar Elementos Filhos</button>
//script

  <script>
    document.getElementById('countChildren').addEventListener('click', () => {

      const count = document.childElementCount;
      alert(`Número de elementos filhos do documento: ${count}`);

    });
  </script>

Exemplo-2: Capturar todos os elementos filhos e addiconar no elemento div para ser mostrado

  //html
  <h1>Exemplo de Listagem de Elementos Filhos</h1>
  <p>Este é um parágrafo.</p>
  <div>Este é um div.</div>
  <footer>Este é um rodapé.</footer>
  <button id="listChildren">Listar Elementos Filhos</button>
  <ul id="childrenList"></ul>

//script
  <script>
    document.getElementById('listChildren').addEventListener('click', () => {

      const children = document.children;
      const childrenList = document.getElementById('childrenList');

      childrenList.innerHTML = '';

      for (let i = 0; i < children.length; i++) {

        const listItem = document.createElement('li');

        listItem.textContent = children[i].tagName;

        childrenList.appendChild(listItem);
      }
    });
  </script>

Exemplo-3: Contagem dinamica dos elementos html

//html

  <h1>Exemplo de Adição e Contagem de Elementos Filhos</h1>
  <button id="addElement">Adicionar Elemento</button>
  <p>Número de elementos filhos: <span id="childCount">0</span></p>


//script
  <script>
    function updateChildCount() {
      const count = document.childElementCount;
      document.getElementById('childCount').textContent = count;
    }

    document.getElementById('addElement').addEventListener('click', () => {
      const newElement = document.createElement('div');
      newElement.textContent = 'Novo elemento';
      document.body.appendChild(newElement);
      updateChildCount();
    });
    
    //executar a função uma vez carregado
    updateChildCount();
  </script>

Document.documentElement (Somente leitura)

Retorna o elemento que é um filho direto do documento. Para documentos HTML, isso normalmente é o objeto HTMLHtmlElement representando o elemento (tag)<html> do documento.

Exemplos: Manipular Estilos do Elemento HTML

//script 


<script>
  // Acessar o elemento <html> e adicionar uma classe
  document.documentElement.classList.add('modo-escuro');

  // colocar em modo fullscreen o elemento <html>
  document.documentElement
  .requestFullscreen()
    .catch(err => { 
        console.error('Erro ao solicitar tela cheia:', err)
      }
    );

  // Obter o atributo 'lang' do elemento <html> e setar um atributo
    const lang = document.documentElement.getAttribute('lang');
    console.log(`Idioma do documento: ${lang}`);
    
    // Definir um novo atributo 'data-theme' no elemento <html>
    document.documentElement.setAttribute('data-theme', 'dark-mode');
</script>

//usar data atributos para especificar estados de um element 
<script>
     // Verificar se o modo de leitura está ativado
    const isReadable = document.documentElement.hasAttribute('isReadOnly');
    console.log(`Modo de leitura ativo: ${isReadable}`);
    
    // Adicionar um modo de leitura ao documento (true)
    if (!isReadable) {
        document.documentElement.setAttribute('isReadOnly',true);
    }
</script>

Document.documentURI (Somente leitura)

Document.documentURI (Somente leitura)
Retorna o local do documento como uma string.

Exemplos: Registrar a URL do Documento

//script

// Logar a URL completa do documento
console.log(`A URL do documento é: ${document.documentURI}`);

// checkar se estar em produção ou em desenvolvimento

const isLocalhost = document.documentURI.startsWith('http://localhost');
console.log(`A URL está em localhost: ${isLocalhost}`);

// checar se a url content status active : http://localhost/user/active
const isLocalhost = document.documentURI.includes('active');
console.log(`A URL está em localhost: ${isLocalhost}`);


// Criar um link para a URL do documento
const link = document.createElement('a');
link.href = document.documentURI;
link.textContent = 'Visite esta página';

document.body.appendChild(link);

Document.firstElementChild (Somente leitura)

Document.firstElementChild (Somente leitura)
Retorna o primeiro (elemento) filho do documento atual.

firstChild vs firstElementChild: firstChild retorna todo e qualquer element considerado como filho, ja o firstElmentChild consider somente HTMLElement, por exemplo firstChild pode um text sem estar dentro de uma tag , para o firstElementChild ele deve ser um HTMLElement para ser considerado firstElementChild

Exemplos: Alterar o Texto do Primeiro Elemento Filho

// Alterar o texto do primeiro elemento filho do documento
const primeiroElemento = document.firstElementChild;

if (primeiroElemento) {
    primeiroElemento.textContent = 'Texto atualizado';
  //propriedade HTMLElement.textContent , retorna o texto como tambe set
  //text ao elemento em questão HTMLElement
}

// Adicionar uma classe ao primeiro elemento filho
const primeiroElemento = document.firstElementChild;
if (primeiroElemento) {
    primeiroElemento.classList.add('nova-classe');
}

// Modificar o estilo do primeiro elemento filho
const primeiroElemento = document.firstElementChild;
if (primeiroElemento) {
    primeiroElemento.style.backgroundColor = 'lightblue';
}

Document.fonts

Document.fonts
Retorna a interface FontFaceSet do documento atual.

Exemplos : Verificar se uma Fonte Específica Está Carregada

// Verificar se a fonte 'Roboto' está carregada
document.fonts.ready.then(() => {
    const fonteCarregada = document.fonts.check('1em Roboto');
    console.log(`Fonte Roboto está carregada: ${fonteCarregada}`);
});

// Adicionar uma nova fonte ao FontFaceSet
const novaFonte = new FontFace('NovaFonte', 'url(/fonts/nova-fonte.woff2)');

document.fonts.add(novaFonte);

novaFonte.load().then(() => console.log('Nova fonte carregada'));

/**

  new FontFace() class contendo propriedades e metodas para 
  manipular fonts 
  exemple: 
  new FontFace('font-name','url(font-url)')

  .add(new FontFace('',''))
  font.load().then( ()=> console.log('font - loaded'))
*/

// Iterar sobre todas as fontes no FontFaceSet

document.fonts.forEach(fonte => {
    console.log(`Fonte disponível: ${fonte.family}`);
});

Document.forms (Somente leitura)

Document.forms (Somente leitura) Retorna uma coleção de todos os elementos <form> no documento.

Exemplos: Listar Todos os Formulários no Documento

// Listar todos os formulários e seus IDs
Array.from(document.forms).forEach(form => {
    console.log(`ID do formulário: ${form.id}`);
});


// Adicionar um evento de submit a todos os formulários
Array.from(document.forms).forEach(form => {
    
    form.addEventListener('submit', event => {
        console.log(`Formulário ${form.id} enviado`);
    });

});


//set methods and action(where to submit the form)

// Alterar o método e a ação de todos os formulários
Array.from(document.forms).forEach(form => {
    form.method = 'POST';
    form.action = '/login';
});

Document.images (Somente leitura)

Document.images (Somente leitura)Retorna uma coleção de todas as imagens no documento.

Exemplos: Contar o Número de Imagens no Documento

// Contar o número total de imagens no documento
console.log(`Número total de imagens: ${document.images.length}`);


// Alterar a fonte de todas as imagens
Array.from(document.images).forEach(img => {
    img.src = '/imagens/nova-imagem.png';
});

// Adicionar um evento de clique a todas as imagens
Array.from(document.images).forEach(img => {
    img.addEventListener('click', () => {
        console.log(`Imagem clicada: ${img.src}`);
    });
});

Document.styleSheets (Somente leitura)

Document.styleSheets (Somente leitura) retorna uma StyleSheetList dos objetos CSSStyleSheet para folhas de estilo explicitamente vinculadas ou incorporadas no documento.

Exemplos:

Adicionar uma Nova Regra CSS a uma Folha de Estilos Específica

// Adicionar uma nova regra CSS à primeira folha de estilos

const folhaEstilos = document.styleSheets[0];

folhaEstilos.insertRule('body { background-color: #f0f0f0; }', folhaEstilos.cssRules.length);

// Listar todas as regras CSS na primeira folha de estilos
const regras = document.styleSheets[0].cssRules;

Array.from(regras).forEach(regra => {
    console.log(`Seletor: ${regra.selectorText}, Estilo: ${regra.style.cssText}`);
});

Document.cookie

Document.cookie
Retorna uma lista separada por ponto e vírgula dos cookies para o documento ou define um único cookie.

Exemplos:

Definir um Novo Cookie com Opções de Expiração

// Definir um cookie com uma data de expiração

document.cookie = `
  usuario=Joao;
  expires=Fri, 31 Dec 2024 23:59:59 GMT;
  path=/
`;


// Função para obter o valor de um cookie pelo nome
function obterCookie(nome) {
    const cookies = document.cookie.split('; ');
    const cookie = cookies.find(c => c.startsWith(`${nome}=`));
    return cookie ? cookie.split('=')[1] : null;
}

console.log(obterCookie('usuario'));

// Excluir um cookie definindo uma data de expiração no passado
document.cookie = "usuario=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

Document.location (Somente leitura)

Document.location (Somente leitura)
Retorna o URI do documento atual.

Exemplos:

Redirecionar para uma Nova URL

// Redirecionar para uma nova URL
document.location.href = 'https://www.exemplo.com';

// Obter a URL atual do documento
console.log(`URL atual: ${document.location.href}`);

// Voltar para a página anterior
document.location.back();

// ir para uma pagina especifica (numbering)
document.location.go(1) 

Document.title

Document.title
Define ou obtém o título do documento atual.

Exemplos:

Atualizar o Título da Página Dinamicamente

// Atualizar o título da página
document.title = 'Novo Título da Página';

// alterando o text dinamicamente quando o foco estiver fora da aba actual

// Restaurar o título original após um alerta
const tituloOriginal = document.title;

window.addEventListener('focus', () => {
    document.title = tituloOriginal;
});

window.addEventListener('blur', () => {
    document.title = 'Você está fora da página! uma notificação(1)';
});

// Alterar o título com base em eventos do usuário
document.addEventListener('visibilitychange', () => {
    document.title = document.hidden ? 'Volte para a página!' : 'Página Ativa';
});

// Verificar se a URL atual corresponde a uma URL específica
if (document.URL === 'https://www.exemplo.com/home') {
    console.log('Você está na página inicial.');
}

casos de usos para exemplos acima , podem ser encontrado no reddit,twitter,facebook tendo o comportamento ja referenciado aqui

Document ,Element or HTMLElement 's Instance methods

Document.append()

Document.append()
Sintaxe: Document.append(...nodesOrDOMStrings)
Insere um conjunto de objetos Node ou objetos string após o último filho do documento.

Exemplos:

Adicionar Vários Elementos ao Final do Documento

// Criar e adicionar vários elementos ao final do documento

const paragraph = document.createElement('p');

paragraph.textContent = 'Parágrafo Adicionado';

const texto = 'Texto adicional';

document.append(para, texto);


// Adicionar elementos com estilos dinâmicos

const lightDiv = document.createElement('div');

lightDiv.style.backgroundColor = 'lightblue';

lightDiv.textContent = 'Div Estilizado';

document.append(lightDiv);


// Inserir elementos e scripts dinamicamente
const script = document.createElement('script');
script.src = 'https://example.com/script.js';
document.append(script);

Document.createAttribute()

Document.createAttribute()
Sintaxe: Document.createAttribute(name)
Cria um novo objeto Attr e retorna-o.

Exemplos:

Criar e Adicionar um Atributo a um Elemento

// Criar e adicionar um atributo a um elemento
const novoAtributo = document.createAttribute('data-info');
novoAtributo.value = '12345';

const elemento = document.getElementById('meuElemento');

elemento.setAttributeNode(novoAtributo);



// Adicionar atributos dinamicamente com base no conteúdo
const paragraph = document.createElement('p');
const attr = document.createAttribute('data-content');

attr.value = 'conteúdo dinâmico'; // this should be dinamically like active true or not 

paragraph.setAttributeNode(attr);

document.body.appendChild(para);

// Alterar atributos com base em eventos
const botao = document.getElementById('meuBotao');

botao.addEventListener('click', () => {
    const attr = document.createAttribute('data-clicked');
    attr.value = 'true';
    botao.setAttributeNode(attr);
});

Document.createAttributeNS()

Document.createAttributeNS()
Sintaxe: Document.createAttributeNS(namespace, name)
Cria um novo nó de atributo em um namespace específico e retorna-o.

Exemplos:

Criar e Adicionar um Atributo com Namespace

// Criar e adicionar um atributo com namespace
const attrNS = document.createAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href');
attrNS.value = 'https://example.com';
const svg = document.querySelector('svg');
svg.setAttributeNodeNS(attrNS);


// Manipular atributos em elementos SVG
const circle = document.querySelector('circle');
const attrNS = document.createAttributeNS('http://www.w3.org/2000/svg', 'fill');
attrNS.value = 'red';
circle.setAttributeNodeNS(attrNS);

// Adicionar atributos de link para imagens SVG
const link = document.createElementNS('http://www.w3.org/2000/svg', 'a');
const attrNS = document.createAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href');
attrNS.value = 'https://example.com';
link.setAttributeNodeNS(attrNS);
const svgImage = document.querySelector('svg image');
svgImage.parentNode.insertBefore(link, svgImage);
link.appendChild(svgImage);

Document.createComment()

Document.createComment()
Sintaxe: Document.createComment(data)
Cria um novo nó de comentário e retorna-o.

Exemplos:

Adicionar um Comentário ao Documento

// Adicionar um comentário ao documento
const comentario = document.createComment('Este é um comentário');
document.body.appendChild(comentario);


// Inserir comentários em localizações específicas
const comentario = document.createComment('Início da seção');
const secao = document.getElementById('minhaSecao');
secao.prepend(comentario);


// Remover comentários após certo tempo
const comentario = document.createComment('Comentário temporário');
document.body.appendChild(comentario);
setTimeout(() => {
    document.body.removeChild(comentario);
}, 5000);

Document.createDocumentFragment()

Document.createDocumentFragment()
Sintaxe: Document.createDocumentFragment()
Cria um novo fragmento de documento.

Exemplos Avançados

Adicionar Vários Elementos Usando Fragmento de Documento

// Adicionar vários elementos usando fragmento de documento
const fragmento = document.createDocumentFragment();
const p1 = document.createElement('p');
p1.textContent = 'Parágrafo 1';
const p2 = document.createElement('p');
p2.textContent = 'Parágrafo 2';
fragmento.appendChild(p1);
fragmento.appendChild(p2);
document.body.appendChild(fragmento);


// Inserir fragmento de documento em um elemento específico
const fragmento = document.createDocumentFragment();
const item1 = document.createElement('li');
item1.textContent = 'Item 1';
const item2 = document.createElement('li');
item2.textContent = 'Item 2';
fragmento.appendChild(item1);
fragmento.appendChild(item2);
const lista = document.getElementById('minhaLista');
lista.appendChild(fragmento);

// Criar e usar um fragmento de documento para desempenho
const fragmento = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
    const div = document.createElement('div');
    div.textContent = `Div ${i}`;
    fragmento.appendChild(div);
}
document.body.appendChild(fragmento);

Document.createElement()

Document.createElement()
Sintaxe: Document.createElement(tagName)
Cria um novo elemento com o nome da tag especificada.

Exemplos:

Criar e Estilizar um Novo Elemento

// Criar e estilizar um novo elemento
const novoElemento = document.createElement('div');
novoElemento.textContent = 'Novo Elemento';
novoElemento.style.color = 'blue';
document.body.appendChild(novoElemento);

// Adicionar elemento com atributos e eventos
const botao = document.createElement('button');
botao.textContent = 'Clique-me';
botao.setAttribute('id', 'meuBotao');
botao.addEventListener('click', () => alert('Botão clicado!'));
document.body.appendChild(botao);

// Criar elementos aninhados dinamicamente
const lista = document.createElement('ul');
for (let i = 0; i < 5; i++) {
    const item = document.createElement('li');
    item.textContent = `Item ${i}`;
    lista.appendChild(item);
}
document.body.appendChild(lista);

Document , Element or HTMLElement's Events

Documento: método getElementById()

O método getElementById() da interface Document retorna um objeto Element que representa o elemento cuja propriedade id corresponde à string especificada. Como os IDs dos elementos devem ser únicos, se especificados, eles são uma maneira útil de acessar rapidamente um elemento específico.

Desafios Complexos em JavaScript

Desafio 1: Criar um Sistema de Navegação Dinâmico

Implemente um sistema de navegação dinâmico que muda o conteúdo da página sem recarregar a página inteira. Use o método getElementById() para selecionar elementos específicos e alterar seu conteúdo com base na navegação do usuário.

1. Crie um layout básico de navegação com links que possuem IDs únicos.
2. Ao clicar em um link, capture o evento e use getElementById() para selecionar e atualizar a área de conteúdo da página sem recarregar.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Navigation</title>
</head>
<body>
    <nav>
        <a href="#" id="link1">Home</a>
        <a href="#" id="link2">About</a>
        <a href="#" id="link3">Contact</a>
    </nav>
    <div id="content">
        <p>Welcome to the homepage!</p>
    </div>

    <script>
        document.getElementById('link1').addEventListener('click', function(e) {
            e.preventDefault();
            document.getElementById('content').innerHTML = '<p>Welcome to the homepage!</p>';
        });

        document.getElementById('link2').addEventListener('click', function(e) {
            e.preventDefault();
            document.getElementById('content').innerHTML = '<p>This is the about page.</p>';
        });

        document.getElementById('link3').addEventListener('click', function(e) {
            e.preventDefault();
            document.getElementById('content').innerHTML = '<p>Contact us at: info@example.com</p>';
        });
    </script>
</body>
</html>

Documento: método querySelector() O método querySelector() do Documento retorna o primeiro Elemento dentro do documento que corresponde ao seletor especificado, ou grupo de seletores. Se nenhuma correspondência for encontrada, null é retornado.

Exemplos

Exemplo 1: Selecionando um elemento com ID específico e alterando seu conteúdo

// Suponha que há um elemento no HTML com o ID 'myElement'
const elemento = document.querySelector('#myElement');

if (elemento) {
  elemento.textContent = 'Conteúdo atualizado!';
} else {
  console.error('Elemento não encontrado');
}

Exemplo 2: Selecionando múltiplos elementos com a mesma classe e aplicando um estilo

// Suponha que há vários elementos no HTML com a classe 'highlight'
const elementos = document.querySelectorAll('.highlight');

elementos.forEach(elemento => {
  elemento.style.backgroundColor = 'yellow';
});

Exemplo 3: Selecionando um elemento com um seletor composto e adicionando um evento de clique

// Suponha que há um elemento no HTML com a classe 'btn' dentro de um container com ID 'container'
const botao = document.querySelector('#container .btn');

if (botao) {
  botao.addEventListener('click', () => {
    alert('Botão clicado!');
  });
} else {
  console.error('Botão não encontrado');
}

Exemplo 4: Utilizando um grupo de seletores para selecionar o primeiro elemento correspondente

// Suponha que há elementos no HTML com classes 'primary', 'secondary' e 'tertiary'
const elemento = document.querySelector('.primary, .secondary, .tertiary');

if (elemento) {
  elemento.style.border = '2px solid red';
} else {
  console.error('Nenhum elemento correspondente encontrado');
}

Documento: método querySelectorAll() O método querySelectorAll() do Documento retorna uma NodeList estática (não ao vivo) representando uma lista dos elementos do documento que correspondem ao grupo de seletores especificado.

Exemplos

Exemplo 1: Selecionando todos os elementos com uma determinada classe e alterando seu estilo

// Suponha que há vários elementos no HTML com a classe 'card'
const elementos = document.querySelectorAll('.card');

elementos.forEach(elemento => {
  elemento.style.border = '1px solid black';
});

Exemplo 2: Selecionando todos os parágrafos dentro de um container específico e adicionando um evento de mouseover

// Suponha que há vários parágrafos dentro de um elemento com ID 'content'
const paragrafos = document.querySelectorAll('#content p');

paragrafos.forEach(paragrafo => {
  paragrafo.addEventListener('mouseover', () => {
    paragrafo.style.color = 'blue';
  });
});

Documento: método getElementsByClassName() O método getElementsByClassName da interface Document retorna um objeto similar a um array de todos os elementos filhos que possuem todos os nomes de classes fornecidos.

Quando chamado no objeto document, o documento completo é pesquisado, incluindo o nó raiz. Você também pode chamar getElementsByClassName() em qualquer elemento; ele retornará apenas os elementos que são descendentes do elemento raiz especificado com os nomes de classe fornecidos.

Exemplos

Exemplo 1: Selecionando todos os elementos com uma classe específica e alterando seu texto

// Suponha que há vários elementos no HTML com a classe 'notification'
const elementos = document.getElementsByClassName('notification');

Array.from(elementos).forEach(elemento => {
  elemento.textContent = 'Notificação atualizada!';
});


// Suponha que há vários elementos no HTML com a classe 'notification'
const elementos = document.getElementsByClassName('notification');

Array.from(elementos).forEach(elemento => {
  elemento.textContent = 'Notificação atualizada!';
});

// Suponha que há vários elementos no HTML com as classes 'button' e 'active'
const buttons = document.getElementsByClassName('button active');

Array.from(buttons).forEach(button => {
  button.addEventListener('click', () => {
    alert('Botão ativo clicado!');
  });
});

Elemento: método setAttribute() O método setAttribute() da interface Element define o valor de um atributo no elemento especificado. Se o atributo já existir, o valor é atualizado; caso contrário, um novo atributo é adicionado com o nome e valor especificados.

Para obter o valor atual de um atributo, use getAttribute(); para remover um atributo, chame removeAttribute().

Se você precisar trabalhar com o nó Attr (como clonar de outro elemento) antes de adicioná-lo, você pode usar o método setAttributeNode().

Exemplos

Exemplo 1: Adicionando um atributo ‘data-id’ a um elemento

// Suponha que há um elemento no HTML com o ID 'item'
const elemento = document.getElementById('item');

elemento.setAttribute('data-id', '12345');


// Suponha que há um elemento de imagem no HTML com a classe 'imagem-destaque'
const imagem = document.querySelector('.imagem-destaque');

imagem.setAttribute('src', 'nova-imagem.jpg');

// Suponha que há um botão no HTML com o ID 'meuBotao'
const botao = document.getElementById('meuBotao');

botao.setAttribute('title', 'Clique aqui para saber mais');
botao.setAttribute('aria-label', 'Mais informações');

JavaScript Promises and Callbacks

What is a Callback?

A callback is a function passed as an argument to another function, which is then executed inside the outer function to complete some action.

Example:

function fetchData(callback) {
  setTimeout(() => {
    callback("Data fetched");
  }, 1000);
}

fetchData((message) => {
  console.log(message); // Logs "Data fetched" after 1 second
});

What is a Promise?

A promise is an object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

Example:

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched");
  }, 1000);
});

fetchData.then((message) => {
  console.log(message); // Logs "Data fetched" after 1 second
});

Example: Promises with Fetch API

function getData(url) {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok ' + response.statusText);
        }
        return response.json();
      })
      .then(data => resolve(data))
      .catch(error => reject(error));
  });
}

getData('https://jsonplaceholder.typicode.com/posts/1')
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Combining Promises with Async/Await

async function fetchData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchData();

Debouncing and Throttling

What is Debouncing?

Debouncing is a technique to ensure that a function is not called too frequently. The function will only be called after a certain amount of time has passed since it was last called.

Example:

function debounce(func, delay) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

window.addEventListener('resize', debounce(() => {
  console.log('Window resized');
}, 300));

Debouncing with API Calls

const fetchSuggestions = (query) => {
  return fetch(`https://api.example.com/search?q=${query}`)
    .then(response => response.json())
    .then(data => console.log(data));
};

const debouncedFetch = debounce(fetchSuggestions, 500);

document.querySelector('input').addEventListener('input', (e) => {
  debouncedFetch(e.target.value);
});

What is Throttling?

Throttling is a technique to ensure that a function is not called more than once in a specified period. The function is called at regular intervals.

Example:

function throttle(func, limit) {
  let inThrottle;
  return function(...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

window.addEventListener('scroll', throttle(() => {
  console.log('Window scrolled');
}, 1000));

Throttling with Scroll Event

const loadMoreItems = () => {
  console.log('Loading more items...');
};

const throttledLoadMore = throttle(loadMoreItems, 2000);

window.addEventListener('scroll', () => {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    throttledLoadMore();
  }
});

what we have learned ?

• Callbacks: Functions passed as arguments to other functions to be executed later.
• Promises: Objects representing the eventual completion or failure of asynchronous operations.
• Debouncing: Ensuring a function is called only after a certain delay has passed since the last call.
• Throttling: Ensuring a function is called at regular intervals, not more frequently than the specified limit.

What's this Js built-in fetch?

Consuming JS API

Here is a list of public APIs that you can use for various purposes:

1. JSONPlaceholder (Fake Online REST API for Testing and Prototyping)

• URL: https://jsonplaceholder.typicode.com
• Example Endpoint: /posts

1. OpenWeatherMap (Weather Data)

• URL: https://api.openweathermap.org/data/2.5
• Example Endpoint: /weather?q={city name}&appid={API key}
• Note: Requires an API key (free tier available)

1. The Dog API (Random pictures of dogs)

• URL: https://api.thedogapi.com/v1
• Example Endpoint: /images/search

1. The Cat API (Random pictures of cats)

• URL: https://api.thecatapi.com/v1
• Example Endpoint: /images/search

1. Rick and Morty API (Information about Rick and Morty TV Show)

• URL: https://rickandmortyapi.com/api
• Example Endpoint: /character

1. PokeAPI (Pokemon Data)

• URL: https://pokeapi.co/api/v2
• Example Endpoint: /pokemon/{id or name}

1. Advice Slip JSON API (Random Advice)

• URL: https://api.adviceslip.com
• Example Endpoint: /advice

1. Public APIs (A collective list of free APIs for development)

• URL: https://public-apis.io/
• Example Endpoint: /public-api

1. CoinGecko API (Cryptocurrency Data)

• URL: https://api.coingecko.com/api/v3
• Example Endpoint: /coins/markets?vs_currency=usd

1. NASA API (Space Data)

• URL: https://api.nasa.gov
• Example Endpoint: /planetary/apod?api_key={API key}
• Note: Requires an API key (free tier available)

Using Fetch API to Consume These APIs

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Consuming API that requires a key

const apiKey = 'your_api_key';
const city = 'London';

fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));



fetch('https://api.thedogapi.com/v1/images/search')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));



fetch('https://rickandmortyapi.com/api/character')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Using Fetch API with Headers, Cookies, and Tokens

Basic Fetch Example

Here’s a basic example of using the Fetch API to make a GET request:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Setting Headers

To set headers, you can use the headers property in the options object passed to fetch.

Example: Setting Custom Headers

fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_ACCESS_TOKEN'
  }
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Handling Cookies

To handle cookies, you need to ensure that credentials are included in your request. This is done using the credentials property.

Example: Sending Cookies

fetch('https://api.example.com/data', {
  method: 'GET',
  credentials: 'include' // Ensure cookies are included in the request
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

credentials can take the following values:

• 'omit': Never send or receive cookies.
• 'same-origin': Send cookies for the same origin but not cross-origin.
• 'include': Send cookies for both same-origin and cross-origin requests.

Passing Tokens

Tokens, such as JSON Web Tokens (JWT), are often passed in the Authorization header.

fetch('https://api.example.com/protected', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
    'Content-Type': 'application/json'
  }
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Example with POST Request

Here’s an example of making a POST request with headers and a token.

const postData = async (url = '', data = {}) => {
  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer YOUR_ACCESS_TOKEN'
    },
    body: JSON.stringify(data),
    credentials: 'include' // If you need to include cookies
  });

  if (!response.ok) {
    throw new Error('Network response was not ok' + response.statusText);
  }

  return response.json();
};

postData('https://api.example.com/data', { key: 'value' })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Complete Example: Fetch with Headers, Cookies, and Token

const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data', {
      method: 'GET',
      headers: {
        'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
        'Content-Type': 'application/json'
      },
      credentials: 'include' // Include cookies
    });

    if (!response.ok) {
      throw new Error('Network response was not ok' + response.statusText);
    }

    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fetch error:', error);
  }
};

fetchData();

What we have learned :

• Setting Headers: Use the headers property to set custom headers.
• Handling Cookies: Use the credentials property to handle cookies.
• Passing Tokens: Include tokens in the Authorization header.

News to Javascript = Spread and Destructuring

Spread Operator

The spread operator (...) allows an iterable (such as an array or string) to be expanded in places where zero or more arguments or elements are expected.

Example 1: Using Spread with Arrays

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArray = [...arr1, ...arr2];

console.log(combinedArray); // Output: [1, 2, 3, 4, 5, 6]


const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinedObject = { ...obj1, ...obj2 };

console.log(combinedObject); // Output: { a: 1, b: 2, c: 3, d: 4 }


const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const combinedObject = { ...obj1, ...obj2 };

console.log(combinedObject); // Output: { a: 1, b: 2, c: 3, d: 4 }

Destructuring

Destructuring allows unpacking values from arrays or properties from objects into distinct variables.

const arr = [1, 2, 3, 4];
const [first, second, ...rest] = arr;

console.log(first); // Output: 1
console.log(second); // Output: 2
console.log(rest); // Output: [3, 4]


const obj = { a: 1, b: 2, c: 3 };
const { a, b, ...rest } = obj;

console.log(a); // Output: 1
console.log(b); // Output: 2
console.log(rest); // Output: { c: 3 }

2. Nullish Coalescing Operator (??)

The nullish coalescing operator (??) provides a way to handle null or undefined values by providing a default value.

Example 1: Using Nullish Coalescing

let user;
const username = user ?? 'Guest';

console.log(username); // Output: 'Guest'

Example 2: Differentiating Between Nullish Coalescing and Logical OR (||)

let count = 0;
const result = count ?? 10; // Using Nullish Coalescing
const resultOr = count || 10; // Using Logical OR

console.log(result); // Output: 0 (because 0 is neither null nor undefined)
console.log(resultOr); // Output: 10 (because 0 is falsy)

Challenge 1: Merge and Modify Objects with Spread and Destructuring

Create a function that merges two user objects and updates the user’s age.

const user1 = { name: 'Alice', age: 25, city: 'New York' };
const user2 = { name: 'Bob', age: 30, country: 'USA' };

function mergeAndUpdate(user1, user2, newAge) {
  const mergedUser = { ...user1, ...user2, age: newAge };
  const { name, age, ...rest } = mergedUser;
  return { name, age, ...rest };
}

console.log(mergeAndUpdate(user1, user2, 35));
// Output: { name: 'Bob', age: 35, city: 'New York', country: 'USA' }

Challenge 2: Array Transformation with Destructuring and Spread

Create a function that takes an array of numbers, removes the first two numbers, doubles the rest, and returns the modified array.

const transformArray = (arr) => {
  const [, , ...rest] = arr; // Skip the first two elements
  return rest.map(num => num * 2);
}

console.log(transformArray([1, 2, 3, 4, 5])); 
// Output: [6, 8, 10]

Challenge 3: Fallback Values with Nullish Coalescing

Create a function that takes a configuration object and returns a complete configuration with default values for missing properties.

const defaultConfig = {
  host: 'localhost',
  port: 8080,
  useSSL: false
};

const applyConfig = (userConfig) => {
  return {
    host: userConfig.host ?? defaultConfig.host,
    port: userConfig.port ?? defaultConfig.port,
    useSSL: userConfig.useSSL ?? defaultConfig.useSSL
  };
}

console.log(applyConfig({ host: 'example.com', port: null }));
// Output: { host: 'example.com', port: 8080, useSSL: false }