Trabalhando URL Com Javascript

Quando se fala em trabalhar com URLs, é quase instantâneo pensar em .htaccess. Afinal ele é utilizado para a criação das url amigáveis.

Mantendo essa linha de pensamento, facilmente esquecemos que o javascript nos oferece ferramentas para manipular o endereço da página. Claro que nada complexo, mas o suficiente para fazer alguns truques interessantes e com facilidade.

Neste tutorial será apresentado o objeto location e utilizaremos alguns métodos para trabalhar com arrays.

O exemplo prático será um site onde o item do menu que foi clicado, e por conseguinte a página que foi carregada, será estilizado a fim de identificar a localização do visitante no contexto do site.

Na imagem abaixo você pode ver o resultado.

O Objeto location

Este objeto retorna o endereço completo da página. Ele é propriedade dos objetos window e document. A implicação mais visível disso é que podemos acessar o objeto sem a necessidade de colocar window ou document na frente.

//são equivalentes

window.location.href 

document.location.href

location.href

Propriedades Do Objeto location

• hash – retorna a string que estiver após o sinal ‘#’no endereço da página. É muito útil ao desenvolver navegação em abas, pois possibilita uma linkagem direta na aba. Acesse o tutorial Navegação Em Abas Com CSS E jQuery publicado aqui no Webmaster.pt e veja mais detalhadamente a aplicação desta propriedade.
• host e hostname – retornam o endereço da página (www.endereco.com). A diferença é que o segundo elimina o ‘www’ da frente do endereço.
• href – retorna o endereço completo da página atual, inclusive com o ‘http//’.
• pathname – esta é uma propriedade extremamente útil, mas pouco utilizada. Com ela conseguimos o trecho que vem depois da primeira barra do endereço da página. Ao acessar a página
  https://www.webmaster.pt/categoria/web-design/javascript
  conseguimos ‘categoria/web-design/javascript’ ‘.
• port – captura a porta da requisição se especificada na URL.
• protocol – retorna o protocolo da requisição. ‘http’, ‘ftp’…
• search – outra importante propriedade pouco utilizada. Se você quer saber os valores e variáveis passados através de uma requisição GET, esta é a propriedade. Tudo que estiver após o sinal de interrogação ‘?’ é retornado, incluindo o sinal.

As Páginas

Já temos as informações necessárias para manipular a URL. Vamos agora montar as páginas para colocar em prática.

O primeiro passo é importar os arquivos necessários. Basta o jQuery, um arquivo para o código javascript e outro para folha de estilo.

<link rel="stylesheet" type="text/css" href="estilo.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript" src="javascript.js"></script>

O restante do conteúdo da página é facultativo exceto o menu, que precisa ser conforme o modelo abaixo:

<ul>

    <li><a href="index.html" id="index">Inicial</a></li>

    <li><a href="servicos.html" id="servicos">Servi&ccedil;os</a></li>

    <li><a href="contato.html" id="contato">Contato</a></li>

</ul>

O detalhe importante é que os links têm um ‘id’ pegaremos para saber qual foi o item clicado.

Agora é só replicar o conteúdo para ficar com três páginas: ‘index.html, ‘servicos.html’ e ’contato.html’.

Código Javascript

O código que isola o trecho da URL que queremos é javascript puro, então poderíamos colocar as linhas antes da função jQuery. Foi posto desta maneira aqui para manter coesão. O objetivo é isolar do endereço o nome da página carregada.

$(function(){

  var endereco = location.pathname; 

  var array = endereco.split('/'); 

  var ultimo = array.pop();

  var isola = ultimo.split('.');

  var clicado = isola[0];

  $('#'+clicado).animate({'font-size':'1.5em'},500).addClass('clicado');

})

A primeira variável recebe o trecho do endereço que vier após a primeira barra, como vimos na explicação sobre as propriedades do objeto location.

É provável que você também rode este exemplo no seu servidor localhost, e desta maneira a variável ‘endereco’ deve estar preenchida com uma string mais ou menos assim: ‘/pasta/contato.html’.

Para desmembrar ela e chegarmos mais próximo do objetivo de isolar o endereço da página, na terceira linha do código utilizamos o método split() que separa a string com base no separador definido entre os parênteses. O retorno desta separação é uma array.

O endereço da página é o último elemento da array. Para isolar esta parte usamos o método pop(). Com isso a variável ‘ultimo’ esta com a string ‘contato.html’.

É utilizado mais uma vez o split() para separar o nome do arquivo da extensão. Na penúltima linha a variável ‘clicado’ recebe o primeiro item da array, que é somente o endereço ‘contato’.

Por fim entra um pouco de jQuery. Com ele acessamos o elemento da página com o id ‘contato’, aumentamos o tamanho da fonte e adicionamos uma classe que muda a cor.

Utilize o alert() ou document.write() se encontrar dificuldade de visualizar o conteúdo das variáveis.

Capturar Variável

Com uma pequena adaptação o código acima também pode ser usado para capturar os valores e variáveis passados pelo método GET. Ao invés de usar ‘location.pathname’, basta usar ‘location.search’. Com isso você fica com uma string ‘?variavel=valor’ e usando os métodos de array apresentados pode isolar as partes que precisa.

Conclusão

Este foi um exemplo relativamente simples, mas com certeza de muita utilidade já que são poucos os tutoriais que abortam este tema. E digo isso por experiência, pois quando precisei foi difícil encontrar informações organizadas e concisas sobre o trabalho com URLs.

Código usado neste tutorial: Trabalhando URL Com JavascriptCom

Be Sociable, Share!

•