Módulo 1: Fundamentos Básicos do JavaScript
Bem-vindo ao primeiro módulo do nosso curso de JavaScript! Aqui, você dará os primeiros
passos no mundo da programação com JavaScript, entendendo o que é essa linguagem,
por que ela é tão importante e como configurar seu ambiente de desenvolvimento para
começar a codificar.
1.1 O que é JavaScript e por que aprendê-lo?
JavaScript é uma linguagem de programação de alto nível, interpretada e multiparadigma,
amplamente utilizada para criar interatividade em páginas web. Originalmente, foi
desenvolvida para rodar no lado do cliente (no navegador), permitindo que
desenvolvedores criassem páginas dinâmicas e responsivas. Com o tempo, sua utilidade se
expandiu significativamente.
Por que JavaScript é tão importante?
1. Onipresença na Web: É a linguagem padrão para o desenvolvimento front-end.
Praticamente todos os sites modernos utilizam JavaScript para proporcionar uma
experiência de usuário rica e interativa.
2. Desenvolvimento Full-Stack: Com o surgimento do Node.js, JavaScript pode ser
usado também no lado do servidor (back-end), permitindo que desenvolvedores
construam aplicações completas (full-stack) usando uma única linguagem.
3. Aplicações Móveis e Desktop: Frameworks como React Native e Electron permitem o
desenvolvimento de aplicativos móveis nativos e aplicações desktop multiplataforma
usando JavaScript.
4. Ecossistema Vasto e Ativo: Possui uma comunidade enorme e um ecossistema rico em
bibliotecas, frameworks e ferramentas (React, Angular, Vue, Express, etc.), o que acelera
o desenvolvimento e oferece soluções para quase todos os problemas.
5. Facilidade de Aprendizagem: Embora seja poderosa, JavaScript é relativamente fácil
de aprender para iniciantes, com uma sintaxe flexível e muitos recursos de aprendizado
disponíveis.
Em resumo, aprender JavaScript abre um vasto leque de oportunidades no
desenvolvimento de software, tornando-o uma habilidade indispensável para qualquer
aspirante a programador ou desenvolvedor web.
1.2 Configuração do ambiente de desenvolvimento
Para começar a programar em JavaScript, você precisará de algumas ferramentas básicas.
As principais são um editor de código e um ambiente de execução para o JavaScript. Vamos
focar no Node.js para execução fora do navegador e no VS Code como editor.
Node.js
Node.js é um ambiente de tempo de execução JavaScript de código aberto e
multiplataforma que permite executar código JavaScript fora de um navegador web. Ele é
amplamente utilizado para construir aplicações de back-end, ferramentas de linha de
comando e muito mais.
Instalação do Node.js:
1. Windows/macOS: A maneira mais fácil é baixar o instalador diretamente do site oficial
do Node.js: https://nodejs.org/. Recomenda-se a versão LTS (Long Term Support) para a
maioria dos usuários, pois é a mais estável.
2. Linux: Você pode usar o gerenciador de pacotes da sua distribuição. Por exemplo, no
Ubuntu:
Após a instalação, você pode verificar se o Node.js e o npm foram instalados corretamente
abrindo seu terminal ou prompt de comando e digitando:
Bash
node -v
npm -v
Você deverá ver as versões instaladas.
Visual Studio Code (VS Code)
VS Code é um editor de código-fonte leve, mas poderoso, desenvolvido pela Microsoft. Ele
possui suporte integrado para JavaScript, depuração, controle de versão Git e uma vasta
gama de extensões que podem melhorar sua produtividade.
Instalação do VS Code:
1. Baixe o instalador do site oficial: https://code.visualstudio.com/
2. Siga as instruções de instalação para o seu sistema operacional.
Após a instalação, abra o VS Code. Você pode criar um novo arquivo (Ctrl+N ou Cmd+N),
salvá-lo com a extensão .js (por exemplo, meu_primeiro_script.js ) e começar a escrever seu
código JavaScript.
Executando seu primeiro código JavaScript
Com o Node.js instalado e o VS Code configurado, vamos executar um simples script. No VS
Code, crie um arquivo chamado hello.js e adicione o seguinte código:
JavaScript
console.log('Olá, mundo do JavaScript!');
Salve o arquivo. Agora, abra o terminal integrado do VS Code (View > Terminal ou Ctrl+ ) ou
seu terminal/prompt de comando e navegue até o diretório onde você salvou o arquivo hello.js`. Em
seguida, execute o script com o Node.js:
Bash
node hello.js
Você deverá ver a mensagem Olá, mundo do JavaScript! impressa no terminal. Parabéns,
você executou seu primeiro código JavaScript!
1.3 Variáveis e Tipos de Dados
Variáveis são como "caixas" nomeadas onde podemos armazenar informações. Em
JavaScript, você pode declarar variáveis usando as palavras-chave var , let e const .
• var : É a forma mais antiga de declarar variáveis. Possui escopo de função e pode ser
redeclarada e reatribuída. Devido a algumas peculiaridades de escopo (hoisting), seu
uso é menos recomendado em código moderno.
• let : Introduzido no ES6 (ECMAScript 2015), let possui escopo de bloco. Pode ser
reatribuída, mas não redeclarada no mesmo escopo. É a escolha preferencial para
variáveis que precisam ter seu valor alterado.
• const : Também introduzido no ES6, const também possui escopo de bloco. Uma vez
atribuída, seu valor não pode ser reatribuído. É ideal para valores que não devem
mudar durante a execução do programa. Para objetos e arrays declarados com const ,
o conteúdo interno pode ser modificado, mas a referência ao objeto/array em si não
pode ser alterada.
Exemplos de declaração de variáveis:
JavaScript
var nomeAntigo = 'João';
let idade = 30;
const PI = 3.14159;
console.log(nomeAntigo); // João
console.log(idade); // 30
console.log(PI); // 3.14159
idade = 31; // Reatribuindo o valor de 'idade'
console.log(idade); // 31
// PI = 3.0; // Isso causaria um erro, pois const não pode ser reatribuída
const pessoa = { nome: 'Maria', idade: 25 };
console.log(pessoa.nome); // Maria
pessoa.idade = 26; // É permitido modificar propriedades de um objeto const
console.log(pessoa.idade); // 26
// pessoa = { nome: 'Ana' }; // Isso causaria um erro, pois a referência do
objeto const não pode ser alterada
Tipos de Dados
JavaScript possui sete tipos de dados primitivos e um tipo de dado não-primitivo (objeto).
Tipos Primitivos:
1. String : Representa sequências de caracteres (texto). Pode ser definida com aspas
simples ( ' ' ), aspas duplas ( " " ) ou template literals ( ` ` ).
2. Number : Representa números inteiros ou de ponto flutuante. JavaScript não
diferencia inteiros de floats.
3. Boolean : Representa um valor lógico: true (verdadeiro) ou false (falso). Usado para
lógica condicional.
4. Undefined : Indica que uma variável foi declarada, mas ainda não teve um valor
atribuído. É o valor padrão de variáveis não inicializadas.
5. Null : Representa a ausência intencional de qualquer valor de objeto. É um valor que
você atribui explicitamente para indicar que algo está vazio ou não existe.
6. Symbol : Introduzido no ES6, Symbol é um tipo de dado primitivo cujos valores são
únicos e imutáveis. Usado principalmente para criar chaves de propriedade únicas em
objetos.
7. BigInt : Introduzido mais recentemente, BigInt é um tipo de dado primitivo que pode
representar números inteiros com precisão arbitrária (maiores que 2^53 - 1, que é o
limite para Number ).
Tipo Não-Primitivo:
1. Object : É o tipo de dado mais complexo e fundamental em JavaScript. Tudo o que não
é um tipo primitivo é um objeto. Isso inclui arrays, funções, datas, expressões regulares
e objetos literais.
Compreender variáveis e tipos de dados é crucial, pois eles são os blocos de construção de
qualquer programa JavaScript. No próximo tópico, abordaremos os operadores que nos
permitem realizar operações com esses dados.
1.4 Operadores
Operadores são símbolos que nos permitem realizar operações em variáveis e valores. Eles
são fundamentais para a lógica e o processamento de dados em qualquer linguagem de
programação.
Operadores Aritméticos
Usados para realizar cálculos matemáticos.
Operador Descrição Exemplo Resultado
+ Adição 5+3 8
- Subtração 10 - 4 6
* Multiplicação 6*2 12
/ Divisão 15 / 3 5
% Módulo (resto) 10 % 3 1
** Exponenciação 2 ** 3 8
++ Incremento let x = 5; x++; x é 6
-- Decremento let y = 8; y--; y é 7
JavaScript
let a = 10;
let b = 3;
console.log(a + b); // 13
console.log(a - b); // 7
console.log(a * b); // 30
console.log(a / b); // 3.333...
console.log(a % b); // 1
console.log(a ** 2); // 100
let contador = 0;
contador++; // contador agora é 1
console.log(contador);
contador--; // contador agora é 0
console.log(contador);
Operadores de Atribuição
Usados para atribuir valores a variáveis.
Operador Exemplo Equivalente a
= x=5 x=5
+= x += 3 x=x+3
-= x -= 2 x=x-2
*= x *= 4 x=x*4
/= x /= 2 x=x/2
%= x %= 3 x=x%3
**= x **= 2 x = x ** 2
JavaScript
let valor = 10;
valor += 5; // valor agora é 15
console.log(valor);
valor *= 2; // valor agora é 30
console.log(valor);
Operadores de Comparação
Usados para comparar dois valores e retornar um booleano ( true ou false ).
Operador Descrição Exemplo Resultado
== Igual a (com coerção de tipo) 5 == '5' true
=== Estritamente igual a (sem coerção) 5 === '5' false
!= Diferente de (com coerção) 10 != '5' true
!== Estritamente diferente de (sem coerção) 10 !== '10' true
> Maior que 7>5 true
< Menor que 3<8 true
>= Maior ou igual a 5 >= 5 true
<= Menor ou igual a 4 <= 6 true
JavaScript
let num1 = 10;
let num2 = '10';
console.log(num1 == num2); // true (coerção de tipo)
console.log(num1 === num2); // false (tipos diferentes)
console.log(num1 != 5); // true
console.log(num1 !== '10'); // true
console.log(num1 > 5); // true
console.log(num1 <= 10); // true
Operadores Lógicos
Usados para combinar ou inverter valores booleanos.
Operador Descrição Exemplo Resultado
&& true &&
AND lógico false false
` ` OR lógico `true false` true
! NOT !true false
lógico
JavaScript
let idade = 20;
let temCnh = true;
console.log(idade >= 18 && temCnh); // true (ambas as condições são
verdadeiras)
console.log(idade < 18 || temCnh); // true (pelo menos uma condição é
verdadeira)
console.log(!temCnh); // false (inverte o valor de temCnh)
Compreender e saber usar esses operadores é crucial para construir a lógica do seu
programa e tomar decisões com base nos dados.
1.5 Entrada e Saída de Dados
Em programação, a entrada e saída de dados (I/O - Input/Output) são operações
fundamentais para que um programa possa interagir com o usuário ou com o ambiente
externo. Em JavaScript, existem algumas maneiras comuns de lidar com isso.
console.log()
Esta é a função mais comum para exibir informações no console do navegador ou no
terminal (quando usando Node.js). É extremamente útil para depuração e para ver o valor
de variáveis durante a execução do código.
JavaScript
console.log("Isso é uma mensagem no console.");
let nome = "Mundo";
console.log("Olá, " + nome + "!"); // Concatenação de strings
console.log(`A soma de 5 + 3 é ${5 + 3}.`); // Usando template literals
let objeto = { a: 1, b: 2 };
console.log(objeto); // Exibe o objeto completo
Além de console.log() , existem outras funções no objeto console para diferentes
propósitos:
• console.warn() : Exibe uma mensagem de aviso.
• console.error() : Exibe uma mensagem de erro.
• console.info() : Exibe uma mensagem informativa.
• console.table() : Exibe dados tabulares como uma tabela.
prompt()
A função prompt() é usada para exibir uma caixa de diálogo que solicita ao usuário uma
entrada de texto. Ela é uma função do ambiente do navegador e não está disponível no
Node.js por padrão. O valor retornado por prompt() é sempre uma string.
JavaScript
// Exemplo no navegador
// let seuNome = prompt("Qual é o seu nome?");
// if (seuNome) {
// alert("Olá, " + seuNome + "!");
// } else {
// alert("Você não digitou seu nome.");
// }
Observação: prompt() bloqueia a execução do script até que o usuário insira um valor ou
cancele a caixa de diálogo. Seu uso é mais comum em scripts simples ou para fins de
aprendizado, e menos em aplicações web complexas devido à sua natureza bloqueadora e
à interface de usuário limitada.
alert()
A função alert() exibe uma caixa de diálogo com uma mensagem e um botão "OK". Assim
como prompt() , é uma função do ambiente do navegador e não está disponível no Node.js.
JavaScript
// Exemplo no navegador
// alert("Bem-vindo ao meu site!");
// let resultado = 10 + 5;
// alert("A soma é: " + resultado);
Observação: alert() também bloqueia a execução do script. É útil para exibir mensagens
importantes ou avisos simples ao usuário.
Diferenças entre ambientes (Navegador vs. Node.js)
É importante notar que prompt() e alert() são funções globais fornecidas pelo ambiente
do navegador (parte da API Web). No Node.js, que é um ambiente de servidor/linha de
comando, essas funções não existem. Para entrada de dados no Node.js, você geralmente
usaria módulos como readline ou pacotes de terceiros para interagir com o terminal.
Por enquanto, para os exercícios iniciais, focaremos principalmente em console.log() para
saída e, quando apropriado, mencionaremos prompt() e alert() para o contexto do
navegador.
Com isso, concluímos o Módulo 1! Você aprendeu os fundamentos do JavaScript, como
configurar seu ambiente, lidar com variáveis e tipos de dados, usar operadores e realizar
operações básicas de entrada e saída. No próximo módulo, vamos aprofundar em
estruturas de controle e funções, que são essenciais para criar lógica em seus programas.