PHP é a quinta-feira – Introdução ao JavaScript (Parte II)

PHP é a quinta-feira – Introdução ao JavaScript (Parte II)

Criado por Pedro Pinto em 9 de Junho de 2011 | 16 comentários

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.
php_java
Mas antes de começar, vamos “separar as águas”:

  • 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 .


Para vermos algum resultado vamos aprender desde já a mostrar uma Mensagem ao utilizador, para isso chamamos a função alert();.

<html>
<head>

alert("Ola PPLWARE!!!");

</head>
<body>
</body>
</html>

Se abrirmos a página no browser a mensagem surge normalmente:

clip_image002

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>

alert("Ola PPLWARE!!!");

</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 . 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.

clip_image004

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:


De seguida, vamos alterar o código do botão:


alert("Ola PPLWARE!!!"); </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:

clip_image006

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>

alert("Ola PPLWARE!!!");
function mensagem()
{
alert(document.getElementById('caixadetexto').value);
}

</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.

Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão /  Alterar )

Google photo

Está a comentar usando a sua conta Google Terminar Sessão /  Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão /  Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão /  Alterar )

Connecting to %s