Scribd
Carregar
22 visualizações

Aprender Java Script

O documento é um guia abrangente sobre JavaScript, abordando desde conceitos básicos como sintaxe, tipos de dados e operadores, até tópicos avançados como promessas e módulos. Ele também inclui exemplos práticos de como integrar JavaScript com HTML e CSS, manipulando o DOM e interagindo com eventos. O aprendizado é incentivado através da prática constante e resolução de problemas reais.

Enviado por

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

Aprender Java Script

O documento é um guia abrangente sobre JavaScript, abordando desde conceitos básicos como sintaxe, tipos de dados e operadores, até tópicos avançados como promessas e módulos. Ele também inclui exemplos práticos de como integrar JavaScript com HTML e CSS, manipulando o DOM e interagindo com eventos. O aprendizado é incentivado através da prática constante e resolução de problemas reais.

Enviado por

otiniel200pro
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/ 47

Aprender

Java Script
1. Introdução ao JavaScript
O que é JavaScript?
JavaScript é uma linguagem de programação amplamente utilizada
no desenvolvimento web. Ela é uma linguagem de script
interpretada, o que significa que o código é executado diretamente
em tempo de execução (no navegador, por exemplo). JavaScript é
usada principalmente para criar interatividade em páginas web,
manipular o DOM (Document Object Model) e, com o Node.js,
também pode ser utilizada no back-end.
Como JavaScript se integra ao HTML e CSS?
JavaScript pode ser inserido diretamente dentro de uma página
HTML, através de duas formas principais:
• Incorporado diretamente no HTML dentro da tag <script>.
• Referenciado externamente através de um arquivo .js com a
tag <script src="caminho/para/o/arquivo.js"></script>.
Exemplo básico de um código HTML com JavaScript:
html
Copiar código
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Exemplo de JavaScript</title>
</head>
<body>
<h1>JavaScript Teste</h1>
<script>
alert("Olá Mundo!");
</script>
</body>
</html>

2. Sintaxe Básica de JavaScript


Declaração de Variáveis
Em JavaScript, você usa var, let ou const para declarar variáveis:
• var: Uma declaração mais antiga. Tem escopo de função e
pode ser reatribuída.
• let: Introduzido no ES6, tem escopo de bloco e pode ser
reatribuído.
• const: Declara uma constante, ou seja, um valor que não
pode ser reatribuído.
Exemplos:
javascript
Copiar código
let nome = "Maria"; // Variável pode ser alterada
const idade = 25; // Valor fixo, não pode ser alterado
Tipos de Dados em JavaScript
JavaScript possui vários tipos de dados. Os mais comuns são:
• String: Sequência de caracteres.
• Number: Números inteiros ou flutuantes.
• Boolean: true ou false.
• Null: Representa a ausência intencional de valor.
• Undefined: Valor não atribuído a uma variável.
• Object: Para armazenar coleções de dados.
• Array: Tipo especial de objeto usado para armazenar listas
ordenadas.
• Symbol e BigInt: Tipos mais avançados.
Conversões de Tipos
Você pode converter tipos de dados em JavaScript:
javascript
Copiar código
let numero = 10;
let texto = String(numero); // Converte para string
let numConvertido = Number("10"); // Converte para número

3. Operadores em JavaScript
Operadores Aritméticos
São usados para realizar operações matemáticas.
• +, -, *, /, % (modulo)
Exemplo:
javascript
Copiar código
let soma = 10 + 5; // 15
let divisao = 10 / 2; // 5
Operadores de Comparação
Usados para comparar valores. Retornam true ou false.
• ==, ===, !=, >, <, >=, <=
Exemplo:
javascript
Copiar código
5 == 5; // true
5 === '5'; // false (compara o valor e o tipo)
Operadores Lógicos
Combinam expressões booleanas.
• && (E lógico), || (OU lógico), ! (não lógico)
Exemplo:
javascript
Copiar código
true && false; // false
true || false; // true
!true; // false

4. Estruturas de Controle
Condicionais
São usadas para tomar decisões no código com base em
condições.
• if, else, else if
Exemplo:
javascript
Copiar código
let idade = 18;
if (idade >= 18) {
console.log("Maior de idade");
} else {
console.log("Menor de idade");
}
Laços de Repetição
São usados para repetir blocos de código.
• for, while, do...while
Exemplo:
javascript
Copiar código
for (let i = 0; i < 5; i++) {
console.log(i); // Imprime 0, 1, 2, 3, 4
}

5. Funções em JavaScript
Funções Declaradas
Funções podem ser declaradas para reutilizar um bloco de código.
Exemplo:
javascript
Copiar código
function saudacao(nome) {
return "Olá, " + nome;
}

console.log(saudacao("Carlos")); // Olá, Carlos


Funções Anônimas (Arrow Functions)
São funções mais compactas introduzidas no ES6.
Exemplo:
javascript
Copiar código
const saudacao = (nome) => "Olá, " + nome;
console.log(saudacao("Carlos"));

6. Objetos e Arrays
Objetos
Objetos são coleções de propriedades (pares chave-valor).
Exemplo:
javascript
Copiar código
let pessoa = {
nome: "Maria",
idade: 30,
saudacao: function() {
return "Olá, " + this.nome;
}
};

console.log(pessoa.nome); // Maria
console.log(pessoa.saudacao()); // Olá, Maria
Arrays
Arrays são listas ordenadas de valores.
Exemplo:
javascript
Copiar código
let frutas = ["maçã", "banana", "laranja"];
console.log(frutas[0]); // maçã

7. Manipulação do DOM
O DOM (Document Object Model) permite que você manipule a
estrutura HTML e CSS da página com JavaScript.
Selecionando Elementos
Você pode selecionar elementos HTML de várias maneiras:
• getElementById()
• querySelector()
Exemplo:
javascript
Copiar código
let elemento = document.getElementById("meuElemento");
elemento.innerHTML = "Novo conteúdo"; // Altera o conteúdo
Alterando Estilos
Você pode alterar o estilo dos elementos diretamente via
JavaScript.
Exemplo:
javascript
Copiar código
let titulo = document.querySelector("h1");
titulo.style.color = "red"; // Muda a cor do texto para vermelho

8. Eventos em JavaScript
JavaScript pode interagir com eventos do usuário, como cliques,
teclas pressionadas, etc.
Adicionando Eventos
Você pode adicionar eventos aos elementos usando
addEventListener.
Exemplo:
javascript
Copiar código
let botao = document.getElementById("meuBotao");
botao.addEventListener("click", function() {
alert("Botão clicado!");
});

9. Assincronicidade e Promessas
Callbacks
Funções passadas como argumentos que são executadas após
uma operação ser concluída.
Exemplo:
javascript
Copiar código
function saudacao(nome, callback) {
console.log("Olá, " + nome);
callback();
}

saudacao("João", function() {
console.log("Callback executado!");
});
Promessas (Promises)
Uma promessa é uma maneira de lidar com operações
assíncronas.
Exemplo:
javascript
Copiar código
let promessa = new Promise((resolve, reject) => {
let sucesso = true;
if (sucesso) {
resolve("Operação bem-sucedida");
} else {
reject("Erro na operação");
}
});

promessa.then((mensagem) => {
console.log(mensagem);
}).catch((erro) => {
console.log(erro);
});
Async/Await
Sintaxe mais moderna para lidar com promessas.
Exemplo:
javascript
Copiar código
async function buscarDados() {
let resposta = await fetch("https://api.example.com");
let dados = await resposta.json();
console.log(dados);
}

10. Tratamento de Erros


JavaScript permite capturar e tratar erros no código usando try,
catch, e finally.
Exemplo:
javascript
Copiar código
try {
let resultado = 10 / 0;
console.log(resultado);
} catch (erro) {
console.log("Erro encontrado: " + erro);
} finally {
console.log("Bloco finalizado");
}

11. Conceitos Avançados


Closures
Closures são funções que "lembram" o ambiente onde foram
criadas, mesmo após a execução do código onde foram
declaradas.
Exemplo:
javascript
Copiar código
function saudacao(nome) {
return function() {
console.log("Olá, " + nome);
};
}

