Embed Size (px)
DESCRIPTION
Oficina realizada na InfoIlhéus em 2011. Apresenta o framework jQuery como uma ferramenta para a rápida escrita de javascript.
Citation preview
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:
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çã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>
<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>
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 javascriptwindow.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/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.
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( )
◦ 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 );
});
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:
![(jQuery Fundamentals) Fundamentos de jQuery191.13.234.92/.../Arquivos/LPA/JQuery/apostilas/apostila-jquery-br.pdf · Fundamentos de jQuery (jQuery Fundamentals) Rebecca Murphey []](https://img.document.onl/doc/110x75/6077fbbcb4f4d25f0363d510/jquery-fundamentals-fundamentos-de-jquery1911323492arquivoslpajqueryapostilasapostila-jquery-brpdf.jpg)
