DESAFIO

JAVASCRIPT

Olá, estudante!

Chegou o momento de colocar em prática os conhecimentos aprendidos e, com isso, desenvolver competências.
Para tanto, leia o detalhamento apresentado a seguir para compreender como realizar o desafio proposto. Prepare-se
e bons estudos!

ORIENTAÇÕES GERAIS

Para o desenvolvimento desse desafio, considere que:

 A atividade será realizada individualmente.

 A entrega ocorrerá no Ambiente Virtual de Aprendizagem (AVA).
 A data limite para entrega será informada no AVA.
 As fontes das referências bibliográficas deverão seguir as normas da Associação Brasileira de Normas
Técnicas (ABNT), caso utilizadas.
 As etapas para a realização da tarefa devem ser lidas atentamente antes de iniciar.

OBJETIVOS DE APRENDIZAGEM

 Criar páginas para web, manipulando elementos, eventos do navegador e formulários através da linguagem
JavaScript.
 Utilizar os elementos básicos da orientação a objetos (classes, objetos e encapsulamento) em uma aplicação
web com JavaScript.
 Utilizar elementos avançados da orientação a objetos (herança e interface) em uma aplicação web com
JavaScript.

CONTEÚDOS FORMATIVOS

 Linguagem da web
 Orientação a objetos
 Interfaces e Herança em orientação a objetos

EQUIPAMENTOS E MATERIAIS

Descrição do item Especificação Quantidade

Computador Sistema operacional Windows 10 ou superior 1 por estudante

1
DESCRIÇÃO E PROCEDIMENTOS

PROPOSTA

Nesta atividade, você dará continuidade ao desenvolvimento do site, atendendo aos requisitos técnicos definidos.
Para isso, considere a seguinte situação:

O líder técnico requisitou a implementação de efeitos interativos para aprimorar a experiência do usuário. Parte da
codificação já foi iniciada, e sua tarefa é concluir o desenvolvimento do site. Para isso, você deverá incluir um
carrossel de imagens, um mecanismo de comparação de veículos e a captura de dados de um formulário,
possibilitando sua futura integração com o sistema da companhia. É importante adotar boas práticas na elaboração
do código para assegurar a eficiência e qualidade.

Agora, leia o detalhamento de cada ação a seguir para realizar a atividade proposta.

AÇÃO 1

Passo 1: utilizar os arquivos ilustrados na imagem a seguir, para desenvolver sua atividade.
Obs.:
 Todo conteúdo HTML, CSS e imagens já foram disponibilizados para cumprimento da tarefa.
 Foram disponibilizados todos os arquivos JS, porém, estes não foram finalizados. Para acessá-los, clique no
link que consta na seção anexos ao final deste roteiro. Veja a seguir uma figura que representa os arquivos
dessa pasta:

Figura 1 – Arquivos JS

AÇÃO 2

A primeira página denominada Carrossel é a principal do site. Para estruturá-la, siga os passos abaixo:

 Passo 2: desenvolver um mecanismo de transição de imagens (carrossel) no qual uma imagem surgirá para
o usuário a cada X segundos.

 Passo 3: verificar se arquivo index.html contém os métodos que iniciam o carrossel, estes, por sua vez,
estão referenciados no arquivo carrossel.js com codificação incompleta.
2
  Passo 4: considerar a criação de classe, atributos, atributos estáticos e construtor, sendo organizada da
seguinte forma:
o Classe Carousel
 Image
 Title
 Url

o Método start inicializa o carrossel e o intervalo de X segundos aciona o método Next, sendo:
 Método next responsável por exibir o conteúdo na tela e incrementar o contador para o
próximo. Para essa finalidade, considere:
 Alterar os estilos css com Java Script
 Injetar texto em uma div
 Utilizar a Div com ID Carousel para exibir a imagem e a DIV com ID carousel-title
para conter o texto com um link.

Para visualizar essa estrutura, veja a seguir o protótipo das páginas:

Figura 2 - Protótipo das páginas Carrossel

Fonte: Ford (2022).

 Passo 5: configurar a página para substituir a imagem e o texto a cada dois segundos.

AÇÃO 3