let saudacaoJoao = saudacao("João");


saudacaoJoao(); // Olá, João
this em JavaScript
O valor de this depende do contexto onde a função está sendo
chamada.

12. Módulos (ES6)


Você pode dividir seu código em arquivos separados (módulos) e
importar/exportar funcionalidades entre eles.
Exemplo:
javascript
Copiar código
// math.js
export function somar(a, b) {
return a + b;
}

// app.js
import { somar } from './math.js';
console.log(somar(2, 3)); // 5

13. Ferramentas e Bibliotecas


Node.js
Permite que você use JavaScript para desenvolvimento de back-
end.
NPM (Node Package Manager)
O gerenciador de pacotes para JavaScript.
Frameworks e Bibliotecas
• React, Vue.js, Angular (para front-end)
• Express.js (para back-end com Node.js)

Este é um guia abrangente sobre os tópicos fundamentais e


avançados para aprender JavaScript. Com esses conceitos, você
será capaz de escrever, entender e otimizar seu código em
JavaScript de maneira eficiente. A melhor maneira de aprender é
praticar constantemente e resolver problemas reais!
4o mini
Dito por si:
Mostra me de forma detalhada como aplicar o java script no html e
css
Dito pelo ChatGPT:
ChatGPT
Aplicar JavaScript em uma página HTML e fazer com que ele
interaja com o CSS (estilos) é uma parte fundamental do
desenvolvimento web. Vou explicar detalhadamente como você
pode integrar JavaScript com HTML e CSS, fornecendo exemplos
práticos e explicações sobre como fazer isso de forma eficiente.

1. Integrando JavaScript no HTML


Existem duas formas principais de adicionar JavaScript ao HTML:
• JavaScript embutido (inline) diretamente no HTML.
• JavaScript em um arquivo externo.
1.1. JavaScript Embutido (Inline)
Você pode colocar o código JavaScript diretamente dentro de uma
tag <script> no corpo ou no cabeçalho do documento HTML. O
JavaScript dentro da tag <script> é executado quando a página é
carregada.
Exemplo básico:
html
Copiar código
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Exemplo de JavaScript</title>
</head>
<body>

<h1>Exemplo de Integração de JavaScript</h1>

<button id="meuBotao">Clique aqui</button>

<script>
// Este código será executado assim que a página for carregada

document.getElementById("meuBotao").addEventListener("click",
function() {
alert("Você clicou no botão!");
});
</script>

</body>
</html>
Explicação:
• O código JavaScript é colocado dentro da tag <script>.
• Ele usa o método getElementById para selecionar o botão
pelo seu id e adicionar um ouvinte de evento click com a
função alert.
1.2. JavaScript Externo
Outra forma é escrever o código JavaScript em um arquivo
separado (geralmente com a extensão .js) e referenciá-lo no HTML
usando a tag <script src="arquivo.js"></script>.
Exemplo básico de JavaScript Externo:
Arquivo HTML:
html
Copiar código
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Exemplo de JavaScript Externo</title>
</head>
<body>

<h1>Integração de JavaScript Externo</h1>

<button id="meuBotao">Clique aqui</button>

<!-- Inclusão do arquivo JavaScript externo -->


<script src="script.js"></script>
</body>
</html>
Arquivo JavaScript (script.js):
javascript
Copiar código
// Este código será executado quando o arquivo script.js for
carregado
document.getElementById("meuBotao").addEventListener("click",
function() {
alert("Você clicou no botão!");
});
Explicação:
• A tag <script src="script.js"></script> é usada para incluir o
arquivo JavaScript externo. Colocamos a tag <script> no final
do corpo (body) do HTML para garantir que o DOM já tenha
sido carregado antes de o JavaScript ser executado.

2. Manipulando o CSS com JavaScript


O JavaScript pode alterar o estilo CSS de elementos da página em
tempo real. A seguir, vamos ver como você pode modificar estilos
diretamente através do JavaScript.
2.1. Alterando Estilos Inline com JavaScript
Você pode alterar os estilos inline de um elemento diretamente no
JavaScript usando a propriedade style.
Exemplo de Alteração de Estilo:
html
Copiar código
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Alterando Estilos com JavaScript</title>
</head>
<body>

