JavaScript: DOM, eventos e requisições

Iniciando o javascript no navegador - Apresentação

Apresentando o curso e definindo pré-requisitos

Olá! Meu nome é Vinícius Neves, o Careca Barbudo. Se ainda não era seu melhor amigo, agora passou a ser! Estou aqui para discutirmos como o JavaScript funciona na web.

O que é necessário para maximizar o aprendizado neste curso? Para aproveitarmos ao máximo, é essencial dominar JavaScript. Não abordaremos a linguagem em si nem estruturas de dados; consideramos esse conhecimento um pré-requisito. Além disso, HTML e CSS, que são a base da web, também são necessários. Se você domina JavaScript, HTML e CSS, está preparade para nos acompanhar.

Desenvolvendo os projetos do curso: quiz e focus

Neste curso, desenvolveremos dois projetos. Primeiro, começaremos com um quiz. Nesse quiz, nós o executaremos até o fim e o reiniciaremos para começar novamente. Trabalharemos com perguntas e respostas, controlaremos o estado e, ao final, apresentaremos a pontuação.

Esta é uma aplicação que usaremos para começar a entender como o JavaScript funciona no navegador.

Nosso próximo passo é o Focus. É uma aplicação muito mais ampla e mais complexa do que o Quiz (Questionário). Ela terá:

• Um cronômetro para praticarmos a técnica Pomodoro, com um momento de foco;
• Pausa curta e pausa longa;
• Música de fundo;
• Um fluxo de CRUD (Criar, Ler, Atualizar e Excluir) de tarefas que começaremos implementando apenas no localStorage e, em seguida, conectaremos ao back-end (camada de servidor), isto é, faremos requisições HTTP para montar essa lista de tarefas: criar, excluir, editar;
• Opções para limpar as tarefas concluídas e para limpar todas.

Adotando a abordagem de desenvolvimento e encerrando

Trata-se de uma aplicação muito completa para entendermos como tudo isso funciona. E, obviamente, faremos tudo isso usando o Cursor. Algumas partes implementaremos manualmente e outras delegaremos ao agente, pois é assim que o desenvolvimento de software funciona atualmente.

Eu espero que você esteja com o mesmo nível de animação que eu. Eu te espero no próximo vídeo. Vamos com tudo! Até mais!

Iniciando o javascript no navegador - Conhecendo nossas ferramentas: cursor, terminal e figma

Apresentando o foco do curso e pré-requisitos

Para aproveitarmos bem este curso, vamos compartilhar alguns conselhos sobre o que é importante já conhecer e com o que precisamos estar confortáveis para aproveitar ao máximo o conteúdo que veremos. Vamos nos concentrar em HTML, CSS e JavaScript, principalmente no mecanismo do navegador, no Chrome (navegador).

Para aproveitar 100%, o que precisamos já conhecer e com o que é importante ter familiaridade? Primeiro, Figma. Ao clicarmos em “preparando o ambiente”, onde está o link para o Figma do projeto, seremos levados a uma tela muito parecida com a que vemos agora, que contém um botão como Open in Figma (Abrir no Figma). A partir daí, poderemos clonar o projeto para nosso espaço. Não vamos executar esse procedimento aqui. No arquivo, veremos os elementos do Focus bem organizados e poderemos inspecionar cada um deles, observar tamanhos, fontes; na parte superior, há um guia de tipografia; também podemos coletar todas as cores — por exemplo, as cores que formam o degradê. Está tudo disponível. Quanto mais familiaridade tivermos com o Figma, melhor. Recomendamos explorar, experimentar e navegar pela ferramenta, porque a utilizaremos várias vezes ao longo do nosso percurso.

Utilizando o Cursor como IDE e considerando alternativas

Outro ponto: nosso IDE (Ambiente de Desenvolvimento Integrado) ou editor de texto. Durante o curso, vamos usar o Cursor. Podem surgir dúvidas como: “Vini, por que usar o Cursor? É algo ‘hipster’ que ninguém utiliza?”. Não. Há bastante gente que utiliza, e, sobretudo, ele nos permite ter contato com agentes de código. O Cursor possui uma camada gratuita muito boa, com a qual podemos fazer bastante coisa. Por isso vamos utilizá-lo.

