Laboratório de Informática 1 e 2 (2009)

Pessoal,

Já finalizei todas as correções necessárias e suas notas já estão na planilha abaixo.
Esta planilha é o que vale.

http://spreadsheets.google.com/ccc?key=0AqQ2GvdPZmGjdHpidnBWUC1kd0VSUmJWaDFJUDMwbHc&hl=pt_BR

Observem  possiveis erros de lançamento no iger e entrem em contato se necessário.

Caso alguém queira conversar comigo e conferir sua prova final, amanhã (sábado) das 8:00h às 9:30h estarei no Lab 7 do CCET. Destaco que não irei na PUCPR na segunda-feira.

Desejo a todos, boas férias e um excelente ano novo!

Pessoal,

Por favor, verifiquem suas notas finais:

http://spreadsheets.google.com/ccc?key=0AqQ2GvdPZmGjdHpidnBWUC1kd0VSUmJWaDFJUDMwbHc&hl=pt_BR

Confiram as notas acima! Qualquer problema, venha conversar comigo na terça ou quarta-feira.

IMPORTANTE: todos que estão em situação limítrofe (médias 68 a 69.9 e 38 a 39.9) devem comparecer na aula no dia da prova final.

Lembrem-se: a final é na terça (8/12) para a turma V e (9/12) para a turma U.

Notas do 3o BIMESTRE, falta o 4o!

http://spreadsheets.google.com/ccc?key=0AqQ2GvdPZmGjdHpidnBWUC1kd0VSUmJWaDFJUDMwbHc&hl=pt_BR

POR FAVOR, CONFIRA SUAS NOTAS!!!!

Pessoal,

As notas da 3a Parcial até segunda-feira!
Sobre a quarta-parcial, observem as datas:
* 17/11 – última aula expositiva: bibliotecas JavaScript;
* 24/11 – livre (trabalho F14);
* 30/11 – Entrega do trabalho F14;

*1/12 – PROVA DA TURMA V;
* 2/12 – PROVA DA TURMA U;

* 8/12 – Prova Final – Turma V.

* 9/12 – Prova Final – Turma U.

Neste exercício, você vai desenvolver, de maneira colaborativa, exemplos e documentação referente às bibliotecas JavaScript.

1) Escolha duas dentre bibliotecas listadas no resumo a seguir ou procure por alguma biblioteca na Internet:

http://www.brunocampagnolo.com/2009_2/js/libs

Antes de escolher sua biblioteca verifique se alguém já não a escolheu no link abaixo:

http://spreadsheets.google.com/ccc?key=0AqQ2GvdPZmGjdFNrRk5VclFZUnBiMlFUVmRhT1VKTHc&hl=pt_BR

É essencial que cada aluno use uma biblioteca diferente.

Selecione sua biblioteca no link abaixo:

http://spreadsheets.google.com/viewform?formkey=dFNrRk5VclFZUnBiMlFUVmRhT1VKTHc6MA

2) Para cada biblioteca, crie uma página HTML sobre ela, citando:

* Nome;

* Criador;

* Ano de criação;

* Versão;

* Link;

* Descrição do que faz a biblioteca;

* Licença;

* Preço;

* Compatibilidade com navegadores;

* Tamanho (KB);

* Performance;

* Exemplo de sites que utilizam e links relacionados;

* Requisitos para instalação e dependências;

* Passos para instalação;

* Pelo menos 3 exemplos DE CÓDIGO BEM COMENTADOS;

O primeiro exemplo, pode ser igual a um exemplo já fornecido pela biblioteca.

O segundo exemplo deve ser inédito.

Seu terceiro exemplo também deve ser inédito e usar também outra biblioteca qualquer a sua escolha. Por exemplo, se você escolheu uma biblioteca de zoom, faça um exemplo com ela e com mais uma outra biblioteca qualquer.

3) Você deverá apresentar seu segundo exemplo no dia 1 ou 2/12.

ENTREGA VIA EUREKA, EM PASTA CRIADA NO MÓDULO CONTEÚDO E VIA CORREIO ATÉ O DIA 31/11 (01/12, pela manhã).

Deixe seu exemplo público, para que seus colegas também possam vê-lo!

Pessoal,

Chegamos a nosso último tópico!

Segue, abaixo e no link.

(entrega máxima até 16/11)

Este exercício está baseado na aula sobre layout CSS e nos exemplos fornecidos na aula referente a este assunto.

1) Faça o download do arquivo a seguir:

Exemplos de layout

2) Este arquivo contém um conjunto de pastas. Em cada pasta há uma imagem que representa um layout a partir da imagem Resposta_1.png. Verifique que esta imagem é diferente em cada pasta e cada pasta possui um código diferente.

3) Escolha um código para resolver seu exercício cuja primeira letra seja igual à primeira letra de seu nome. Por exemplo, se seu nome é Jamanta, você pode escolher a pasta jm ou jv.

4) Recrie o mais próximo possível a interface fornecida na imagem Resposta_1.png. Observe que você deve recriar o formulário ao centro conforme a especificação listada. Cada imagem possui um layout diferente, também está especificado. O menu lateral deve obrigatoriamente, usar a imagem fornecida rollover.png em sua pasta.

IMPORTANTE: você deve formatar, dimensionar e posicionar seus elementos usando CSS. Outras alternativas: tabelas para layout, tags de formatação, etc, serão DESCONSIDERADAS.

Entregue, até 16/11/2009 sua resposta no espaço abaixo.

A aula de hoje é uma continuação da aula anterior. Na aula anterior trabalhamos com o embasamento necessário para construir layouts em CSS: as propriedades float, clear, position e width.

O objetivo agora é realizar alguns estudos de caso relacionados a tipos de layout que podem ser implementados através destas propriedades.

Apresentação referente à aula
Leia mais »

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#im2 {
position: relative;
left: 300px;
top: 30px;
}
#im3 {
position: absolute;
left: 0px;
top: 0px;
}
#im4 {
position: fixed;
right: 100px;
bottom: 10px;
}
</style>
</head>
<body>
<h1>Posicionamento Estático</h1>
<img id="im1" src="http://www.pucpr.br/gerenciador/imagens_noticias/6345_c.jpg">

<h1>Posicionamento Relativo</h1>
<img id="im2" src="http://www.pucpr.br/gerenciador/imagens_noticias/6326_c.bmp">

<h1>Posicionamento Absoluto</h1>
<img id="im3" src="http://www.pucpr.br/gerenciador/imagens_noticias/6310_c.jpg">

<h1>Posicionamento Fixo</h1>
<img id="im4" src="http://www.pucpr.br/images/banner_intercambio0.jpg">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse semper odio in dui. Donec iaculis. Vestibulum justo. Donec accumsan, justo vel pharetra varius, libero mauris ultrices nisl, at pulvinar enim nulla vitae nunc. Duis imperdiet ultrices nisi. Sed blandit. Praesent sed mi non nulla pulvinar ultricies. Sed ultricies libero vitae nulla. Nunc suscipit nisi eget pede. Curabitur feugiat ipsum vel nibh. Pellentesque cursus lectus id quam. Cras nec tellus sit amet urna mollis ornare. Nulla facilisi. Aliquam erat volutpat. Suspendisse potenti. Nam porta quam. Morbi tincidunt blandit est.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse semper odio in dui. Donec iaculis. Vestibulum justo. Donec accumsan, justo vel pharetra varius, libero mauris ultrices nisl, at pulvinar enim nulla vitae nunc. Duis imperdiet ultrices nisi. Sed blandit. Praesent sed mi non nulla pulvinar ultricies. Sed ultricies libero vitae nulla. Nunc suscipit nisi eget pede. Curabitur feugiat ipsum vel nibh. Pellentesque cursus lectus id quam. Cras nec tellus sit amet urna mollis ornare. Nulla facilisi. Aliquam erat volutpat. Suspendisse potenti. Nam porta quam. Morbi tincidunt blandit est.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse semper odio in dui. Donec iaculis. Vestibulum justo. Donec accumsan, justo vel pharetra varius, libero mauris ultrices nisl, at pulvinar enim nulla vitae nunc. Duis imperdiet ultrices nisi. Sed blandit. Praesent sed mi non nulla pulvinar ultricies. Sed ultricies libero vitae nulla. Nunc suscipit nisi eget pede. Curabitur feugiat ipsum vel nibh. Pellentesque cursus lectus id quam. Cras nec tellus sit amet urna mollis ornare. Nulla facilisi. Aliquam erat volutpat. Suspendisse potenti. Nam porta quam. Morbi tincidunt blandit est.</p>

</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#cabecalho {
background-color: red;
border: 1px solid black;
}
#lateral {
background-color: blue;
border: 1px solid black;
float: left;
width: 30%;
min-height: 200px;
}
#conteudo {
background-color: yellow;
border: 1px solid black;
float: right;
width: 68%;
min-height: 200px;
}
#rodape {
background-color: green;
border: 1px solid black;
clear: both;
}
#container {
width:  640px;
margin: 0 auto;
}
</style>

</head>
<body>
<div id="container">
<div id="cabecalho">
<h1>Site do Jamanta</h1>
</div>
<div id="lateral">
<ul>
<li>Home</li>
<li>...</li>
</ul>
</div>
<div id="conteudo">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse semper odio in dui. Donec iaculis. Vestibulum justo. Donec accumsan, justo vel pharetra varius, libero mauris ultrices nisl, at pulvinar enim nulla vitae nunc. Duis imperdiet ultrices nisi. Sed blandit. Praesent sed mi non nulla pulvinar ultricies. Sed ultricies libero vitae nulla. Nunc suscipit nisi eget pede. Curabitur feugiat ipsum vel nibh. Pellentesque cursus lectus id quam. Cras nec tellus sit amet urna mollis ornare. Nulla facilisi. Aliquam erat volutpat. Suspendisse potenti. Nam porta quam. Morbi tincidunt blandit est.</p>
</div>
<div id="rodape">
<h6>Bruno - 2009</h6>
</div>
</div>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#container {
background-color: #ccc;
border: 1px solid black;
margin: 10px;
}
.imgFloat {
float: left;
}
.spacer {
clear: left;
}
</style>
</head>
<body>
<div id="container">
<h1>Eu</h1>
<img src="eu.png">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
<div></div>
</div>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#cabecalho {
background-color: red;
border: 1px solid black;
}
#lateral {
background-color: blue;
border: 1px solid black;
width: 39%;
float: left;
min-height: 400px;
}
#conteudo {
width: 60%;
background-color: green;
border: 1px dotted black;
float: right;
min-height: 400px;
}
#rodape {
background-color: yellow;
border: 1px dotted black;
clear: both;
}
#container {
width: 500px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="container">
<div id="cabecalho">
<h1>Site do Jamanta</h1>
</div>
<div id="lateral">
<ul>
<li>Principal</li>
<li>Sobre</li>
<li>...</li>
</ul>
</div>
<div id="conteudo">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse semper odio in dui. Donec iaculis. Vestibulum justo. Donec accumsan, justo vel pharetra varius, libero mauris ultrices nisl, at pulvinar enim nulla vitae nunc. Duis imperdiet ultrices nisi. Sed blandit. Praesent sed mi non nulla pulvinar ultricies. Sed ultricies libero vitae nulla. Nunc suscipit nisi eget pede. Curabitur feugiat ipsum vel nibh. Pellentesque cursus lectus id quam. Cras nec tellus sit amet urna mollis ornare. Nulla facilisi. Aliquam erat volutpat. Suspendisse potenti. Nam porta quam. Morbi tincidunt blandit est.</p>        </div>
<div id="rodape">
<h6>Bruno C. de Paula</h6>
</div>
</div>

</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
#img2 {
position: relative;
left: 100px;
top: 50px;
}
#container { background-color: #ccc;}
#img3 {
position: absolute;
left: 100px;
top: 100px;
}
#img4 {
position: fixed;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="container">
<h1>Posicionamento Estatico</h1>
<img src="eu.png">
<h1>Posicionamento Relativo</h1>
<img id="img2" src="eu.png">
<h1>Posicionamento Absoluto</h1>
<img id="img3" src="eu.png">
<h1>Posicionamento Fixo</h1>
<img id="img4" src="eu.png">
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse semper odio in dui. Donec iaculis. Vestibulum justo. Donec accumsan, justo vel pharetra varius, libero mauris ultrices nisl, at pulvinar enim nulla vitae nunc. Duis imperdiet ultrices nisi. Sed blandit. Praesent sed mi non nulla pulvinar ultricies. Sed ultricies libero vitae nulla. Nunc suscipit nisi eget pede. Curabitur feugiat ipsum vel nibh. Pellentesque cursus lectus id quam. Cras nec tellus sit amet urna mollis ornare. Nulla facilisi. Aliquam erat volutpat. Suspendisse potenti. Nam porta quam. Morbi tincidunt blandit est.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse semper odio in dui. Donec iaculis. Vestibulum justo. Donec accumsan, justo vel pharetra varius, libero mauris ultrices nisl, at pulvinar enim nulla vitae nunc. Duis imperdiet ultrices nisi. Sed blandit. Praesent sed mi non nulla pulvinar ultricies. Sed ultricies libero vitae nulla. Nunc suscipit nisi eget pede. Curabitur feugiat ipsum vel nibh. Pellentesque cursus lectus id quam. Cras nec tellus sit amet urna mollis ornare. Nulla facilisi. Aliquam erat volutpat. Suspendisse potenti. Nam porta quam. Morbi tincidunt blandit est.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse semper odio in dui. Donec iaculis. Vestibulum justo. Donec accumsan, justo vel pharetra varius, libero mauris ultrices nisl, at pulvinar enim nulla vitae nunc. Duis imperdiet ultrices nisi. Sed blandit. Praesent sed mi non nulla pulvinar ultricies. Sed ultricies libero vitae nulla. Nunc suscipit nisi eget pede. Curabitur feugiat ipsum vel nibh. Pellentesque cursus lectus id quam. Cras nec tellus sit amet urna mollis ornare. Nulla facilisi. Aliquam erat volutpat. Suspendisse potenti. Nam porta quam. Morbi tincidunt blandit est.</p>
</body>
</html>

Este é um exercício que aumentará nas próximas semanas. Segue sua especificação inicial no formato do item O07.

Selecione um site de notícias qualquer / blog ou similar.

Recrie a página inicial deste site apenas usando o que aprendeu na aula sobre posicionamento CSS e seus conhecimentos anteriores.

Em sua interface você deve apresentar:

• as notícias apresentadas em um elemento central;
• uma imagem por notícia;
• um menu lateral, levando a outras páginas deste site;
• o cabeçalho do site com o nome e caixa de busca (não funcional);
• o rodapé do site com créditos e data;

Em seu layout, você não deve utilizar outras imagens além da imagem referente à notícia.

Nas próximas 3 semanas, descansamos um pouco de nosso trabalho com a linguagem JavaScript.
Voltamos hoje a nosso último tópico referente a CSS: como posicionar nossos layouts.

Leia mais »

Pessoal,

Os exercícios não precisam ser entregues.
Serão cobrados APENAS no dia da defesa: 20 e 21/10/2009.

Não há entrega posterior do exercício!

