SlideShare a Scribd company logo
1 of 50
Download to read offline
A melhor forma de escrever JavaScript
 Victor Adriel de J. Oliveira
◦ Ciência da Computação - UESC
◦ Associação Empresa Júnior de Computação
◦ Programação Web:
HTML/CSS (tableless), jQuery, PHP, Smarty, ...
◦ Contato:
victorajoliveira@gmail.com
blogvictoradriel.blogspot.com
 Introdução
◦ O que é
◦ Características
◦ DOM
◦ JavaScript
◦ Como usar
◦ JavaScript vs. jQuery
 jQuery em ação
◦ Método ready( )
◦ Construtor $( )
◦ Seletores
◦ Manipulação do DOM
◦ CSS
◦ Eventos
◦ Efeitos
◦ Formulários
 É uma biblioteca JavaScript disponibilizada
como software livre e aberto, desenvolvida
para mudar a forma de escrever JavaScript.
 “O foco principal da biblioteca jQuery é a
simplicidade. Por que submeter os
desenvolvedores ao martírio de escrever
longos e complexos códigos para criar
simples efeitos?” (John Resig, jQuery in Action)
 Utiliza seletores CSS para acessar e manipular
o DOM;
 Alheio às inconsistências de renderização
entre navegadores;
 Extensível;
 Provê interatividade;
 Simplifica tarefas específicas de JavaScript.
 HTML DOM:
◦ O HTML DOM define objetos e propriedades para
todos os elementos HTML, e os métodos (interface)
para acessá-los.
◦ Em outras palavras: o HTML DOM é um padrão para
acesso, atualização, adição ou deleção de
elementos HTML.
 Propriedades do HTML DOM:
◦ x.innerHTML – texto do elemento x
◦ x.nodeName – nome do elemento x
◦ x.nodeValue – valor do elemento x
◦ x.parentNode – pai do elemento x
◦ x.childNodes – filhos do elemento x
◦ x.attributes – atributos do elemento x
 Métodos do HTML DOM:
◦ x.getElementById(id)
 Captura o elemento com um id específico
◦ x.getElementsByTagName(name)
 Captura todos os elementos com o mesmo comando
◦ x.appendChild(node)
 Insere um novo nó filho no elemento x
◦ x.removeChild(node)
 Remove um nó filho do elemento x
 Métodos do HTML DOM:
<html>
<body>
<p id="intro">Hello World!</p>
<script type=“text/javascript”>
txt=document.getElementById("intro").innerHTML;
alert("O texto do paragrafo com o id 'info': " + txt);
</script>
</body>
</html>
 Métodos do HTML DOM:
<html>
<body>
<p id="intro">Hello World!</p>
<script type=“text/javascript”>
txt=document.getElementById("intro").innerHTML;
alert("O texto do paragrafo com o id 'info': " + txt);
</script>
</body>
</html>
Var txt = $(‘#intro’).val();
Com jQuery
 Ir ao site: http://jquery.com
 Fazer download da biblioteca
 Linkar na página HTML:
<head>
<script type=“text/javascript”
src=“/caminho/jquery-vs.js”></script>
</head>
Programação Web com jQuery
Programação Web com jQuery
 Minified
◦ jquery-1.6.4.min.js
◦ Compacto e de leitura difícil
 Uncompressed
◦ jquery-1.6.4.js
◦ Espaço entre cada linha de código e amplamente
comentado.
 HTML:
<h1 id=“cor”>Cabeçalho muda de cor</h1>
<button type=“button” id=“btnRed”>
Vermelha
</button>
 JavaScript:
<script type="text/javascript">
window.onload = function( ){
document.getElementById('btnRed').onclick =
mudaCor;
}
function mudaCor( ){
document.getElementById('cor').style.color='#F00';
}
</script>
 jQuery:
<script type=“text/javascript”
src=“jquery.js”></script>
<script type=“text/javascript”>
$(document).ready(function( ){
$(“#btnRed”).click(function( ) {
$(“#cor”).css(“color”, “#FF0000”);
});
});
</script>
 No javascript
window.onload = function( ){
Do this;
}
 No jQuery
$(document).ready(function( ){
Do this;
});
 Pode ser escrito de duas maneiras:
◦ $( )
◦ jQuery( )
 jQuery.noConflict( )
◦ Usa o alias jQuery ou outro de sua preferência
◦ Ex:
$infoIlheus = jQuery.noConflict( );
$infoIlheus(document).ready(function( ){ ... });
 Categorias:
◦ Básicos
◦ De atributo
◦ Hierárquicos
◦ Filtros
 Básicos
 De conteúdo
 Por visibilidade
 De filhos
◦ De formulários
◦ Universal
 $(“*”)
◦ De elemento
 $(“p”)
◦ De múltiplos elementos
 $(“p, h1, img”)
◦ De classe
 $(“.class”)
◦ De ID
 $(“#id”)
 Atributos
◦ .attr( nomeAtributo )
.attr( nomeAtributo, valor )
.removeAttr( nomeAtributo )
Ex: $(‘input’).attr(‘disabled’, ‘disabled’)
◦ .addClass( nomeClasse )
.removeClass( [nomeClasse] )
.hasClass( nomeClasse )
.toggleClass( nomeClasse )
 Inserção no DOM (Outside)
◦ .after( )
◦ .before( )
Ex: $("p").before("<b>Hello</b>");
 Inserção no DOM (Inside)
◦ .append( )
◦ .prepend( )
Ex: $("p").prepend("<b>Hello</b>");
 Inserção no DOM (Inside)
◦ .html( )
◦ .text( )
◦ .val( )
Ex: $(“div").html(“<button>botão</button>”);
 Inserção no DOM (Around)
◦ .wrap( )
Ex: $("p").wrap("<div></div>");
 Remoção no DOM
◦ .unwrap( )
◦ .empty( )
◦ .remove( )
 Substituição no DOM
◦ .replaceAll( )
◦ .replaceWith( )
 Cópias
◦ .clone( )
 HTML
<label>Colaboradores:</label>
<select class="copy" style="display:block;">
<option value="0">Selecione um...</option>
<option value="1">Ana</option>
<option value="2">João</option>
<option value="3">Maria</option>
</select>
<button id="novoColaborador">More</button>
<button id="removColaborador">Less</button>
 jQuery
$('#novoColaborador').click(function( ){
$('.copy:last').clone( ).appendTo('body');
});
$('#removColaborador').click(function( ){
$('.copy:last').remove( );
});
 Propriedades de estilo
◦ .css( )
Ex:
◦ var back = $(“div").css("background-color");
◦ $("p").css("color","red");
◦ $( this ).css({"width" : "+=100", "color" : "red"});
 Eventos do mouse
◦ .click( )
 Ativado com um clique
◦ .dblclick( )
 Ativado com um duplo clique
◦ .hover( )
 Ativado quando o cursor estiver sobre o elemento
◦ .mousemove( )
 Ativado com o movimento do mouse
 Eventos do mouse
◦ .mousedown( ) / .mouseup( )
 Ativado com pressionar/soltar o clique
◦ .mouseenter( ) / .mouseleave( )
 Cursor passa sobre ou deixa o elemento
◦ .mouseover( ) / .mouseout( )
 Cursor passa sobre ou sai dos elementos filhos
◦ .toggle( )
 Ativa funções em cliques alternados
 Eventos do teclado
◦ .focusin( )
 Ativado com o foco no elemento
◦ .focusout( )
 Ativado com a perda do foco no elemento
◦ .keypress( )
 Ativado com o pressionar de qualquer tecla
◦ .keyup( ) / .keydown( )
 Ativado com o pressionar/soltar a tecla
 Acesse esse link: http://goo.gl/dLYCO
e baixe o arquivo que vamos usar.
 Vamos incrementar a página usando jQuery
 O que for digitado na caixa de texto deve
aparecer na tela.
 Básicos
◦ .show( )
◦ .hide( )
◦ .toggle( )
 Opacidade
◦ .fadeIn( )
◦ .fadeOut( )
◦ .fadeToggle( )
 Corrediços
◦ .slideDown( )
◦ .slideUp( )
◦ .slideToggle( )
 HTML
<div>
<h3>Titulo 1</h3>
<p>texto 1. Texto, texto e mais texto</p>
</div>
 jQuery
$('p').hide( );
$('h3').click(function( ){
$('p').hide( );
$(this).parent( ).find('p').show( );
});
 HTML
<div>
<h3>Titulo 1</h3>
<p>texto 1. Texto, texto e mais texto</p>
</div>
 jQuery
$('p').hide( );
$('h3').click(function( ){
$('p').hide( );
$(this).parent( ).find('p').show( );
}); Agora teste outros métodos:
.fadeIn( ) e .fadeOut( )
.slideDown( ) e .slideUp( )
 Customização
◦ .animate( )
◦ .delay( )
◦ .stop( )
◦ CSS
div {
background-color:#abc;
width:90px;
height:90px;
margin:5px;
font-size:1px;
}
◦ HTML
<button id="left">&laquo;</button>
<button id="right">&raquo;</button>
<div class="block">x</div>
◦ jQuery
$("#right").click(function( ){
$(".block").animate({"margin-left": "+=200px"}, "slow");
});
$("#left").click(function( ){
$(".block").animate({"margin-left": "-=200px"}, "slow");
});
◦ HTML
<button id="go">elem x</button>
◦ jQuery
$("#go").click(function( ){
$(".block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "5em",
borderWidth: "10px"
}, 1500 );
});
 Baixe o arquivo: http://goo.gl/eo7MJ
 Ajude o Mário a chegar ao outro lado usando
o método animate() do jQuery.
 Eventos:
◦ .blur( )
◦ .change( )
◦ .focus( )
◦ .select( )
◦ .submit( )
◦ HTML
<form>
<input type="text" name="busca" />
</form>
◦ jQuery
$("input[name='busca']").val('Busca').css('color','#CCC')
.focus(function( ){
$(this).val('').css('color','#000');
}).blur(function( ){
$(this).val('Busca').css('color','#CCC');
});
 Vamos baixar o formulário e incrementá-lo
usando o jQuery. (http://goo.gl/ljccb)
 Começaremos analisando o código HTML do
formulário.
// Dicas de preenchimento
$(‘input + span').hide( );
$(".obrigatorio").blur(function( ){
var val = $(this).val( );
if(val == ""){
$(this).next( ).show( );
}else{
$(this).next( ).hide( );
}
});
//Desabilitar campos
$("#nao").change(function( ){
$("input[name='local']").val("")
.attr('disabled','disabled');
});
$("#sim").change(function( ){
$("input[name='local']")
.removeAttr('disabled');
});
//Selecionar todos
$("#all").click(function( ){
if(this.checked){
$(".curso").attr('checked','checked');
}else{
$(".curso").removeAttr('checked');
}
});
//Validar
$("form").submit(function( ) {
var nome = $("input[name='nome']").val( );
var nasc = $("input[name='data']").val( );
var mail = $("input[name='email']").val( );
if(nome == ‘’){
alert("Preencha o campo nome.");
return false;
}
if(mail == ‘’){
alert("Preencha o campo email.");
return false;
}
if((nasc != ‘’)&&(! nasc.match(
/^[0-9]{2}/[0-9]{2}/[0-9]{4}$/))){
alert("Data de nascimento inválida.");
return false;
}
return true;
});
 jQuery Documentation
 jQuery UI
 Plugins
 AJAX
 Compactação
 jQuery Mobile
 Testes
 Boas técnicas de programação
 http://jquery.com/
 http://ejohn.org/blog/selectors-in-javascript/
 http://bennolan.com/behaviour/
 http://www.w3schools.com/htmldom/default.asp
 jQuery – A Biblioteca do Programador JavaScript, 2008,
Maurício S. Silva, NOVATEC
 Ajax com jQuery – Requisições AJAX com a simplicidade de
jQuery, 2009, Maurício S. Silva, NOVATEC
Contato:
victorajoliveira@gmail.com
blogvictoradriel.blogspot.com

More Related Content

What's hot

What's hot (20)

Java script aula 09 - JQuery
Java script   aula 09 - JQueryJava script   aula 09 - JQuery
Java script aula 09 - JQuery
 
Jquery 2
Jquery 2Jquery 2
Jquery 2
 
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScriptjQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
 
jQuery na Prática - Cauê Fajoli
jQuery na Prática - Cauê FajolijQuery na Prática - Cauê Fajoli
jQuery na Prática - Cauê Fajoli
 
jQuery
jQueryjQuery
jQuery
 
Java script aula 10 - angularjs
Java script   aula 10 - angularjsJava script   aula 10 - angularjs
Java script aula 10 - angularjs
 
Html dom, eventos, jquery
Html dom, eventos, jqueryHtml dom, eventos, jquery
Html dom, eventos, jquery
 
XHtml
XHtmlXHtml
XHtml
 
MondoDB
MondoDBMondoDB
MondoDB
 
JavaScript - Introdução com Orientação a Objetos
JavaScript - Introdução com Orientação a ObjetosJavaScript - Introdução com Orientação a Objetos
JavaScript - Introdução com Orientação a Objetos
 
MiniCurso Jquery - IV SimSis
MiniCurso Jquery - IV SimSisMiniCurso Jquery - IV SimSis
MiniCurso Jquery - IV SimSis
 
Javascript truquesmagicos
Javascript truquesmagicosJavascript truquesmagicos
Javascript truquesmagicos
 
J query javascript para seres humanos
J query   javascript para seres humanosJ query   javascript para seres humanos
J query javascript para seres humanos
 
Javascript - Biblioteca Jquery
Javascript - Biblioteca JqueryJavascript - Biblioteca Jquery
Javascript - Biblioteca Jquery
 
Bloco 5.1 - Manipulação do DOM
Bloco 5.1 - Manipulação do DOMBloco 5.1 - Manipulação do DOM
Bloco 5.1 - Manipulação do DOM
 
Introdução ao MongoDB
Introdução ao MongoDBIntrodução ao MongoDB
Introdução ao MongoDB
 
PHP robusto com Zend Framework
PHP robusto com Zend FrameworkPHP robusto com Zend Framework
PHP robusto com Zend Framework
 
Backbone.js - A espinha dorsal de aplicações web
Backbone.js - A espinha dorsal de aplicações webBackbone.js - A espinha dorsal de aplicações web
Backbone.js - A espinha dorsal de aplicações web
 
Java script aula 05 - funções
Java script   aula 05 - funçõesJava script   aula 05 - funções
Java script aula 05 - funções
 
Html, css, js, ajax
Html, css, js, ajaxHtml, css, js, ajax
Html, css, js, ajax
 

Viewers also liked

jQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScriptjQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScriptGuy Royse
 
jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜
jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜
jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜Kazuyoshi Tsuchiya
 
jQuery Learning
jQuery LearningjQuery Learning
jQuery LearningUzair Ali
 
A Power User's Intro to jQuery Awesomeness in SharePoint
A Power User's Intro to jQuery Awesomeness in SharePointA Power User's Intro to jQuery Awesomeness in SharePoint
A Power User's Intro to jQuery Awesomeness in SharePointMark Rackley
 

Viewers also liked (7)

jQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScriptjQuery & 10,000 Global Functions: Working with Legacy JavaScript
jQuery & 10,000 Global Functions: Working with Legacy JavaScript
 
Jquery introduction
Jquery introductionJquery introduction
Jquery introduction
 
jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜
jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜
jQueryのその先へ〜Webフロントエンドの全体感をつかもう〜
 
jQuery Learning
jQuery LearningjQuery Learning
jQuery Learning
 
A Power User's Intro to jQuery Awesomeness in SharePoint
A Power User's Intro to jQuery Awesomeness in SharePointA Power User's Intro to jQuery Awesomeness in SharePoint
A Power User's Intro to jQuery Awesomeness in SharePoint
 
The jQuery Divide
The jQuery DivideThe jQuery Divide
The jQuery Divide
 
jQuery Introduction
jQuery IntroductionjQuery Introduction
jQuery Introduction
 

Similar to Programação Web com jQuery

jQuery - Visão Geral
jQuery - Visão GeraljQuery - Visão Geral
jQuery - Visão GeralKaio Valente
 
LPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdfLPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdfGabrielaMota46
 
Simplificando o Javascrip
Simplificando o JavascripSimplificando o Javascrip
Simplificando o JavascripMiquéias Amaro
 
jQuery - A biblioteca javascript
jQuery - A biblioteca javascriptjQuery - A biblioteca javascript
jQuery - A biblioteca javascriptDiogo Benicá
 
ODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQueryODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQueryMarketing Digital ODIG
 
A vida além do jQuery
A vida além do jQueryA vida além do jQuery
A vida além do jQueryPaulo Pires
 
Palestra - Iniciando no Jquery
Palestra - Iniciando no JqueryPalestra - Iniciando no Jquery
Palestra - Iniciando no Jquerygrupoweblovers
 
jQuery básico (parte 2)
jQuery básico (parte 2)jQuery básico (parte 2)
jQuery básico (parte 2)Luís Cobucci
 
Programando para programadores: Desafios na evolução de um Framework
Programando para programadores: Desafios na evolução de um FrameworkProgramando para programadores: Desafios na evolução de um Framework
Programando para programadores: Desafios na evolução de um FrameworkPablo Dall'Oglio
 
LambdaDay: Backbone.js
LambdaDay: Backbone.jsLambdaDay: Backbone.js
LambdaDay: Backbone.jsGiovanni Bassi
 
Javascript para CSharpers - Append B - jQuery
Javascript para CSharpers - Append B - jQueryJavascript para CSharpers - Append B - jQuery
Javascript para CSharpers - Append B - jQueryWesley Lemos
 
Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)
Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)
Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)Evandro Klimpel Balmant
 
Angular JS, você precisa conhecer
Angular JS, você precisa conhecerAngular JS, você precisa conhecer
Angular JS, você precisa conhecermeet2Brains
 

Similar to Programação Web com jQuery (20)

jQuery - Visão Geral
jQuery - Visão GeraljQuery - Visão Geral
jQuery - Visão Geral
 
LPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdfLPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdf
 
jQuery
jQueryjQuery
jQuery
 
Simplificando o Javascrip
Simplificando o JavascripSimplificando o Javascrip
Simplificando o Javascrip
 
JQuery
JQueryJQuery
JQuery
 
jQuery - A biblioteca javascript
jQuery - A biblioteca javascriptjQuery - A biblioteca javascript
jQuery - A biblioteca javascript
 
Minicurso de jQuery
Minicurso de jQueryMinicurso de jQuery
Minicurso de jQuery
 
ODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQueryODIG - Javascript, DOM Elements e jQuery
ODIG - Javascript, DOM Elements e jQuery
 
Componentes para a Web
Componentes para a WebComponentes para a Web
Componentes para a Web
 
A vida além do jQuery
A vida além do jQueryA vida além do jQuery
A vida além do jQuery
 
Aplicacoes Rapidas Para Web Com Django
Aplicacoes Rapidas Para Web Com DjangoAplicacoes Rapidas Para Web Com Django
Aplicacoes Rapidas Para Web Com Django
 
Palestra - Iniciando no Jquery
Palestra - Iniciando no JqueryPalestra - Iniciando no Jquery
Palestra - Iniciando no Jquery
 
jQuery básico (parte 2)
jQuery básico (parte 2)jQuery básico (parte 2)
jQuery básico (parte 2)
 
CSS & JQquery
CSS & JQqueryCSS & JQquery
CSS & JQquery
 
Programando para programadores: Desafios na evolução de um Framework
Programando para programadores: Desafios na evolução de um FrameworkProgramando para programadores: Desafios na evolução de um Framework
Programando para programadores: Desafios na evolução de um Framework
 
LambdaDay: Backbone.js
LambdaDay: Backbone.jsLambdaDay: Backbone.js
LambdaDay: Backbone.js
 
Javascript para CSharpers - Append B - jQuery
Javascript para CSharpers - Append B - jQueryJavascript para CSharpers - Append B - jQuery
Javascript para CSharpers - Append B - jQuery
 
Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)
Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)
Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)
 
