Por Pedro Peixoto para o PPLWARE
Tal como prometido na última semana, hoje vamos perceber como pode uma aplicação ou um website desenvolvido em PHP tornar-se mais interactivo recorrendo ao Javascript, a linguagem clientside mais usada em ambientes web. O objectivo será, daqui a algumas rubricas, perceber a fórmula explosiva da união do PHP com jQuery, uma livraria indispensável a qualquer programador WEB. Mas como tudo tem que começar por baixo, vamos então, ver na prática como podemos usar o Javascript nos nossos websites/webapps.
- O javascript é incorporado nas páginas HTML e interpretado pelo browser do cliente que acede à nossa página, sendo uma linguagem orientada a eventos.
- O PHP corre do lado do servidor, sendo que o cliente recebe uma página HTML que foi gerada através da programação PHP.
Assim, vulgarmente, nas nossas aplicações usamos o PHP para gerar conteúdo dinamicamente, ligar à base de dados e realizar operações pesadas ou que devem ocorrer num ambiente controlado. Já o Javascript pode ser usado para melhorar graficamente elementos HTML, criar efeitos agradáveis, melhorar a interacção do utilizador, etc…
Incorporar Javascript numa página HTML
Podemos colocar o nosso JS na própria página HTML ou então num ficheiro separado que depois será referenciado na página HTML. Por uma questão de facilidade, vamos começar por escrever o código JS na própria página HTLM. Para tal, comecem por criar um ficheiro vazio na pasta do servidor e alterar a extensão para .php por exemplo js.php.
Seguidamente abrimos o ficheiro num editor de texto (ex.: notepad ou notepad++), e criamos uma estrutura HTML:
<html>
<head>
</head>
<body>
</body>
</html>
O código JS pode colocar-se em qualquer parte, e escreve-se entre as tags <script>.
<script type="text/javascript"></script>
Para vermos algum resultado vamos aprender desde já a mostrar uma Mensagem ao utilizador, para isso chamamos a função alert();.
<html>
<head>
<script type="text/javascript">
alert("Ola PPLWARE!!!");
</script>
</head>
<body>
</body>
</html>
Se abrirmos a página no browser a mensagem surge normalmente:
Também podemos adicionar código javascript a eventos que disparam quando o utilizador realiza determinadas acções. Cada elemento javascript possui uma séria de eventos, como por exemplo:
- onLoad – Dispara quando o utilizador abre a página
- onUnload – Dispara quando o utilizador fecha a página
- onFocus – Dispara quando o elemento é selecionado, por exemplo quando se coloca o cursor numa caixa de texto.
- onBlur – Dispara quando o elemento deixa de estar selecionado.
- onChange – Dispara quando o utilizador muda o valor do elemento
- onMouseOver – Dispara quando o utilizador passa o cursor do rato por cima do elemento.
- onMouseOut – Dispara quando o cursor do rato sai de cima do elemento
- onClick – Dispara quando o utilizador clica no elemento.
- E muitos mais…
Vamos de seguida criar um botão que emita um aviso em alguns destes eventos.
<html>
<head>
<script type="text/javascript">
alert("Ola PPLWARE!!!");
</script>
</head>
<body onLoad="alert('Bem-vindo!');" onUnload="alert('Até já');"> <input type="button" value="Botao de teste de eventos" onClick="alert('clicaram-me');" onMouseOver="alert('rato em cima de mim');" onMouseOut="alert('rato saiu de cima de mim');"/>
</body>
</html>
De notar que nos eventos não necessitamos de colocar as tags <script>. Colocámos também código para os eventos onLoad e onUnload no body.
Depois de guardar e abrir a página no browser podem brincar um pouco com os eventos que criámos.
Agora, vamos aprender a ler valores dos elementos. É possível fazer isso de mil e uma maneiras mas, para já, a mais fácil é através do ID do elemento.
Em primeiro lugar vamos criar uma caixa de texto:
<input type="text" id="caixadetexto"/>
De seguida, vamos alterar o código do botão:
<html>
<head>
<script type="text/javascript">alert("Ola PPLWARE!!!");</script> </head>
<body onLoad="alert('Bem-vindo!');" onUnload="alert('Atá já');"> <input type="text" id="caixadetexto"/> <input type="button" value="Botao de teste de eventos" onClick="alert(document.getElementById('caixadetexto').value);" /> </body>
</html>
Assim, podemos aceder ao valor da textbox através da função “getElementById()” que recebe por parâmetro o id do elemento a acessar. De entre as propriedades disponíveis num elemento, a propriedade “value” indica o valor actual. Desta forma, quando o botão for pressionado surge uma mensagem com o valor actual da caixa de texto. Eis o resultado:
No entanto percebe-se que o código ficou um pouco confuso, e como tal vamos simplificar usando para tal as “funções”.
<html>
<head>
<script type="text/javascript">
alert("Ola PPLWARE!!!");
function mensagem()
{
alert(document.getElementById('caixadetexto').value);
}
</script>
</head>
<body onLoad="alert('Bem-vindo!');" onUnload="alert('Atá já');"> <input type="text" id="caixadetexto"/>
<input type="button" value="Botao de teste de eventos" onClick="mensagem();" />
</body>
</html>
O resultado é exactamente o mesmo.
E esta semana ficamos por aqui, já sabemos fazer output, inputs, funções e usar os eventos. Na próxima semana vamos aprender a integrar PHP com Javascript, e começar a fazer coisas mais complexas. O que acharam? Demasiado básico? Muito rápido para tanta coisa? Aguardo pelos vossos comentários.