Javascript - Seu Curso
Hoje em dia muitos sites comportam-se como aplicativos para celular, já que serão utilizados basicamente em dispositivos móveis.
E uma grande facilidade para o usuário é que, ao invés de solicitar que ele digite o endereço, você obtenha-o diretamente da localização atual dele. Ok, pode ser que ele queira colocar o endereço da casa dele e não esteja em casa nesse momento, mas imagine que a aplicação seja para, por exemplo, enviar fotos e identificar de onde ela foi tirada. ;)
O código abaixo é de uma página completa que consegue acessar os dados de GPS do dispositivo móvel e enviá-los ao Google Maps para obter o endereço a partir da latitude e longitude atual.
Note que será preciso dar permissão para que a página possa acessar seus dados de localização.
<title>Pega endereço</title>
<form action="vai_para_algum_lugar.php" method="post">
<label class="active" for="endereco">Endereço</label>
<input type="text" id="endereco" size="999" name="endereco">
<!-- Script de Endereço -->
var dados = doc.childNodes[0];
var end = document.getElementById('endereco');
for(var i=0;i<dados.children.length;i++) {
var dados = doc.childNodes[i];
var status = dados.getElementsByTagName("formatted_address");
end.value = status[0].textContent.toString();
var url = "http://maps.googleapis.com/maps/api/geocode/xml?latlng=" + position.coords.latitude + "," + position.coords.longitude;
end.value = "Não tenho permissão para acessar GPS"
end.value = "GPS retornou que a posição não está disponível"
end.value = "GPS retornou timeout"
end.value = "GPS retornou erro desconhecido"
Você pode destrinchar o código fonte, mas os principais pontos são:
x.innerHTML= "Seu browser não suporta Geolocalização.";
Com esse trecho verificamos se há uma geolocalização a ser obtida (no if) e se houver obtemos os dados, chamando a função showPosition. Caso não haja, ou seja, ocorra algum erro chamamos a função showError.
Se o navegador não suportar geolocalização navigator.geolocation retornará false, mostrando a mensagem de erro"Seu browser não suporta Geolocalização.".
O trecho abaixo recebe a geolocalização obtida pelo GPS e armazena na variável position, onde, position.coords.latitude conterá a latitude e position.coords.longitude a longitude.
A ideia aqui foi gerar uma URL para que o Google Maps retorne os dados do que se encontra na posição geográfica em formato XML.
O código abaixo cria a URL e obtém o XML que é retornado através dela:
O trecho abaixo foi omitido acima ;), é com ele que decodificamos o XML, pegado apenas o campo formatted_address do que for retornado:
Para testar no Chrome para simular uma posição pressione CTRL + SHIFT + I, selecione a aba Sensors abaixo do painel e escolha alguma Geolocation.
Depois é só recarregar (F5) a página.
Como atualizar uma DIV automaticamente
Você pode usar o método setInterval de um objeto window para ajustar um intervalo para as atualizações e uma função Javascript para invocar essa atualização.
Um código exemplo é o que segue:
document.getElementById("teste").innerHTML = "Testando... " + counter;
<div id="estatico">
Parte estática da página.
Esse código criará um contador dentro da DIV que será atualizado a cada 5 segudos (5000 milissegundos).
O HTML5 não é tão novo, mas ainda existem várias funcionalidades que muitos desenvolvedores desconhecem, e uma delas é o Web Notifications.
Web Notifications é uma simples API em Javascript utilizada para exibir mensagens para o usuário e funciona mesmo que a página ou o navegador não estejam visíveis. A mensagem é exibida fora do browser e acima de qualquer outro programa aberto pelo usuário, então mesmo que o usuário esteja trabalhando em outra janela ele visualizará a mensagem. Veja uma demonstração:
No entanto, deve-se ficar atento quanto a compatiblidade dos navegadores. As versões mais atuais dos navegadores Firefox, Chrome, Opera e Safari já são compatíveis, enquanto nenhuma versão do Internet Explorer possui suporte. Dados completos e atualizados podem ser obtidos em http://caniuse.com/#feat=notifications.
Segue uma exemplo básico e comentado do uso da API em Javascript:
<title>Web notification</title>
<button onclick="notificarUsuario()">Testar</button>
function notificarUsuario(){
var tituloMensagem = "Atenção usuário Fulano!";
var icone = "http://www.seucurso.com.br/images/stories/logo.png";
var mensagem = "Você recebeu uma nova mensagem em seu email";
Mais opções para o web notifications podem ser obtidas em https://developer.mozilla.org/en-US/docs/Web/API/Notification/Using_Web_Notifications
Como atualizar uma imagem a cada período de tempo
Apenas uma sugestão de como fazer isso, sendo que há literalmente milhares:
Entre suas tags head inclua o seguinte javascript:
setInterval("document.getElementsByTagName('iframe')[0].src='imagem.jpg'", 15000)
Esse script será executado quando a página for carregada e atualizará o iFrame a cada 15 segundos (o tempo é informado em milissegundos).
No corpo do HTML use um iFrame:
<iframe src="imagem.jpg" style="width: 384px; height: 288px;" frameborder="0" scrolling="no"></iframe>