<?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>Leandro Vieira Pinho&#039;s Blog &#187; opera</title>
	<atom:link href="http://leandrovieira.com/archive/tag/opera/feed" rel="self" type="application/rss+xml" />
	<link>http://leandrovieira.com</link>
	<description>Just another WordPress weblog</description>
	<lastBuildDate>Sat, 20 Aug 2011 19:22:06 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=</generator>
		<item>
		<title>Diferenças entre os browsers ao interpretar JavaScript #1</title>
		<link>http://leandrovieira.com/archive/diferencas-entre-os-browsers-ao-interpretar-javascript-1</link>
		<comments>http://leandrovieira.com/archive/diferencas-entre-os-browsers-ao-interpretar-javascript-1#comments</comments>
		<pubDate>Thu, 21 Dec 2006 13:35:56 +0000</pubDate>
		<dc:creator>Leandro Vieira Pinho</dc:creator>
				<category><![CDATA[crossbrowser]]></category>
		<category><![CDATA[IE]]></category>
		<category><![CDATA[firefox]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[opera]]></category>

		<guid isPermaLink="false">http://leandrovieira.com/?p=80</guid>
		<description><![CDATA[Estou lançando uma série que pretendo manter aqui no blog: Diferença entre browsers ao interpretar JavaScript. Ela terá a simples intenção de arquivar algumas diferença que percebo duramente o meu dia-a-dia de desenvolvimento utilizando tal linguagem. Mas, como não quero &#8230; <a href="http://leandrovieira.com/archive/diferencas-entre-os-browsers-ao-interpretar-javascript-1">Continuar lendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Estou lançando uma série que pretendo manter aqui no blog: <strong>Diferença entre browsers ao interpretar JavaScript</strong>. Ela terá a simples intenção de arquivar algumas diferença que percebo duramente o meu dia-a-dia de desenvolvimento utilizando tal linguagem. Mas, como não quero manter isso só pra mim, decidir compartilhar e disponibilizar por aqui <img src='http://leandrovieira.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>Vamos ao primeiro exemplo de hoje, o qual me motivou a iniciar esta série. Observe o seguinte código:</p>
<pre lang="javascript">// Seleciona todos os links contidos na página
var arrLinks = $tags('a');
// Loop entre os links selecionados
for ( var i = 0, objLink; objLink = arrLinks[i]; i++) {
	// Selecionamos o atributo rel do link em questão
	var objLinkAttRel = objLink.getAttribute('rel');
	// Descobrimos o tipo da varíavel que armazenou o atributo rel do link
	alert('Tipo: ' + typeof(objLinkAttRel));
}</pre>
<p>Bom, o código está auto-explicativo (se não o compreendeu, comente). Observe o resultado obtido:</p>
<ul>
<li>Tipo: string = <a href="http://microsoft.com/ie/">Internet Explorer</a> 6</li>
<li>Tipo: object = <a href="http://mozilla.com/firefox">Firefox</a> 2.0.0.1</li>
<li>Tipo: object = <a href="http://opera.com">Opera</a> 9</li>
</ul>
<p>Como você percebeu, somente o <a href="http://microsoft.com/ie/">Internet Explorer</a> interpreta o tipo da variável como <strong>Object String</strong>. Então, se você faz um código assim:</p>
<pre lang="javascript">...
var objLinkAttRel = objLink.getAttribute('rel');
if ( objLinkAttRel.substring(0,3) == 'foo' ) {
	// Faz alguma coisa
}</pre>
<p>Com o intuito de verificar o conteúdo do atributo rel dos links selecionados, e testa somente no <a href="http://microsoft.com/ie/">Internet Explorer</a>, você verá seu script funcionando perfeitamente. Mas ao testar em outros navegadores &#8211; como o <a href="http://mozilla.com/firefox">Firefox</a> e o <a href="http://opera.com">Opera</a> &#8211; você terá uma mensagem de erro &#8211; <em>objLinkAttRel has no properties</em>. Isto por que você está utilizando um método &#8211; <a href="http://leandro.w3invent.com.br/archive/a-diferenca-entre-os-metodos-substr-e-substring-do-javascript">substring</a> &#8211; para trabalhar com <strong>Objects Strings</strong>. E como eles não interpretam tal variável como <strong>Object String</strong>, certamente não funcionará.</p>
<p>Então, o que fazer para que tenhamos esse <strong>código de forma crossbrowser</strong>? Simples, ao selecionar o conteúdo do atributo rel dos links, iremos transformá-lo em um <strong>Object String</strong>. Para que todos os browsers o interpretam dessa maneira (como Object String). Observe:</p>
<pre lang="javascript">// Seleciona todos os links contidos na página
var arrLinks = $tags('a');
// Loop entre os links selecionados
for ( var i = 0, objLink; objLink = arrLinks[i]; i++) {
	// Selecionamos o atributo rel do link em questão
	var objLinkAttRel = new String(objLink.getAttribute('rel')); // Observe: new String()
	if ( objLinkAttRel.substring(0,3) == 'foo' ) {
		// Faz alguma coisa
	}
}
}</pre>
<p>Somente. Gosto sempre de trabalhar com vários navegadores abertos e testando tudo ao mesmo tempo, assim já identifico de imediato algumas divergências entre os navegadores e procuro uma alternativa para deixar meus <strong>códigos sempre de forma crossbrowser</strong> <img src='http://leandrovieira.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://leandrovieira.com/archive/diferencas-entre-os-browsers-ao-interpretar-javascript-1/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