Lembre-se: no máximo duplas.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<style type="text/css">
			input  {
				width: 100px;
			}
		</style>
	</head>
	<body>
		<form id="meuForm" action="">

		</form>
		<script type="text/javascript">
			var criarBotoes = function () {
				var k = 1;
				// Criação das linhas
				for(i=0;i<4;i++) {
					// Criei um div na memória
					var meuDiv = document.createElement("div");
					// Obtive o formulário chamado 'meuForm'
					var meuForm = document.getElementById("meuForm");
					// Colocar o div dentro do form
					meuForm.appendChild(meuDiv);
					// Criação das colunas
					for(j=0;j<4;j++) {
						var meuBotao = document.createElement("input");
						meuBotao.setAttribute("type", "button");
						meuBotao.setAttribute("id", "bt"+k);
						meuBotao.setAttribute("value", k++);
						meuBotao.onclick = function () {
							alert("Fui clicado!");
							alert(this.value);
							alert(this.id);
						}
						meuDiv.appendChild(meuBotao);
					}
				}
			}
			criarBotoes();
		</script>
	</body>
</html>

Seu objetivo é criar uma interface que permita a interação com o Jogo dos 15.
Este jogo, criado por Sam Loyd em 1872 tem como objetivo a reordenação de um quadrado numérico.

Em sua versão em JavaScript / HTML / CSS pedem-se algumas implementações extra:
* conte o número de movimentos até chegar na solução;
* conte o tempo até chegar na solução;
* ao invés de números, use imagens para a montagem de seu quebra-cabeça;
* crie um botão que permita a completa desorganização das peças;
* EXTRA – movimentação suave das peças de uma posição para outra;
* EXTRA – crie uma funcionalidade para resolver automaticamente o problema.

Controle do Moedeiro de uma Máquina de Venda de Refrigerantes
Objetivo
– Controlar o moedeiro (caixa) de uma máquina de venda de refrigerantes. O programa, escrito em JavaScript, deve permitir o pagamento de uma bebida, aceitando moedas (0.1, 0.25, 0.5 e 1.0 real) e cédulas (2.0 reais). O programa deve fornecer (informar) o troco, quando necessário, baseado na quantidade de peças (moedas) em estoque (moedeiro).
– Exemplo:
• Valor bebida: 0.75 reais
• Valor depositado: 2.0 reais
• Troco: 1.25 real (0.25 + 1.0)
– Cabe ao programa realizar a gestão do estoque de peças, atualizando-o a cada compra.

- Seja criativo na representação da colocação de moedas. Por exemplo, represente graficamente a colocação das moedas.

- Caso você tenha implementado em Java este problema, entregue também sua resposta em Java.

moedeiro

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
	</head>
	<body>
		<img src="moeda50.jpg" id="moeda50">
		<form action="">
			<button id="btMostrarValor" type="button">Mostrar Valor</button>
			<input type="text" id="display">
		</form>

		<script type="text/javascript">
			var moedeiro = []; // Armazena as moedas temporariamente
			document.getElementById("moeda50").onclick = function () {
				alert("Capluft - Moeda de 50 centavos no moedeiro");
				moedeiro.push(50);
				alert(moedeiro);
			}
			document.getElementById("btMostrarValor").onclick = function () {
				var acumulador = 0;
				for(i=0;i<moedeiro.length;i++) {
					acumulador = acumulador + moedeiro[i];
				}
				document.getElementById("display").value = acumulador;
			}

		</script>
	</body>
</html>

http://spreadsheets.google.com/ccc?key=0AqQ2GvdPZmGjdHBnWm5uc1RWNEdMaUpweVJDMUFvc1E&hl=pt_BR

Por favor, reclame qualquer problema, abaixo:
http://spreadsheets.google.com/viewform?formkey=dEFzdWotQUNUNXJsaV8zTXcwdlNkZ2c6MA..

Exercícios sobre vetores em JavaScript.

