<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Refatorando Padrões &#187; Javascript</title>
	<atom:link href="http://www.refatorandopadroes.com.br/category/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.refatorandopadroes.com.br</link>
	<description>Programação orientada às melhores práticas</description>
	<lastBuildDate>Mon, 03 Sep 2007 12:40:10 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Separando Javascript do HTML até demais</title>
		<link>http://www.refatorandopadroes.com.br/2007/06/18/separando-javascript-do-html-ate-demais/</link>
		<comments>http://www.refatorandopadroes.com.br/2007/06/18/separando-javascript-do-html-ate-demais/#comments</comments>
		<pubDate>Mon, 18 Jun 2007 14:02:04 +0000</pubDate>
		<dc:creator>Carlos</dc:creator>
				<category><![CDATA[Boa prática]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Web Standards]]></category>

		<guid isPermaLink="false">http://www.refatorandopadroes.com.br/?p=22</guid>
		<description><![CDATA[É interessante notar como alguns programadores seguem padrões com afinco, até as últimas consequências, onde houver código lá está ele impondo todos os padrões possíveis. Existe a boa prática em separar comportamento e apresentação, no caso de páginas HTML, os arquivos javascript são o comportamento e os arquivos CSS a apresentação, e o HTML faz [...]]]></description>
			<content:encoded><![CDATA[<p>É interessante notar como alguns programadores seguem padrões com afinco, até as últimas consequências, onde houver código lá está ele impondo todos os padrões possíveis. Existe a boa prática em separar comportamento e apresentação, no caso de páginas HTML, os arquivos javascript são o comportamento e os arquivos CSS a apresentação, e o HTML faz uso de ambos, como pode ser observado <a href="http://www.standardsforlife.com/standards-in-a-nutshell">aqui</a>.</p>
<p>Observem o exemplo:</p>
<div class="igBar"><span id="lhtml-4"><a href="#" onclick="javascript:showPlainTxt('html-4'); return false;">Trocar para texto plano</a></span></div>
<div class="syntax_hilite"><span class="langName">HTML:</span>
<div id="html-4">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;">&lt;input</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"button"</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">"botão"</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"meuBotao"</span> <span style="color: #000066;">onclick</span>=<span style="color: #ff0000;">"meuEventoAqui()"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Algo que tem-se pregado por aí é retirar o totalmente o Javascript do HTML, ou seja, o exemplo acima ficaria assim:</p>
<div class="igBar"><span id="lhtml-5"><a href="#" onclick="javascript:showPlainTxt('html-5'); return false;">Trocar para texto plano</a></span></div>
<div class="syntax_hilite"><span class="langName">HTML:</span>
<div id="html-5">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;">&lt;input</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"button"</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"meuBotao"</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">"botão"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>E teríamos um arquivo .js com o seguinte código para ligar o evento onclick do button:</p>
<div class="igBar"><span id="ljavascript-6"><a href="#" onclick="javascript:showPlainTxt('javascript-6'); return false;">Trocar para texto plano</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-6">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">function</span> ligacaoDeEventos<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> botao = document.<span style="color: #006600;">getElementById</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'meuBotao'</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; botao.<span style="color: #006600;">onclick</span> = <span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; finalmenteMeuEventoAqui<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;<span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;window.<span style="color: #000066;">onload</span> = ligacaoDeEventos; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Puxa vida, toda essa volta só para não usar a propriedade onclick no HTML e se livrar totalmente do Javascript, isso vale a pena ?</p>
<p>Há vários motivos para que eu não concorde com isso:</p>
<ul>
<li>Mais código para dar manutenção, foram criadas várias linhas de javascript para algo que funcionaria no primeiro exemplo usando a propriedade onclick da tag input.</li>
<li>E quando eu quiser saber qual evento o button aciona, será fácil de achar ? Podem haver vários objetos na página, todos com seus eventos ligados apenas no momento do onload da página. Vários objetos é igual a várias linhas de código javascript com as ligações, se você estiver usando um editor de textos comum, bem... boa sorte, e mesmo com uma IDE não é tão simples assim.</li>
<li>A propriedade onclick, onkeypress, etc faz parte da especificação HTML, justamente para facilitar isso, porque iria deixar de usá-los ?</li>
</ul>
<p>Então muito cuidado ao seguir padrões ao extremo, questione-os, cada um tem o seu lugar e hora certa.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.refatorandopadroes.com.br/2007/06/18/separando-javascript-do-html-ate-demais/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>Ajax é técnica para desempenho, use com parcimônia.</title>
		<link>http://www.refatorandopadroes.com.br/2007/05/22/ajax-e-tecnica-para-desempenho-use-com-parcimonia/</link>
		<comments>http://www.refatorandopadroes.com.br/2007/05/22/ajax-e-tecnica-para-desempenho-use-com-parcimonia/#comments</comments>
		<pubDate>Tue, 22 May 2007 16:19:38 +0000</pubDate>
		<dc:creator>Carlos</dc:creator>
				<category><![CDATA[Ajax]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Web Standards]]></category>

		<guid isPermaLink="false">http://www.refatorandopadroes.com.br/?p=20</guid>
		<description><![CDATA[Da técnica AJAX, o que sempre noto é que as pessoas a amam de coração ou odeiam até a morte, não há um meio termo.
Os que odeiam, normalmente já odeiam Javascript também, e odeiam ainda mais quando os que amam exageram absurdamente no uso da técnica, conseguem fazer o site ficar inutilizável, uma usabilidade de [...]]]></description>
			<content:encoded><![CDATA[<p>Da técnica <a href="http://en.wikipedia.org/wiki/AJAX">AJAX</a>, o que sempre noto é que as pessoas a amam de coração ou odeiam até a morte, não há um meio termo.</p>
<p>Os que odeiam, normalmente já odeiam Javascript também, e odeiam ainda mais quando os que amam exageram absurdamente no uso da técnica, conseguem fazer o site ficar inutilizável, uma usabilidade de dar medo, o teclado simplesmente não serve mais. E não me venham falar pra usar o mouse pois usabilidade é para todos os dispositivos. E o motivo principal de usar AJAX (desempenho), foi esquecido a muito tempo.</p>
<p>Dou certa razão para os que odeiam, a usabilidade é item prioritário na construção de um website, de que adianta ser lindo se não conseguimos utilizá-lo. Existem padrões web, utilize-os sempre na medida das possibilidades. Antes perder em semântica do que usabilidade.</p>
<p>Mas vamos lembrar primeiro que AJAX não é um framework, tecnologia, API ou biblioteca. AJAX é uma técnica que pode envolver o uso de várias tecnologias (Javascript, XML, DOM, etc), e pra espanto de vários, foi iniciativa da Microsoft, a própria criou o objeto <a href="http://en.wikipedia.org/wiki/XMLHttpRequest">XMLHttpRequest</a>, responsável pelas requisições assíncronas, embora seja uma técnica que pode ser alcançada usando iFrames também.</p>
<p>Desempenho! Afinal banda de internet é cara, os serviços de hospedagem no Brasil que o digam... AJAX serve para melhorar o desempenho para todos, seja do sobrecarregado servidor ou do usuário que ainda utiliza modem (sem piadas, 53% dos internautas brasileiros ainda utilizam modem). Um bom exemplo de uso da técnica pode ser vista no sistema de creditar do <a href="http://infoblogs.com.br">Infoblogs</a>, um simples clique e pronto lá foi o crédito, sem precisar que a página seja renderizada novamente para atualizar uma única tag, simples e ótimo para todos.</p>
<p>Agora um péssimo exemplo é quando temos mega formulários em alguns sites e o submit é uma chamada usando AJAX. Se não utilizar um framework decente, isso dá um trabalho enorme para implementar. E o que ganhamos com isso ? Mais manutenção, o ganho de desempenho é minúsculo. Os vários dados do formulário terão que ser enviados de qualquer forma, todo um processo de parse deve ser feito via javascript e parse de dados é algo que o próprio browser já faz naturalmente ao fazer o submit, ou seja, apenas processando à toa.</p>
<p>Então devemos pesar bem quando utilizar a técnica, pode até ser para algo bonitinho, mas vale mesmo a pena ganhar mais manutenção ? Pense sempre em desempenho e não perca a usabilidade de vista.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.refatorandopadroes.com.br/2007/05/22/ajax-e-tecnica-para-desempenho-use-com-parcimonia/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Javascript é ruim mesmo ou é a preguiça de pesquisar um pouco que atrapalha ?</title>
		<link>http://www.refatorandopadroes.com.br/2007/04/18/javascript-e-ruim-mesmo-ou-e-a-preguica-de-pesquisar-um-pouco-que-atrapalha/</link>
		<comments>http://www.refatorandopadroes.com.br/2007/04/18/javascript-e-ruim-mesmo-ou-e-a-preguica-de-pesquisar-um-pouco-que-atrapalha/#comments</comments>
		<pubDate>Wed, 18 Apr 2007 15:17:15 +0000</pubDate>
		<dc:creator>Carlos</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://www.refatorandopadroes.com.br/?p=15</guid>
		<description><![CDATA[Frequentemente ouço outros programadores e até amigos falando mal de Javascript, a frase mais comum é: "Não dá pra debugar!", será mesmo ? Javascript está aí há mais de uma década em grande parte dos websites e ninguém até hoje se importou em criar uma ferramenta direcionada ? Ou será preguiça/medo de encarar a linguagem [...]]]></description>
			<content:encoded><![CDATA[<p>Frequentemente ouço outros programadores e até amigos falando mal de Javascript, a frase mais comum é: "Não dá pra debugar!", será mesmo ? Javascript está aí há mais de uma década em grande parte dos websites e ninguém até hoje se importou em criar uma ferramenta direcionada ? Ou será preguiça/medo de encarar a linguagem ?</p>
<p>Javascript é uma linguaguem de programação, é interpretada, e orientada a objetos. Sim, isso mesmo que você leu, Orientada a Objetos, isso surpreende muita gente, normalmente os que tem mais preconceito e preguiça de pesquisar, inclusive ela obedece uma especificação, a <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">ECMAScript</a>, dá qual é baseada a ActionScript, conhecida pelo pessoal de Flash, ou seja há um padrão e versões desta linguagem.</p>
<p>Pode-se dizer que Yahoo e Google investem muito nela, o que seria de seus sites sem Javascript, as maravilhas do Gmail, Yahoo mail, Google Maps, entre vários outros... O que seria da técnica <a href="http://pt.wikipedia.org/wiki/AJAX_%28programa%C3%A7%C3%A3o%29">AJAX</a> sem Javascript.</p>
<p>Querem debugar Javascript ? É só usar o <a href="http://www.mozilla.org/projects/venkman/">Venkman</a> e/ou o fenomenal <a href="http://www.getfirebug.com/">Firebug</a>, além de suporte a breakpoints ele vem com vários outros recursos como inspeção de código javascript e css, logging, profile, pode-se até mesmo alterar a árvore DOM e ver os resultados sem precisar atualizar a página.</p>
<p>Querem codificar Javascript ? A IDE <a href="http://www.aptana.com/">Aptana</a> (baseada no projeto <a href="http://www.eclipse.org/">Eclipse</a>) resolve seus problemas, com suporte a code insight, auto complete, entre outros... não somente para Javascript, mas também para html e css. Para quem já utiliza o Eclipse basta instalar o plugin, ou mesmo utilizar o <a href="http://www.eclipse.org/webtools/">WTP</a>. Para o pessoal de Rails uma ótima notícia, o <a href="http://www.radrails.org/">RadRails</a> será integrado ao Aptana em breve. Há ainda inúmeras e ótimas IDEs pagas para este tipo de serviço.</p>
<p>Javascript só serve para validar dados ? Bom, alguns exemplos do que o Javascript é capaz: <a href="http://script.aculo.us/">Script.aculo.us</a>, <a href="http://dojotoolkit.org/">Dojo</a>, <a href="http://www.huddletogether.com/projects/lightbox2/">Lightbox</a>, <a href="http://okonet.ru/projects/modalbox/">ModalBox</a>. Para o pessoal mais avançado, vale a pena dar uma olhada no excelente framework <a href="http://www.prototypejs.org/">Prototype</a>, base para vários desses projetos.</p>
<p>Desculpem-me se fui muito enérgico neste post, mas fazem 10 anos que utilizo Javascript e até hoje ouço das pessoas os mesmos motivos para preconceito. Muita coisa mudou, a linguagem evoluiu muito, mas a vontade de aprender das pessoas, parece que não, ainda mais vindo de uma área onde é uma obrigação estar em constante atualização.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.refatorandopadroes.com.br/2007/04/18/javascript-e-ruim-mesmo-ou-e-a-preguica-de-pesquisar-um-pouco-que-atrapalha/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
	</channel>
</rss>
