Scribd
Carregar
0 visualizações

Capítulo 4 - JavaScript

O capítulo aborda a introdução ao JavaScript, explicando sua função na criação de interatividade em páginas web e as formas de inclusão em documentos HTML. Ele também cobre a sintaxe básica, incluindo variáveis, operadores, estruturas de controle, funções, manipulação de eventos, e manipulação do DOM. Além disso, discute a programação assíncrona com Promises e a Fetch API para requisições HTTP.

Enviado por

rsbernini0
Direitos autorais
© © All Rights Reserved
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
0 visualizações

Capítulo 4 - JavaScript

O capítulo aborda a introdução ao JavaScript, explicando sua função na criação de interatividade em páginas web e as formas de inclusão em documentos HTML. Ele também cobre a sintaxe básica, incluindo variáveis, operadores, estruturas de controle, funções, manipulação de eventos, e manipulação do DOM. Além disso, discute a programação assíncrona com Promises e a Fetch API para requisições HTTP.

Enviado por

rsbernini0
Direitos autorais
© © All Rights Reserved
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 5

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!

Você também pode gostar