SlideShare uma empresa Scribd logo
1 de 38
Baixar para ler offline
AJAX
ASYNCHRONOUS JAVASCRIPT AND XML
Definição
• Ajax não é uma tecnologia (vamos prestar atenção nisso). É na verdade
várias tecnologias, cada uma atuando da sua própria maneira, tornando-se
juntas uma poderosa possibilidade. Ajax incorpora:
1. Apresentação baseada nasWeb Standards usando XHTML e CSS.
2. Exibição e interação dinâmicas usando Document Objetct Model (DOM);
3. Troca e manipulação de dados usando XML e XSLT;
4. Retorno de dados assincronamente usando XMLHttpRequest;
5. E JavaScript interligando tudo.
Modelo de uma aplicação normal
• Essa técnica faz muito sentido, mas não
para uma grande experiência do usuário.
• Enquanto o servidor está processando as
requisições, oque o usuário está fazendo?
Está certo, esperando. E a cada etapa da
tarefa o usuário espera mais um pouco.
Como o Ajax faz?
• Uma aplicação Ajax elimina o natural o intermediário, ou seja, introduz
uma ferramentaAjax entre o usuário e o servidor.
• A ferramentaAjax permite que a interação do usuário com a aplicação
aconteça simultaneamente, independente da comunicação com o servidor
então o usuário nunca encarará uma janela branca do browser e um ícone
de ampulheta, esperando pelo servidor para fazer algo.
Características
• É possível, e bastante desejável, construir aplicações Ajax que
tenham algumas características:
• • Funcionar sem Java script ;
• • Funcionar sem CSS;
• • Ao clicar, mudar a url na barra de endereços e o título da página;
• • Manter funcionais os botões de avançar, voltar e recarregar ;
• • Permitam salvar links, adicionar a bookmarks, etc.
Padrões Web Standards
• AJAX é baseado nos seguintes padrões da web Standards:
• Java Script
• XML
• HTML
• CSS
AJAX Http Requests
• AJAX usa pedidos do HTTP
• No código tradicional do Java script, se você quiser começar alguma
informação de uma base de dados ou de um arquivo no usuário, ou emitir a
informação do usuário a um usuário, você terá que fazer um HTML dar
forma e COMEÇAR ou AFIXAR os dados ao usuário. O usuário terá que
enviar “submete” a tecla para emitir/começa a informação, espera para que
o usuário responda, então uma página nova carregará com os resultados.
AJAX Http Requests
•Usando o objeto de XMLHttpRequest, um
colaborador da web standart pode atualizar
uma página com dados do usuário depois
que a página carregou!
O que é JQuery
• jQuery é uma biblioteca JavaScript criada por John
Resig e disponibilizada como software livre e
aberto, ou seja, de emprego e uso regido segundo
licença conforme as regras estabelecidas pelo MIT –
Massachusetts Institute of Technology ou pelo GPL
– GNU General Public License. Isso, resumidamente,
significa que você pode usar a biblioteca
gratuitamente tanto em desenvolvimento de
projetos pessoais como comerciais.
Incluindo a jQuery
Inserir pelo arquivo baixado – Caminho Relativo
<script src="jquery.js"></script>
Ou utilizar a biblioteca pelo Google – Caminho Absoluto
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js">
</script>
Criando efeitos de fade e slide com jQuery
• Um dos principais recursos que a biblioteca jQuery nos fornece é a
fácil aplicação de efeitos especiais a elementos. Dois dos efeitos mais
utilizados, são os efeitos de fading e sliding. O primeiro funciona
alterando gradativamente a opacidade de um elemento até o ponto
desejado, geralmente, até o elemento estar completamente visível
ou invisível. O segundo faz com que parte do elemento “role” em
certa direção até atingir o ponto desejado, geralmente até aparecer
ou desaparecer completamente.
FadeIn
• Este efeito faz com que o elemento alvo tenha sua opacidade aumentada, até o valor
máximo (100%), quando o elemento se torna totalmente visível. Pode-se passar como
parâmetro a duração e uma função de call-back, ou seja, que será executada ao fim do
efeito.
• A função hide() foi invocada no carregamento da página para esconder a div, pois o
efeito fadeIn é usado para torna-la visível.
FadeIn
FadeOut
• O efeito fade out realiza o inverso da função anterior, aumentando a
transparência do elemento até que este se torne totalmente invisível.
• Neste exemplo não foi necessário esconder a div inicialmente, pois este é o
objetivo da função fadeOut.
FadeOut
FadeTo
• Utiliza-se o fadeTo para ajustar a opacidade de um elemento,
passando o novo valor como segundo parâmetro (o primeiro deve ser
a duração do efeito). O valor da opacidade deve ser um número entre
0 e 1.
FadeTo
FadeToggle
• O fadeToggle alterna a opacidade do elemento entre o máximo e
mínimo, dependendo do estado atual da mesma. Ou seja, se o
elemento estiver visível, ficará invisível após o efeito fade e vice-
versa.
FadeToggle
Efeito Slide
Efeito Fade
SlideUp
• A função slideUp “dobrará” o elemento de baixo para cima,
recebendo os mesmos parâmetros da função fadeIn.
SlideUp
SlideDown
• O slideDown é exatamente o inverso do slideUp, como se pode
imaginar, tornando o objeto visível após “desdobrá-lo” de cima para
baixo. Os parâmetros e a estrutura são os mesmos do slideUp.
SlideDown
SlideToggle
• A função slideToggle, por sua vez, funciona segundo a mesma lógica
do fadeToggle, porém com o efeito sliding. Se o elemento estiver
visível, será executado o slideUp, caso contrário, o slideDown. A
estrutura e os parâmetros também são semelhantes.
SlideToggle
Exemplo de Calendário
Efeitos de Formulário
Como tratar eventos de formulários com
jQuery
• Dentre os vários eventos possíveis que podemos tratar com jQuery, alguns
dos mais utilizados no desenvolvimento de aplicações são aqueles ligados a
formulários. Por exemplo, é muito comum precisarmos executar alguma
ação quando um controle (um input, por exemplo) recebe ou perde o foco,
ou quando seu valor é alterado.
• E exatamente por serem situações bastante comuns, essa biblioteca nos
fornece métodos para tratar esses eventos de forma prática, agilizando o
trabalho do desenvolvedor web.
Evento blur
• O evento blur é disparado quando um determinado elemento perde o foco,
o que pode ocorrer se o usuário pressionarTAB, por exemplo, sobre o
controle ou se clicar em outra região da página que também receba foco.
• Este evento só era implementado, originalmente, por controles de
formulário como inputs e textareas, mas alguns browsers mais recentes
estão permitindo que outros elementos recebam e, consequentemente,
percam o foco, disparando o evento blur.
Efeito Blur
Efeito Change
• Este evento é disparado quando o valor do controle é alterado e seu uso é
exclusivo de elementos de formulário como inputs, textareas, selects,
checkboxes e radio buttons.
• No caso de selects e radios, ele é disparado imediatamente após o valor ser
alterado (nova opção no select ser selecionada ou radio/checkbox ser
marcado/desmarcado). Já nos inputs do tipo text e nos textareas, o change
só é executado quando o elemento perde o foco, que é quando seu valor é
validado.
Efeito
Change
Efeito Focus
• De nome sugestivo, o evento focus funciona de forma inversa ao blur.
Nesse caso o evento é disparado quando o elemento recebe o foco.
Inicialmente este evento era exclusivo de alguns tipos de elemento
como inputs e links, mas os browsers mais recentes estão permitindo
que outros controles recebam o foco, executando o evento focus.
• Uma aplicação comum deste evento é no destaque dos campos que
receberam o foco, por exemplo, mudando a cor do background.
Efeito Focus
Efeito Select
• Este evento é exclusivo de elementos nos quais se pode digitar texto,
ou seja, inputs e textareas e é disparado quando algum texto do
controle é selecionado. Essa seleção pode ser feita tanto com o
mouse quanto com o teclado, usando as setas direcionais ou atalhos
de seleção.
Efeito
Select
Efeito Submit
• O evento submit é próprio de formulários e, como se pode imaginar, é
disparado quando o form é submetido a processamento, ou seja,
quando um controle de submissão é acionado, como um input ou
Button com tipo “submit”.
Efeito
Submit
Validação de Formulário
Sem Plugin Com Plugin
Atividade
• Pesquise formas de aplicar máscara de entrada usando
Jquery.
• Crie um formulário aplicando o uso das Máscara.
Ajax continuação
Efeitos JQuery Com Animações
• O conceito de animação fala na transição entre 2 pontos dentro de
um determinado tempo, assim podemos pensar que, como o jQuery
é uma biblioteca javascript baseada no CSS, o ponto inicial seria um
valor para uma determinada propriedade CSS e o ponto final um
outro valor para essa propriedade.
• O método Animate trabalha com o mesmo pensamento, seletores
CSS e a animação trabalha as propriedades CSS, assim
informamos quem queremos animar, a propriedade a ser
animada, o valor para o ponto final e o tempo em que a animação
deve acontecer.
A Sintaxe
$(seletor).animate({
propriedade:
valor
}, tempo);
• $(seletor) - Quem será
selecionado.
• .animate - Chamada do
método
• propriedade - propriedade CSS
a ser animada
• valor - valor final da
propriedade animada
• tempo -Tempo de execução da
animação em milesegundos
Animate jQuery () - manipular várias propriedades
• Exemplo
• $("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
Exemplo
Animate jQuery () - Usando valores relativos
• Também é possível definir os valores relativos (o valor é, em seguida,
em relação ao valor atual do elemento). Isto é feito pondo + = ou - =
na frente do valor:
• Exemplo
• $("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
Exemplo
animate jQuery () - Usando valores pré-
definidos
• Você pode até especificar valor animação de uma propriedade como
"show", "hide", ou "toggle":
• Exemplo
• $("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
Exemplo
Animate jQuery () – Múltiplas
funcionalidades
• Exemplo
• $("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
Exemplo 1
Animate jQuery () – Múltiplas
funcionalidades
• Exemplo
• $("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
Exemplo 2
O exemplo a seguir primeiro movimenta o elemento <div> para a
direita, e, em seguida, aumenta o tamanho da fonte do texto:

Mais conteúdo relacionado

Semelhante a Ajax continuação

Programação Web com Zend Framework e Ajax com Dojo
Programação Web com Zend Framework e Ajax com DojoProgramação Web com Zend Framework e Ajax com Dojo
Programação Web com Zend Framework e Ajax com Dojofabioginzel
 
Javascript - Aplicações Interativas para a Web
Javascript - Aplicações Interativas para a WebJavascript - Aplicações Interativas para a Web
Javascript - Aplicações Interativas para a WebAdriano Lima
 
jQuery básico (parte 1)
jQuery básico (parte 1)jQuery básico (parte 1)
jQuery básico (parte 1)Luís Cobucci
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScriptCarlos Eduardo Kadu
 
Palestra / Efeitos Espetaculares Em Dhtml / SDD
Palestra / Efeitos Espetaculares Em Dhtml / SDDPalestra / Efeitos Espetaculares Em Dhtml / SDD
Palestra / Efeitos Espetaculares Em Dhtml / SDDhugodiasneto
 
Ajax para quem_ouviu_falar
Ajax para quem_ouviu_falarAjax para quem_ouviu_falar
Ajax para quem_ouviu_falarCharleston Anjos
 
Desevolvimento Web Client-side - jQuery
Desevolvimento Web Client-side - jQueryDesevolvimento Web Client-side - jQuery
Desevolvimento Web Client-side - jQueryGuilherme
 
Apache Wicket - Desenvolvimento WEB orientado a componentes
Apache Wicket - Desenvolvimento WEB orientado a componentesApache Wicket - Desenvolvimento WEB orientado a componentes
Apache Wicket - Desenvolvimento WEB orientado a componentesCI&T
 
Conexão Java 2006: Introdução ao Ajax
Conexão Java 2006: Introdução ao AjaxConexão Java 2006: Introdução ao Ajax
Conexão Java 2006: Introdução ao AjaxHelder da Rocha
 
Diapositivos práticos - Integração de Sistemas.pdf
Diapositivos práticos - Integração de Sistemas.pdfDiapositivos práticos - Integração de Sistemas.pdf
Diapositivos práticos - Integração de Sistemas.pdfJ0071
 

Semelhante a Ajax continuação (20)

Ajax
AjaxAjax
Ajax
 
Javascript Eventos, Métodos e Funções
Javascript Eventos, Métodos e FunçõesJavascript Eventos, Métodos e Funções
Javascript Eventos, Métodos e Funções
 
Programação Web com Zend Framework e Ajax com Dojo
Programação Web com Zend Framework e Ajax com DojoProgramação Web com Zend Framework e Ajax com Dojo
Programação Web com Zend Framework e Ajax com Dojo
 
Javascript - Aplicações Interativas para a Web
Javascript - Aplicações Interativas para a WebJavascript - Aplicações Interativas para a Web
Javascript - Aplicações Interativas para a Web
 
jQuery básico (parte 1)
jQuery básico (parte 1)jQuery básico (parte 1)
jQuery básico (parte 1)
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
 
Palestra / Efeitos Espetaculares Em Dhtml / SDD
Palestra / Efeitos Espetaculares Em Dhtml / SDDPalestra / Efeitos Espetaculares Em Dhtml / SDD
Palestra / Efeitos Espetaculares Em Dhtml / SDD
 
Aula2
Aula2Aula2
Aula2
 
Ajax para quem_ouviu_falar
Ajax para quem_ouviu_falarAjax para quem_ouviu_falar
Ajax para quem_ouviu_falar
 
Desevolvimento Web Client-side - jQuery
Desevolvimento Web Client-side - jQueryDesevolvimento Web Client-side - jQuery
Desevolvimento Web Client-side - jQuery
 
Tutorial de ajax
Tutorial de ajaxTutorial de ajax
Tutorial de ajax
 
Java script aula 09 - JQuery
Java script   aula 09 - JQueryJava script   aula 09 - JQuery
Java script aula 09 - JQuery
 
Introdução a jQuery
Introdução a jQueryIntrodução a jQuery
Introdução a jQuery
 
Apache Wicket - Desenvolvimento WEB orientado a componentes
Apache Wicket - Desenvolvimento WEB orientado a componentesApache Wicket - Desenvolvimento WEB orientado a componentes
Apache Wicket - Desenvolvimento WEB orientado a componentes
 
Java script aula 07 - j-query
Java script   aula 07 - j-queryJava script   aula 07 - j-query
Java script aula 07 - j-query
 
JavaScript
JavaScriptJavaScript
JavaScript
 
HTML5
HTML5HTML5
HTML5
 
Conexão Java 2006: Introdução ao Ajax
Conexão Java 2006: Introdução ao AjaxConexão Java 2006: Introdução ao Ajax
Conexão Java 2006: Introdução ao Ajax
 
Diapositivos práticos - Integração de Sistemas.pdf
Diapositivos práticos - Integração de Sistemas.pdfDiapositivos práticos - Integração de Sistemas.pdf
Diapositivos práticos - Integração de Sistemas.pdf
 
introdução a ajax
introdução a ajaxintrodução a ajax
introdução a ajax
 

Mais de Escola de Informática Evolutime; Colégio Pio XII

Mais de Escola de Informática Evolutime; Colégio Pio XII (20)

Youtubers
YoutubersYoutubers
Youtubers
 
Liderança
LiderançaLiderança
Liderança
 
Gestão de negócios
Gestão de negóciosGestão de negócios
Gestão de negócios
 
Preparo para mercado de trabalho
Preparo para mercado de trabalhoPreparo para mercado de trabalho
Preparo para mercado de trabalho
 
Redação
RedaçãoRedação
Redação
 
Marketing pessoal
Marketing pessoalMarketing pessoal
Marketing pessoal
 
Folha de estilo css
Folha de estilo   cssFolha de estilo   css
Folha de estilo css
 
Protocolos email
Protocolos emailProtocolos email
Protocolos email
 
Historia da internet
Historia da internetHistoria da internet
Historia da internet
 
Cuidados especiais que devemos ter nas redes sociais
Cuidados especiais que devemos ter nas redes sociaisCuidados especiais que devemos ter nas redes sociais
Cuidados especiais que devemos ter nas redes sociais
 
Cartas comerciais
Cartas comerciaisCartas comerciais
Cartas comerciais
 
Flash cs5
Flash cs5Flash cs5
Flash cs5
 
Apostila excel-avancado
Apostila excel-avancadoApostila excel-avancado
Apostila excel-avancado
 
Xhtml
XhtmlXhtml
Xhtml
 
Rede cabeada
Rede cabeadaRede cabeada
Rede cabeada
 
Programação asp
Programação aspProgramação asp
Programação asp
 
Curso HTML e CSS
Curso HTML e CSSCurso HTML e CSS
Curso HTML e CSS
 
Módulo de php
Módulo de phpMódulo de php
Módulo de php
 
Resistores capacitores
Resistores   capacitoresResistores   capacitores
Resistores capacitores
 
Elétrica e eletrônica 1ª aula
Elétrica e eletrônica    1ª aulaElétrica e eletrônica    1ª aula
Elétrica e eletrônica 1ª aula
 

Ajax continuação

  • 2. Definição • Ajax não é uma tecnologia (vamos prestar atenção nisso). É na verdade várias tecnologias, cada uma atuando da sua própria maneira, tornando-se juntas uma poderosa possibilidade. Ajax incorpora: 1. Apresentação baseada nasWeb Standards usando XHTML e CSS. 2. Exibição e interação dinâmicas usando Document Objetct Model (DOM); 3. Troca e manipulação de dados usando XML e XSLT; 4. Retorno de dados assincronamente usando XMLHttpRequest; 5. E JavaScript interligando tudo.
  • 3. Modelo de uma aplicação normal • Essa técnica faz muito sentido, mas não para uma grande experiência do usuário. • Enquanto o servidor está processando as requisições, oque o usuário está fazendo? Está certo, esperando. E a cada etapa da tarefa o usuário espera mais um pouco.
  • 4. Como o Ajax faz? • Uma aplicação Ajax elimina o natural o intermediário, ou seja, introduz uma ferramentaAjax entre o usuário e o servidor. • A ferramentaAjax permite que a interação do usuário com a aplicação aconteça simultaneamente, independente da comunicação com o servidor então o usuário nunca encarará uma janela branca do browser e um ícone de ampulheta, esperando pelo servidor para fazer algo.
  • 5. Características • É possível, e bastante desejável, construir aplicações Ajax que tenham algumas características: • • Funcionar sem Java script ; • • Funcionar sem CSS; • • Ao clicar, mudar a url na barra de endereços e o título da página; • • Manter funcionais os botões de avançar, voltar e recarregar ; • • Permitam salvar links, adicionar a bookmarks, etc.
  • 6. Padrões Web Standards • AJAX é baseado nos seguintes padrões da web Standards: • Java Script • XML • HTML • CSS
  • 7. AJAX Http Requests • AJAX usa pedidos do HTTP • No código tradicional do Java script, se você quiser começar alguma informação de uma base de dados ou de um arquivo no usuário, ou emitir a informação do usuário a um usuário, você terá que fazer um HTML dar forma e COMEÇAR ou AFIXAR os dados ao usuário. O usuário terá que enviar “submete” a tecla para emitir/começa a informação, espera para que o usuário responda, então uma página nova carregará com os resultados.
  • 8. AJAX Http Requests •Usando o objeto de XMLHttpRequest, um colaborador da web standart pode atualizar uma página com dados do usuário depois que a página carregou!
  • 9. O que é JQuery • jQuery é uma biblioteca JavaScript criada por John Resig e disponibilizada como software livre e aberto, ou seja, de emprego e uso regido segundo licença conforme as regras estabelecidas pelo MIT – Massachusetts Institute of Technology ou pelo GPL – GNU General Public License. Isso, resumidamente, significa que você pode usar a biblioteca gratuitamente tanto em desenvolvimento de projetos pessoais como comerciais.
  • 10. Incluindo a jQuery Inserir pelo arquivo baixado – Caminho Relativo <script src="jquery.js"></script> Ou utilizar a biblioteca pelo Google – Caminho Absoluto <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"> </script>
  • 11. Criando efeitos de fade e slide com jQuery • Um dos principais recursos que a biblioteca jQuery nos fornece é a fácil aplicação de efeitos especiais a elementos. Dois dos efeitos mais utilizados, são os efeitos de fading e sliding. O primeiro funciona alterando gradativamente a opacidade de um elemento até o ponto desejado, geralmente, até o elemento estar completamente visível ou invisível. O segundo faz com que parte do elemento “role” em certa direção até atingir o ponto desejado, geralmente até aparecer ou desaparecer completamente.
  • 12. FadeIn • Este efeito faz com que o elemento alvo tenha sua opacidade aumentada, até o valor máximo (100%), quando o elemento se torna totalmente visível. Pode-se passar como parâmetro a duração e uma função de call-back, ou seja, que será executada ao fim do efeito. • A função hide() foi invocada no carregamento da página para esconder a div, pois o efeito fadeIn é usado para torna-la visível. FadeIn
  • 13. FadeOut • O efeito fade out realiza o inverso da função anterior, aumentando a transparência do elemento até que este se torne totalmente invisível. • Neste exemplo não foi necessário esconder a div inicialmente, pois este é o objetivo da função fadeOut. FadeOut
  • 14. FadeTo • Utiliza-se o fadeTo para ajustar a opacidade de um elemento, passando o novo valor como segundo parâmetro (o primeiro deve ser a duração do efeito). O valor da opacidade deve ser um número entre 0 e 1. FadeTo
  • 15. FadeToggle • O fadeToggle alterna a opacidade do elemento entre o máximo e mínimo, dependendo do estado atual da mesma. Ou seja, se o elemento estiver visível, ficará invisível após o efeito fade e vice- versa. FadeToggle
  • 18. SlideUp • A função slideUp “dobrará” o elemento de baixo para cima, recebendo os mesmos parâmetros da função fadeIn. SlideUp
  • 19. SlideDown • O slideDown é exatamente o inverso do slideUp, como se pode imaginar, tornando o objeto visível após “desdobrá-lo” de cima para baixo. Os parâmetros e a estrutura são os mesmos do slideUp. SlideDown
  • 20. SlideToggle • A função slideToggle, por sua vez, funciona segundo a mesma lógica do fadeToggle, porém com o efeito sliding. Se o elemento estiver visível, será executado o slideUp, caso contrário, o slideDown. A estrutura e os parâmetros também são semelhantes. SlideToggle
  • 23. Como tratar eventos de formulários com jQuery • Dentre os vários eventos possíveis que podemos tratar com jQuery, alguns dos mais utilizados no desenvolvimento de aplicações são aqueles ligados a formulários. Por exemplo, é muito comum precisarmos executar alguma ação quando um controle (um input, por exemplo) recebe ou perde o foco, ou quando seu valor é alterado. • E exatamente por serem situações bastante comuns, essa biblioteca nos fornece métodos para tratar esses eventos de forma prática, agilizando o trabalho do desenvolvedor web.
  • 24. Evento blur • O evento blur é disparado quando um determinado elemento perde o foco, o que pode ocorrer se o usuário pressionarTAB, por exemplo, sobre o controle ou se clicar em outra região da página que também receba foco. • Este evento só era implementado, originalmente, por controles de formulário como inputs e textareas, mas alguns browsers mais recentes estão permitindo que outros elementos recebam e, consequentemente, percam o foco, disparando o evento blur. Efeito Blur
  • 25. Efeito Change • Este evento é disparado quando o valor do controle é alterado e seu uso é exclusivo de elementos de formulário como inputs, textareas, selects, checkboxes e radio buttons. • No caso de selects e radios, ele é disparado imediatamente após o valor ser alterado (nova opção no select ser selecionada ou radio/checkbox ser marcado/desmarcado). Já nos inputs do tipo text e nos textareas, o change só é executado quando o elemento perde o foco, que é quando seu valor é validado. Efeito Change
  • 26. Efeito Focus • De nome sugestivo, o evento focus funciona de forma inversa ao blur. Nesse caso o evento é disparado quando o elemento recebe o foco. Inicialmente este evento era exclusivo de alguns tipos de elemento como inputs e links, mas os browsers mais recentes estão permitindo que outros controles recebam o foco, executando o evento focus. • Uma aplicação comum deste evento é no destaque dos campos que receberam o foco, por exemplo, mudando a cor do background. Efeito Focus
  • 27. Efeito Select • Este evento é exclusivo de elementos nos quais se pode digitar texto, ou seja, inputs e textareas e é disparado quando algum texto do controle é selecionado. Essa seleção pode ser feita tanto com o mouse quanto com o teclado, usando as setas direcionais ou atalhos de seleção. Efeito Select
  • 28. Efeito Submit • O evento submit é próprio de formulários e, como se pode imaginar, é disparado quando o form é submetido a processamento, ou seja, quando um controle de submissão é acionado, como um input ou Button com tipo “submit”. Efeito Submit
  • 29. Validação de Formulário Sem Plugin Com Plugin
  • 30. Atividade • Pesquise formas de aplicar máscara de entrada usando Jquery. • Crie um formulário aplicando o uso das Máscara.
  • 32. Efeitos JQuery Com Animações • O conceito de animação fala na transição entre 2 pontos dentro de um determinado tempo, assim podemos pensar que, como o jQuery é uma biblioteca javascript baseada no CSS, o ponto inicial seria um valor para uma determinada propriedade CSS e o ponto final um outro valor para essa propriedade. • O método Animate trabalha com o mesmo pensamento, seletores CSS e a animação trabalha as propriedades CSS, assim informamos quem queremos animar, a propriedade a ser animada, o valor para o ponto final e o tempo em que a animação deve acontecer.
  • 33. A Sintaxe $(seletor).animate({ propriedade: valor }, tempo); • $(seletor) - Quem será selecionado. • .animate - Chamada do método • propriedade - propriedade CSS a ser animada • valor - valor final da propriedade animada • tempo -Tempo de execução da animação em milesegundos
  • 34. Animate jQuery () - manipular várias propriedades • Exemplo • $("button").click(function(){ $("div").animate({ left: '250px', opacity: '0.5', height: '150px', width: '150px' }); }); Exemplo
  • 35. Animate jQuery () - Usando valores relativos • Também é possível definir os valores relativos (o valor é, em seguida, em relação ao valor atual do elemento). Isto é feito pondo + = ou - = na frente do valor: • Exemplo • $("button").click(function(){ $("div").animate({ left: '250px', height: '+=150px', width: '+=150px' }); }); Exemplo
  • 36. animate jQuery () - Usando valores pré- definidos • Você pode até especificar valor animação de uma propriedade como "show", "hide", ou "toggle": • Exemplo • $("button").click(function(){ $("div").animate({ height: 'toggle' }); }); Exemplo
  • 37. Animate jQuery () – Múltiplas funcionalidades • Exemplo • $("button").click(function(){ var div = $("div"); div.animate({height: '300px', opacity: '0.4'}, "slow"); div.animate({width: '300px', opacity: '0.8'}, "slow"); div.animate({height: '100px', opacity: '0.4'}, "slow"); div.animate({width: '100px', opacity: '0.8'}, "slow"); }); Exemplo 1
  • 38. Animate jQuery () – Múltiplas funcionalidades • Exemplo • $("button").click(function(){ var div = $("div"); div.animate({left: '100px'}, "slow"); div.animate({fontSize: '3em'}, "slow"); }); Exemplo 2 O exemplo a seguir primeiro movimenta o elemento <div> para a direita, e, em seguida, aumenta o tamanho da fonte do texto:

Notas do Editor

  1. http://www.webmaster.pt/tutoriais-jquery-10136.html http://www.linhadecodigo.com.br/busca.aspx?w=jquery https://www.youtube.com/watch?v=gUXv8cSjvFw
  2. Web Standards é um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e afins de caráter técnico, produzidos pela W3C. É destinado a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem a criação de uma Web acessível a todos.
  3. http://www.siteparaempresas.com.br/blog/?p=3523
  4. http://www.w3schools.com/jquery/jquery_animate.asp