SlideShare une entreprise Scribd logo
1  sur  11
Télécharger pour lire hors ligne
jQuery  is  a  new  kind  of  JavaScript  Library.	




Alain, Leonardo, Moisés, Thiago.
Introdução	
•  jQuery é o melhor framework javascript da atualidade;

•  Nasceu em 2005;

•  Licença: MIT e GLP;

•  Não é o único framework javascript;

•  Funciona teoricamente em qualquer navegador (cross-
   browser);

•  Bem documentado.
O  Que  é  um  framework?  
    (oficialmente  é  considerado  uma  biblioteca  javascript)	

•  Frameworks são projetados com a intenção de
   facilitar o desenvolvimento de software;

•  Permitindo designers e programadores a gastarem
   mais tempo determinando as exigências do software
   do que com detalhes tediosos de baixo nível do
   sistema.
Para  que  serve  o  JQuery?	
     “jQuery is designed to change the way that you write
                          JavaScript”

•    Redução de código;
•    Trabalha com Ajax e DOM;
•    Validar formulários;
•    Manipulação de eventos Javascript;
•    Animações;
•    Efeitos;
•    Adicionar CSS;
•    …
Para  que  serve  o  JQuery?	

•  Enfim:
    o  é possível fazer tudo isso e muito mais sem ter que
       atualizar a página, o que faz com que o site fique
       totalmente dinâmico, moderno, leve e elegante.
jQuery  é  disponibilizado  das  
           diferentes  maneiras.	
•  Desenvolvimento. Apresenta todos seus códigos
   completos, identados e de fácil. Ideal para quem queira
   estudar e compreender como as coisas funcionam, essa
   “versão sem cortes” é ideal para estudo/aprendizado a
   fundo da biblioteca.

•  Produção. Esta é a versão para quem se preocupa
   somente em utilizar o jQuery e usufruir de todo o seu
   poder através de um arquivo compactado.

•  Google API/CDN. Através da API AJAX de bibliotecas do
   Google é possível, dentre outros frameworks e bibliotecas,
   incorporar o jQuery a suas páginas web.
Quanto  “pesa”  um  framework?	

•  Na sua versão 1.7.2 (atual) o JQuery pesa 95KB;
•  É apenas um arquivo;
•  Pode ser baixado pelo site www.jquery.com, ou
   importar a biblioteca diretamente do Google.

•  <script src=
   http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/
   jquery.min.js type=“text/javascript” ></script>
Escrevendo  um  Hello  World.
Explicando  o  código	

•  $(“a”) é um selector do JQuery que seleciona
   elementos “a”;
•  O $ se refere a uma “classe” em JQuery;
•  O $ portanto “instancia” um objeto JQuery;
•  .click() é invocado quando ocorre um clique do
   mouse em um elemento selecionado;
•  Código sem JQuery:



•  Importante a separação de JS e HTML.
Outro  exemplo:	




Fonte:  wikipedia
Exemplo  prático	

•  Validação de um formúlário utilizando o JQuery.

Contenu connexe

Tendances

Jquery - Apresentação e aplicação prática
Jquery - Apresentação e aplicação práticaJquery - Apresentação e aplicação prática
Jquery - Apresentação e aplicação prática
Teles Maciel
 
Jquery - Apresentação e aplicação prática
Jquery - Apresentação e aplicação práticaJquery - Apresentação e aplicação prática
Jquery - Apresentação e aplicação prática
Teles Maciel
 
Plataforma Android: Produtividade Além do SDK
Plataforma Android: Produtividade Além do SDKPlataforma Android: Produtividade Além do SDK
Plataforma Android: Produtividade Além do SDK
Ryan Padilha
 
ExtJS - Jumpstart para o Grupo DevRioClaro
ExtJS - Jumpstart para o Grupo DevRioClaroExtJS - Jumpstart para o Grupo DevRioClaro
ExtJS - Jumpstart para o Grupo DevRioClaro
Daniel Da Cunha Bueno
 
Programando razor
Programando razorProgramando razor
Programando razor
Vitor Reis
 

Tendances (20)

Jquery - .NetCoders
Jquery  - .NetCodersJquery  - .NetCoders
Jquery - .NetCoders
 
