Stela JavaScript Aulas Aula 2
Como os sites executam comandos?
HTML, CSS e JavaScript: quem faz o quê. E o seu primeiro script, já com commit.
Entender o papel do JavaScript na página, preparar o ambiente e fazer o primeiro commit.
Pesquisar onde o JavaScript está presente nos sites que você usa no dia a dia.
Participação individual na atividade prática.
Abra um site real e investigue
Em dupla, abram um site que vocês usam e apertem F12. O DevTools mostra as entranhas da página. Missão: separar o que é estrutura (HTML), o que é aparência (CSS) e o que é comportamento (JavaScript). Anotem as descobertas no mapa do Whiteboard da turma.
Curiosidade: o JavaScript nasceu em 1995, em cerca de dez dias. Hoje cada navegador tem um motor que executa o código, e a linguagem segue um padrão chamado ECMAScript.
Do zero ao primeiro commit
Onde o script entra na página
Dá para escrever o JavaScript dentro do HTML, na tag <script>, ou num arquivo .js separado, chamado pelo atributo src.
O arquivo separado é o jeito profissional: deixa o HTML limpo e o código reaproveitável.
1<!-- script interno -->2<script>3 console.log("Oi, eu moro no HTML");4</script>56<!-- arquivo externo: o jeito profissional -->7<script src="script.js"></script>Comentários e primeiros comandos
Comentário é recado para gente, o navegador ignora. Use // para uma linha e /* */ para várias.
O console.log() mostra mensagens no Console do navegador (F12, aba Console). É ali que a gente testa tudo.
1// script.js2// isto é um comentário: o navegador ignora34console.log("Olá, mundo!");5console.log("Turma de JavaScript, presente!");67/*8 comentário de9 várias linhas10*/Repositório, commit e push
O repositório é a pasta do projeto guardada no GitHub. O commit é uma foto do código num momento. O push envia essas fotos para o GitHub.
Hoje você cria o repositório programacao-web-js, que vai guardar todos os exercícios do semestre.
Dica: o Copilot entra depois de você: primeiro eu penso e escrevo, depois uso a IA para revisar e explicar.
Calcular o frete na loja virtual
Ator: Cliente da loja
Objetivo: Saber quanto vai pagar de frete antes de fechar a compra.
Fluxo principal
- O cliente digita o CEP no carrinho.
- Clica em "Calcular".
- A página mostra o valor e o prazo, sem recarregar.
E se...
- O CEP tem letras ou está incompleto: a página avisa na hora, antes de enviar.
Para pensar
- Quem confere o CEP incompleto: o HTML, o CSS ou o JavaScript?
- Por que é melhor avisar no navegador do que esperar o servidor responder?
Prepare o seu ambiente
Siga na ordem. O que você marcar fica salvo neste navegador.
Sem instalar nada? O GitHub Codespaces abre um VS Code direto no navegador. Os exercícios do semestre chegam pelo GitHub Classroom.
Três camadas, uma página
Tecnologia
O motor JavaScript do navegador lê seu código e transforma em ações na tela, milhões de vezes por segundo.
Engenharia
Versionar com commits é como numerar as revisões de um projeto de engenharia: dá para voltar a qualquer versão.
Arte
HTML é o esqueleto, CSS é a roupa, JavaScript é o movimento. Uma página é uma pequena obra com três camadas.
Terminou antes? Tem mais.
Abra o Console de um site qualquer e digite document.title. O que aparece? (Spoiler: é o título da página. Você acabou de conversar com o site.)
Para estudar e praticar
Curso interativo de JavaScript
Comece pelo módulo 1 quando quiser adiantar.
JavaScriptpraticar
GitHub Docs
Documentação do GitHub
Em português, do repositório ao GitHub Pages.
GitHubconsulta
NetAcad
JavaScript Essentials 1
A trilha oficial que acompanha a disciplina. Os módulos e checkpoints contam para a atividade remota.
PlataformatrilhaLink do repositório no Teams
Com o primeiro commit. Para a próxima aula, estude o módulo introdutório do JavaScript Essentials na NetAcad.