Estes exercícios tem como objetivo além de trabalhar com a manipulação de vetores, começar o trabalho com manipulação do Documento HTML em JavaScript (DOM).

Leia mais »

Na última aula, trabalhamos com a linguagem JavaScript.

No começo de nossa disciplina, lá na Aula 03, ou seja, antes mesmo de você ter o primeiro contato com qualquer linguagem de programação fizemos o exercício O03, o qual já lidava com alguns conceitos de JavaScript.

Sua tarefa hoje será REFAZER o exercício O03. A diferença, agora, é que você já conhece um pouco de JavaScript e já sabe como usar o Firebug para depurar seu código.
Além disso, você deve fazer uma competição com seus colegas. Quanto MAIS exercícios CORRETOS você entregar maior será a sua nota. Também será dado um prêmio à turma com mais resultados corretos.

Entregue abaixo seu código – você tem até as 22:00h:

Apresentação referente à aula

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
	</head>
	<body>
		<form action="">
			<label for="nome">Nome:</label>
			<input type="text" id="nome" name="nome"><br>
			<label for="nascimento">Data nascimento:</label>
			<input type="text" id="nasc" name="nasc"><br>
			<input type="button" id="btConfirmar" value="Novo">
			<div id="listaContatos"></div>
		</form>
		<script type="text/javascript">

			var idContato = 1;
			var contatos  = [];
			var criarContato = function(pnome, pnascimento) {
			    var contato = { id: idContato++, nome: pnome, nascimento: pnascimento};
			    return contato;
			}
			var armazenarContato = function(contato,contatos) {
    			contatos[contatos.length] = contato;
			}
			var pesquisarContatoPeloId = function(id, contatos) {
				// Percorrer todos os contatos
				for(var i=0;i<contatos.length;i++) {
					// Se for o contato esperado, retorne este contato!
					if(contatos[i].id===id) {
						return contatos[i];
					}
				}
			}
			var excluirContatoPeloId = function(id, contatos) {
				// Percorrer todos os contatos
				for(var i=0;i<contatos.length;i++) {
					// Se for o contato esperado, elimine o contato!
					if(contatos[i].id===id) {
						contatos.splice(i,1);
					}
				}
			} 

			var incluirNovoContato = function () {
				var nome = document.getElementById("nome").value;
				var nascimento = document.getElementById("nasc").value;
				var contato = criarContato(nome, nascimento);
				armazenarContato(contato, contatos);
				listarContatosHTML();
			}
			document.getElementById("btConfirmar").onclick = incluirNovoContato;

            var listarContatosHTML = function(){
                var txtTab = "<ul>";
                for (var i = 0; i < contatos.length; i++) {
                    s = contatos[i];
					var botExclui = "<input type='button' onclick='excluir(" + s.id;
					botExclui     = botExclui + ")' value='excluir'>";
                    txtTab = txtTab + "<li>" + botExclui + s.nome + "</li>";
                }
                txtTab = txtTab + "</ul>";
				document.getElementById("listaContatos").innerHTML = txtTab;
            }

			var excluir = function(id) {
				if(confirm("Voce tem certeza?")===true) {
					excluirContatoPeloId(id,contatos);
				}
				listarContatosHTML();
			}

			listarContatosHTML();
			// Código de Teste!
			/*
			arm = criarContato("Armando", "23/4");
			jam = criarContato("Jamanta", "22/5");
			cla = criarContato("Claudio", "23/6");

			armazenarContato(arm, contatos);
			armazenarContato(jam, contatos);
			armazenarContato(cla, contatos);
			*/

		/*
		 var txtTab = "<ul>";
for(var i=0;i<contatos.length;i++) {
    s  = contatos[i];
    txtTab = txtTab + s.nome;
}
txtTab = txtTab + "</ul>";
		 */
		</script>
	</body>
</html>

