WEB103 · Fundamentos de JavaScript

Categorias: Nuvem e Software
Lista de desejos Compartilhar

Sobre o curso

Aprenda JavaScript moderno desde a base: valores, funções, arrays e objetos e, depois, DOM, eventos e consumo de dados de uma API. Você vai tornar interativa uma página estática para um caso real de pequeno negócio.

Construir · 6 horas · 4 aulas, um laboratório, uma atividade avaliada e uma peça de portfólio

Para quem é

Quem já escreve HTML e CSS e quer adicionar comportamento e dados às suas páginas.

Pré-requisitos

Ter concluído o WEB102 ou estar à vontade com HTML semântico e CSS básico.

O que você será capaz de fazer

  • Escrever JavaScript com variáveis, condicionais, laços e funções com nomes claros.
  • Transformar arrays de objetos com map, filter, reduce e find.
  • Selecionar e atualizar elementos do DOM e responder a eventos do usuário.
  • Buscar dados JSON de forma assíncrona com async/await e tratar erros com cuidado.

Aulas

  • Aula 1 · Valores, variáveis e funções
  • Aula 2 · Arrays, objetos e transformação de dados
  • Aula 3 · DOM, eventos e código assíncrono
  • Aula 4 · Laboratório e atividade

Laboratório: Construa uma lista de produtos interativa

Você vai carregar um arquivo JSON de produtos com fetch, renderizar cards na página e adicionar busca e filtro por categoria. Vai usar o Console e pontos de interrupção para depurar pelo menos um problema e criar estados de carregamento e de erro.

Ferramentas gratuitas: VS Code com Live Server, DevTools do navegador (painéis Console e Sources) e um arquivo JSON local

Atividade avaliada

Crie uma página interativa de cardápio ou catálogo para um pequeno negócio, como uma cafeteria ou uma loja de materiais de construção. Carregue pelo menos 12 itens de um arquivo JSON, renderize-os com JavaScript e adicione busca por nome, filtro por categoria e um total atualizado dos itens que o usuário coloca no pedido. Mostre uma mensagem amigável quando nada for encontrado e quando os dados não carregarem. Inclua um README explicando como o código está organizado em funções.

Critério Peso Como é um trabalho excelente
Funcionamento correto 35% Carregamento, renderização, busca, filtro e total funcionam, inclusive nos estados vazio e de erro.
Qualidade do código 25% Usa const e let corretamente, funções pequenas e nomeadas, métodos de array e nenhum bloco repetido.
DOM e eventos 20% Os eventos são registrados de forma limpa, a página atualiza sem recarregar e a entrada do usuário nunca é inserida como HTML bruto.
Documentação e depuração 20% O README explica a estrutura e descreve um bug encontrado com o DevTools e como foi corrigido.

Peça de portfólio

Uma página de catálogo interativa em JavaScript, alimentada por JSON e pronta para ser ligada a uma API real.

No seu ritmo, com 12 meses de acesso. Dúvidas são respondidas por escrito pelo painel do aluno. Ao concluir o curso, você recebe um registro de conclusão.

Próximo passo

Continue com WEB104 · Interfaces responsivas e frameworks front-end · 6 horas · R$ 60,00

Continuar para o próximo curso

Prefere a formação completa? Formação em Desenvolvimento Full-Stack Web e Mobile · R$ 540,00 (10% a menos que os cursos avulsos)

Exibir Mais

O que você aprenderá?

  • Escrever JavaScript com variáveis, condicionais, laços e funções com nomes claros.
  • Transformar arrays de objetos com map, filter, reduce e find.
  • Selecionar e atualizar elementos do DOM e responder a eventos do usuário.
  • Buscar dados JSON de forma assíncrona com async/await e tratar erros com cuidado.

Conteúdo do curso

WEB103 · Fundamentos de JavaScript (6 h)
Aprenda JavaScript moderno desde a base: valores, funções, arrays e objetos e, depois, DOM, eventos e consumo de dados de uma API. Você vai tornar interativa uma página estática para um caso real de pequeno negócio.

  • Aula 1 · Valores, variáveis e funções
  • Aula 2 · Arrays, objetos e transformação de dados
  • Aula 3 · DOM, eventos e código assíncrono
  • Aula 4 · Laboratório e atividade
  • WEB103 Avaliação · Fundamentos de JavaScript
Rolar para cima