 |
|
|
|
Você está aqui: JavaScript ::: Dicas & Truques ::: Timers em JavaScript |
Como parar a execução de um timer setInterval() usando a função clearInterval() do objeto window do JavaScriptQuantidade de visualizações: 2472 vezes |
|
Como vimos em dicas anteriores, o método setInterval() do objeto window da linguagem JavaScript é usado quando queremos criar um timer que será repetido indefinidamente, ou seja, enquanto a página HTML estiver aberta. Porém, em alguns casos, pode ser necessário interromper essa repetição. Para isso podemos usar o método clearInterval(), também do objeto window. Este método recebe o identificador do timer e, quando chamado, faz com que a repetição seja interrompida. Vamos ver um exemplo? Na página abaixo nós temos um timer setInterval() usado para exibir um relógio digital que é atualizado a cada segundo. Temos também um botão que, quando clicado, interromperá a repetição do timer. Veja o código completo: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!doctype html>
<html>
<head>
<title>O método setInterval() do JavaScript</title>
</head>
<body>
<h2>Clique no botão para parar o timer</h2>
<div id="relogio">00:00:00</div>
<button onClick="parar()">Parar</button>
<script type="text/javascript">
// atualiza o relógio a cada segundo
var timer = setInterval(relogioDigital, 1000);
// função que permite exibir a hora atual em
// um elemento DIV
function relogioDigital(){
// obtém a data e hora atual
var agora = new Date();
// queremos exibir apenas as horas
var horas = agora.toLocaleTimeString();
// exibimos o resultado
document.getElementById("relogio").innerHTML = horas;
}
function parar(){
window.clearInterval(timer);
window.alert("O timer foi interrompido.");
}
</script>
</body>
</html>
Como desafio, que tal colocar um outro botão para iniciar o timer novamente? |
 Link para compartilhar na Internet ou com seus amigos: |
