Descomplicando o JQuery - Introdução ao Framework

Preview:

DESCRIPTION

Nesta apresentação faço um overview do principal framework javascript existente no mercado web. O objetivo principal é fazer com que você aprenda e saia com uma base de conhecimento para iniciar a programa

Citation preview

Descomplicando o JQueryIntrodução ao framework

Escreva menos e faça mais !

Page 2

Pablo Garrido é desenvolvedor desde 2008. Trabalha com a criaçao de projetos desde a sua arquitetura até a implantaçao. Atualmente é Gerente de Projetos da empresa Concurso Virtual , a maior empresa de vídeo-aulas on-line para concurso público do Brasil.

Já ministrou diversos cursos e palestras sobre desenvolvimento web e atualmente cuida do site PabloGP.com onde escreve artigos sobre tecnologia.

Mas quem é Pablo Garrido ?

O que é JQuery ?

Page 3

www.jquery.com

Compatibilidade

Page 5

Softwares

Page 6

Frameworks Java Script

Page 7

Números

Page 8

Frameworks Sites

Jquery

MooTools

Prototype

script.aculo.us

YUI

24,656,955

2,344,782

1,275,017

1,140,818

682,977

Segmentos

Page 10

Fonte: http://trends.builtwith.com/javascript/jQuery

Download

Page 11

http://docs.jquery.com/Downloading_jQuery

Google Ajax API CDN (Also supports SSL via HTTPS)

http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js

Microsoft CDN (Also supports SSL via HTTPS) http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.min.js

jQuery CDN (via Media Temple )http://code.jquery.com/jquery-1.6.4.min.js Minified version http://code.jquery.com/jquery-1.6.4.js Source version

Introdução

Page 12

<script type=“text/javscript”>

$(window).load(function() {      alert("window load occurred!");

});

</script>

Fonte: http://docs.jquery.com/How_jQuery_Works

<script type=“text/javscript”>

$(document).ready(function() {      alert("document ready occurred!");

});

</script>

Seletores

Page 13

$(“#id_objeto”)

$(“.classe_objeto”)CSS2.1 e CSS3

Exemplo JQuery:

$(“.divbackground”).css(“background-color”,”#999999”);

JavaScript

document.getElementById(“id_objeto”).bgColor = “#999999”;

Fonte: http://api.jquery.com/category/selectors/

Eventos

Page 14

Page 15

Mão na massa !!

w3s

cho

ols

Page 16

http://www.w3schools.com/jquery/default.asp

Page 17

JQu

ery

Bra

sil

http://jquerybrasil.org/

Page 18

jsP

erf

http://jsperf.com

Here comes your footer Page 19

foru

m.jq

uer

y.co

m/

Page 20

Page 21

Obrigado.@devpablogp

facebook.com/devpablogp

contato@pablogp.com

www.pablogp.com