Capítulo 4 - JavaScript
Capítulo 4: JavaScript
Introdução ao JavaScript
O que é JavaScript?
JavaScript é uma linguagem de programação amplamente utilizada para criar interatividade
em páginas web. Ela é executada no navegador do cliente e permite manipular o DOM
(Document Object Model), controlar eventos e interagir com o usuário.
Inclusão de JavaScript em um Documento HTML
Existem várias maneiras de incluir JavaScript em um documento HTML:
1. JavaScript Inline:
Diretamente dentro de um atributo HTML.
<button onclick="alert('Olá, Mundo!')">Clique aqui</button>
2. JavaScript Interno:
Dentro da tag <script> no documento HTML.
<head>
<script>
function saudacao() {
alert('Olá, Mundo!');
}
</script>
</head>
<body>
<button onclick="saudacao()">Clique aqui</button>
</body>
3. JavaScript Externo:
Em um arquivo JavaScript separado, linkado ao documento HTML.
<head>
<script src="script.js"></script>
</head>
<body>
<button onclick="saudacao()">Clique aqui</button>
</body>
script.js:
function saudacao() {
alert('Olá, Mundo!');
}
Sintaxe Básica
Variáveis e Tipos de Dados
Em JavaScript, você pode declarar variáveis usando var , let ou const .
var nome = "Rafael"; // Variável global ou de escopo de função
let idade = 30; // Variável de escopo de bloco
const altura = 1.75; // Variável constante
Operadores e Expressões
JavaScript suporta vários operadores, incluindo aritméticos, de comparação e lógicos.
let a = 10;
let b = 5;
let soma = a + b; // 15
let subtracao = a - b; // 5
let multiplicacao = a * b; // 50
let divisao = a / b; // 2
Estruturas de Controle
JavaScript oferece várias estruturas de controle para manipular o fluxo do programa.
Condicionais:
let idade = 18;
if (idade >= 18) {
console.log("Você é maior de idade.");
} else {
console.log("Você é menor de idade.");
}
Loops:
for (let i = 0; i < 5; i++) {
console.log("Número: " + i);
}
let contador = 0;
while (contador < 5) {
console.log("Contador: " + contador);
contador++;
}
Funções e Eventos
Definição e Uso de Funções
Funções permitem que você reutilize código. Aqui está um exemplo de como definir e usar
uma função:
function saudacao(nome) {
return "Olá, " + nome + "!";
}
console.log(saudacao("Rafael"));
Manipulação de Eventos
JavaScript permite manipular eventos, como cliques, movimentos do mouse e
pressionamento de teclas.
<button id="meuBotao">Clique aqui</button>
<script>
document.getElementById("meuBotao").addEventListener("click", function()
{
alert("Botão clicado!");
});
</script>
DOM Manipulation
Seleção e Manipulação de Elementos
Você pode selecionar e manipular elementos HTML usando JavaScript.
// Selecionar um elemento pelo ID
let elemento = document.getElementById("meuElemento");
// Alterar o conteúdo do elemento
elemento.innerHTML = "Novo conteúdo";
// Alterar o estilo do elemento
elemento.style.color = "blue";
Alteração de Conteúdo e Estilos
JavaScript permite alterar dinamicamente o conteúdo e os estilos dos elementos.
// Selecionar um elemento pela classe
let elementos = document.getElementsByClassName("minhaClasse");
for (let i = 0; i < elementos.length; i++) {
elementos[i].style.backgroundColor = "yellow";
}
Assincronicidade
Promises e async/await
Promises são usadas para operações assíncronas, como requisições HTTP.
let minhaPromessa = new Promise((resolve, reject) => {
let sucesso = true;
if (sucesso) {
resolve("Operação bem-sucedida!");
} else {
reject("Operação falhou!");
}
});
minhaPromessa.then((mensagem) => {
console.log(mensagem);
}).catch((erro) => {
console.error(erro);
});
Fetch API para Requisições HTTP
A Fetch API permite fazer requisições HTTP de forma assíncrona.
fetch('https://api.exemplo.com/dados')
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Erro:', error);
});
Async/Await
async e await facilitam o trabalho com Promises.
async function buscarDados() {
try {
let response = await fetch('https://api.exemplo.com/dados');
let data = await response.json();
console.log(data);
} catch (error) {
console.error('Erro:', error);
}
}
buscarDados();
Este é um resumo abrangente do capítulo sobre JavaScript. Se precisar de mais detalhes
sobre algum tópico específico ou tiver alguma dúvida, sinta-se à vontade para perguntar!
