FRONTEND DEVELOPMENT

Introdução

● O que é JQuery● Pré-requisitos● Quem usa ● Porque usar e quais as vantagens● Quem pensou nisso tudo● E por ai vai

O que é?

● Cross-browser● Usado para desenvolvimento de interfaces● Simples navegação no documento HTML● Manipulação dos elementos DOM

(Document Object Model)● Manipulção de eventos de maneira simples.● Criação de animações manipulando

propriedades CSS.Desenvolvimento de aplicações AJAX com pouco código

Pré-requisito

1. Conhecimentos em HTML + CSS2. Pouquinho de javascript

Quem usa JQuery?

O mundo todo

Xiiiii, eles ainda usam JQuery...

Confronto desnecessário

Flash está fadado a extinção? NÃOEle apenas encontrou um concorrente à altura.

Onde usar um e outroAplicação Flash Javascript

Slide Show X

Validação de Formulário

X

Menus suspensos X

Tabbed Panels X

Popups & Dicas X

Expansível / Elementos dobrável

X

Leitor de Vídeo / Áudio X

Animação Complexo X

3D X

Multimídia Complexo X

Tá todo mundo usando

● Dos 10 mil sites mais visitados em todo mundo 41% usam JQuery

Vantagens de se usar Jquery● O acesso direto ao DOM se faz com uso dos poderosos seletores das

CSS 2.1 e CSS 3.

● A manipulação de conteúdo sem limitações, com algumas poucas linhas de código.

● O suporte para todo tipo de evento de interação com o usuário, sem limitações impostas pelos navegadores.

● A possibilidade de inserir uma grande variedade de efeitos de animação com uma simples linha de código.

● O uso simplificado e sem restrições com AJAX e linguagens de programação, como PHP e ASP.

● A simplificação na criação de scripts.

● O emprego cross-browser.

Será que é tão simples assim?

Uma simples animação sem JQueryfunction xAnimateXY(sEleId, iTargetX, iTargetY, uTotalTime)

{

var ele = xGetElementById(sEleId);

var startX = xLeft(ele); // x start position

var startY = xTop(ele); // y start position

var dispX = iTargetX - startX; // x displacement

var dispY = iTargetY - startY; // y displacement

var freq = Math.PI / (2 * uTotalTime); // frequency

var startTime = new Date().getTime();

var tmr = setInterval(

function() {

var elapsedTime = new Date().getTime() - startTime;

if (elapsedTime < uTotalTime) {

var f = Math.abs(Math.sin(elapsedTime * freq));

xLeft(ele, Math.round(f * dispX + startX));

xTop(ele, Math.round(f * dispY + startY));

}

else {

clearInterval(tmr);

xLeft(ele, iTargetX);

xTop(ele, iTargetY);

}

}, 10

);

}

Uma simples animação sem JQuery// xLeft r2, Copyright 2001-2007 Michael Foster (Cross-Browser.com)

// Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL

function xLeft(e, iX)

{

if(!(e=xGetElementById(e))) return 0;

var css=xDef(e.style);

if (css && xStr(e.style.left)) {

if(xNum(iX)) e.style.left=iX+'px';

else {

iX=parseInt(e.style.left);

if(isNaN(iX)) iX=xGetComputedStyle(e,'left',1);

if(isNaN(iX)) iX=0;

}

}

else if(css && xDef(e.style.pixelLeft)) {

if(xNum(iX)) e.style.pixelLeft=iX;

else iX=e.style.pixelLeft;

}

return iX;

}

Uma simples animação sem JQuery// xTop r2, Copyright 2001-2007 Michael Foster (Cross-Browser.com)

// Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL

function xTop(e, iY)

{

if(!(e=xGetElementById(e))) return 0;

var css=xDef(e.style);

if(css && xStr(e.style.top)) {

if(xNum(iY)) e.style.top=iY+'px';

else {

iY=parseInt(e.style.top);

if(isNaN(iY)) iY=xGetComputedStyle(e,'top',1);

if(isNaN(iY)) iY=0;

}

}

else if(css && xDef(e.style.pixelTop)) {

if(xNum(iY)) e.style.pixelTop=iY;

else iY=e.style.pixelTop;

}

return iY;

}

Uma simples animação sem JQuery

Animação sem JQuery funcionando:

http://www.cross-browser.com/x/examples/animation_tech.php

Agora com JQuery$("div").animate( { left: "+=300", top:0 }, 3000);

exemplo prático:http://jsfiddle.net/fjPAN/107/

Selectors (a alma do framework)

O método mágico $

Exemplos simples:

$("#meuId").css("width", "100px");$(".minhaclasse").css("width", "100px");$("ul.topnav > li").css("border", "3px double red")

Seletores na prática

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

http://jsbin.com/#javascript,html,live

http://jsfiddle.net

http://jsfiddle.net/fjPAN/26/

ID Selector (“#id”)

$("#meuId").css("width", "100px");

exemplo prático:http://jsfiddle.net/fjPAN/83/

Class Selector (“.class”)

$(".minhaClasse").css("width", "100px");

exemplo prático:http://jsfiddle.net/fjPAN/37/

Child Selector (“parent > child”)

$("ul > li").css("width", "100px");

exemplo prático:http://jsfiddle.net/fjPAN/70/

Child Selector (“parent > child”)

$("ul > li").css("width", "100px");

exemplo prático:http://jsfiddle.net/fjPAN/70/

:first Selector

$("tr:first").css("height", "200px");

exemplo prático:http://jsfiddle.net/fjPAN/73/

:last Selector

$("tr:last").css("height", "200px");

exemplo prático:http://jsfiddle.net/fjPAN/74/

:eq() Selector

$("tr:eq(1)").css("color", "#FFFF00");

exemplo prático:http://jsfiddle.net/fjPAN/82/

Accordion em duas linhas

Link:http://jqueryui.com/demos/accordion/

Exemplo prático:http://jsfiddle.net/fjPAN/127/

Simples Galeria de fotos com JQuery

Link:http://caroufredsel.frebsite.nl/

Outras bibliotecas JavaScript

Link com varias biliotecas:http://www.cssnolanche.com.br/22-javascript-frameworks/

John Resing,o criador da jQuery.

O gênio pensante do Framework

OBRIGADO

email: mateuspaduaweb@gmail.comface: /mateus.padua.3