Laboratório de Informática 1 e 2 (2009) » JavaScript http://www.brunocampagnolo.com/2009li PUCPR > Bacharelado em Sistemas de Informação > 1o e 2o Períodos Fri, 18 Dec 2009 10:28:56 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Bibliotecas JavaScript http://www.brunocampagnolo.com/2009li/2009/11/17/bibliotecas-javascript/ http://www.brunocampagnolo.com/2009li/2009/11/17/bibliotecas-javascript/#comments Tue, 17 Nov 2009 21:03:02 +0000 admin http://www.brunocampagnolo.com/2009li/?p=653 Pessoal,

Chegamos a nosso último tópico!

Segue, abaixo e no link.

]]> http://www.brunocampagnolo.com/2009li/2009/11/17/bibliotecas-javascript/feed/ 0 Exercício O06 – Apenas Turma U – Competição JavaScript http://www.brunocampagnolo.com/2009li/2009/09/09/exercicio-o06-apenas-turma-u-competicao-javascript/ http://www.brunocampagnolo.com/2009li/2009/09/09/exercicio-o06-apenas-turma-u-competicao-javascript/#comments Thu, 10 Sep 2009 00:00:30 +0000 admin http://www.brunocampagnolo.com/2009li/?p=515 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:

]]> http://www.brunocampagnolo.com/2009li/2009/09/09/exercicio-o06-apenas-turma-u-competicao-javascript/feed/ 0 Agenda com excluir http://www.brunocampagnolo.com/2009li/2009/09/01/agenda-com-excluir/ http://www.brunocampagnolo.com/2009li/2009/09/01/agenda-com-excluir/#comments Tue, 01 Sep 2009 23:25:36 +0000 admin http://www.brunocampagnolo.com/2009li/?p=510 <!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> ]]> http://www.brunocampagnolo.com/2009li/2009/09/01/agenda-com-excluir/feed/ 0 Exercício F09 – Agenda em JavaScript http://www.brunocampagnolo.com/2009li/2009/08/25/exercicio-f09-agenda-em-javascript/ http://www.brunocampagnolo.com/2009li/2009/08/25/exercicio-f09-agenda-em-javascript/#comments Tue, 25 Aug 2009 23:30:49 +0000 admin http://www.brunocampagnolo.com/2009li/?p=501

]]> http://www.brunocampagnolo.com/2009li/2009/08/25/exercicio-f09-agenda-em-javascript/feed/ 0 Aula 14 – JavaScript na prática – Cadastro de Contatos em JavaScript http://www.brunocampagnolo.com/2009li/2009/08/25/aula-14-javascript-na-pratica-cadastro-de-contatos-em-javascript/ http://www.brunocampagnolo.com/2009li/2009/08/25/aula-14-javascript-na-pratica-cadastro-de-contatos-em-javascript/#comments Tue, 25 Aug 2009 17:49:17 +0000 admin http://www.brunocampagnolo.com/2009li/?p=497 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>
]]> http://www.brunocampagnolo.com/2009li/2009/08/25/aula-14-javascript-na-pratica-cadastro-de-contatos-em-javascript/feed/ 0 Código da aula de 18/08/2009 http://www.brunocampagnolo.com/2009li/2009/08/18/codigo-da-aula-de-18082009/ http://www.brunocampagnolo.com/2009li/2009/08/18/codigo-da-aula-de-18082009/#comments Tue, 18 Aug 2009 23:37:43 +0000 admin http://www.brunocampagnolo.com/2009li/?p=494 <!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> ]]> http://www.brunocampagnolo.com/2009li/2009/08/18/codigo-da-aula-de-18082009/feed/ 0 Aula 13 – Introdução ao JavaScript http://www.brunocampagnolo.com/2009li/2009/08/18/aula-13-introducao-ao-javascript/ http://www.brunocampagnolo.com/2009li/2009/08/18/aula-13-introducao-ao-javascript/#comments Tue, 18 Aug 2009 18:06:55 +0000 admin http://www.brunocampagnolo.com/2009li/?p=491 Resumo referente à aula:
http://www.brunocampagnolo.com/2009_2/js/intro/

]]> http://www.brunocampagnolo.com/2009li/2009/08/18/aula-13-introducao-ao-javascript/feed/ 0 Off topic: Slideshow em JavaScript http://www.brunocampagnolo.com/2009li/2009/06/10/off-topic-slideshow-em-javascript/ http://www.brunocampagnolo.com/2009li/2009/06/10/off-topic-slideshow-em-javascript/#comments Thu, 11 Jun 2009 01:06:04 +0000 admin http://www.brunocampagnolo.com/2009li/?p=432 Pedido por alguns alunos no fim da aula de 10/6:
http://www.electricprism.com/aeron/slideshow/

]]> http://www.brunocampagnolo.com/2009li/2009/06/10/off-topic-slideshow-em-javascript/feed/ 0 Divulgação: Chrome Experiments http://www.brunocampagnolo.com/2009li/2009/03/25/divulgacao-chrome-experiments/ http://www.brunocampagnolo.com/2009li/2009/03/25/divulgacao-chrome-experiments/#comments Wed, 25 Mar 2009 14:24:46 +0000 admin http://www.brunocampagnolo.com/2009li/?p=160 Nesta semana, além do lançamento da versão final do Internet Explorer 8 pela Microsoft também acontece o lançamento do site Chrome Experiments pelo Google.

