iniciando com jquery
DESCRIPTION
"jQuery é uma biblioteca JavaScript cross-browser desenvolvida para simplificar os scripts client side que interagem com o HTML.1 Ela foi lançada em janeiro de 2006 no BarCamp de Nova York por John Resig. Usada por cerca de 55% dos 10 mil sites mais visitados do mundo, jQuery é a mais popular das bibliotecas JavaScript.2 3 jQuery é uma biblioteca de código aberto e possui licença dual, fazendo uso da Licença MIT ou da GNU General Public License versão 2.4 A sintaxe do jQuery foi desenvolvida para tornar mais simples a navegação do documento HTML, a seleção de elementos DOM, criar animações, manipular eventos e desenvolver aplicações AJAX. A biblioteca também oferece a possibilidade de criação de plugins sobre ela. Fazendo uso de tais facilidades, os desenvolvedores podem criar camadas de abstração para interações de mais baixo nível, simplificando o desenvolvimento de aplicações web dinâmicas de grande complexidade. A Microsoft e a Nokia anunciaram planos de incluir o jQuery em suas plataformas,5 a Microsoft adotando-a inicialmente no Visual Studio6 para uso com o framework AJAX do ASP.NET, e a Nokia na sua plataforma Web Run-Time de widgets.7 A biblioteca jQuery também tem sido usada no MediaWiki desde a versão 1.16.8" (http://pt.wikipedia.org/wiki/JQuery) 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ódigoTRANSCRIPT
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: [email protected]: /mateus.padua.3