<?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>SamuraiDio &#187; jquery</title>
	<atom:link href="http://blog.diovani.com/tag/jquery/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.diovani.com</link>
	<description>GNU/Linux &#124; PHP &#124; JavaScript</description>
	<lastBuildDate>Sat, 18 Dec 2010 21:19:20 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>jQuery.canvasmetter plugin</title>
		<link>http://blog.diovani.com/2010/01/24/jquery-canvasmetter-plugin/</link>
		<comments>http://blog.diovani.com/2010/01/24/jquery-canvasmetter-plugin/#comments</comments>
		<pubDate>Sun, 24 Jan 2010 15:22:25 +0000</pubDate>
		<dc:creator>diovani</dc:creator>
				<category><![CDATA[Sem Categoria]]></category>
		<category><![CDATA[canvas]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://blog.diovani.com/?p=324</guid>
		<description><![CDATA[Há alguns dias criei um plugin para jQuery, para desenhar medidores no estilo barômetros ou marcadores de velocidade, utilizando o elemento &#60;canvas&#62;.

Como um plugin requer uma atenção especial e atualizações periódicas, dediquei para ele uma página deste blog. E também o wave jQuery.canvasmetter, para o pessoal poder participar. Mais informações podem ser encontrados nestes.
Links:
página jQuery.canvasmetter
página [...]]]></description>
			<content:encoded><![CDATA[<p>Há alguns dias criei um plugin para jQuery, para desenhar medidores no estilo barômetros ou marcadores de velocidade, utilizando o elemento &lt;canvas&gt;.</p>
<p><a href="http://blog.diovani.com/wp-content/uploads/2010/01/CanvasMetter_1263859483929.png"><img class="alignnone size-thumbnail wp-image-302" title="screenshot" src="http://blog.diovani.com/wp-content/uploads/2010/01/CanvasMetter_1263859483929-150x150.png" alt="screenshot" width="150" height="150" /></a></p>
<p>Como um plugin requer uma atenção especial e atualizações periódicas, dediquei para ele uma <a href="http://blog.diovani.com/jquery-canvasmetter/">página deste blog</a>. E também o <a href="https://wave.google.com/wave/#restored:wave:googlewave.com!w%252BPOJ7yqi9A">wave jQuery.canvasmetter</a>, para o pessoal poder participar. Mais informações podem ser encontrados nestes.</p>
<p><em>Links:<a href="http://blog.diovani.com/jquery-canvasmetter/"><br />
página jQuery.canvasmetter</a><br />
<a href="http://blog.diovani.com/jquery-canvasmetter/download/">página de download do plugin jQuery.canvasmetter</a><br />
<a href="https://wave.google.com/wave/#restored:wave:googlewave.com!w%252BPOJ7yqi9A">wave jQuery.canvasmetter</a></em></p>
<div id="_mcePaste" style="overflow: hidden; position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px;">página jQuery.canvasmette</div>
]]></content:encoded>
			<wfw:commentRss>http://blog.diovani.com/2010/01/24/jquery-canvasmetter-plugin/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery 1.4 lançado</title>
		<link>http://blog.diovani.com/2010/01/17/jquery-1-4-lancado/</link>
		<comments>http://blog.diovani.com/2010/01/17/jquery-1-4-lancado/#comments</comments>
		<pubDate>Sun, 17 Jan 2010 22:30:00 +0000</pubDate>
		<dc:creator>diovani</dc:creator>
				<category><![CDATA[Sem Categoria]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[notícias]]></category>

		<guid isPermaLink="false">http://blog.diovani.com/?p=294</guid>
		<description><![CDATA[Nesta última quinta-feira, dia 14, foi lançada a nova versão do jQuery, a biblioteca Javascript que promete (e cumpre) simplificar o desenvolvimento de scripts escrevendo-se muito menos linhas de código. A versão 1.4, foi lançada, intencionalmente, no dia 14 de Janeiro, por ser este o dia do aniversário da biblioteca.
Como comemoração pelo dia de lançamento, [...]]]></description>
			<content:encoded><![CDATA[<p>Nesta última quinta-feira, dia 14, foi lançada a nova versão do <a href="http://jquery.com/">jQuery</a>, a biblioteca Javascript que promete (e cumpre) simplificar o desenvolvimento de scripts escrevendo-se muito menos linhas de código. A versão 1.4, foi lançada, intencionalmente, no dia 14 de Janeiro, por ser este o dia do aniversário da biblioteca.</p>
<p>Como comemoração pelo dia de lançamento, o time do jQuery colocou no ar um <em>hot-site</em>, <a href="http://jquery14.com/">14 dias de jQuery</a>, que divulgará a cada dia, uma das novas melhorias da versão 1.4, e ainda terá promoções para os desenvolvedores que usam e apoiam a biblioteca. Visite o site <a href="http://jquery14.com/">http://jquery14.com/</a> para maiores informações. O download da nova versão pode ser feito no site oficial: <a href="http://jquery.com">http://jquery.com</a>.</p>
<p>Não vou me estender muito neste post, visto que estou alguns dias atrasado, e outros blogueiros já o fizeram. Então vou apenas adicionar alguns links blogs de alguns amigos que falaram sobre o lançamento. Não deixem de ler os posts, e baixarem a nova versão.</p>
<p>Links:<a href="http://ruancarlos.com.br/Blog/jquery-1-4-e-lancado/"></p>
<p>http://ruancarlos.com.br/Blog/jquery-1-4-e-lancado/</a></p>
<p><a href="http://net.tutsplus.com/tutorials/javascript-ajax/jquery-1-4-released-the-15-new-features-you-must-know/">http://net.tutsplus.com/tutorials/javascript-ajax/jquery-1-4-released-the-15-new-features-you-must-know/</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.diovani.com/2010/01/17/jquery-1-4-lancado/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Prototype vs jQuery &#8211; combo estado/cidade</title>
		<link>http://blog.diovani.com/2008/07/31/prototype-vs-jquery-combo-estadocidade/</link>
		<comments>http://blog.diovani.com/2008/07/31/prototype-vs-jquery-combo-estadocidade/#comments</comments>
		<pubDate>Thu, 31 Jul 2008 17:59:49 +0000</pubDate>
		<dc:creator>diovani</dc:creator>
				<category><![CDATA[Sem Categoria]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[prototype]]></category>

		<guid isPermaLink="false">http://blog.diovani.com/2008/07/31/prototype-vs-jquery-combo-estadocidade/</guid>
		<description><![CDATA[A algum tempo eu vinha utilizando o Prototype JavaScript Framework para criar efeitos de animações simples e, principalmente, fazer requisições AJAX, em meus projetos. Mas após as constantes indicações de um amigo de que o jQuery JavaScript Framework tornava o desenvolvimento de aplicações web com JavaScript bem mais fácil, e as promessas deste de fazer [...]]]></description>
			<content:encoded><![CDATA[<p>A algum tempo eu vinha utilizando o <a href="http://prototypejs.org/">Prototype JavaScript Framework</a> para criar efeitos de animações simples e, principalmente, fazer requisições AJAX, em meus projetos. Mas após as constantes indicações de um <a href="http://eric.dingdong.com.br">amigo</a> de que o <a href="http://jquery.com/">jQuery JavaScript Framework</a> tornava o desenvolvimento de aplicações web com JavaScript bem mais fácil, e as promessas deste de fazer grandes diferenças com poucas linhas de código, resolvi começar a utilizá-lo em meus novos projetos.</p>
<p>Acontece que o jQuery realmente cumpre o que promete, facilitando trabalhos como alteração de objetos em tempo de execução, requisições ajax e também conta com ótimas animações, tudo com poucas linhas de código muito fáceis de entender. Por isso resolvi fazer uma pequena comparação entre o uso de Prototype, jQuery, ou apenas JavaScript sem se utilizar nenhum framework.</p>
<p>Algumas vantagens do jQuery:</p>
<ul>
<li><strong>Tamanho:</strong> O <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.js">jQuery.js</a> (versão 1.2.6) tem apenas 97KB, contando com toda sua API, Ajax e algumas animações básicas (Fade, Slide e o Animate, que pode ser utilizado para se fazeranimações customizadas). Já o <a href="http://prototypejs.org/download">prototype.js</a> (versão 1.6.0.2), sem o <a href="http://script.aculo.us/">Script.aculo.us</a>, que provê as animações e efeitos, tem 123KB;</li>
<li><strong>Seletores: </strong>Enquanto com JavaScript é necessário linhas como <em>elemento = getElementById(&#8216;myDiv&#8217;); </em>com o jQuery vc pode selecionar qualquer elemento com seletores CSS, utilizando a função $(). Ex: <em>elemento = $(&#8216;#myDiv&#8217;); </em>Note que, como ele utiliza seletores CSS, é possivel selecionar facilmente quaisquer elementos, como todas as âncoras de uma página, ou todas as ancoras com a classe <em>link</em>, por exemplo: <em>anchor = $(&#8216;a&#8217;)</em>; <em>anchorLink = $(&#8216;a.link&#8217;)</em>;</li>
<li><strong>Eventos: </strong>O Prototype possui uma função para observar determinado evento em um elemento. Para disparar funções no Evento <em>Click</em> de meu link de id &#8216;<em>myLink&#8217;</em>, por exemplo, é necessário: <em>Event.observe(&#8216;myLink&#8217;, &#8216;click&#8217;, function(e) { [...] } );</em>. Com jQuery basta fazer: <em>$(&#8216;myLink&#8217;).click( function() { [...] });</em></li>
</ul>
<p>Vou um exemplo de código para uma aplicação bem comum, dois <em>&lt;select&gt;</em>s relativos de estado e cidade. Não vou postar HTML ou código PHP desnecessário, apenas o código Javascript.</p>
<p>Considere dois <em>&lt;select&gt;</em>, um com id <em>&#8216;StateId</em>&#8216; que exibirá os estados para selecionar, e irá atualizar com AJAX as opções do segundo <em>&lt;select&gt;</em>, que terá o id <em>&#8216;CityId&#8217;</em>, contendo as Cidades do estado selecionado previamente.</p>
<p>A url enviada, é uma típica url segmentada, comum em Frameworks <a href="http://pt.wikipedia.org/wiki/Mvc">MVC</a>, e corresponde ao controle <em>cities</em>, a ação <em>update</em>, e deve receber o <em>id</em> do estado como parâmetro. Seria equivalente a seguinte url: <em>&#8216;/cities/update.php?state_id=&#8217;</em>.</p>
<p>Primeiramente, eis como o código para atualização seria, utilizando-se apenas JavaScript, e nenhum Framework:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">//Apenas JavaScript, Nenhum framework</span>
<span style="color: #003366; font-weight: bold;">function</span> updateCities<span style="color: #009900;">&#40;</span>stateId<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #003366; font-weight: bold;">var</span> httpRequest<span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>window.<span style="color: #660066;">XMLHttpRequest</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #006600; font-style: italic;">// Mozilla, Safari, ...</span>
        httpRequest <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> XMLHttpRequest<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>window.<span style="color: #660066;">ActiveXObject</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #006600; font-style: italic;">// IE</span>
        httpRequest <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> ActiveXObject<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Microsoft.XMLHTTP&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    httpRequest.<span style="color: #000066;">open</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;GET&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'/cities/update/'</span> <span style="color: #339933;">+</span> stateId<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    httpRequest.<span style="color: #660066;">onreadystatechange</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;CityId&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">innerHTML</span> <span style="color: #339933;">=</span> httpRequest.<span style="color: #660066;">responseText</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
    httpRequest.<span style="color: #660066;">send</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Ainda, como o JavaScript por padrão não possui métodos para observar eventos em elementos diversos, será necessário adicionar explicitamenteuma chamada para a função <em>updateCities()</em> no evento <em>onChange</em> do <em>&lt;select&gt;</em>:</p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">select</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;StateId&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;StateId&quot;</span> <span style="color: #000066;">onchange</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;updateCities(this.value)&quot;</span>&gt;</span></pre></div></div>

<p>Utilizando-se Prototype, o trabalho torna-se bem mas fácil:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">//Prototype</span>
Event.<span style="color: #660066;">observe</span> <span style="color: #009900;">&#40;</span>
    <span style="color: #3366CC;">'StateId'</span><span style="color: #339933;">,</span>
    <span style="color: #3366CC;">'change'</span><span style="color: #339933;">,</span>
    <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #003366; font-weight: bold;">new</span> Ajax.<span style="color: #660066;">Updater</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'CityId'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'/cities/update/'</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">value</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Já com jQuery, o código é reduzido significativamente, além de ficar bem mais legível e fácil de entender a uma primeira olhada:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">//jQuery</span>
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#StateId'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">change</span><span style="color: #009900;">&#40;</span>
    <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#CityId'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">load</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'/cities/update/'</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">value</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Este é um exemplo simples de como fica fácil reduzir código e torná-lo mais legível com uso do <a href="http://jquery.com/">framework Js jQuery</a>.<br />
Veja a <a href="http://docs.jquery.com/">documentação do jQuery</a> para mais métodos e exemplos de uso.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.diovani.com/2008/07/31/prototype-vs-jquery-combo-estadocidade/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

