PHP e Javascript – Parte III
Criado por Pedro Pinto em 16 de Junho de 2011 | 22 comentários
PHP e Javascript Parte III
por Pedro Peixoto
Como vimos nos dois últimos artigos, o Javascript vem trazer às nossas aplicações WEB a interacção e flexibilidade que uma linguagem server-side como o PHP não consegue oferecer. Nesse sentido, decidimos mudar o nome da rubrica “PHP é a quinta-feira” para “Programação WEB é à Quinta-feira! “. Esta semana continuamos a explorar esta linguagem que se tem assumido como a principal linguagem WEB, para além de aumentar um pouco o grau de complexidade da nossa programação vamos também perceber como fazer a integração do JS com o PHP.
No último artigo aprendemos o que são eventos, funções e os conceitos básicos da programação com JS. O Javascript ao contrário do que muita gente pensa, é uma linguagem muito completa, para além das funções básicas que todas as linguagens de programação “tem” de oferecer, existem funções para tratamento de strings, cálculos matemáticos, arrays, entre muitas outras. Além disso, existem inúmeras bibliotecas que facilitam e expandem o uso do Javascript. Não há limites, é dar asas à imaginação, a interacção e personalização podem ser levadas ao extremo!
Hoje vamos fazer um pequeno exemplo prático onde usaremos eventos, funções, estruturas de controlo, variáveis, inputs e outputs. Será um pouco de tudo o que é necessário para qualquer funcionalidade JS. Vamos então aprender a apresentar conteúdo diferente nos nossos formulários após uma escolha do utilizador.
Antes de mais vamos criar a página HTML com os componentes necessários.
<html> <head> </head> <body Que sistema usa?</br> <select> <option value="1">iPhone</option> <option value="2">Android</option> <option value="3">Windows Mobile</option> <option value="4">Outro</option> </select> <span id="comentario"></span> </body> </html>
Colocámos um elemento <select> que permite ao utilizador efectuar uma escolha entre as diferentes opções, de seguida inserimos um <span> que vai permitir apresentar conteúdo de acordo com a escolha do utilizador. Falta agora o código Javascript. A estratégia é usar o evento onChange (accionado quando o utilizador altera o valor do select) para chamar uma função passando o valor seleccionado. Dentro da função colocaremos um switch/case, que dependendo da escolha coloca conteúdo diferente no <span>.
<html>
<head>
function apresentaConteudo(escolha)
{
var elemento=document.getElementById('comentario');
switch(escolha)
{ case '1': elemento.innerHTML='Viva a Apple!'; break;
case '2': elemento.innerHTML='Bem-vindo google fan!'; break;
case '3': elemento.innerHTML='Wiiinnnndddowwwssss!!!'; break;
case '4': elemento.innerHTML='Qual?'; break; }
}
</head>
<body
Que sistema usa?</br>
<select onChange="apresentaConteudo(this.value)" id=”dispositivo”>
<option value="1">iPhone</option>
<option value="2">Android</option>
<option value="3">Windows Mobile</option>
<option value="4">Outro</option>
</select>
<span id="comentario"></span>
</body>
</html>
O resultado é o esperado:
Podemos ainda mudar a função de maneira a apresentar mais um elemento <select> no caso do utilizador escolher “Outro”:
function apresentaConteudo(escolha)
{
var elemento=document.getElementById('comentario');
switch(escolha)
{
case '1': elemento.innerHTML='Viva a Apple!'; break;
case '2': elemento.innerHTML='Bem-vindo google fan!'; break;
case '3': elemento.innerHTML='Wiiinnnndddowwwssss!!!'; break;
case '4': elemento.innerHTML='Qual?
<br />
<select><option selected>Bada</option><option>Symbian</option></select>'; break;
}
}
Poderíamos também ter obtido o valor seleccionado dentro da própria função para isso teríamos de usar:
“document.getElementById(‘dispositivo’).value”
Como facilmente se conclui, o atributo innerHTML permite aceder ao código HTML que está dentro do elemento, por sua vez, o atribuo value permite aceder ao valor se um componente. Existem inúmeraspropriedades que nos possibilitam interagir totalmente com os elementos de uma página HTM, por sua vez os elementos também podem ser acedidos querem directamente (através do ID, classe), quer indirectamente usando a estrutura DOM.
Por último, vamos aprender como integrar PHP e Javascript, é um processo muito rápido. No fundo o PHP, corrido no servidor, cria dinamicamente ou de forma estática o código Javascript. Para tal, é necessário que o nosso ficheiro tenha extensão PHP e seja aberto no servidor (para poder ser interpretado). O código JS é construído como qualquer outro código HTML, vulgarmente usando o comando “echo” do PHP.
<?php echo ‘Ano: <select onChange=”alert(\’Mudei!\’)”><option>’ . date(‘Y’) . ’</option><option>’ . (date(‘Y’)-1) . ’</option></select>’; ?>
No exemplo de cima podemos ver que quando escrevemos JS com PHP, no caso de estarmos a recorrer às plicas ou aspas para delimitar a string PHP, temos que usar a \ para de seguida podermos usar a plica ou aspa respectivamente.
Poderemos ainda usar PHP para popular elementos HTML usando JAVASCRIPT, sem ser necessário recarregar a página. De facto cada vez mais encontramos páginas onde as acções parecem instantâneas, como se a página estivesse em constante comunicação com o servidor. Para isso usamos AJAX que no fundo permite que a página, através de Javascript, faça um pedido http (que pode ser uma página gerada em PHP) sem ser recarregada. O AJAX assume por isso cada vez mais importância nas aplicações WEB PHP, no entanto devido à complexidade inútil do uso directo do AJAX, não avançaremos para esta fase sem a ajuda de bibliotecas que simplificam este processo.
Em conclusão, o Javascript é uma linguagem flexível, e corresponde às exigências vulgares de uma página WEB, é bastante completa no entanto, quando pretendemos fazer coisas mais elaboradas, principalmente ao nível de efeitos gráficos ou tratamento elaborado de dados, temos muito código para escrever sendo que o JS poderia e deveria ter funções que correspondessem directamente às necessidades mais comuns e particulares da programação WEB. Podemos “contornar” este problema recorrendo a bibliotecas. Desta forma vamos no próximo artigo aprender a fazer mais escrevendo menos, para tal recorremos ao jQuery. Esta biblioteca JS permitirá com simples linhas de código efectuar grande parte das tarefas comuns de uma página de Internet.
Hom Digitalis 