Aula 7 - Introdução ao JavaScript: Comece a Programar na Web do Jeito Certo
Aprenda o que é JavaScript, como usá-lo e por que ele é essencial no desenvolvimento web. Guia completo para iniciantes que querem dar os primeiros passos na programação.
DESENVOLVIMENTO WEB
Prof. Leonardo Gomes Guidolin
4/10/20252 min ler
O que é JavaScript?
JavaScript é uma linguagem de programação leve, dinâmica e essencial para o desenvolvimento web. Com ela, você consegue:
Criar interações com o usuário
Atualizar conteúdo dinamicamente sem recarregar a página
Validar formulários
Criar animações e efeitos visuais
Construir aplicações web completas (frontend e backend)
Se você já aprendeu HTML e CSS, chegou a hora de usar o JavaScript para transformar páginas estáticas em aplicações interativas.
Como usar JavaScript no HTML
1. Dentro da tag <script> no HTML:
<!DOCTYPE html>
<html>
<body>
<h2>Minha Primeira Página com JavaScript</h2>
<script>
alert("Olá, seja bem-vindo ao JavaScript!");
</script>
</body>
</html>
2. Em um arquivo externo (.js):
<script src="meuscript.js"></script>
Arquivo meuscript.js:
console.log("Olá do arquivo externo!");
Variáveis em JavaScript
let nome = "Lucas";
const idade = 30;
var cidade = "Curitiba";
console.log(nome, idade, cidade);
Use let para variáveis que podem mudar
Use const para valores fixos
var é mais antigo, evite se possível
Tipos de Dados
let texto = "Olá, mundo"; // String
let numero = 10; // Number
let ativo = true; // Boolean
let lista = [1, 2, 3]; // Array
let pessoa = { nome: "Ana", idade: 25 }; // Objeto
console.log(pessoa.nome); // Acessa a propriedade "nome"
Operadores Aritméticos
let a = 5;
let b = 2;
console.log(a + b); // 7
console.log(a - b); // 3
console.log(a * b); // 10
console.log(a / b); // 2.5
console.log(a % b); // 1
Condicionais (if, else, else if)
let nota = 7;
if (nota >= 7) {
console.log("Aprovado");
} else if (nota >= 5) {
console.log("Recuperação");
} else {
console.log("Reprovado");
}
Estruturas de Repetição
For:
for (let i = 1; i <= 5; i++) {
console.log("Contando: " + i);
}
While:
let i = 1;
while (i <= 3) {
console.log("Número: " + i);
i++;
}
Funções
function saudacao(nome) {
return "Olá, " + nome + "!";
}
console.log(saudacao("Bruna"));
Você também pode usar funções anônimas ou arrow functions:
const dobro = (x) => x * 2;
console.log(dobro(8)); // 16
Eventos e Interações com a Página
Exemplo 1: Botão com alerta
<button onclick="mostrarAlerta()">Clique aqui</button>
<script>
function mostrarAlerta() {
alert("Você clicou no botão!");
}
</script>
Exemplo 2: Mudando o texto de um parágrafo
<p id="demo">Texto original</p>
<button onclick="mudarTexto()">Mudar</button>
<script>
function mudarTexto() {
document.getElementById("demo").innerText = "Texto alterado com sucesso!";
}
</script>
Trabalhando com Inputs
<input type="text" id="nome" placeholder="Digite seu nome">
<button onclick="cumprimentar()">Enviar</button>
<p id="resposta"></p>
<script>
function cumprimentar() {
const nome = document.getElementById("nome").value;
document.getElementById("resposta").innerText = "Olá, " + nome + "!";
}
</script>
Conclusão
Você acabou de dar os primeiros passos no JavaScript, aprendendo a criar interatividade, manipular elementos e aplicar lógica de programação.
🔁 Próximos passos recomendados:
Praticar com mini-projetos (ex: calculadora simples, to-do list, validador de formulário)
Aprender sobre funções mais avançadas, arrays e objetos
Explorar eventos do DOM e manipulação avançada de elementos