Pular para conteúdo

Exercícios 10 - JavaScript e TypeScript 🌐

Objetivo

Objetivo: Manipular a Web e o Console.

🟢 Fáceis

  1. Botão Mágico (HTML + JS): Crie uma página com um botão. Ao clicar, exiba um alert("Olá Mundo!").
  2. Calculadora de Idade (Node.js): Crie um script idade.js que define uma variável anoNascimento e calcula/mostra a idade atual.

🟡 Médios

  1. Manipulando o DOM:
    • Crie um <p id="texto">Texto original</p> e um botão.
    • Ao clicar no botão, mude o texto do parágrafo para "Texto alterado pelo JS!".
    • Mude também a cor do texto para vermelho.
  2. Tipagem Segura (TypeScript):
    • Crie uma função somar(a: number, b: number): number.
    • Tente chamar passando uma string e veja o erro (no editor).
    • Compile e rode o JS gerado.

🔴 Desafio

  1. Lista de Tarefas (DOM):
    • Crie um input e um botão "Adicionar".
    • Ao clicar, pegue o texto do input e adicione como um novo item <li> dentro de uma lista <ul>.
    • Bônus: Adicione um botão "X" em cada item para removê-lo.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Botão Mágico (HTML + JS) **Resolução e Implementação:** 
// Estrutura de implementação recomendada para Botão Mágico (HTML + JS)
// Validação de regras de negócio e retorno consistente
- **Explicação:** A solução atende diretamente aos requisitos de **Web Moderna: JavaScript e TypeScript**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Calculadora de Idade (Node.js) **Resolução e Implementação:** 
// Estrutura de implementação recomendada para Calculadora de Idade (Node.js)
// Validação de regras de negócio e retorno consistente
- **Explicação:** A solução atende diretamente aos requisitos de **Web Moderna: JavaScript e TypeScript**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 3: Manipulando o DOM **Resposta Comentada:** - **Fundamentação:** No contexto de **Web Moderna: JavaScript e TypeScript**, o conceito abordado (Manipulando o DOM) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 4: Tipagem Segura (TypeScript) **Resolução e Implementação:** 
// Estrutura de implementação recomendada para Tipagem Segura (TypeScript)
// Validação de regras de negócio e retorno consistente
- **Explicação:** A solução atende diretamente aos requisitos de **Web Moderna: JavaScript e TypeScript**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 5: Lista de Tarefas (DOM) **Resposta Comentada:** - **Fundamentação:** No contexto de **Web Moderna: JavaScript e TypeScript**, o conceito abordado (Lista de Tarefas (DOM)) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais.