Tutorial de Sintaxe JavaScript para Iniciantes
JavaScript é uma linguagem de programação essencial para desenvolvimento
web. Este tutorial cobrirá os conceitos básicos da sintaxe JavaScript para ajudar
você a começar.
1. Comentários
// Isto é um comentário de uma linha
/*
Isto é um comentário
de múltiplas linhas
*/
2. Declaração de Variáveis
// Formas antigas (ainda funcionam)
var nome = "João"; // Escopo de função
// Formas modernas (ES6+)
let idade = 30; // Escopo de bloco, pode ser reatribuída
const PI = 3.14; // Escopo de bloco, não pode ser reatribuída
3. Tipos de Dados
// Primitivos
let nome = "Maria"; // String
let idade = 25; // Number
let temCarro = true; // Boolean
let sobrenome = null; // Null
let endereco; // Undefined
let id = Symbol("id"); // Symbol (ES6)
let bigNum = 10n; // BigInt (ES2020)
// Objetos
let pessoa = { // Object
nome: "Carlos",
idade: 30
};
let frutas = ["maçã", "banana"]; // Array
function cumprimentar() { // Function
[Link]("Olá!");
}
4. Operadores
// Aritméticos
let soma = 5 + 3; // 8
let subtracao = 5 - 3; // 2
let multiplicacao = 5 * 3; // 15
let divisao = 6 / 2; // 3
let resto = 5 % 2; // 1
let exponenciacao = 2 ** 3; // 8 (ES6)
// Atribuição
let x = 10;
x += 5; // x = x + 5 → 15
// Comparação
5 == "5"; // true (igualdade)
5 === "5"; // false (igualdade estrita)
10 != "10"; // false
10 !== "10"; // true
5 > 3; // true
5 <= 5; // true
// Lógicos
true && false; // AND → false
true || false; // OR → true
!true; // NOT → false
// Ternário
let status = (idade >= 18) ? "Adulto" : "Menor";
5. Estruturas de Controle
Condicionais
// if-else
if (idade >= 18) {
[Link]("Adulto");
} else {
[Link]("Menor");
}
// switch
let dia = 3;
switch(dia) {
case 1:
[Link]("Domingo");
break;
case 2:
[Link]("Segunda");
break;
// ...
default:
[Link]("Dia inválido");
}
Loops
// for
for (let i = 0; i < 5; i++) {
[Link](i);
}
// while
let j = 0;
while (j < 5) {
[Link](j);
j++;
}
// do-while
let k = 0;
do {
[Link](k);
k++;
} while (k < 5);
// for...of (ES6) para arrays
let frutas = ["maçã", "banana", "laranja"];
for (let fruta of frutas) {
[Link](fruta);
}
// for...in para objetos
let pessoa = {nome: "Ana", idade: 25};
for (let chave in pessoa) {
[Link](chave + ": " + pessoa[chave]);
}
6. Funções
// Declaração de função
function somar(a, b) {
return a + b;
}
// Expressão de função
const multiplicar = function(a, b) {
return a * b;
};
// Arrow function (ES6)
const dividir = (a, b) => {
return a / b;
};
// Forma concisa (quando tem apenas uma expressão)
const quadrado = x => x * x;
// Parâmetros padrão (ES6)
function saudacao(nome = "Visitante") {
[Link]("Olá, " + nome);
}
// Rest parameters (ES6)
function listar(...itens) {
[Link](itens); // Array com todos os argumentos
}
7. Objetos
// Literal de objeto
let pessoa = {
nome: "Joana",
idade: 28,
profissao: "Engenheira",
saudacao: function() {
[Link]("Olá, meu nome é " + [Link]);
}
};
// Acessando propriedades
[Link]([Link]); // Notação de ponto
[Link](pessoa["idade"]); // Notação de colchetes
// Adicionando propriedades
[Link] = "joana@[Link]";
// Classes (ES6)
class Animal {
constructor(nome) {
[Link] = nome;
}
falar() {
[Link]([Link] + " faz um barulho.");
}
}
class Cachorro extends Animal {
falar() {
[Link]([Link] + " late.");
}
}
let rex = new Cachorro("Rex");
[Link](); // Rex late.
8. Arrays
let frutas = ["maçã", "banana"];
// Métodos comuns
[Link]("laranja"); // Adiciona no final
[Link](); // Remove do final
[Link]("uva"); // Adiciona no início
[Link](); // Remove do início
// Iteração
[Link](function(fruta) {
[Link](fruta);
});
// Map (cria novo array)
let tamanhos = [Link](fruta => [Link]);
// Filter (cria novo array)
let longas = [Link](fruta => [Link] > 5);
// Spread operator (ES6)
let maisFrutas = [...frutas, "abacaxi", "melancia"];
9. Manipulação de Strings
let texto = "JavaScript";
// Propriedades e métodos
[Link]; // 10
[Link](); // "JAVASCRIPT"
[Link](); // "javascript"
[Link]("Script"); // 4
[Link]("Java"); // true (ES6)
[Link]("Java"); // true (ES6)
[Link]("Script"); // true (ES6)
[Link](0, 4); // "Java"
[Link]("Java", "Type"); // "TypeScript"
// Template literals (ES6)
let nome = "Carlos";
let idade = 30;
[Link](`Olá, meu nome é ${nome} e tenho ${idade} anos.`);
10. Tratamento de Erros
try {
// Código que pode gerar erro
let resultado = operacaoRiscosa();
} catch (erro) {
[Link]("Ocorreu um erro:", [Link]);
} finally {
[Link]("Isso sempre executa");
}
// Lançando erros
function dividir(a, b) {
if (b === 0) {
throw new Error("Divisão por zero não permitida");
}
return a / b;
}
11. Promises e Async/Await (ES6+)
// Promise
function buscarDados() {
return new Promise((resolve, reject) => {
// Simulando operação assíncrona
setTimeout(() => {
resolve("Dados recebidos");
// ou reject(new Error("Falha na requisição"));
}, 1000);
});
}
// Usando then/catch
buscarDados()
.then(dados => [Link](dados))
.catch(erro => [Link](erro));
// Async/Await (ES2017)
async function processarDados() {
try {
let dados = await buscarDados();
[Link](dados);
} catch (erro) {
[Link](erro);
}
}
12. Módulos (ES6)
// export (em um arquivo)
export const PI = 3.14;
export function dobrar(x) { return x * 2; }
// ou
const PI = 3.14;
function dobrar(x) { return x * 2; }
export { PI, dobrar };
// import (em outro arquivo)
import { PI, dobrar } from './[Link]';
[Link](dobrar(PI)); // 6.28
// Importando tudo
import * as matematica from './[Link]';
// Export default
export default function(x) { return x * x; }
import quadrado from './[Link]';
Conclusão
Este tutorial cobriu os conceitos básicos da sintaxe JavaScript. Para se
aprofundar:
1. Pratique regularmente escrevendo código
2. Explore recursos mais avançados como generators, proxies, etc.
3. Aprenda sobre manipulação do DOM para interação com páginas web
4. Estude frameworks modernos como React, Vue ou Angular
Lembre-se que JavaScript está em constante evolução, então mantenha-se
atualizado com as novas versões do ECMAScript!