5. Programação JavaScript

Tamanho: px
Começar a partir da página:

Download "5. Programação JavaScript"

Transcrição

1 5. Programação JavaScript O objeto document! O objeto document representa o documento HMTL carregado no navegador. É o objeto mais importante da programação JavaScript, pois é a partir desse objeto que o script tem acesso aos elementos da página. Assim como visto para o objeto window, os elementos de uma página podem ser referenciados por um vetor específico. Dentre esses elementos, os mais importantes são: " document.applets: vetor de todos os applets de um documento; " document.forms: vetor de todos os formulários de um documento; " document.images: vetor de todas as imagens contidas em um documento; " document.links: vetor de todos as âncoras contidas em um documento.! Assim como para o objeto window, a posição de um elemento em seu respectivo vetor depende de sua posição no documento. Cada elemento pode também ser acessado por seu nome, designado pelo atributo NAME.! Exemplo: No documento a seguir, a primeira imagem pode ser referenciada como document.images[0] ou como document.sol. Da mesma forma, o formulário pode ser referenciado por document.forms[0] ou por document.clima. Porém, a segunda imagem pode apenas ser referenciada por document.images[1], uma vez que não foi designado um nome para esta imagem. ELFS,

2 <html> <head> <title>elementos de um Documento</title> </head> <body> <img src="sol.jpg" name="sol"> <form name="clima"> <input type="button" value="clima"> </form> <img src="chuva.jpg"> </body> </html> aula05_01.htm! Através do objeto document, é possível também ter acesso às propriedades de uma página, tais como: " document.bgcolor: retorna e permite modificar a cor de fundo do documento atual; " document.linkcolor: retorna a cor definida para os links; " document.vlinkcolor: retorna a cor definida para os links que já foram visitados; " document.title: retorna o título do documento atual; " document.url: retorna o endereço completo do documento atual. ELFS,

3 ! Exercício: Verificar a possibilidade de alteração nas propriedades do objeto document considerando o seguinte código: <html> <head> <title>testando as propriedades do objeto document</title> </head> <body> <script type="text/javascript"> function muda_tudo() document.bgcolor = "yellow"; document.title = "Mudou tudo"; document.linkcolor = "#FF00FF" document.vlinkcolor = "green"; </script> <a href="javascript:void(0)">apenas um link</a> <p> <a href="javascript:void(0)" onclick="muda_tudo()"> Clique aqui para alterar as propriedades do documento</a> </body> </html> aula05_02.htm! Note javascript:void(0) usado como valor de href. Este comando deve ser utilizado quando se deseja que uma âncora não tenha efeito algum. ELFS,

4 " document.open(): função que abre o documento para escrita (stream). O processo é análogo ao processo de carregamento de um documento HTML na Internet: o navegador se conecta ao servidor, e este abre um stream, escreve os dados contidos no documento requisitado e fecha o stream. Deve ser utilizado com as funções write e close. " document.close(): função que fecha o stream aberto pela função open. " document.write(string): escreve o valor do parâmetro (um string) dentro de um novo documento, cujo stream foi previamente aberto. Exemplo: <html> <head> <title>testando document.write</title> </head> <frameset rows = "50%,*"> <frame name="sup" src="aula05_03a.htm"> <frame name="inf" src="aula05_03b.htm"> </frameset> </html> aula05_03.htm! Neste exemplo, o documento carregado no frame inf será substituído por outro documento aberto pelo método open(). ELFS,

5 <html> <head><title>teste</title> <script type="text/javascript"> function modifica() parent.inf.document.open(); parent.inf.document.write("modificamos o documento!"); parent.inf.document.close(); </script> </head> <body> <a href ="javascript:void(0)" onclick = "modifica();"> Clique aqui para modificar o frame de baixo</a> </body> </html> aula05_03a.htm Note que parent refere-se à janela do frameset (aula05_03.htm), que contém os frames sup (este documento) e inf (o documento de baixo). aula05_03b.htm <html> <head> <title>teste</title> Note que a substituição do conteúdo deste frame (pelo texto </head> passado pela função write) é feita apenas dentro do navegador, <body> ou seja, o arquivo aula05_03b.htm não será modificado. Este é apenas um frame<br> contendo, originalmente, essas duas linhas. </body> </html> ELFS,

6 Tratamento de Eventos em JavaScript! A linguagem JavaScript dispõe de recursos para o tratamento de eventos específicos para o ambiente da Internet. Em alguns exercícios anteriores foram utilizados tratamentos de eventos, como o onclick, por exemplo. O tratamento de eventos deve ser inserido em tags, uma vez que os eventos ocorrem sobre objetos, tais como imagens, formulários, links, etc. A sintaxe básica para o tratamento de um evento é: <tag evento="ação">, onde ação deve corresponder a instruções (ou chamadas a funções) JavaScript. Cada objeto possui seu próprio conjunto de eventos para o qual o objeto responde. Os principais eventos que podem ser incluídos em um programa JavaScript são descritos a seguir.! Eventos relacionados ao navegador e ao documento " onload: Deve ser inserido dentro das tags <body> e <frameset> e é acionado quando a página é carregada. " onunload: Idêntico ao anterior, porém executado quando o documento sai do navegador (no caso da página ser mudada ou a janela fechada). <HTML> <HEAD> <TITLE>Teste</TITLE> <SCRIPT language="javascript"> aula05_04.htm ELFS,

7 function pergunta() nome = prompt("qual é seu nome?",""); document.open(); document.write("oi "+nome+"!<br>"); document.write("você acaba de carregar este documento."); document.close(); function despedida() alert("espero que tenha gostado do site. Até breve!"); </SCRIPT> </HEAD> <BODY onload="pergunta()" onunload="despedida()"> Veja que site interessante.<br> Ou não é? </BODY> </HMTL>! Eventos relacionados ao mouse Todos os eventos a seguir podem ser tratados por uma imagem ou por uma âncora e, portanto, devem ser colocados dentro dos respectivos tags. " onmouseover: evento acionado quando o apontador do mouse passa sobre um link ou sobre uma imagem. ELFS,

8 " onmouseout: evento acionado quando o apontador do mouse sai de cima de um link ou de uma imagem. " onclick : evento acionado quando ocorre um clique do mouse, podendo ser tratado por botões, caixas de seleção, botões de rádio, caixas e áreas de texto, etc. É muito útil para criar pseudo-links, que substituem ou melhoram o tag <a href...>. Por exemplo, o código a seguir gera um falso link que aciona uma caixa de alerta. <HTML> <HEAD><TITLE>Teste</TITLE></HEAD> <BODY> <A HREF="javascript:void(0)" onclick="window.alert('este link é falso!')"> Clique aqui</a> </BODY> </HMTL> aula05_05.htm! Exercício: Considere a seguinte função: aula05_06.htm function carrega_imagens() imagem1 = new Image(); imagem2 = new Image(); imagem1.src = "imagem1.gif"; imagem2.src = "imagem2.gif"; ELFS,

9 Criar um script contendo, além da funcão carrega_imagens(), duas outras funções: troca_imagem() e muda_pagina(). O script deve alternar entre uma imagem e outra à medida que o mouse está sobre ela ou não está sobre ela. Um clique sobre a imagem deve carregar uma nova página. Usar a função prompt("url","") para obter a URL da nova página a ser carregada.! Eventos relacionados a um formulário Formulários são importantes no desenvolvimento de aplicações para a Internet. Os eventos a seguir que permitem tratar ações específicas sobre os elementos de um formulário: " onblur: acionado sempre que um objeto perde o foco, ou seja, quando é selecionado um outro objeto. " onfocus: acionado quando um objeto é selecionado (ganha o foco). " onchange: É acionado quando o objeto perde o foco e seu valor foi alterado. Pode ser utilizado com caixas e áreas de texto. " onreset: evento acionado sempre que o botão Reset de um formulário é clicado. Deve ser inserido dentro do tag <form>. " onsubmit: Idêntico ao anterior, porém acionado quando o botão Submit é clicado. Os elementos de um formulário são alocados dentro do vetor f.elements, onde f é o nome do formulário. A posição dos elementos dentro do vetor depende da ordem com que estes elementos aparecem no documento HTML. ELFS,

