Desenvolvimento web com Javascript

Esta disciplina foi ministrada por Wilson Júnior e faz parte da grade opcional do curso de Bacharelado em Ciência da Computação na Unesp.

Conteúdo:

Aula 1 – Introdução ao HTML

    Exercícios propostos:

• Uma página pessoal;
• Uma tabela com o inventário de uma loja.

    Screenshots:

Aula 2* – Introdução ao CSS

    Exercício proposto:

• Aplicar os conhecimentos de CSS aprendidos na aula nos projetos da aula anterior.

    Foram entregues os mesmos trabalhos da aula anterior, sem alterações, pois já havia CSS nos arquivos.

Aula 3* – Links, iframes e vídeos

    Não houve exercício proposto pelo professor.

Aula 4 – Contêineres

    Exercícios propostos:

• Desafio – Criar uma página contendo apenas uma barra no topo da página, da largura do navegador. A barra deve conter um botão de menu à esquerda, título ao centro e um botão de saída à direta;
• Criar uma página completa de filmes contendo cabeçalho, menu, conteúdo e rodapé.

    Screenshots:

Aula 5 – Formulários

    Exercícios propostos:

• Criar uma página para o cadastro em uma rede social;
• Qual a diferença entre os métodos GET e POST?

    Screenshot:

Aula 6 – Posicionamento e fluxo do documento

    Exercício proposto:

• Crie a página inicial de um blog sobre qualquer assunto. Devem ser exibidos cards referentes às postagens, contendo uma imagem, breve descrição e um título.

    Screenshot:

Aula 7 – Grid layout

    Exercício proposto:

• Utilizar o grid-template-areas para organizar uma página com header, footer, main e navbar.

    Screenshot:

Aula 8 – Seletores avançados e recursos úteis

    Exercícios propostos:

• Criar uma página que contenha uma lista cujos elementos têm cor diferente nas posições múltiplas de 3;
• Criar uma página que imite um artigo de jornal, em que a primeira letra de cada parágrafo apareça maior;
• Criar uma página que contenha um quadrado que, quando o cursor estiver posicionado em cima dele, o quadrado muda de posição e cor, com transições.

    Screenshots:

Aula 9 – Introdução ao Javascript

    Exercícios propostos:

• Criar, em Javascript, uma sequência de questões afim de obter informações pessoais do usuário, para armazená-las em um objeto e, por fim, apresentá-las ao usuário em uma caixa de alerta;
• Criar um jogo de dados com dois jogadores. O objetivo do jogo é alcançar um valor limite com a soma dos dados de cada rodada. Cada jogador lança dois dados nas rodadas. Assim que um jogador atingir o valor limite (ou ultrapassá-lo), deve ser exibido "fim de jogo" e o vencedor;

Aula 10 – Manipulação do DOM

    Exercícios propostos:

• Criar, dinamicamente (com Javascript), no lado esquerdo do site, uma lista com itens, também criados dinamicamente. Deve haver objetos criados dinamicamente na parte direita do site;

    Screenshot:

Aula 11 – Eventos em Javascript

    Exercícios propostos:

• Criar um objeto controlado com as setas do teclado que, quando ele atingir as bordas de um quadro, ele volta à posição inicial:
  • Versão 1;
  • Versão 2.

    Screenshots:

Aula 12* – Web para dispositivos móveis e responsividade

    Não houve exercício proposto pelo professor.

Trabalho final

Clique aqui para visualizar o trabalho final

Este trabalho foi desenvolvido em conjunto com Carlos Santana.

Criar um site de compras que contém:

1. Página principal com apresentação de produtos;
2. Página com detalhes da compra e os dados do usuário;
3. Página com a confirmação do pedido.

1. A página principal deve conter:

   • Todos os produtos disponíveis na loja
     • Lidos de um objeto json
   • Cada produto deve possuir:
     • Nome;
     • Categoria;
     • Preço;
     • Imagem.
   • Devem haver ao menos três categorias;
   • O usuário poderá filtrar produtos por categoria.
   • A página também deve conter:
     • Uma barra de ferramentas para as filtragens (na lateral esquerda);
     • Uma barra na parte superior com o nome do site e um botão para finalizar a compra.

2. A página com detalhes da compra e os dados do usuário deve conter:

   • Campos para os dados do usuário;
   • Um resumo da compra;
     Esta página corresponde ao carrinho de compras. Não é necessário apresentar informações sobre o método de pagamento.

3. A página com a confirmação do pedido deve conter:

   • Um resumo do pedido;
   • Tempo de frete gerado aleatoriamente.

Clique aqui para visualizar o trabalho final

    Screenshot:

_{^{*Não houve exercício proposto pelo professor.}}