Curso Básico e Avançado de JavaScript

JavaScript
Parte 1: O que JavaScript? Rodando scripts de JavaScript Colocando scripts no HTML Uma primeira funo Elementos de formulrio Data da ltima mudana Parte 2 Informao na barra de status Objeto datado Criando nmeros aleatrios Trabalhando com janelas Parte 3: Trabalhando com frames Parte 4: A barra de status The funo setTimeout Programando um letreiro rolante Parte 5: Arranjos Como limpar um documento Botes de "voltar" e "adiante" Parte 6: Carregar dois frames com um clique Abrindo uma nova janela quando um link acionado Operadores Parte 7: Formulrios de validao Formulrio para enviar dados Como enfocar certo elemento
Introduo ao JavaScript
O que JavaScript? JavaScript uma nova linguagem para pginas Web. Os scripts escritos com JavaScript podem ser colocados dentro das suas pginas HTML. Com JavaScript voc tem muitssimas possibilidades de melhorar a sua pgina HTML com elementos interessantes. Voc capaz, por exemplo, de responder muito facilmente a eventos iniciados pelo usurio. Alguns dos efeitos que agora podemos fazer com Javascript, h algum tempo atrs s eram possveis com CGI. Deste modo, voc pode criar pginas muito sofisticadas com a ajuda do JavaScript. Voc pode achar tambm muitos exemplos de scripts de Javascript na Internet. O melhor que se tem a fazer, ento, dar uma olhada em algumas pginas melhoradas com JavaScript. Voc vai achar muitos desses links em Gamelan (na seo de JavaScript). Voc tambem encontrar a documentao publicada pela Netscape emhttp://home.netscape.com. Qual a diferena entre Java e JavaScript? Ainda que os nomes sejam quase os mesmos, Java no a mesma coisa que JavaScript! Essas so duas tcnicas diferentes de programao na Internet. Java uma linguagem de programao. JavaScript uma linguagem de scripting (tal como diz o nome). A diferena que se pode criar programas reais com Java. O mais das vezes, porm, voc quer apenas criar um efeito chamativo, sem se importar com qualquer programa real. Assim, JavaScript foi pensado como algo fcil de se compreender e de se usar. Os autores de JavaScript no tm que se importar muito com programao. Ns poderamos at dizer que JavaScript muito mais uma extenso do HTML do que uma linguagem de computador separada. Naturalmente essa no uma definio "oficial" mas acho que ela torna mais compreensvel a diferena entre Java e JavaScript. Voc pode encontrar informaes adicionais acerca de Java e JavaScript em Gamelan. Para informaes adicionais acerca desse tpico, leia a introduo fornecida pela Netscape.
Como os scripts do JavaScript podem ser rodados? O primeiro browser a suportar JavaScript foi o Netscape Navigator 2.0. claro que as verses maiores tambm rodam JavaScript. Voc deve saber que nem toda as verses de Netscape Navigator 2.0 (ou maiores) rodam Java. Mas isso no verdadeiro para o JavaScript - ainda que existam problemas entre as diferentes verses. A verso Mac, por exemplo, parece ter apresentado muito defeito. No futuro prximo dever haver outros browsers que suportaro tambm o JavaScript. O Microsoft Internet Explorer 3.0, por exemplo, suportar JavaScript. Browsers habilitados ao JavaScript tendem a se tornar daqui a pouco muito populares, por isso vale a pena aprender essa tcnica logo. Voc j deve estar imaginando que realmente fcil escrever scripts de JavaScript. Tudo o que se tem a fazer conhecer algumas tcnicas bsicas, e trabalhar algum tempo em torno dos problemas que voc pode encontrar. Naturalmente, voc vai necessitar de um conhecimento bsico de HTML antes de comear a ler este tutorial. Voc pode achar muitos recursos on-line sobre HTML que so excelentes. O melhor fazer uma busca on-line de 'html' no Yahoo, se voc quer ficar por dentro da matria. (Esses documentos on-line so freqentemente mais atualizados do que livros: a Internet anda muito rpida atualmente...)
Agora eu quero lhe mostrar alguns pequenos scripts. Assim voc pode aprender como eles so implementados nos documentos em HTML e ficar sabendo quais so as possibilidades da nova linguagem de scripting. Eu comearei com um script muito pequeno, que s imprime um texto num documento HTML.
<html> <head> Meu primeiro JavaScript! </head> <body> <br>
Este um documento HTML normal. <br> <script language="JavaScript"> document.write("Este um JavaScript!") </script> <br> De volta ao HTML. </body> </html> Se voc estiver usando um browser habilitado ao JavaScript, neste momento voc estar vendo este script funcionar. Se o seu browser no suporta JavaScript ento este resultado deve ser algo estranho... Este um documento HTML normal. Este é um JavaScript! De volta ao HTML. Devo admitir que este script no muito til. Voc poderia escrever a mesma coisa no HTML de maneira muito mais rpida e curta. Mas o que eu quis mostrar como voc deve usar os tags <script>. Voc pode usar esses tags no seu documento no lugar que quiser.
Eu no desejo aborrec-lo com scripts to estpidos. Vamos passar logo para as funes. Elas tambm no so difceis de se entender, mas, acredite-me, so muito mais teis! As funes so melhor declaradas entre os tags de <head> da sua pgina-HTML. As funes so convocadas por eventos iniciados pelo usurio. Por isso razovel manter as funes entre os tags de <head>. Elas so carregadas antes que o usurio possa fazer alguma ao que chamar a funo. Os scripts podem ser colocados entre os campos de comentrios internos para assegurar que os antigos browsers no mostrem o prprio script.
<html> <head> <script language="JavaScript"> function pushbutton() { alert("Alo!"); } </script> </head> <body> <form> <input type="button" name="Button1" value="Aperte-me" onclick="pushbutton()"> </form> </body> </html>
Se voc quiser testar este script agora, e estiver usando um browser habilitado ao JavaScript, ento siga adiante e aperte o boto. Este script ir criar um boto, e quando voc o pressiona aparece uma janela dizendo 'Alo!'. No legal? Ento, o que acontece neste script? Em primeiro lugar, uma funo carregada e guardada na memria. Depois criado um boto com o tag de <form> normal (HTML). Existe uma coisa nova no tag de <input>. L voc pode ver 'onclick'. Isto diz ao browser que funo ele tem que chamar quando o boto pressionado ( claro que s quando o browser suporta JavaScript). A funo 'pushbutton()' declarada no cabealho (header). Quando o boto pressionado a funo executada. Tem uma coisa nova neste script - o mtodo 'alerta'. Este mtodo j declarado no JavaScript desse modo voc s tem que cham-lo. Existem muitos mtodos diferentes que voc pode chamar. Eu vou mostrar alguns aqui. Voc pode encontrar uma descrio completa no site da Netscape. Eu acho que essa lista vai se tornar muito maior num futuro prximo. Mas j neste momento existem algumas coisas legais que ns podemos fazer com esses mtodos j dados. (Eu no acho que o mtodo 'alerta' foi pensado para ser usado desta maneira - mas a gente s est aprendendo. E desse modo muito mais fcil de se entender. Eu espero que voc me perdoe...)
Ns j chegamos bem longe por agora. De fato, ns temos um monte de possibilidades apenas adicionando funes aos nossos scripts. Agora eu vou lhe mostrar como voc pode ler alguma coisa que o usurio colocou num formulrio.
<html> <head> <script language="JavaScript">  </script> </head> <body> Coloque o seu nome, por favor: <form> <input type="text" name="name" onBlur="getname(this.value)" value=""> </form> </body> </html>
Agora voc pode testar este script novamente: Coloque o seu nome, por favor:
Ns temos alguns elementos novos implementados neste script novamente. Em primeiro lugar, voc certamente notou o comentrio dentro do script. Dessa maneira voc pode esconder o script dos browsers antigos que no podem rodar scripts. Voc tem que manter a ordem daquilo que mostrado! O incio do comentrio deve estar logo depois do primeiro tag de <script>. O comentrio termina logo antes do tag de </script>. Neste documento-HTML voc tem um elemento de formulrio onde o usurio pode colocar o seu nome. O 'onBlur' no tag de <input> avisa ao cliente que funo que ele tem que chamar quando alguma coisa colocada dentro do formulrio. A funo 'getname(str)' ser chamada quando voc 'deixa' este elemento de formulrio, ou pressiona o 'enter' depois de haver colocado alguma coisa. A funo pegar a seqncia que voc colocou atravs do coamndo 'getname(this.value)'. 'This.value' significa o valor que voc colocou neste elemento de formulrio.
Eu acho que o prximo passo bem legal tambm. Ns vamos implementar uma funo de data dentro do nosso script. Assim, se voc criou uma pgina-HTML, voc pode fazer o cliente imprimir a ltima modificao no documento. Voc no precisa, entretanto, escrever a data no documento. Voc simplesmente escreve um pequeno programa de script. Quando voc fizer pequenas modificaes no futuro, a data se modificar automaticamente.
<html> <body> Esta uma pgina-HTML simples. <br> ltimas modificaes: <script language="JavaScript">  </script> </body> </html>
No momento esta propriedade parece no funcionar em todas as mquinas. Alguns servidores s mostram a data 1/1/1970. Parece haver alguns problemas com essa funo. Ns temos que esperar pela prxima atualizao e torcer para que isto funcione adequadamente em todas as mquinas. Mas voc pode testar isto na sua prpria mquina - em algumas isso parece funcionar muito bem. Como eu j disse, as coisas esto mudando muito rpido hoje em dia. Assim, no seria muito divertido se na semana que vem houvesse uma tremenda mudana no JavaScript! Deste modo, voc deve sempre ficar de olho nas ltimas novidades, pois essa linguagem muito nova. Seja compreensvel se algumas das coisas aqui mencionadas tambm se modificarem. Mas eu acho que os princpios bsicos devero permanecer os mesmos.
A propriedade onMouseOver
Voc poder ver o futuro prximo do JavaScript ao levar a seta do seu mouse sobre este link. Olhe agora para a barra de status na parte de baixo do seu browser. Voc tambm pode combinar esta funo do Javascript com outras funes. Se voc levar a seta sobre este link uma janela se abrir. Agora eu vou lhe mostrar a fonte desses dois efeitos:
<a href="stupid.htm" onMouseOver="window.status='Apenas outro link estupido...'; return true">
A nica coisa que voc tem que fazer acrescentar a propriedade onMouseOver ao seu tag de link <a>. O 'window.status' lhe permitir escrever coisas na barra de status do seu browser. Como se pode ver, voc tem que alterar as aspas. Voc no vai poder usar " todo o tempo, porque se no o JavaScript no ser capaz de identificar a seqncia que voc quer imprimir na barra de status. Depois da seqncia voc tem que escrever ;return true. O segundo exemplo usa o JavaScript chamando a funo alerta. Segue aqui o cdigo:
<html> <head> <script language="JavaScript">  </script> </head> <body> <a href="" onMouseOver="hello()">link</a> </body> </html>
Isto muito fcil. Aqui se usa o mtodo onMouseOver, e a funo hello() chamada quando ocorre este evento.
Mais funes de data
Agora eu quero lhe mostrar outro exemplo usando os mtodos de hora e data. Voc j viu a propriedade lastModified (ltima modificao) funcionando. Agora ns vamos imprimir a hora local no seu documento. Este mtodo usa a hora e a data da sua mquina, assim se voc colocou a data da sua mquina em 17/5/1983 voc ver a data errada por este mtodo tambm. Esta no vai ser a hora e a data da Internet (ou qualquer coisa parecida). A hora agora : 18:20. A data : 24/8/110 Segue aqui o cdigo:
<script language="JavaScript"> 
</script>
Em primeiro lugar ns estamos criando uma varivel de data. Isto feito por today=new Date(). Se ns no especificarmos uma hora e data determinadas, o browser usar a sua hora local e a colocar na varivel today. Observe que ns no temos que declarar a varivel today em nenhum lugar. Esta uma diferena com relao ao Java e com a maioria das outras linguagens de programao em que voc tem que especificar os tipos que voc quer usar antes de us-los efetivamente. Ns criamos um objeto hora que guarda a hora e a data locais. Agora ns podemos simplesmente escrever o seu contedo no documento. Voc tem que escrever today antes de cada mtodo "get", se no o browser no reconhecer o objeto ao qual ele deve se referir. O mtodo getMonth() retorna um nmero entre 0 e 11 (0 ficando para janeiro e 11 para dezembro). Dessa maneira, ns temos que adicionar 1 ao nmero retornado para se obter o ms correto. Uma coisa interessante que voc poderia imaginar criar uma data em que voc tenha confeccionado um documento. Assim, voc poderia calcular quantos dias depois algum estaria lendo o seu documento. E se isso fosse mais do que 10 dias depois voc poderia lhe dizer: Ei cara, isso muito velho, no leia! Para isto voc precisaria da data de hoje, tal como mostrada acima, e da data de criao. Voc pode fixar uma data enquanto est criando um objeto-data. Isto teria a seguinte aparncia: docStarted= new Date(96,0,13) Voc deve especificar o ano em primeiro lugar, depois o ms (lembre-se de diminuir o ms em uma unidade!), e ento colocar o dia. Voc tambm pode especificar a hora: docStarted= new Date(96,0,13,10,50,0) Os primeiros nmeros so ainda parte da data. Eles so seguidos pela hora, pelos minutos, e pelos segundos. Eu devo tambm lhe informar que o JavaScript no tem um tipo real de data. Mas, como se pode ver, perfeitamente possvel trabalhar com datas. Isto funciona porque as datas so representadas por nmeros de milisegundos desde 1/1/1970 s 0:0h. Apesar de parecer muito complicado, este um mtodo comum de representar datas nos computadores. Mas voc no deve se incomodar com isto. Voc s deve cuidar das funes, e essa no uma tarefa to difcil. Eu s quis lhe dizer isso para que voc no pense que eu estou lhe passando uma informao errada.
Nmeros Aleatrios Um problema comum como voc pode usar nmeros aleatrios ao programar e ao escrever linguagens. Nesse momento a funo aleatria no funciona no JavaScript, mas acredito que ela deve ser implementada logo. Por ora ns temos que fazer alguns truques. Bem, na verdade isto no realmente um truque, mas um modo comum que quase todos os programas que eu conheo usam para calcular nmeros aleatrios. Sim, na verdade eles os calculam. Voc pega a hora e a data da sua mquina e a manipula de algum modo. Eu acredito que a linguagem JavaScript final usar tambm este mtodo (ou algum tipo dele). Como eu lhe disse antes, a hora apenas um nmero bem grande. Voc pode usar este nmero para fazer alguns clculos com ele. Voc poderia por exemplo calcular o seno deste nmero e ter o seu valor absoluto. Isto dar um nmero entre 0 e 1. Como a hora muda a cada milisegundo voc no correr o risco de ter o mesmo nmero duas vezes (quando se os calcula adiantadamente um depois do outro). Se voc quer calcular muitos nmeros aleatrios num perodo curto, ento no deve usar o sin() sozinho. Se no, voc ter nmeros que seguem uma curva de seno! Isto no seria realmente aleatrio. Mas se voc quer calcular um nmero aleatrio, e, digamos, em 20 segundos novamente, ento esta uma tima funo para fazer isto. Este um nmero aleatrio: 0.9729471686634888 Aqui est o cdigo para este exemplo:
<html> <head> <script language="JavaScript"> function RandomNumber() { today = new Date(); num= Math.abs(Math.sin(today.getTime())); return num; } </script> </head> <body> <script language="JavaScript"> <!-document.write("Este um nmero aleatrio:", RandomNumber()); // --> </script> </body> </html>
Naturalmente, a funo aleatria mostrada aqui no uma grande coisa para todos os propsitos. Mas serve para que voc tenha uma idia bsica de como ela funciona. Vou apresentar aqui uma funo que eu peguei de Maynard Demmon. Voc tem que colocar os limites de varivel para o valor que voc precisa - 100, por exemplo. E ento voc ter um 'bom' valor de varivel entre 0 e 99. Aqui est o cdigo:
function random() { today = new Date(); num = today.getTime(); num = Math.round(Math.abs(Math.sin (num)*1000000)) % limits;
return num; }
Criando janelas Criar janelas uma das grandes caractersticas do JavaScript. Voc pode construir novas janelas, carregar documentos HTML, navegar pela Internet, tudo isso atravs do JavaScript. Eu vou lhe mostrar como se pode abrir uma janela e escrever alguma coisa nela. Se voc apertar esse boto ir ver o que eu estou querendo lhe explicar agora. Rompendo com as tradies, eu no escrevi Al mundo! nesta pgina... Aqui est a fonte:
<html> <head> <script language="JavaScript"> function WinOpen() { msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=no"); msg.document.write("<HEAD><TITLE>E aí?</TITLE></HEAD>"); msg.document.write("<CENTER><h1><B>Isso é muito legal!</B></h1></CENTER> "); } </script> </head> <body> <form> <input type="button" name="Button1" value="Aperte-me" onclick="WinOpen()"> </form> </body> </html> Como sempre, voc pode ver um boto que chama uma funo. A funo WinOpen() cria uma nova janela ao chamar o mtodo open. As primeiras aspas contm a URL da pgina. Ali voc pode colocar o endereo de um documento HTML que voc quer que seja carregado. Se voc as deixa em branco, nenhuma pgina carregada e se pode escrever nela com JavaScript! As aspas seguintes especificam o nome da janela. Ali voc pode escrever quase tudo - o que no tem nenhum efeito nos nossos exemplos agora. Mas voc ver uma mensagem de erro se escrever Display Window(com um espao em branco entre as duas palavras - A Netscape diz algo diferente nas informaes deles - mas eu fiquei sentado por mais de meia hora porque no conseguia achar o erro!) As prximas aspas especificam as propriedades da janela. Isto realmente interessante. Voc pode dizer se deseja uma barra de ferramentas, barras rolantes... Se voc escrever toolbar=yes, ento voc ter uma barra de ferramentas na sua janela. Voc ver algumas propriedades diferentes listadas abaixo que podem ser modificadas. Voc pode especificar qualquer propriedade possvel. Voc deve escrev-las da maneira como foi mostrado acima. E sem nenhum espao em branco entre elas! Eis como voc pode fazer mudanas na sua pgina: barra de ferramentas localizao diretrios status barra de menus barras rolantes redimensionar copyhistory width=pixels height=pixels Para pixels voc deve escrever o nmero de pixels. Desse modo possvel informar ao seu browser de que tamanho a janela deve ser. Depois que voc abriu a sua janela e a chamou de msg (situada diante do mtodo open), voc pode agora escrever dentro dela. Ali voc pode escrever o cdigo HTML normalmente! Isto uma grande coisa. Voc pode construir um documento HTML usando um input de formulrio que o usurio deu no documento anterior. Voc poderia criar uma pgina que surge depois que o usurio escreve o nome dele num formulrio, e a partir desse dado criado um novo documento HTML contendo este nome! H alguns meses atrs isso s era possvel com CGI Scripts! Mas, por favor, anote isto: Quando escrever alguma coisa numa janela voc deve sempre colocar um <br> depois do ltimo texto que fizer. De outro modo, provavelmente voc no poder ver as ltimas linhas do seu texto. Isto acontece porque o browser s escreve linhas completas - e se no houver um fim na linha, ele espera pelas prximas que supostamente viriam. Outra coisa importante isto: Se voc quiser inserir uma imagem na nova janela, assegure-se de colocar as propriedades height e width no tag <img>. De outro modo, voc no ver nenhuma imagem ou suas pginas se anularo de algum modo. Isto poderia causar alguns problemas estranhos que no tm nada a ver com a imagem propriamente. Assim, escreve alguma coisa como esta se voc no quiser ter nenhum problema: <img src="imagem.gif" height=100 width=100>
Muita gente j me perguntou como se trabalha com frames no JavaScript. Para usar frames no JavaScript voc deve ter pelo menos o Netscape Navigator 2.0 neste momento. claro que existem outros browsers que suportam frames tambm, mas em geral eles no suportam o JavaScript - embora eu ache que no vai demorar muito tempo para termos outros browsers que suportam frames e JavaScript ao mesmo tempo. Em primeiro lugar, eu gostaria de falar um pouco sobre frames. Muitas das documentaes sobre HTML no tm nada sobre sobre frames porque esse recurso uma coisa recente. Ao usar frames voc pode 'dividir' em vrias partes a janela que mostra as pginas HTML. Assim, voc ter algumas partes independentes na sua janela, e poder carregar pginas diferentes nos frames. Uma coisa legal que estes frames podem se interagir, isto , eles podem trocar informaes entre si. Por exemplo, voc poderia criar 2 frames, um com a sua pgina HTML normal e outro com uma barra de ferramentas. A barra de ferramentas poderia conter botes para navegao atravs da sua pgina HTML normal. Essa barra de ferramentas seria sempre visvel, mesmo quando outra pgina HTML fosse carregada no outro frame. Antes de mais nada eu gostaria de lhe mostrar como seria isso: pressione o boto e veja como so os frames (se voc estiver olhando para esta pgina online, ento vai ter que esperar um tempinho ao pressionar o boto nesta parte do tutorial porque os scripts so carregados a partir do servidor). Aqui est o script HTML para frames: <HTML> <HEAD> <title>Frames</title> </HEAD> <FRAMESET ROWS="50%,50%"> <FRAME SRC="frtest1.htm" name="fr1"> <FRAME SRC="frtest2.htm" name="fr2"> </FRAMESET> </HTML> Em primeiro lugar voc diz ao browser quantos frames voc quer ter. Isto se define no descritor <frameset...> . Ao designar linhas (rows) no descritor, o browser ir dividir o espao indicado em linhas. Voc tambm pode criar colunas se usar cols ao invs de rows. Voc tambm pode usar vrios descritores ou tags de <frameset...> ao mesmo tempo. Veja o exemplo dado pela Netscape: <FRAMESET COLS="50%,50%"> <FRAMESET ROWS="50%,50%"> <FRAME SRC="cell.html"> <FRAME SRC="cell.html"> </FRAMESET> <FRAMESET ROWS="33%,33%,33%"> <FRAME SRC="cell.html"> <FRAME SRC="cell.html"> <FRAME SRC="cell.html"> </FRAMESET> </FRAMESET> So criadas duas colunas, e a segunda coluna dividida em tres partes iguais. Os nmeros 50%,50% no primeiro descritor <frameset> informam ao browser o tamanho que os frames devem ter. Voc pode dar nomes aos seus frames. Isto importante para o uso com JavaScript. No primeiro exemplo acima possvel ver como se nomeiam os frames: ao se utilizar o tag <frame> voc informa ao browser que pgina HTML ele deve carregar.
Acho que os elementos bsicos dos frames so fceis de entender. Agora, d uma olhada no nosso prximo exemplo: Aqui se abre uma janela onde se pode clicar em alguns botes para que seja possvel escrever textos em outro frame. Segue-se a fonte: Para se criar frames, voc vai precisar (frames.htm): <HTML>
<HEAD> <title>Frames</title> </HEAD> <FRAMESET ROWS="50%,50%"> <FRAME SRC="frame1.htm" name="fr1" noresize> <FRAME SRC="frame2.htm" name="fr2"> </FRAMESET> </HTML> Aqui est a fonte de frame1.htm: <HTML> <HEAD> <script language="JavaScript">  </script> </HEAD> <BODY> Este é o nosso primeiro frame! </BODY> </HTML> E aqui o frame2.htm: <HTML> <body> Este é o nosso segundo frame! <p> <FORM NAME="buttonbar"> <INPUT TYPE="button" VALUE="Alô" onClick="parent.fr1.hi()"> <INPUT TYPE="button" VALUE="E aí?" onClick="parent.fr1.yo()"> <INPUT TYPE="button" VALUE="Bla" onCLick="parent.fr1.bla()"> </FORM> </BODY> </HTML> Uau! Estes scripts vo ficando cada vez mais longos! O que se fez agora? O usurio carrega o primeiro arquivo (frames.htm). Isto cria os frames e carrega os arquivos HTML frame1.htm no primeiro frame (nomeado como 'fr1') e frame2.htm no segundo frame (chamado 'fr2'). At agora isto puro HTML. Como se pode notar, o primeiro script frame1.htm contm algumas funes JavaScript. Mas elas no so chamadas no primeiro script. Ento por que elas seriam necessrias afinal de contas? Ser que eu sou to preguioso a ponto de no deletar essas funes desnecessrias? Ainda que eu seja mesmo um preguioso, na realidade essas funes so necessrias. Elas sero chamadas pelo segundo script frame2.htm! Ns criamos alguns botes neste segundo script do mesmo modo como fizemos na primeira parte desta introduo. A propriedade onClick j familiar tambm. Mas o que ser que significa parent.fr1... ? Se voc j familiarizado com esses objetos ento nada disso novidade. Como se pde notar acima, os arquivos frame1.htm e frame2.htm so convocados pelo arquivo frames.htm. Ns podemos dizer que frames.htm o pai dos outros dois frames. Conseqentemente os novos dois frames podem ser chamados de frames filhos de frames.htm. Voc pode observar que h uma certa hierarquia que proporciona um interrelacionamento entre os diferentes frames. Vou tentar demonstrar essa idia com a ajuda de um pequeno 'grfico' (arte ASCII descreveria isso muito melhor...): frames.htm pai / \ / \ / \ fr1(frame1.htm) fr2(frame2.htm) filhos lgico que voc pode estender este conceito. Voc pode criar tambm alguns 'netos' (se quiser chamar desse jeito - esta no uma expresso oficial!). Isso ficaria assim: frames.htm pai / \ / \ / \ fr1(frame1.htm) fr2(frame2.htm) filhos / \
/ \ / \ gchild1 gchild2
'netos'
Se voc deseja indexar alguma coisa ao frame-pai a partir de frame2.htm, basta colocar simplesmente parent. diante da funo que se pretende convocar. Para se referir s funes definidas em frame1.htm a partir do frame-pai, basta colocar fr1 diante da funo convocante. Por que fr1? No nosso script no frame-pai (frames.htm) ns criamos frames diferentes e lhes demos nomes diferentes. Eu escolhi fr1 para o primeiro frame. O passo seguinte fcil. Como se chama o primeiro frame se voc quer se referir a ele a partir de frame2.htm (o qual mantido no segundo frame chamadofr2)? Como se pode ver pelo meu horrvel grfico no h nenhuma conexo direta entre frame1.htm e frame2.htm. Por isso, no se pode convocar funes definidas em frame1.htm, diretamente a partir de frame2.htm. Voc deve se referir a elas atravs do frame-pai. Assim, a correta indexao parent.fr1. Se voc quiser convocar a funo hi() a partir de frame2.htm preciso escrever parent.fr1.hi(). Isto o que foi feito no segundo script na propriedade onClick.
Se voc criou alguns frames, e algum segue os links, os frames no vo desaparecer. Isso est correto se o usurio 'permanecer' na sua pgina. Voc poderia criar uma barra de menus que poderia ser mostrada em um frame todo o tempo, por exemplo. Mas se o usurio quiser saltar para outra pgina na Internet, a sua barra de menus no ser mais necessria. Ento, como se pode deletar os frames depois de criados? Coloque TARGET="_top" no seu descritor <a href...> . Isto ficar assim: <a href="saida.html" TARGET="_top">se voc no quiser mais ficar preso na minha pgina</a> Naturalmente voc deve colocar o TARGET="_top" em todos os links que conduzam 'para fora'. Se todos os links da sua pgina levarem 'para fora', voc tambm pode escrever <base target="_top"> no head da sua pgina HTML. Isto vai significar que todos os links da pgina apagam os frames.
Agora eu quero lhe mostrar como escrever um texto na barra de status (a barra que fica na parte de baixo do seu browser, onde so mostradas as URLs) e lhe explicar tambm como funciona uma barra de rolamento - se bem que elas j so odiadas no cenrio do JavaScript (eu lhe direi o porqu depois). Em primeiro lugar, como se 'direciona' a barra de status? Esse script vai lhe mostrar como se pode escrever um texto simples na barra de status:
Isso no legal? Aqui est o script:
<html> <head> <script language="JavaScript">  </script> </head> <body> <form> <input type="button" name="look" value="Write!" onclick="statbar('Oi! Essa é a barra de status!');"> <input type="button" name="erase" value="Erase!" onclick="statbar('');"> </form> </body> </html>
Ns criamos dois botes que convocam a funo statbar(txt). O txt entre parnteses demonstra que a funo adquire uma varivel que colocada na chamada da funo. (Eu a chamei de txt, mas poderia ser outra coisa qualquer.) Quando voc olha para o tag <form> onde os botes foram criados, pode ver que ali convocada a funo statbar(txt). Mas a gente no escreve txt l. Ns simplesmente colocamos o texto que queremos que o browser mostre na barra de status. Voc pode ver isto desse modo: a funo convocada e define a varivel txt ela assume o 'valor' que voc colocou na chamada da funo. Desse modo, quando se pressiona o boto 'Escreva!', a funo statbar(txt) convocada e txt armazena a seqncia 'Oi! Essa a barra de status'. Voc pode ento usar a varivel txt como de costume. Este mtodo de colocar variveis numa funo as torna instrumentos muito flexveis. Veja o segundo boto, ele convoca a mesma funo. Sem a colocao de uma varivel ns precisaramos de duas funes diferentes. Pois bem, o que que a funo statbar(txt) realiza? Isto muito simples. Voc apenas escreve o contedo de txt na varivel window.status. Isto feito atravs de window.status = txt;. Ao se escrever uma seqncia vazia na barra de status ('') ns simplesmente a apagamos. Observe que ns tivemos que usar estas aspas simples ' porque j usamos as aspas duplas " para definir onClick. O browser precisa saber quais so as aspas que formam par - por isso necessrio alternar aspas simples e duplas. Acho que isso bastante claro. Voc j conhece a propriedade onMouseOver da parte 2 do meu tutorial: <a href="stupid.htm" onMouseOver="window.status='Apenas outro link estupido...'; return true"> Voc no tem raiva quando v que a barra de status no se apaga quando a seta do mouse no est mais apontando para o link? Eu tenho uma soluo simples para isso. Basta escrever uma pequena funo que usa a mesma tcnica de apagar a barra de status que foi mostrada acima. Mas como poderamos convocar a funo apagadora? Ns no temos um mtodo ou propriedade que possamos usar para detectar se a seta do mouse est indo embora do link. A soluo colocar um cronmetro. Tente o seguinte script: aqui. S posicione o seu mouse sobre ele - no clique! Isso no jia? D uma olhadinha no cdigo e voc vai ver que muito mais fcil do que parece primeira vista.
<html> <head> <script language="JavaScript">  </script> </head> <body> <a href="dontclck.htm" onMouseOver="moveover('Desaparecendo!');return true;"> link</a> </body> </html> Voc vai reconhecer muitas partes desse script. A funo moveover(txt) s a funo statbar(txt) depois de algum trabalho de copiar/colar sobre ela! quase que a mesma coisa tambm com a funo erase(). Na pgina HTML ns criamos um link com a conhecida propriedade onMouseOver. A nossa funo moveover(txt) ento convocada com a seqncia 'Desaparecendo' sendo colocada na varivel txt. O window.status pega o contedo de txt. a mesma coisa que j aconteceu na funo statbar(txt). A funo setTimeout(...) entretanto nova. Esta funo cria um intervalo. Quem iria esperar uma coisa dessas? A funo setTimeout(...) define quanto tempo deve-se decorrer e o que acontecer quando este tempo se terminar. No nosso exemplo a funo erase() convocada aps 1000 milisegundos (isto equivalente a 1 segundo - para todos os craques de matemtica que esto por a). Este um aspecto fantstico! A funo moveover(txt) acaaba depois que se coloca um cronmetro. O browser chama a funo erase() automaticamente depois de 1 segundo. (Voc j est imaginando uma pgina que diga ao usurio: Se voc no fizer tal coisa o seu HD ser destrudo em 10 segundos! ???) Depois que o intervalo definido o cronmetro nunca mais se reinicia. Mas voc pode convoc-lo novamente, se quiser, na funo erase(). Isto nos leva diretamente s barras de rolamento amadas por todos.
Como voc j sabe como escrever na barra de status e como trabalha a funo setTimeout, as barras de rolamento sero fceis de se entender. Pressione este boto para ver a minha barra de rolamento. O script tem que ser carregado a partir do servidor, por isso lhe peo um pouco de pacincia se voc no vir o texto rolante imediatamente. D uma olhadinha no script:
<html> <head> <script language="JavaScript">  </script> </head> <body onLoad="scroll();return true;"> Aqui está a sua página bacana! </body> </html> Este script usa as mesmas funes (ou partes delas) que j usamos acima. O setTimeout(...) 'avisa' ao cronmetro para convocar a funo scroll() no tempo marcado. O rolamento ir funcionar no passo seguinte. No comeo tem um monte de clculos, mas isso no importante para se entender como funciona o script. Os clculos esto ali para indicar a posio em que o texto rolante deve comear. Se isso for logo no comeo, o script tem que adicionar alguns espaos para situar o texto corretamente. Eu disse no incio desta parte da minha introduo que os textos rolantes no so muito populares, ou que se eles ainda so populares no ficaro assim por muito tempo. Existem razes para isso. Eu posso listar vrias aqui, mas certamente haver muito mais. Se voc v esse efeito pela primeira vez ele pode parecer muito legal, mas se voc o vir 1 milho de vezes por a no vai mais parecer muito divertido. Bem, este no um bom argumento na verdade porque afeta quase todos os truques que voc pode usar em suas pginas. Mas h problemas mais graves. O que eu no gosto que ele muda a velocidade quando se movimenta o mouse (ele fica mais rpido!). Pelo menos isso acontece comigo. Esse efeito fica ainda mais forte quando se tenta fazer o texto rolante rodar um pouco mais rpido ao se modificar o valor do setTimeout. Talvez haja algum contorno para esse problema. Mas o pior que se voc deixa este script rodar algum tempo pode acabar recebendo uma mensagem de "Out of memory error" ("erro por falta de memria"). E isso realmente muito ruim. Parece ser um problema tpico do Netscape Navigator 2.0. Talvez uma verso maior tenha j resolvido esse problema. Existem muitas outras rotinas na Net. Eu j vi alguns textos rolantes escritos em frames. Programar isto no deve ser muito difcil.
Uma tcnica importante de programao o uso de matrizes. A maioria das linguagens de programao os suporta de algum modo. Talvez voc j tenha atingido um ponto em que as matrizes poderiam lhe ajudar ainda mais. Mas se voc der uma olhada na documentao fornecida pela Netscape vai notar que nada dito sobre matrizes. O problema que as matrizes no existem em JavaScript! Mas existe um meio de cotornar esse problema, claro! Em primeiro lugar, o que so matrizes? Ns poderamos dizer que as matrizes so uma juno de variveis. Digamos que voc queira juntar 10 variveis. Voc poderia comear com as variveis a, b, c ... Porm isto seria muito complicado. Particularmente se voc quisesse armazenar 100 variveis ou mais. Se voc tivesse uma matriz chamado 'MyArray' e dispusesse de 10 elementos, voc poderia direcionar os diferentes elementos com MyArray[1], MyArray[2], MyArray[3]... (muitas linguagens de programao comeam com o 0 como primeiro elemento, mas ns vamos comear com o 1 porque este o modo que passou a ser utilizado no JavaScript). Dessa maneira, se voc quiser ter o nmero 17 como primeiro elemento, basta escrever MyArray[1]=17. Observe que voc pode trabalhar com as matrizes da mesma maneira como se faz com as variveis normais. Mas existem alguns aspectos adicionais. Se voc quiser armazenar o nmero 17 em todos os elementos, voc deve escrever desse modo:
for (var i=1;i<11;i++) MyArray[i]=17<11;i++) O comando for avisa ao computador quantas vezes o prximo comando deve ser executado. O lao (loop) de for se inicia com i=1. Primeiro o computador recebe o comando MyArray[1]= 17. Depois disso i aumentado em 1 e ento o comando passa a ser MyArray[2]= 17. i aumentado at que ele atinja o valor 10. (The expression i<11 no lao de for tem que ser verdadeira; se i se tornar 11 ento a expresso no ser mais verdadeira. ) Agora eu vou lhe mostrar uma funo para iniciar as matrizes. Ela foi discutida numa Mailing List de JavaScript.
function initArray() { this.length = initArray.arguments.length for (var i = 0; i < this.length; i++) this[i+1] = initArray.arguments[i] } Voc no precisa entender essa funo, s precisa saber us-la. Se voc quiser criar uma matriz com trs elementos, basta escrever: var MyArray= new initArray(17,18,19). Para 17,18 e 19 so assignados os elementos 1,2 e 3. Voc poderia escrever outra seqncia qualquer na sua matriz se quisesse. No importa a figura que estar sendo usada! var aloai= new initArray("Isso","e'","legal"). No h problema tambm em se misturar figuras diferentes: var Mistura= new initArray(17,"oi",103). Eu vou iniciar agora a matriz 'Mistura' e lhe mostrar o resultado: Elemento No. 1: 17 Elemento No. 2: oi Elemento No. 3: 103 Este o script do resultado:
<script language="JavaScript">  </script>
Ontem eu escrevi um pequeno jogo, e ento me deparei com um problema que talvez voc tambm j tenha encontrado. Quando voc quer saber como limpar uma janela, e procura na documentao fornecida pela Netscape, vai encontrar a funo Javascript 'document.clear()'. Mas se voc tenta implementar esta funo no vai acontecer nada! Aparentemente a funo document.clear() no funciona em nenhuma plataforma. Gordon McComb me passou ento o seguinte script para se limpar janelas tal como eu pretendia.
document.close(); document.open(); document.write("<P>"); Voc no precisa escrever document.write("<P>");. O importante que voc mande alguma coisa para a janela. Isso funciona perfeitamente tambm com frames.
Agora ns vamos ver um script que permite que voc navegue atravs de diferentes documentos. Eu estou falando das funes back() e forward(). Se voc tiver um link do tipo "back" na sua pgina isso no a mesma coisa que o boto "back" do Navigator da Netscape. Eu, por exemplo, tenho alguns links do tipo "back" que funcionam normalmente como qualquer outro link. Mas eu sei que o usurio da minha pgina provavelmente provm de uma determinada pgina que tem um link com a minha. O boto de "back" do Netscape Navigator funciona dando um passo atrs na sua lista histrica, e isso o que voc tambm pode fazer com JavaScript. Pegue este link ento para dar um passo atrs! O script que eu uso aqui o que est aqui embaixo:
<html> <body> <FORM NAME="buttonbar"> <INPUT TYPE="button" VALUE="Back" onClick="history.back()"> <INPUT TYPE="button" VALUE="JS- Home" onClick="location='script.htm'"> <INPUT TYPE="button" VALUE="Next" onCLick="history.forward()"> </FORM> </body> </html> Voc pode escrever tambm history.go(-1) e history.go(1).
Eu recebi um monto de mails sobre o problema de como duas pginas podem ser carregadas com somente um clique do mouse. Basicamente, existem trs solues diferentes para esse problema. A primeira possibilidade criar um boto que convoque uma funo quando o usurio o pressionar. Esta funo deve carregar duas pginas em frames diferentes ou abrir novas janelas. Isto no vai parecer to difcil se voc der uma olhada nos exemplos dados nas outras partes desta introduo. Ns j temos aqui tudo o que precisamos. Ns criamos trs frames. O primeiro utilizado para o boto. A primeira pgina HTML necessria somente para a abertura dos frames e para nome-los. Nada disso novidade, pois ns j usamos esta tcnica na Parte 3 para trabalhar com frames, mas, de qualquer modo, eu vou fazer a demonstrao. (Eu no sei se isto acontece com voc tambm, mas toda vez que um autor de livros de informtica imagina que alguma coisa no precisa ser publicada por ser muito fcil, esta precisamente a parte com a qual ele tem mais problemas; mas, vamos l:) frames2.htm <HTML> <HEAD> <title>Frames</title> </HEAD> <FRAMESET COLS="295,*"> <FRAMESET ROWS="100%,*"> <FRAME SRC="loadtwo.htm" NAME="fr1"> </FRAMESET> <FRAMESET ROWS="75%,25%"> <FRAME SRC="cell.htm" NAME="fr2"> <FRAME SRC="cell.htm" NAME="fr3"> </FRAMESET> </FRAMESET> </HTML> loadtwo.htm carregado no primeiro frame. Este o frame que tem o boto. loadtwo.htm <HTML> <HEAD> <script language="JavaScript">  </script> </HEAD> <BODY> <FORM NAME="buttons"> <INPUT TYPE="button" VALUE="2 em uma linha" onClick="loadtwo('frtest1.htm','frtest2.htm')"> </FORM> </BODY> </HTML> A funo loadtwo() convocada quando o boto pressionado. Duas seqncias so colocadas na funo. Se voc olhar na funo loadtwo() ver que o segundo frame fr2 carrega a pgina que definida pela primeira seqncia na chamada da funo. Se voc tiver botes diferentes abrindo pginas diferentes, voc pode reutilizar esta funo. A nica coisa que se tem que fazer colocar as URLs (endereos) das diferentes pginas na funo.
A segunda tcnica lana mo de hiperlinks. Alguns exemplos navegando pela Internet tm alguma coisa parecida com: <a href="yourlink.htm onCLick="yourfunction()"> Mas essa tcnica aparentemente no funciona em todas as plataformas, assim o melhor no us-la. Alm do mais eu no estou nem seguro de que ela sequer funcione, afinal de contas. Mas no temos que nos preocupar com isso porque existe outro mtodo pelo qual podemos implementar o que queremos. Ns podemos declarar uma funo JavaScript do seguinte modo:
<a href="javascript:myfunction()">Meu Link</a> Isso realmente muito fcil e parece funcionar bem em todos os browsers. Basta escrever javascript: e em seguida o nome da sua funo dentro de um link. Se voc declarar a funo 'loadtwo()' do exemplo acima, poder atualizar dois frames com um nico clique do mouse sobre um hiperlink.
A terceira tcnica para carregar duas pginas com um clique de mouse pode ser a combinao de dois botes ou de hiperlinks normais. Ns poderamos fazer isso atravs da segunda tcnica demonstrada acima, mas essa abordagem daqui parece ser algumas vezes mais apropriada. O que se pode fazer carregar uma pgina HTML em um frame, assim: <a href="getfr2.htm" target="fr2">Clique aqui!</a> Mas ns j conhecemos isto. O que h de novo o acrscimo da propriedade onLoad no arquivo carregado. Por isso o arquivo getfr2.htm ficaria assim:
<HTML> <BODY onLoad="parent.fr3.location.href='getfr3.htm'; return true;"> bla bla bla </body> </html> Logicamente, voc tem que acrescentar isso a todos os documentos que forem carregados no segundo frame.
Outro problema j visto o de como podem ser carregadas novas pginas em uma nova janela. A janela se abrir quando o usurio clica num link. Voc s ter que acrescentar a propriedade target no seu tag (descritor) novamente. Isso ficaria assim: <a href="vaiondequiser.html" target="Janela Adicional">V!</a>
Agora vamos dar uma olhada nos diferentes operadores que podem ser usados no JavaScript. Os Operadores so uma tcnica poderosa para encurtar e melhorar o seu script. Se voc quisesse testar por exemplo se uma varivel x maior do que 3 e menor do que 10, voc poderia escrever desse modo:
if (x>3) if (x<10) doanything(); A funo doanything() seria convocada se x>3 e x<10. Mas existe um modo mais rpido de se escrever isto:
if (x>3 && x<10) doanything(); O && chamado de operador E. Existe tambm o operador OU. Voc pode usar isso por exemplo, se quiser constatar se uma varivel x igual a 5 ou outra varivel y igual a 17:
if (x==5 || y==17) doanything(); A funo doanything() ser convocada quando x==5 ou y==17. Ela tambm ser convocada se ambas as comparaes forem verdadeiras. As comparaes se fazem atravs do operador == no JavaScript (Naturalmente tambm existe <,>,<= e >=). Se voc conhece C/C++, a mesma coisa. Um nico = usado para armazenar um valor numa varivel. (Se voc conhece Pascal isso pode parecer um pouco confuso, porque assignar valores a variveis em Pascal se faz atravs de := e comparaes atravs de um nico =). Se vopc quiser ver se uma varivel no igual a um certo nmero, isso pode ficar um pouco complicado sem os operadores. Isto poderia ser feito com um nico !=. Veja s o exemplo: x != 17. Existem muitos outros operadores que podem fazer suas programaes de maneira mais eficiente. D uma olhada na documentao fornecida pela Netscape para ter o panorama completo de todos os operadores que se podem usar em JavaScript.
Informaes em formulrios so muito importantes para algumas pginas web. Muitas vezes essas informaes colocadas nos formulrios so enviadas de volta ao servidor. Mas o JavaScript consegue uma funcionalidade para validar as informaes postas em formulrios antes de envi-la ao servidor. Em primeiro lugar eu quero lhe mostrar como se pode validar os formulrios. Em seguida ns vamos dar uma olhada nas possibilidades de se enviar de volta informaes com JavaScript ou HTML. Antes de mais nada, vamos criar um script simples. A pgina HTML ter dois elementos textuais. O usurio deve escrever o seu nome no primeiro e um endereo de e-mail no segundo elemento. Mas voc pode escrever qualquer outra coisa nos elementos de formulrio e pressionar o boto. Tente tambm no colocar nada e pressionar o boto. Escreva o seu nome:
Escreva o seu e-mail:
A respeito das informaes que se pode escrever no primeiro elemento, voc vai receber uma mensagem de erro se no entrar com nenhum dado (no escrever nada). Qualquer informao escrita tida como vlida. claro que isto no previne que algum usurio coloque o seu nome errado. O browser aceita at nmeros. Se voc escrever o seu nome como '17' voc ter um retorno como 'Ol 17!'. J o segundo formulrio um pouco mais sofisticado. Tente colocar uma seqncia simples - o seu nome, por exemplo. Ele simplesmente no funciona (a no ser que voc tenha um @ no seu nome...). O critrio para que a informao seja aceita como um endereo de e-mail vlido o @. Um nico @ ir funcionar - mas certamente isto no far muito sentido. O ponto que todo endereo de correio eletrnico na Internet tem um @, e por isso parece ser mais apropriado checar os @s aqui. Qual a cara dos scripts para a validao desses dois elementos de formulrio? Ei-los:
<html> <head> <script language="JavaScript">  </script> </head> <body> <form name="first"> Enter your name:<br> <input type="text" name="text1"> <input type="button" name="button1" value="Teste a Informao" onClick="test1(this.form)"> <P> Enter your e-mail address:<br> <input type="text" name="text2"> <input type="button" name="button2" value="Teste a Informao" onClick="test2(this.form)"> </body>
Primeiro d uma olhada no cdigo HTML da seo body. Ns s criamos dois elementos textuais e dois botes. Os botes convocam as funes test1(...) ou test2(...), dependendo de qual deles for pressionado. Ns substitumos this.form pelas funes para que pudssemos direcionar os elementos corretos nas funes depois. A funo test1(form) testa se a seqncia vazia, o que feito atravs de if (form.text1.value == "")... . 'form' a varivel que recebe o valor 'this.form' na declarao da funo. Ns obtemos o valor do elemento colocado como dado por meio do uso de 'value' em combinao com form.text1. Para verificarmos se a seqncia vazia ns a comparamos com "". Se a seqncia colocada como dado for igual a "", ento nenhuma informao foi dada. O usurio ver uma mensagem de erro. Se alguma coisa for colocada, ento o usurio ver um ok. O problema aqui que o usurio pode tambm colocar espaos vazios como informao. E isto interpretado como um dado vlido! Se voc quiser, tambm pode checar essas possibilidades e exclu-las, naturalmente. Acho que isso seria muito fcil com os dados disponveis aqui. Agora d uma olhada na funo test2(form). Esta funo compara novamente a seqncia colocada como dado com a seqncia vazia "" para se assegurar de que alguma informao foi dada. Porm ns acrescentamos algo ao comando if. O smbolo || chamado de operador OU. Voc j foi apresentado pra ele na parte 6 desta introduo. O comando if serve para checar se o primeiro ou o segundo elemento da comparao o verdadeiro. Se pelo menos um deles for verdadeiro, ento todo o comando if ser verdadeiro e o comnado seguinte ser executado. Isso significa que voc ver uma mensagem de erro se a sua seqncia for vazia ou se no existir um @ nela. A segunda operao no comando if verifica se a seqncia posta como dado contm um @.
Quais so as diferentes possibilidades que existem para se enviar o contedo de um formulrio? A maneira mais fcil enviar os dados de um formulrio via e-mail. Este o mtodo que vamos olhar mais de perto. Se voc quiser ter um retorno sem e-mail, o seu servidor ter que manejar os dados automaticamente e, para isso, voc ter que usar no momento um arquivo CGI. Voc precisaria de CGI se quisesse, por exemplo, criar um engenho de busca como o Yahoo, onde o usurio obtm o resultado logo depois de ter fornecido os dados pelo formulrio. A pessoa no precisa esperar at que as pessoas que mantm este servidor leiam os dados e ento procurem a informao requisitada. Isto feito automaticamente pelo servidor. O JavaScript no tem a funcionalidade para fazer coisas como essas. Mesmo que voc queira criar um livro de visitas, no vai conseguir com JavaScript que o servidor acrescente automaticamente a informao numa pgina HTML hospedada nele. Neste momento s o CGI pode fazer isto. Mas, por outro lado, voc pode criar um livro de visitas onde as pessoas podem responder via e-mail. Entretanto, voc ter que dar entrada no retorno manualmente. Mas isto estaria ok se voc no espera receber 1000 retornos de mail por dia. Este script aqui puro HTML. Por isso, no se precisa de JavaScript aqui! S se, naturalmente, voc quiser checar os dados colocados antes de que o formulrio seja enviado. Mas eu devo dizer tambm que o comando 'mailto' no funciona em todos os browsers, apenas nos mais novos.
<FORM METHOD=POST ACTION="mailto:seu_email@vai.aqui"> <H3>Você gosta desta página?</H3> <INPUT NAME="choice" TYPE="RADIO" VALUE="1">Não é nada.<BR> <INPUT NAME="choice" TYPE="RADIO" VALUE="2" CHECKED>Perda de tempo.<BR> <INPUT NAME="choice" TYPE="RADIO" VALUE="3">O pior site da Net.<BR> <INPUT NAME="submit" TYPE="SUBMIT" VALUE="Enviar"> </FORM> Voc receber o retorno atravs de e-mail fazendo desse jeito. O nico problema que voc vai receber um mail que vai parecer um pouco criptogrfico primeira vista. Algumas vezes todos os espaos so preenchidos com '+', e outras vezes com '%20'. Por+isso,+ele+poderia+se+parecer+com+isto+aqui. Existem alguns programas corretores na Net, eu acho, que faro com que o mail recebido adquira um formato mais limpo.
Existe uma outra coisa legal que pode fazer com que os elementos do seu formulrio paream um pouco mais amigveis para o usurio. Voc pode definir que elemento deve ser enfocado no comeo. Ou ento voc pode dizer ao browser para enfocar no formulrio o lugar onde o dado fornecido est errado. Isto significa que o browser posicionar o cursor no elemento do formulrio que foi especificado para que o usurio no o envie antes de colocar os dados requisitados. Voc pode implementar este recurso com o seguinte script:
function setfocus() { document.first.text1.focus(); return; } Este script colocar o foco no primeiro elemento de texto do script que eu demonstrei acima. Voc dever especificar o nome do formulrio todo - no caso aqui, chamado de first -, e o nome do elemento de formulrio nico - que aqui text1. Se voc quiser colocar o foco neste elemento quando a pgina estiver sendo carregada, voc pode adicionar a propriedade onLoad no seu tag de <body>. Isto ficaria assim:
<body onLoad="setfocus()">

Curso Básico e Avançado de JavaScript

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Curso Básico e Avançado de JavaScript

Uploaded by

Copyright:

Available Formats

JavaScript

<html> <head> Meu primeiro JavaScript! </head> <body> <br>

<a href="stupid.htm" onMouseOver="window.status='Apenas outro link estupido...'; return true">

Mais funes de data

Isso no legal? Aqui est o script:

Escreva o seu e-mail:

You might also like