Programação Web com jQuery

Victor Adriel

Victor Adriel de J. Oliveira

Associação Empresa Júnior de Computação:◦ 2008 – Trainee

◦ 2009 – Diretor Administrativo/Financeiro

◦ 2010 – Conselheiro Fiscal

Programação Web:

[HTML/CSS (tableless), jQuery, PHP, Smarty]

Contato: [email protected]

blogvictoradriel.blogspot.com

O que é

Sintaxe◦ Seletores

◦ Manipulação do DOM

◦ CSS

◦ Eventos

◦ Efeitos

◦ Formulários

jQuery UI

Práticas

É 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)

22/08/2005◦ “The premise for the module is as follows: Using

the power of Pseudo-CSS Selectors, bind your Javascript functions to various HTML elements in the DOM. Looking at how Behaviour works, I've never been completely happy - it simply seems too tedious and verbose for everyday use.” (John Resig)

14/01/2006◦ jQuery: New Wave Javascript

22/08/2005◦ “The premise for the module is as follows: Using

the power of Pseudo-CSS Selectors, bind your Javascript functions to various HTML elements in the DOM. Looking at how Behaviour works, I've never been completely happy - it simply seems too tedious and verbose for everyday use.”

14/01/2006◦ jQuery: New Wave Javascript

“Jquery is like behaviour that has been sent back from the future by a secret fucking government lab”

Zombieland

Utiliza seletores CSS para acessar e manipular o DOM;

Alheio às inconsistências de renderizaçãoentre 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>


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>

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.

JavaScript in-line:◦ CSS

<style type=“text/css”>h1 { color:#090; }

</style>

◦ HTML com o JavaScript in-line

<h1 id=“cor”>Cabeçalho muda de cor</h1><button type=“button”

onclick=“document.getElementById(‘cor’).style.color=‘#F00’;”>Vermelha</button>

Função JavaScript:<script type=“text/javascript”>

function mudaCor() {document.getElementById(‘cor’).style.color=‘#F00’;}

</script>

◦ HTML

<h1 id=“cor”>Cabeçalho muda de cor</h1><button type=“button”

onclick=“mudaCor();”>Vermelha</button>

JavaScript fora da marcação:


Window.onload = function(){

Document.getElementById(‘btnRed’).onclick = mudaCor;

}

function mudaCor() {

document.getElementById(‘cor’).style.color=‘#F00’;

}

</script>

JavaScript fora da marcação:

◦ HTML

<h1 id="cor">Cabeçalho muda de cor</h1>

<button type="button" id=“btnRed">Vermelha</button>

jQuery:<script type="text/javascript"

src="jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#btnRed").click(function () {

$("#cor").css("color","#FF0000");

});

});

</script>

Método ready()

◦ No javascript

window.onload = function(){

Do this;

}

◦ No jQuery


Do this;

});

Construtor jQuery

◦ $( )

◦ jQuery( )

jQuery.noConflict( )

◦ Usa o alias jQuery ou outro de sua preferência

jQuery adota os seletores CSS 3! #ôPelaDoido

É necessário rever a terminologia aplicada aos elementos que compõem a árvore do documento.

HTML DOM

Categorias:◦ Básicos

◦ De atributo

◦ Hierárquicos

◦ Filtros

Básicos

De conteúdo

Por visibilidade

De filhos

◦ De formulários

Básicos◦ Universal

$(“*”)

◦ De elemento

$(“p”)

◦ De múltiplos elementos

$(“p, h1, img”)

Básicos◦ De classe

$(“.class”)

◦ De ID

