Curso de PHP

Conhecendo JavaScript e AJAX

Marcelo Linhares

Sócio da Agência Detalhes e Técnico do Instituto de Informática da PUC Minas

(Tecle F11 para visualização em tela cheia. F11 novamente volta ao modo normal)

Boas Práticas

• Uma boa prática no desenvolvimento de interfaces WEB é dividí-la em camadas, separando em camadas de Conteúdo, Formatação Visual e Comportamento.
• Dividir em camadas melhora a produtividade na construção e manutenção da interface pois isola na folha de estilo toda a informação referente a formatação visual da página e deixa o código (x)HTML limpo e semântico, tornando-o mais legível e compatível com outros dispositivos e navegadores, e por fim o arquivo Javascript manipula todos os comportamentos com propósito de melhorar a experiência do usuário.

Boas Práticas

• Divisão do Projeto em Camadas
• 
• Nesta Aula será abordada apenas a camada de Comportamento

JavaScript - Introdução

• Javascript é uma linguagem interpretada e roda no cliente (browser)
• Criada pela Netscape inicialmente para fazer validações client-side nos formulários HTML
• O também conhecido Jscript é uma mutação (para não dizer aberração) do JavaScript criado pela Microsoft
• A intenção do JavaScript é prover maior interatividade entre o sistema e o usuário, pois possibilita a alteração das propriedades da página dinamicamente sem efetuar acesso ao servidor.

JavaScript - Sintaxe

• Todo comando javascript dentro do HTML é delimitado pela tag <script>

• <script>
  alert("Janela do Javascript")
  <script>

• Vamos ser mais inteligentes, colocaremos todas funções em um arquivo isolado com extensão .js
• <script src="comportamento.js" type="text/javascript"></script>

Validação de Formulários

• Vamos utilizar JavaScript para validar dados do formulário?
• O formulário que será validado é o mesmo da última aula
• <form name=”formulario” action=”exibeServico.php” method=”post”>
  <p>
      ID: <input type=”text” name=”id”>
  </p>
  <p>
      Contato: <input type=”text” name=”contato”>
  </p>

  <p>
        <input type=”submit” value=”Enviar”>
   </p>
  </form>

Validação de formulários

• Vamos criar uma função validaFormulario() no arquivo comportamento.js
• // Início de Função
function validaFormulario() {
// conteúdo da função
}
• Para pegar a propriedade do formulário
• document.nomeDoFormulario.nomeDoCampo.propriedade
• No nosso formulário para pegar o valor do input de contato teremos:
• document.formulario.contato.value

Validação de Formulários

• function validaFormulario() {

if(document.formulario.contato.value=="")
{
alert("Campo contato não pode ficar em branco")
document.formulario.contato.focus() // foca no campo
document.formulario.contato.style.border = "1px solid red"
return false
}

return true
}
• Agora é só adicionar o envento onsubmit na tag de formulário e pimba!
• <form name="formulario" action="exibeServico.php" method="post" onsubmit="return validaFormulario()">

Validação de Formulários

• Resultado
• 

Exercício 1

• Valide todos os campos do formulário anterior via javascript

AJAX

• O que é?
• Defini-se como Asynchronous JavaScript and XML, é uma técnica para criar interfaces web mais interativas.

AJAX

• Ajax – Como Funciona? Visão do Desenvolvedor
• 

AJAX

• Ajax – Como Funciona? Visão do Cliente
• 

AJAX - Tecnologias Envolvidas

• xHTML e CSS
• DOM – Document Object Model
• XML
• JavaScript
• Linguagem Server-side

Ajax – xHTML e CSS

Web standards e CSS. Sites preparados conforme os padrões da w3c (World Wide Web Consortium) e utilizando a tecnologia CSS, que separa o que é programação, o que é conteúdo e o que é estilo visual

Ajax – DOM

DOM (Document Object Model). Padrão de estrutura do html para que a programação encontre o que precisa dentro de uma página sem problemas.

Ajax – XML

XML (Extensible Markup Language). Um padrão linguagem para tornar mais fácil a transferência de dados entre um banco de dados e outra interface qualquer.

Ajax – JavaScript

Linguagem Client-Side responsável por agilizar interações entre o usuário e a página, baseado no padrão EcmaScript.

Ajax – Linguagem Server-side

Linguagem de programação que é executada no servidor, exemplos:

• PHP
• Java
• Ruby
• Python
• ASP

Ajax – Onde Utilizar

• Interações levadas por formulários.
• Navegação em árvore com grande hierarquia
• Comunicação usuário-a-usuário rápida
• Votação, caixas Sim/Não, envio de avaliações
• Sugestão de textos entrados freqüentemente / Autocompletar

Ajax – Exemplos

• Gmail – http://www.gmail.com
• Writely - http://www.writely.com - Editor de texto on-line
• Meebo - http://www4.meebo.com/ - Serviço de mensagens instantânea
• Microsoft Star.com - http://www.start.com/ - Portal da Microsoft muito
• Google Suggest http://www.google.com/webhp?complete=1&hl=en ? Motor de busca que fornece sugestões
• Google Maps - http://maps.google.com/ - Serviço de mapas do Google
• SQL Designer - http://ondras.praha12.net/sql/demo/ - Modelador de Banco de Dados
• NetVibes - http://www.netvibes.com/ - Página Pessoal

Dúvidas

• Dúvidas ???
• Exemplos
• Validação do Formulário via JS
• ComboBox preenchido via AJAX
• MiniCurso de PHP em Guanhães

Ajax – Referências

• http://en.wikipedia.org/wiki/Ajax_%28programming%29
• http://www.vs-solutions.com/?pg=artigos/traducao_001
• http://www.phpbrasil.com/articles/article.php/id/1239
• http://webinsider.uol.com.br/vernoticia.php/id/2618
• http://www.tableless.com.br/artigos/ajaxdemo/