PHP ou Javascript? Qual a diferença?

Em perguntas que tenho recebido de leitores do Ahã… Programando… tenho percebido que alguns tem dificuldade de perceber a diferença de trabalho do PHP e do Javascript. Em linhas gerais quero tentar lançar alguma luz sobre o entendimento das funcionalidades destas ferramentas.

Em primeiro lugar vamos entender a internet:

O browser – Este tem as conexões com o servidor restritas ao momento de receber o conteúdo solicitado pelo usuário. Após a página ser carregada por completo a conexão é desfeita. Assim não há conhecimento por parte do servidor quanto ao que o usuário está fazendo com a página carregada no browser. E após o carregamento da página o servidor somente entrará em cena novamente quando o usuário clicar em um link, um botão de enviar ou coisa semelhante, aí novamente o browser irá localizar o servidor na web e solicitar a execução de algum serviço que traga outro conteúdo.

HTML – Hypertext Markup Language (linguagem de marcação de texto). Em sua essência o HTML é texto, só que com marcações denominadas TAG’s, delimitadas pelos caracteres “<” e “>”. Toda a página que for buscada no servidor deve trafegar pelo protocolo HTTP (Hypertext Transfer Protocol) que é o protocolo perfeito para transferência de HTML entre servidor e browser no cliente.

O interesse do browser por sua vez recai em interpretar estas tags, e classificar cada uma de acordo com sua serventia em um espaço reservado na memória do computador. Esta classificação se dá em estrutura de objetos. Nesta organização fica bem mais fácil de o browser “saber” o que é um botão, uma caixa de texto, saber dentro de quais tags estes componentes se encontram, monitorar seus eventos, renderizar os componentes na tela relacionando com CSS e tal.

Com o fim de que programadores WEB como nós pudéssemos acessar e manipular estes OBJETOS,  a netscape criou uma linguagem de script que por fim foi denominada Javascript (nossa amiga). Assim, no mesmo texto que provém do servidor e compõe o HTML podemos dar comandos Javascript para controlar os objetos criados a partir do HTML, e modificar a forma como estes são apresentados ou trabalhados. Vc já deve ter observado que Javascript não manipula as tags HTML como se fossem simples strings, mas objetos. Com propriedades, métodos e eventos.

Por exemplo, veja o HTML a seguir:

<html>
<body>
<div id=”coisa”></div>
</body>
</html>

Supondo que se queira adicionar um texto qualquer dentro da div coisa utilizando Javascript, utilizaríamos a seguinte sintaxe:

<script language=”javascript”>
var objeto_coisa = document.getElementById(“coisa”);
objeto_coisa.innerHTML = “um texto qualquer”;
</script>

Como isto funciona?

Primeiramente o objeto correspondente a id coisa precisa ser instanciado para uma variável através de getElementById. A instância (cópia, referência) é colocada na variável objeto_coisa. A partir desta variável podemos chamar métodos (funções) e propriedades (variáveis) do objeto. No caso apenas um texto foi lançado na propriedade innerHTML (Html interno) da tag referida pela variável objeto_coisa. Isto não modificou o HTML original colocando o texto no meio da tag. Mas modificou o objeto da div coisa que está na memória, e fez com que o browser apresentasse na tela o texto que foi atribuído para coisa.

Este teste pode ser reproduzido em sua máquina com a simples cópia dos 2 trechos de código anteriores, e a seguir colando em um arquvo “.html” e testar, eu testei e funciona hehehe.

Javascript precisa de alguma instalação ?
Não, da mesma forma que um Navegador de Internet tem suporte a interpretação de HTML por natureza, o mesmo ocorre com a linguagem Javascript. É preciso porém verificar se o browser está com o Javascript ativado. Por alguma medida de segurança tomada o Javascript de seu navegador pode estar desativado, e aí não funciona.

E o PHP como funciona?

Já o PHP é executado no lado servidor. Este geralmente é utilizado para criar ou complementar o HTML que é enviado do servidor para o BROWSER de forma dinâmica. E no caso do PHP, como sua única função é criar o HTML sem monitorar eventos, ele trata o HTML puramente como string. Ou seja, ao utilizar um echo, ele está apenas acrescentando algo que será enviado através do protocolo HTTP para o browser. E é isto. Ao digitar uma url como: http://pagina.com.br/lista.php no browser, este receberá apenas texto (seja HTML, Javascript, CSS…). Ninguém jamais viu código PHP no fonte de uma página, pois este apenas é interpretado no servidor, e se não houver echo nada virá do servidor para o browser.

