Curso de PHP
Conhecendo JavaScript e AJAX
Marcelo Linhares
(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.
[any material that should appear in print but not on the slide]
Boas Práticas
- Divisão do Projeto em Camadas

- Nesta Aula será abordada apenas a camada de Comportamento
[any material that should appear in print but not on the slide]
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.
[any material that should appear in print but not on the slide]
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>
[any material that should appear in print but not on the slide]
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
[any material that should appear in print but not on the slide]
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:
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
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/