$(“#id”)

De atributo $(‘[nome]’)

$(‘[nome = “valor”]’)

$(‘[nome != “valor”]’)

$(‘[nome ^= “valor”]’)

$(‘[nome |= “valor”]’)

De atributo $(‘[nome *= “valor”]’)

$(‘[nome ~= “valor”]’)

$(‘[nome $= “valor”]’)

$(‘[nome = “valor”][nome2 = “valor2”]’)

Hierárquicos $(“ancestral descendente”)

$(“pai > filho”)

$(“anterior + posterior”)

$(“elemento ~ irmãos”)

Atributos gerais◦ .attr( nomeAtributo )

.attr( nomeAtributo, valor )

Ex: $(‘input’).attr(‘disabled’, ‘disabled’)

◦ .prop( nomePropriedade ).prop( nomePropriedade, valor )

Ex: $(‘input’).prop({disabled: true

});

◦ .removeAttr( nomeAtributo )

◦ .removeProp( nomePropriedade )

Ex: $(“input”).removeProp(“checked”);

◦ .val( )

.val( valor )

Ex: $(“input”).val(‘Digite seu nome’);

Atributos de classe◦ .addClass( nomeClasse )

◦ .removeClass( [nomeClasse] )

◦ .hasClass( nomeClasse )

◦ .toggleClass( nomeClasse )

.toggleClass( nomeClasse, switch )

.toggleClass( [switch] )

HTML

<body>

<img src=" http://goo.gl/kQBXL"

alt="Yao Ming" />

<div class="info"></div>

</body>

jQuery


var atrAlt = $('img').attr('alt');

$('div').text(atrAlt );

$('img').attr('title','Você perdeu a capacitação?');

});

CSS

<style type=“text/css”>

.info{ color: red; }

.highlight { background: yellow; }

</style>

jQuery

$('div').removeClass('info');

jQuery

$('div').removeClass('info').addClass('highlight');

jQuery

$('div').removeClass('info').addClass('highlight');

var ctd=0;

$('div').click(function( ){

ctd++;

$('div').toggleClass('highlight', ctd % 3 == 0);

});

Inserção no DOM (Outside)◦ .after( )

◦ .before( )

Ex: $("p").before("<b>Hello</b>");

◦ .insertAfter( )

◦ .insertBefore( )

Ex: $("p").insertBefore("#smthng");

Inserção no DOM (Inside)◦ .append( )

◦ .prepend( )

Ex: $("p").prepend("<b>Hello</b>");

◦ .appendTo( )

◦ .prependTo( )

Ex: $("p").prependTo("#smthng");

Inserção no DOM (Inside)◦ .html( )

◦ .text( )

Ex:

◦ $(“div").html(“<button>botão</button>”);

◦ $(“div").text (“<button>botão</button>”);

Inserção no DOM (Around)◦ .wrap( )◦ .wrapAll( )◦ .wrapInner( )

◦ CSSdiv { border: 2px solid blue; }p { background:yellow; margin:4px; }

◦ HTML<p>Hello</p>

◦ jQuery$("p").wrap("<div></div>");

Remoção no DOM◦ .unwrap( )

Remove o pai e coloca o filho no lugar

◦ .empty( )

Remove conteúdo do elemento

◦ .detach( )

Remove elementos mas permite recuperá-los

◦ .remove( )

Remove elementos completamente

Substituição no DOM◦ .replaceAll( )

◦ .replaceWith( )

Ex:

◦ $("<b>Paragraph. </b>").replaceAll("p");

◦ $("p").replaceWith("<b>Paragraph. </b>");

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"});

Dimensionamento◦ .height( ) / .width( )

◦ .innerHeight( ) / .innerWidth( )

◦ .outerHeight( ) / .outerWidth( )

Offset◦ .offset( )

◦ .position( )

Ex:

var pos = $("p").position( );

alert( pos.left );

◦ .scrollLeft( ) / .scrollTop( )

Ex: $(“div").scrollLeft(300);

Diferença entre offset e position:

◦ CSSdiv { padding: 15px;}p { margin-left:10px; }

◦ HTML

<div><p>Hello</p></div>

<p></p>

◦ jQueryvar pos = $("p:first").position( );$("p:last").text( "left: "+ pos.left + ", top: "+ pos.top );

◦ CSS#box {background: black; color: #fff; width:100px;}

◦ HTML<div id="box">Click me to grow</div>

◦ jQuery

$("#box").click(function ( ) {$( this ).css( "width","+=200" );

});

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

Vamos usar o jsbin para treinar

<body>

<p>Pressione o mouse aqui.</p>

<script>

$("p").mouseup(function( ){

$(this).append('<span style="color:#F00;">Up.</span>');

}).mousedown(function(){

$(this).append('<span style="color:#00F;">Down.</span>');

});

</script>

</body>

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

Além dos eventos do mouse e teclado vocês devem estudar mais sobre:

Event Handler Attachment

Objetos de eventos

Eventos do browser

Carregando o documento

Agora vamos brincar um pouquinho ^^

Acesse esse link: http://goo.gl/dLYCOe 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.

http://goo.gl/dLYCO

Categorias◦ Básicos

◦ De opacidade

◦ Corrediços

◦ De customização

Básicos◦ .hide( )

◦ .show( )

◦ .toggle( )

Opacidade◦ .fadeIn( )

◦ .fadeOut( )

◦ .fadeTo( )

◦ .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( )

◦ CSSdiv {

background-color:#abc;

width:90px;

height:90px;

margin:5px;

font-size:1px;

}

◦ HTML<button id="left">«</button>

<button id="right">»</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 );

});