Veja como ficaria o problema anterior resolvido com PHP:

<html>
<body>
<div id=”coisa”><? echo “um texto qualquer”; ?></div>
</body>
</html>

Se o código HTML + PHP acima fosse acessado pelo browser, a única coisa que este receberia constaria do HTML já preenchido pela tarefa em PHP que foi interpretada e executada pelo servidor, assim:

<html>
<body>
<div id=”coisa”>um texto qualquer</div>
</body>
</html>

PHP precisa Instalação?
Sim. E quando utilizado para fins de WEB, obviamente ele deve estar instalado em um servidor HTTP com suporte e PHP. Não significa que você não possa instalar e fazer suas experiências localmente. Existem pacotes como o WAMP, que com poucos cliques transformam sua máquina em um servidor local instalando Apache (servidor HTTP), PHP, MySQL (sistema gerenciador de Banco de Dados), PHPMyAdmin (front-end WEB para MySQL). Onde o endereço acessado para suas experiências WEB locais será http://localhost.

Em resumo:

Javascript:

1 – É interpretado e executado pelo browser, não pelo servidor.
2 – Não trata o HTML como string, mas cada tag individualmente como um objeto que pode possuir métodos, propriedades (ou atributos) e eventos.

É recomendado para tratar de assuntos que não devam consultar o servidor, mas que possam ser executados diretamente no browser sem perda de tempo, e também no caso de tratamento de eventos (onclick por exemplo).

PHP:

1 – É executado no servidor, e nada “sabe” do que está acontecendo no browser. Somente responde quando o usuário solicitar através de links, botões, ou códigos AJAX que efetuem chamadas para tarefas no servidor.
2 – Trata o HTML puramente como string (texto).

É recomendado para fazer tarefas como buscar dados em banco de dados e complementar ou gerar HTML encima destes dados, ou para diversas outras tarefas que possam ser melhor tratadas no servidor.

É preciso ter em mente também que, quando um usuário solicitar algo do servidor uma conexão do browser com o servidor será estabelecida, e assim que o browser receber todo o HTML referente a esta página, a conexão é desfeita. Por isso não há como o servidor saber o que o usuário está fazendo com a página que recebeu. Pois o servidor apenas recebe ordens do browser, não podendo fazer nada além do solicitado pelo usuário. O Javascrript tem contribuído para o enriquecimento das aplicações web, por que pode ficar o tempo todo executando rotinas no browser e estar por dentro do que o usuário está fazendo. Então o programador da página pode fazer com que uma função detecte as necessidades do usuário e faça requisições ao servidor em momentos diferentes dos tradicionais, e mais, pode fazer isto escondido sem recarregar toda a página. Aí entra o AJAX, que pode fazer uma solicitação para o servidor digamos por debaixo dos panos (sem que o usuário tenha clicado nos tradicionais botões ou links). Mas uma tarefa pode ser escrita em Javascript para por exemplo monitorar objetos que estejam sendo arrastados na tela (Drag and Drop) e a medida que isto aconteça enviar ou buscar informações no servidor via AJAX.

É isto… ahhh e se ainda não entende AJAX leia o post “Desmistificando o Temível Ajax”

Tags: , , , , , ,

