Universidade Federal de Uberlândia

Faculdade de Computação
8º Trabalho de Programação para Internet – Gestão da Informação – Prof. Daniel A. Furtado
Trabalho Individual – JavaScript – Parte 2

INTRUÇÕES GERAIS
• Esta atividade deve ser realizada individualmente;
• Utilize apenas as linguagens HTML5, CSS e JavaScript. Não é permitido o uso de tecnologias
adicionais como jQuery, Bootstrap etc. Trabalhos utilizando tais tecnologias serão anulados;
• Não é permitido utilizar o módulo Flexbox da CSS (display: flex, grid, inline-flex, inline-grid);
• Código CSS inline não é permitido;
• Sintaxe da XHTML como <img/> ou <br/> não é permitida (anulará o trabalho);
• Os recursos adequados da linguagem HTML5 devem ser utilizados sempre que possível;
• O website deve ser hospedado e disponibilizado online, conforme orientações disponíveis no
final deste documento;
• Ao construir o website, utilize dados fictícios (jamais utilize dados pessoais como seu nome,
CPF, endereço, e-mail, etc);
• Esteja atento às observações sobre plágio apresentadas no final desde documento;
• Trabalhos com implementações utilizando trechos de códigos retirados de sites da Internet ou
de trabalhos de semestres anteriores serão anulados;
• As páginas web não devem conter qualquer conteúdo de caráter imoral, desrespeitoso,
pornográfico, discurso de ódio, desacato, etc.;
• O website deve ser validado utilizando as ferramentas disponíveis nos endereços
[Link] e [Link]/css-validator (não deve conter nenhum erro ou warning);
• O trabalho deve ser entregue até a data/hora definida pelo professor. Não deixe para enviar
o trabalho nos últimos instantes, pois eventuais problemas relacionados à eventos adversos
como instabilidade de conexão, congestionamento de rede, etc., não serão aceitos como
motivos para entrega da atividade por outras formas ou em outras datas;
• Este trabalho deve ser feito mantendo os trabalhos anteriores intactos, ou seja, os trabalhos
anteriores devem permanecer online conforme foram entregues;
• Trabalhos enviados por e-mail ou pelo MS Teams não serão considerados.

Estude os slides de aula disponibilizados no endereço a seguir e resolva os exercícios seguintes.

[Link]

Exercício 1

Crie uma página web que ofereça uma interface dinâmica que possibilite a inserção e a remoção de
itens em uma lista ordenada utilizando um campo de formulário. Observe a figura a seguir.
O texto informado pelo usuário no campo Interesse deve ser adicionado dinamicamente na lista
quando o usuário clicar no botão Adicionar. Após a implementação, adicione comentários no código
JavaScript explicando as operações. Utilize como base o exemplo disponibilizado nos slides de aula.

Exercício 2

Crie uma página HTML que se apresente como na figura a seguir.

Em seguida, adicione o código JavaScript para que o estado selecionado selecionado pelo usuário
aparece logo abaixo ao campo, dentro de um elemento <p>.

Dica: utilize o evento change do campo select para executar o código JavaScript toda vez que o
campo for alterado (ao invés de utilizar onclick, utilize onchange). O valor da opção selecionada
(estado) pode ser resgatado no código JavaScript utilizando a propriedade value do objeto, de forma
similar àquela apresentada nos slides de aula para campos textuais simples.

Exercício 3

Faça uma cópia da página [Link] do Trabalho5. Em seguida, adicione o código JavaScript para
realizar o seguinte efeito:

• Quando o usuário passar o ponteiro do mouse sobre uma imagem qualquer, deverá aparecer
uma sombra vermelha envolvendo a imagem;
• Quando o usuário afastar o ponteiro do mouse da imagem, a sombra deverá desaparecer.

O efeito não deve ser adicionado utilizando apenas CSS. Veja a figura de exemplo a seguir:
Exercício 4

Crie uma página web contendo um formulário de cadastro de usuário que se apresente como na
figura a seguir. Faça a validação do formulário utilizando JavaScript. Caso o usuário tente enviar o
formulário com algum campo em branco, deverá aparecer uma mensagem de texto próxima ao
campo notificando sua obrigatoriedade (apenas para os campos não preenchidos). Utilize como base
o exemplo apresentado nos slides de aula. Acrescente comentários no código descrevendo as
operações.

Exercício 5

Faça uma cópia do Trabalho4/Exercício1, referente à página do currículo, e insira o código

JavaScript necessário para que, quando o usuário clicar em algum subtítulo (“Perfil”, “Principais
Competências”, etc.), o conteúdo do elemento seguinte ao subtítulo clicado desapareça da página
(deixando de ocupar espaço no layout). Quando o usuário clicar duas vezes no subtítulo, o conteúdo
do elemento seguinte deve voltar a aparecer. Por exemplo, se o usuário clicar uma vez em
“Principais Competências”, “Formação Acadêmica” e “Experiência Profissional”, então a página
deverá se apresentar como na figura a seguir:
Dicas:

• Para acessar o elemento seguinte ao elemento clicado, utilize a propriedade nextElementSibling do nó;
• Crie uma classe CSS para ocultar o elemento e adicione a classe ao nó utilizando JavaScript (utilize
[Link], conforme exemplo dos slides);
• Para capturar o duplo clique no título, utilize o evento dblclick;
• Para fazer com que o conteúdo reapareça, remova a classe adicionada anteriormente utilizando JavaScript
([Link]);
• Para evitar que o título fique selecionado depois do duplo clique, utilize a propriedade CSS “user-select:
none;” na regra CSS que define os estilos de exibição dos títulos <h2>.

Disponibilização Online

As páginas dos exercícios devem ser disponibilizadas online utilizando o subdomínio gratuito
registrado anteriormente, porém em pasta própria (isto é, [Link]/trabalhoX/ex1,
[Link]/trabalhoX/ex2, etc.). Não altere ou exclua as pastas dos trabalhos anteriores.

Acrescente um arquivo de nome [Link] na pasta raiz do trabalho contendo links para as páginas
dos exercícios.

Entrega

Além da disponibilização online, a pasta raiz contendo as subpastas dos exercícios deve ser
compactada no formato zip e enviada pelo Sistema Acadêmico de Aplicação de Testes (SAAT) até a
data limite indicada pelo professor em sala de aula.

Adicione também um arquivo de nome [Link], na pasta raiz, contendo a URL do trabalho online
(para a pasta raiz do trabalho).
Sobre Eventuais Plágios

Este é um trabalho individual. Os alunos envolvidos em qualquer tipo de plágio, total ou parcial,
seja entre equipes ou de trabalhos de semestres anteriores ou de materiais disponíveis na Internet
(exceto os materiais de aula disponibilizados pelo professor), serão duramente penalizados (art. 196
do Regimento Geral da UFU). Todos os alunos envolvidos terão seus trabalhos anulados e receberão
nota zero.