O que é JavaScript?
JavaScript, também chamado de JS, é uma linguagem de programação usada para adicionar interatividade e comportamento às páginas da internet.
De forma simples:
HTML → cria a estrutura 🏗️
CSS → deixa a página bonita 🎨
JavaScript → faz a página funcionar ⚙️Por exemplo, o HTML pode criar um botão:
<button>Clique aqui</button>O CSS pode deixar o botão bonito:
button {
background-color: blue;
color: white;
padding: 10px 20px;
}E o JavaScript pode fazer alguma coisa acontecer quando o usuário clicar:
alert("Você clicou no botão!");Onde colocar o JavaScript?
Assim como o CSS, existem algumas formas de colocar JavaScript no site.
1. Dentro do HTML
Podemos usar a tag <script>:
<!DOCTYPE html>
<html>
<head>
<title>Meu site</title>
</head>
<body>
<h1>Meu site</h1>
<script>
alert("Olá!");
</script>
</body>
</html>Quando a página abrir, aparecerá uma mensagem.
2. Em um arquivo separado
Essa é uma forma muito utilizada em projetos maiores.
Crie:
index.html
style.css
script.jsNo HTML:
<script src="script.js"></script>No arquivo script.js:
alert("Olá! Bem-vindo ao meu site!");Assim, o HTML, CSS e JavaScript ficam organizados em arquivos diferentes.
O que podemos fazer com JavaScript?
JavaScript permite criar várias funcionalidades.
Mostrar uma mensagem
alert("Olá!");Alterar um texto
HTML:
<h1 id="titulo">Olá</h1>JavaScript:
document.getElementById("titulo").textContent = "Bem-vindo!";O texto do título será alterado.
Responder ao clique de um botão
HTML:
<button id="botao">Clique aqui</button>JavaScript:
document.getElementById("botao").onclick = function() {
alert("Botão clicado!");
};Fazer cálculos
let preco = 100;
let desconto = 20;
let resultado = preco - desconto;
console.log(resultado);O resultado será:
80O que são variáveis?
Variáveis são usadas para guardar informações.
Por exemplo:
let nome = "Andersen";
let idade = 30;Nesse exemplo:
nomeguarda um texto.idadeguarda um número.
Podemos usar essas informações depois:
console.log(nome);
console.log(idade);JavaScript em um site de eletrodomésticos
Imagine que você tenha um produto:
<h2>Geladeira Frost Free</h2>
<p>R$ 2.500</p>
<button id="comprar">Comprar</button>O JavaScript pode detectar o clique:
document.getElementById("comprar").onclick = function() {
alert("Produto adicionado ao carrinho!");
};Agora o botão passa a ter uma função.
JavaScript também pode criar um carrinho
Por exemplo:
let carrinho = 0;
function adicionarProduto() {
carrinho = carrinho + 1;
console.log("Produtos no carrinho: " + carrinho);
}JavaScript e o navegador
Quando você abre um site, o navegador interpreta o HTML, aplica o CSS e executa o JavaScript.
Por isso, podemos pensar assim:
SITE
↓
┌───────────────┐
│ HTML │
│ Estrutura │
└───────────────┘
↓
┌───────────────┐
│ CSS │
│ Aparência │
└───────────────┘
↓
┌───────────────┐
│ JavaScript │
│ Interatividade│
└───────────────┘