12 Responses to “PHP ou Javascript? Qual a diferença?”

  1. Mike Varela Says:

    ola… antes de tudo gostaria de dar os meus cumprimentos e agradecer pela infornação k tens disponibilizado na net. eu ñ sou programador mas gosto muito de programação e estou a fazer um curso profissional. nesse momento estou a criar um sistema “uma pagina web com ligação a base de dados” e eu gostaria de saber mais como faz essa ligação. kual é a melhor maneira de xamar os dados existente na base de dados e apresentar na pagina…? fico a espera de um resposta. até ja

  2. Passar array de PHP para Javascript, e de Javascript para PHP « Ahã… programando…! Says:

    […] PHP ou Javascript? Qual a diferença? […]

  3. Eliezer Mazzetti Says:

    Olá Ahã,
    se puder me orientar sobre o assunto agradeço muito. Sobre o aspecto de segurança dos dados, qual o melhor PHP ou Javascript?

    • Leonir Zimmermann Says:

      Olá Eliezer!

      Sua pergunta é interessante, pois depende do ponto de vista. Não dá para dizer que PHP é melhor do que Javascript, ou Javascript Melhor que PHP, por que os 2 diferem em essência e se complementam nas tarefas. De forma que um trabalha só dentro do servidor (PHP) e outro somente na máquina local (no Browser). Os 2 tem foco em manipular o HTML (que é a essência da WEB) para que ele seja tratado dinâmicamente (adaptável segundo as necessidades). Javascript é sensível aos eventos do usuário (onclick, onmouseup…), PHP não. PHP faz acesso a Banco de Dados, Javascript não. Então para que a página seja agradável e rápida, alguns mascetes podem ser desenvolvidos para que tarefas em Javascript e em PHP sejam colaborativas (uma efetua o que a outra não pode fazer).

      Sua preocupação sendo quanto a segurança, neste caso, aplica-se em vc desenvolver métodos de transferir as informações sem que elas possam ser lidas através do código fonte da página. As vezes existem páginas por aí que não tem cuidados quanto a segurança, por exemplo vc pode ter um link para um arquivo PHP que envia email para um contato apresentado. Se vc observar a questão de segurança, deixará que este link apenas possua o código do destinatário no banco de dados, ex: <a href=”formulario_email.php?id=30″ rel=”nofollow”>Enviar email para o contato</a&gt. Neste caso vc estaria pedindo a abertura de um formulário de contato para envio de email, não informando o endereço do destinatário, ao clicar em enviar email, neste formulário, este deve enviar apenas o id, e o programa responsável pelo envio de email lá no servidor se encarrega de buscar no banco de dados o endereço de email do id 30, antes de enviar. Desta forma, mesmo que um usuário tente ver o código fonte da página… não vai aproveitar o número 30 pra muita coisa. Já um caso semelhante sem cuidados de segurança fircaria: < a href=”formulario_email.php?id=fulano@servidor_de_email.com.br” rel=”nofollow”>Enviar email para o contato</a>. Onde fica óbvia a lambança. É claro, este é um exemplo muito simples, existem inúmeros fatores que devem ser observados e que influenciam na preservação dos dados, de forma que cada linguagem tem suas particularidades. E esta questão da segurança, está mais para os cuidados que o programador tem que ter quanto ao tráfego, e codificação das informações do que para uma preocupação com os recursos que a linguagem oferece.

      Ok, sei que minha resposta não foi tão objetiva quanto vc esperava, mas realmente este assunto é bastante amplo.

  4. Luan B Says:

    Conheci seu wordpress recentemente,
    e tenho que dizer que eu não entendia praticamente NADA do que era trabalhar com Web.

    Atualmente começo a compreender melhor com tudo isso funciona,
    e agradeço ao seu blog por isso.

    Tenha uma dúvida que não consigo esclarecer:

    -Se eu quizer iniciar estudos em Webdesign, por onde começo?

    Seria: Webdesign básico, depois Javascript, PHP e afins?

    Ou já posso começar com Javascript primeiro e afins e depois entender como ele entra no HTML?

    Existe alguma sequencia de estudos lógica que possa facilitar o aprendizado de um iniciante no assunto? Dicas de cursos?

    Obrigado pela atenção.

    Luan

  5. Marco Says:

    Muito bom! Tirei algumas dúvidas sobre javascript e php.

  6. Jefferson Junior Says:

    Você é Bom Cara!

  7. Ricardo Says:

    Olá primeiramente parabens pelo post… muito bom

    Seguinte… meu chefe me pediu para manipular xml em php e em javascript.. qual a diferença? pq carregar o xml nas 2 linguagens? obrigado

  8. João Says:

    Show de bola essa explicação eliminou todas as minhas dúvidas quem dera tudo mundo fosse prático e objetivo como esse autor.

  9. Mendes Jr Says:

    Obrigado pela ótima explicação.

  10. Roberto Augusto Says:

    Bela explicação, muita gente no começo de carreira ainda não entende bem a diferença entre client-side e server-side, isso ajuda.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: