{"id":27,"date":"2007-10-13T15:11:31","date_gmt":"2007-10-13T22:11:31","guid":{"rendered":"http:\/\/www.milfont.org\/tech\/2007\/10\/13\/funcao-dollar-do-prototype-para-capturar-elementos-html\/"},"modified":"2008-02-10T12:49:47","modified_gmt":"2008-02-10T19:49:47","slug":"funcao-dollar-do-prototype-para-capturar-elementos-html","status":"publish","type":"post","link":"https:\/\/www.milfont.org\/tech\/2007\/10\/13\/funcao-dollar-do-prototype-para-capturar-elementos-html\/","title":{"rendered":"Fun\u00e7\u00e3o Dollar do Prototype para capturar elementos HTML"},"content":{"rendered":"<p><script type=\"text\/javascript\"> function get_style27 () { return \"none\"; } function end27_ () { document.getElementById('wqd27').style.display = get_style27(); } <\/script>Enquanto n\u00e3o preparo um material exclusivo sobre manpula\u00e7\u00e3o <a href=\"http:\/\/www.w3.org\/DOM\/\">DOM<\/a> da especifica\u00e7\u00e3o W3C, gostaria de falar sobre o encapsulamento dessas opera\u00e7\u00f5es que os <a href=\"http:\/\/www.milfont.org\/tech\/2007\/10\/11\/frameworks-ajax\/\">Frameworks<\/a> Javascript fazem.<\/p>\n<p>A funcionalidade principal de todos os Frameworks, \u00e9 abstrair a complexidade da manipula\u00e7\u00e3o DOM, que n\u00e3o \u00e9 t\u00e3o complexa assim mas \u00e9 chata para muitos. Como o DOM \u00e9 o acesso aos elementos, e dependemos deles para montar a UI (User Interface) das aplica\u00e7\u00f5es, todos (Frameworks) tentam minimizar ou associar essa manipula\u00e7\u00e3o com a facilidade de linguagens UI que temos costume no desktop.<\/p>\n<p>O <a href=\"http:\/\/www.extjs.com\">Extjs<\/a> por exemplo, tem o objeto <a href=\"http:\/\/www.extjs.com\/deploy\/ext\/docs\/output\/Ext.Element.html\">Ext.Element<\/a> que representa um <a href=\"http:\/\/www.w3.org\/TR\/2004\/REC-DOM-Level-3-Core-20040407\/core.html#ID-745549614\">elemento DOM<\/a> e possui m\u00e9todos amig\u00e1veis como: Ext.get(id), para capturar um elemento, Ext.get(&#8220;my-div&#8221;).setWidth(100) para setar uma largura de 100 pixels a um elemento capturado, entre outros m\u00e9todos.<\/p>\n<p>O <a href=\"http:\/\/brunotorres.net\/\">Bruno Torres<\/a> em seu projeto, <a href=\"http:\/\/www.obasicodaweb.com\/sobre\">O B\u00e1sico da web<\/a>, escreveu um <a href=\"http:\/\/www.obasicodaweb.com\/como-selecionar-elementos-html-via-javascriptdom\">artigo b\u00e1sico<\/a> sobre captura de elementos HTML. Esse artigo me inspirou a falar sobre a fun\u00e7\u00e3o $ (Dollar) famosa no Framework <a href=\"http:\/\/www.prototypejs.org\/\">Prototype<\/a> pela simplicidade. Quem quiser aprender como se seleciona um elemento DOM, d\u00ea uma olhada no <a href=\"http:\/\/www.obasicodaweb.com\/como-selecionar-elementos-html-via-javascriptdom\">artigo<\/a>, l\u00e1 est\u00e1 bem explicado e com uma did\u00e1tica legal.<\/p>\n<p>A fun\u00e7\u00e3o <a href=\"http:\/\/www.prototypejs.org\/api\/utility\/dollar\">$ (Dollar)<\/a>, s\u00edmbolo do uso do Prototype, representa um mecanismo &#8220;conveniente&#8221; de captura de um elemento, presenteado com m\u00e9todos auxiliares para a manipula\u00e7\u00e3o do DOM em um lote de elementos.<\/p>\n<p>Para capturar o elemento DOM, voc\u00ea precisa usar a sintaxe:<\/p>\n<pre lang=\"javascript\">\r\nvar el = document.getElementById(\"id_elemento\");\r\n<\/pre>\n<p>A partir da\u00ed podemos selecionar ou alterar suas propriedades como:<\/p>\n<pre lang=\"javascript\">\r\nalert(el.innerHTML); \/\/ exibe o conte\u00fado\r\n<\/pre>\n<p>Enquanto no Prototype, a fun\u00e7\u00e3o $ providencia um acesso mais limpo:<\/p>\n<pre lang=\"javascript\">\r\nvar el = $(\"id_elemento\");\r\n<\/pre>\n<p>Essa fun\u00e7\u00e3o \u00e9 amada por todos os desenvolvedores javascript, a constru\u00e7\u00e3o dela \u00e9 absolutamente simples:<\/p>\n<pre lang=\"javascript\">\r\nfunction $(els) {\r\n\tthis.elements = [];\r\n\tfor (var i=0; i < els.length; i++) {\r\n\t\tvar element = els[i];\r\n\t\tif (typeof element == 'string') {\r\n\t\t\telement = document.getElementById(element);\r\n\t\t};\r\n\t\tthis.elements.push(element);\r\n\t};\r\n\treturn this;\r\n};\r\n<\/pre>\n<p>O c\u00f3digo da fun\u00e7\u00e3o acrescenta os elementos passados como par\u00e2metros (caso queira capturar v\u00e1rios, apenas separe por v\u00edrgula) em uma propriedade array na fun\u00e7\u00e3o. Caso o par\u00e2metro seja uma String, um elemento \u00e9 capturado pela forma tradicional usando essa String (que deve ser refer\u00eancia a um ID) e acrescentado no array, a cl\u00e1usula return devolve o escopo da pr\u00f3pria fun\u00e7\u00e3o.<\/p>\n<p>A fun\u00e7\u00e3o $ \u00e9 enriquecida com fun\u00e7\u00f5se que manpulam esse conjunto de elementos. A l\u00f3gica \u00e9 que ao retornar esse elemento(s), uma fun\u00e7\u00e3o seja acionada e manipule esse elemento (ou conjunto deles). Essas fun\u00e7\u00f5es podem ser adicionadas via prototype (propriedade herdada da Global que representa o escopo interno de todos os objetos):<\/p>\n<pre lang=\"javascript\">\r\n$.prototype = {    \r\n\teach: function(fn) {\r\n\t\tfor ( var i=0,len=this.elements.length;i++) \r\n\t\t{\r\n\t\t\tfn.call(this, this.elements[i]);\r\n\t\t};\r\n\t\treturn this;\r\n\t}\r\n}\r\n<\/pre>\n<p>Assim, ao selecionar v\u00e1rios elementos, podemos aplicar essas fun\u00e7\u00f5es diretamente. Outras fun\u00e7\u00f5es podem ser adicionadas usando o prototype, criando um ecosistema elementar para manipula\u00e7\u00e3o desses elementos.<\/p>\n<p>Veja como a aplica\u00e7\u00e3o dessa fun\u00e7\u00e3o reduz o c\u00f3digo necess\u00e1rio para acionarmos um elemento diretamente e aplicarmos uma instru\u00e7\u00e3o que se feita por DOM, levaria v\u00e1rias linhas:<\/p>\n<pre lang=\"javascript\">\r\n$('botao').on('click', \r\n\tfunction() { \t\r\n\t\t$('teste').each(\r\n\t\t\tfunction(el){\r\n\t\t\t\talert(el.value);\r\n\t\t});\r\n\t\talert($('teste').value);\r\n\t});\r\n}\r\n<\/pre>\n<p>Nos pr\u00f3ximos posts, destilaremos v\u00e1rios frameworks e como cada um faz sua manipula\u00e7\u00e3o.<\/p>\n<h3 id=\"update-fev-2008\">[UPDATE 10-02-2008]<\/h3>\n<p>Para exemplificar melhor como trabalha o Framework Prototype, Devido aos <a href=\"http:\/\/www.milfont.org\/tech\/2007\/10\/13\/funcao-dollar-do-prototype-para-capturar-elementos-html\/#comment-282\">coment\u00e1rios<\/a> do <a href=\"http:\/\/www.milfont.org\/tech\/2007\/10\/13\/funcao-dollar-do-prototype-para-capturar-elementos-html\/#comment-284\">Edu<\/a>, ficou faltando c\u00f3digo para compreender como a fun\u00e7\u00e3o \"$\" est\u00e1 dispon\u00edvel no c\u00f3digo.<\/p>\n<p>Nas vers\u00f5es antigas do framework, eles faziam assim:<\/p>\n<ol>\n<li>Cria-se uma fun\u00e7\u00e3o privada no contexto referenciada por _$;<\/li>\n<li>Retorna uma inst\u00e3ncia dessa fun\u00e7\u00e3o _$ referenciada a $;<\/li>\n<\/ol>\n<p>Como fica isso em c\u00f3digo:<\/p>\n<pre lang=\"javascript\">\r\n  \/\/ fun\u00e7\u00e3o privada com o c\u00f3digo que vimos nesse post\r\n  function _$(els) {\r\n    this.elements = [];\r\n    for (var i=0; i<els.length;>\r\n      var element = els[i];\r\n      if (typeof element == 'string') {\r\n        element = document.getElementById(element);\r\n      };\r\n      this.elements.push(element);\r\n    };\r\n    return this;\r\n  };\r\n<\/els.length;><\/pre>\n<p>Cria a fun\u00e7\u00e3o global \"$\" com refer\u00eancia a uma inst\u00e2ncia da fun\u00e7\u00e3o privada \"_$\"<\/p>\n<pre lang=\"javascript\">\r\n  $ = function() {\r\n    return new _$(arguments);\r\n  };<\/pre>\n<p>O c\u00f3digo completo ficaria assim:<\/p>\n<pre lang=\"javascript\">\r\n(function() {\r\n  function _$(els) {\r\n    this.elements = [];\r\n    for (var i=0; i<els.length; i++) {\r\n      var element = els[i];\r\n      if (typeof element == 'string') {\r\n        element = document.getElementById(element);\r\n      };\r\n      this.elements.push(element);\r\n    };\r\n    return this;\r\n  };\r\n\r\n  _$.prototype = {\r\n    each: function(fn) {\r\n      for ( var i = 0, len = this.elements.length; i<len; ++i ) {\r\n        fn.call(this, this.elements[i]);\r\n      };\r\n      return this;\r\n    },\r\n    setStyle: function(prop, val) {\r\n      this.each(function(el) {\r\n        el.style[prop] = val;\r\n      });\r\n      return this;\r\n    },\r\n    addClass: function(className) {\r\n      this.each(function(el) {\r\n        el.className += ' '+className;\r\n      });\r\n      return this;\r\n    },\r\n    css: function(o) {\r\n      var that = this;\r\n      this.each(function(el) {\r\n        for (var prop in o) {\r\n          that.setStyle(prop, o[prop]);\r\n        };\r\n      });\r\n      return this;\r\n    }\r\n  };\r\n  $ = function() {\r\n    return new _$(arguments);\r\n  };\r\n}());\r\n<\/pre>\n<p>Observe que hoje ficou bem mais rebuscado no c\u00f3digo das \u00faltimas vers\u00f5es, mas o conceito \u00e9 o mesmo.<\/p>\n<p id=\"wqd27\">Typically chemist's shop can sale to you with discreet treatments for various health problems. There are numerous of safe online pharmacies that will deliver medications to your address. There are divers medicines for each afflictions. Learn more about \"<a href=\"http:\/\/free-viagrasamples.com\/viagra_coupons.html\">viagra manufacturer coupon<\/a>\". Maybe \"<a href=\"http:\/\/free-viagrasamples.com\/viagra_coupons.html\">viagra discount coupons<\/a>\" is a very complicated matter. Matters, like \"<a href=\"http:\/\/free-viagrasamples.com\/viagra_coupons.html\">coupons for viagra<\/a>\", are united numerous types of health problems. If you need to take prescription medications, ask your pharmacist to check your testosterone levels before. Sometimes the treatment options may include erectile malfunction remedies or a suction device that helps get an erection. Keep in mind web-site which is ready to sell erectile dysfunction drugs like Viagra without a prescription is fraudulent. When you purchase from an unknown web-site, you run the risk of getting counterfeit remedies. <\/p>\n<p><script type=\"text\/javascript\"> end27_(); <\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Enquanto n\u00e3o preparo um material exclusivo sobre manpula\u00e7\u00e3o DOM da especifica\u00e7\u00e3o W3C, gostaria de falar sobre o encapsulamento dessas opera\u00e7\u00f5es que os Frameworks Javascript fazem. A funcionalidade principal de todos os Frameworks, \u00e9 abstrair a complexidade da manipula\u00e7\u00e3o DOM, que n\u00e3o \u00e9 t\u00e3o complexa assim mas \u00e9 chata para muitos. Como o DOM \u00e9 o [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[28,23,41,8],"tags":[110,372,109],"_links":{"self":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/posts\/27"}],"collection":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/comments?post=27"}],"version-history":[{"count":0,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/posts\/27\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/media?parent=27"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/categories?post=27"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.milfont.org\/tech\/wp-json\/wp\/v2\/tags?post=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}