Proponha uma correção, faça uma sugestão
PHP é a quinta-feira – Introdução ao JavaScript (Parte II)
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.
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 <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.
Este artigo tem mais de um ano
Loading ...
Básico. Complicado para quem nunca viu js. Mas está simples de compreender.
😀
😉 Vamos ver se para quem nunca viu vai ser fácil de compreender… 😀 Assim esperamos!
Olá Pedro, posso deixar uma sugestão? É possível criares um site ou algo do género onde organizes todos os tutoriais? É que tens tanto trabalho mas é difícil conseguirmos seguir os teus artigos… Obrigado.
Resta dizer que para inserir javascript de uma maneira facil dentro de pedaços de codigo php (ou seja dentro dos ) usa-se o comando echo. Mas suponho que isto seja dito em proximas edições.
Bom trabalho Pedro!
Boa noite Alexandre, sim isso vem já a seguir. Obrigado! 🙂
Boa noite, sim isso vem já a seguir. 😉 Obrigado!
Seria interessante uma rubrica sobre jQuery
Boa noite la_marca, nesta rúbrica também será abordado jQuery. Tudo a seu tempo. 😀
Só um reparo, as tags onClick, onLoad e onUnload devem estar sempre em minúsculas. Isto se quiserem que o código passe sem erros no w3 validator
Uma boa aplicação desta mistura é fazer validação de formulários. Por exemplo, meter o javascript a validar cada campo (usando a func. match para expressões regulares). Assim, sempre que acontece um “onBlur” activa-se um elemento html com cor de texto vermelha ao lado a dizer que o campo está mal preenchido. Assim não é preciso submeter o formulário para o servidor e esperar para ver se o utilizador preencheu bem o formulário, e com isso poupa-se tráfego (que é uma das principais vantagens do js).
À primeira vista parece uma linguagem confusa, mas com prática vai-se lá.
Sim, exactamente. Também costumo fazer isso. Mas de qualquer forma a validação deve ser igualmente feita após submissão, do lado do PHP.
muito bons exemplos, ja utilizei js, para redirecionar para outras paginas e alertas juntamente com php.very good.Esperando por jquery, lol.
Interessant embora eu concorde que um artigo sobre jquery era mt interessante.
Nota: library e traduzido para biblioteca e n livraria
Desculpem, sou novato nisto, e não percebi muito bem o que fazer quando vi : “Para tal, comecem por criar um ficheiro vazio na pasta do servidor…”
Podem-me ajudar?
Desde ja obrigada !
Boa noite João, isto vem dos tutoriais de trás. Para começares a programar em PHP tens de instalar o PHP e o Apache. Existem pacotes que já instalam os dois juntamente com o mySql. Deixo-te alguns: WAMP, EasyPHP (Windows), MAMP (Mac), LAMP (linux). Depois de instalares vais ter uma pasta onde colocas os ficheiros. No entanto para este artigo, como não usamos php, podes criar o ficheiro em qualquer lado mas em vez da extensão .php coloca .html .
Cumprimentos
Para Windows normalmente uso o WAMP server…não te esqueças de iniciar o mesmo depois de instalares (botão esquerdo por cima do icon “W” da barra de tarefas) e clicar em Start All Services.
Depois é so acederes a raiz do servidor através do link http://localhost. Se és novato em programação web tenta perceber para que serve as diversas linguagens associadas (html, css etc) só depois avanças para linguagens server side (php asp…) . Também podes podes pesquisar um pouco sobre a grande diferença entre os dois tipos de linguagens (server side client side), um dos melhores sítios para aprenderes este tipo de coisas é o site da w3cshool (http://www.w3schools.com/) e no da lynda(http://www.lynda.com/) neste ultimo tem lá excelentes fascículos para aprenderes este tipo de coisas pena é que tens pagar para os ter…qualquer das maneiras com uma pesquisa do google podes encontra-los…mais em conta digamos.
Espero ter ajudado!
muito obrigado Pedro !