Angular JS, você precisa conhecer
Angular JS, você precisa conhecerAngular JS, você precisa conhecer
Angular JS, você precisa conhecer
 
Workshop Django
Workshop DjangoWorkshop Django
Workshop Django
 

More from Victor Adriel Oliveira

More from Victor Adriel Oliveira (7)

Design and Application of Experiments and User Studies
Design and Application of Experiments and User StudiesDesign and Application of Experiments and User Studies
Design and Application of Experiments and User Studies
 
Working on Non-Conventional User Interfaces
Working on Non-Conventional User InterfacesWorking on Non-Conventional User Interfaces
Working on Non-Conventional User Interfaces
 
eScanner
eScannereScanner
eScanner
 
User Experience
User ExperienceUser Experience
User Experience
 
Programação Web com HTML e CSS
Programação Web com HTML e CSSProgramação Web com HTML e CSS
Programação Web com HTML e CSS
 
Acessibilidade em Sistemas para a Web
Acessibilidade em Sistemas para a WebAcessibilidade em Sistemas para a Web
Acessibilidade em Sistemas para a Web
 
eScanner
eScannereScanner
eScanner
 

Recently uploaded

PRODUCT OPS - COMO APROVEITAR O MÁXIMO DESTA NOVA TENDÊNCIA - Priscila Chagas...
PRODUCT OPS - COMO APROVEITAR O MÁXIMO DESTA NOVA TENDÊNCIA - Priscila Chagas...PRODUCT OPS - COMO APROVEITAR O MÁXIMO DESTA NOVA TENDÊNCIA - Priscila Chagas...
PRODUCT OPS - COMO APROVEITAR O MÁXIMO DESTA NOVA TENDÊNCIA - Priscila Chagas...Priscila Ribeiro Chagas
 
