25. Porquê?
Uma das frameworks mais populares na
actualidade
Facilmente extensível (plugins!)
Extremamente fácil de aprender
26. var jQuery
jQuery (ou $) é a função principal.
Este objecto global incorpora todas as
propriedades e métodos disponíveis na
framework
27. var jQuery
Quando utilizada como função, selecciona
elementos do DOM.
Utilizando uma sintaxe muito semelhante a
CSS
28. var jQuery
var el1 = $(“#um”);
// Retorna o elemento com o id #um
var el2 = $(‘ul.menu li a’);
// Retorna um array com todos os elementos a dentro de li que
estejam dentro do ul com a classe “menu”
29. var jQuery
Os elementos seleccionados herdam métodos e
propriedades da framework.
O jQuery permite “chaining”
30. var jQuery
$(“#um”).show().css({background: “red”, color: “white”});
$(“#um”).addClass(‘disappearing’).fadeOut(‘fast’);
$(“#um”).click(function(){
$(this).text(‘mudei o meu texto!’).addClass(‘awesome’);
});
31. var jQuery
Quero usar jQuery com outra framework!!
Mas essa framework também utiliza $() como
função principal...
44. O que é?
Define onde as variáveis e funções se
encontram acessíveis.
Uma variável ou função pode ter scope local
ou global
Num browser, a scope global refere-se ao
objecto window.
49. A keyword “this”
function ola() {
...
}
element.onclick = ola; // na função “ola”, this == element
element.addEventListener(‘click’, ola) // mesma coisa!
50. A keyword “this”
function ola() {
...
}
<element onclick=”ola();” />
// Função é apenas uma referência,
// this == window (!)
54. Exemplo prático!
function ola(nome) {
var texto = “Olá ” + nome, //var local
alerta = function() { alert(texto); }
return alerta;
}
var umAlerta = ola(“Bruno”);
umAlerta(); // Mostra “Olá Bruno!”
55. Outro exemplo
function addLinks () {
for (var i=0, link; i<5; i++) {
link = document.createElement("a");
link.innerHTML = "Link " + i;
link.onclick = function () {
alert(i);
};
document.body.appendChild(link);
}
}
window.onload = addLinks;
56. Outro exemplo
function addLinks () {
for (var i=0, link; i<5; i++) {
L
link = document.createElement("a");
A I
link.innerHTML = "Link " + i;
F
link.onclick = function () {
alert(i);
};
document.body.appendChild(link);
}
}
window.onload = addLinks;
57. Outro exemplo
function addLinks () {
for (var i=0, link; i<5; i++) {
link = document.createElement("a");
link.innerHTML = "Link " + i;
link.onclick = function (i) {
return function(){
alert(i);
}
}(i);
document.body.appendChild(link);
}
}
window.onload = addLinks;
61. Problema!
A variável “msg” utilizada na closure é uma
referência.
Quando o seu valor muda durante a execução
da função pai, a referência é actualizada em
todas as closures onde existe.
62. Solução!
var msg = ‘xpto153’;
$(‘a#awesomeLink’).click(function(){
var correctMsg = msg;
alert(correctMsg);
});
msg = ‘zyvr62’;
$(‘a#otherLink’).click(function(){
var correctMsg = msg;
alert(correctMsg);
});
63. Solução!
var msg = ‘xpto153’;
xpto153
$(‘a#awesomeLink’).click(function(){
#awesomeLink
var correctMsg = msg;
alert(msg);
}); zyvr62
msg = ‘zyvr62’;
#otherLink
$(‘a#otherLink’).click(function(){
var correctMsg = msg;
alert(msg);
});
Link n&#xE3;o tem um href v&#xE1;lido
Search Engines n&#xE3;o seguem o link
Link n&#xE3;o funciona sem Javascript
Melhor...
Utiliza um event handler para executar JS
href continua sem levar a lado nenhum!
Melhor...
Utiliza um event handler para executar JS
href continua sem levar a lado nenhum!
Ainda Melhor...
Utilizadores sem JS conseguem ver a imagem
return false impede o browser de seguir o link
Mas JS inline n&#xE3;o &#xE9; grande ideia.
Dif&#xED;cil de manter
Microsoft utiliza modelo de eventos propriet&#xE1;rio
Existem preocupa&#xE7;&#xF5;es cross-browser
getElementsByClassName n&#xE3;o tem implementa&#xE7;&#xE3;o nativa em muitos browsers
Chaining acontece quando um m&#xE9;todo ou propriedade retorna de novo o elemento original, para que este possa invocar novos m&#xE9;todos ou aceder a novas propriedades
noConflict() liberta o controlo da vari&#xE1;vel $
para n&#xE3;o ter de escrever sempre jQuery() podemos atribuir o noConflict a outra var
Uma framework n&#xE3;o &#xE9; um substituto para o JS
Apesar de serem f&#xE1;ceis de utilizar, uma fraca compreens&#xE3;o da linguagem pode tornar a sua utiliza&#xE7;&#xE3;o um inferno!
Uma framework n&#xE3;o &#xE9; um substituto para o JS
Apesar de serem f&#xE1;ceis de utilizar, uma fraca compreens&#xE3;o da linguagem pode tornar a sua utiliza&#xE7;&#xE3;o um inferno!
Uma framework n&#xE3;o &#xE9; um substituto para o JS
Apesar de serem f&#xE1;ceis de utilizar, uma fraca compreens&#xE3;o da linguagem pode tornar a sua utiliza&#xE7;&#xE3;o um inferno!
Uma framework n&#xE3;o &#xE9; um substituto para o JS
Apesar de serem f&#xE1;ceis de utilizar, uma fraca compreens&#xE3;o da linguagem pode tornar a sua utiliza&#xE7;&#xE3;o um inferno!
A vari&#xE1;vel e fun&#xE7;&#xE3;o ficam afectas ao objecto window.
A var msg est&#xE1; dentro o scope da fun&#xE7;&#xE3;o, ou seja, s&#xF3; existe dentro do Activation Object da fun&#xE7;&#xE3;o, e &#xE9; destru&#xED;da quando a fun&#xE7;&#xE3;o &#xE9; interpretada.
O owner da fun&#xE7;&#xE3;o &#xE9; o objecto global
O registo de eventos tradicional copia a fun&#xE7;&#xE3;o para o m&#xE9;todo onclick do objecto &#x201C;element&#x201D;, e portanto o this refere-se agora ao elemento
Fun&#xE7;&#xE3;o &#xE9; passada por refer&#xEA;ncia e portanto &#xE9; executada no seu contexto original
Ao contr&#xE1;rio do que acontece normalmente, &#xE9; mantida viva uma refer&#xEA;ncia &#xE0; var &#x201C;texto&#x201D;
a fun&#xE7;&#xE3;o &#x201C;alerta&#x201D; cria uma closure lembra-se do &#xFA;ltimo valor da var &#x201C;texto&#x201D;
Ao clicar nos diferentes links, todos mostram a mensagem &#x201C;5&#x201D;
A vari&#xE1;vel
Dentro da fun&#xE7;&#xE3;o onclick &#xE9; criada uma closure
A fun&#xE7;&#xE3;o passada ao evento &#x201C;onclick&#x201D; &#xE9; auto-executada na altura da atribui&#xE7;&#xE3;o e passa como argumento o valor de &#x201C;i&#x201D; naquele momento do loop
A vari&#xE1;vel correctMsg s&#xF3; existe na scope da fun&#xE7;&#xE3;o em closure.
No momento da sua declara&#xE7;&#xE3;o, o valor de &#x201C;msg&#x201D; &#xE9; copiado para &#x201C;correctMsg&#x201D;
Como todos os objectos herdam m&#xE9;todos do objecto abstracto &#x201C;Object&#x201D;, a fun&#xE7;&#xE3;o &#x201C;myFunction&#x201D; passa a estar imediatamente dispon&#xED;vel em todos os objectos criados.
&#xC9; tamb&#xE9;m poss&#xED;vel redefinir fun&#xE7;&#xF5;es. Neste caso estamos a melhorar a fun&#xE7;&#xE3;o nativa toString para mostrar nomes de propriedades de um objecto e seus valores
&#xC9; tamb&#xE9;m poss&#xED;vel redefinir fun&#xE7;&#xF5;es. Neste caso estamos a melhorar a fun&#xE7;&#xE3;o nativa toString para mostrar nomes de propriedades de um objecto e seus valores