Open Source Bootcamp Mogi das Cruzes
Open Source Bootcamp Mogi das CruzesOpen Source Bootcamp Mogi das Cruzes
Open Source Bootcamp Mogi das Cruzes
 
Jquery - Apresentação e aplicação prática
Jquery - Apresentação e aplicação práticaJquery - Apresentação e aplicação prática
Jquery - Apresentação e aplicação prática
 
Otimização front end
Otimização front endOtimização front end
Otimização front end
 
Ajax
AjaxAjax
Ajax
 
AngularJS com NODE.JS e Socket.IO
AngularJS com NODE.JS e Socket.IOAngularJS com NODE.JS e Socket.IO
AngularJS com NODE.JS e Socket.IO
 
Curso AngularJS - Parte 2
Curso AngularJS - Parte 2Curso AngularJS - Parte 2
Curso AngularJS - Parte 2
 
O futuro dos WebApps com AngularJS 2.0
O futuro dos WebApps com AngularJS 2.0O futuro dos WebApps com AngularJS 2.0
O futuro dos WebApps com AngularJS 2.0
 
Zk Framework
Zk FrameworkZk Framework
Zk Framework
 
Visão Geral sobre Angular JS
Visão Geral sobre Angular JSVisão Geral sobre Angular JS
Visão Geral sobre Angular JS
 
Jquery - Apresentação e aplicação prática
Jquery - Apresentação e aplicação práticaJquery - Apresentação e aplicação prática
Jquery - Apresentação e aplicação prática
 
Quasar Framework - Uma visão Geral
Quasar Framework - Uma visão GeralQuasar Framework - Uma visão Geral
Quasar Framework - Uma visão Geral
 
Plataforma Android: Produtividade Além do SDK
Plataforma Android: Produtividade Além do SDKPlataforma Android: Produtividade Além do SDK
Plataforma Android: Produtividade Além do SDK
 
ExtJS - Jumpstart para o Grupo DevRioClaro
ExtJS - Jumpstart para o Grupo DevRioClaroExtJS - Jumpstart para o Grupo DevRioClaro
ExtJS - Jumpstart para o Grupo DevRioClaro
 
Js
JsJs
Js
 
Protractor
ProtractorProtractor
Protractor
 
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDAANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
ANGULARJS: UM FRAMEWORK PARA FACILITAR SUA VIDA
 
Desenvolvimento web produtivo
Desenvolvimento web produtivoDesenvolvimento web produtivo
Desenvolvimento web produtivo
 
Programando razor
Programando razorProgramando razor
Programando razor
 
Primeiros passos no Vue.js
Primeiros passos no Vue.jsPrimeiros passos no Vue.js
Primeiros passos no Vue.js
 

Similaire à Apresentação Jquery

T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)
Carlos Santos
 

Similaire à Apresentação Jquery (20)

Introdução JQuery
Introdução JQueryIntrodução JQuery
Introdução JQuery
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.
 
jQuery - A poderosa Biblioteca JavaScript - Minicurso
jQuery - A poderosa Biblioteca JavaScript - MinicursojQuery - A poderosa Biblioteca JavaScript - Minicurso
jQuery - A poderosa Biblioteca JavaScript - Minicurso
 
Desenvolvendo com Dojo Toolkit
Desenvolvendo com Dojo ToolkitDesenvolvendo com Dojo Toolkit
Desenvolvendo com Dojo Toolkit
 
Javascript levado a sério
Javascript levado a sérioJavascript levado a sério
Javascript levado a sério
 
Javascript levado a serio
Javascript levado a serioJavascript levado a serio
Javascript levado a serio
 
jQuery
jQueryjQuery
jQuery
 
Google Web Toolkit
Google Web ToolkitGoogle Web Toolkit
Google Web Toolkit
 
Curso jsf
Curso jsfCurso jsf
Curso jsf
 
(A18) LabMM3 - Ajax
(A18) LabMM3 - Ajax(A18) LabMM3 - Ajax
(A18) LabMM3 - Ajax
 
T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)
 
FEMUG MGA #6 - Abandonando o jQuery
FEMUG MGA #6  - Abandonando o jQueryFEMUG MGA #6  - Abandonando o jQuery
FEMUG MGA #6 - Abandonando o jQuery
 
NodeJS - Tutorial de forma simples e pratica.
NodeJS - Tutorial de forma simples e pratica.NodeJS - Tutorial de forma simples e pratica.
NodeJS - Tutorial de forma simples e pratica.
 
JHipster - Produtividade e Maturidade em suas mãos
JHipster - Produtividade e Maturidade em suas mãosJHipster - Produtividade e Maturidade em suas mãos
JHipster - Produtividade e Maturidade em suas mãos
 
Introdução às Bibliotecas jQuery/ jQuery UI
Introdução às Bibliotecas jQuery/ jQuery UIIntrodução às Bibliotecas jQuery/ jQuery UI
Introdução às Bibliotecas jQuery/ jQuery UI
 
GWT - RIA baseada em AJAX
GWT - RIA baseada em AJAXGWT - RIA baseada em AJAX
GWT - RIA baseada em AJAX
 
Como desenvolver com um sistema com um front-end colossal?
Como desenvolver com um sistema com um front-end colossal?Como desenvolver com um sistema com um front-end colossal?
Como desenvolver com um sistema com um front-end colossal?
 
Anatomia do JSF – JavaServer Faces
Anatomia do JSF – JavaServer FacesAnatomia do JSF – JavaServer Faces
Anatomia do JSF – JavaServer Faces
 
Java v1.1
Java v1.1Java v1.1
Java v1.1
 
Web 3.0
Web 3.0Web 3.0
Web 3.0
 

Apresentação Jquery

  • 1. jQuery  is  a  new  kind  of  JavaScript  Library. Alain, Leonardo, Moisés, Thiago.
  • 2. Introdução •  jQuery é o melhor framework javascript da atualidade; •  Nasceu em 2005; •  Licença: MIT e GLP; •  Não é o único framework javascript; •  Funciona teoricamente em qualquer navegador (cross- browser); •  Bem documentado.
  • 3. O  Que  é  um  framework?   (oficialmente  é  considerado  uma  biblioteca  javascript) •  Frameworks são projetados com a intenção de facilitar o desenvolvimento de software; •  Permitindo designers e programadores a gastarem mais tempo determinando as exigências do software do que com detalhes tediosos de baixo nível do sistema.
  • 4. Para  que  serve  o  JQuery? “jQuery is designed to change the way that you write JavaScript” •  Redução de código; •  Trabalha com Ajax e DOM; •  Validar formulários; •  Manipulação de eventos Javascript; •  Animações; •  Efeitos; •  Adicionar CSS; •  …
  • 5. Para  que  serve  o  JQuery? •  Enfim: o  é possível fazer tudo isso e muito mais sem ter que atualizar a página, o que faz com que o site fique totalmente dinâmico, moderno, leve e elegante.
  • 6. jQuery  é  disponibilizado  das   diferentes  maneiras. •  Desenvolvimento. Apresenta todos seus códigos completos, identados e de fácil. Ideal para quem queira estudar e compreender como as coisas funcionam, essa “versão sem cortes” é ideal para estudo/aprendizado a fundo da biblioteca. •  Produção. Esta é a versão para quem se preocupa somente em utilizar o jQuery e usufruir de todo o seu poder através de um arquivo compactado. •  Google API/CDN. Através da API AJAX de bibliotecas do Google é possível, dentre outros frameworks e bibliotecas, incorporar o jQuery a suas páginas web.
  • 7. Quanto  “pesa”  um  framework? •  Na sua versão 1.7.2 (atual) o JQuery pesa 95KB; •  É apenas um arquivo; •  Pode ser baixado pelo site www.jquery.com, ou importar a biblioteca diretamente do Google. •  <script src= http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/ jquery.min.js type=“text/javascript” ></script>
  • 9. Explicando  o  código •  $(“a”) é um selector do JQuery que seleciona elementos “a”; •  O $ se refere a uma “classe” em JQuery; •  O $ portanto “instancia” um objeto JQuery; •  .click() é invocado quando ocorre um clique do mouse em um elemento selecionado; •  Código sem JQuery: •  Importante a separação de JS e HTML.
  • 11. Exemplo  prático •  Validação de um formúlário utilizando o JQuery.