Este portal organiza um conjunto de experiências interativas, jogos e mini-aplicativos com o objetivo de mostrar o poder do navegador Google Chrome em relação ao desenvolvimento de programas na linguagem JavaScript que executem no navegador Web. Embora o portal seja patrocinado pelo Google e as experiências tenham um melhor aproveitamento apenas no Chrome, chama a atenção a possibilidade de explorar o JavaScript em aplicações gráficas cada vez mais poderosas. E, tão importante do que a demonstração técnica é o fato que estas aplicações são 100% JavaScript, ou seja, não dependem de nenhum plugin proprietário como Flash ou Java. Para que no futuro a Web continue aberta, sem dependência de nenhuma empresa e, ao mesmo tempo, a inovação continue a acontecer, o investimento neste tipo de aplicação deve ser estimulado.

É claro, a dependência do Google enquanto proprietário de um browser e, ao mesmo tempo, buscador web deve ser vista com reservas. O importante é que outros browsers também podem  ter implementações de experiências semelhantes sem precisar da empresa ou de algum de seus plugins. Essa independência se deve ao fato que do lado tecnológico, o que possibilita o funcionamento da maior parte dos códigos no Chrome Experiments são elementos que estão sendo discutidos para a inserção nas especificações HTML5/ CSS3 como a tag <canvas> e as transformações CSS. A tag <canvas>, por exemplo, já é presente nativamente na maior parte dos navegadores atuais (menos o IE…). Porém, mesmo no IE ela pode ser emulada facilmente.

Para quem não tem acesso ao Chrome, o vídeo abaixo mostra alguns exemplos. Um dos experimentos que mais me cativou foi o Twitch. Desenvolvido por um dos criadores da linguagem Processing (C. E, B. Reas), usando o port da linguagem para JavaScript (Processing.js),  é um conjunto de one-button games (jogos  cuja interação usa apenas um botão) que se conectam sequencialmente através das janelas do navegador. No Chrome, cada janela é um processo em separado.  Assim, cada minigame é executado com uma taxa de atualização (frame rate) constante.

O portal é aberto a contribuições de programadores e designers que tenham interesse em mostrar seus projetos em JavaScript.

]]> http://www.brunocampagnolo.com/2009li/2009/03/25/divulgacao-chrome-experiments/feed/ 0 Exercício O03 – JavaScript http://www.brunocampagnolo.com/2009li/2009/03/10/exercicio-o03-javascript/ http://www.brunocampagnolo.com/2009li/2009/03/10/exercicio-o03-javascript/#comments Tue, 10 Mar 2009 23:03:30 +0000 admin http://www.brunocampagnolo.com/2009li/?p=47