10 Exemplos: aula05_07.htm <HTML> <HEAD><TITLE>Teste</TITLE></HEAD> <BODY> <FORM> Nome:<INPUT NAME="nome" TYPE="text" SIZE="30" onfocus="window.status='digite seu nome'" onblur="window.status=''; alert('\tnote que o campo Nome perdeu o foco!\n'+ '\tvocê notou a barra de status?')"> <p>sobrenome: <INPUT NAME="snome" TYPE="text" SIZE="30" onfocus="window.status='digite seu sobrenome'" onblur="window.status=''; alert('note que o campo Sobrenome perdeu o foco!')"> </FORM></BODY></HMTL> <HTML> <HEAD><TITLE>Teste de formulário</title> <SCRIPT language="javascript"> function Confirma() return confirm("deseja mesmo apagar os dados?"); </SCRIPT> </HEAD> <BODY> aula05_08.htm ELFS,

11 <FORM NAME="form1" onreset="return(confirma())" onsubmit="alert('seus dados foram enviados!')"> Nome: <INPUT NAME="nome" TYPE="text" SIZE="30"><BR> Sobrenome: <INPUT NAME="snome" TYPE="text" SIZE="30" onchange="alert('sobrenome alterado!')"><br> Sexo: <INPUT TYPE="radio" VALUE="M" NAME="sexo" CHECKED="true">M <INPUT TYPE="radio" VALUE="F" NAME="sexo"> F<BR> <BR> <INPUT NAME="btn1" TYPE="reset" VALUE="Limpar"> <INPUT NAME="btn2" TYPE="submit" VALUE="Enviar"> </FORM> </BODY> </HTML> Outros objetos na programação JavaScript! A linguagem JavaScript pode fazer uso de vários outros objetos. Comenta-se a seguir sobre os métodos mais importantes associados aos objetos das classes String, Date e Math.! Considere a seguinte declaração de objeto: var s = new String("um_string"). Os seguintes métodos estão disponíveis para este objeto: " s.length: retorna o tamanho do string s. " s.charat(n): retorna o n-ésimo caractere do string s. ELFS,

12 " s.indexof(c,n): retorna a posição da primeira ocorrência do caractere c no string s a partir da posição n (ou a partir do início do string, caso n não seja especificado); retorna -1 caso não seja encontrada ocorrência alguma. " s.lastindexof(c,m): retorna a última ocorrência do caractere c no string s da posição m para trás (ou do final do string para trás, caso m não seja especificado); retorna -1 caso não seja encontrada ocorrência alguma. " s.substring(n,m): retorna o substring começando no caractere n e terminando no caractere m de s. " s.tolowercase(): retorna o string s com todos os caracteres alfabéticos convertidos para letras minúsculas. " s.touppercase(): retorna o string s com todos os caracteres alfabéticos convertidos para letras maiúsculas.! Objeto Date Permite ao script acessar a data local da máquina do usuário, além de dispor de métodos para manipular datas e horas com facilidade. Internamente, a data é armazenada como o número de milésimos de segundos decorridos desde 01/01/1970. Considere a seguinte declaração de objeto: d = new Date("mm/dd/aaaa"). Os seguintes métodos estarão disponíveis para este objeto: ELFS,

13 " d.getdate(): retorna o dia do mês, de 1 a 31. " d.getday(): retorna o dia da semana, de 0 a 6 (0 = domingo;...; 6 = sábado). " d.gethours(): retorna a hora atual, de 0 a 23. " d.getminute(): retorna o número atual de minutos, de 0 a 59. " d.getmonth(): retorna o número do mês atual, de 0 a 11 (0 = janeiro;...; 11 = dezembro). " d.getfullyear(): retorna o ano atual. " d.getseconds(): retorna o número atual de segundos, de 0 a 59. " d.gettime(): retorna o número de milésimos de segundo transcorridos desde 01/01/1970 às 00h00. Exercício: Criar um contador do número de dias transcorridos desde uma determinada data, conforme formulário mostrado ao lado. aula05_09.htm Para isso, basta criar dois objetos Date, um com a data especificada e um com a data atual e utilizar o método gettime, obtendo-se o número de milésimos de segundos transcorridos entre as duas datas. Para transformar esse número em dias devemos dividir por (1000*60*60*24). ELFS,

14 ! A classe Math Para utilizar os métodos desta classe não é preciso a criação de um objeto: os métodos podem ser referenciados diretamente a partir do nome da classe. " Math.E: retorna a constante de Euler e ( ). " Math.PI: retorna a constante pi ( ). " Math.abs(n): retorna o valor absoluto de n. " Math.ceil(n): retorna o teto de n (menor inteiro maior do que n). " Math.floor(n): retorna o piso de n (maior inteiro menor do que n). " Math.round(n): arredonda o valor de n para um valor inteiro. " Math.random(): gera um número pseudo-aleatório entre 0 e 1. " Math.sqrt(n): retorna a raiz quadrada de n. " Math.log(n): retorna o logaritmo natural de n. " Math.pow(n,m): retorna n elevado a m. " Math.cos(n): retorna o cosseno de n (em radianos). " Math.sin(n): retorna o seno de n (em radianos). " Math.tan(n): retorna a tangente de n (em radianos). " Math.acos(n): retorna o arcocosseno de n. " Math.asin(n): retorna o arcoseno de n. " Math.atan(n): retorna o arcotangente de n. ELFS,

15 Exercício: Utilizando o método i.tostring(b), que converte o valor de um inteiro i em um número na base b, criar um script para uma página como a mostrada abaixo, de forma que cada clique no botão "Mudar Cor" gere uma cor de fundo aleatória para a página. Lembre-se que uma cor em HTML é definida por um string formado por # e por três números hexadecimais de dois dígitos (ou seja, três números cujos valores hexadecimais vão de 00 a FF ou, equivalentemente, cujos valores decimais vão de 0 a 255). aula05_10.htm Exercício: Considere o site mostrado na figura a seguir. Escrever o código para este site considerando os seguintes tópicos: " Quando o usuário clicar no botão Limpar, deverá ser exibida uma janela de diálogo para confirmar a operação. ELFS,

16 aula05_11.htm! Quando o usuário clicar no botão Enviar, o script deve verificar se os campos obrigatórios (nome, sobrenome e ) estão completados. Caso estejam, uma nova página deve aparecer agradecendo a visita, mostrando os dados digitados e pedindo confirmação para o envio. Caso contrário, uma caixa de alerta deve aparecer indicando o campo que não está preenchido corretamente.! Antes que a nova página apareça agradecendo a visita e mostrando os dados digitados, o campo deverá ser verificado por uma função. Essa função deverá verificar se o endereço parece estar correto ou não. Caso não esteja, uma caixa de alerta deverá aparecer e o usuário deverá confirmar ou não o conteúdo deste campo. Um valor para o campo irá parecer estar correto caso as seguintes condições sejam satisfeitas:! deve haver pelo menos um caractere antes do o deve aparecer uma e uma única vez; ELFS,

17 ! deve haver um ou mais caracteres após o esses caracteres devem ser seguidos por um ponto (".");! após o ponto deve haver dois ou mais caracteres. A aplicação a seguir implementa um jogo tipo Teste Seus Conhecimentos em JavaScript. O jogo consiste de uma série de perguntas de múltipla escolha. Inicialmente o jogador deverá digitar seu nome e escolher o nível de dificuldade das perguntas, conforme ilustra a interface abaixo. A cada jogada, o script deverá abrir uma janela, sem barra de status, diretórios, navegação, onde serão exibidas a pergunta e as opções de resposta. Para escolher uma resposta, o jogador deverá clicar sobre ela. ELFS,