◦ HTML

<button id=“stop">STOP</button>

◦ jQuery

$("#stop").click(function( ){

$(".block").stop( );

});

Baixe o arquivo: http://goo.gl/eo7MJ◦ Ajude o Mário a chegar ao outro lado usando o

método animate() do jQuery.

http://goo.gl/eo7MJ

Seletores para formulários:◦ :button

◦ :checkbox

◦ :input

◦ :text

◦ :radio

◦ :submit

◦ :reset

◦ :password

◦ :selected

◦ ...

Seletores para formulários:◦ :button

◦ :checkbox

◦ :input

◦ :text

◦ :radio

◦ :submit

◦ :reset

◦ :password

◦ :selected

◦ ...

Ex:

$(“input:password”).css(“color”, “#CCC”);

Eventos relacionados a formulários:◦ .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/Feq7L)

Começaremos analisando o código HTML do formulário.

http://goo.gl/Feq7L

// 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;

});

Provê abstrações para interações e animações de baixo-nível, efeitos avançados e ferramentas personalizáveis construídas sobre a biblioteca jQuery.

Interações◦ Draggable

◦ Droppable

◦ Resizable

◦ Selectable

◦ Sortable

Widgets

◦ Accordion

◦ Autocomplete

◦ Button

◦ Datepicker

◦ Dialog

◦ Progressbar

◦ Slider

◦ Tabs

var nomes= ["Beatriz Silva","Eduardo Dantas","Ivan Cezanne","Janai Maciel","José Adão","Newton Costa","Thiago Evangelista"];

$( "input[name='nome']" ).autocomplete({ source: nomes });

HTML

<div id="dialog" title="Muaahaa">

<p>Cuidado: Vírus! Não feche essa pop-up.</p>

</div>

jQuery

$( "#dialog" ).dialog();

<div id="tabs"><ul>

<li><a href="#tabs-1">Um item</a></li><li><a href="#tabs-2">Outro</a></li><li><a href="#tabs-3">Mais um</a></li>

</ul><div id="tabs-1">

<p>Um texto aqui.</p></div><div id="tabs-2">

<p>Um texto aqui.</p></div><div id="tabs-3">

<p>Um texto aqui.</p><p>Um texto aqui.</p>

</div></div> jQuery:

$( "#tabs" ).tabs( );

<div id="accordion"><h3><a href="#">Um item</a></h3><div>

<p>Um texto aki</p></div><h3><a href="#">Outro</a></h3><div>

<p>Um texto aki</p></div><h3><a href="#">Mais um</a></h3><div>

<p>Um texto aki</p></div>

</div>jQuery: $( "#accordion" ).accordion( );

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

Programação Web com jQuery

Technology

Transcript of Programação Web com jQuery