Na aula passada, nós tivemos nosso primeiro contato com a linguagem JavaScript.
Hoje, desenvolveremos um exemplo prático de um aplicativo nesta linguagem.
Faremos o protótipo de uma agenda de contatos. A implementação desta agenda será útil para ilustrar como é a prática de trabalho com JavaScript, como depuramos nosso código e, principalmente, como representamos objetos e vetores.

Esta aula não possui material relacionado, retorne ao material da aula anterior para dúvidas.

Retorne à aula anterior para dúvidas referentes à sintaxe básica da linguagem.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
	</head>
	<body>
		<form action="">
			<label for="nome">Nome:</label>
			<input type="text" id="nome" name="nome"><br>
			<label for="nascimento">Data nascimento:</label>
			<input type="text" id="nasc" name="nasc"><br>
			<input type="button" id="btConfirmar" value="Novo">
			<div id="listaContatos"></div>
		</form>
		<script type="text/javascript">

			var idContato = 1;
			var contatos  = [];
			var criarContato = function(pnome, pnascimento) {
			    var contato = { id: idContato++, nome: pnome, nascimento: pnascimento};
			    return contato;
			}
			var armazenarContato = function(contato,contatos) {
    			contatos[contatos.length] = contato;
			}
			var pesquisarContatoPeloId = function(id, contatos) {
				// Percorrer todos os contatos
				for(var i=0;i<contatos.length;i++) {
					// Se for o contato esperado, retorne este contato!
					if(contatos[i].id===id) {
						return contatos[i];
					}
				}
			}
			var excluirContatoPeloId = function(id, contatos) {
				// Percorrer todos os contatos
				for(var i=0;i<contatos.length;i++) {
					// Se for o contato esperado, elimine o contato!
					if(contatos[i].id===id) {
						contatos.splice(i,1);
					}
				}
			} 

			var incluirNovoContato = function () {
				var nome = document.getElementById("nome").value;
				var nascimento = document.getElementById("nasc").value;
				var contato = criarContato(nome, nascimento);
				armazenarContato(contato, contatos);
			}
			document.getElementById("btConfirmar").onclick = incluirNovoContato;

			// Código de Teste!
			/*
			arm = criarContato("Armando", "23/4");
			jam = criarContato("Jamanta", "22/5");
			cla = criarContato("Claudio", "23/6");

			armazenarContato(arm, contatos);
			armazenarContato(jam, contatos);
			armazenarContato(cla, contatos);
			*/

		</script>
	</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>Untitled Document</title>
		<style type="text/css">
			#resultado { font-size: xx-large; color: red;}
		</style>
	</head>
	<body>
		<form action="">
			<label for="nome">Nome: </label>
			<input type="text" name="nome" id="nome"><br>
			<label for="peso">Peso:</label>
			<input type="text" name="peso" id="peso"><br>
			<label for="altura">Altura:</label>
			<input type="text" name="altura" id="altura"><br>
			<input type="button" value="Calcular IMC"
			id="btIMC" name="btIMC">
		</form>
		<div id="resultado"></div>
		<script type="text/javascript">
			var calcularIMC = function () {
				var nome, peso, altura, imc;
				nome = document.getElementById("nome").value;
				peso = document.getElementById("peso").value;
				altura = document.getElementById("altura").value;
				imc = peso / (altura * altura);
				//alert(nome + " seu imc eh:" + imc);
				document.getElementById("resultado").innerHTML =
							nome + " seu imc eh:" + imc;
			};
			document.getElementById("btIMC").onclick = calcularIMC;

		</script>
	</body>

Resumo referente à aula:
http://www.brunocampagnolo.com/2009_2/js/intro/

Pasta de entrega do trabalho F08 foi criada no Eureka, módulo Plano de Trabalho.

Olá, Pessoal,

Segue abaixo a divisão dos temas para o Trabalho F08 (Turma V, Turma U1 e Turma U2):

http://spreadsheets.google.com/ccc?key=tW2i7qmYx0-z1LLuZEshw6g