18 Caso a resposta seja correta, uma nova pergunta deverá ser formulada. Caso a resposta não seja correta, deverá ser exibida a resposta correta e o jogo deverá terminar. Ao final da bateria de perguntas, deverá aparecer a pontuação final do jogador e a opção de recomeçar uma nova bateria de perguntas ou sair do jogo. As perguntas e respostas deverão ser armazenadas em uma estrutura do tipo array. Para que a sequência de perguntas não seja sempre a mesma, variar a ordem das perguntas dependendo de números gerados aleatoriamente. A listagem a seguir mostra uma possível implementação do jogo. <HTML> <HEAD> <TITLE>Teste de Conhecimentos</TITLE> <SCRIPT language="javascript"> aula05_12.htm var quest = new Array(10); // questões do jogo var parte = new Array(5); // armazena as partes de uma questão var perg = new Array(10); // controla perguntas já feitas var ok,jogador,nivel; var pnum,ptotal; ELFS,

19 Note que o vetor quest armazena a pergunta, as três opções de resposta e o número da opção correta, separados pelo símbolo " ". É muito fácil, portanto, acrescentar novas questões ao jogo. A funçao separa_pergunta mostrada a seguir se encarrega de separar as partes que compõem uma questão, armazenando-as no vetor parte. function perguntas() quest[0] = "Elemento de formulário: input text output 1 "; quest[1] = "JavaScript:"+ " Orientada a objetos Baseada em objetos Não usa objetos 2 "; quest[2] = "Evento inexistente: onover onblur onerror 1 "; quest[3] = "JavaScript é: Interpretada Compilada Encriptada 1 "; quest[4] = "Protocolos da Internet: POP3 e OOP LOOP e HTTP FTP e SMTP 3 "; quest[5] = "Palavra reservada JavaScript: switch program token 1 "; quest[6] = "Caixa de edição:"+ " window.alerta window.confirma window.prompt 3 "; quest[7] = "Objetos do browser:"+ " window e math document e navigator math e string 2 "; quest[8] = "Cor válida: AABBCC # FFCCFF# 2 "; quest[9] = "Escopo de variável definida fora de função:"+ " local regional global 3 "; ELFS,

20 function separa_pergunta(questao) s = new String(questao); i = -1; for (k = 0; k < 5; k++) j = s.indexof(" ",i+1); parte[k] = s.substring(i+1,j); i = j; function pontuacao(ok) pontos = new Number(form1.escore.value); if (ok == 1) pontos = pontos + 10; form1.escore.value = pontos.tostring(10); function mostrar_pergunta(n) separa_pergunta(quest[n]); janela = window.open("","","toolbar=no,location=no,directories=no,"+ "status=no,menubar=no,scrollbars=no,"+ "resizable=yes,width=600,height=250"); ELFS,

21 with (janela.document) open(); Note o uso do comando with, que simplifica a notação. Observe também a necessidade de chamar a função pontuação como opener.pontuação, pois essa função pertence à janela que abriu esta nova janela write("<html><head><title>teste de Conhecimentos</TITLE>"); write("</head><body BGCOLOR='#FFCCFF' onunload='opener.pontuacao(ok);'>"); write("<b><font SIZE='2' COLOR='red' FACE='comic sans MS'>"); write("jogador: "+jogador+" [nível "+nivel+"]"); write("<br><br>"); write("<font COLOR='black'>"); write("questão "+pnum+": <B>"+parte[0]+"</B><BR>"); for (i = 1; i < 4; i++) write("<br>"+i+") <A HREF='#' onclick='"); if (i == parte[4]) write("ok = 1;"); else write("ok = 0;"); write("window.close();'>"+parte[i]+"</a>"); write("</form></font></b></body></hmtl>"); close(); ELFS,

22 function iniciar_jogo() perguntas(); pnum = 0; for (i = 0; i < 10; i++) perg[i] = 0; function jogar() jogador = form1.nome.value; nivel = form1.nivel.value; ptotal = 2*nivel; pnum++; Note que o nível de dificuldade vai influir somente no número de questões a serem formuladas ao jogador. if (pnum > ptotal) form1.btn2.disabled = true; Note que, após formuladas todas as questões, o segundo botão do formulário será desabilitado. perc = Math.round(10*(form1.escore.value/ptotal)); if (perc > 80) form1.resultado.value = "Parabéns, você acertou "+perc+ "% das questões."; else form1.resultado.value = "Você acertou "+perc+"% das questões."; ELFS,

23 else do n = Math.round(10*Math.random()); while (perg[n]==1); // para não repetir pergunta perg[n] = 1; mostrar_pergunta(n); if (pnum == ptotal) form1.btn2.value = "Resultado"; </SCRIPT> </HEAD> <BODY BGCOLOR="#CCFFFF" onload='iniciar_jogo();'> <FONT SIZE=2 COLOR="maroon" FACE="comic sans MS"> <B> <FORM NAME="form1" onreset="window.close();" onsubmit="jogar(); return false;"> Bem-vindo ao Teste de Conhecimentos<BR><BR> Note que o botão Jogar será alterado para Resultado, depois que a última questão tiver sido formulada ao jogador (esse botão será desabilitado logo a seguir, conforme comentário anterior). Nome: <INPUT NAME="nome" TYPE="text" SIZE="30"><BR><BR> Nível de dificuldade: <SELECT SIZE="1" NAME="nivel"> <OPTION VALUE="1"> Mínimo </OPTION> <OPTION VALUE="2"> Baixo </OPTION> <OPTION VALUE="3"> Médio </OPTION> <OPTION VALUE="4"> Alto </OPTION> <OPTION VALUE="5"> Máximo </OPTION> </SELECT><BR><BR> ELFS,

24 Seu escore: <INPUT NAME="escore" TYPE="text" SIZE="5" VALUE="0"><BR><BR> Seu resultado: <INPUT NAME="resultado" TYPE="text" SIZE="40"><BR><BR><BR> <INPUT NAME="btn1" TYPE="reset" VALUE="Fim"> <INPUT NAME="btn2" TYPE="submit" VALUE="Jogar"> </FORM> </B> </FONT> </BODY> </HMTL> Cookies em JavaScript! O protocolo HTTP foi desenvolvido originalmente como sendo stateless, ou seja, uma vez que uma página tenha sido removida da janela, o browser não retém informação alguma sobre essa página, exceto no objeto history. Da mesma forma, o servidor web não tem lembrança das requisições dos clientes. Cookies constituem uma forma de acrescentar um pouco de memória ao browser armazenando uma pequena quantidade de dados associados à paginas e sites. Sempre que um browser habilitado a aceitar cookies requer uma página ele procura ver se existe algum cookie associado com a URL daquela página. Caso exista, esse cookie é enviado ao servidor web como parte do cabeçalho HTTP da requisição.! Um cookie pode ser estabelecido e recuperado em um script por meio da propriedade document.cookie. ELFS,

25 ! Um cookie é usualmente constituído por pares atributo-valor separados por pontos-e-vígulas. Exemplo: document.cookie = "nome=ppi;domain=feg.unesp.br;expires=2003,12,31;secure;" Neste caso, tem-se um cookie denominado PPI, que será transmitido somente aos servidores no domínio feg.unesp.br, que expira em 31 de dezembro de 2003, e que somente será transmitido ao servidor se um meio de transmissão seguro (como https:) estiver sendo usado. Observe que o valor do cookie é dado como um string de pares atributo-valor. Cada par par atributo-valo pode ter até 4KB de dados, não pode conter espaços nem pontos-e-vírgulas e deve conter somente um sinal de igual (=).! O atributo expires: Normalmente, quando o usuário fecha o browser, todos os cookies que não apresentam o atributo expires são destruídos. O exemplo a seguir mostra como estabelecer um cookie válido até um ano após ter sido construído: var umano = new Date(); umano.setfullyear(umano.getfullyear()+1); document.cookie = "nome=ceie;expires="+umano.togmtstring();! Para destruir um cookie cuja expiração tenha sido estabelecida como uma data futura basta alterar seu atributo expires para alguma data que já se passou. ELFS,

