Você já montou páginas com HTML, deixou tudo estilizado com CSS, e agora quer torná-las interativas? Então é hora de aprender JavaScript, a linguagem de programação mais popular da web. Neste artigo, você vai entender o que é JavaScript, para que serve, como começar a usar e quais são os conceitos essenciais para dominar essa linguagem poderosa.
O Que é JavaScript?
JavaScript (ou JS) é uma linguagem de programação voltada principalmente para o desenvolvimento web. Ela é usada para adicionar interatividade e dinamismo às páginas HTML. Com JavaScript, você pode:
-
Validar formulários
-
Criar menus interativos
-
Exibir mensagens e alertas
-
Manipular elementos da página (DOM)
-
Fazer requisições de dados (AJAX)
-
Desenvolver aplicações completas no navegador
Onde o JavaScript é Usado?
JavaScript é executado no navegador do usuário, sem precisar de servidor. Ele é compatível com todos os navegadores modernos. Com a evolução da linguagem, também é usado no back-end com Node.js, no desenvolvimento mobile (React Native), e até em jogos.
Como Adicionar JavaScript a Uma Página
1. Inline (não recomendado):
<button onclick="alert('Olá!')">Clique aqui</button>
2. Interno (dentro do HTML):
<script>
alert("Página carregada!");
</script>
3. Externo (forma ideal):
<script src="script.js"></script>
Primeiros Passos com JavaScript
1. Exibindo Mensagens
alert("Bem-vindo ao meu site!");
console.log("Mensagem no console");
2. Variáveis
let nome = "João";
const idade = 25;
var cidade = "São Paulo";
3. Tipos de Dados
-
String:
"texto"
-
Number:
123
-
Boolean:
true
oufalse
-
Array:
[1, 2, 3]
-
Object:
{ nome: "Ana", idade: 30 }
4. Operadores
let soma = 5 + 3;
let multiplicacao = 4 * 2;
let comparacao = 10 > 5; // true
Condições e Laços
Condicional IF
let idade = 18;
if (idade >= 18) {
console.log("Maior de idade");
} else {
console.log("Menor de idade");
}
Laço FOR
for (let i = 0; i < 5; i++) {
console.log("Número: " + i);
}
Funções em JavaScript
function saudacao(nome) {
alert("Olá, " + nome + "!");
}
saudacao("Maria");
Você também pode usar arrow functions:
const soma = (a, b) => a + b;
console.log(soma(3, 7)); // 10
Manipulação do DOM (Document Object Model)
Um dos recursos mais usados no JS é a capacidade de alterar elementos HTML dinamicamente.
Selecionando Elementos
let titulo = document.querySelector("h1");
titulo.innerText = "Título alterado com JavaScript!";
Interagindo com Botões
<button id="meuBotao">Clique</button>
<script>
document.getElementById("meuBotao").addEventListener("click", function() {
alert("Você clicou no botão!");
});
</script>
Eventos em JavaScript
Eventos são ações que acontecem na página, como cliques, teclas pressionadas ou envio de formulários.
document.addEventListener("keydown", function(event) {
console.log("Tecla pressionada: " + event.key);
});
Trabalhando com Arrays e Objetos
Arrays
let frutas = ["maçã", "banana", "uva"];
console.log(frutas[1]); // banana
Objetos
let pessoa = {
nome: "Carlos",
idade: 40,
saudacao: function() {
console.log("Olá, meu nome é " + this.nome);
}
};
pessoa.saudacao();
Boas Práticas em JavaScript
-
Use
let
econst
ao invés devar
-
Organize seu código com funções reutilizáveis
-
Use nomes de variáveis claros e significativos
-
Comente o código sempre que necessário
-
Teste seu código no console do navegador
Ferramentas e Sites para Praticar
-
JavaScript30 – 30 projetos gratuitos com JS puro
Conclusão
Aprender JavaScript pode parecer desafiador no início, mas com prática e paciência, você será capaz de criar páginas interativas, aplicativos completos e até jogos. Comece com conceitos simples, experimente no navegador e vá aumentando o nível aos poucos.
💡 Desafio: Crie um botão que, ao ser clicado, muda o fundo da página!