<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Javascript on jpcercal.com</title><link>https://jpcercal.com/tags/javascript/</link><description>Recent content in Javascript on jpcercal.com</description><generator>Hugo</generator><language>pt</language><lastBuildDate>Mon, 26 Aug 2013 17:30:19 +0000</lastBuildDate><atom:link href="https://jpcercal.com/tags/javascript/index.xml" rel="self" type="application/rss+xml"/><item><title>Como e Porque você deve incluir o jQuery do Google CDN no WP</title><link>https://jpcercal.com/como-e-porque-voce-deve-incluir-o-jquery-do-google-cdn-no-wordpress/</link><pubDate>Mon, 26 Aug 2013 17:30:19 +0000</pubDate><guid>https://jpcercal.com/como-e-porque-voce-deve-incluir-o-jquery-do-google-cdn-no-wordpress/</guid><description>&lt;p&gt;O &lt;em&gt;jQuery&lt;/em&gt; é uma biblioteca amplamente utilizada para o desenvolvimento web, sendo que, no &lt;em&gt;WordPress&lt;/em&gt; temos essa biblioteca incluída no pacote de instalação &lt;em&gt;default&lt;/em&gt;.&lt;/p&gt;&#10;&lt;p&gt;Neste artigo, irei apresentar como e porque você deveria substituir o &lt;em&gt;jQuery&lt;/em&gt; &lt;em&gt;default&lt;/em&gt; do &lt;em&gt;WordPress&lt;/em&gt; pelo &lt;em&gt;jQuery&lt;/em&gt; do &lt;em&gt;Google CDN (Content Distribution Network)&lt;/em&gt;.&lt;/p&gt;&#10;&lt;p&gt;&lt;strong&gt;Mas porque você deveria substitui-lo?&lt;/strong&gt;&lt;/p&gt;&#10;&lt;p&gt;De um modo geral, você deve fazer isto para que o carregamento do script seja mais rápido para o usuário final.&lt;/p&gt;</description></item><item><title>jQuery a diferença entre bind, live, delegate, on</title><link>https://jpcercal.com/jquery-a-diferenca-entre-bind-live-delegate-on/</link><pubDate>Fri, 01 Feb 2013 04:07:20 +0000</pubDate><guid>https://jpcercal.com/jquery-a-diferenca-entre-bind-live-delegate-on/</guid><description>&lt;p&gt;A biblioteca &lt;strong&gt;jQuery&lt;/strong&gt; permite &lt;em&gt;registrar eventos&lt;/em&gt; utilizando os seguintes métodos: &lt;strong&gt;bind&lt;/strong&gt;, &lt;strong&gt;live&lt;/strong&gt;, &lt;strong&gt;delegate&lt;/strong&gt;,&#10;&lt;strong&gt;on&lt;/strong&gt;. Você sabe quando e onde utilizar? Conhece a diferença entre eles?&lt;/p&gt;&#10;&lt;p&gt;Se ainda, não conhece sugerimos a leitura deste artigo.&lt;/p&gt;&#10;&lt;p&gt;&lt;strong&gt;BIND&lt;/strong&gt;&lt;/p&gt;&#10;&lt;div class="highlight"&gt;&lt;div class="chroma"&gt;&#10;&lt;table class="lntable"&gt;&lt;tr&gt;&lt;td class="lntd"&gt;&#10;&lt;pre tabindex="0" class="chroma"&gt;&lt;code&gt;&lt;span class="lnt"&gt; 1&#10;&lt;/span&gt;&lt;span class="lnt"&gt; 2&#10;&lt;/span&gt;&lt;span class="lnt"&gt; 3&#10;&lt;/span&gt;&lt;span class="lnt"&gt; 4&#10;&lt;/span&gt;&lt;span class="lnt"&gt; 5&#10;&lt;/span&gt;&lt;span class="lnt"&gt; 6&#10;&lt;/span&gt;&lt;span class="lnt"&gt; 7&#10;&lt;/span&gt;&lt;span class="lnt"&gt; 8&#10;&lt;/span&gt;&lt;span class="lnt"&gt; 9&#10;&lt;/span&gt;&lt;span class="lnt"&gt;10&#10;&lt;/span&gt;&lt;span class="lnt"&gt;11&#10;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&#10;&lt;td class="lntd"&gt;&#10;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-js" data-lang="js"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="c1"&gt;// Attach a handler to an event for the elements.&#10;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;bind&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt; &lt;span class="nx"&gt;eventType&lt;/span&gt; &lt;span class="p"&gt;[,&lt;/span&gt; &lt;span class="nx"&gt;eventData&lt;/span&gt; &lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="nx"&gt;handler&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;eventObject&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;)&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;bind&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt; &lt;span class="nx"&gt;eventType&lt;/span&gt; &lt;span class="p"&gt;[,&lt;/span&gt; &lt;span class="nx"&gt;eventData&lt;/span&gt; &lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="nx"&gt;preventBubble&lt;/span&gt; &lt;span class="p"&gt;)&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;bind&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt; &lt;span class="nx"&gt;events&lt;/span&gt; &lt;span class="p"&gt;)&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="c1"&gt;// ----------------------------------------------&#10;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="c1"&gt;// Exemplo:&#10;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="nx"&gt;jQuery&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;&amp;#39;#botao&amp;#39;&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;bind&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="s1"&gt;&amp;#39;click&amp;#39;&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="c1"&gt;// faz alguma coisa...&#10;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;});&lt;/span&gt;&#10;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&#10;&lt;/div&gt;&#10;&lt;/div&gt;&lt;p&gt;Registra os eventos nos elementos selecionados pela biblioteca &lt;strong&gt;jQuery&lt;/strong&gt;. Permite registrar apenas os elementos que&#10;se encontram no &lt;em&gt;DOM&lt;/em&gt; inicialmente, ou seja, se você cria elementos usando &lt;em&gt;javascript&lt;/em&gt;, &lt;em&gt;ajax&lt;/em&gt;.. o &lt;strong&gt;bind&lt;/strong&gt; não irá&#10;funcionar.&lt;/p&gt;</description></item><item><title>Validando formulários com o plugin jQuery Validade</title><link>https://jpcercal.com/validando-formularios-com-o-plugin-jquery-validade/</link><pubDate>Mon, 21 Jan 2013 13:15:32 +0000</pubDate><guid>https://jpcercal.com/validando-formularios-com-o-plugin-jquery-validade/</guid><description>&lt;p&gt;Hoje apresento a vocês o &lt;strong&gt;jQuery Validade&lt;/strong&gt;, um excelente plugin jQuery desenvolvido pela equipe&#10;&lt;a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" title="jQuery Validate"&gt;http://bassistance.de&lt;/a&gt;.&lt;/p&gt;&#10;&lt;p&gt;Você pode fazer o download deste plugin diretamente no site do desenvolvedor (&lt;em&gt;citado acima&lt;/em&gt;) ou então no repositório&#10;&lt;a href="https://jpcercal.com/git-hub-atinge-tres-milhoes-de-usuarios/" title="Git Hub atinge 3 milhões de usuários"&gt;GitHub&lt;/a&gt;&#10;(_&lt;a href="https://github.com/jquery-validation/jquery-validation"&gt;https://github.com/jquery-validation/jquery-validation&lt;/a&gt;).&lt;/p&gt;&#10;&lt;p&gt;Se você utiliza o &lt;strong&gt;GIT&lt;/strong&gt; como controlador de versão, poderá executar o comando abaixo para clonar o repositório&#10;oficial do plugin:&lt;/p&gt;&#10;&lt;div class="highlight"&gt;&lt;div class="chroma"&gt;&#10;&lt;table class="lntable"&gt;&lt;tr&gt;&lt;td class="lntd"&gt;&#10;&lt;pre tabindex="0" class="chroma"&gt;&lt;code&gt;&lt;span class="lnt"&gt;1&#10;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&#10;&lt;td class="lntd"&gt;&#10;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-shell" data-lang="shell"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;$ git clone https://github.com/jzaefferer/jquery-validation.git&#10;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&#10;&lt;/div&gt;&#10;&lt;/div&gt;&lt;p&gt;Para utilizar este plugin você precisa utilizar o &lt;a href="http://jquery.com/" title="jQuery"&gt;jQuery&lt;/a&gt;.&lt;/p&gt;</description></item><item><title>jQuery Mask: Máscaras para campos de formulários</title><link>https://jpcercal.com/jquery-mask-mascaras-para-campos-de-formularios/</link><pubDate>Sun, 20 Jan 2013 11:01:36 +0000</pubDate><guid>https://jpcercal.com/jquery-mask-mascaras-para-campos-de-formularios/</guid><description>&lt;p&gt;Uma maneira simples e rápida de adicionar máscaras aos campos de um formulário é utilizando um plugin&#10;&lt;a href="http://jquery.com/" title="jQuery"&gt;jQuery&lt;/a&gt;, este plugin se chama&#10;&lt;a href="https://github.com/digitalBush/jquery.maskedinput" title="Plugin jQuery"&gt;Masked Input Plugin&lt;/a&gt;.&lt;/p&gt;&#10;&lt;p&gt;Para criar uma &lt;strong&gt;máscara&lt;/strong&gt;, basta você informar um simples comando &lt;em&gt;javascript&lt;/em&gt;, tendo apenas as seguintes regras:&lt;/p&gt;&#10;&lt;ul&gt;&#10;&lt;li&gt;&lt;em&gt;a&lt;/em&gt; – &lt;em&gt;Representa um caractere alfabético (A-Z, a-z)&lt;/em&gt;&lt;/li&gt;&#10;&lt;li&gt;&lt;em&gt;9&lt;/em&gt; – &lt;em&gt;Representa um carácter numérico (0-9)&lt;/em&gt;&lt;/li&gt;&#10;&lt;li&gt;&lt;em&gt;*&lt;/em&gt; – &lt;em&gt;Representa um caractere alfanumérico (A-Z, a-z ,0-9)&lt;/em&gt;&lt;/li&gt;&#10;&lt;/ul&gt;&#10;&lt;p&gt;Vamos ver alguns exemplos práticos:&lt;/p&gt;&#10;&lt;p&gt;&lt;strong&gt;Nota:&lt;/strong&gt; estamos utilizando o seletor &lt;em&gt;jQuery&lt;/em&gt; através do atributo &lt;strong&gt;ID&lt;/strong&gt;.&lt;/p&gt;</description></item></channel></rss>