26 ! O atributo path: Normalmente, um cookie pode ser acessado pelo documento que o criou, ou por qualquer outro documento residindo na mesma pasta ou em alguma de suas sub-pastas. Por exemplo, se o arquivo: criou um cookie, este cookie pode ser lido por qualquer arquivo desta pasta ou de suas sub-pastas, como por exemplo: ou mas não pode ser lido por um arquivo como: Para que o cookie possa ser lido por outros documentos é preciso estabelecer seu atributo path. Exemplo: se o cookie for criado como: document.cookie = "nome=ppi;domain=feg.unesp.br;path=/"; então, esse cookie poderá ser lido por qualquer documento que resida em uma pasta ou sub-pasta do diretório Recuperação de cookies! Os valores dos atributos expires, path, domain e secure não estão disponíveis para serem lidas por um cliente. Por exemplo, se criarmos o cookie: ELFS,

27 document.cookie="nome=ppi;domain=feg.unesp.br;expires=2003,12,31" então, o comando: alert(document.cookie); irá exibir o string: "nome=ppi". Os demais valores estão disponíveis para o servidor e são enviados como parte do cabeçalho HTTP mas, por razões de segurança, não podem ser acessados pela página do cliente.! Exemplo: <html> <head><title>exemplo de Cookie</title></head> <body> <script language="javascript"> var umano = new Date(); umano.setfullyear(umano.getfullyear()+1); document.cookie="autor=elfs;expires="+umano.togmtstring(); </script> <h2>exemplo de cookie</h2> <a href="aula05_13a.htm">cookie1</a><br> <a href="aula05_13b.htm">cookie2</a> <form> <input type="button" name="botao" value="recupera cookies" onclick="alert(document.cookie)"> </form> </body> </html> aula05_13.htm ELFS,

28 ! Observe que essa página cria um cookie "autor=elfs" com um prazo de expiração de um ano. A página apresenta ainda dois links cookie1 e cookie2 (para as páginas aula05_13a.htm e aula05_13b.htm, mostradas a seguir) que permitirão a criação de outros cookies, e um botão Recupera cookies, que exibe em uma caixa de alerta os cookies disponíveis.! Inicialmente, se clicarmos no botão Recupera cookies será exibida a caixa de alerta mostrada ao lado, ou seja, a única informação disponível do cookie é: autor=elfs. ELFS,

29 aula05_13a.htm <html> <title>exemplo de Cookie</title> </head> <body> <h2>exemplo de cookie</h2> <form> <h4>digite o curso:</h4><input type="text" name="curso"> <input type="button" name="botao" value="cria cookie" onclick="document.cookie='curso='+document.forms[0].curso.value"> </form> </body> </html> aula05_13b.htm <html> <title>exemplo de Cookie</title> </head> <body> <h2>exemplo de cookie</h2> <form> <h4>digite a disciplina:</h4><input type="text" name="discip"> <input type="button" name="botao1" value="cria cookie" onclick="document.cookie='disciplina='+document.forms[0].discip.value"> </form> </body> </html> Note as referências absolutas aos campos curso e discip. Observe que como não foi dado um nome ao formulário, temos que usar a matriz de formulários do documento (no caso, essa matriz contém apenas um elemento, na posição forms[0]). ELFS,

30 ! Clique nos links cookie1 e cookie2 e crie novos cookies. Clique novamente no botão e recupere os cookies existentes. Será exibida uma janela de alerta como:! Feche o browser. Abra novamente o browser, apontando-o outra vez para o arquivo aula05_13.htm. Clique no botão para recuperar os cookies disponíveis. Note que somente o cookie 'autor=elfs' será recuperado, pois os demais (por não terem data de expiração) expiraram quando o browser foi fechado.! É importante observar que a propriedade window.document.cookie é diferente de outras propriedades de objetos JavaScript pelas seguintes razões:! A propriedade cookie não está diretamente relacionada a seu objeto-pai (o objeto document). A propriedade cookie é apenas um ponteiro para os cookies do browser. Quando se estabelece um valor para a propriedade, o dado é tratado pelo sistema de gerenciamento de cookies do browser e não diretamente por seu objeto-pai, como no caso das demais propriedades de objetos. ELFS,

31 ! A propriedade cookie armazena em um único string todos os cookies visíveis, mas não é um vetor de valores. Isso é diferente de outras propriedades tal como o vetor de formulários, cujos elementos correspondem exatamente aos tags <form> do documento. Extensões JavaScript à Linguagem XHTML! Muitos grupos de desenvolvedores de aplicações para a Internet têm proposto extensões à linguagem XHTML baseadas em programas JavaScript. Uma dessas extensões é a Forms Markup Language (FML) que introduz um conjunto de novos tags e atributos especialmente projetados para a criação de formulários. Essas novas construções são "traduzidas" para scripts JavaScript e "injetadas" nas páginas que as utilizam.! Uma das extensões propostas na linguagem FML são alguns novos atributos para caixas de texto, como: ctype e validation. O atributo ctype (content type) estabelece o tipo de informação que a caixa de texto deverá conter, por exemplo: um endereço eletrônico, um número, uma data, uma URL, um número de cartão de crédito, dentre outras possibilidades. O atributo validation estabelece regras de validação para o conteúdo da caixa de texto, dependendo do valor do parâmetro ctype. ELFS,

Java Script : Introducao. 1) Sobre este tutorial...

Java Script : Introducao. 1) Sobre este tutorial... Java Script : Introducao. 1) Sobre este tutorial... Este tutorial visa ensinar os fundamentos da linguagem JavaScript, a partir de exemplos de scripts e de exercícios sugeridos. Não se trata de um curso

Leia mais

Conteúdo. DHTML tópicos Hamilton Lima - 2002-2004

Conteúdo. DHTML tópicos Hamilton Lima - 2002-2004 DHTML tópicos Hamilton Lima - 2002-2004 Conteúdo 1. meu primeiro script... 2 2. DOM Document Object Model...2 3. tipo de execução de scripts...2 4. resposta a um evento... 3 5. tipos de dados, variaveis

Leia mais

Tecnologias para Web Design

Tecnologias para Web Design Tecnologias para Javascript e DOM Introdução à Scripts Um script do lado cliente é um programa que acompanha um documento HTML Pode estar incluído no próprio documento embutido ou acompanha-lo num arquivo

Leia mais

JavaScript: Validação de Formulários. Prof. Ivanilton Polato ipolato@utfpr.edu.br ipolato@gmail.com

JavaScript: Validação de Formulários. Prof. Ivanilton Polato ipolato@utfpr.edu.br ipolato@gmail.com JavaScript: Validação de Formulários Prof. Ivanilton Polato ipolato@utfpr.edu.br ipolato@gmail.com Validação de Formulários Um dos usos mais frequentes do JS é a validação de formulários. Além de garantir

Leia mais

1-03/11/03 INTRODUÇÃO

1-03/11/03 INTRODUÇÃO 1-03/11/03 INTRODUÇÃO JavaScript é uma linguagem que permite injetar lógica em páginas escritas em HTML (HiperText Mark-up Language). As páginas HTML podem ser escritas utilizando-se editores de texto,

Leia mais

Lista de operadores de comparação - > Maior que - < Menor que - <= Menor ou igual a - >= Maior ou igual a - === Igual a -!

Lista de operadores de comparação - > Maior que - < Menor que - <= Menor ou igual a - >= Maior ou igual a - === Igual a -! Página1 Javascript JavaScript (JS) é uma linguagem de programação client side Funciona no navegador do usuário. É uma linguagem baseada em objetos. "Walmir".length; 6 Para que serve - fazer websites responder

Leia mais

Exercícios Práticos de HTML e JavaScript.

Exercícios Práticos de HTML e JavaScript. <FORM ACTION=mailto:teste@gmail.com METHOD=POST ENCTYPE=text/plain NAME=cadastro> Exercícios Práticos de HTML e JavaScript Exercício 1: Formulário Padrão HTML SEM JavaScript

Leia mais

Desenvolvimento de Aplicações para Internet

