Você está aqui: JavaScript ::: Dicas & Truques ::: Matemática e Estatística |
Como calcular porcentagem em JavaScript - Eu tenho um valor de R$ 500,00 que aumentou para R$ 800,00. Qual foi o aumento percentual?Quantidade de visualizações: 3184 vezes |
Nesta dica mostrarei como calcular a porcentagem do aumento sofrido por um determinado valor usando a linguagem JavaScript. Este é um cenário muito comum. Veja a seguinte situação: a) Temos um produto x que custava R$ 500,00 e que foi aumentado para R$ 800,00. Queremos, dessa forma, descobrir o percentual de aumento que o preço do produto sofreu. Veja o código JavaScript para a realização deste cálculo: ---------------------------------------------------------------------- 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"> // preço anterior do produto var precoAnterior = 500.00; // preço atual do produto var precoAtual = 800.00; // efetua o cálculo var a = precoAnterior; var b = 100 * precoAtual; var c = b / a; var d = c - 100; document.writeln("A porcentagem de aumento foi: " + d + "%"); </script> </body> </html> Ao executar este código JavaScript nós teremos um resultado parecido com: A porcentagem de aumento foi: 60.0% |
![]() |
JavaScript ::: Dicas & Truques ::: Set (Conjunto) |
Como remover elementos duplicados de um array em JavaScript usando um Set e o método Array.from()Quantidade de visualizações: 1285 vezes |
Sabemos de outras dica de JavaScript que o objeto Set nos permite criar conjuntos únicos, ou seja, sem repetições. Sabemos também que a função Array.from() possibilita a conversão de um Set em um Array JavaScript. Dessa forma, é possível usar essa combinação para escrever uma função personalizada que recebe um vetor (array) e retorna um outro vetor, sem elementos repetidos. 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> <html> <head> <title>O objeto Set do JavaScript</title> </head> <body> <script type="text/javascript"> // função que permite remover os elementos // duplicados de um array function semRepeticoes(vetor){ // primeiro criamos um novo Set a partir do // vetor fornecido // Em seguida usamos o método Array.from() para // converter o Set em um Array return Array.from(new Set(vetor)); } // aqui declaramos um array de String // com nomes repetidos var nomes = ["Osmar", "Maria", "Carlos", "Maria", "Fernanda", "Fernanda", "Osmar"]; // e aqui estão os resultados document.writeln("Com repetição: " + nomes); document.writeln("<br>Sem repetições: " + semRepeticoes(nomes)); </script> </body> </html> Ao executar este código JavaScript nós teremos o seguinte resultado: Com repetição: Osmar, Maria, Carlos, Maria, Fernanda, Fernanda, Osmar Sem repetições: Osmar, Maria, Carlos, Fernanda |
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 usar o objeto Date em JavaScript - Curso de JavaScript para iniciantesQuantidade de visualizações: 7359 vezes |
O objeto Date é um tipo de dados embutido na linguagem JavaScript. Objetos Date são criados, em sua forma mais simples (construtor sem argumentos), da seguinte forma:---------------------------------------------------------------------- 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 objeto Date var hoje = new Date(); // vamos exibir a representação deste objeto Date document.write("Data e hora atual: " + hoje); </script> </body> </html> Ao executarmos este código teremos um resultado parecido com: Data e hora atual: Fri Mar 18 10:02:02 UTC-0300 2011 Note que a representação textual de um objeto Date é a data atual no formato curto (em inglês), as horas e a diferença em relação ao horário UTC (Universal Time Coordinated, sucessor do GMT - Greenwich Mean Time). Uma vez criado um objeto Date, podemos usar vários de seus métodos para operar sobre seus valores de datas e horas. A maioria dos métodos serve simplesmente para obter ou definir os valores dos campos ano, mês, dia, horas, minutos, segundos e milisegundos, usando a hora local ou UTC. O método toString() e suas variantes nos permitem converter datas e horas para os formatos comumente exibidos aos usuários. Veja um 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 ---------------------------------------------------------------------- <script type="text/javascript"> // vamos criar um novo objeto Date var hoje = new Date(); // vamos exibir a representação deste objeto Date document.write("Data e hora atual: " + hoje.toLocaleString()); </script> Ao executarmos este código teremos um resultado parecido com: Data e hora atual: sexta-feira, 18 de março de 2011 15:44:07 Aqui nós usamos o método toLocaleString() do objeto Date para exibir a data e hora de acordo com as configurações regionais do computador local. Os métodos getTime() e setTime() obtém ou definem a representação interna do objeto Date como o número de milisegundos decorridos desde a meia-noite do dia 1º de janeiro de 1970 (GMT). Neste formato padrão de milisegundos, a data e hora são representadas por um único inteiro, o que facilita os cálculos envolvendo datas e horas. O padrão ECMAScript exige que o objeto Date seja capaz de representar qualquer data e hora, na precisão de milisegundos, na faixa de 100 milhões de anos antes ou depois de 01/01/1970. |
JavaScript ::: Dicas & Truques ::: Strings e Caracteres |
Como retornar o caractere associado a um código ASCII ou Unicode em JavaScript usando a função fromCharCode() do objeto StringQuantidade de visualizações: 169 vezes |
Nesta dica mostrarei como podemos retornar o caractere a partir de seu código ASCII ou Unicode em JavaScript. Para isso nós vamos usar a função fromCharCode() do objeto String. 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>Strings em JavaScript</title> </head> <body> <script type="text/javascript"> var codigo = 102; document.write("O caractere para o código " + codigo + " é: " + String.fromCharCode(codigo)); </script> </body> </html> Ao executar este código JavaScript nós teremos o seguinte resultado: O caractere para o código 102 é: f |
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: 125 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 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"> // 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 ::: W3C DOM - (Wide Web Consortium) Document Object Model ::: Navegação e Pesquisa de Nós (Nodes) |
Como usar a propriedade parentNode para obter o objeto pai de um elemento na hierarquia do DOM do JavaScriptQuantidade de visualizações: 10225 vezes |
Em algumas situações precisamos verificar o objeto pai do elemento atual na hierarquia do DOM (Document Object Model). Para isso podemos usar a propriedade parentNode. Veja um trecho de código no qual temos um elemento <a> (um link) dentro de um elemento div. Note como usamos uma função para obter o elemento pai do link e exibir seu nome de tag e valor da propriedade id: ---------------------------------------------------------------------- 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 obterParentNode(){ // vamos obter o link com o id "link" var no = document.getElementById("link"); // vamos obter o nó pai deste link var noPai = no.parentNode; // vamos exibir o nome da tag e id do nó pai window.alert("A tag do nó pai é: " + noPai.tagName); // vamos exibir o valor da propriedade id do nó pai window.alert("O id do nó pai é: " + noPai.id); } </script> </head> <body> <div id="container"> <a id="link" href="http://www.google.com">Sou um link</a> </div> <br> <button onclick="obterParentNode()">Obter Nó Pai do Link</button> </body> </html> Ao executar este código JavaScript nós teremos o seguinte resultado: A tag do nó pai é: DIV O id do nó pai é: container Veja que o nome da tag do elemento pai é obtido por meio da propriedade tagName. Note também que a propriedade parentNode de um elemento HTML é somente-leitura, ou seja, não podemos alterar seu valor durante a execução de nossos códigos. Esta dica foi escrita e testada no Google Chrome 127.0.6533.122 (Versão oficial) 64 bits. |
JavaScript ::: Dicas & Truques ::: Arrays e Matrix (Vetores e Matrizes) |
Como testar se um objeto é um array em JavaScript usando a função Array.isArray()Quantidade de visualizações: 2714 vezes |
Em algumas situações nós precisamos verificar se um determinado objeto é um array (vetor ou matriz). Para isso podemos usar o método Array.isArray(), adicionado ao ECMAScript 2009 (JavaScript 5). Este método recebe o objeto como argumento e retorna true se o objeto for um array e false em caso contrário. Veja o exemplo 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"> // vamos criar um vetor de inteiros var valores = [34, 6, 32, 10]; // vamos testar se o objeto valores é mesmo um array if(Array.isArray(valores)){ window.alert("O objeto é um array"); } else{ window.alert("O objeto não é um array"); } </script> Ao executar este código você verá a mensagem "O objeto é um array". Isso está correto, pois o objeto valores realmente é um vetor. No entanto, há casos em que não sabemos, principalmente ao usarmos códigos de terceiros, se um determinado retorno será do tipo array. Veja mais um 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 ---------------------------------------------------------------------- <script type="text/javascript"> // vamos criar um objeto String var frase = "Gosto muito de JavaScript"; // vamos quebrar esta frase. O retorno deverá ser uma array var pedacos = frase.split(" "); // vamos testar se o objeto valores é mesmo um array if(Array.isArray(pedacos)){ window.alert("O objeto é um array"); } else{ window.alert("O objeto não é um array"); } </script> Novamente o retorno será verdadeiro, pois o método split() do objeto String quebra o seu conteúdo de acordo com o delimitador informado e retorna seus pedaços como um array (vetor). |
Desafios, Exercícios e Algoritmos Resolvidos de JavaScript |
Veja mais Dicas e truques de JavaScript |
Dicas e truques de outras linguagens |
Fórmulas da Física - Fórmula da Distância - Como calcular a distância dados a velocidade e o tempo decorrido |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
1º lugar: Java |