<h1 id="titulo">Clique no botão para mudar a cor</h1>


<button id="mudarCorBtn">Mudar Cor</button>

<script>

document.getElementById("mudarCorBtn").addEventListener("cli
ck", function() {
document.getElementById("titulo").style.color = "red"; //
Altera a cor do texto
document.getElementById("titulo").style.fontSize = "30px"; //
Altera o tamanho da fonte
});
</script>

</body>
</html>
Explicação:
• A propriedade style permite que você acesse e altere os
estilos CSS diretamente de um elemento HTML.
• O código acima altera a cor e o tamanho da fonte do
elemento com id="titulo" quando o botão é clicado.
2.2. Adicionando ou Removendo Classes CSS com JavaScript
Em vez de manipular os estilos diretamente, uma maneira mais
limpa de alterar o estilo de um elemento é adicionar ou remover
classes CSS através do JavaScript.
Exemplo de Adicionar/Remover Classes:
HTML:
html
Copiar código
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Adicionar e Remover Classes com JavaScript</title>
<style>
.vermelho {
color: red;
font-size: 30px;
}
.azul {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>

<h1 id="titulo">Clique no botão para mudar a classe</h1>


<button id="mudarClasseBtn">Mudar para Azul</button>

<script>
let titulo = document.getElementById("titulo");
let botao = document.getElementById("mudarClasseBtn");

botao.addEventListener("click", function() {
// Adiciona a classe 'azul' e remove a classe 'vermelho'
titulo.classList.add("azul");
titulo.classList.remove("vermelho");
});
</script>

</body>
</html>
Explicação:
• Usamos a propriedade classList para adicionar (add()) ou
remover (remove()) classes CSS.
• Ao clicar no botão, a classe CSS do elemento <h1> é alterada
para aplicar os estilos definidos na classe .azul.
3. Interagindo com Formulários HTML e Alterando o CSS via
JavaScript
Uma das funcionalidades mais poderosas do JavaScript é a
capacidade de interagir com formulários HTML e alterar o
comportamento e estilo desses elementos.
3.1. Exemplo de Validação de Formulário com Alteração de Estilo
Exemplo de Formulário com Validação:
html
Copiar código
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Validação de Formulário com JavaScript</title>
<style>
.erro {
border: 2px solid red;
}
.sucesso {
border: 2px solid green;
}
</style>
</head>
<body>

<h1>Formulário de Cadastro</h1>
<form id="formCadastro">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" required><br><br>

<label for="email">E-mail:</label>
<input type="email" id="email" name="email"
required><br><br>

<button type="submit">Enviar</button>
</form>

<script>

document.getElementById("formCadastro").addEventListener("su
bmit", function(event) {
event.preventDefault(); // Impede o envio do formulário

let nome = document.getElementById("nome");


let email = document.getElementById("email");

// Validação simples
if (nome.value === "") {
nome.classList.add("erro");
alert("Nome é obrigatório!");
} else {
nome.classList.remove("erro");
nome.classList.add("sucesso");
}

if (email.value === "") {


email.classList.add("erro");
alert("E-mail é obrigatório!");
} else {
email.classList.remove("erro");
email.classList.add("sucesso");
}
});
</script>

</body>
</html>
Explicação:
• O evento submit é usado para interceptar o envio do
formulário.
• Caso o nome ou o e-mail não sejam preenchidos, a borda do
campo de entrada é alterada para vermelho (erro) usando a
classe .erro.
• Se o campo for preenchido corretamente, a borda é alterada
para verde (sucesso) usando a classe .sucesso.

4. Manipulando Estilos com CSS e JavaScript Dinâmico


Você pode também adicionar regras de estilo dinâmicas ao seu
documento, criando ou modificando elementos de estilo (CSS)
através de JavaScript.
4.1. Alterando Estilos Dinamicamente
Exemplo de Adicionar Estilos Dinâmicos:
html
Copiar código
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Estilos Dinâmicos com JavaScript</title>
</head>
<body>