Desenvolvimento de Aplicações para Internet Desenvolvimento de Aplicações para Internet Aula 03 Celso Olivete Júnior olivete@fct.unesp.br Na aula de hoje... Javascript: introdução, operadores lógicos e matemáticos, comandos condicionais. Javascript:

Leia mais

INTRODUÇÃO AO DESENVOLVIMENTO WEB

INTRODUÇÃO AO DESENVOLVIMENTO WEB INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Formulários Os formulários em HTML são usados para selecionar diferentes tipos de entradas do usuário. Um formulário é uma área que

Leia mais

Utilizando Janelas e Frames

Utilizando Janelas e Frames Utilizando Janelas e Frames Aprenderemos agora algumas técnicas mais específicas para fazer o JavaScript trabalhar com várias partes das páginas e navegadores da Web. Controlando janelas com objetos Já

Leia mais

indica o nome do campo pelo qual podemos acessar.

indica o nome do campo pelo qual podemos acessar. Formulários Em geral Com o Javascript, os formulários Html tomam outra dimensão. Não esqueça que em Javascript, podemos acessar cada elemento de um formulário para, por exemplo, ler ou escrever um valor,

Leia mais

O que é o Javascript?

O que é o Javascript? O que é o Javascript? JavaScript é uma linguagem para criação de Home-Pages. Funções escritas em JavaScript podem ser embutidas dentro de seu documento HTML. Com JavaScript você tem muitas possibilidades

Leia mais

Tecnologias para apresentação de dados - Java Script. Aécio Costa

Tecnologias para apresentação de dados - Java Script. Aécio Costa Tecnologias para apresentação de dados - Java Script Aécio Costa Foi originalmente implementada como parte dos navegadores web para que scripts pudessem ser executados do lado do cliente e interagissem

Leia mais

Prof Evandro Manara Miletto. parte 2

Prof Evandro Manara Miletto. parte 2 Prof Evandro Manara Miletto parte 2 Sumário Estruturas de Controle Eventos Estruturas de controle características Estruturas de controle (ou condicionais) são executadas caso um teste seja atendido Permite

Leia mais

JavaScript (Funções, Eventos e Manipulação de Formulários)

JavaScript (Funções, Eventos e Manipulação de Formulários) Linguagem de Programação para Web JavaScript (Funções, Eventos e Manipulação de Formulários) Prof. Mauro Lopes 1-31 23 Objetivos Iremos avançar um pouco mais em nosso estudo sobre o JavaScript. Iremos

Leia mais

Introdução à Tecnologia Web

Introdução à Tecnologia Web Introdução à Tecnologia Web JavaScript Sintaxe da Linguagem: Eventos Profª MSc. Elizabete Munzlinger www.elizabete.com.br JavaScript Eventos Índice 1 Eventos JavaScript... 2 a) Relacionados a Janela...

Leia mais

HTML / JAVASCRIPT. A versão atual é o HTML5 (seus predecessores imediatos são HTML 4.01, XHTML 1.1, etc.).

HTML / JAVASCRIPT. A versão atual é o HTML5 (seus predecessores imediatos são HTML 4.01, XHTML 1.1, etc.). HTML / JAVASCRIPT Estamos iniciando o estudo do HTML através das TAGS (comandos) para construir formulários. Isso facilitará a continuidade dos nossos estudos da linguagem de programação JavaScript, a

Leia mais

FORMULÁRIOS HTML (FORMS) E ENTRADAS DE DADOS (INPUT)

FORMULÁRIOS HTML (FORMS) E ENTRADAS DE DADOS (INPUT) FORMULÁRIOS HTML (FORMS) E ENTRADAS DE DADOS (INPUT) Formulários (FORMS): Um formulário é uma área que pode conter elementos de formulário. Elementos de formulário são elementos que permitem ao usuário

Leia mais

Introdução a JavaScript

Introdução a JavaScript 1 Introdução a JavaScript A LINGUAGEM HTML HYPERTEXT MARKUP LANGUAGE, foi criada exclusivamente para definir a estrutura de uma página. Esforços para usar HTML como linguagem de formatação de página, visando

Leia mais

Os componentes de um formulário são: Form, Input, Select e AreaText

Os componentes de um formulário são: Form, Input, Select e AreaText HTML Formulário O elemento FORM, da HTML, é o responsável por prover documentos interativos no ambiente WWW de forma que uma pagina web exibida a um usuário possa submeter um conjunto de dados, informados

Leia mais

Scriptlets e Formulários

Scriptlets e Formulários 2 Scriptlets e Formulários Prof. Autor: Daniel Morais dos Reis e-tec Brasil Programação Avançada Para Web Página1 Meta Permitir ao aluno aprender a criar um novo projeto Java para web no Netbeans IDE,

Leia mais

As janelas do browser

As janelas do browser Capítulo 5 As janelas do browser 5 As janelas do browser A JANELA DO BROWSER é manipulável de várias formas através da linguagem JavaScript. Pode-se alterar dinamicamente várias de suas características

Leia mais

Java Script Pág: 1. Índice

Java Script Pág: 1. Índice Java Script Pág: 1 Índice Índice... 1 Introdução ao JavaScript Básico... 2 Configurações... 2 Usando o Java Script.... 2 Comandos: script language - alert - /script... 3 Variáveis... 4 Regras para criar

Leia mais

7. Recursos PHP para a Internet

7. Recursos PHP para a Internet 7. Recursos PHP para a Internet Protocolo HTTP. Na aula passada vimos um script simples de autenticação de usuários. Neste script foi usado o tag META para passar uma URL ao servidor web. A linguagem PHP

Leia mais

6. Introdução à Linguagem PHP

6. Introdução à Linguagem PHP 6. Introdução à Linguagem PHP A comunicação na Web exige dois agentes: o cliente web e o servidor web. O cliente requer informação (a partir de uma página HTML acessada pelo navegador) e o servidor fornece

Leia mais

HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web;

HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web; HTML Introdução Introdução ao HTML HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web; É uma linguagem de hipertexto; Permite escrever texto de forma estruturada, que está

Leia mais

Conteúdo Dinâmico. Introdução. Interação Browser x Servidor Web. Interação Browser x Servidor Web

Conteúdo Dinâmico. Introdução. Interação Browser x Servidor Web. Interação Browser x Servidor Web Introdução Formulários rios & Conteúdo Dinâmico Mário Antonio Meireles Teixeira Dept o. de Informática - UFMA A Web surgiu inicialmente como uma nova forma de comunicação de informações, fazendo uso de

Leia mais

Programação para Internet I

Programação para Internet I Programação para Internet I Aulas 09 e 10 Fernando F. Costa nando@fimes.edu.br Formulários O formulário representa o modo mais importante de interatividade que a linguagem HTML oferece. Um formulário pode

Leia mais

4. A Linguagem JavaScript

4. A Linguagem JavaScript 4. A Linguagem JavaScript! A linguagem XHTML, por não ser uma linguagem de programação e sim uma linguagem de marcação, não permite interação entre o usuário e a página, além de clicar em um link, fazendo

Leia mais

Universidade Federal do Espírito Santo CCA UFES. Centro de Ciências Agrárias CCA UFES Departamento de Computação. JavaScript

Universidade Federal do Espírito Santo CCA UFES. Centro de Ciências Agrárias CCA UFES Departamento de Computação. JavaScript Universidade Federal do Espírito Santo Centro de Ciências Agrárias CCA UFES Departamento de Computação Universidade Federal do Espírito Santo CCA UFES JavaScript Desenvolvimento de Sistemas para WEB Site:

Leia mais

Desenvolvimento Web XHTML Formulários. Prof. Bruno E. G. Gomes

Desenvolvimento Web XHTML Formulários. Prof. Bruno E. G. Gomes Desenvolvimento Web XHTML Formulários Prof. Bruno E. G. Gomes 2014 Introdução Um recurso bastante utilizado no desenvolvimento Web é o envio de dados de uma página para o servidor quando fornecemos informações,

Leia mais

Programando em PHP. Conceitos Básicos

