EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語
404 Not Found

404 Not Found

nginx

Sintaxe do JavaScript

Sintaxe são as regras da linguagem — dominar as regras de sintaxe do JS garante que seu código seja corretamente entendido pelo navegador.

Instruções e Ponto e Vírgula

O código JS é composto por instruções, cada uma realizando uma ação. Um ponto e vírgula ; marca o final de uma instrução.

Embora o JS tenha inserção automática de ponto e vírgula (ASI) e a maioria dos código funcione bem sem eles, é fortemente recomendado adicioná-los manualmente. Por quê? Porque a ASI ocasionalmente interpreta mal sua intenção, causando bugs difíceis de depurar. Criar o hábito de adicionar ponto e vírgula economiza muito mais tempo de depuração do que o esforço de digitá-los.

Blocos de Código

Múltiplas instruções envoltas em chaves {} formam um bloco de código, comumente visto em corpos de funções, condicionais e loops:

HTML 
<script>
if (score > 60) {
  result = "Aprovado";
  color = "green";
}
</script>

Blocos de código fazem múltiplas instruções executarem como uma unidade. Embora as chaves possam ser omitidas para instruções únicas, nunca as ignore — as chaves tornam sua intenção mais clara e previnem bugs quando você adicionar mais instruções depois.

Comentários

Comentários são escritos para humanos; o navegador os ignora completamente. Bons comentários explicam "por quê", não "o quê" (o código em si deve transmitir o que faz).

Maiúsculas e Minúsculas

O JS é estritamente sensível a maiúsculas e minúsculas: myVar, myvar e MYVAR são três variáveis completamente diferentes. Iniciantes frequentemente tropeçam aqui — a lógica parece correta, mas erros ocorrem por causa de maiúsculas/minúsculas erradas.

Palavras-chave e Palavras Reservadas

O JS reserva certas palavras como palavras-chave (como var, let, const, function, if, else, etc.) e você não pode usá-las como nomes de variáveis. A lista completa de palavras reservadas é longa; apenas lembre das mais comuns — o destaque de sintaxe do seu editor ajudará a identificá-las.

Exemplo: Instruções, Ponto e Vírgula e Blocos de Código

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Sintaxe JS - Instruções e Blocos de Código</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 500px; margin: 60px auto; }
    #output { min-height: 40px; padding: 16px; background: #f5f5f5; border-radius: 8px; margin-top: 16px; }
    button { padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; color: #fff; background: #2196F3; margin-top: 8px; }
    button:hover { background: #1976D2; }
    input { padding: 8px; font-size: 16px; border: 2px solid #ddd; border-radius: 4px; width: 100px; }
  </style>
</head>
<body>
  <h2>Instruções e Blocos de Código</h2>
  <p>Digite uma nota para verificar se foi aprovado:</p>
  <input type="number" id="scoreInput" placeholder="Nota" value="75">
  <button id="checkBtn">Verificar</button>
  <div id="output"></div>
  <script>
    document.getElementById("checkBtn").onclick = function() {
      var score = parseInt(document.getElementById("scoreInput").value);
      var result = "";
      var color = "";
      if (score >= 60) {
        result = "Aprovado! Nota: " + score;
        color = "#4CAF50";
      } else {
        result = "Reprovado. Nota: " + score;
        color = "#f44336";
      }
      var outputEl = document.getElementById("output");
      outputEl.textContent = result;
      outputEl.style.color = color;
    };
  </script>
</body>
</html>
▶ Experimente

Exemplo: Usando Comentários

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Sintaxe JS - Comentários</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 500px; margin: 60px auto; }
    .code-box { background: #263238; color: #aed581; padding: 20px; border-radius: 8px; font-family: Consolas, monospace; font-size: 14px; line-height: 1.8; white-space: pre; overflow-x: auto; }
    .comment { color: #78909c; }
    button { margin-top: 16px; padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; color: #fff; background: #4CAF50; }
    #result { margin-top: 12px; font-size: 18px; }
  </style>
</head>
<body>
  <h2>Comentários em JS</h2>
  <div class="code-box"><span class="comment">// Comentário de linha única: calcular a área de um círculo</span>
var r = 5;
var area = 3.14 * r * r;
<span class="comment">/* Comentário de múltiplas linhas:
   arredondar para duas casas decimais */</span>
area = area.toFixed(2);</div>
  <button id="runBtn">Executar este código</button>
  <p id="result"></p>
  <script>
    document.getElementById("runBtn").onclick = function() {
      var r = 5;
      var area = 3.14 * r * r;
      area = area.toFixed(2);
      document.getElementById("result").textContent = "Área do círculo com raio 5 = " + area;
      document.getElementById("result").style.color = "#4CAF50";
    };
  </script>
</body>
</html>
▶ Experimente

Exemplo: Demonstração de Maiúsculas e Minúsculas

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Sintaxe JS - Maiúsculas e Minúsculas</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 500px; margin: 60px auto; text-align: center; }
    .card { display: inline-block; padding: 20px; border: 2px solid #ddd; border-radius: 12px; margin: 8px; min-width: 120px; }
    .card h3 { margin: 0 0 8px; }
    .card p { margin: 0; font-family: Consolas, monospace; font-size: 18px; }
    #myVar { border-color: #4CAF50; }
    #myvar { border-color: #FF9800; }
    #MYVAR { border-color: #9C27B0; }
    button { margin-top: 20px; padding: 10px 24px; font-size: 16px; border: none; border-radius: 6px; cursor: pointer; color: #fff; background: #e91e63; }
  </style>
</head>
<body>
  <h2>Sensibilidade a Maiúsculas e Minúsculas no JS</h2>
  <p>Esses três nomes de variáveis são todos diferentes:</p>
  <div class="card" id="myVar"><h3>myVar</h3><p>---</p></div>
  <div class="card" id="myvar"><h3>myvar</h3><p>---</p></div>
  <div class="card" id="MYVAR"><h3>MYVAR</h3><p>---</p></div>
  <br>
  <button id="showBtn">Atribuir e Exibir</button>
  <script>
    document.getElementById("showBtn").onclick = function() {
      var myVar = "Verde";
      var myvar = "Laranja";
      var MYVAR = "Roxo";
      document.querySelector("#myVar p").textContent = myVar;
      document.querySelector("#myvar p").textContent = myvar;
      document.querySelector("#MYVAR p").textContent = MYVAR;
    };
  </script>
</body>
</html>
▶ Experimente

Exemplo: Regras de Nomenclatura na Prática

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Sintaxe JS - Regras de Nomenclatura</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 550px; margin: 60px auto; }
    .rule { padding: 12px 16px; border-left: 4px solid #2196F3; background: #e3f2fd; margin: 8px 0; border-radius: 0 8px 8px 0; }
    .bad { border-left-color: #f44336; background: #ffebee; }
    .good { border-left-color: #4CAF50; background: #e8f5e9; }
    code { background: #eceff1; padding: 2px 6px; border-radius: 3px; font-size: 14px; }
  </style>
</head>
<body>
  <h2>Regras de Nomenclatura de Variáveis</h2>
  <div class="rule">✅ Permitido: letras, dígitos, sublinhado <code>_</code>, cifrão <code>$</code></div>
  <div class="rule">✅ Não pode começar com dígito</div>
  <div class="rule">✅ Não pode usar palavras-chave (como <code>var</code> <code>let</code> <code>function</code>)</div>
  <div class="rule good">✅ Recomendado: camelCase — <code>primeiroNome</code> <code>notaTotal</code></div>
  <div class="rule bad">❌ Não recomendado: <code>meu_primeiro_nome</code> (estilo com sublinhado é incomum em JS)</div>
  <div class="rule bad">❌ Inválido: <code>2doLugar</code> (começa com dígito) <code>minha-var</code> (contém hífen)</div>
  <hr style="margin: 24px 0;">
  <h3>Exemplos de camelCase</h3>
  <div id="demo" style="font-size: 18px; line-height: 2;"></div>
  <script>
    var firstName = "João";
    var lastName = "Silva";
    var ageInYears = 25;
    var isStudent = true;
    var favoriteLanguage = "JavaScript";
    var demoEl = document.getElementById("demo");
    demoEl.innerHTML = "firstName = \"" + firstName + "\"<br>" +
      "lastName = \"" + lastName + "\"<br>" +
      "ageInYears = " + ageInYears + "<br>" +
      "isStudent = " + isStudent + "<br>" +
      "favoriteLanguage = \"" + favoriteLanguage + "\"";
  </script>
</body>
</html>
▶ Experimente

📖 Resumo

  1. Instruções JS terminam com ponto e vírgula — sempre adicione manualmente; não dependa da inserção automática
  2. Blocos de código usam {} — mesmo para instruções únicas, nunca omita as chaves
  3. Comentários de linha única usam //, comentários de múltiplas linhas usam /* */ — comentários devem explicar "por quê", não "o quê"
  4. O JS é estritamente sensível a maiúsculas e minúsculas — myVar ≠ myvar é o erro mais comum de iniciantes
  5. Nomes de variáveis não podem começar com dígitos e não podem usar palavras-chave ou palavras reservadas
  6. camelCase é a convenção de nomenclatura recomendada: primeiroNome, notaTotal

❓ Perguntas Frequentes

P：Omitir ponto e vírgula realmente pode causar bugs? R：Na maioria das vezes não, mas existem casos extremos. Por exemplo, uma quebra de linha após return faz o JS inserir automaticamente um ponto e vírgula, retornando undefined em vez do valor pretendido. Esses bugs são extremamente sorrateiros — você pode depurar por horas para descobrir um ponto e vírgula faltando. Por que arriscar?

P：Devo adicionar chaves em instruções de uma linha? R：Sim. Hoje é uma linha; amanhã você pode adicionar mais duas. Esquecer de adicionar chaves depois causa erros de lógica. Chaves custam alguns bytes, mas economizam horas de depuração.

P：camelCase ou snake_case — qual é melhor? R：No mundo JS, camelCase (primeiroNome) é o padrão. snake_case (primeiro_nome) é mais comum em Python e campos de banco de dados. Quando em Roma, faça como os romanos — use camelCase em JS.

📝 Atividades

  1. Básico: Escreva código JS que declare duas variáveis nomeAluno e idadeAluno, atribua valores a elas e imprima com console.log(). Certifique-se de que todas as instruções tenham ponto e vírgula e os nomes das variáveis usem camelCase.
  2. Intermediário: Crie uma página com um campo de entrada e um botão. Quando o usuário inserir uma idade, determine se ele é maior de idade (≥18) usando um bloco if/else e exiba o resultado na página.
  3. Desafio: Crie uma página de "Verificador de Nomenclatura" onde o usuário insira um nome de variável. O JS verifica se é válido (sem dígitos no início, sem espaços ou hífens, não é uma palavra-chave) e exibe "Válido" ou "Inválido" com o motivo.
100%