JavaScript:
Introdução e
Fundamentos
Esta apresentação aborda os conceitos
essenciais do JavaScript, desde sua
integração no ecossistema web até a
sintaxe básica, variáveis e tipos de dados,
preparando o terreno para o
desenvolvimento interativo.
•Introdução e Ecossistema Web
Sumário •Inserção e Boas Práticas de Código
•Explorando o Console e Debugging
•Configuração do Ambiente de
Desenvolvimento
•Sintaxe Básica, Variáveis e Tipos de
Dados
Introdução ao
JavaScript
JavaScript é uma linguagem de
programação fundamental para a
web moderna. Ela é executada
diretamente no navegador,
permitindo que as páginas se
tornem interativas e dinâmicas.
Com JavaScript, podemos criar
funcionalidades como cliques,
animações e validações de
formulários.
JS no
Ecossistema
Web
•HTML: Define a estrutura e
conteúdo da página.
•CSS: Estiliza a aparência e o layout
visual.
•JavaScript: Adiciona
comportamento e interatividade
dinâmica.
Por Que
JavaScript?
JavaScript é a linguagem
fundamental para a web
interativa, rodando
diretamente nos navegadores.
Sua versatilidade se expandiu
para além do front-end,
permitindo o desenvolvimento
de servidores com Node.js e
aplicativos móveis com
frameworks como React
Native. Isso o torna uma
ferramenta essencial e
onipresente no
desenvolvimento de software
moderno.
Inserindo JavaScript
• Inline: dentro da tag <script>
• Arquivo externo: <script src="script.js"></script>
• No console do navegador
Melhores Práticas de
Inserção
Para otimizar o carregamento da página, insira a tagantes do
fechamento de </body>.
Utilize os atributos 'async' para carregar o script em paralelo e
executá-lo assim que disponível, ou 'defer' para carregar em
paralelo e executar após o HTML ser totalmente interpretado,
mantendo a ordem dos scripts.
Isso evita que o JavaScript bloqueie a renderização inicial do
conteúdo.</span>
Explorando o Console
O console do navegador é uma ferramenta essencial para
desenvolvedores, permitindo interagir com o JavaScript em
tempo real.
Você pode acessá-lo facilmente pressionando F12 e navegando
até a aba 'Console’.
Use console.log('Sua mensagem aqui') para exibir informações
e alert('Atenção!') para caixas de diálogo.
Debugging Básico
•console.error(): Para erros críticos.
Ex: console.error("Falha!");
•console.warn(): Para avisos e problemas potenciais.
Ex: console.warn("Atenção!");
•console.info(): Para informações gerais.
Ex: console.info("Dados carregados.");
• Categoriza mensagens, facilitando a depuração no console.
Configurando o
Ambiente
•Escolha do Editor: VS Code é
altamente recomendado.
•Instalação: Baixe e instale o VS
Code em seu sistema.
•Estrutura de Pastas: Crie
projeto/index.html e script.js.
•Abrir no Editor: Abra a pasta projeto
no VS Code.
Fundamentos da Sintaxe
•**Case-sensitive**: variavel é diferente de Variavel.
•**Ponto e Vírgula**: Opcional, mas boa prática para
clareza.
•**Comentário de Linha**: Use // para uma linha. Ex: //
Variável
•**Comentário de Bloco**: Use /* ... */ para múltiplas
linhas.
let: Variáveis
const: Variáveis
Mutáveis
Imutáveis
Variáveis declaradas com const
Declarada com let, uma variável
devem ser inicializadas no
pode ter seu valor reatribuído a
momento da declaração e não
qualquer momento após sua
podem ter seu valor reatribuído
inicialização. Seu escopo é de
posteriormente. Elas também
bloco, o que significa que ela é
possuem escopo de bloco,
acessível apenas dentro do bloco
promovendo maior previsibilidade
de código (ex: {}) onde foi
e segurança no código. Prefira
definida. Por exemplo, let contador
const para valores que não
= 0; contador = 10; é uma
mudarão e let para aqueles que
operação válida.
precisam ser alterados, evitando o
uso de var para um código mais
robusto e claro.
Boas Práticas de
Nomenclatura
Utilize a convenção camelCase para variáveis e
funções, como nomeCompleto ou calcularTotal. Evite
nomes genéricos como x ou temp, e também palavras
reservadas do JavaScript. Nomes claros tornam seu
código mais legível e fácil de manter.
Tipos de Dados Primitivos
•Number, String, Boolean: ex. 42, "Olá", true.
•Null, Undefined: representam ausência de valor.
•Symbol: para identificadores únicos, ex. Symbol('id').
•BigInt: números inteiros muito grandes, ex. 123n.
Verificando
Tipos (typeof)
O operador typeof é
fundamental para inspecionar
o tipo de dado de uma variável
em tempo de execução. Ele
retorna uma string que
descreve o tipo, como 'string',
'number', 'boolean', 'object' ou
'undefined'. Por exemplo,
typeof 10 resultará em
'number', enquanto typeof
'JavaScript' retornará 'string'.
Exemplo Prático de Análise do Código
Código
javascript
// Declaração de variáveis com
diferentes tipos
Este exemplo demonstra a declaração
let nomeAluno = "Carlos Silva";
de variáveis dos tipos String, Number e
let idadeAluno = 20;
Boolean. A função console.log() é
let estaAtivo = true;
utilizada para concatenar essas
variáveis, formando uma frase
// Exibindo informações combinadas no
informativa. Observe como diferentes
console
tipos de dados podem ser combinados
console.log("Nome: " + nomeAluno +
de forma legível na saída do console.
", Idade: " + idadeAluno + ", Ativo: " +
estaAtivo);
Desafio Prático: Variáveis e
Console
Crie um arquivo HTML com um script JavaScript que declare
variáveis para nome, idade e status. Em seguida, exiba uma frase
formatada com essas informações no console.
•JavaScript é a linguagem vital para a
interatividade web e se expande para
diversas plataformas.
Conclusão •Aprender a sintaxe, declarar variáveis
(let, const) e entender os tipos de dados é
fundamental.
•O console do navegador é uma
ferramenta indispensável para depuração
e interação em tempo real.
•Boas práticas de inserção e nomenclatura
resultam em código mais performático e
legível.
•A prática constante com exemplos e
desafios é crucial para a maestria.
