: : SCRIPTS HELP : : O Futuro do Web Design

JavaScript é uma linguagem usada junto com o html, que está presente em 90% dos sites, seja ele grande ou pequeno. Com JavaScript várias maneiras rápidas, fáceis e compatíveis de tornar um site muito mais dinâmico. Alguns exemplos de efeitos feitos através de javascripts, mais usados que encontramos hoje na internet são as datas, saudações como "bom dia", "boa tarde" ou "boa noite", efeitos de onmouseover onde uma imagem muda quando você passa o mouse por ela, dentre vários outros. 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 e encontrar milhares de códigos javascripts na internet para melhorar ainda mais seu site.

Ainda 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. O mais 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. Naturalmente essa não é uma definição "oficial" mas acho que ela torna mais compreensível a diferença entre Java e JavaScript.

O primeiro browser a suportar JavaScript foi o Netscape Navigator 2.0. É claro que as versões maiores também rodam JavaScript. Você deve saber que nem toda as versões de Netscape Navigator 2.0 (ou maiores) rodam Java. Mas isso não é verdadeiro para o JavaScript - ainda que existam problemas entre as diferentes versões. A versão Mac, por exemplo, parece ter apresentado muito defeito. No futuro próximo deverá haver outros browsers que suportarão também 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 técnica logo. Você já deve estar imaginando que é realmente fácil escrever scripts de JavaScript. Tudo o que se tem a fazer é conhecer algumas técnicas básicas, e trabalhar algum tempo em torno dos problemas que você pode encontrar.
Naturalmente, você vai necessitar de um conhecimento básico de HTML antes de começar a ler este tutorial. Você pode achar muitos recursos on-line sobre HTML que são excelentes. O melhor é fazer uma busca on-line de 'html' no Yahoo, se você quer ficar por dentro da matéria. (Esses documentos on-line são freqüentemente mais atualizados do que livros: a Internet anda muito rápida atualmente...)

Agora eu quero lhe mostrar alguns pequenos scripts. 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 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 não suporta JavaScript então este resultado deve ser algo estranho...

Devo admitir que este script não é muito útil. Você poderia escrever a mesma coisa no HTML de maneira muito mais rápida 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 não desejo aborrecê-lo com scripts tão estúpidos. Vamos passar logo para as funções. Elas também não são difíceis de se entender, mas, acredite-me, são muito mais úteis! As funções são melhor declaradas entre os tags de <head> 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 <head>. 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.

<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, então siga adiante e aperte o botão.

Este script irá criar um botão, e quando você o pressiona aparece uma janela dizendo 'Alo!'. Não é legal? Então, o que acontece neste script? 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 função ele tem que chamar quando o botão é pressionado (é 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. Tem uma coisa nova neste script - 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. Você pode encontrar uma descrição completa no site da Netscape. Eu acho que essa lista vai se tornar muito maior num futuro próximo. Mas já neste momento existem algumas coisas legais que nós podemos fazer com esses métodos já dados.
(Eu não acho que o método 'alerta' foi pensado para ser usado desta maneira - mas a gente só está aprendendo. E desse modo é muito mais fácil de se entender. Eu espero que você me perdoe...)

Nós já chegamos bem longe por agora. De fato, nós temos um monte de possibilidades apenas adicionando funções aos nossos scripts. Agora eu vou lhe mostrar como você pode ler alguma coisa que o usuário colocou num formulário.

<html>
<head>
<script language="JavaScript">
<!--  hide script from old browsers
  function getname(str) {
    alert("Oi, "+ str+"!");
  }
// end hiding contents -->
</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:

Nós temos alguns elementos novos implementados neste script novamente. Em primeiro lugar, você certamente notou o comentário dentro do script. 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' no 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 o 'enter' depois de haver colocado alguma coisa. A função pegará a seqüência que você colocou através do coamndo 'getname(this.value)'. 'This.value' significa o valor que você colocou neste elemento de formulário.

No momento esta propriedade parece não funcionar em todas as máquinas. Alguns servidores só mostram a data 1/1/1970. Parece haver alguns problemas com essa função. Nós temos que esperar pela próxima atualização e torcer para que isto funcione adequadamente em todas as máquinas. Mas você pode testar isto na sua própria máquina - em algumas isso parece funcionar muito bem.

Como eu já disse, as coisas estão mudando muito rápido hoje em dia. Assim, não seria muito divertido se na semana que vem houvesse uma tremenda mudança no JavaScript! Deste modo, você deve sempre ficar de olho nas últimas novidades, pois essa linguagem é muito nova. Seja compreensível se algumas das coisas aqui mencionadas também se modificarem. Mas eu acho que os princípios básicos deverão permanecer os mesmos.