TI EXAMES - NIST Cybersecurity Framework.pdf
TI EXAMES - NIST Cybersecurity Framework.pdfTI EXAMES - NIST Cybersecurity Framework.pdf
TI EXAMES - NIST Cybersecurity Framework.pdfRodrigoMori7
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Dirceu Resende
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Dirceu Resende
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Dirceu Resende
 
O papel da automação de processos no mundo do trabalho pós-moderno
O papel da automação de processos no mundo do trabalho pós-modernoO papel da automação de processos no mundo do trabalho pós-moderno
O papel da automação de processos no mundo do trabalho pós-modernoDenis Pereira Raymundo
 
Knowtree - Extração de Dados com o KAPE.
Knowtree - Extração de Dados com o KAPE.Knowtree - Extração de Dados com o KAPE.
Knowtree - Extração de Dados com o KAPE.Thiago lindolfo
 

Recently uploaded (7)

PRODUCT OPS - COMO APROVEITAR O MÁXIMO DESTA NOVA TENDÊNCIA - Priscila Chagas...
PRODUCT OPS - COMO APROVEITAR O MÁXIMO DESTA NOVA TENDÊNCIA - Priscila Chagas...PRODUCT OPS - COMO APROVEITAR O MÁXIMO DESTA NOVA TENDÊNCIA - Priscila Chagas...
PRODUCT OPS - COMO APROVEITAR O MÁXIMO DESTA NOVA TENDÊNCIA - Priscila Chagas...
 