Programando em PHP. Conceitos Básicos Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Conceitos Básicos Todo o escopo deste estudo estará voltado para a criação de sites com o uso dos diversos recursos de programação web

Leia mais

0,5 pelo negrito das palavras ID, Nome, E-mail e Analisar em outro momento.

0,5 pelo negrito das palavras ID, Nome, E-mail e Analisar em outro momento. IFES - Campus Cachoeiro de Itapemirim-ES Curso Técnico em Informática Disciplina: Programação Web Professor: Flávio Izo e Rafael Vargas Data: 07/04/2015 Aluno: GABARITO Valor: 12,5 Conteúdo: HTML + Formulários

Leia mais

Mais sobre uso de formulários Site sem Ajax

Mais sobre uso de formulários Site sem Ajax Mais sobre uso de formulários Site sem Ajax Página com busca padrão 1 Página com o resultado da busca carregada no local da anterior (o formulário está vazio) Site com Ajax 2 Site usando Ajax para preencher

Leia mais

Programação Web Prof. Wladimir

Programação Web Prof. Wladimir Programação Web Prof. Wladimir HTML - Formulários @wre2008 1 Sumário Formulários HTML @wre2008 2 Formulários: Muitos elementos de um formulário html são definidos pela tag . Cada tipo de elemento

Leia mais

O código JavaScript deve ser colocado entre tags de comentário para ficar escondido no caso de navegadores antigos que não reconhecem a linguagem.

O código JavaScript deve ser colocado entre tags de comentário para ficar escondido no caso de navegadores antigos que não reconhecem a linguagem. 1 - O que é JAVASCRIPT? É uma linguagem de script orientada a objetos, usada para aumentar a interatividade de páginas Web. O JavaScript foi introduzido pela Netscape em seu navegador 2.0 e posteriormente

Leia mais

$XOD2VREMHWRVGRQDYHJDGRU

$XOD2VREMHWRVGRQDYHJDGRU $XOD2VREMHWRVGRQDYHJDGRU Nesta aula continuaremos a tratar dos objetos em JavaScript. Veremos agora detalhes sobre a KLHUDUTXLD GRV REMHWRV GH ZLQGRZ, que funciona como REMHWR JOREDO. Depois você aprenderá

Leia mais

Desenvolvimento de Sistemas Web Prof. Leandro Roberto. Aula 18 JavaScript: Eventos MySQL PHP (insert, update e delete)

Desenvolvimento de Sistemas Web Prof. Leandro Roberto. Aula 18 JavaScript: Eventos MySQL PHP (insert, update e delete) Desenvolvimento de Sistemas Web Prof. Leandro Roberto Aula 18 JavaScript: Eventos MySQL PHP (insert, update e delete) JavaScript Eventos Alguns eventos de uma página HTML podem ser interceptados e programados

Leia mais

COMO FUNCIONA UM FORMULÁRIO

COMO FUNCIONA UM FORMULÁRIO FORMULÁRIOS Constitui-se numa das formas de a máquina cliente enviar informações para que um programa no servidor receba estes dados, processe-os e devolva uma resposta ao usuário, por meio do navegador,

Leia mais

Primeiro contato com JavaScript

Primeiro contato com JavaScript Primeiro contato com JavaScript Visão Geral JavaScript É uma linguagem em formato script; Permite dinamizar funções do site e criar interatividade em páginas web. O JavaScript permite: Coletar dados dos

Leia mais

Ferramentas para Multimídia e Internet - 1486

Ferramentas para Multimídia e Internet - 1486 1 Ferramentas para Multimídia e Internet - 1486 HTML BÁSICO: O que é uma página WEB? Uma página WEB, também conhecida pelo termo inglês webpage, é uma "página" na World Wide Web, geralmente em formato

Leia mais

O código acima descreve o formulário com uma caixa de texto e dois botões

O código acima descreve o formulário com uma caixa de texto e dois botões Formulários Formulários permitem que os usuários interajam com um servidor Web passando informações. Assim, através da Web, se pode ler e gravar informações em Banco de Dados, gerando enormes possibilidades

