Introdução, Sintaxe e Inserção no HTML
JavaScript é uma linguagem de programação interpretada, leve e orientada a objetos, essencial no desenvolvimento web. Criada originalmente para permitir interatividade em páginas HTML, hoje é amplamente utilizada tanto no lado do cliente (navegadores) quanto no lado do servidor (Node.js).
JavaScript é usado para:
| Característica | Descrição |
|---|---|
| Interpretada | Executada diretamente pelo navegador, sem compilação prévia |
| Dinamicamente tipada | Não é necessário definir o tipo das variáveis |
| Multiplataforma | Funciona em qualquer sistema com navegador moderno |
| Baseada em eventos | Executa ações conforme interações do usuário (click, keypress etc.) |
| Orientada a objetos | Suporta classes, objetos e herança desde o ECMAScript 6 |
| Assíncrona por natureza | Suporta promessas e async/await para programação não bloqueante |
Um script em JavaScript pode ser escrito diretamente em uma página HTML usando a tag <script>.
<!DOCTYPE html>
<html>
<head>
<title>Meu Primeiro Script</title>
</head>
<body>
<h1>Olá, mundo!</h1>
<script>
document.write("Olá! Este texto foi escrito com JavaScript.");
</script>
</body>
</html>
.js externos e vinculá-los com <script src="arquivo.js"></script>
Os comentários são trechos ignorados pelo interpretador, usados para documentar ou desativar partes do código.
// Comentário de linha única /* Comentário de múltiplas linhas */
Cada linha de código que realiza uma ação é uma instrução.
let nome = "Matheus"; console.log(nome);
As instruções são executadas de cima para baixo, a menos que estejam dentro de estruturas condicionais, funções ou laços.
JavaScript distingue letras maiúsculas de minúsculas.
let nome = "Lucas"; console.log(Nome); // Erro! "Nome" não foi declarado
Blocos de código agrupam múltiplas instruções entre chaves {}. Muito usados em funções, laços e condicionais:
if (true) {
let mensagem = "Bloco executado";
console.log(mensagem);
}
JavaScript usa pontuação específica para organizar e delimitar o código:
| Símbolo | Uso comum | Exemplo |
|---|---|---|
| ; | Finaliza instruções | let x = 5; |
| {} | Delimita blocos de código | if () { ... } |
| () | Agrupa parâmetros/condições | funcao(param1, param2) |
| [] | Define arrays ou acessa índices | array[0] |
| . | Acessa propriedades/métodos | objeto.propriedade |
| , | Separa elementos (arrays, params) | let x = (1, 2) |
| : | Define pares chave-valor em objetos | { nome: "Lucas" } |
; é opcional em muitos casos, mas recomendado para evitar ambiguidades.
<script>, o atributo type, os locais adequados para inserção do script e o uso de arquivos externos.
O elemento <script> é utilizado para inserir ou referenciar código JavaScript dentro de um documento HTML.
<script>
alert("Olá, mundo!");
</script>
<script> dentro de <head> com scripts que alteram elementos do body sem o evento DOMContentLoaded.
Historicamente, o atributo type era obrigatório para especificar o tipo de script. Hoje, seu uso é opcional.
<script type="text/javascript">
console.log("Olá!");
</script>
text/javascript é padrão implícito, ou seja, pode ser omitido.
| Atributo | Situação Atual |
|---|---|
type |
Opcional (padrão: text/javascript) |
type="module" |
Usado para scripts modernos com import/export |
A posição do <script> no HTML afeta quando o script será executado:
<script> no final do <body> para garantir que todos os elementos estejam carregados:
<body>
<h1>Olá!</h1>
<script>
document.querySelector("h1").style.color = "blue";
</script>
</body>
<script> no <head>, considere usar defer ou DOMContentLoaded para evitar erros de carregamento.
<script defer src="app.js"></script>
Você pode manter o código JavaScript em arquivos .js separados, facilitando a manutenção e reutilização.
<script src="meuscript.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Página com JS Externo</title>
<script src="script.js" defer></script>
</head>
<body>
<h2>Olá</h2>
</body>
</html>
Arquivo script.js:
document.querySelector("h2").style.color = "red";
<script> permite inserir ou vincular scripts JavaScript ao HTML<body> evita problemas de carregamentoAgora que você domina os fundamentos do JavaScript, está pronto para explorar tipos de dados, variáveis e estruturas de controle na próxima parte!