Você está aqui: JavaScript ::: Dicas & Truques ::: Expressões Regulares |
Como retornar o valor original da string na qual uma pesquisa usando expressões regulares foi feitaQuantidade de visualizações: 6502 vezes |
<script language="javascript"> <!-- var pesquisa = /Java/gi; var frase = "Gosto de programar em Java e JavaScript"; var res = frase.match(pesquisa); document.write(res.toString() + "<br>"); document.write("A pesquisa foi feita na String: " + res.input); //--> </script> |
![]() |
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: 1864 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 ::: Arrays e Matrix (Vetores e Matrizes) |
Como remover elementos duplicados de um array em JavaScript usando as funções filter() e indexOf() do objeto ArrayQuantidade de visualizações: 4888 vezes |
Em várias ocasições temos códigos JavaScript envolvendo arrays (vetores, matrizes) e gostaríamos de eliminar os valores duplicados, ou seja, retornar um novo vetor sem elementos repetidos. Para isso podemos usar os métodos filter() e indexOf(). Como pode ser visto em dicas nesta mesma seção, o método filter() é usado para retornar apenas os elementos do vetor que se encaixem em uma determinada condição. O método indexOf(), por sua vez, retorna o índice da primeira ocorrência do elemento no vetor. Assim, a combinação desses dois métodos é perfeita para esta situação, ainda que você consiga fazer de outras formas. Veja o trecho de código a seguir: ---------------------------------------------------------------------- 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 removerDuplicados(valor, indice, vetor){ // o índice desse elemento é o primeiro encontrado // no vetor? if(indice == vetor.indexOf(valor)){ return true; } return false; } var valores = new Array(6, 6, 1, 7, 3, 7, 1, 7, 4, 3, 5); // vamos obter um vetor sem repetições var novoVetor = valores.filter(removerDuplicados); // vamos mostrar o resultado window.alert(novoVetor); </script> Execute este código e veja que apenas os valores únicos serão retornados. Note agora como o mesmo código pode ser escrito de forma mais reduzida: ---------------------------------------------------------------------- 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(8, 8, 1, 7, 3, 7, 1, 7, 8, 3, 5); // vamos obter um vetor sem repetições var novoVetor = valores.filter(function(val, ind, vet){ return vet.indexOf(val) == ind; }); // vamos mostrar o resultado window.alert(novoVetor); </script> |
JavaScript ::: Dicas & Truques ::: Validação de Formulários |
Como validar um endereço de e-mail usando expressões regulares em JavaScriptQuantidade de visualizações: 28883 vezes |
Nesta dica eu mostro como é possível validar um endereço de e-mail em JavaScript usando expressões regulares. Não se assuste com o tamanho da expressão regular. Ela pode ser um pouco complexa mesmo, mas é a mais completa que você vai encontrar na internet, e consegue validar praticamente todos os tipos de endereço de e-mails que o usuário poderá informar. É claro que você não pode se descuidar da validação do lado do servidor, pois há situações nas quais o usuário consegue burlar a validação somente do lado do cliente, ou seja, do lado do navegador. 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 ---------------------------------------------------------------------- <html> <head> <title>Estudando JavaScript</title> </head> <body> <form name="cadastro" onSubmit="return validar()"> Informe seu E-Mail:<br> <input type="text" name="email"> <input type="submit" value="Enviar!"> </form> <script language="JavaScript"> var valido; function validar(){ var str = document.cadastro.email.value; var filter = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i; if(filter.test(str)){ alert("Este endereço de e-mail é válido!"); valido = true; } else{ alert("Este endereço de e-mail não é válido!"); document.cadastro.email.focus(); valido = false; } return valido; } </script> </body> </html> |
JavaScript ::: URLs e Parâmetros de URLs ::: URLSearchParams |
Como obter a quantidade de parâmetros em um objeto URLSearchParams do JavaScriptQuantidade de visualizações: 983 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 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>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 ::: Geometria, Trigonometria e Figuras Geométricas |
Como calcular o coeficiente angular de uma reta em JavaScript dados dois pontos no plano cartesianoQuantidade de visualizações: 1772 vezes |
O Coeficiente Angular de uma reta é a variação, na vertical, ou seja, no eixo y, pela variação horizontal, no eixo x. Sim, isso mesmo. O coeficiente angular de uma reta tem tudo a ver com a derivada, que nada mais é que a taxa de variação de y em relação a x. Vamos começar analisando o seguinte gráfico, no qual temos dois pontos distintos no plano cartesiano: ![]() Veja que o segmento de reta AB passa pelos pontos A (x=3, y=6) e B (x=9, y=10). Dessa forma, a fórmula para obtenção do coeficiente angular m dessa reta é: \[\ \text{m} = \frac{y_2 - y_1}{x_2 - x_1} = \frac{\Delta y}{\Delta x} = tg \theta \] Note que __$\Delta y__$ e __$\Delta x__$ são as variações dos valores no eixo das abscissas e no eixo das ordenadas. No triângulo retângulo que desenhei acima, a variação __$\Delta y__$ se refere ao comprimento do cateto oposto e a variação __$\Delta y__$ se refere ao comprimento do cateto adjascente. Veja agora o trecho de código na linguagem JavaScript que solicita as coordenadas x e y dos dois pontos, efetua o cálculo e mostra o coeficiente angular m da reta que passa pelos dois pontos: ---------------------------------------------------------------------- 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"> // x e y do primeiro ponto var x1 = 3; var y1 = 6; // x e y do segundo ponto var x2 = 9; var y2 = 10; var m = (y2 - y1) / (x2 - x1); // mostramos o resultado document.writeln("O coeficiente angular é: " + m); </script> </body> </html> Ao executar este código JavaScript nós teremos o seguinte resultado: O coeficiente angular é: 0.6666666666666666 Veja agora como podemos calcular o coeficiente angular da reta que passa pelos dois pontos usando o Teorema de Pitágoras. Note que agora nós estamos tirando proveito da tangente do ângulo Theta (__$\theta__$), também chamado de ângulo Alfa ou Alpha (__$\alpha__$): ---------------------------------------------------------------------- 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"> // x e y do primeiro ponto var x1 = 3; var y1 = 6; // x e y do segundo ponto var x2 = 9; var y2 = 10; // vamos obter o comprimento do cateto oposto var cateto_oposto = y2 - y1; // e agora o cateto adjascente var cateto_adjascente = x2 - x1; // vamos obter o ângulo tetha, ou seja, a inclinação da hipetunesa // (em radianos, não se esqueça) var tetha = Math.atan2(cateto_oposto, cateto_adjascente); // e finalmente usamos a tangente desse ângulo para calcular // o coeficiente angular var tangente = Math.tan(tetha); // mostramos o resultado document.writeln("O coeficiente angular é: " + tangente); </script> </body> </html> Ao executar este código você verá que o resultado é o mesmo. No entanto, fique atento às propriedades do coeficiente angular da reta: 1) O coeficiente angular é positivo quando a reta for crescente, ou seja, m > 0; 2) O coeficiente angular é negativo quando a reta for decrescente, ou seja, m < 0; 3) Se a reta estiver na horizontal, ou seja, paralela ao eixo x, seu coeficiente angular é zero (0). 4) Se a reta estiver na vertical, ou seja, paralela ao eixo y, o coeficiente angular não existe. |
JavaScript ::: Dicas & Truques ::: Data e Hora |
Como formatar datas em JavaScript de acordo com as configurações do computador do usuário usando a função toLocaleDateString()Quantidade de visualizações: 7412 vezes |
Nesta dica mostrarei como podemos usar a função toLocaleDateString() do objeto Date do JavaScript para formatar e exibir a data atual (ou uma data construída) usando as configurações regionais do computador do usuário. Veja a página HTML completa 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> <html> <head> <title>Datas em JavaScript</title> </head> <body> <script type="text/javascript"> // vamos obter a data atual var data = new Date(); // formatamos a data var data_formatada = data.toLocaleDateString(); // e mostramos o resultado document.write("Hoje é: " + data_formatada); </script> </body> </html> Ao executar este código JavaScript nós teremos o seguinte resultado: Hoje é: 04/02/2022 |
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: 8331 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: ---------------------------------------------------------------------- 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> <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"); // vamos obter o tipo de nó do primeiro filho deste elemento tipo = elem.firstChild.nodeType; // vamos mostrar o resultado window.alert("O tipo deste elemento é: " + tipo); } </script> </head> <body> <p id="paragrafo">Sou um parágrafo</p> <span id="frase">Veja esta frase</span> <br><button onclick="obterNodeType()">Obter tipo do nó (nodeType)</button> </body> </html> 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. |
JavaScript ::: Dicas & Truques ::: Cookies |
Como verificar se cookies estão habilitados no navegador do usuário usando JavaScriptQuantidade de visualizações: 1 vezes |
Em algumas situações nós gostaríamos de checar se os cookies estão habilitados no browser do usuário antes de gravarmos alguma informação. Nesta dica eu mostro como isso pode ser feito. Note que tudo que precisamos fazer é criar um cookie temporário e tentar acessá-lo em seguida. Veja o código completo para o exemplo (incluindo a página 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 ---------------------------------------------------------------------- <!doctype html> <html> <head> <title>Estudos JavaScript</title> </head> <body> <script type="text/javascript"> // vamos criar um cookie temporário var cookieTemp = (new Date()).getTime() + ''; // colocamos o cookie como parte do documento document.cookie = "cookieTemp=" + cookieTemp + "; path=/"; // o cookie existe? if (document.cookie.indexOf(cookieTemp, 0) < 0){ window.alert("Os cookies não estão habilitados no seu navegador"); } else{ window.alert("Os cookies estão habilitados no seu navegador"); } </script> </body> </html> Ao executar este código teremos o seguinte resultado: Os cookies estão habilitados no seu navegador. |
Vamos testar seus conhecimentos em Python |
Qual a sintaxe correta para mostrar o tipo de uma variável em Python?a = 45 print("O tipo da variável é: {0}".format(______________)) A) typeOf(a) B) Type(a) C) typeof(a) D) type(a) E) type a Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Hidrologia |
(IDECAN - 2021 - Perito Criminal de 1ª Classe (PEFOCE)/Engenharia Civil) O aparelho utilizado para medição e registro de precipitações é o A) pluviômetro. B) fluviógrafo. C) pluviógrafo. D) limnímetro. E) limnígrafo. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em |
Vantagens e Desvantagens do Concreto Armado O concreto armado é composto pelo concreto simples e por barras de aço estrategicamente posicionadas no interior do concreto. O trabalho conjunto é garantido pela aderência entre os materiais que o compõem e, com isso, o concreto armado une a resistência à compressão do concreto com a resistência à tração do aço. Com relação às características do concreto armado, assinale a alternativa correta: A) O concreto armado tem elevada resistência à compressão e baixa resistência à tração. B) As armaduras colocadas na parte inferior de vigas de concreto absorvem os esforços de tração de uma peça sujeita à flexão e controlam o aparecimento de fissuras. C) As armaduras de peças de concreto armado se limitam a absorver os esforços gerados por solicitações normais de tração. D) É preciso ter cuidado ao utilizar o concreto e o aço em conjunto, já que são materiais distintos. E) O concreto armado surgiu apenas no século XX, quando passou a ser utilizado também no Brasil. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Ética e Legislação Profissional |
Responsabilidade civil dos prepostos e preponentes Com relação as definições do preposto, assinale a alternativa correta. A) O preposto pode negociar por conta própria ou de terceiro, e participar indiretamente de operação idêntica a que lhe foi cometida. B) O preposto não pode, sem autorização escrita, fazer-se substituir no desempenho da preposição, sob pena de responder pessoalmente pelos atos do substituto e pelas obrigações por ele contraídas. C) Considera-se inválida a entrega de papéis, bens ou valores ao preposto, encarregado pelo preponente, se este os recebeu sem protesto. D) As limitações contidas na outorga de poderes podem ser opostas a terceiros, dependem do arquivamento e averbação do instrumento no Registro Público de Empresas Mercantis. E) No exercício de suas funções, os prepostos são pessoalmente responsáveis, perante terceiros, pelos atos culposos e atos dolosos. Verificar Resposta Estudar Cards Todas as Questões |
Vamos testar seus conhecimentos em Ética e Legislação Profissional |
Princípios específicos do Direito do Consumidor Assinale, abaixo, a única alternativa correta. A) A informação não é direito básico do consumidor. B) O reconhecimento da vulnerabilidade do consumidor é um dos princípios do Código de Defesa do Consumidor. C) O Código de Defesa do Consumidor reconhece e dá tratamento isonômico ao consumidor e ao fornecedor. D) O Código de Defesa do Consumidor é considerado lei geral, enquanto que o Código Civil lei especial. E) É válida cláusula elaborada pelo fornecedor, onde expressamente impeça o consumidor, que venha a celebrá-lo, de reclamar seus direitos perante o Judiciário. 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 |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
1º lugar: Java |