O Básico da web

Depois de mais um longo inverno, O Básico da Web volta, ou tenta voltar, à ativa com mais um post sobre as maravilhas dessa linguagem não tão bem compreendida que é o javascript.

Hoje iremos falar sobre as propriedades e métodos do objeto location, um objeto do navegador que contém todas (ou quase) as informações relacionadas a URL atual. o Location é um objeto que faz parte do objeto window, logo ele é acessado pela propriedade window.location.

Não sei vocês, mas algumas coisas para mim ficam horríveis, chegando até a ficar sem sentido, quando são traduzidas, objeto do navegador é uma delas, vamos tratar todo mundo aqui como gente grande então nada de objeto do navegador é browser object!

Browser object?

Browser object porque as informações que ele retorna são do browser, inclusive elas não estão em nenhuma especificação/recomendação oficial mas a maioria dos browsers suportam, ah os IEs também estão nessa lista.

Propriedades do location

o location é um browser object muito interessante e útil, mas a maioria só conhece uma ou duas propriedade que ele possui, abaixo irei listar cada uma das propriedades e como utilizá-las

href

primeiro o href, que pega e/ou muda a url da página, sendo que ele pode ser utilizado somente como window.location, ou seja é uma propriedade que é conhecida pela metade, por exemplo, se colocarmos o seguinte js nessa pagina:

<script type="text/javascript">
	alert(window.location);
	//ou
	alert(location.href);
	//retornaria http://obasicodaweb.com/URL.
	//caso façamos o seguinte código,
	window.location = "http://google.com";
	//ou
	location.href = "http://google.com";
	//a página seria recarregada para a url indicada.
</script>

hash

A outra propriedade é o hash, entre outros usos o principal é, que podemos manipular a url sem ter que fazer o recarregamento da página, ou seja, como as funções de ajax devem ser.

O hash tem um caractere padrão o # (tralha, jogo da velha, ou qualquer outro nome que vcqueira ou conheça), que é usado para identificar o que foi modificado na url, por exemplo:

<script type="text/javascript">
	// estamos em uma pagina com a seguinte url:
	// http://obasicodaweb.com/home#pagina2
	alert(location.hash);
	//retornaria #pagina2
</script>

Sim, o # vem junto da informação, caso queira removê-lo basta fazer um search ou usar o substr, mas isso é assunto para outro post.

host

Continuando, temos outra propriedade chamada host, que é chamada por location.host, que retorna o domínio e caso tenha a porta utilizada, por exemplo temos a url a seguir:

<script type="text/javascript">
	// agora estamos em uma pagina com a seguinte url:
	// http://www.obasicodaweb.com:8080/teste
	alert(location.host);
	//retornaria www.obasicodaweb.com:8080
</script>

hostname

A próxima propriedade que veremos é a hostname, que retorna, como o próprio nome diz, o hostname da url, nesta página o location.hostname retornaria www.obasicodaweb.com, basicamente o funcionamento é o mesmo do location.host, só que o hostname não retorna a porta utilizada.

Outra propriedade é pathname, que retorna tudo depois do location.host, ou seja:

<script type="text/javascript">
	// a url agora é:
	// http://www.obasicodaweb.com:8080/teste/teste
	alert(location.pathname);
	// retornaria /teste/teste 

	// no caso da url ser
	// http://www.obasicodaweb.com:8080/teste#hash
	alert(location.pathname);
	// retorna /teste sem o hash ou ancora.
</script>

port

port é a próxima propriedade que veremos, ela retorna a porta utilizada na url.

<script type="text/javascript">
	// na url:
	// http://www.obasicodaweb.com:8080/teste
	alert(location.port);
	// retornaria 8080

	// caso não retorne nada, é porque é a porta padrão, de numero 80, geralmente.
</script>

protocol

location.protocol é a propriedade que retorna o protocolo utilizado, no caso desta página seria http:, sim com o dois pontos. Existem diversos protocolos, outro protocolo que muito utilizado é o https:

search

search é a ultima propriedade que veremos, ela retorna os parâmetros utilizados na url, como exemplo vamos utilizar a seguinte url:

<script type="text/javascript">
	// na url:
	// http://www.obasicodaweb.com:8080/?largura=10&altura=5
	alert(location.search);
	// retorna ?largura=10&altura=5
</script>

Métodos do location

assign()

Para finalizar temos alguns métodos, o primeiro é o assign() que carrega uma nova página, parecido com o location.href, a diferença que o assign funciona como um parâmetro em uma função:

<script type="text/javascript">
	window.location.assign('http://obasicodaweb.com')
	// irá carregar a página indicada.
</script>

reload()

O segundo método é o reload(), que recarrega a página, basicamente faz a mesma coisa que um f5 no seu browser de preferência, é utilizado da seguinte forma:

<script type="text/javascript">
	location.reload()
	// recarregará a página assim que for executado
</script>

replace()

o terceiro e ultimo, mas não menos importante é o método replace(), que substitui a página por outra nova. Funciona basicamente da mesma forma que o assign().

<script type="text/javascript">
	window.location.replace('http://obasicodaweb.com')
	// irá substituir a página pela url indicada.
</script>

A diferença entre o assign() e href para o replace() é que os dois primeiros adicionarão a url no histórico do browser, enquanto o replace não, ou seja, você pode manipular a entrada de uma url no histórico do browser.

Por hoje é isso, espero que vocês possam utilizar tudo o que o location pode oferecer. Gostou do post? não gostou? falta algo? tem algo errado? fala ai embaixo por favor.

Leia também:

• Protocolo HTTP: métodos de requisição
• Padrões web: Desenvolvimento em camadas
• Como criar elementos HTML via JavaScript/DOM
• HTML – Esqueleto de um documento HTML – Parte 3: Outros elementos do HEAD
• Image Replacement: use com sabedoria
• Hospedagem de sites Dreamhost: 50% de desconto