Notas do Exame Final serão lançadas até amanhã (15/12), às 17:00h!
Veja resultados no site da disciplina a partir deste horário.
Estarei na PUCPR, no LAB 9 DO CCET, das 17:40h até às 22:00h para verificação de qualquer problema.
Exercício F09 – Bibliotecas JavaScript
Neste exercício, você vai desenvolver, de maneira colaborativa, exemplos e documentação referente às bibliotecas JavaScript.
1) Escolha uma 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:
É essencial que cada aluno use uma biblioteca diferente.
Selecione sua biblioteca no link abaixo:
https://spreadsheets.google.com/viewform?formkey=dG80dEpLaHN4anE0eTdpQXRNQTNURHc6MQ
2) Para sua 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 24/11.
ENTREGA VIA EUREKA, EM PASTA CRIADA NO MÓDULO CONTEÚDO E VIA CORREIO ATÉ O DIA 23/11.
Deixe seu exemplo público, para que seus colegas também possam vê-lo!
Bibliotecas JavaScript – Aula 25 e 26 – 20/10/2010 e 27/10/2010
Neste assunto, iniciamos o fechamento de JavaScript.
Segue no link.
Na aula, criaremos dois exemplos usando as bibliotecas:
Atividade de revisão / recuperação – Prova do 3o Bimestre
1) Faça o download do gerador de provas;
2) Use os códigos descritos a seguir:
- Jean Marcel – kc
- Vandrius – xk
- Jorge – lr
- Leandro – yy
- Mauri – nh
- Felipe – bo
- Alan – ov
- Marcelo – ce
- Rodolfo – pl
- Tatiane – ds
- Jonas – ds
- Weine – qb
- Talles – ei
- José – rp
- Glacielle – fx
- Robson – sf
- Renato – sf
- Ruhan – gm
- Rhelberth – tu
- Adnélli – hc
- Jean – uj
- Carlos – ir
- Jéssica – so
- Alan – gv
- Rafael – td
- Hamilton – hl
- Diógenes – us
- Michel – ia
- Kevin – vi
- Jefferson – jp
- André – xw
- Gustavo – lf
- Vinícius – ym
- Pedro – bq
- Adriano – oy
- Antoine – cg
- Allan – pn
- Cicero – dv
- Edgar – qd
- Eduardo – ek
- Tais – ek
- Heidji – rs
- Danilo – fa
- Thyago – sh
- Guilherme – hp
- Felipe – hp
- Bruno – uw
- Filipe – ie
3) Resolva este novo modelo de prova.
4) Entregue via Eureka no local indicado.
Ordem e Procedimento para as defesas do F07 e F08
1) Entregar no local indicado no Eureka (Plano de Trabalho);
2) Cada um receberá um exercício diferente em sua defesa. Preste bastante atenção ao que é pedido.
3) Ordem das defesas:
Turma U1 – 19:10h – 19:30h – Talles, Diogenes, Jean, Rodolfo, Adnelli, Alan, Yuri
Turma U1 – 19:30h – 19:50h – Michel, Renato, José, Leandro, Tatiane, Glaciele, Carlos.
Turma U1 – 19:50h – 20:10h - Tiago B., Jorge, Jéssica, Vandrius, Mauri, Jonas, João
Turma U1 – 20:10h – 20:30h – Demais alunos da primeira turma não listados acima
Turma U2 – 20:50h – 21:10h – Mauro, Danilo, Guilherme, Alan, Jefferson, Felipe, Cicero
Turma U2 – 21:10h-21:30h – Jéssica, Alan, Kevin, Pedro, Edgar, Henry, Vinícius
Turma U2 – 21:30h-21:50h – André, Bruno, Antoine, Rafael P., Gustavo, Alexandro, Eduardo.
Turma U2 – 21:50h-22:10h – Demais alunos da primeira turma não listados acima.
Relembrando validações de formulário – Aula 21 – 01/09/2010
Exemplo 1:
<!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">
.oculto { display: none; }
</style>
</head>
<body>
<form action="">
<label for="obrigatorio">Obrigatorio:</label>
<input type="text" id="obrigatorio">
<span id="avisoobr">*</span><br>
<label for="numero">Numero:</label>
<input type="text" id="numero">
<span id="avisonum">*</span><br>
<input type="button" id="validar" value="Validar">
</form>
<script type="text/javascript">
var validar = function() {
var obr = document.getElementById("obrigatorio").value;
if(obr==="") {
document.getElementById("avisoobr").className="";
} else {
document.getElementById("avisoobr").className="oculto";
}
}
document.getElementById("validar").onclick = validar;
</script>
</body>
</html>
Exemplo 2:
<!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="">
<input type="checkbox" id="check">
<input type="button" id="validar" value="Validar">
</form>
<script type="text/javascript">
var validar= function () {
alert(document.getElementById("check").checked)
}
document.getElementById("validar").onclick=validar;
</script>
</body>
</html>
Exercício F08 – Cadastro
Crie um cadastro em JavaScript seguindo o modelo trabalhado nas últimas aulas.
Seu cadastro deverá ter, pelo menos, 10 campos diferentes. Você deve utilizar pelo menos 6 tipos de dados diferentes: STRING, NÚMERO INTEIRO, NÚMERO COM PONTO FLUTUANTE, DATA, BOOLEANO E LISTA DE VALORES.
Seu cadastro deverá ter as seguintes funcionalidades:
- Listagem de todos os registros em formato tabelado;
- Cadastro de novo registro;
- Exclusão, com confirmação;
- Edição de todos os campos;
- Pesquisa a partir do valor de um dos campos.
Requisitos importantes:
- Formatação dos itens de formulário, fontes e fundos usando CSS. A lista dos registros também deve estar bem formatada;
- Validações de dados simples.
Dicas de funções em JavaScript que podem ser usadas para validação:
Extra: mais material sobre validação de formulários em JavaScript;
Agenda de Contatos em JS (Excluir e Editar) – Aula 20 – 25/8/2010
Na segunda aula referente à agenda, geramos as funcionalidades de exclusão e edição.
Segue abaixo.
<!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"/><br/>
<label for="data">Data:</label>
<input type="text" id="data"/><br/>
<input type="button" value="Cadastrar" id="cadastrar"/>
</form>
<ul id="lista"></ul>
<script type="text/javascript">
var contatos = [{nome:'Jamanta',data:'24/2'},
{nome:'Tonho', data:'23/4'}];
var listarContatos = function() {
document.getElementById("lista").innerHTML="";
for(var i=0;i<contatos.length;i++) {
var li=document.createElement("li");
li.innerHTML=contatos[i].nome;
var inp=document.createElement("input");
inp.setAttribute("type","button");
inp.setAttribute("value","Excluir");
// A funcão excluir GERA uma nova
// função a cada chamada.
inp.onclick = excluir(i);
li.appendChild(inp);
var edi=document.createElement("input");
edi.setAttribute("type","button");
edi.setAttribute("value","Editar");
edi.onclick = editar(i);
li.appendChild(edi);
var lista = document.getElementById("lista");
lista.appendChild(li);
}
}
var editar = function(id) {
return function() {
var nome=document.getElementById("nome");
nome.value = contatos[id].nome;
var btCad = document.getElementById("cadastrar");
btCad.value="Confirmar";
// Função anônima
btCad.onclick = function () {
contatos[id].nome = nome.value;
btCad.onclick = novoContato;
btCad.value = "Cadastrar";
listarContatos();
}
}
}
var excluir = function(id) {
return function () {
// O 'splice' elimina o elemento na posição id
contatos.splice(id,1);
listarContatos();
}
}
listarContatos();
var novoContato = function() {
var pNome = document.getElementById("nome").value;
var pData = document.getElementById("data").value;
contatos[contatos.length]={nome:pNome,data:pData};
listarContatos();
}
document.getElementById("cadastrar").onclick = novoContato;
</script>
</body>
</html>
Agenda de Contatos em JS – Aula 19 – 18/08/2010
Nosso objetivo hoje foi iniciar o desenvolvimento de uma agenda de contatos em JavaScript.
Neste exemplo prático, desenvolvemos um exemplo prático de um aplicativo nesta linguagem. A implementação desta agenda será útil para ilustrar como é a prática de trabalha com JavaScript, como devemos depurar 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.
Continuaremos esta agenda na próxima aula.
Em anexo e abaixo.
<!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"><br>
<label for="data">Data:</label><input type="text" id="data"><br>
<input type="button" value="Cadastrar" id="cadastrar">
</form>
<ul id="lista"></ul>
<script type="text/javascript">
var contatos=[{nome:'Jamanta',data:'24/2/80'},
{nome:'Tonho',data:'23/5/79'}];
var novoContato = function() {
var tNome = document.getElementById("nome").value;
contatos[contatos.length]={nome:tNome,data:'21/4'};
listarContatos();
}
document.getElementById("cadastrar").onclick=novoContato;
var listarContatos = function() {
// Limpa o código HTML de dentro da lista
document.getElementById("lista").innerHTML="";
for(var i=0;i<contatos.length;i++) {
//alert(contatos[i].nome);
//console.log(contatos[i]);
// Cria um elemento VAZIO na memória (<li></li>)
var item = document.createElement("li");
// Coloco o valor do nome dentro deste elemento
// <li>Jamanta</li>
item.innerHTML = contatos[i].nome;
// Obtenho a referência para a lista
var lista = document.getElementById("lista");
// Coloco o item dentro da lista
// <ul id='lista'><li>Jamanta</li></ul>
lista.appendChild(item);
}
}
listarContatos();
</script>
</body>
</html>
Exercício F07 – Vetores em JavaScript
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).
Arrays em JavaScript – Aula 17 – 04/08/2010
Segue, material sobre arrays em JavaScript.
Bem-vindo de volta – Aula 16
Neste semestre vamos trabalhar com tópicos avançados de CSS com a linguagem JavaScript. Agora, os materiais de turma estarão organizados neste espaço (Turma U).
Notas até a segunda parcial
Pessoal,
Notas lançadas no iger.
Detalhamento em:
http://www.brunocampagnolo.com/2010liu/notas
Verificação e correções serão feitas após as férias.
Entrega da Prova 2
Entregue abaixo e também via Correio do Eureka!!!
Fontes e Textos em CSS – Aula 13 – 16/06/2010
Nas últimas aulas trabalhamos com os seletores do CSS 1.0, CSS 2.1 e CSS 3.0.
Hoje, começaremos a aplicar, na prática, os seletores aprendidos com as diferentes propriedades do CSS.
Continuar lendo ‘Fontes e Textos em CSS – Aula 13 – 16/06/2010’ »
Entrega do F05
Cole apenas o resultado de seu código CSS.
Ou seja, não envie as tags <style>e </style>, apenas o conteúdo entre elas!
Seletores do CSS 3.0 – Aula 12 – 09/06/2010
Vamos trabalhar hoje com os seletores do CSS 3.0. O suporte a tais seletores ainda não é completo em todos os navegadores. Veja a tabela de compatibilidade no link.
Exercício F06 – Seletores do CSS 3.0
Neste exercício, vamos de maneira colaborativa, criar um conjunto de exemplos para cada um dos seletores do CSS 3.0 e alguns dos seletores do CSS 2.1. Esta atividade será realizada em sala.
Seletores do CSS 2.1 – Aula 11 – 02/06/2010
Após a exposição acerca dos seletores do CSS 1.0 na aula passada, nosso objetivo hoje é continuar o trabalho com linguagem de seletores. Desta vez, os seletores que trabalharemos serão os seletores do CSS 2.1.
Continuar lendo ‘Seletores do CSS 2.1 – Aula 11 – 02/06/2010’ »
Exercício F05 – Seletores do CSS 2.1
O objetivo deste exercício é o treino dos seletores que você aprendeu na aula de hoje. Para responder estes exercícios é essencia a leitura e análise da apresentação relacionada à aula!
Exercício O04 – Seletores do CSS 1.0
Abaixo, os exercícios relacionados à aula sobre seletores do CSS 1.0.
Seletores do CSS 1.0 – Aula 10 – 26/05/2010
Agora, faremos uma parada em nosso trabalho com o HTML. Voltaremos, futuramente, a discutir algumas tags, mas as principais foram trabalhadas nas últimas aulas.
Na aula de hoje, começaremos nosso trabalho com a linguagem CSS. Um dos componentes principais desta linguagem e que permite sua ligação com os elementos de uma página HTML é a linguagem de seletores.
Nosso objetivo será conhecer esta linguagem de seletores nesta e nas próximas aulas.
Destaca-se que a linguagem de seletores não está integrada apenas com o CSS. Há bibliotecas que permitem o seu uso dentro da linguagem de programação JavaScript.
Exemplos relacionados à aula (download de todos):
- Seletor de elemento (nome do elemento);
- Seletor de classe ( caractere .);
- Seletor de id (caractere #);
- Agrupamento de seletores usando vírgulas;
- Seletor contextual (espaço);
- Pseudo-classe âncora (:link);
- Pseudo-classe âncora (:visited);
- Pseudo-elemento letra inicial (:first-letter);
- Pseudo-elemento primeira linha (first-line);
- Exemplo de hábito ruim na criação de classes (“classititis”);
Também comentarei sobre como podemos usar seletores em JavaScript. No exemplo a seguir, usamos a biblioteca jQuery para realizar alterações em mais de um elemento JavaScript com uma só instrução. Para que não seja necessária a instalação da biblioteca jQuery usamos o CDN (Content Delivery Network) do Google. Assim, a hospedagem do arquivo JavaScript é realizada nos servidores do Google:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"> </script>
Faça também o download da apresentação associada à aula.
Entrega do Exercício F04 – Forms
Formulário de entrega abaixo.
Entrega do exercício F03 – Tabelas
Entregue abaixo o exercício F03.
Entregue até o dia 25/5. 26/5, antes da aula.
Exercício F04 – Formulários
Neste exercício você deverá gerar uma interface para um formulário. O objetivo é que você conheça os principais componentes de formulário.
Entrega até 1/junho.
Formulários em HTML – Aula 08 e 09 – 12/05/2010 e 19/05/2010
A aula de hoje vai lidar com um dos assuntos mais importantes para o desenvolvedor de Sistemas de Informação: a criação de formulários. Ou seja, hoje veremos como realizar entrada de dados às nossas páginas na web.
Continuar lendo ‘Formulários em HTML – Aula 08 e 09 – 12/05/2010 e 19/05/2010’ »
Formulário da aula de 19/5
Gerado na aula de 19/5.
Código gerado na aula de 12/05/2010
Segue, abaixo.
Continuar lendo ‘Código gerado na aula de 12/05/2010’ »
Exercício F03 – Tabelas
Na resolução destes exercícios procure usar os atributos aprendidos em relação a tabelas como scope, rowspan e colspan.
Além disso, saiba usar corretamente as tags tr, th, td, etc.
Formate também sua tabela via CSS.
Entrega da Prova
Entregue abaixo, sua prova.
Prova 01 – Turma U – Aula 07 – 04/05/2010
Segue, abaixo, a prova do 1o bimestre.
Continuar lendo ‘Prova 01 – Turma U – Aula 07 – 04/05/2010’ »
Exemplo JavaScript (jogo da velha)
Pode ajudar àqueles que não concluiram o jogo da velha ainda.
Tabelas em HTML – Aula 06 – 28/04/2010
Tabelas são essenciais para visualização de elementos em formato tabelado: linhas e células.
Entrega do Exercício F02 – Listas e Links
Responda a seguir.
Continuar lendo ‘Entrega do Exercício F02 – Listas e Links’ »
Entrega do exercício F01 – Imagens
Segue o formulário de entrega.
Exemplos da Turma U1 – Aula 04 – 07/04/2010
Exemplos da turma U1 (depois do intervalo).
Continuar lendo ‘Exemplos da Turma U1 – Aula 04 – 07/04/2010’ »
Exercício F01 – Imagens
Abaixo, nosso primeiro exercício do grupo F, ou seja, exercícios que com certeza, serão contabilizados em sua nota do bimestre.
Prazo máximo de entrega: 21/04/2010
Exemplos da aula 04 – Imagens – U2 – Aula 04 – 07/04/2010
Exemplos da turma U2.
Continuar lendo ‘Exemplos da aula 04 – Imagens – U2 – Aula 04 – 07/04/2010’ »
Imagens em HTML – Aula 04 – 07/04/2010
Na aula de hoje vamos começar, efetivamente a usar a linguagem HTML.
Nosso primeiro objetivo será trabalhar com imagens.
Existem 3 tipos principais de imagens que podem ser inseridas em uma página web:
- Imagens de conteúdo são úteis para definir imagens que fazem sentido em relação ao assunto da página. São definidas através da tag img.
- Imagens de fundo fazem parte do layout da página e estão associadas à propriedade background-image do CSS;
- Favicons são os ícones de favoritos exibidos em uma página;
Introdução à Linguagem JavaScript – Aula 03 – 24/3/2010
Após conhecermos as linguagens HTML e CSS nas aulas anteriores, vamos conhecer a linguagem JavaScript na aula de hoje. Através da tag <script> executaremos código JavaScript em nossas páginas.
Continuar lendo ‘Introdução à Linguagem JavaScript – Aula 03 – 24/3/2010’ »
Exercício O03 – JavaScript
Neste exercício você terá o primeiro contato com a linguagem JavaScript.
Exercício O03 – JavaScript – Gerador de Enunciados
Após clicar no elemento p4, alterar a classe (atributo class) do elemento cujo id é title2 para a classe a
Introdução à Linguagem CSS – Aula 02 – 17/03/2010
Na aula de hoje vamos conhecer a linguagem CSS.
Tal linguagem nos será útil para alterações no layout e formatação de nossas páginas Web.
Segue a apresentação de suporte à aula.
Continuar lendo ‘Introdução à Linguagem CSS – Aula 02 – 17/03/2010’ »
Exercício O02 – CSS
O objetivo deste exercício é que você comece a se familiarizar com as ferramentas e linguagens que vamos trabalhar durante o ano, e saiba reconhecer fragmentos de código CSS.
Este é um exercício opcional, mas altamente recomendável, pois pode ser usado em prova ou no desenvolvimento de outros.