JavaScript ::: Dicas & Truques ::: Strings e Caracteres |
Como remover todos os espaços de uma string em JavaScript usando uma função personalizada remover_espacos()Quantidade de visualizações: 2 vezes |
|
Nesta dica mostrarei como é possível escrever uma função JavaScript que remove todos os espaços de uma string. É claro que você poderá, com uma pequena modificação, alterá-la para que ela substitua quais outros caracteres. Esse é também um bom exercício para a criação de funções na linguagem JavaScript. Veja o código completo: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!doctype html>
<html>
<head>
<title>Estudos JavaScript</title>
</head>
<body>
<script type="text/javascript">
// função personalizada que remove os
// espaços de uma string
function remover_espacos(str){
var r = "";
for(var i = 0; i < str.length; i++){
if(str.charAt(i) != ' '){
r += str.charAt(i);
}
}
return r;
}
</script>
<script type="text/javascript">
// vamos mostrar a frase normal
var frase = "Gosto muito de JavaScript e HTML";
document.write(frase + "<br>");
// vamos remover os espaços
frase = remover_espacos(frase);
// e agora vamos mostrar o resultado
document.write(frase);
</script>
</body>
</html>
Ao executar este código nós teremos o seguinte resultado: Gosto muito de JavaScript e HTML GostomuitodeJavaScripteHTML |
JavaScript ::: Dicas & Truques ::: Arrays e Matrix (Vetores e Matrizes) |
Como chamar uma função de callback para os elementos individuais de um array usando a função forEach() - Vetores e matrizes em JavaScriptQuantidade de visualizações: 1741 vezes |
|
O método forEach(), adicionado à linguagem JavaScript por meio do ECMAScript 5 (JavaScript 5, ECMAScript 2009, ES5) é usado quando queremos acessar os elementos de um vetor individualmente e chamar, para cada um deles, uma função de callback personalizada. Veja no trecho de código abaixo como usar a função forEach() para obter a soma de todos os elementos maiores ou iguais a 20: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<script type="text/javascript">
function obterSoma(valor, indice, vetor){
if(valor >= 20){
soma = soma + valor;
}
}
var valores = new Array(21, 5, 30, 7, 12, 3);
// vamos obter a soma dos valores maiores ou iguais a 20
var soma = 0;
// percorremos os elementos do vetor individualmente
valores.forEach(obterSoma);
window.alert("A soma é: " + soma);
</script>
Uma função passada para o método forEach() pode conter os seguintes argumentos (nessa mesma ordem): a) O valor do item; b) O índice do item (opcional); c) O vetor a partir do qual o método forEach() está sendo chamado (opcional). Veja mais um código no qual obtemos a soma dos elementos cujos valores sejam maiores que seu antecessor (com exceção do primeiro elemento): ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<script type="text/javascript">
function obterSoma(valor, indice, vetor){
if(indice == 0){
soma = soma + valor;
}
else{
if(valor > vetor[indice - 1]){
soma = soma + valor;
}
}
}
var valores = new Array(8, 5, 30, 7, 12, 3);
// vamos dos elementos cujos valores sejam
// maiores que seu antecessor (com exceção do
// primeiro elemento)
var soma = 0;
// percorremos os elementos do vetor individualmente
valores.forEach(obterSoma);
window.alert("A soma é: " + soma);
</script>
O resultado será 50, pois obtemos a soma dos valores 8, 30 e 12. |
JavaScript ::: Dicas & Truques ::: Formatação de datas, strings e números |
Como exibir apenas dois dígitos após o ponto decimal em JavaScript usando a função toFixed() do objeto NumberQuantidade de visualizações: 12412 vezes |
|
Nesta dica mostrarei como podemos usar a função toFixed() do objeto Number da linguagem JavaScript para convertermos um valor de ponto flutuante em uma string (em texto). Durante a conversão nós vamos especificar que queremos apenas dois dígitos depois do ponto decimal. Veja o código JavaScript completo para o exemplo: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Estudos JavaScript</title>
</head>
<body>
<script type="text/javascript">
// vamos obter o valor de
// PI 3.141592653589793
var valor = Math.PI;
document.write("PI: " + valor);
// agora vamos converter o valor de PI para
// string e arredondar para o número de
// decimais desejados
var res = valor.toFixed(2);
document.write("<br>Resultado: " + res);
</script>
</body>
</html>
Ao executar este código JavaScript nós teremos o seguinte resultado: PI: 3.141592653589793 Resultado: 3.14 |
JavaScript ::: URLs e Parâmetros de URLs ::: URLSearchParams |
Como obter a quantidade de parâmetros em um objeto URLSearchParams do JavaScriptQuantidade de visualizações: 898 vezes |
|
Em algumas situações nós precisamos saber quantos parâmetros de URL foram informados em um objeto URLSearchParams. Para isso nós só precisamos converter o Map representado por URLSearchParams em um array bidimensional usando Array.from(). A partir daí é só chamar a propriedade length do array. Veja o código completo para o exemplo: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Acessando parâmetros de URL</title>
</head>
<body>
<script type="text/javascript">
// vamos obter a URL atual e seus parâmetros GET
var parametros = new URLSearchParams(window.location.search);
window.alert("Quantidade de parâmetros: " + Array.from(parametros).length);
</script>
</body>
</html>
Ao executar este exemplo JavaScript com a URL: http://localhost/estudos/index.php?nome=Osmar&idade=39 nós teremos uma mensagem window.alert() com o seguinte texto: Quantidade de parâmetros: 2 |
JavaScript ::: Dicas & Truques ::: Trigonometria - Funções Trigonométricas |
Como calcular a área de um círculo em JavaScript dado o raio do círculoQuantidade de visualizações: 6964 vezes |
A área de um círculo pode ser calculada por meio do produto entre a constante PI e a medida do raio ao quadrado (r2). Comece analisando a figura abaixo: Sendo assim, temos a seguinte fórmula:  Onde A é a área, PI equivale a 3,14 (aproximadamente) e r é o raio do círculo. A área do círculo é igual a calcular a área da circunferência. Lembrando que a medida da área do círculo e da circunferência é uma medida aproximada. O raio é a medida que vai do centro até um ponto da extremidade do círculo. O diâmetro é a medida equivalente ao dobro da medida do raio, passando pelo centro do círculo e dividindo-o em duas partes. A medida do diâmetro é 2 * PI. Veja agora um código JavaScript completo (incluindo a página HTML) que calcula a área de um círculo mediante a informação do raio: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!doctype html>
<html>
<head>
<title>Estudos JavaScript</title>
</head>
<body>
<script type="text/javascript">
// efetua a leitura do raio
var raio = parseFloat(window.prompt("Informe o raio do círculo:"));
// calcula a área
var area = Math.PI * Math.pow(raio, 2);
// mostra o resultado
document.writeln("A area do círculo de raio " +
raio + " é igual a " + area);
</script>
</body>
</html>
Ao executarmos este código nós teremos o seguinte resultado: Informe o raio do círculo: 5 A area do círculo de raio 5 é igual a 78.53981633974483 |
Desafios, Exercícios e Algoritmos Resolvidos de JavaScript |
Veja mais Dicas e truques de JavaScript |
Dicas e truques de outras linguagens |
|
Java - Apostila de Java - Como retornar uma substring em Java usando o método substring() da classe String JavaScript - Como retornar o tamanho de uma string em JavaScript usando a propriedade length do objeto String |
Quem Somos |
Programador Freelancer - Full Stack Developer, Professional Java Developer, PHP, C/C++, Python Programmer, wxWidgets Professional C++ Programmer, Freelance Programmer. Formado em Ciência da Computação pela UNIP (Universidade Paulista Campus Goiânia) e cursando Engenharia Civil pela PUC-Goiás. Possuo conhecimentos avançados de Java, Python, JavaScript, C, C++, PHP, C#, VB.NET, Delphi, Android, Perl, e várias tecnologias que envolvem o desenvolvimento web, desktop, front-end e back-end. Atuo há mais de 20 anos como programador freelancer, atendendo clientes no Brasil, Portugal, Argentina e vários outros paises.
Entre em contato comigo para, juntos, vermos em que posso contribuir para resolver ou agilizar o desenvolvimento de seus códigos.
|
Programador Freelancer - Formado em Sistemas de Informação pela Faculdade Delta, Pós graduado em Engenharia de Software (PUC MINAS), Pós graduado Marketing Digital (IGTI) com ênfase em Growth Hacking. Mais de 15 anos de experiência em programação Web. Marketing Digital focado em desempenho, desenvolvimento de estratégia competitiva, analise de concorrência, SEO, webvitals, e Adwords, Métricas de retorno. Especialista Google Certificado desde 2011 Possui domínio nas linguagens PHP, C#, JavaScript, MySQL e frameworks Laravel, jQuery, flutter. Atualmente aluno de mestrado em Ciência da Computação (UFG)
Não basta ter um site. É necessário ter um site que é localizado e converte usuários em clientes. Se sua página não faz isso, Fale comigo e vamos fazer uma analise e conseguir resultados mais satisfatórios..
|
Linguagens Mais Populares |
|
1º lugar: Java |
Códigos Fonte |
 Software de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimentoDiga adeus às planilhas do Excel e tenha 100% de controle sobre suas contas a pagar e a receber, gestão de receitas e despesas, cadastro de clientes e fornecedores com fotos e histórico de atendimentos. Código fonte completo e funcional, com instruções para instalação e configuração do banco de dados MySQL. Fácil de modificar e adicionar novas funcionalidades. Clique aqui e saiba mais |
 Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidadesTenha o seu próprio sistema de controle de estoque web. com cadastro de produtos, categorias, fornecedores, entradas e saídas de produtos, com relatórios por data, margem de lucro e muito mais. Código simples e fácil de modificar. Acompanha instruções para instalação e criação do banco de dados MySQL. Clique aqui e saiba mais |
