TADS:Desenvolvimento Web I

De Wiki Cursos IFPR Foz
Ir para navegaçãoIr para pesquisar

Planos de ensino

Diários de Sala

26/fevereiro

Aula Extra (Sexta, 2 primeiros horários)

Realizar o trabalho e tirar dúvidas!

25/fevereiro

Trabalho de Desenvolvimento WEB

- Criar uma página que permita o usuário efetuar uma compra.

- O usuário deve ter uma tela com imagens do produto que deseja comprar. Sua loja deve fornecer pelo menos 9 produtos diferentes.

- Ao clicar em uma das imagens, esta deve ser destacada de alguma forma (fica a cargo como fazer isso, porém deve usar a funcão ANIMATE)

- Também ao clicar em uma das imagens, o usuário deve ser capaz de escolher a quantidade que deseja do produto e clicar em Inserir.

- Na mesma página, mais abaixo, o usuário poderá ver quais produtos ele já inseriu. Cada produto deve mostrar uma foto do produto, nome, quantidade e valor total do produto na compra.

- Caso o usuário insira várias vezes o mesmo produto, a página pode agir de 2 formas: mostrar somente uma entrada do produto, com a somatória do produto, ou mostrar uma entrada para cada vez que o usuário clicou em inserir.

- Os dados de nome, e valor unitário do produto não são controladas pelo usuário, e sim já pré-definidas pelo programador, não podendo ser alterado.

- O sistema deve permitir o usuário excluir um produto já inserido da listagem dos produtos comprados. A exclusão de um produto deve, além de excluir o item comprado da lista, utilizar-se da funcão ANIMATE para excluí-lo.

- Ao final de tudo, deve ser mostrado o total de todos os produtos comprados.

 - Entregar o trabalho até dia 29/02
 - Individual
 - Entregar por e-mail para estevan.costa@ifpr.edu.br
 - Assunto no e-mail: Trabalho WEB 2902
 - Arquivos do trabalho compactados em um arquivo com seu nome completo

23/fevereiro

LUTO

18/fevereiro

Pendente

16/fevereiro

Como já visto anteriormente, o Javascript não possui uma ligação direta com o html. Estes conversam por meio de um intermediário chamado DOM (Document Object Model). Isto não é diferente no jQuery. Assim temos alguns métodos específicos para poder trabalhar com este DOM, que podem facilmente adicionar ou remover elementos. No exemplo a seguir é possível ver o método APPEND, que adiciona um elemento a página.

<html>
	<script src="jquery-2.2.0.min.js"></script>
	<script>
		var x = 0;
		$(document).ready(function(){
			$("#botao").click(function(){
				//$("#saida").html("<p>Oi</p>");
				$("#saida").append("<p>Oi"+x+"</p>");
				x++;
			});

			$("#botao2").click(function(){
				$("#saida p").remove();
			});

			$("#saida").on("click", "p", function(){
				$(this).remove();
			});
		});
	</script>
	<body>
		<p> Seja bem Vindo </p>
		<input type="button" value="adicionar" id="botao">
		<input type="button" value="remover" id="botao2">
		<div id="saida">
		</div>

	</body>
</html>

Além disso temos a função REMOVE, que faz o processo inverso do Append. Só precisa tomar cuidado ao usar esta função, pois caso o seletor utilizado pegar mais de um elemento, todos serão removidos do DOM. Além disso, como o DOM segue uma estrutura em árvore, caso você remova um elemento que possui outros elementos dentro dele, TODOS serão removidos.

Outra função fornecida pela biblioteca jQuery é a CLONE, que permite fazer uma cópia fidedigna de um elemento já existente. Assim como a função REMOVE, todos os elementos que estão dentro do elemento que está sendo clonado irão juntos. Abaixo tem um exemplo de como utilizar esta função.

