Introdução
ao JavaScript
Você poderá ver o futuro próximo 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ê também pode combinar
esta função do Javascript com outras funções. 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ê 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.
O segundo exemplo usa o JavaScript chamando a função alerta. Segue aqui o código:
<html> <head> <script language="JavaScript"> <!-- Hiding function hello() { alert("Alo!"); } // --> </script> </head> <body> <a href="" onMouseOver="hello()">link</a> </body> </html>
Isto é muito fácil. Aqui se usa o método onMouseOver, e a função hello() é
chamada quando ocorre este evento.
Agora eu quero lhe mostrar outro exemplo usando os métodos de hora e 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 17/5/1983 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).
Segue aqui o código:
<script language="JavaScript"> <!-- Hiding today = new Date() document.write("A hora agora é: ",today.getHours(),":",today.getMinutes(),".") document.write(" A data é: ", today.getDate(),"/",today.getMonth()+1,"/",today.getYear()); // end hiding contents --> </script>
Em primeiro lugar nós estamos criando uma variável de data. Isto é feito por today=new
Date(). Se nós não especificarmos uma hora e data determinadas, o browser usará a
sua hora local e a colocará na variável today. Observe que nós não temos que
declarar a variável today em nenhum lugar. Esta é uma diferença com relação ao
Java e com a maioria das outras linguagens de programação em que você tem que
especificar os tipos que você quer usar antes de usá-los efetivamente. Nós criamos um
objeto hora que guarda a hora e a data locais. Agora nós podemos simplesmente escrever o
seu conteúdo no documento. Você tem que escrever today antes de cada método
"get", se não o browser não reconhecerá o objeto ao qual ele deve se referir.
O método getMonth() retorna um número entre 0 e 11 (0 ficando para janeiro e 11 para
dezembro). Dessa maneira, nós temos que adicionar 1 ao número retornado para se obter o
mês 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 alguém
estaria lendo o seu documento. E se isso fosse mais do que 10 dias depois você poderia
lhe dizer: Ei cara, isso é muito velho, não leia!
Para isto você precisaria da data de hoje, tal como mostrada acima, e da data de
criação. Você pode fixar uma data enquanto está criando um objeto-data. Isto teria a
seguinte aparência: docStarted= new Date(96,0,13)
Você deve especificar o ano em primeiro lugar, depois o mês (lembre-se de diminuir o
mês em uma unidade!), e então colocar o dia. Você também pode especificar a hora: docStarted=
new Date(96,0,13,10,50,0)
Os primeiros números são ainda parte da data. Eles são seguidos pela hora, pelos
minutos, e pelos segundos.
Eu devo também lhe informar que o JavaScript não tem um tipo real de data. Mas, como se pode ver, é perfeitamente possível trabalhar com datas. Isto funciona porque as datas são representadas por números de milisegundos desde 1/1/1970 às 0:0h. Apesar de parecer muito complicado, este é um método comum de representar datas nos computadores. Mas você não deve se incomodar com isto. Você só deve cuidar das funções, e essa não é uma tarefa tão difícil. Eu só quis lhe dizer isso para que você não pense que eu estou lhe passando uma informação errada.
Um problema comum é como você pode usar números aleatórios ao programar e ao escrever linguagens. Nesse momento a função aleatória não funciona no JavaScript, mas acredito que ela deve ser implementada logo. Por ora nós temos que fazer alguns truques. Bem, na verdade isto não é realmente um truque, mas um modo comum que quase todos os programas que eu conheço usam para calcular números aleatórios. Sim, na verdade eles os calculam. Você pega a hora e a data da sua máquina e a manipula de algum modo. Eu acredito que a linguagem JavaScript final usará também este método (ou algum tipo dele). Como eu lhe disse antes, a hora é apenas um número bem grande. Você pode usar este número para fazer alguns cálculos com ele. Você poderia por exemplo calcular o seno deste número e ter o seu valor absoluto. Isto dará um número entre 0 e 1. Como a hora muda a cada milisegundo você não correrá o risco de ter o mesmo número duas vezes (quando se os calcula adiantadamente um depois do outro). Se você quer calcular muitos números aleatórios num período curto, então não deve usar o sin() sozinho. Se não, você terá números que seguem uma curva de seno! Isto não seria realmente aleatório. Mas se você quer calcular um número aleatório, e, digamos, em 20 segundos novamente, então esta é uma ótima função para fazer isto.
Este é um número aleatório:
Aqui está o código 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 número aleatório:", RandomNumber()); // --> </script> </body> </html>
Naturalmente, a função aleatória mostrada aqui não é uma grande coisa para todos os propósitos. Mas serve para que você tenha uma idéia básica de como ela funciona. Vou apresentar aqui uma função que eu peguei de Maynard Demmon. Você tem que colocar os limites de variável para o valor que você precisa - 100, por exemplo. E então você terá um 'bom' valor de variável entre 0 e 99. Aqui está o código:
function random() { today = new Date(); num = today.getTime(); num = Math.round(Math.abs(Math.sin (num)*1000000)) % limits; return num; }
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.
Rompendo com as tradições, eu
não escrevi Alô mundo! nesta página...
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 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 - A Netscape diz algo diferente nas informações deles - mas eu fiquei sentado por mais de meia hora porque não conseguia achar o erro!) 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:
barra de ferramentas
localização
diretórios
status
barra de menus
barras rolantes
redimensionar
copyhistory
width=pixels
height=pixels
Para pixels você deve
escrever o número de pixels. Desse modo é possível 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 método open),
você pode agora escrever dentro dela. Ali você pode escrever o código HTML normalmente!
Isto é uma grande coisa. Você pode construir um documento HTML usando um input de
formulário que o usuário deu no documento anterior. Você poderia criar uma página que
surge depois que o usuário escreve o nome dele num formulário, e a partir desse
dado é criado um novo documento HTML contendo este nome! Há alguns meses atrás isso só
era possível 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ê não poderá ver as últimas
linhas do seu texto. Isto acontece porque o browser só escreve linhas completas - e se
não houver um fim na linha, ele espera pelas próximas 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ê não verá nenhuma imagem ou suas páginas se anularão de algum
modo. Isto poderia causar alguns problemas estranhos que não têm nada a ver com a imagem
propriamente. Assim, escreve alguma coisa como esta se você não quiser ter nenhum
problema:
<img src="imagem.gif" height=100 width=100>