Você está aqui: 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: 1863 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 para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <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 para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <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 ::: Matemática e Estatística |
Como arredondar um valor numérico de ponto-flutuante para cima usando a função ceil() do objeto Math do JavaScriptQuantidade de visualizações: 14405 vezes |
A função ceil() do objeto Math do JavaScript nos permite arrendondar um valor float ou double para o próximo inteiro maior. Dessa forma, um valor 1.45 será convertido para 2. Veja o código completo para o exemplo: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <html> <head> <title>Estudando JavaScript</title> </head> <body> <script type="text/javascript"> var valor = 2.85; document.write("O resultado do arredondamento de " + valor + " é " + Math.ceil(valor)); </script> </body> </html> Ao executarmos este código nós teremos o seguinte resultado: O resultado do arredondamento de 2.85 é 3 |
JavaScript ::: Fundamentos da Linguagem ::: Estruturas de Controle |
JavaScript para leigos - Como usar o laço while da linguagem JavaScriptQuantidade de visualizações: 7214 vezes |
O laço while (também chamado de loop ou laço enquanto) da linguagem JavaScript é usado quando queremos repetir uma instrução ou um grupo de instruções ENQUANTO uma condição for satisfeita. Veja sua sintáxe:---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- while(condição){ // uma instrução ou grupo de instruções } A condição pode ser qualquer expressão que resulte em um valor boolean (true ou false). Note também que o teste condicional é feito antes de cada iteração (repetição) do laço. Isso faz com que este laço, dependendo da condição inicial, possa nunca ser executado. Veja um trecho de código no qual usamos o laço while para contar de 0 até 10: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <html> <head> <title>Estudos JavaScript</title> </head> <body> <script type="text/javascript"> var i = 0; while(i <= 10){ document.write(i + "<br>"); i++; } </script> </body> </html> Ao executarmos este código teremos o seguinte resultado: 0 1 2 3 4 5 6 7 8 9 10 Veja que declaramos uma variável de controle i e a inicializamos com o valor 0. Na entrada do laço nós verificamos se seu valor é menor ou igual a 10. Como esta condição é satisfeita, o laço é executado pela primeira vez. No corpo do laço nós exibimos o valor da variável de controle e a incrementamos em 1. Agora o ciclo se repete. A condição é testada novamente. Se esta for satisfeita, o código entra no corpo do laço novamente e assim por diante. Veja agora como modificar o laço while anterior para exibir os números de 10 até 0: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <html> <head> <title>Estudos JavaScript</title> </head> <body> <script type="text/javascript"> var i = 10; while(i >= 0){ document.write(i + "<br>"); i--; } </script> </body> </html> Agora o resultado do código será: 10 9 8 7 6 5 4 3 2 1 0 Esta dica foi escrita e testada no Internet Explorer 8 e Firefox 3.6. |
JavaScript ::: Dicas & Truques ::: Miscelâneas |
JavaScript para iniciantes - Como usar o método escape() para codificar uma frase em JavaScriptQuantidade de visualizações: 12623 vezes |
A função escape() da linguagem JavaScript é usada quando precisamos codificar uma palavra, frase ou texto, ou seja, uma string. Em geral nós a usamos para codificar caracteres especiais em uma string, com a exceção dos caracteres e símbolos "* @ - _ + . /". Veja um exemplo completo: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <html> <head> <title>Estudando JavaScript</title> </head> <body> <script type="text/javascript"> var frase = "Programar em JavaScript é muito bom"; document.write("Original: " + frase + "<br>"); document.write("Codificada: " + escape(frase)); </script> </body> </html> Ao executarmos este código nós teremos o seguinte resultado: Original: Programar em JavaScript é muito bom Codificada: Programar%20em%20JavaScript %20%E9%20muito%20bom Lembre-se de que o objetivo da função escape() é tornar uma string portável, ou seja, que pode ser transmitida pela rede para qualquer computador que suportar os caracteres ASCII. Nota: A função escape() foi marcada como desatualizada (deprecated) a partir do JavaScript 1.5. Em vez dela nós devemos usar as funções encodeURI() ou encodeURIComponent(). |
JavaScript ::: Dicas & Truques ::: Arrays e Matrix (Vetores e Matrizes) |
Como adicionar um ou mais elementos ao início de um vetor JavaScript usando o método unshift() do objeto Array - [Revisado]Quantidade de visualizações: 7136 vezes |
O método unshift(), presente no JavaScript desde sua versão 1.2, é usado quando queremos adicionar um ou mais elementos no início de um vetor (array). Veja:---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <script type="text/javascript"> var valores = new Array(1, 2, 3, 4, 5); document.write("Valores no vetor: " + valores + "<br>"); valores.unshift(6); document.write("Novos valores no vetor: " + valores); </script> Aqui nós adicionamos o valor 6 no início do vetor. Veja agora como adicionar três valores no início do vetor: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <script type="text/javascript"> var valores = new Array(1, 2, 3, 4, 5); window.alert("Valores no vetor: " + valores); valores.unshift(6, 7, 8); window.alert("Novos valores no vetor: " + valores); </script> É importante observar que a função unshift() modifica o vetor original, e seu retorno é a nova quantidade de elementos no vetor. |
JavaScript ::: Dicas & Truques ::: Data e Hora |
Como retornar a diferença em dias entre duas datas usando JavaScriptQuantidade de visualizações: 18598 vezes |
Nesta dica mostrarei como podemos usar a linguagem JavaScript para calcular a quantidade de dias, ou seja, a diferença de dias entre duas datas. Note que o truque é subtrair um objeto Date de outro objeto Date. Veja o código JavaScript completo para o exemplo: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <!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"> function diferencaDias(data1, data2){ var dif = Date.UTC(data1.getYear(),data1.getMonth(),data1.getDate(),0,0,0) - Date.UTC(data2.getYear(),data2.getMonth(),data2.getDate(),0,0,0); return Math.abs((dif / 1000 / 60 / 60 / 24)); } // datas no formato ano/mês/dia document.write("A diferença de dias é: " + diferencaDias(new Date(2007, 0, 10), new Date(2007, 0, 20)) + " dias."); </script> </body> </html> Ao executar este código JavaScript nós teremos o seguinte resultado: A diferença de dias é: 10 dias. |
JavaScript ::: Dicas & Truques ::: Validação de Formulários |
Validação de formulários em JavaScript - Como validar um formulário contendo usuário e senha em JavaScriptQuantidade de visualizações: 34101 vezes |
A validação de formulários em JavaScript é uma das primeiras técnicas que devemos aprender, pois ela avita a perda de tempo que ocorre com a validação somente do lado do servidor (não se esqueça: as duas são necessárias). Ao validar no navegador, o usuário já vai as devidas correções sem ter que esperar o processamento de seus dados para, só então, ser comunicado de que alguma informação está incorreta. Assim, nesta dica, mostrarei como podemos validar um nome de usuário e senha em JavaScript. Deixei o exemplo bem mais, mas você pode melhorá-lo, adicionando até expressões regulares para ampliar as situações que podem ocorrer. O código abaixo vai gerar o seguinte formulário HTML: ![]() E agora o código completo para o exemplo: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <html> <head> <title>Estudando JavaScript</title> <style type="text/css"> input {margin-bottom: 3px; margin-top: 3px} </style> <script language="JavaScript"> function validar(){ // só permitirá o envio se os dados forem fornecidos if(document.login.nome.value == ""){ alert("Forneça o nome do usuário"); document.login.nome.focus(); return false; } else if(document.login.senha.value == ""){ alert("Forneça a senha do usuário"); document.login.senha.focus(); return false; } else{ return true; } } </script> </head> <body> <form name="login" action="gravar.php" method="post" onsubmit="return validar()"> Usuário:<br> <input type="text" id="nome" name="nome"><br> Senha:<br> <input type="password" id="senha" name="senha"><br> <input type="submit" value="Entrar!"> </form> </body> </html> |
JavaScript ::: DOM (Document Object Model) ::: document Object |
JavaScript DOM - Como usar o objeto document em seus códigos JavaScriptQuantidade de visualizações: 7862 vezes |
O objeto document representa a página HTML e fornece possibilidades para acessar, criar e manipular todos os elementos HTML no documento. Este objeto está logo abaixo do objeto window na hierarquia do DOM (Document Object Model), ou seja, podemos dizer que este elemento é filho do objeto window. Assim, para acessá-lo a partir de nossos códigos JavaScript podemos usar window.document ou simplesmente document. Veja:---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <html> <head> <title>Estudos JavaScript</title> </head> <body> <script type="text/javascript"> // vamos obter o título desta página var titulo = window.document.title; // vamos exibir o resultado em uma mensagem alert window.alert("O título da página é: " + titulo); </script> </body> </html> Neste exemplo nós usamos o objeto window para obter o objeto document. O passo seguinte foi obter o valor de sua propriedade title, que é usada para definir ou obter o título da página HTML. Para obter um elemento em um documento HTML nós podemos usar as coleções (all, anchors, applets, etc), os métodos getElementById(), getElementsByName() e getElementsByTagName() e algumas outras propriedades e métodos. Se precisarmos acessar o elemento body ou html, podemos usar as propriedades document.documentElement e document.body. Veja um trecho de código no qual acessamos o corpo do documento HTML e definimos sua cor de fundo: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <script type="text/javascript"> // vamos definir a cor de fundo da página HTML window.document.body.bgColor = "Beige"; </script> Uma vez que o objeto document é um objeto contâiner para um documento HTML, ele fornece métodos para a crição de novos elementos (por meio do método createElement()), nós textos (createTextNode()) e nós de comentários (createComment()). Depois que um nó (node) é criado, ele pode ser inserido no documento por meio de chamadas aos métodos appendChild() e insertBefore(). Veja um trecho de código no qual usamos o método createElement() para criar um novo elemento div e logo em seguida usamos o método appendChild() para adicionar o elemento recém-criado no final do documento HTML: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <html> <head> <title>Estudos JavaScript</title> </head> <body> <script type="text/javascript"> // vamos criar um novo elemento div var elem = document.createElement("div"); elem.innerHTML = "Sou uma div criada dinâmicamente"; elem.style.backgroundColor = "beige"; // vamos adicionar este novo elemento no final do documento document.body.appendChild(elem); </script> </body> </html> Os documentos HTML contidos em elementos frames e iframes possuem seus próprios objetos document. Para obter tais objetos, devemos usar a propriedade contentDocument. |
JavaScript ::: Dicas & Truques ::: Set (Conjunto) |
Como retornar elementos presentes no primeiro vetor e não presentes no segundo vetor em JavaScript usando o objeto SetQuantidade de visualizações: 1398 vezes |
Este é um código muito interessante de ser feito em JavaScript. Dados dois arrays a e b, temos que retornar os números que estão presentes no primeiro array, mas que não estão presentes no segundo array. Este código pode ser escrito usando diversas abordagens. Nesta dica mostrarei como resolvê-lo usando um objeto Set, adicionado à linguagem JavaScript na revisão ECMAScript 2015, também chamada de ES6 e ECMAScript 6. Vamos ao código então: ---------------------------------------------------------------------- Se precisar de ajuda para ajustar o código abaixo de acordo com as suas necessidades, chama a gente no WhatsApp +55 (62) 98553-6711 (Osmar) Ah, e se puder, faça uma DOAÇÃO de qualquer valor para nos ajudar a manter o site livre de anúncios. Ficaremos eternamente gratos ;-) Nosso PIX é: osmar@arquivodecodigos.com.br ---------------------------------------------------------------------- <html> <head> <title>O objeto Set do JavaScript</title> </head> <body> <script type="text/javascript"> // primeiro vetor var a = [4, 8, 1, 23, 65]; // segundo vetor var b = [23, 8, 90, 3, 7]; // vetor resultante var c = []; // criamos um objeto Set e guardamos nele os // elementos do segundo vetor var set = new Set(); for (var i = 0; i < b.length; i++){ set.add(b[i]); } // agora varremos o primeiro vetor e usamos // o método has() do objeto Set para verificar se // o valor não está contido nele for (var i = 0; i < a.length; i++){ if(!set.has(a[i])){ c.push(a[i]); } } document.writeln("Primeiro vetor: " + a); document.writeln("<br>Segundo vetor: " + b); document.writeln("<br>Resultado: " + c); </script> </body> </html> Ao executar este código JavaScript nós teremos o seguinte resultado: Primeiro vetor: 4, 8, 1, 23, 65 Segundo vetor: 23, 8, 90, 3, 7 Resultado: 4, 1, 65 Note que os valores 4, 1 e 65 estão presentes no primeiro array mas não estão presentes no segundo. |
Vamos testar seus conhecimentos em Engenharia Civil - Construção Civil |
Processos e técnicas construtivas de instalações elétricas e hidráulicas O projetista deve prezar pela compatibilização de projetos, de modo que os dispositivos elétricos e hidráulicos não se sobreponham aos elementos estruturais e arquitetônicos. Analise as afirmativas a seguir, referentes à compatibilização de projetos e à sua relação com as instalações elétricas. I. As instalações elétricas aparentes devem, sempre, ser executadas com eletrodutos flexíveis, pois estes são mais adequados à geometria do substrato quando comparados aos eletrodutos rígidos. II. A realização de cortes e rasgos em paredes de alvenaria, muito comum no cotidiano da engenharia, pode prejudicar o desempenho e a durabilidade do elemento de vedação e do ambiente interno da edificação. III. As instalações elétricas podem ser executadas de forma aparente, sob a laje de concreto, sendo recobertas, em seguida, por forros suspensos de gesso, de modo a manter a instalação escondida. IV. As instalações elétricas podem ser executadas no interior de paredes drywall; contudo, essa técnica resulta em elevado desperdício de material, em virtude dos cortes e rasgos nas placas de gesso acartonado. Assinale a alternativa que apresenta somente a(s) afirmativa(s) correta(s). A) Apenas a afirmativa I está correta. B) Apenas a afirmativa III está correta. C) Apenas as afirmativas II e III estão corretas. D) Apenas as afirmativas I, II e IV estão corretas. E) As afirmativas I, II, III e IV estão corretas. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Python |
Qual o resultado da execução do seguinte código Python?soma = 0 for i in range(0, 10): soma = soma + 3 if i > 4: break print("A soma é: {0}".format(soma)) A) A soma é: 9 B) A soma é: 19 C) A soma é: 24 D) A soma é: 18 E) A soma é: 28 Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em JavaScript |
Qual é o local correto para a inserção de códigos JavaScript em um documento HTML? A) Seção <head> B) Seção <body> C) Os códigos JavaScript podem ser colocados tanto na seção <head> quanto na seção <body> Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Ética e Legislação Profissional |
Responsabilidade civil no código de defesa do consumidor Qual é o prazo decadencial previsto em lei para reclamar o vício do produto, considerando que o vício está em um automóvel? A) 5 dias. B) 15 dias. C) 30 dias. D) 60 dias. E) 90 dias. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em AutoCAD Civil 3D |
Questões de Certificação em AutoCAD Civil 3D Quando selecionamos um objeto do Civil 3D na janela de desenho, uma nova aba (ou ribbon) é exibida, com opções relacionadas ao tipo de objeto selecionado. Estamos falando da aba: A) Modify tab. B) Insert tab. C) Context tab. D) Manage tab. E) Analyze tab. Verificar Resposta Estudar Cards Todas as Questões |
Desafios, Exercícios e Algoritmos Resolvidos de JavaScript |
Veja mais Dicas e truques de JavaScript |
Dicas e truques de outras linguagens |
JavaScript - JavaScript Avançado - Como escrever uma função JavaScript que aceita um número variável de argumentos |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
1º lugar: Java |