<h1 id="titulo">Texto de exemplo</h1>


<button id="mudarEstiloBtn">Alterar Estilo do Título</button>

<script>

document.getElementById("mudarEstiloBtn").addEventListener("c
lick", function() {
// Criando um novo elemento <style>
let estilo = document.createElement("style");
estilo.innerHTML = `
#titulo {
color: purple;
font-size: 40px;
text-decoration: underline;
}
`;
// Adicionando a regra de estilo ao head do documento
document.head.appendChild(estilo);
});
</script>

</body>
</html>
Explicação:
• No exemplo acima, o JavaScript cria um elemento <style> e
adiciona uma nova regra de estilo CSS dentro dele. A regra
será aplicada ao título (<h1>) quando o botão for clicado.

Conclusão
Esses são alguns exemplos fundamentais para integrar JavaScript
com HTML e CSS. O JavaScript permite que você altere
dinâmicamente tanto o conteúdo HTML quanto o estilo da sua
página, criando interatividade e flexibilidade. Lembre-se sempre
de testar o código em diferentes navegadores para garantir que ele
funcione corretamente em todos os contextos.
4o mini
Dito por si:
Mostre como aplicar o Java script no html no css com explicações
e exemplos do facil ao dificil
Dito pelo ChatGPT:
ChatGPT
Para aprender a aplicar JavaScript em HTML e CSS, é essencial
entender como o JavaScript interage com essas duas tecnologias.
Vou guiá-lo do básico ao avançado com explicações e exemplos
passo a passo para que você possa entender cada conceito, desde
o mais simples até os casos mais complexos de integração.

1. Aplicando JavaScript no HTML - Básico


1.1. JavaScript Embutido no HTML
Você pode inserir código JavaScript diretamente no HTML dentro
da tag <script>. Isso permite que o JavaScript execute funções
quando o usuário interage com a página.
Exemplo Básico: Exibindo um Alerta
html
Copiar código
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Exemplo Básico de JavaScript</title>
</head>
<body>

<h1>Olá, Mundo!</h1>
<button onclick="alert('Você clicou no botão!')">Clique
aqui</button>

</body>
</html>
Explicação:
• onclick="alert('Você clicou no botão!')": Esta linha no botão
chama a função alert() quando o botão é clicado. A função
exibe uma mensagem de alerta para o usuário.

2. Manipulando Estilos com JavaScript - Básico


2.1. Alterando o Estilo com style
Com o JavaScript, você pode alterar o estilo de elementos
diretamente usando a propriedade style.
Exemplo: Alterando a Cor do Texto ao Clicar no Botão
html
Copiar código
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Alterando Estilos com JavaScript</title>
</head>
<body>

<h1 id="titulo">Texto para mudar de cor</h1>


<button onclick="document.getElementById('titulo').style.color =
'blue'">Mudar Cor</button>

</body>
</html>
Explicação:
• document.getElementById('titulo').style.color = 'blue': Aqui,
estamos acessando o elemento com id="titulo" e alterando a
cor do texto para azul.
• O JavaScript altera diretamente o estilo do elemento.

3. Trabalhando com Funções e Eventos - Interatividade


3.1. Funções e Eventos
Você pode fazer com que os elementos HTML respondam a
eventos do usuário, como cliques, mouvementos do mouse ou
teclas pressionadas.
Exemplo: Alterando o Texto de um Parágrafo com um Botão
html
Copiar código
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Funções e Eventos</title>
</head>
<body>
<h1 id="titulo">Clique no botão para mudar o texto</h1>
<button onclick="mudarTexto()">Mudar Texto</button>

<script>
function mudarTexto() {
document.getElementById('titulo').innerHTML = "Texto
alterado!";
}
</script>

</body>
</html>
Explicação:
• A função mudarTexto() é chamada quando o botão é clicado.
Ela altera o conteúdo HTML dentro do elemento com
id="titulo".
• innerHTML é utilizado para modificar o conteúdo do
elemento HTML.

4. Manipulando Classes CSS com JavaScript


