AULA 21: Utilização de Javascript
Nas páginas web utilizamos 'tags' html para definir tamanhos de letra, côres,
para inserir imagens e definir os seus tamanhos, etc
Mas todos os 'tags' html são lidos pelo browser, interpretados, e a página é
apresentada no ecrã como uma página estática.
Utilizando apenas tags html não é possível mudar o aspecto da página depois de
ela ser carregada ou implementar funcionalidades interactivas.
O 'Javascript' é o que permite mudar a situação : alterar o aspecto das páginas
depois de elas serem carregadas, personalizar as páginas, implementar pequenos
programas, entre muitas outras coisas.
Javascript é essencialmente uma linguagem de programação e foi inventada pela
Netscape, originalmente com o nome 'LiveScript'.
Aprender todos os pormenores do Javascript é tão difícil (ou fácil conforme a
experiência dos utilizadores) como qualquer outra linguagem de programação, mas
mesmo aqueles que não se querem dedicar à programação podem utilizar pequenos
'pedaços' de Javascript criados por outras pessoas nas suas páginas.
É preciso notar que Java e Javascript são duas coisas totalmente distintas, e a
única coisa semelhante entre estas duas linguagens é o nome 'Java' e nada mais.
Os comandos de Javascript podem estar entre os tags <script> e </script) ou
podem mesmo ser usados como atributos em alguns tags de html.
Para começar, vamos olhar para um pequeno exemplo
----------------------------------------------------
<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("Actualizado em :");
document.write(document.lastModified);
// -->
</SCRIPT>
----------------------------------------------------
Crie uma página web simples e insira esta rotina de Javascript algures no 'body'.
Como pode ver, os comandos estão inseridos entre o <SCRIPT> e o </SCRIPT>. O
atributo 'LANGUAGE' indica que este script está escrito em Javascript (é
possível utilizar outras linguagens).
O '<!--' indica aos browser mais antigos e que não suportam Javascript que devem
ignorar o que se segue.
O '// -->' indica que os browsers antigos devem parar de ignorar aqui.
O comando de Javascript aqui utilizado é o 'document.write' que faz com que algo
seja escrito na página exactamente no local onde foi colocado o srcript.
Este script escreve na sua página a data da última actualização da página.
Não podemos nesta aula descrever com pormenor os comandos, pois para isso
teríamos que explicar não só a estrutura modular do Javascript mas também dar
uma introdução à teoria da programação.
O objectivo é o aluno saber identificar 'pedaços' de Javascript e ficar a saber
o suficiente para ir à procura de script em outros sites para que os possa
utilizar no seu (desde que o autor do script em causa o permite obviamente, não
se pode simplesmente roubar scripts inseridos em outros sites).
Vamos agora olhar para outro exemplo
----------------------------------------------------
<SCRIPT LANGUAGE="JavaScript">
<!-- Começar a esconder de browsers antigos
alert("Carregue em OK para visitar Marte");
// parar de esconder-->
</SCRIPT>
----------------------------------------------------
E veja agora este exemplo :
----------------------------------------------------
<FORM>
<INPUT TYPE=BUTTON VALUE="Click aqui" onClick="alert('você clicou no botão')">
</FORM>
----------------------------------------------------
Neste exemplo que acabou de vêr o comando de Javascript não está inserido entre
o <script> e o </script>. Como foi dito no início desta aula existem duas
formas de utilizar comandos de Javascript : inseridos entre o <script> e o </script>
ou inseridos como atributos de tags html.
Aqui vemos que é o segundo caso.
<font face="arial, helvetica" size="3" style="text-decoration:none;" onmouseover="this.style.color='#ff0000'"
onmouseout="this.style.color='#BB1A02'"><b>Tecnologia</b></font>
----------------------------------------------------
Neste exemplo, quando se passa o cursor do rato por cima da palavra 'tecnologia'
ele muda de cor (aqui recorremos a funcionalidade de Cascading Style Sheets que
será explorada numa próxima aula).
Poderá ser um pouco difícil compreender tudo isto, especialmente para quem nunca
programou, mas lembramos mais uma vez que o objectivo é saber identificar
comandos de Javascript numa página para, pelo menos, saber onde o script começa
e acaba. Na maior parte dos casos é possível recorrer a um web site dedicado a
oferecer scripts de JavaScript e incluir um deles na página para atingir a
funcionalidade desejada.
Vamos então visitar um web site com scripts já feitos, e inserir um dos scripts
na página.
Comece por visitar o site http://javascriptsource.com/
Na barra lateral direita, mesmo por baixo de "Navigation Menu" encontra um menu.
Nesse menu escolha "Page Details" e prima "GO".
Na lista de scrips que aparecem escolha "Time Box" clicando na frase "Time Box"
(e não em 'get source code').
Aqui verá um exemplo do script já incluído numa página, neste caso uma pequena
caixa com a hora.
Por baixo do exemplo verá o código do script propriamente dito.
Mas note que neste exemplo temos que nos preocupar com uma coisa :
O 'script' propriamente dito, que tem os comandos entre o <script> e o </script>
devem ser incluídos na sua página entre o <head> e o </head> antes ou depois do
<title>.
Entre o <body> e o </body>, o local onde costuma inserir o seu texto e restante
tags, deverá incluir o pedaço de script indicado.
Isto porque o primeiro script define a 'função' e o segundo chama a função,
produzindo o pequeno relógio na página.
Quando copia um script para a sua página tenha sempre atenção ao local onde o
script deve ser inserido, se no <head> </head> se no <body> </body> ou, neste
caso, se o script está dividido em dois.
Explore este web site dedicado a scripts de Javascript e tente outros exemplos.
Recomendámos também que releia esta aula e experimente os exemplos. A prática
neste caso é mesmo essencial para perceber o funcionamento do Javascript.