Leia mais

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Mini-curso de PHP Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Aula 1 Breve introdução de HTML, Conceitos básicos de PHP, Sintaxe, Separador de instruções e Comentários (Cap 1

Leia mais

Índice. 1 Introdução ao Javascript...1 1.1 HTML e Javascript...1 1.2 Resumo do capítulo...2

Índice. 1 Introdução ao Javascript...1 1.1 HTML e Javascript...1 1.2 Resumo do capítulo...2 Índice 1 Introdução ao Javascript...1 1.1 HTML e Javascript...1 1.2 Resumo do capítulo...2 2 Elementos da Linguagem...3 2.1 Variáveis...3 2.2 Tipos de dados...4 2.3 Operadores...4 2.4 Comparação...5 2.5

Leia mais

TECNOLOGIAS WEB AULA 7

TECNOLOGIAS WEB AULA 7 TECNOLOGIAS WEB AULA 7 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Apresentar as principais tags utilizadas na construção de formulários em HTML. Compreender as principais estruturas formadas com as

Leia mais

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL Formulários HTML Aula 07: Formulários e Frames HTML Os formulários HTML são utilizados, geralmente, como entradas de dados prépreenchimento,

Leia mais

Incorporando JavaScript em HTML

Incorporando JavaScript em HTML Incorporando JavaScript em HTML Existem quatro maneiras de incorporar JavaScript em HTML. Vamos abordar as três primeiras, por ser mais comum: Entre as tags dentro do código HTML. A partir

Leia mais

8. Tratamento de Arquivos

8. Tratamento de Arquivos 8. Tratamento de Arquivos Algumas vezes, uma aplicação precisa ler ou gravar dados em arquivos. Por exemplo: um contador de página da web deve ter acesso a um arquivo onde esteja armazenado o número de

Leia mais

PROGRAMAÇÃO PARA INTERNET. Fonte: Raul Paradeda

PROGRAMAÇÃO PARA INTERNET. Fonte: Raul Paradeda PROGRAMAÇÃO PARA INTERNET Introdução à AJAX Fonte: Raul Paradeda INTRODUÇÃO Para entender o que é o AJAX é necessário ter o prévio conhecimento de: HTML / XHTML; Javascript; CSS; XML. INTRODUÇÃO Ao pesquisar

Leia mais

$XOD2V2EMHWRVdocumentHnavigator

$XOD2V2EMHWRVdocumentHnavigator $XOD2V2EMHWRVdocumentHnavigator Nesta aula continuaremos a tratar dos objetos em JavaScript. Veremos agora detalhes sobre os objetos document e navigator. 2EMHWLYRV Aprender: - as características e métodos

Leia mais

Introdução ao Javascript

Introdução ao Javascript Programação WEB I Introdução ao Javascript Apresentação da Disciplina,Introdução a linguagem Javascript Objetivos da Disciplina Apresentar os principais conceitos da linguagem Javascript referente à programação

Leia mais

Obtendo dados com formulários

Obtendo dados com formulários Obtendo dados com formulários Exploraremos agora uma das utilizações mais poderosas para o JavaScript: trabalhar com formulários de HTML. Você pode utilizar JavaScript para tornar um formulário mais interativo,

Leia mais

IFSC-Programação para a WEB - prof. Herval Daminelli

IFSC-Programação para a WEB - prof. Herval Daminelli 1 Um script em PHP ou página HTML pode transferir dados para outro script em PHP no servidor de diversas maneiras. Algumas destas maneiras são: Por meio de formulários, usando o método GET ou POST; Através

Leia mais

Bool setcookie (string nome [, string valor [, int validade [, string caminho [, string dominio [, int seguro]]]]] )

Bool setcookie (string nome [, string valor [, int validade [, string caminho [, string dominio [, int seguro]]]]] ) Disciplina: Tópicos Especiais em TI PHP Este material foi produzido com base nos livros e documentos citados abaixo, que possuem direitos autorais sobre o conteúdo. Favor adquiri-los para dar continuidade

Leia mais

Programação WEB I DOM (Document Object Manager)

Programação WEB I DOM (Document Object Manager) Programação WEB I DOM (Document Object Manager) DOM Significa Modelo de Objetos de Documentos e tem por finalidade descrever e padronizar os objetos e seus relacionamentos em uma aplicação. Tem a finalidade

Leia mais

Desenvolvimento de Aplicações para Internet Aula 11

Desenvolvimento de Aplicações para Internet Aula 11 Desenvolvimento de Aplicações para Internet Aula 11 Celso Olivete Júnior olivete@fct.unesp.br www.fct.unesp.br/docentes/dmec/olivete jquery Na aula passada: Selecionando atributos Manipulando CSS Inserindo

Leia mais

HTML - 7. Vitor Vaz da Silva Paula Graça

HTML - 7. Vitor Vaz da Silva Paula Graça HTML - 7 Vitor Vaz da Silva Paula Graça 1 Formulários Os formulários forms no HTML, são utilizados para a introdução de dados de uma determinada aplicação Os programas JavaScript têm como um dos seus maiores

Leia mais

ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia3.zip dezembro 1995 Tutorial - Autoria em World Wide Web

ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia3.zip dezembro 1995 Tutorial - Autoria em World Wide Web RNP REDE NACIONAL DE PESQUISA Centro Regional de Brasília CR/DF ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia3.zip dezembro 1995 Tutorial - Autoria em World Wide Web Parte III - Hypertext

Leia mais

Aula 05 HTML FORMULÁRIOS Prof. Daniela Pires Sumário

Aula 05 HTML FORMULÁRIOS Prof. Daniela Pires Sumário Sumário FORMULÁRIO EM HTML... 2 FORM... 2 ACTION... 2 METHOD... 2 INPUT... 2 INPUT TYPE TEXT... 2 INPUT TYPE PASSWORD... 2 CHECKBOX - Múltipla escolha... 4 RADIO - Escolha única... 4 Botões de ação...

Leia mais

WEBDESIGN. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira

WEBDESIGN. Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira WEBDESIGN Professor: Paulo Trentin paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira 1 CDI - Curso de Webdesign - Prof. Paulo Trentin Objetivos para esta aula Debater sobre

Leia mais

JavaScript. Professora Lucélia Oliveira

JavaScript. Professora Lucélia Oliveira 2010 JavaScript Professora Lucélia Oliveira Sumário INTRODUÇÃO... 3 Exemplos práticos... 4 Variáveis... 5 Operadores... 6 Lista de Exerícios 01... 7 Estruturas de controle... 8 Estrutura If... 8 Estrutura

Leia mais

JavaScript Aplicações Interativas para a Web

JavaScript Aplicações Interativas para a Web JavaScript Aplicações Interativas para a Web ADRIANO GOMES LIMA BELO HORIZONTE 2006 INTRODUÇÃO A LINGUAGEM JAVASCRIPT...9 JAVA E JAVASCRIPT...9 VBSCRIPT E JAVASCRIPT... 10 AS VERSÕES DO JAVASCRIPT... 10

Leia mais

Publicação web. Será ativado um assistente de publicação que lhe guiará em todas as etapas a seguir apresentadas.

Publicação web. Será ativado um assistente de publicação que lhe guiará em todas as etapas a seguir apresentadas. Publicação web Pré requisitos: Lista de questões Formulário multimídia Este tutorial tem como objetivo, demonstrar de maneira ilustrativa, todos os passos e opções que devem ser seguidos para publicar

Leia mais

Javascript. Javascript

Javascript. Javascript Javascript 1 1 INTRODUÇÃO...3 2 JAVASCRIPT...3 2.1 O QUE É JAVASCRIPT...3 2.1.1 CARACTERÍSTICAS BÁSICAS...3 2.1.2 O QUE JAVASCRIPT NÃO É...4 2.1.3 PARTICULARIDADES E LIMITAÇÕES...4 2.2 ELEMENTO SCRIPT...5

Leia mais

Informática I. Aula 6. http://www.ic.uff.br/~bianca/informatica1/ Aula 6-12/09/2007 1

Informática I. Aula 6. http://www.ic.uff.br/~bianca/informatica1/ Aula 6-12/09/2007 1 Informática I Aula 6 http://www.ic.uff.br/~bianca/informatica1/ Aula 6-12/09/2007 1 Ementa Noções Básicas de Computação (Hardware, Software e Internet) HTML e Páginas Web Internet e a Web Javascript e

Leia mais

SIMULADOS & TUTORIAIS

SIMULADOS & TUTORIAIS SIMULADOS & TUTORIAIS TUTORIAIS HTML Como criar formulários em HTML Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste documento no todo ou em parte por quaisquer

Leia mais

GUIA PHP com MYSQL Autor: Everton Mendes Messias

GUIA PHP com MYSQL Autor: Everton Mendes Messias PHP (Hypertext Preprocessor) : Linguagem de programação interpretada. Tags PHP: phpinfo(); Comentários: //, # - comentário de uma linha /* comentário de várias linhas */ GUIA PHP com MYSQL Autor: Everton

Leia mais

Algoritmos em Javascript

Algoritmos em Javascript Algoritmos em Javascript Sumário Algoritmos 1 O que é um programa? 1 Entrada e Saída de Dados 3 Programando 4 O que é necessário para programar 4 em JavaScript? Variáveis 5 Tipos de Variáveis 6 Arrays

Leia mais

Web Design Aula 09: Formulários

Web Design Aula 09: Formulários Web Design Aula 09: Formulários Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação Roteiro Tag ... Tag Tag ... Rádio Checkbox Atributo name Form Um

Leia mais

Script de Configuração dos E-mails @SEE (Webmail /Outlook Express)

Script de Configuração dos E-mails @SEE (Webmail /Outlook Express) Script de Configuração dos E-mails @SEE (Webmail /Outlook Express) A Secretaria de Estado da Educação está disponibilizando uma nova ferramenta para acesso ao e-mail @see. Essa nova ferramenta permitirá

Leia mais

Programação Web Prof. Wladimir

Programação Web Prof. Wladimir Programação Web Prof. Wladimir Linguagem PHP @wre2008 1 Sumário PHP: Tipos de dados; Manipulação de dados; Utilizando formulário. @wre2008 2 Tipos de dados As variáveis são declaradas no momento de sua

Leia mais

Passa a passo para construir uma página pessoal - Parte 1

Passa a passo para construir uma página pessoal - Parte 1 Passa a passo para construir uma página pessoal - Parte 1 Quais ferramentas são necessárias? - Editor de texto básico (sem formatações): use o Bloco de Notas (não use o MS Word e WordPad) - Navegador (browser):

Leia mais

Apostila sobre Java Script

Apostila sobre Java Script Apostila sobre Java Script 1 Java Script Básico... 3 1. Introdução... 3 1.1 O que é Java Script?... 3 1.2 Qual é a diferença entre Java e JavaScript?... 3 1.3 Um pequeno exemplo do uso de scripts... 4

Leia mais

HTML -- Criação de Home Page

HTML -- Criação de Home Page PPáággi innaa 1 LISTAS Na linguagem HTML existem elementos específicos para a criação de listas, que podem ser listas ordenadas (OL), listas sem ordenação (UL), ou listas de definição (DL). Um detalhe

Leia mais

Programação Web Aula 5 - Javascript Parte 2 - Javascript e HTML

Programação Web Aula 5 - Javascript Parte 2 - Javascript e HTML Programação Web Aula 5 - Javascript Parte 2 - Javascript e HTML Departamento de Informática UFPR 17 de Março de 2014 1 Javascript e HTML 2 Ambiente Hierarquia Propriedades de Document 3 DOM Denição Hierarquia

Leia mais

Lista de Revisão. 3. Analise a afirmativa a seguir como verdadeira ou falsa e justifique.

Lista de Revisão. 3. Analise a afirmativa a seguir como verdadeira ou falsa e justifique. Lista de Revisão 1. Nos sistemas web, geralmente os usuários apresentam dois problemas típicos, a desorientação e a sobrecarga cognitiva. Discorra sobre esses problemas. 2. Apresente as principais diferenças

Leia mais

JavaScript. JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos.

JavaScript. JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos. JavaScript JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos. Pode ser usada dentro do próprio arquivo HTML ou estruturada em um

Leia mais

www.coldfusionbrasil.com.br

www.coldfusionbrasil.com.br www.coldfusionbrasil.com.br 2000 TRABALHANDO COM E-MAILS 3 ENVIANDO E-MAILS COM CFMAIL 3 ENVIANDO E-MAIL BASEADO EM UM FORMULÁRIO 4 UTILIZANDO QUERY PARA ENVIAR E-MAILS 5 ENVIANDO E-MAIL PARA MÚLTIPLOS

Leia mais

PROGRAMAÇÃO WEB DO LADO DO CLIENTE

PROGRAMAÇÃO WEB DO LADO DO CLIENTE PROGRAMAÇÃO WEB DO LADO DO CLIENTE FORMULÁRIO Na linguagem HTML é permitido que o usuário interaja com o servidor através de formulários ligados a scripts desenvolvidos em linguagens como PHP, Servlets,

Leia mais

Formulários HTML e Introdução à Programação Web

Formulários HTML e Introdução à Programação Web Formulários Até agora tivemos uma boa visão da parte gráfica e de hipertexto do HTML. Agora vamos ver como o HTML pode ser usado para fazer parte efetiva em um programa. Dissemos que HTML não é uma linguagem

Leia mais

Internet e Programação Web

Internet e Programação Web COLÉGIO ESTADUAL PEDRO MACEDO Ensino Profissionalizante Internet e Programação Web 3 Técnico Prof. Cesar 2014 1 SUMÁRIO Criar sites dinâmicos em PHP --------------------------------------------------------

Leia mais

Formulário (Send & Recieve) Prof. Celso H. Masotti

Formulário (Send & Recieve) Prof. Celso H. Masotti Formulário (Send & Recieve) Prof. Celso H. Masotti O Send e o Recieve A partir desse momento os exercícios serão realizados com dois arquivos, um de envio de dados (send) e o que recebe esse dados (recieve)

Leia mais

4 Criação de macros e introdução à linguagem VBA

4 Criação de macros e introdução à linguagem VBA 4 Criação de macros e introdução à linguagem VBA Vinicius A. de Souza va.vinicius@gmail.com São José dos Campos, 2011. 1 Sumário Tópicos em Microsoft Excel 2007 Introdução à criação de macros...3 Gravação

Leia mais

Formulários em HTML - O que são e para que servem

Formulários em HTML - O que são e para que servem Formulários em HTML - O que são e para que servem A tag - Os atributos action e method A primeira coisa que iremos fazer é usar a tag para podermos usarmos formulários. Antes de entrarmos

Leia mais

JavaScript Eventos e Objetos Nativos

JavaScript Eventos e Objetos Nativos JavaScript Eventos e Objetos Nativos Ferramentas para Internet Marx Gomes Van der Linden ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida ) Eventos Um evento é um acontecimento