<html>
	<style>
		.fera{
			border: solid 1px black;
			width : 500px;
			height: 80px;
			margin: 20px;
			padding: 20px;
		}
	</style>
	<script src="jquery-2.2.0.min.js"></script>
	<script>
		var controle = 0;
		$(document).ready(function(){
			$("#botao").click(function(){
				var outro = $("#produto").clone();	
				if(controle == 0)
				{
					outro.css("backgroundColor","red");
					controle = 1;
				}
				else
				{
					outro.css("backgroundColor","blue");
					controle = 0;
				}
				$("#saida").append(outro);
			});
		});
	</script>
	<body>
		<input type="button" value="adicionar" id="botao"><br>
		<div id="saida">
			<div class="fera" id="produto">
				Codigo:     <input type="text"><br>
				Quantidade: <input type="text">
			</div>
		</div>
	</body>
</html>

No exemplo acima, a função CLONE é atribuída para uma variável. Esta variável contêm a cópia produzida, podendo ser manipulada pelas funções de jQuery já aprendidas. No exemplo a função CSS é utilizada antes de chamar a função APPEND para adicionar a cópia produzida a outro elemento.

13/fevereiro

Este dia foi solicitado para os alunos praticarem sobre a função .animate(). Para isto foi solicitado para os alunos realizarem 2 exercícios:

1) Criar uma página que mostre 4 imagens, todas semi-transparentes. Além das imagens, o site precisa ter uma área vazia. Ao clicar em uma das imagens semi-transparentes, a imagem clicada deve ficar opaca, e uma cópia da imagem deve aparecer na área vazia, no tamanho grande.

Solução: (é necessário que tenha 4 imagens na mesma pasta que este código, para poder funcionar):

<html>
	<style>
		div{
			margin: auto;
		}
		.grande, .imggrd{
			width: 400px;
			height: 400px;
			border: solid 1px black;
		}

		.imgpeq{
			width : 94px;
			height: 94px;
			margin: 1px;
			opacity: 0.33;
		}
		.pequenos{
			width: 400px;
			height: 100px;
		}
	</style>
	<script src="jquery-1.11.3.min.js"></script>
	<script>
		$(document).ready(function(){
			$(".imgpeq").click(function(){
				$("#imggrd").slideUp(1);
				$("#imggrd").attr("src", $(this).attr("src"));
				$("#imggrd").slideDown(500);
				$("#imggrd").css("width","400px");
				$(".imgpeq").fadeTo("fast", 0.33);
				$(this).fadeTo("fast", 1);
			});
		});
	</script>

	<head></head>
	<body>
		<div class="grande">
			<img id="imggrd">
		</div>
		<div class="pequenos">
			<img class="imgpeq" src="img1.jpg">
			<img class="imgpeq" src="img2.jpg">
			<img class="imgpeq" src="img3.jpg">
			<img class="imgpeq" src="img4.jpg">
		</div>
	</body>
</html>

2) Criar uma página com 4 divs, cada um com características que a diferenciem, como tamanho e cor (fica a sua escolha como diferenciá-las). Fazer com que cada um dessas div's tenha um movimento qualquer, um diferente do outro, mas que seja perpétuo, ou seja, caso o usuário deixar a página aberta, as div's devem se movimentar indefinidamente.

Solução:

O movimento perpétuo ocorre pois cada div possui uma função própria, que por meio do SETTIMEOUT ela se chama após o movimento ter concluído. Assim, cada função vai fazer 2 passos, controlados pelo parâmetro indicado na hora de chamar a função. Se passar 0, vai fazer um movimento, se passar 1 vai fazer outro movimento. Também é tomado o cuidado de colocar o tempo para a chamada da SETTIEOUT igual ao tempo da função ANIMATE.