4.1. Adicionando ou Removendo Classes CSS
Em vez de modificar o estilo inline, você pode usar classes CSS
para aplicar estilos mais organizados e reutilizáveis. O JavaScript
pode adicionar ou remover essas classes dinamicamente.
Exemplo: Alternando Classes ao Clicar no Botão
html
Copiar código
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Alterando Classes CSS</title>
<style>
.vermelho {
color: red;
font-size: 30px;
}
.azul {
color: blue;
font-size: 20px;
}
</style>
</head>
<body>

<h1 id="titulo">Texto de Exemplo</h1>


<button onclick="alterarClasse()">Alterar Classe</button>

<script>
function alterarClasse() {
var titulo = document.getElementById('titulo');
if (titulo.classList.contains('vermelho')) {
titulo.classList.remove('vermelho');
titulo.classList.add('azul');
} else {
titulo.classList.remove('azul');
titulo.classList.add('vermelho');
}
}
</script>

</body>
</html>
Explicação:
• Usamos classList.add() e classList.remove() para adicionar e
remover classes do elemento.
• classList.contains() verifica se a classe está presente no
elemento.
• As classes .vermelho e .azul alteram o estilo de cor e
tamanho da fonte do título.

5. Manipulando o DOM de Forma Dinâmica


5.1. Criando e Adicionando Elementos com JavaScript
JavaScript pode ser usado para criar novos elementos HTML e
adicioná-los à página, o que é uma das formas mais poderosas de
interação dinâmica.
Exemplo: Criando um Novo Parágrafo ao Clicar no Botão
html
Copiar código
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Criando Elementos com JavaScript</title>
</head>
<body>

<h1>Adicionar um Novo Parágrafo</h1>


<button onclick="adicionarParagrafo()">Adicionar</button>

<script>
function adicionarParagrafo() {
var novoParagrafo = document.createElement("p");
novoParagrafo.innerHTML = "Este é um parágrafo criado
dinamicamente!";
document.body.appendChild(novoParagrafo); // Adiciona o
parágrafo ao final do body
}
</script>

</body>
</html>
Explicação:
• document.createElement("p") cria um novo elemento <p>.
• innerHTML define o conteúdo do novo parágrafo.
• appendChild() adiciona o novo parágrafo como filho do
elemento body.

6. Trabalhando com Formulários e Validação - Interatividade


Avançada
6.1. Validação de Formulário com JavaScript
Você pode usar JavaScript para validar campos de formulário antes
de enviar os dados, o que é muito útil para garantir que o usuário
preencha corretamente o formulário.
Exemplo: Validação Simples de Formulário
html
Copiar código
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Validação de Formulário</title>
<style>
.erro {
border: 2px solid red;
}
</style>
</head>
<body>

<h1>Formulário de Cadastro</h1>
<form id="formCadastro">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" required><br><br>

<label for="email">E-mail:</label>
<input type="email" id="email" name="email"
required><br><br>

<button type="submit">Enviar</button>
</form>

<script>

document.getElementById("formCadastro").addEventListener("su
bmit", function(event) {
event.preventDefault(); // Impede o envio do formulário

var nome = document.getElementById("nome");


var email = document.getElementById("email");

if (nome.value === "") {


nome.classList.add("erro");
alert("Nome é obrigatório!");
} else {
nome.classList.remove("erro");
}
if (email.value === "") {
email.classList.add("erro");
alert("E-mail é obrigatório!");
} else {
email.classList.remove("erro");
}
});
</script>

</body>
</html>
Explicação:
• Usamos o evento submit para capturar o envio do formulário.
• A função event.preventDefault() impede que o formulário
seja enviado enquanto a validação não passar.
• Se o campo estiver vazio, a classe erro é adicionada para
destacar o campo inválido.

7. Manipulando o DOM e Estilos Dinamicamente - Avançado


7.1. Alterando CSS via JavaScript (Criando Regras CSS Dinâmicas)
JavaScript pode adicionar ou modificar regras de CSS diretamente
dentro do documento. Isso é útil para ajustar o estilo em tempo
real com base nas interações do usuário.
Exemplo: Alterando Regras de CSS com JavaScript
html
Copiar código
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Alterando Regras CSS</title>
</head>
<body>

