0% acharam este documento útil (0 voto)

10 visualizações

? Aula 01 – JavaScript

A aula introdutória de JavaScript apresenta seus objetivos e o desafio da Sprint 05, que inclui a implementação de funcionalidades interativas em um projeto existente. Os alunos aprenderão a criar variáveis, executar comandos no console do navegador e estruturar seus arquivos para o uso da linguagem. A tarefa final envolve a criação de um arquivo JavaScript e a inclusão de scripts nas páginas HTML do projeto.

Enviado por

belsantos415

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato DOCX, PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

10 visualizações

? Aula 01 – JavaScript

Enviado por

belsantos415

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato DOCX, PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 8

Docente: Robson Guima

📚 SENAI CIMATEC – Unidade Curricular:

JavaScript
📘 APOSTILA – AULA 01
Unidade Curricular: JavaScript

🎯 Objetivos da Aula
● Apresentar a nova UC e seu plano de aprendizagem.
● Conhecer o Desafio da Sprint 05.
● Entender o que é JavaScript e qual seu papel em um site.
● Explorar o ambiente de desenvolvimento no navegador.
● Escrever os primeiros comandos em JavaScript.
● Preparar a estrutura de arquivos para o uso da linguagem.

🧠 Introdução à Sprint 05 – JavaScript

Agora que já aprendemos como estruturar páginas HTML, estilizar com CSS e
versionar com Git e GitHub, chegou a hora de aprender como dar vida ao seu site com
interatividade, usando a linguagem:

JavaScript 🎯

Com JavaScript você poderá:

● Fazer imagens trocarem automaticamente;

● Criar validações em formulários;
● Capturar o clique do usuário e reagir com ações;
● Comparar dados e aplicar lógica;
● Tornar seu site dinâmico, funcional e inteligente.

🧩 O Desafio da Sprint
Durante esta Sprint, você irá aprimorar o projeto existente (feito nas UCs anteriores),
aplicando funcionalidades JavaScript reais.

🗂 Estrutura já existente:

sprint-html-css/
├── index.html
├── lancamento.html
├── contato.html
├── css/
│ └── style.css
└── img/
Docente: Robson Guima

🔧 Novas funcionalidades com JavaScript:

● Carrossel automático de imagens (index.html)

● Comparação entre veículos com checkbox e botão (lancamento.html)
● Formulário funcional com validação de campos e mensagens (contato.html)

💼 Como será feito?

● Criação de um novo arquivo: js/main.js

● Inclusão desse arquivo nas páginas com:

📝 Entrega:

● Código hospedado no repositório GitHub já criado na Sprint anterior

● Projeto final zipado com nome padronizado: seunome-sprint05-
javascript.zip

🔍 O que é JavaScript?
JavaScript é uma linguagem de programação usada para dar interatividade às páginas
da web. Ele roda diretamente no navegador do usuário e permite criar experiências
dinâmicas.

Exemplo:

● Ao clicar em um botão, mostrar uma mensagem.

● Validar se os campos do formulário estão preenchidos.
● Adicionar um item na página sem recarregá-la.

💻 Testando no Navegador
Você pode executar comandos simples diretamente no navegador:

▶️Passo a passo:

1. Abra o Google Chrome.

2. Pressione F12 para abrir as Ferramentas de Desenvolvedor.
3. Clique na aba Console.
4. Digite o seguinte comando:

console.log("Olá, mundo!");

🧪 Escrevendo os primeiros códigos

Vamos entender os conceitos básicos da linguagem:
Docente: Robson Guima

🟦 Comentários:

// Este é um comentário de linha

/*
Este é um comentário de bloco
que pode ocupar várias linhas
*/

🟩 Variáveis:

As variáveis armazenam valores na memória para uso posterior.

let nome = "Maria"; // nome é uma variável do tipo texto

const idade = 30; // constante (valor não muda)
var cidade = "Salvador"; // forma antiga de declarar variável

🔔 Dica: Sempre que possível, prefira let ou const no lugar de var.

🧠 O que são variáveis?

Variáveis são espaços na memória onde você guarda informações (valores) que serão
usadas no seu código, como nomes, números, estados, etc.

📌 let – Variável moderna (mais usada)

✅ Quando usar:
● Quando você precisa mudar o valor da variável durante o código.

🧪 Exemplo:

let nome = "Maria";

console.log(nome); // Maria

nome = "Joana";
console.log(nome); // Joana

🔒 Regras:

● Só pode ser declarada uma vez no mesmo bloco.

● Tem escopo de bloco (não vaza para fora das chaves {}).
Docente: Robson Guima

📌 const – Constante (valor fixo)

✅ Quando usar:

● Quando você nunca vai alterar o valor depois de definido.

🧪 Exemplo:

const PI = 3.14;
console.log(PI); // 3.14

PI = 3.14159; // ❌ Erro! Não pode reatribuir

🔒 Regras:

● Deve ser inicializada já com um valor.

