![]() |
|
||||
![]() 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 |
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: 2601 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: <!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 ...... Como desafio, que tal colocar um outro botão para iniciar o timer novamente? |
![]() |
JavaScript ::: Dicas & Truques ::: Data e Hora |
Como calcular a quantidade de dias restantes para uma determinada data em JavaScriptQuantidade de visualizações: 9015 vezes |
Em algumas situações nós precisamos calcular quantos dias faltam para uma determinada data em JavaScript. Por exemplo, você gostaria de saber quantos dias ainda falta para o Natal, ou para o seu aniversário? Veja a página HTML completa para o exemplo: <!doctype html> <html> <head> <title>Data e hora em JavaScript</title> </head> <body> <script type="text/javascript"> // vamos obter a data de hoje var hoje = new Date(); // vamos construir a data do Natal var data_natal = new Date(hoje.getFullYear(), 11, 25); // quantidade de milisegundos em um dia var dia = 1000 * 60 * 60 * 24; ...... Ao executar este código JavaScript nós teremos o seguinte resultado: Hoje é: 06/02/2023 Faltam 322 dias para o natal. |
JavaScript ::: Dicas & Truques ::: Arrays e Matrix (Vetores e Matrizes) |
Como retornar apenas os três primeiros elementos de um array em JavaScript usando a função slice() do objeto ArrayQuantidade de visualizações: 8753 vezes |
Nesta dica eu mostrarei como é possível usar o método slice() do objeto Array da linguagem JavaScript para retornar um ou mais elementos de um vetor, como um novo objeto array. Para isso só precisamos fornecer ao método o índice inicial e o índice final (não incluindo) dos elementos a serem retornados. É importante observar que o método slice() não modifica o vetor original. Veja o exemplo completo: <html> <head> <title>Estudando JavaScript</title> </head> <body> <script type="text/javascript"> var valores = new Array(1, 2, 3, 4, 5, 6, 7); document.write("Valores no vetor: " + valores + "<br>"); ...... Ao executarmos este código nós teremos o seguinte resultado: Valores no vetor: 1,2,3,4,5,6,7 Retornando os três primeiros elementos Valores no novo vetor: 1,2,3 |
JavaScript ::: DOM (Document Object Model) ::: Navegação e Pesquisa de Nós (Nodes) |
Como obter o tipo de um nó no DOM (Document Object Model) usando a propriedade nodeType a partir de seus códigos JavaScriptQuantidade de visualizações: 8321 vezes |
Como obter o tipo de um nó no DOM (Document Object Model) usando a propriedade nodeType a partir de seus códigos JavaScript A propriedade nodeType, definida no World Wide Web Consortium (W3C) Document Object Model (DOM) Level 1, pode ser usada quando precisamos obter o tipo de um determinado nó (node) na hierarquia de elementos HTML no DOM (Document Object Model). Esta propriedade retorna um valor inteiro indicando o tipo de nó sendo testado. Os valores mais comuns são 1 (nó elemento) e 3 (nó texto). Veja uma página HTML na qual temos um parágrafo e um elemento span. Na primeira vez nós vamos obter uma referência ao parágrafo e testar o tipo do nó. Na segunda vez nós obtemos uma referência ao primeiro nó filho do elemento span, o que resultará em seu conteúdo sendo testado. Veja: <html> <head> <title>Estudos JavaScript</title> <script type="text/javascript"> function obterNodeType(){ // vamos obter uma referência ao parágrafo com o id "paragrafo" var elem = document.getElementById("paragrafo"); // vamos obter o tipo de nó deste elemento var tipo = elem.nodeType; // vamos mostrar o resultado window.alert("O tipo deste elemento é: " + tipo); // vamos obter uma referência ao span com o id "frase" elem = document.getElementById("frase"); ...... Note que esta propriedade é somente-leitura, ou seja, não podemos modificar seu valor em tempo de execução. A propriedade nodeType pode ser obtida a partir dos seguintes elementos: a, abbr, acronym, address, applet, area, b, base, basefont, bdo, bgsound, big, blink, blockquote, body, br, button, caption, center, cite, code, col, colgroup, comment, dd, del, dfn, dir, div, dl, dt, em, embed, fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input:button, input:checkbox, input:file, input:hidden, input:image, input:password, input:radio, input:range, input:reset, input:search, input:submit, input:text, ins, isindex, kbd, keygen, label, legend, li, link, listing, map, marquee, menu, meta, nobr, noframes, noscript, object, ol, optgroup, option, p, param, plaintext, pre, q, rt, ruby, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var, wbr, xml e xmp. Esta dica foi escrita e testada no Internet Explorer 8 e Firefox 3.6. |
Desafios, Exercícios e Algoritmos Resolvidos de JavaScript |
Veja mais Dicas e truques de JavaScript |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
1º lugar: Java |