Scribd
Carregar
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
© © All Rights Reserved
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
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
© © All Rights Reserved
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:

<script src="js/main.js"></script>

📝 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:

<script src="js/main.js"></script>

🏁 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:

<script src="js/main.js"></script>

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

Você também pode gostar