<h1 id="titulo">Alterar Estilo com JavaScript</h1>


<button onclick="alterarEstilo()">Alterar Estilo</button>

<script>
function alterarEstilo() {
var estilo = document.createElement("style");
estilo.innerHTML = `
#titulo {
color: green;
font-size: 40px;
text-decoration: underline;
}
`;
document.head.appendChild(estilo);
}
</script>
</body>
</html>
Explicação:
• Criamos um elemento <style> dinamicamente com
document.createElement('style').
• Definimos novas regras CSS para o #titulo e adicionamos
esse elemento ao head do documento.

1. Manipulando Tags HTML com JavaScript


1.1. Selecionando Elementos HTML
Antes de manipular qualquer tag ou elemento HTML com JavaScript,
você precisa selecionar o elemento corretamente. Existem várias
maneiras de fazer isso:
Exemplo: Selecionando um Elemento por ID
html
Copiar código
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Manipulando Tags HTML com JavaScript</title>
</head>
<body>

<h1 id="titulo">Texto Original</h1>


<button onclick="alterarTexto()">Alterar Texto</button>

<script>
function alterarTexto() {
// Seleciona o elemento pelo ID
var titulo = document.getElementById("titulo");
titulo.innerHTML = "Texto Alterado!";
}
</script>

</body>
</html>
Explicação:
• document.getElementById('titulo'): Seleciona o elemento com
o ID titulo.
• innerHTML: Modifica o conteúdo HTML do elemento
selecionado.
1.2. Selecionando Elementos por Classe
Você pode selecionar elementos pela sua classe usando
getElementsByClassName.
Exemplo: Alterando o Conteúdo de Todos os Elementos com uma
Classe
html
Copiar código
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Alterando Vários Elementos</title>
</head>
<body>

<h1 class="titulo">Texto 1</h1>


<h1 class="titulo">Texto 2</h1>
<h1 class="titulo">Texto 3</h1>
<button onclick="alterarConteudo()">Alterar Todos os
Textos</button>

<script>
function alterarConteudo() {
// Seleciona todos os elementos com a classe 'titulo'
var titulos = document.getElementsByClassName('titulo');
for (var i = 0; i < titulos.length; i++) {
titulos[i].innerHTML = "Texto Alterado " + (i + 1);
}
}
</script>

</body>
</html>
Explicação:
• getElementsByClassName('titulo'): Seleciona todos os
elementos com a classe titulo.
• Usamos um loop para alterar o conteúdo de todos os elementos
selecionados.
1.3. Selecionando Elementos com querySelector e
querySelectorAll
As funções querySelector e querySelectorAll permitem selecionar
elementos mais flexíveis usando seletores CSS.
Exemplo: Alterando o Estilo de um Elemento com querySelector
html
Copiar código
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Selecionando Elementos com CSS Selector</title>
</head>
<body>

<h1 class="titulo">Texto para mudar de estilo</h1>


<button onclick="alterarEstilo()">Mudar Estilo</button>

<script>
function alterarEstilo() {
// Seleciona o primeiro elemento com a classe 'titulo'
var titulo = document.querySelector('.titulo');
titulo.style.color = 'blue'; // Muda a cor para azul
titulo.style.fontSize = '30px'; // Aumenta o tamanho da fonte
}
</script>

</body>
</html>
Explicação:
• document.querySelector('.titulo'): Seleciona o primeiro
elemento que tem a classe titulo.
• style: Modifica os estilos inline do elemento.
1.4. Criando e Adicionando Novos Elementos
Você pode criar novos elementos HTML dinamicamente e adicioná-los
ao DOM.
Exemplo: Criando e Adicionando um Novo Parágrafo
html
Copiar código
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Criando Elementos com JavaScript</title>
</head>
<body>

<h1>Adicionar um Novo Parágrafo</h1>


<button onclick="adicionarParagrafo()">Adicionar
Parágrafo</button>

<script>
function adicionarParagrafo() {
var novoParagrafo = document.createElement('p'); // Cria um
novo parágrafo
novoParagrafo.innerHTML = 'Este é um parágrafo adicionado
dinamicamente!'; // Define o conteúdo
document.body.appendChild(novoParagrafo); // Adiciona o
parágrafo ao corpo da página
}
</script>

</body>
</html>
Explicação:
• document.createElement('p'): Cria um novo elemento <p>.
• appendChild(): Adiciona o novo parágrafo ao corpo da página.

2. Manipulando Elementos CSS com JavaScript


Agora vamos ver como manipular o estilo CSS de elementos HTML
com JavaScript.
2.1. Alterando Estilos Inline com JavaScript
A maneira mais simples de alterar o estilo de um elemento é
manipulando suas propriedades inline usando a propriedade style.
Exemplo: Alterando a Cor de Fundo de um Elemento
html
Copiar código
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Alterando Estilo com JavaScript</title>
</head>
<body>

<div id="caixa" style="width: 200px; height: 200px; background-


color: lightgray;">
Caixa de Exemplo
</div>
<button onclick="mudarCor()">Mudar Cor de Fundo</button>

<script>
function mudarCor() {
var caixa = document.getElementById('caixa');
caixa.style.backgroundColor = 'lightblue'; // Muda a cor de fundo
}
</script>

</body>
</html>
Explicação:
• style.backgroundColor: Modifica a cor de fundo diretamente do
estilo inline do elemento.
2.2. Adicionando ou Removendo Classes CSS com JavaScript
Em vez de modificar os estilos diretamente, é uma boa prática
adicionar ou remover classes CSS. Isso mantém o CSS organizado e
reutilizável.
Exemplo: Alternando Classes CSS
html
Copiar código
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Alterando Classes CSS com JavaScript</title>
<style>
.azul {
background-color: blue;
color: white;
padding: 20px;
}
.verde {
background-color: green;
color: white;
padding: 20px;
}
</style>
</head>
<body>

<div id="caixa">Caixa para mudar de estilo</div>


<button onclick="alterarClasse()">Alternar Classe</button>

<script>
function alterarClasse() {
var caixa = document.getElementById('caixa');
if (caixa.classList.contains('azul')) {
caixa.classList.remove('azul');
caixa.classList.add('verde');
} else {
caixa.classList.remove('verde');
caixa.classList.add('azul');
}
}
</script>

</body>
</html>
Explicação:
• classList.contains('azul'): Verifica se a classe azul está
presente no elemento.
• classList.remove() e classList.add() são usados para alternar
entre as classes azul e verde.
2.3. Modificando o Estilo de Vários Elementos com
querySelectorAll
Você pode usar querySelectorAll para selecionar vários elementos e
modificar seus estilos de forma coletiva.
Exemplo: Alterando Estilo de Todos os Elementos de uma Classe
html
Copiar código
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Alterando Estilo de Vários Elementos</title>
<style>
.item {
width: 100px;
height: 100px;
margin: 10px;
background-color: lightgray;
}
</style>
</head>
<body>

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<button onclick="mudarEstilos()">Alterar Estilos de Todos</button>

<script>
function mudarEstilos() {
var itens = document.querySelectorAll('.item'); // Seleciona todos
os elementos com a classe 'item'
itens.forEach(function(item) {
item.style.backgroundColor = 'yellow'; // Muda a cor de fundo
item.style.width = '150px'; // Aumenta a largura
item.style.height = '150px'; // Aumenta a altura
});
}
</script>

</body>
</html>
Explicação:
• querySelectorAll('.item'): Seleciona todos os elementos com a
classe item.
• forEach(): Percorre todos os elementos e altera o estilo de cada
um.

Conclusão
Com JavaScript, você pode manipular tags HTML e aplicar estilos
dinâmicos de diversas formas. Aqui, você aprendeu a:
• Selecionar elementos usando ID, classe e seletores CSS.
• Modificar o conteúdo HTML com innerHTML.
• Alterar estilos inline diretamente ou utilizando classes CSS.
• Criar e adicionar novos elementos HTML dinamicamente.
Essas técnicas são a base para criar páginas interativas e dinâmicas,
permitindo que você responda à interação do usuário em tempo real.

Você também pode gostar