📘 Guia Completo de JavaScript
🔹 Introdução ao JavaScript
JavaScript é uma linguagem de programação fundamental
para o desenvolvimento web moderno. Ele permite criar
páginas dinâmicas, interativas e responsivas. Diferente do
HTML, que define a estrutura da página, e do CSS, que define
o estilo, o JavaScript controla o comportamento dos
elementos na página, permitindo responder a ações do
usuário e manipular dados em tempo real.
JavaScript é suportado por todos os navegadores modernos e
é a base de muitas tecnologias web, incluindo frameworks
populares como React, [Link] e Angular.
🔹 Como o JavaScript funciona
O JavaScript é interpretado diretamente pelo navegador. Ele
interage com o HTML e o CSS para modificar elementos da
página, validar formulários, criar animações, exibir alertas,
atualizar conteúdos e muito mais.
Exemplo simples:
[Link]("Olá, mundo!");
Esse código exibe a mensagem "Olá, mundo!" no console do
navegador.
🔹 Formas de usar JavaScript
Existem três formas principais de incluir JavaScript em
páginas web:
1. Inline: aplicado diretamente no elemento HTML.
<button onclick="alert('Você clicou no botão!')">Clique
aqui</button>
2. Interno: colocado dentro da tag <script> no HTML.
<script>
alert("Bem-vindo ao site!");
</script>
3. Externo (mais recomendado): usando um arquivo .js
separado.
<script src="[Link]"></script>
O uso de arquivos externos mantém o código organizado e
facilita a manutenção.
🔹 Variáveis e tipos de dados
Variáveis armazenam informações para serem usadas no
código. Existem três palavras-chave principais para declarar
variáveis:
let: para variáveis que podem mudar de valor
const: para valores que não devem mudar
var: antiga, ainda funciona, mas menos recomendada
Exemplo:
let nome = "João";
const idade = 25;
Tipos de dados comuns:
String: textos, ex: "Olá"
Number: números, ex: 10
Boolean: verdadeiro/falso, ex: true
Array: listas de valores, ex: ["maçã","banana"]
Object: objetos com propriedades, ex: {nome:"Ana",
idade:30}
🔹 Operadores
Operadores permitem manipular dados:
Aritméticos: +, -, *, /, %
Comparação: ==, ===, !=, !==, >, <
Lógicos: &&, ||, !
Exemplo:
if (idade >= 18 && idade < 65) {
[Link]("Adulto em idade ativa");
🔹 Estruturas condicionais
Permitem que o código tome decisões:
if (idade >= 18) {
[Link]("Maior de idade");
} else if (idade < 12) {
[Link]("Criança");
} else {
[Link]("Adolescente");
🔹 Estruturas de repetição
Permitem executar blocos de código várias vezes.
For:
for (let i = 0; i < 5; i++) {
[Link](i);
While:
let i = 0;
while (i < 5) {
[Link](i);
i++;
🔹 Funções
Funções são blocos de código reutilizáveis que realizam
tarefas específicas.
function saudacao(nome) {
return "Olá, " + nome + "!";
[Link](saudacao("Maria"));
Funções podem receber parâmetros e retornar valores.
🔹 Manipulação do DOM
O DOM (Document Object Model) representa a página como
uma árvore de elementos. Com JavaScript, é possível alterar o
conteúdo, atributos, estilos e até criar novos elementos.
[Link]("titulo").innerHTML = "Novo
título";
[Link](".classe").[Link] = "blue";
🔹 Eventos
Eventos são ações que ocorrem na página, como cliques ou
envio de formulários. Podemos reagir a eventos usando
addEventListener.
const botao = [Link]("meuBotao");
[Link]("click", function() {
alert("Botão clicado!");
});
🔹 Arrays e Objetos
Array:
let frutas = ["maçã", "banana", "laranja"];
[Link](frutas[0]); // "maçã"
Objeto:
let pessoa = {
nome: "Ana",
idade: 30,
saudacao: function() { return "Olá, " + [Link]; }
};
[Link]([Link]());
🔹 Boas práticas
Usar nomes de variáveis claros e descritivos
Evitar repetição de código
Comentar partes importantes
Manter o código organizado em arquivos separados
Testar em diferentes navegadores e dispositivos
🔹 Conclusão
JavaScript é essencial para criar páginas web modernas,
interativas e dinâmicas. Com ele, você pode transformar
páginas estáticas em experiências completas para o usuário.
Aprender JavaScript é um passo fundamental para qualquer