O que é JavaScript?

O JavaScript é uma linguagem de programação muito usada para desenvolvimento Web, pois permite a manipulação direta de elementos HTML e CSS no navegador através da manipulação do DOM (Document Object Model).

Tópicos

• Manipulação de DOM
• Programação Assíncrona
• JavaScript Essencial Para Programar
• jQuery e TypeScript

Manipulação de DOM ✨

O DOM (Document Object Model) é uma representação em forma de árvore da estrutura da página, onde cada elemento HTML é tratado como um objeto no modelo.

O JavaScript te permite adicionar novos elementos, alterar suas propriedades, conteúdo, estilo, armazenar seus valores e adicionar eventos a eles. Abaixo, temos um exemplo de manipulação do botão de uma página:

const button = document.getElementById('myButton');

function handleClick() {
  button.textContent = 'Clicado!';
  button.style.backgroundColor = 'green';
}

button.addEventListener('click', handleClick);

Programação Assíncrona ✨

Com a programação assíncrono é possível que o código javascript continue sendo executado enquanto espera uma resposta de um servidor, por exemplo.

No JavaScript o AJAX (Asynchronous JavaScript and XML) é uma técnica que se encaixa nesse contexto. Para fazer requisições a uma API é necessário seguir os passos:

1. Use o método fetch e passe a URL da requisição como argumento. Este método retorna uma Promise que representa a resposta assíncrona da requisição.
2. Use a função .then() na Promise retornada pelo fetch.
3. Verifique se a resposta foi bem-sucedida (response.ok).
4. Se a resposta estiver OK, transforme-a no formato necessário (ex.: .json(), .text()).
5. Dentro do segundo .then(), manipule os dados recebidos conforme necessário.
6. Use .catch() para tratar erros, caso ocorram durante a requisição ou manipulação dos dados.

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Erro ao buscar os dados');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

JavaScript Essencial Para Programar ✨

Fiz uma página somente para essa parte onde coloquei exemplos de códigos essenciais pro desenvolvimento em JavaScript e pode servir como cheat sheet. 🔗JavaScript Essencial

jQuery e TypeScript ✨

Há ferramentas que podem elevar o desenvolvimento em JavaScripts a outro patamar como o jQuery e TypeScript.

O jQuery é uma biblioteca de JavaScript rápida, pequena e rica em recursos muito famosa. Ela simplifica a manipulação do DOM e ajuda demais na hora do desenvolvimento! 🔗O que é jQuery?

Já o TypeScript é uma extensão da linguagem JavaScript desenvolvida pela Microsoft. Ela adiciona recursos de tipagem estática, interfaces e outros recursos avançados ao JavaScript, tornando-o mais eficiente para o desenvolvimento de software de larga escala. 🔗Link em breve