Nesta ação, intitulada JavaScript Objetos, ao clicar no item de menu “Lançamento” ou na imagem do <produto>, o
usuário deve ser redirecionado para uma outra página específica do veículo. Para estruturá-la, siga os passos abaixo:

 Passo 6: inserir, na área superior, um vídeo promocional para a divulgação do veículo e uma breve
descrição do produto.

 Passo 7: inserir, na área central, três imagens do veículo ocupando toda a largura da página, com as
seguintes ações associadas:

o Inserir, na área inferior, uma tabela contendo os modelos disponíveis do veículo e seus respectivos
valores.
o Configurar os campos checkbox para que o usuário possa realizar marcações de dois veículos.
o Configurar o botão comparar de modo que ocorram as seguintes ações:
 Se apenas um veículo for selecionado, exibir uma mensagem informando ao usuário que é
necessário escolher dois veículos.
 Apresentar a comparação entre os dois veículos selecionados.
3
 o Considerar a implementação da classe Car e o construtor proposto.
o Estudar o código entregue e considerar o objetivo de cada método dele, conforme detalhamento
abaixo:
 GetCarArrPosition: permite varrer uma array, retornando à posição do objeto armazenado
se for igual ao objeto informado. Se não encontrar, retorna -1.
 SetCarToCompare: permite inserir o objeto Car em uma array, apenas se o checkbox
estiver com o estado de checked. Não deve permitir a inclusão do número maior que dois
carros no array e quando o checkbox for desmarcado, deverá remover o respectivo objeto
do array.
 ShowCompare: exibe o pop-up com a tabela de comparação.
 HideCompare: oculta o pop-up com a tabela de comparação.
 UpdateCompareTable: este método é chamado no ShowCompare, e tem o objetivo de
atualizar os elementos HTML contidos na tag <div id="compare">...</div>. Utilize funções
do JavaScript para injetar dinamicamente o conteúdo correspondente em cada célula da
tabela, com atenção aos IDs que identificam qual informação deve ser exibida.

Para visualizar essa estrutura, veja a seguir o protótipo da página:

Figura 3 - Protótipo da página Lançamento

Fonte: Ford (2022).

o Em seguida, deve utilizar o checkbox para marcar dois veículos e clicar em "comparar" para
visualizar a tela de comparação, conforme figura a seguir:

4
 Figura 4 - Página de comparação entre dois veículos

Fonte: Ford (2022).

AÇÃO 4

Nesta ação, intitulada "Formulário", ao clicar no item de menu “Contato” na página principal, o usuário deve ser
redirecionado para a página de contato da empresa. Para estruturá-la, siga as diretrizes abaixo:

 Passo 8: adicionar, na área central, um formulário com os seguintes campos: nome do usuário, e-mail para
contato, telefone, tipo de contato (elogio, reclamação ou solicitação), mensagem e botão "Enviar".

 Passo 9: Aplicar transições visuais entre os elementos. Por exemplo, ao passar o cursor sobre o botão
"Enviar", destacá-lo aumentando seu tamanho e alterando sua cor. Esta ação é uma sugestão.

Para visualizar essa estrutura, veja a seguir o protótipo da página correspondente:

Figura 5 – Protótipo da página de contato

Fonte: Ford (2022).

AÇÃO 5

 Passo 10: enviar o desafio concluído no espaço indicado no Ambiente Virtual de Aprendizagem (AVA), em
um arquivo compactado e nomeado como: desafio_JAVASCRIPT<nome do estudante>.zip

5
ANEXOS

Para contribuir com a estruturação do desafio, foi organizado um arquivo ZIP contendo o HTML completo da
proposta. Você deverá atuar no desenvolvimento dos arquivos JavaScript presentes nessa pasta. Para acessá-la
clique no link abaixo:

Arquivos: https://cimatecead.senaicimatec.com.br/Ucs/extensao/programacao-front-end/anexo_desafio_javascript.zip

CRTÉRIOS DE AVALIAÇÃO

Seu desafio será analisado pelo docente, que observará a entrega considerando os seguintes aspectos:

 Utilização de variáveis, controle de fluxo, condicionais, funções e laços de repetição.

 Utilização de interações com elementos DOM.
 Utilização de classes, construtores e estáticos.

Sucesso!