● Tem escopo de bloco como let.
● Ideal para coisas que não mudam, como: nomes fixos, URLs de API, limites
máximos.

📌 var – Forma antiga (evite)

⚠️Por que evitar?

● var tem escopo de função e não respeita blocos {}, o que pode causar erros
difíceis de encontrar.

🧪 Exemplo:

if (true) {
var idade = 30;
}
console.log(idade); // 30 — mesmo fora do bloco! 😱

🔎 Com let:

if (true) {
let idade = 30;
}
console.log(idade); // ❌ Erro! idade não existe fora do bloco
Docente: Robson Guima

🧾 Resumo prático
Palavra-chave Pode alterar Escopo Uso recomendado
valor?

let ✅ Sim Bloco {} Variáveis normais (mais usada)

const ❌ Não Bloco {} Constantes que não mudam

var ✅ Sim Função (não ❌ Evite usar (legado)

respeita bloco)

🧩 Dica Final
Sempre prefira const por padrão.
Use let apenas quando realmente precisar mudar o valor.
Evite var, a não ser que esteja lidando com código muito antigo.

🟨 Tipos de Dados:

let nome = "João"; // tipo String (texto)

let idade = 25; // tipo Number
let aprovado = true; // tipo Boolean (verdadeiro ou falso)
let endereco = null; // tipo Null
let telefone; // tipo Undefined

🧠 Exercício Guiado (no console do navegador)

// Exibir texto simples

console.log("Bem-vindo à Sprint de JavaScript!");

// Criar variáveis
let aluno = "Carla";
let nota = 9.0;
let ativo = true;

// Exibir valores
console.log("Aluno:", aluno);
console.log("Nota:", nota);
console.log("Ativo?", ativo);

// Operações matemáticas simples

Docente: Robson Guima

let soma = 10 + 5;
console.log("Resultado da soma:", soma);

📁 Preparando a Estrutura do Projeto

Vamos criar uma nova pasta js dentro da pasta sprint-html-css e adicionar o arquivo
principal main.js com os primeiros comandos JS.

sprint-html-css/
├── js/
│ └── main.js

Inclua o script no final de cada página HTML:

🏁 Tarefa para o próximo encontro

1. Criar a pasta js/ e o arquivo main.js dentro dela.
2. Adicionar esse script ao final das páginas index.html, lancamento.html e
contato.html.
3. Testar pelo menos um console.log() para confirmar que está funcionando.
4. Trazer dúvidas sobre os primeiros comandos na próxima aula.
Docente: Robson Guima

🧭 PASSO A PASSO DO ALUNO – AULA 01

Unidade Curricular: JavaScript

🎯 Objetivo da Aula

● Compreender o papel do JavaScript em um site.

● Conhecer o desafio final da Sprint.
● Escrever os primeiros códigos em JavaScript no navegador.
● Preparar a estrutura de arquivos do projeto para a linguagem.

1 Abrir o Console do Navegador

1️⃣

1. Abra o navegador Google Chrome.

2. Acesse qualquer página (pode ser index.html do seu projeto).
3. Pressione a tecla F12.
4. Clique na aba Console.

Digite o comando:

console.log("Olá, mundo!");

5. Pressione Enter e veja o resultado.

2️⃣Criar a Estrutura Inicial para JavaScript no Projeto

1. Acesse a pasta do seu projeto: sprint-html-css/

2. Crie uma nova pasta chamada js/
3. Dentro da pasta js/, crie o arquivo: main.js

3️⃣Incluir o Script em Todas as Páginas

1. Abra os arquivos index.html, lancamento.html e contato.html

Antes da tag </body>, adicione a linha:

4️⃣Escrever os Primeiros Códigos no main.js

Abra o arquivo js/main.js e escreva o seguinte:

// Exibindo uma mensagem no console

console.log("Bem-vindo à Sprint de JavaScript!");
Docente: Robson Guima

// Criando variáveis
let nome = "Carlos";
let idade = 17;
let curso = "JavaScript - Sprint 05";

// Mostrando valores
console.log("Aluno:", nome);
console.log("Idade:", idade);
console.log("Curso:", curso);

// Operação simples
let soma = 10 + 5;
console.log("Resultado da soma:", soma);

5️⃣Testar no Navegador

1. Abra a página index.html no navegador.

2. Pressione F12 e vá na aba Console.
3. Verifique se as mensagens aparecem corretamente.

6️⃣Anotar Dúvidas e Ideias

💬 Anote o que você achou mais interessante até aqui.

❓ Se tiver dúvidas sobre let, const, console.log() ou estrutura do
arquivo, traga na próxima aula.

📝 Tarefa para o Próximo Encontro

✅ Ter a pasta js/ e o arquivo main.js criados

✅ Adicionar o script nas 3 páginas
✅ Testar pelo menos um console.log() funcionando
✅ Revisar o conteúdo da apostila
✅ Trazer dúvidas para aprofundar o conhecimento