Upload
victor-adriel-oliveira
View
683
Download
5
Embed Size (px)
DESCRIPTION
Oficina realizada em 2011. Apresenta a linguagem javascript e os frameworks jQuery e jQuery UI. Contém vários exercícios práticos e demos além de referências úteis.
Citation preview
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>
<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.
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:
<script type=“text/javascript”>
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
$(document).ready(function(){
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
$(document).ready(function(){
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( )
Dimensionamento◦ .height( ) / .width( )
◦ .innerHeight( ) / .innerWidth( )
◦ .outerHeight( ) / .outerWidth( )
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
var estado=0;$(‘body’).keypress(function(tecla){
switch( estado ){case 0:
if(tecla.which==116){ estado++; } else { estado=0; }break;
case 1:if(tecla.which==101){ estado++; } else { estado=0; }break;
case 2:if(tecla.which==99){
alert(“ Vc digitou ‘tec’? ”); } estado=0;
}});
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.
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.
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.
// 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