Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Javascript
Princípios da linguagem e utilização de
              frameworks
Separação de
componentes
Unobtrusive
       Javascript
Separar a aplicação em três componentes
lógicos:
Unobtrusive
       Javascript
Separar a aplicação em três componentes
lógicos:

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

  Conteúdo (HTML)

  Apresentação (CSS)
Unobtrusive
       Javascript
Separar a aplicação em três componentes
lógicos:

  Conteúdo (HTML)

  Apresentação (CSS)

 ...
Como fazer isto?
Exemplo prático



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



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



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



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


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



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



<a href=”image.jpg” class=”lightbox” ...
Exemplo prático
Num ficheiro .js incluído na página...




 var links = document.getElementsByClassName(‘lightbox’);

 for ...
Exemplo prático


                                      !
                                           var links =




     ...
Na verdade...
Exemplo prático


                                         L
                                             var links =




...
Inconsistências nos
    browsers...
I can haz jQuery?




Frameworks to the
    rescue!
jQuery

$(document).ready(function(){
    $(‘a.lightbox’).click(function(){
        open(this.href);
    });
});



      ...
Prototype.js

document.observe ( 'dom:loaded', function () {

     $$('a.prototype').each (function (el) {

     
     Eve...
Frameworks

Abstraem métodos nativos do Javascript

Lidam com inconsistências em browsers

Aumentam as funcionalidades nat...
jQuery
Porquê?

Uma das frameworks mais populares na
actualidade

Facilmente extensível (plugins!)

Extremamente fácil de aprender
var jQuery


jQuery (ou $) é a função principal.

Este objecto global incorpora todas as
propriedades e métodos disponívei...
var jQuery


Quando utilizada como função, selecciona
elementos do DOM.

Utilizando uma sintaxe muito semelhante a
CSS
var jQuery

var el1 = $(“#um”);
// Retorna o elemento com o id #um


var el2 = $(‘ul.menu li a’);
// Retorna um array com ...
var jQuery


Os elementos seleccionados herdam métodos e
propriedades da framework.

O jQuery permite “chaining”
var jQuery
$(“#um”).show().css({background: “red”, color: “white”});


$(“#um”).addClass(‘disappearing’).fadeOut(‘fast’);
...
var jQuery


Quero usar jQuery com outra framework!!

Mas essa framework também utiliza $() como
função principal...
var jQuery


Utilizar jQuery.noConflict();

jQuery(‘#myElement’) ...
var jQuery


var $j = jQuery.noConflict();

$j(‘#myElement’) ...
Cuidados a ter?
Conhecer a
       linguagem!
Modelo de eventos
Conhecer a
        linguagem!
Modelo de eventos

Scope
Conhecer a
        linguagem!
Modelo de eventos

Scope

Closures
Conhecer a
        linguagem!
Modelo de eventos

Scope

Closures

Herança Prototipal
Modelo de
 Eventos
Event Capturing
            Elemento 1




     Elemento 2




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




    Elemento 2




          http://www.quirksmode.org/js/events_order.html
Cancelar bubbling

function doSomething(e) {
    if (!e) var e = window.event;


    if (e.stopPropagation) {
        e.st...
Scope
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 globa...
Scope Global


var coisa = “uma coisa”;

function ola() {

     return alert(“olá!”);

}
Scope local

function ola() {

     var msg = “Olá!”;

     return alert(msg);

}

alert(msg); // Retorna erro, variável “...
A keyword “this”



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


function ola() {

     // this == window

}
A keyword “this”

function ola() {

     ...

}

element.onclick = ola; // na função “ola”, this == element

element.addEv...
A keyword “this”

function ola() {

     ...

}

<element onclick=”ola();” />

// Função é apenas uma referência,

// this...
Closures
O que são?


Funções dentro de funções que utilizem
variáveis da sua função exterior criam closures
WTF?!?
Exemplo prático!
function ola(nome) {

     var texto = “Olá ” + nome, //var local

     alerta = function() { alert(texto...
Outro exemplo
function addLinks () {

    for (var i=0, link; i<5; i++) {

    
    link = document.createElement("a");

 ...
Outro exemplo
function addLinks () {

    for (var i=0, link; i<5; i++) {




                                   L

    
 ...
Outro exemplo
function addLinks () {


     for (var i=0, link; i<5; i++) {


     
    link = document.createElement("a")...
Problema!
var msg = ‘xpto153’;

$(‘a#awesomeLink’).click(function(){   #awesomeLink

      alert(msg);

});

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

      alert(msg);

});

...
WTF?!?
Problema!

A variável “msg” utilizada na closure é uma
referência.

Quando o seu valor muda durante a execução
da função p...
Solução!
var msg = ‘xpto153’;

$(‘a#awesomeLink’).click(function(){

      var correctMsg = msg;

      alert(correctMsg);...
Solução!
var msg = ‘xpto153’;
                           xpto153
$(‘a#awesomeLink’).click(function(){
                    ...
Herança
Prototipal
O que é?


Modelo de herança de objectos

Todos os objectos de Javascript herdam
propriedades do tipo abstracto Object
Como utilizar?


Object.prototype.myFunction = function() {

     // Do something

}
Exemplo prático!

Object.prototype.toString = function () {


     var message = '';


     for (var prop in this) {


   ...
Exemplo prático!
var myObj = {

      a: “valor1”,

      b: “valor2”

};



alert(myObj);

// Mostra:

// “property a equ...
Herança prototipal


Mais informação?

http://javascript.crockford.com/
prototypal.html
The End!
Bruno Abrantes      http://brunoabrantes.com   http:/twitter.com/inf0rmer
Upcoming SlideShare
Loading in …5
×

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

2,571 views

Published on

Published in: Technology
  • Be the first to comment

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

  1. 1. Javascript Princípios da linguagem e utilização de frameworks
  2. 2. Separação de componentes
  3. 3. Unobtrusive Javascript Separar a aplicação em três componentes lógicos:
  4. 4. Unobtrusive Javascript Separar a aplicação em três componentes lógicos: Conteúdo (HTML)
  5. 5. Unobtrusive Javascript Separar a aplicação em três componentes lógicos: Conteúdo (HTML) Apresentação (CSS)
  6. 6. Unobtrusive Javascript Separar a aplicação em três componentes lógicos: Conteúdo (HTML) Apresentação (CSS) Comportamento (Javascript)
  7. 7. Como fazer isto?
  8. 8. Exemplo prático <a href=”javascript:open(‘image.jpg’);” ...
  9. 9. Exemplo prático A I L F <a href=”javascript:open(‘image.jpg’);” ...
  10. 10. Exemplo prático <a href=”#” onclick=”open(‘image.jpg’);” ...
  11. 11. Exemplo prático A I L F <a href=”#” onclick=”open(‘image.jpg’);” ...
  12. 12. Exemplo prático <a href=”image.jpg” onclick=”open(‘image.jpg’); return false;” ...
  13. 13. Exemplo prático A I L F <a href=”image.jpg” onclick=”open(‘image.jpg’); return false;” ...
  14. 14. Exemplo prático <a href=”image.jpg” class=”lightbox” ...
  15. 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. 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. 17. Na verdade...
  18. 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. 19. Inconsistências nos browsers...
  20. 20. I can haz jQuery? Frameworks to the rescue!
  21. 21. jQuery $(document).ready(function(){ $(‘a.lightbox’).click(function(){ open(this.href); }); }); http://jquery.com
  22. 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. 23. Frameworks Abstraem métodos nativos do Javascript Lidam com inconsistências em browsers Aumentam as funcionalidades nativas da linguagem
  24. 24. jQuery
  25. 25. Porquê? Uma das frameworks mais populares na actualidade Facilmente extensível (plugins!) Extremamente fácil de aprender
  26. 26. var jQuery jQuery (ou $) é a função principal. Este objecto global incorpora todas as propriedades e métodos disponíveis na framework
  27. 27. var jQuery Quando utilizada como função, selecciona elementos do DOM. Utilizando uma sintaxe muito semelhante a CSS
  28. 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. 29. var jQuery Os elementos seleccionados herdam métodos e propriedades da framework. O jQuery permite “chaining”
  30. 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. 31. var jQuery Quero usar jQuery com outra framework!! Mas essa framework também utiliza $() como função principal...
  32. 32. var jQuery Utilizar jQuery.noConflict(); jQuery(‘#myElement’) ...
  33. 33. var jQuery var $j = jQuery.noConflict(); $j(‘#myElement’) ...
  34. 34. Cuidados a ter?
  35. 35. Conhecer a linguagem! Modelo de eventos
  36. 36. Conhecer a linguagem! Modelo de eventos Scope
  37. 37. Conhecer a linguagem! Modelo de eventos Scope Closures
  38. 38. Conhecer a linguagem! Modelo de eventos Scope Closures Herança Prototipal
  39. 39. Modelo de Eventos
  40. 40. Event Capturing Elemento 1 Elemento 2 http://www.quirksmode.org/js/events_order.html
  41. 41. Event Bubbling Elemento 1 Elemento 2 http://www.quirksmode.org/js/events_order.html
  42. 42. Cancelar bubbling function doSomething(e) { if (!e) var e = window.event; if (e.stopPropagation) { e.stopPropagation(); } else { e.cancelBubble = true; } }
  43. 43. Scope
  44. 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. 45. Scope Global var coisa = “uma coisa”; function ola() { return alert(“olá!”); }
  46. 46. Scope local function ola() { var msg = “Olá!”; return alert(msg); } alert(msg); // Retorna erro, variável “msg” não definida
  47. 47. A keyword “this” Refere-se sempre ao owner da função
  48. 48. A keyword “this” function ola() { // this == window }
  49. 49. A keyword “this” function ola() { ... } element.onclick = ola; // na função “ola”, this == element element.addEventListener(‘click’, ola) // mesma coisa!
  50. 50. A keyword “this” function ola() { ... } <element onclick=”ola();” /> // Função é apenas uma referência, // this == window (!)
  51. 51. Closures
  52. 52. O que são? Funções dentro de funções que utilizem variáveis da sua função exterior criam closures
  53. 53. WTF?!?
  54. 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. 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. 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. 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. 58. Problema! var msg = ‘xpto153’; $(‘a#awesomeLink’).click(function(){ #awesomeLink alert(msg); }); msg = ‘zyvr62’; $(‘a#otherLink’).click(function(){ #otherLink alert(msg); });
  59. 59. Problema! var msg = ‘xpto153’; zyvr62 $(‘a#awesomeLink’).click(function(){ #awesomeLink alert(msg); }); msg = ‘zyvr62’; zyvr62 $(‘a#otherLink’).click(function(){ #otherLink alert(msg); });
  60. 60. WTF?!?
  61. 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. 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. 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. 64. Herança Prototipal
  65. 65. O que é? Modelo de herança de objectos Todos os objectos de Javascript herdam propriedades do tipo abstracto Object
  66. 66. Como utilizar? Object.prototype.myFunction = function() { // Do something }
  67. 67. Exemplo prático! Object.prototype.toString = function () { var message = ''; for (var prop in this) { message += 'property ' + prop + ' equals: ' + this[prop] + '.'; } return message; }
  68. 68. Exemplo prático! var myObj = { a: “valor1”, b: “valor2” }; alert(myObj); // Mostra: // “property a equals valor1. property b equals valor2.”
  69. 69. Herança prototipal Mais informação? http://javascript.crockford.com/ prototypal.html
  70. 70. The End! Bruno Abrantes http://brunoabrantes.com http:/twitter.com/inf0rmer

×