<html>
	<script src="jquery-1.11.3.min.js"></script>
	<style>
		div{
			border: solid 1px black;
			width: 50px;
			height: 50px;
			position: absolute;
		}
		#bloco1{
			background-color: #123456;
		}

		#bloco2{
			background-color: #75AEF8;
		}

		#bloco3{
			background-color: #FF6779;
		}

		#bloco4{
			background-color: #11FF45;
		}
	</style>
	<script>
	function movimento1(tipo)
	{
		if(tipo == 0)
		{
			$("#bloco1").animate({left : "300px"}, 1000);
			tipo = 1;
		}
		else
		{
			$("#bloco1").animate({left : "0px"}, 1000);
			tipo = 0;
		}
		setTimeout(movimento1, 1000, tipo);
	}

	function movimento2(tipo)
	{
		if(tipo == 0)
		{
			$("#bloco2").animate({left : "500px" , top: "500px"}, 1500);
			tipo = 1;
		}
		else
		{
			$("#bloco2").animate({left : "0px", top: "0px"}, 1500);
			tipo = 0;
		}
		setTimeout(movimento2, 1500, tipo);
	}

	function movimento3(tipo)
	{
		if(tipo == 0)
		{
			$("#bloco3").animate({bottom : "200px" , right: "500px"}, 5000);
			tipo = 1;
		}
		else
		{
			$("#bloco3").animate({bottom : "0px", right: "0px"}, 5000);
			tipo = 0;
		}
		setTimeout(movimento3, 5000, tipo);
	}

	function movimento4(tipo)
	{
		if(tipo == 0)
		{
			$("#bloco4").animate({top : "300px" , left: "0px"}, 2000);
			tipo = 1;
		}
		else
		{
			$("#bloco4").animate({top : "300px", left : "500px"}, 2000);
			tipo = 0;
		}
		setTimeout(movimento4, 2000, tipo);
	}
	$(document).ready(function(){
		movimento1(0);
		movimento2(0);
		movimento3(0);
		movimento4(0);
	});
	</script>
	<head></head>
	<body>
		<div id="bloco1"></div>
		<div id="bloco2"></div>
		<div id="bloco3"></div>
		<div id="bloco4"></div>
	</body>
</html>

11/fevereiro

04/fevereiro

Parabéns ao aluno FAAHD por ser o primeiro a entregar todos os exercícios com louvor!


Exercícios:


1 - Criar uma página que tenha 2 campos textos, um botão e uma div com o seu nome nela. O usuário deverá inserir o nome de uma propriedade CSS em um campo e um valor no outro. Ao clicar no botão, a propriedade indicada no primeiro campo deve influenciar no nome que está impresso na tela. Supondo que a pessoa digite COLOR no primeiro campo e RED no segundo, ao clicar no botão o nome do usuário deve ficar vermelho. Além disso, os campos devem ser limpos para a pessoa poder colocar outro campo.

(Modo One Punch Man: Criar um segundo botão que faz o nome voltar ao normal, sem influência de nenhuma regra CSS inserida pelo usuário.)


2 - Criar uma div com borda e cor de fundo a sua escolha, tamanho de 50 px por 50 px. Toda vez que o usuário clicar nesta div, ela deve mudar de lugar. O padrão e para onde ela vai fica ao seu critério.

(Modo One Punch Man: Fazer com que a cada 1 segundo ela mude de lugar, sem precisar clicar nela)


3 - Criar uma tabela 3 x 3 e um botão. Ao clicar no botão, deve aparecer valores numéricos aleatórios em cada célula da tabela.

(Modo One Punch Man: Fazer com que os valores gerados aleatoriamente comecem a decrementar seu valor em 1, e quando chegar a 0, parar de decrementar o valor)


4 - Criar uma página com uma área para mostrar diferentes imagens em um único lugar e 2 botões. Ao carregar a página, esta já deve mostrar a primeira imagem. Um botão deve ser "Próximo" e o outro "Anterior". Ao clicar em Próximo, deve ser mostrada a segunda imagem no lugar da primeira, e assim por diante (se a imagem for a última, voltar para a primeira). Se clicar em Anterior, deve ser mostrado a imagem anterior (se for a primeira, mostrar a última). Utilize pelo menos 5 imagens.

(Modo One Punch Man: Fazer com que troque de imagem a cada 1 segundo).


5 - Criar uma página dedicada ao poeta dos poetas, Wesley Safadão. Utilize pelo menos um evento de clicar para alterar o status da página de alguma forma. Use sua imaginacão.

(Modo One Punch Man: Não se emocione ao realizar esta página)

02/Fevereiro

30/janeiro

28/janeiro

Caso deseje fazer o download da biblioteca:

<script src="jquery-1.12.0.min.js"></script>

ou você pode utilizar via CDN pela google utilizando o seguinte código:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

10/dezembro