Leia mais

Publicação de uma pesquisa na web

Publicação de uma pesquisa na web Publicação de uma pesquisa na web Pré-requisitos: Lista das questões Formulário multimídia A publicação de pesquisas na web possibilita que pesquisas sejam respondidas de qualquer computador com acesso

Leia mais

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Criando uma Calculadora Primeiramente deve se criar uma estrutura para armazenar os arquivos necessários para o funcionamento da calculadora.

Leia mais

Formulários. Objeto Form

Formulários. Objeto Form Capítulo 10 Formulários 10 Formulários OS COMPONENTES DE FORMULÁRIO SÃO OS OBJETOS HTML mais utilizados em JavaScript. Por componentes de formulário nos referimos a qualquer campo de entrada de dados dentro

Leia mais

Aula 9: Fundamentos do JQuery Fonte: Plano de Aula Oficial da Disciplina

Aula 9: Fundamentos do JQuery Fonte: Plano de Aula Oficial da Disciplina Programação para Internet Rica 1 Aula 9: Fundamentos do JQuery Fonte: Plano de Aula Oficial da Disciplina Objetivo: Capacitar o aluno para o trabalho com o framework JQuery. INTRODUÇÃO JQuery é uma biblioteca

Leia mais

Tecnologias para apresentação de dados - HTML. Aécio Costa

Tecnologias para apresentação de dados - HTML. Aécio Costa Tecnologias para apresentação de dados - HTML Aécio Costa Apresentação de Dados na Web Tecnologias client-side HTML CSS JavaScript HyperText Markup Language Uma linguagem de marcação utilizada para produzir

Leia mais

Vamos criar nosso formulário, vou utilizar aqui como exemplo cinco campos para upload:

Vamos criar nosso formulário, vou utilizar aqui como exemplo cinco campos para upload: Upload de vários arquivos com PHP 22.856 visualizações 2 1 Fala pessoal, hoje irei ensinar a fazer upload de vários arquivos de uma vez, ou seja, ao invés de criar apenas um campo para o usuário selecionar

Leia mais

Basicamente iremos precisar de uma base de dados na qual iremos armazenar os registros feitos pelos vistantes: Vamos armazenar os seguintes dados:

Basicamente iremos precisar de uma base de dados na qual iremos armazenar os registros feitos pelos vistantes: Vamos armazenar os seguintes dados: Livro de Visitas Basicamente iremos precisar de uma base de dados na qual iremos armazenar os registros feitos pelos vistantes: Vamos armazenar os seguintes dados: ID nome email mensagem data O código

Leia mais

JavaScript Aplicações Interativas para a Web

JavaScript Aplicações Interativas para a Web JavaScript Aplicações Interativas para a Web ADRIANO GOMES LIMA BELO HORIZONTE 2006 INTRODUÇÃO A LINGUAGEM JAVASCRIPT...9 JAVA E JAVASCRIPT...9 VBSCRIPT E JAVASCRIPT... 10 AS VERSÕES DO JAVASCRIPT... 10

Leia mais

Introdução ao javascript ver material de apoio em downloads e também-referência livro javascript manzano.

Introdução ao javascript ver material de apoio em downloads e também-referência livro javascript manzano. Prof. Vania Gimenez- Notas de aula Caro aluno- Este material é só um apoio as aulas, os livros devem ser utilizados para o aprimoramento de seu estudo. -----------------------------------------------------------------------------------------------------------------

Leia mais

APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont

APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont APOSTILA Curso de HTML com PHP HTML Pablo Dapont PET Computação - sala 202 Prédio 43424 ( prédio dos laboratórios ) Instituto de Informática - UFRGS email : pet@inf.ufrgs.br Av. Bento Gonçalves, 9500 bloco

Leia mais

Programação WEB II. Sessions e Cookies. progweb2@thiagomiranda.net. Thiago Miranda dos Santos Souza

Programação WEB II. Sessions e Cookies. progweb2@thiagomiranda.net. Thiago Miranda dos Santos Souza Sessions e Cookies progweb2@thiagomiranda.net Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Cookies e Sessions Geralmente, um bom projeto

Leia mais

EDITORA FERREIRA MP/RJ_EXERCÍCIOS 01

EDITORA FERREIRA MP/RJ_EXERCÍCIOS 01 EDITORA FERREIRA MP/RJ NCE EXERCÍCIOS 01 GABARITO COMENTADO 01 Ao se arrastar um arquivo da pasta C:\DADOS para a pasta D:\TEXTOS utilizando se o botão esquerdo do mouse no Windows Explorer: (A) o arquivo

Leia mais

Introdução à Tecnologia Web

Introdução à Tecnologia Web Introdução à Tecnologia Web JavaScript Validação de Formulários Profª MSc. Elizabete Munzlinger www.elizabete.com.br JavaScript Validação de Formulários Índice 1 VALIDAÇÃO DE FORMULÁRIOS... 2 Para validar

Leia mais