O documento discute princípios da linguagem Javascript e utilização de frameworks. Ele apresenta três pontos principais: 1. Separar uma aplicação em três componentes lógicos: conteúdo (HTML), apresentação (CSS) e comportamento (Javascript). 2. Exemplos práticos de como implementar a separação de componentes utilizando Javascript semântico e progressivamente mais Javascript não intrusivo. 3. Como frameworks como jQuery abstraem métodos nativos do Javascript e lidam com inconsistências entre browsers, facilitando o desenvolvimento.

1. Javascript
Princípios da linguagem e utilização de
frameworks

2. Separação de
componentes

3. Unobtrusive
Javascript
Separar a aplicação em três componentes
lógicos:

4. Unobtrusive
Javascript
Separar a aplicação em três componentes
lógicos:
Conteúdo (HTML)

5. Unobtrusive
Javascript
Separar a aplicação em três componentes
lógicos:
Conteúdo (HTML)
Apresentação (CSS)

6. Unobtrusive
Javascript
Separar a aplicação em três componentes
lógicos:
Conteúdo (HTML)
Apresentação (CSS)
Comportamento (Javascript)

7. Como fazer isto?

8. Exemplo prático
<a href=”javascript:open(‘image.jpg’);” ...

9. Exemplo prático
A I L
F
<a href=”javascript:open(‘image.jpg’);” ...

10. Exemplo prático
<a href=”#” onclick=”open(‘image.jpg’);” ...

11. Exemplo prático
A I L
F
<a href=”#” onclick=”open(‘image.jpg’);” ...

12. Exemplo prático
<a href=”image.jpg”
onclick=”open(‘image.jpg’); return false;” ...

13. Exemplo prático
A I L
F
<a href=”image.jpg”
onclick=”open(‘image.jpg’); return false;” ...

14. Exemplo prático
<a href=”image.jpg” class=”lightbox” ...

15. Exemplo prático
Num ficheiro .js incluído na página...
var links = document.getElementsByClassName(‘lightbox’);
for (var i=0, len=links.length; i<len; i++) {
links[i].addEventListener(‘click’, function(evt){
open(this.href);
evt.preventDefault();
});
}

16. Exemplo prático
!
var links =
I N
document.getElementsByClassName(‘lightbox’);
for (var i=0, len=links.length; i<len; i++) {
W
<a href=”image.jpg” class=”lightbox” ...
links[i].addEventListener(‘click’, function(evt){
open(this.href);
evt.preventDefault
});
}

17. Na verdade...

18. Exemplo prático
L
var links =
I
document.getElementsByClassName(‘lig
htbox’);
FA
for (var i=0, len=links.length; i<len; i+
+) {
<a href=”image.jpg” class=”lightbox” ...
links[i].addEventListener(‘click’,
function(){
open(this.href);
});
}

19. Inconsistências nos
browsers...

20. I can haz jQuery?
Frameworks to the
rescue!

21. jQuery
$(document).ready(function(){
$(‘a.lightbox’).click(function(){
open(this.href);
});
});
http://jquery.com

22. Prototype.js
document.observe ( 'dom:loaded', function () {
$$('a.prototype').each (function (el) {
Event.observe (el, 'click', function () {
open(this.href);
});
});
});
http://prototypejs.org

23. Frameworks
Abstraem métodos nativos do Javascript
Lidam com inconsistências em browsers
Aumentam as funcionalidades nativas da
linguagem

24. jQuery

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...

32. var jQuery
Utilizar jQuery.noConflict();
jQuery(‘#myElement’) ...

33. var jQuery
var $j = jQuery.noConflict();
$j(‘#myElement’) ...

34. Cuidados a ter?

35. Conhecer a
linguagem!
Modelo de eventos

36. Conhecer a
linguagem!
Modelo de eventos
Scope

37. Conhecer a
linguagem!
Modelo de eventos
Scope
Closures

38. Conhecer a
linguagem!
Modelo de eventos
Scope
Closures
Herança Prototipal

39. Modelo de
Eventos

40. Event Capturing
Elemento 1
Elemento 2
http://www.quirksmode.org/js/events_order.html

41. Event Bubbling
Elemento 1
Elemento 2
http://www.quirksmode.org/js/events_order.html

42. Cancelar bubbling
function doSomething(e) {
if (!e) var e = window.event;
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
}

43. Scope

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.

45. Scope Global
var coisa = “uma coisa”;
function ola() {
return alert(“olá!”);
}

46. Scope local
function ola() {
var msg = “Olá!”;
return alert(msg);
}
alert(msg); // Retorna erro, variável “msg” não definida

47. A keyword “this”
Refere-se sempre ao owner da função

48. A keyword “this”
function ola() {
// this == 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 (!)

51. Closures

52. O que são?
Funções dentro de funções que utilizem
variáveis da sua função exterior criam closures

53. WTF?!?

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;

58. Problema!
var msg = ‘xpto153’;
$(‘a#awesomeLink’).click(function(){ #awesomeLink
alert(msg);
});
msg = ‘zyvr62’;
$(‘a#otherLink’).click(function(){ #otherLink
alert(msg);
});

59. Problema!
var msg = ‘xpto153’; zyvr62
$(‘a#awesomeLink’).click(function(){ #awesomeLink
alert(msg);
});
msg = ‘zyvr62’;
zyvr62
$(‘a#otherLink’).click(function(){ #otherLink
alert(msg);
});

60. WTF?!?

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

64. Herança
Prototipal

65. O que é?
Modelo de herança de objectos
Todos os objectos de Javascript herdam
propriedades do tipo abstracto Object

66. Como utilizar?
Object.prototype.myFunction = function() {
// Do something
}

67. Exemplo prático!
Object.prototype.toString = function () {
var message = '';
for (var prop in this) {
message += 'property ' + prop + ' equals: ' + this[prop] + '.';
}
return message;
}

68. Exemplo prático!
var myObj = {
a: “valor1”,
b: “valor2”
};
alert(myObj);
// Mostra:
// “property a equals valor1. property b equals valor2.”

69. Herança prototipal
Mais informação?
http://javascript.crockford.com/
prototypal.html

70. The End!
Bruno Abrantes http://brunoabrantes.com http:/twitter.com/inf0rmer