JavaScript é uma nova linguagem para páginas Web. Os scripts escritos com JavaScript podem ser colocados dentro das suas páginas HTML. Com JavaScript você tem muitíssimas possibilidades de melhorar a sua página HTML com elementos interessantes. Você é capaz, por exemplo, de responder muito facilmente a eventos iniciados pelo usuário. Alguns dos efeitos que agora podemos fazer com Javascript, há algum tempo atrás só eram possíveis com CGI. Deste modo, você pode criar páginas muito sofisticadas com a ajuda do JavaScript. Você pode achar também muitos exemplos de Javascript na Internet. O melhor que se tem a fazer, então, é dar uma olhada em algumas páginas que ofereçam java script e copiar para poder entender sua propriedades. A diferença entre Java e JavaScriptAinda que os nomes sejam quase os mesmos, Java não é a mesma coisa que JavaScript! Essas são duas técnicas diferentes de programação na Internet. Java é uma linguagem de programação. JavaScript é uma linguagem de scripting (tal como diz o nome). A diferença é que se pode criar programas reais com Java. Na maioria das vezes, porém, você quer apenas criar um efeito chamativo, sem se importar com qualquer programa real. Assim, JavaScript foi pensado como algo fácil de se compreender e de se usar. Os autores de JavaScript não têm que se importar muito com programação. Nós poderíamos até dizer que JavaScript é muito mais uma extensão do HTML do que uma linguagem de computador separada. Conheça um pequeno javascript Agora eu quero vou mostrar um pequeno javascript. Assim você pode aprender como eles são implementados nos documentos em HTML e ficar sabendo quais são as possibilidades da nova linguagem de scripting. Eu começarei com um javascript pequeno, que só imprime um texto num documento HTML. <script language="javascript"> document.write("Este é um JavaScript!") </script> Obs.:Habilite seu navegador ao javascript. Eu mostrei como você deve usar os tags <script> e </script>, Você pode usar essas tags no seu documento no lugar que quiser. Vamos para as funções. Elas não são difíceis de se entender, e são muito mais úteis! As funções são melhor declaradas entre os tags de da sua página-HTML. As funções são convocadas por eventos iniciados pelo usuário. Por isso é razoável manter as funções entre os tags de . Elas são carregadas antes que o usuário possa fazer alguma ação que chamará a função. Os scripts podem ser colocados entre os campos de comentários internos para assegurar que os antigos browsers não mostrem o próprio script. <head> <script language="JavaScript"> function pushbutton() { alert("Alo!"); } </script> </head> <body> <form> <input type="button" name="Button1" value="Aperte-me" onclick="pushbutton()"> </form> </body> Se você quiser testar este script agora, e estiver usando um browser habilitado ao JavaScript, então siga adiante e aperte o botão. Este javascript irá criar um botão, e quando você o pressiona aparece uma janela dizendo 'Alo!'. Então, o que acontece neste javascript? Em primeiro lugar, uma função é carregada e guardada na memória. Depois é criado um botão 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 ao pressionar o botão a função é chamada (é claro que só quando o browser suporta JavaScript). A função 'pushbutton()' é declarada no cabeçalho (header). Quando o botão é pressionado a função é executada. O método 'alerta' Este método já é declarado no JavaScript - desse modo você só tem que chamá-lo. Existem muitos métodos diferentes que você pode chamar. Eu vou mostrar alguns aqui. formulário <head> <script language="JavaScript">  </script> </head> <body> Coloque o seu nome, e clique fora da caixa: <form> <input type="text" name="name" onBlur="getname(this.value)" value=""> </form> </body> Testando o javascript Coloque o seu nome, e clique fora da caixa: Nós temos alguns elementos implementados neste javascript. Em primeiro lugar, você certamente notou o comentário dentro do javascript. Dessa maneira você pode esconder o script dos browsers antigos que não podem rodar scripts. Você tem que manter a ordem daquilo que é mostrado! O início do comentário deve estar logo depois do primeiro tag de <script>. O comentário termina logo antes do tag de </script>. Neste documento HTML você tem um elemento de formulário onde o usuário pode colocar o seu nome. O 'onBlur' na tag de <input> avisa ao cliente que função que ele tem que chamar quando alguma coisa é colocada dentro do formulário. A função 'getname(str)' será chamada quando você 'deixa' este elemento de formulário, ou pressiona ou 'clica com o mouse fora da caixa' depois de haver colocado alguma coisa. A função pegará a seqüência que você colocou através do comando 'getname(this.value)'. 'This.value' significa o valor que você colocou neste elemento de formulário. última atualização Nós vamos implementar uma função de data dentro do nosso javascript. Assim, se você criou uma página HTML, você pode fazer o cliente imprimir a última modificação no documento. Você não precisa, entretanto, escrever a data no documento. Você simplesmente escreve um pequeno programa de javascript. Quando você fizer pequenas modificações no futuro, a data se modifica-rá automaticamente. <script language="JavaScript">  </script> Propiedade onMouseOver Verja agora esses dois exemplos <a href="#" onMouseOver="window.status='mensagem na barra de status...'; return true">link</a> Exemplo: Você poderá ver o efeito acima passando o mouse neste link Olhe agora para a barra de status na parte de baixo do seu browser. A única coisa que você tem que fazer é acrescentar a propriedade onMouseOver ao seu tag de link <a>. O 'window.status' lhe permitirá escrever texto na barra de status do seu browser. Como se pode ver, você tem que alterar as aspas. Você não vai poder usar " todo o tempo, porque se não o JavaScript não será capaz de identificar a seqüência que você quer imprimir na barra de status. Depois da seqüência você tem que escrever ;return true. <head> <script language="JavaScript">  </script> </head> <body> <a href="#" onMouseOver="hello()">link</a> </body> Se você levar a seta sobre este link uma janela se abrirá. Aqui se usa o método onMouseOver, e a função hello() é chamada quando ocorre este evento. Função data Você já viu a propriedade lastModified (última modificação) funcionando. Agora nós vamos imprimir a hora local no seu documento. Este método usa a hora e a data da sua máquina, assim se você colocou a data da sua máquina em 27/04/1978 você verá a data errada por este método também. Esta não vai ser a hora e a data da Internet (ou qualquer coisa parecida). Veja o código <script language="JavaScript">  </script> Criando janelas Criar janelas é uma das grandes características do JavaScript. Você pode construir novas janelas, carregar documentos HTML, navegar pela Internet, tudo isso através do JavaScript. Eu vou lhe mostrar como se pode abrir uma janela e escrever alguma coisa nela. Se você apertar esse botão irá ver o que eu estou querendo lhe explicar agora. Abaixo segue o código <head> <script language="JavaScript">  </script> </head> <body> <form> <input type="button" name="Button1" value="Aperte-me" onclick="WinOpen()"> </form> </body> Como sempre, você pode ver um botão que chama uma função. A função WinOpen() cria uma nova janela ao chamar o método open. As primeiras aspas contêm a URL da página. Ali você pode colocar o endereço de um documento HTML que você quer que seja carregado. Se você as deixa em branco, nenhuma página é carregada e se pode escrever nela com JavaScript! As aspas seguintes especificam o nome da janela. Ali você pode escrever quase tudo - o que não tem nenhum efeito nos nossos exemplos agora. Mas você verá uma mensagem de erro se escrever Display Window (com um espaço em branco entre as duas palavras) As próximas 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, então 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 possível. Você deve escrevê-las da maneira como foi mostrado acima. E sem nenhum espaço em branco entre elas! Eis como você pode fazer mudanças na sua página: width=valor - Largura em pixels da janela. height=valor - Altura em pixels da janela tollbar=yes/no - Exibe/oculta a barra de ferramentas location=yes/no - Exibe/oculta a barra de endereço Directories=yes/no - Exibe/oculta a barra de links menubar=yes/no - Exibe/oculta a barra de menu scrollbar=yes/no - Exibe/oculta a barra de rolagem resizable=yes/no - Determina se a janela terá tamanho redimensionável ou não Escrevendo um texto na barra de status Agora eu quero lhe mostrar como escrever um texto na barra de status e lhe explicar também como funciona uma barra de rolamento - se bem que elas já são conhecidas no cenário 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: Abaixo segue o código: <head> <script language="JavaScript">  </script> </head> <body> <form> <input type="button" name="look" value="Escrever!" onclick="statbar('Essa é a mensagem na barra de status!');"> <input type="button" name="erase" value="Apagar!" onclick="statbar('');"> </form> </body> Foram criados dois botões que convocam a função statbar(txt). O txt entre parênteses demonstra que a função adquire uma variável que é colocada na chamada da função. (foi chamada de txt, mas poderia ser outra coisa qualquer.) Quando você olha para o tag <form> onde os botões foram criados, pode ver que ali é convocada a função statbar(txt). Mas a gente não escreve txt lá. Nós simplesmente colocamos o texto que queremos que o browser mostre na barra de status. Você pode ver isto desse modo: a função é convocada e define a variável txt - ela assume o 'valor' que você colocou na chamada da função. Desse modo, quando se pressiona o botão 'Escrever!', a função statbar(txt) é convocada e txt armazena a seqüência 'Essa é a mensagem na barra de status'. Você pode então usar a variável txt como de costume. Este método de colocar variáveis numa função e as torna instrumentos muito flexíveis. Veja o segundo botão, ele convoca a mesma função. Sem a colocação de uma variável nós precisaríamos de duas funções diferentes. Pois bem, o que é que a função statbar(txt) realiza? Isto é muito simples. Você apenas escreve o conteúdo de txt na variável window.status. Isto é feito através de window.status = txt;. Ao se escrever uma seqüência vazia na barra de status ('') nós simplesmente a apagamos. Observe que nós tivemos que usar estas aspas simples ' porque já usamos as aspas duplas " para definir onClick. O browser precisa saber quais são as aspas que formam par - por isso é necessário alternar aspas simples e duplas. Acho que isso é bastante claro. Função back e forward Agora nós vamos ver um javascript que permite que você navegue através de diferentes documentos. Eu estou falando das funções back() e forward(). Se você tiver um link do tipo "back" na sua página isso não é a mesma coisa que o botão "back" do Explorer. Eu, por exemplo, tenho alguns links do tipo "back" que funcionam normalmente como qualquer outro link. Vendo os usuários que ao visitar por exemplo um buscador que você entra em uma página e depois prescisa voltar. O botão de "voltar" do Explorer funciona dando um passo atrás na sua lista histórica, e isso é o que você também pode fazer com JavaScript. Pegue os códigos do botão abaixo: Abaixo segue o código: <body> <FORM NAME="buttonbar"> <INPUT TYPE="button" VALUE="voltar" onClick="history.back()"> <INPUT TYPE="button" VALUE="home" onClick="location='paginadois.html'"> <INPUT TYPE="button" VALUE="avançar" onCLick="history.forward()"> </FORM> </body> Informações em formulários são muito importantes para algumas páginas web. Muitas vezes essas informações colocadas nos formulários são enviadas de volta ao servidor. Mas o JavaScript consegue uma funcionalidade para validar as informações postas em formulários antes de enviá-la ao servidor. Em primeiro lugar eu quero lhe mostrar como se pode validar os formulários. Em seguida nós vamos dar uma olhada nas possibilidades de se enviar de volta informações com JavaScript ou HTML. Antes de mais nada, vamos criar um script simples. A página HTML terá dois elementos textuais. O usuário deve escrever o seu nome no primeiro e um endereço de e-mail no segundo elemento. Mas você pode escrever qualquer outra coisa nos elementos de formulário e pressionar o botão. Tente também não colocar nada e pressionar o botão. Entre com seu nome: Entre com seu e-mail: O código segue abaixo: <html> <head> <script language="JavaScript">  </script> </head> <body> <form name="first"> Entre com seu nome:<br> <input type="text" name="text1"> <input type="button" name="button1" value="Teste a Informação" onClick="test1(this.form)"> <P> Entre com seu e-mail:<br> <input type="text" name="text2"> <input type="button" name="button2" value="Teste a Informação" onClick="test2(this.form)"> </body> A respeito das informações que se pode escrever no primeiro elemento, você vai receber uma mensagem de erro se não entrar com nenhum dado (não escrever nada). Qualquer informação escrita é tida como válida. É claro que isto não previne que algum usuário coloque o seu nome errado. O browser aceita até números. Se você escrever o seu nome como '17' você terá um retorno como 'Olá 17!'. Já o segundo formulário é um pouco mais sofisticado. Tente colocar uma seqüência simples - o seu nome, por exemplo. Ele simplesmente não funciona (a não ser que você tenha um @ no seu nome...). O critério para que a informação seja aceita como um endereço de e-mail válido é o @. Um único @ irá funcionar - mas certamente isto não fará muito sentido. O ponto é que todo endereço de correio eletrônico na Internet tem um @, e por isso parece ser mais apropriado checar os @s aqui.