Temporizadores permitem que você determine um intervalo de tempo para que uma função Javascript seja executada.
Existem dois tipos, o que não se repete, que é o setTimeOut(), e o que se repete, que é o setInterval()
Voltando a nossa lâmpada dos primeiros exercícios, chame por uma tag img a lâmpada apagada e a id luz.
Crie esse código para ligarmos a lâmpada ao clicar nela:
onload = function() { // O window.onload inicia automaticamente a execução do Javascript da função
document.getElementById("luz").onclick = ligar; // Função chamada ao clicar
};
function ligar() {
document.getElementById("luz").src = "imagens/lampada-acesa.jpg";
}
Para usarmos os temporizadores, podemos fazer assim:
onload = function() { // O window.onload inicia automaticamente a execução do Javascript da função
document.getElementById("luz").onclick = ligar; // Função chamada ao clicar
};
function ligar() {
document.getElementById("luz").src = "imagens/lampada-acesa.jpg";
setTimeout("desligar()", 3000); // Passe os milésimos de segundos
}
function desligar() {
document.getElementById("luz").src = "imagens/lampada-apagada.jpg";
}
Dessa forma, o setTimeout executará apenas uma vez, 3 segundos após clicar na lâmpada.
PS: Podemos colocar apenas a referência do nome da função, sem aspas, assim:
setTimeout(desligar, 3000);
Se necessário, podemos colocar o clearTimeout() para limpar o temporizador (sempre a última linha da função, caso esteja em uma), nesse caso precisamos de uma variável, assim:
chave = setTimeout(desligar, 3000); // Criar uma variável global na função. Se necessário declara ela fora da mesma.
E no onload coloque isso:
clearTimeout(chave);
Podemos usar o setInterval para criar um temporizador que se repete, por exemplo, esse para atualizar um relógio em tempo real, pra isso, crie uma tag span com a id horas, e esse código:
onload = function() { // O window.onload inicia automaticamente a execução do Javascript da função
setInterval(horaAtual, 1); // Quantidade de milissegundos.
};
function horaAtual() {
let data = new Date();
let dia = data.getDate();
let mes = data.getMonth();
let ano = data.getFullYear();
let hora = data.getHours();
let minu = data.getMinutes();
let segu = data.getSeconds();
let mili = data.getMilliseconds();
let ds = data.getDay();
let meses = ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"];
let semana = ["Domingo", "Segunda-Feira", "Terça-Feira", "Quarta-Feira", "Quinta-Feira", "Sexta-Feira", "Sábado"];
let saida = "Hoje é " + semana[ds] + ", Dia " + dia + " de " + meses[mes] + " de " + ano + ".";
saida += "<br/>A hora atual é " + ("00" + hora).slice(-2) + ":" + ("00" + minu).slice(-2) + ":" + ("00" + segu).slice(-2) + "." + ("000" + mili).slice(-3) + ".";
document.getElementById("horas").innerHTML = saida;
}
PS: Podemos utilizar uma lambda no lugar do function do onload.
Primeiro, crie uma variável com um prompt dentro do window.onload assim:
var nome = prompt("Qual o seu nome?");
O problema é que esse tipo de variável, é destruída ao recarregar a página. Para salvar os dados mesmo se a página seja fechada ou carregada, usamos cookies, que salvam informações no computador do usuário.
Voltando a nossa lâmpada, vamos fazer um programa que ao clicar a lâmpada, ela pergunte o nome do internauta e mostre uma saudação com o nome dele, e não peça novamente caso já tenha informado.
Só que por questões de segurança do Javascript, eles não armazenam coisas como por exemplo, que executem programas ou códigos maliciosos. Mas é possível acessar eles remotamente, por exemplo.
Para gravar os cookies, usamos document.cookie, com essa sintaxe:
new Date().toUTCString();
document.cookie = "nomeDoCookie=valorDoCookie; expires=data; path=localhost";
O primeiro é o nome e o valor, expires define a data de expiração (sempre no formato GMT, podemos usar o método toGMTString() do objeto Date pra isso. Caso não passe nada, a expiração padrão é a sessão do navegador), e path é o domínio
PS: Só podemos armazenar até 20 cookies por domínio.
Para criar o cookie, podemos fazer uma função assim:
function escreveCookie(nome, valor, dias) {
// Por default, não existe expiração, o cookie dura uma sessão
let expira = "";
if(dias) {
let data = new Date();
data.setTime(data.getTime() + (dias * 24 * 60 * 60 * 1000));
expira = "expires=" + data.toUTCString();
}
// Condição 2
if(valor != "" && valor != null && valor != "null") {
// Isso cria o cookie:
document.cookie = nome + "=" + valor + "; " + expira + "; path=/";
}
}
E para ler, podemos criar assim:
function lerCookie(nome) {
// Procura o cookie especificado e retorna o seu valor:
let procuraNome = nome + "=";
let cook = document.cookie.split(";");
for(let i = 0; i < cook.length; i++) {
let c = cook[i];
while(c.charAt(0) == " ") {
c = c.substring(1, c.length);
}
if(c.indexOf(procuraNome) == 0) {
return c.substring(procuraNome.length, c.length);
}
return null;
}
}
E pra apagar cookies:
function apagaCookie(nome) {
escreveCookie(nome, "", -1);
}
PS: Podemos colocar tudo isso num arquivo js para usarmos em todas as páginas.
E no onload, colocamos assim:
onload = function() { // O window.onload inicia automaticamente a execução do Javascript da função
document.getElementById("luz").onclick = ligar;
setInterval(apresentaHoras, 1000);
let nome = lerCookie("nome");
if(nome == null) {
nome = prompt("Qual o seu nome?");
escreveCookie("nome", nome, 7); // Nome do cookie, valor do cookie e dias de expiração.
}
};
E altere o método ligar() dessa forma:
function ligar() {
document.getElementById("luz").src = "imagens/lampada-acesa.jpg";
let nome = lerCookie("nome");
if(nome != null) {
alert("Você ligou a lâmpada, " + nome);
}
setTimeout("desligar()", 3000);
}
No Javascript, é possível criarmos expressões anônimas, usando essa sintaxe:
function() {
};
PS: Note que não pode esquecer do ponto e vírgula no final delas.
Para usar expressões anônimas, atribuímos ela a uma variável, dessa forma:
var mostraExpr = function() {
alert("Introdução à Expressão Lambda!");
};
PS: Podemos colocar as expressões numa só linha, mas atenção com o ponto e vírgula:
var mostraExpr = function() {alert("Introdução à Expressão Lambda!");};
Pra invocar uma função anônima, colocamos a variável atribuída seguida dos parênteses (mesmo se não existirem argumentos):
var mostraExpr = function() {alert("Introdução à Expressão Lambda!");};
mostraExpr();
Outro exemplo, com parâmetro e retorno:
var cubo = function(c) {return c * c * c;};
alert(cubo(5));
Podemos utilizar as expressões anônimas sem indicar function, nesse caso conhecidas como lambdas ou arrow functions, dessa forma:
var mostraExpr = () => {
alert("Introdução à Expressão Lambda!");
};
mostraExpr();
E se forem numa só linha, podemos até tirar as chaves, simplificando:
var mostraExpr = () => alert("Introdução à Expressão Lambda!");
mostraExpr();
Quando tiver algum retorno, podemos simplificar mais ainda, sem precisar indicar return:
var cubo = (c) => c * c * c; // Não se indica return, nesse caso.
alert(cubo(5));
Também podemos usar lambdas em uma função forEach do objeto de um array:
var bebidas = ["Água", "Suco", "Refrigerante"];
// Teste sem lambda:
for(let b of bebidas) {
document.write(b + "<br/>");
}
// Teste com lambda:
bebidas.forEach(b => document.write(b + "<br/>"));
E também podemos passar lambdas em funções que recebem outras funções como argumentos, como o setInterval:
let num = 1;
setInterval(() => {
console.log("Chamada " + num);
num++;
}, 2000);
Podemos, por exemplo, criar uma forma de ocultar e mostrar parte de um texto longo em HTML usando Javascript.
Crie no HTML, esse código:
<p>Não confunda anti-herói com vilão<span id="pontos">...</span><span id="mais">. O vilão é o inimigo do mocinho e o anti-herói é aquele cara de personalidade, que salva as pessoas, que vai atrás de seus objetivos, que movimenta o mundo, mas que se comporta de forma contrária aos heróis por não seguir as regras morais impostas pela sociedade. O lance dele é quebrar paradigmas, mas resolver os problemas.</span></p>
<input type="button" value="Leia Mais" id="btLeia" onclick="leia()"/>
E no estilo CSS dele, coloque apenas isso:
#mais {
display: none;
}
E no código Javascript, colocamos esse código aqui:
function leia() {
let pontos = document.getElementById("pontos");
let mais = document.getElementById("mais");
let btLeia = document.getElementById("btLeia");
if(pontos.style.display == "none") {
pontos.style.display = "inline";
mais.style.display = "none";
btLeia.value = "Leia Mais";
}
else {
pontos.style.display = "none";
mais.style.display = "inline";
btLeia.value = "Leia Menos";
}
}
Podemos também ocultar e mostrar senhas em campos password, para isso, primeiro defina isso no HTML:
<label for="cSenha">Senha:</label><input type="password" name="tSenha" id="cSenha"/><br/>
<input type="checkbox" name="tMost" id="cMost" onclick="mostOculSenha()"/><label for="cMost">Mostrar Senha</label>
E no Javascript, criamos essa função:
function mostOculSenha() {
let senha = document.getElementById("cSenha");
if(senha.type == "password") {
senha.type = "text";
}
else {
senha.type = "password";
}
}
Para alerta de Caps Lock, podemos colocar ao lado do campo de senha, a seguinte tag span:
<span id="alerta">CAPS LOCK Ativado!</span>
Com o seguinte CSS:
#alerta {
display: none;
color: red;
}
E o seguinte Javascript:
document.addEventListener("keydown", function(event) {
let estado = event.getModifierState("CapsLock");
let alertaCaps = document.getElementById("alerta");
if(estado) {
alertaCaps.style.display = "inline";
}
else {
alertaCaps.style.display = "none";
}
});
Podemos também usar a tag output, assim:
<form oninput="res.value = num.value">
0<input type="range" name="num" min="0" max="100" value="50"/>100
<br/>
<output name="res">50</output>
</form>
O que permite utilizar assim:
<form oninput="res.value = parseInt(n1.value) + parseInt(n2.value)">
<input type="number" name="n1" min="0" max="100" value="0"/>
+
<input type="number" name="n2" min="0" max="100" value="0"/>
=
<output name="res">0</output>
</form>