Já o temos instalado; basta abrir um projeto. Vale destacar que o Cursor tem dois modos: um mais orientado ao uso como IDE e outro modo, chamado Cursor 3, mais focado em agentes. Como estamos estudando e aprendendo, não vamos usar o modo de agentes; ou seja, não vamos usar o Cursor 3, e sim o Cursor “normal”.

Vamos fechar a pasta que abrimos sem querer, mas está tudo aqui. Conseguiremos nos orientar bem.

Qual é o bônus? Se estivermos usando VS Code até agora, a experiência será basicamente a mesma, com apenas alguns atalhos diferentes. Se, por exemplo, já tivermos acesso a Cloud Code, Copilot, AntiGravity, Unidisurf ou qualquer outra ferramenta de código, IDE ou editor de texto, podemos utilizá-la e aproveitar da mesma forma. Não é necessário usar a mesma ferramenta que estamos usando aqui; o que aprendermos pode ser aplicado em qualquer uma delas, seja qual for.

Escolhendo e utilizando o terminal

Um ponto muito importante é o terminal. No Windows, existem algumas opções:

• Git Bash, que pode ser baixado e instalado;
• PowerShell;
• CMD, que é mais limitado, mas ainda funciona;
• o próprio Windows Terminal, dependendo da versão do sistema.

No Linux ou no macOS, caso queiramos experimentar outra opção, existe o O+.excel, que é outro tipo de terminal, com funcionalidades diferentes. É uma boa alternativa.

Nós vamos utilizar o Warp. É um terminal bastante eficiente, com muitas funcionalidades, inclusive para visualizar código dentro dele, se necessário. Ele possui uma camada de IA, mas nós não vamos utilizá-la; vamos usar apenas a camada de terminal. Nem mesmo estaremos conectados no Warp: usaremos somente o terminal.

Praticando comandos essenciais no terminal

O que precisamos conseguir fazer no terminal para estarmos prontos para seguir? No mínimo:

• listar pastas de um diretório;
• criar uma pasta;
• navegar entre pastas;
• criar um atalho no VS Code para abrir a pasta atual.

Essas práticas ajudam a maximizar o aproveitamento do aprendizado de JavaScript para web.

Ajustando o ambiente e iniciando a codificação

Familiarize-se e sinta-se confortável com o computador e com o ambiente de desenvolvimento. Cuide do setup, ajuste os atalhos ao seu gosto, defina o tamanho de fonte que precisar e escolha o tema do editor conforme preferir (modo claro ou escuro). É essencial estar confortável com tudo isso para que possamos focar no que importa: JavaScript para a web.

Dito isso, vamos começar a escrever um pouco de código, com os fundamentos necessários. Tudo certo? Vamos em frente.

Iniciando o javascript no navegador - O que o JavaScript faz no navegador

Entendendo como JavaScript funciona no navegador

Vamos começar entendendo como JavaScript funciona no navegador. Precisamos pensar em JavaScript como uma camada que adiciona dinamismo à aplicação. O ciclo de uso será o seguinte: a pessoa usuária interage com a aplicação — clica em um botão, envia um formulário, digita algo em um campo — e JavaScript ficará atento ao que acontece, atualizando o DOM (ou seja, o documento, a página HTML) para refletir o que foi alterado.

Isso pode incluir adicionar uma tarefa à lista de tarefas, remover uma tarefa ou iniciar o temporizador. Vimos que o Focus é uma aplicação de técnica Pomodoro. Todas essas interações serão interpretadas por JavaScript, que executará o que indicarmos para reagir aos eventos da pessoa usuária.

Como isso funciona, em linhas gerais? O navegador carrega a página HTML, identifica que há um arquivo de JavaScript a ser baixado, realiza o download, executa o arquivo e, ao executá-lo, segue as instruções que definimos. Pedimos ao navegador, por exemplo: “se alguém clicar neste botão, execute esta função”. É exatamente isso que nosso arquivo de JavaScript fará. Vamos começar a escrevê-lo, montar o HTML base com as tags necessárias e fazer algo acontecer no navegador.

