0% acharam este documento útil (0 voto)

7 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

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

7 visualizações

Capítulo 4 - JavaScript

Enviado por

rsbernini0

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

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>

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();