TI EXAMES - NIST Cybersecurity Framework.pdf
TI EXAMES - NIST Cybersecurity Framework.pdfTI EXAMES - NIST Cybersecurity Framework.pdf
TI EXAMES - NIST Cybersecurity Framework.pdf
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
 
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
Apresentação Power Embedded - Descubra uma nova forma de compartilhar relatór...
 
O papel da automação de processos no mundo do trabalho pós-moderno
O papel da automação de processos no mundo do trabalho pós-modernoO papel da automação de processos no mundo do trabalho pós-moderno
O papel da automação de processos no mundo do trabalho pós-moderno
 
Knowtree - Extração de Dados com o KAPE.
Knowtree - Extração de Dados com o KAPE.Knowtree - Extração de Dados com o KAPE.
Knowtree - Extração de Dados com o KAPE.
 

Programação Web com jQuery

  • 1. A melhor forma de escrever JavaScript
  • 2.  Victor Adriel de J. Oliveira ◦ Ciência da Computação - UESC ◦ Associação Empresa Júnior de Computação ◦ Programação Web: HTML/CSS (tableless), jQuery, PHP, Smarty, ... ◦ Contato: victorajoliveira@gmail.com blogvictoradriel.blogspot.com
  • 3.  Introdução ◦ O que é ◦ Características ◦ DOM ◦ JavaScript ◦ Como usar ◦ JavaScript vs. jQuery  jQuery em ação ◦ Método ready( ) ◦ Construtor $( ) ◦ Seletores ◦ Manipulação do DOM ◦ CSS ◦ Eventos ◦ Efeitos ◦ Formulários
  • 4.  É uma biblioteca JavaScript disponibilizada como software livre e aberto, desenvolvida para mudar a forma de escrever JavaScript.  “O foco principal da biblioteca jQuery é a simplicidade. Por que submeter os desenvolvedores ao martírio de escrever longos e complexos códigos para criar simples efeitos?” (John Resig, jQuery in Action)
  • 5.  Utiliza seletores CSS para acessar e manipular o DOM;  Alheio às inconsistências de renderização entre navegadores;  Extensível;  Provê interatividade;  Simplifica tarefas específicas de JavaScript.
  • 6.  HTML DOM: ◦ O HTML DOM define objetos e propriedades para todos os elementos HTML, e os métodos (interface) para acessá-los. ◦ Em outras palavras: o HTML DOM é um padrão para acesso, atualização, adição ou deleção de elementos HTML.
  • 7.  Propriedades do HTML DOM: ◦ x.innerHTML – texto do elemento x ◦ x.nodeName – nome do elemento x ◦ x.nodeValue – valor do elemento x ◦ x.parentNode – pai do elemento x ◦ x.childNodes – filhos do elemento x ◦ x.attributes – atributos do elemento x
  • 8.  Métodos do HTML DOM: ◦ x.getElementById(id)  Captura o elemento com um id específico ◦ x.getElementsByTagName(name)  Captura todos os elementos com o mesmo comando ◦ x.appendChild(node)  Insere um novo nó filho no elemento x ◦ x.removeChild(node)  Remove um nó filho do elemento x
  • 9.  Métodos do HTML DOM: <html> <body> <p id="intro">Hello World!</p> <script type=“text/javascript”> txt=document.getElementById("intro").innerHTML; alert("O texto do paragrafo com o id 'info': " + txt); </script> </body> </html>
  • 10.  Métodos do HTML DOM: <html> <body> <p id="intro">Hello World!</p> <script type=“text/javascript”> txt=document.getElementById("intro").innerHTML; alert("O texto do paragrafo com o id 'info': " + txt); </script> </body> </html> Var txt = $(‘#intro’).val(); Com jQuery
  • 11.  Ir ao site: http://jquery.com  Fazer download da biblioteca  Linkar na página HTML: <head> <script type=“text/javascript” src=“/caminho/jquery-vs.js”></script> </head>
  • 14.  Minified ◦ jquery-1.6.4.min.js ◦ Compacto e de leitura difícil  Uncompressed ◦ jquery-1.6.4.js ◦ Espaço entre cada linha de código e amplamente comentado.
  • 15.  HTML: <h1 id=“cor”>Cabeçalho muda de cor</h1> <button type=“button” id=“btnRed”> Vermelha </button>
  • 16.  JavaScript: <script type="text/javascript"> window.onload = function( ){ document.getElementById('btnRed').onclick = mudaCor; } function mudaCor( ){ document.getElementById('cor').style.color='#F00'; } </script>
  • 17.  jQuery: <script type=“text/javascript” src=“jquery.js”></script> <script type=“text/javascript”> $(document).ready(function( ){ $(“#btnRed”).click(function( ) { $(“#cor”).css(“color”, “#FF0000”); }); }); </script>
  • 18.  No javascript window.onload = function( ){ Do this; }  No jQuery $(document).ready(function( ){ Do this; });
  • 19.  Pode ser escrito de duas maneiras: ◦ $( ) ◦ jQuery( )  jQuery.noConflict( ) ◦ Usa o alias jQuery ou outro de sua preferência ◦ Ex: $infoIlheus = jQuery.noConflict( ); $infoIlheus(document).ready(function( ){ ... });
  • 20.  Categorias: ◦ Básicos ◦ De atributo ◦ Hierárquicos ◦ Filtros  Básicos  De conteúdo  Por visibilidade  De filhos ◦ De formulários
  • 21. ◦ Universal  $(“*”) ◦ De elemento  $(“p”) ◦ De múltiplos elementos  $(“p, h1, img”) ◦ De classe  $(“.class”) ◦ De ID  $(“#id”)
  • 22.  Atributos ◦ .attr( nomeAtributo ) .attr( nomeAtributo, valor ) .removeAttr( nomeAtributo ) Ex: $(‘input’).attr(‘disabled’, ‘disabled’) ◦ .addClass( nomeClasse ) .removeClass( [nomeClasse] ) .hasClass( nomeClasse ) .toggleClass( nomeClasse )
  • 23.  Inserção no DOM (Outside) ◦ .after( ) ◦ .before( ) Ex: $("p").before("<b>Hello</b>");  Inserção no DOM (Inside) ◦ .append( ) ◦ .prepend( ) Ex: $("p").prepend("<b>Hello</b>");
  • 24.  Inserção no DOM (Inside) ◦ .html( ) ◦ .text( ) ◦ .val( ) Ex: $(“div").html(“<button>botão</button>”);  Inserção no DOM (Around) ◦ .wrap( ) Ex: $("p").wrap("<div></div>");
  • 25.  Remoção no DOM ◦ .unwrap( ) ◦ .empty( ) ◦ .remove( )  Substituição no DOM ◦ .replaceAll( ) ◦ .replaceWith( )  Cópias ◦ .clone( )
  • 26.  HTML <label>Colaboradores:</label> <select class="copy" style="display:block;"> <option value="0">Selecione um...</option> <option value="1">Ana</option> <option value="2">João</option> <option value="3">Maria</option> </select> <button id="novoColaborador">More</button> <button id="removColaborador">Less</button>
  • 27.  jQuery $('#novoColaborador').click(function( ){ $('.copy:last').clone( ).appendTo('body'); }); $('#removColaborador').click(function( ){ $('.copy:last').remove( ); });
  • 28.  Propriedades de estilo ◦ .css( ) Ex: ◦ var back = $(“div").css("background-color"); ◦ $("p").css("color","red"); ◦ $( this ).css({"width" : "+=100", "color" : "red"});
  • 29.  Eventos do mouse ◦ .click( )  Ativado com um clique ◦ .dblclick( )  Ativado com um duplo clique ◦ .hover( )  Ativado quando o cursor estiver sobre o elemento ◦ .mousemove( )  Ativado com o movimento do mouse
  • 30.  Eventos do mouse ◦ .mousedown( ) / .mouseup( )  Ativado com pressionar/soltar o clique ◦ .mouseenter( ) / .mouseleave( )  Cursor passa sobre ou deixa o elemento ◦ .mouseover( ) / .mouseout( )  Cursor passa sobre ou sai dos elementos filhos ◦ .toggle( )  Ativa funções em cliques alternados
  • 31.  Eventos do teclado ◦ .focusin( )  Ativado com o foco no elemento ◦ .focusout( )  Ativado com a perda do foco no elemento ◦ .keypress( )  Ativado com o pressionar de qualquer tecla ◦ .keyup( ) / .keydown( )  Ativado com o pressionar/soltar a tecla
  • 32.  Acesse esse link: http://goo.gl/dLYCO e baixe o arquivo que vamos usar.  Vamos incrementar a página usando jQuery  O que for digitado na caixa de texto deve aparecer na tela.
  • 33.  Básicos ◦ .show( ) ◦ .hide( ) ◦ .toggle( )  Opacidade ◦ .fadeIn( ) ◦ .fadeOut( ) ◦ .fadeToggle( )  Corrediços ◦ .slideDown( ) ◦ .slideUp( ) ◦ .slideToggle( )
  • 34.  HTML <div> <h3>Titulo 1</h3> <p>texto 1. Texto, texto e mais texto</p> </div>  jQuery $('p').hide( ); $('h3').click(function( ){ $('p').hide( ); $(this).parent( ).find('p').show( ); });
  • 35.  HTML <div> <h3>Titulo 1</h3> <p>texto 1. Texto, texto e mais texto</p> </div>  jQuery $('p').hide( ); $('h3').click(function( ){ $('p').hide( ); $(this).parent( ).find('p').show( ); }); Agora teste outros métodos: .fadeIn( ) e .fadeOut( ) .slideDown( ) e .slideUp( )
  • 36.  Customização ◦ .animate( ) ◦ .delay( ) ◦ .stop( )
  • 37. ◦ CSS div { background-color:#abc; width:90px; height:90px; margin:5px; font-size:1px; } ◦ HTML <button id="left">&laquo;</button> <button id="right">&raquo;</button> <div class="block">x</div>
  • 38. ◦ jQuery $("#right").click(function( ){ $(".block").animate({"margin-left": "+=200px"}, "slow"); }); $("#left").click(function( ){ $(".block").animate({"margin-left": "-=200px"}, "slow"); });
  • 39. ◦ HTML <button id="go">elem x</button> ◦ jQuery $("#go").click(function( ){ $(".block").animate({ width: "70%", opacity: 0.4, marginLeft: "0.6in", fontSize: "5em", borderWidth: "10px" }, 1500 ); });
  • 40.  Baixe o arquivo: http://goo.gl/eo7MJ  Ajude o Mário a chegar ao outro lado usando o método animate() do jQuery.
  • 41.  Eventos: ◦ .blur( ) ◦ .change( ) ◦ .focus( ) ◦ .select( ) ◦ .submit( )
  • 42. ◦ HTML <form> <input type="text" name="busca" /> </form> ◦ jQuery $("input[name='busca']").val('Busca').css('color','#CCC') .focus(function( ){ $(this).val('').css('color','#000'); }).blur(function( ){ $(this).val('Busca').css('color','#CCC'); });
  • 43.  Vamos baixar o formulário e incrementá-lo usando o jQuery. (http://goo.gl/ljccb)  Começaremos analisando o código HTML do formulário.
  • 44. // Dicas de preenchimento $(‘input + span').hide( ); $(".obrigatorio").blur(function( ){ var val = $(this).val( ); if(val == ""){ $(this).next( ).show( ); }else{ $(this).next( ).hide( ); } });
  • 47. //Validar $("form").submit(function( ) { var nome = $("input[name='nome']").val( ); var nasc = $("input[name='data']").val( ); var mail = $("input[name='email']").val( ); if(nome == ‘’){ alert("Preencha o campo nome."); return false; }
  • 48. if(mail == ‘’){ alert("Preencha o campo email."); return false; } if((nasc != ‘’)&&(! nasc.match( /^[0-9]{2}/[0-9]{2}/[0-9]{4}$/))){ alert("Data de nascimento inválida."); return false; } return true; });
  • 49.  jQuery Documentation  jQuery UI  Plugins  AJAX  Compactação  jQuery Mobile  Testes  Boas técnicas de programação
  • 50.  http://jquery.com/  http://ejohn.org/blog/selectors-in-javascript/  http://bennolan.com/behaviour/  http://www.w3schools.com/htmldom/default.asp  jQuery – A Biblioteca do Programador JavaScript, 2008, Maurício S. Silva, NOVATEC  Ajax com jQuery – Requisições AJAX com a simplicidade de jQuery, 2009, Maurício S. Silva, NOVATEC Contato: victorajoliveira@gmail.com blogvictoradriel.blogspot.com