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:
- 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. - Use a função
.then()
na Promise retornada pelofetch
. - Verifique se a resposta foi bem-sucedida (
response.ok
). - Se a resposta estiver OK, transforme-a no formato necessário (ex.:
.json()
,.text()
). - Dentro do segundo
.then()
, manipule os dados recebidos conforme necessário. - 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