Iniciando o projeto e criando a pasta quiz

No terminal Warp, dentro da pasta "projetos", vamos limpar o terminal para remover o que estávamos testando anteriormente e criar uma nova pasta chamada "quiz". Em seguida, vamos abrir o explorador de arquivos a partir de onde estamos. Lá estará a pasta "quiz". Nosso objetivo é abrir essa pasta "quiz" no Cursor. Ele pode demorar um pouco; como ainda não há nenhum arquivo, não vamos fazer nenhuma operação adicional nesse momento. Vamos fechar, abrir novamente e criar um arquivo index.html.

Para registrar os comandos de início do projeto, no terminal executamos:

mkdir quiz
open .

Configurando a base do HTML e ajustes iniciais

Usaremos um atalho para preencher a base do documento HTML. Em seguida, ajustaremos o título do documento para “Quiz” e alteraremos o idioma no atributo lang, no topo do HTML, para “pt-BR”. Observemos que, ao pressionar a tecla Tab no Cursor, entramos na camada de IA do editor, que tenta adivinhar nossas próximas ações com recursos de autocompletar. Esse autocompletar tem um limite diário na versão gratuita, mas, enquanto disponível, procura antecipar nosso próximo passo e a próxima linha de código.

Primeiro, criamos a estrutura base do index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

Agora aplicamos os ajustes prometidos:

• Título para “Quiz”:

<title>Quiz</title>

• Idioma do documento para “pt-BR”:

<html lang="pt-BR">

Estruturando o conteúdo principal da página

Vamos focar no HTML e maximizar o Cursor. Criaremos a tag

com o texto “Quiz”. Em seguida, pediremos para formatar o documento. Se o Cursor sugerir “quiz de programação”, trata-se apenas da IA tentando adivinhar o que queremos fazer, e não necessariamente o tema que vamos utilizar agora.

Começamos adicionando a estrutura de main:

<body>
    <main>
        
    </main>
</body>

Em seguida, inserimos o título da página dentro de main:

<h1>Quiz</h1>

Inserindo texto de orientação e pontuação

Vamos inserir um parágrafo de teste para orientar a pessoa usuária: algo como “Teste seus conhecimentos aqui com nosso quiz”. Antes de as perguntas aparecerem, criaremos um

<p>Teste seus conhecimentos com nosso quiz!</p>

<div>

</div>

<p>Pontuação: </p>

<p>Pontuação: <span>0</span></p>

<span id="score">0</span>

<button>
    Iniciar Quiz
</button>

<button id="start-quiz">

<div id="question-1">

<p>Questão 1</p>

<p>Qual é a capital do Brasil?</p>

<button>
    <p>São Paulo</p>
</button>
<button>
    <p>Rio de Janeiro</p>
</button>
<button>
    <p>Brasília</p>
</button>

<button>
    <p>Tocantins</p>
</button>

<button>
    <p>Paraná</p>
</button>

<button>
    <p>Santa Catarina</p>
</button>

console.log("Quiz iniciando...");

<script src="scripts/quiz.js"></script>

let soma = 1 + 1

soma

document

document.getElementById('start-quiz')

const startQuizButton = document.getElementById("start-quiz");

console.log("texto do botão", startQuizButton.textContent);

startQuizButton.textContent = "Iniciando Quiz...";

Sobre o curso JavaScript: DOM, eventos e requisições

O curso JavaScript: DOM, eventos e requisições possui 427 minutos de vídeos, em um total de 115 atividades. Gostou? Conheça nossos outros cursos de JavaScript em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Iniciando o javascript no navegador
• Construindo um quiz interativo
• Quando o projeto precisa crescer: fokus com vite
• Encontrando e lendo elementos da página
• Atualizando título e formatando o cronômetro
• Fazendo a página reagir
• Capturando dados de formulários
• Construindo a lista de tarefas
• Editando, completando e deletando tasks
• Delegação de eventos
• Além do console.log
• Como o javascript decide a ordem das coisas
• Buscando dados de uma api