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? |
![]() |
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 |
![]() Entre em contato comigo para, juntos, vermos em que posso contribuir para resolver ou agilizar o desenvolvimento de seus códigos.
|
![]() 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 |
![]() Diga 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 |
![]() Tenha 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 |