Você está aqui: JavaScript ::: Dicas & Truques ::: Formulários |
Formulários HTML - Como marcar ou desmarcar todas as checkboxes de um formulário HTML de uma só vez usando JavaScriptQuantidade de visualizações: 18335 vezes |
Nesta dica mostrarei como é possível clicar em um botão (pode ser um link também) e chamar uma função JavaScript que marca ou desmarca todos os elementos HTML checkbox de uma só vez. Para isso usaremos o método getElementsByName() para retornar todas as checkbox e em seguida manipular sua propriedade checked. Veja a imagem abaixo: ![]() E agora o código HTML e JavaScript completo: ---------------------------------------------------------------------- Se precisar de ajuda com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- <html> <head> <title>Estudando JavaScript</title> </head> <body> <form name="teste"> <input type="checkbox" name="linguagem">Java <input type="checkbox" name="linguagem">Delphi <input type="checkbox" name="linguagem">C++ </form> <a href="javascript:marcar()">Marcar Todas</a> | <a href="javascript:desmarcar()">Desmarcar Todas</a> <script language="JavaScript"> function marcar(){ var boxes = document.getElementsByName("linguagem"); for(var i = 0; i < boxes.length; i++) boxes[i].checked = true; } function desmarcar(){ var boxes = document.getElementsByName("linguagem"); for(var i = 0; i < boxes.length; i++) boxes[i].checked = false; } </script> </body> </html> |
![]() |
JavaScript ::: Dicas & Truques ::: Trigonometria - Funções Trigonométricas |
Como calcular o cosseno de um ângulo em JavaScript usando a função cos() do objeto Math - Calculadora de cosseno em JavaScriptQuantidade de visualizações: 7406 vezes |
Em geral, quando falamos de cosseno, estamos falando do triângulo retângulo de Pitágoras (Teorema de Pitágoras). A verdade é que podemos usar a função cosseno disponível nas linguagens de programação para calcular o cosseno de qualquer número, mesmo nossas aplicações não tendo nenhuma relação com trigonometria. No entanto, é sempre importante entender o que é a função cosseno. Veja a seguinte imagem: ![]() Veja que temos um triângulo retângulo com as medidas já calculadas para a hipotenusa e os dois catetos, assim como os ângulos entre eles. Assim, o cosseno é a razão entre o cateto adjascente e a hipotenusa, ou seja, o cateto adjascente dividido pela hipotenusa. Veja a fórmula: \[\text{Cosseno} = \frac{\text{Cateto adjascente}}{\text{Hipotenusa}} \] Então, se dividirmos 30 por 36.056 (na figura eu arredondei) nós teremos 0.8320, que é a razão entre o cateto adjascente e a hipotenusa (em radianos). Agora, experimente calcular o arco-cosseno de 0.8320. O resultado será 0.5881 (em radianos). Convertendo 0.5881 radianos para graus, nós obtemos 33.69º, que é exatamente o ângulo em graus entre o cateto adjascente e a hipotenusa na figura acima. Pronto! Agora que já sabemos o que é cosseno na trigonometria, vamos entender mais sobre a função cos() da linguagem JavaScript. Esta função, que é parte do objeto Math, recebe um valor numérico e retorna um valor também numérico) entre -1 até 1 (ambos inclusos). Veja: ---------------------------------------------------------------------- Se precisar de ajuda com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- <html> <head> <title>Estudos JavaScript</title> </head> <body> <script type="text/javascript"> // vamos calcular o cosseno de 3 números document.writeln("Cosseno de 0 = " + Math.cos(0)); document.writeln("<br>Cosseno de 1 = " + Math.cos(1)); document.writeln("<br>Cosseno de 2 = " + Math.cos(2)); </script> </body> </html> Ao executar este código JavaScript nós teremos o seguinte resultado: Cosseno de 0 = 1 Cosseno de 1 = 0.5403023058681398 Cosseno de 2 = -0.4161468365471424 Note que calculamos os cossenos dos valores 0, 1 e 2. Observe como os resultados conferem com a curva da função cosseno mostrada abaixo: ![]() |
JavaScript ::: DOM (Document Object Model) ::: Eventos JavaScript + DOM (Document Object Model) |
Como usar o evento DOMContentLoaded para verificar se o DOM (Document Object Model) já está disponível para manipulação via JavaScriptQuantidade de visualizações: 2180 vezes |
Em algumas situações nós precisamos iniciar a manipulação dos elementos de uma página HTML a partir de nossos códigos JavaScript mas não sabemos com certeza se os elementos do DOM (Document Object Model) já estão disponíveis para acesso. Para essas situações nós podemos usar o evento DOMContentLoaded, que é disparado quando todo o conteúdo DOM já estiver carregado, mesmo que imagens e folhas de estilo CSS ainda estejam pendentes de carregamento. Vamos ver um exemplo? Considere o código JavaScript abaixo (incluindo o código HTML): ---------------------------------------------------------------------- Se precisar de ajuda com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- <html> <head> <title>Estudos PHP</title> <script type="text/javascript"> // vamos obter uma referência ao elemento DIV var divElem = document.getElementById("m_div"); // vamos a cor do texto da DIV divElem.style.color = 'blue'; </script> </head> <body> <div id="m_div">Sou um elemento DIV</div> </body> </html> Veja que temos um elemento DIV na parte <body> do página e, na parte <head> temos um código JavaScript que tenta alterar a cor do texto da DIV. Como já era de se esperar, ao abrirmos este documento HTM no navegador, teremos o seguinte erro: Uncaught TypeError: Cannot read property 'style' of null at index.html:9 Isso aconteceu porque o código JavaScript foi executado antes que o elemento DIV fosse inserido no DOM da página. Para evitar isso, só precisamos usar o evento DOMContentLoaded. Veja a nova versão do código: ---------------------------------------------------------------------- Se precisar de ajuda com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- <html> <head> <title>Estudos PHP</title> <script type="text/javascript"> // vamos tratar o evento DOMContentLoaded document.addEventListener('DOMContentLoaded', function(e){ // vamos obter uma referência ao elemento DIV var divElem = document.getElementById("m_div"); // vamos a cor do texto da DIV divElem.style.color = 'blue'; }); </script> </head> <body> <div id="m_div">Sou um elemento DIV</div> </body> </html> Agora execute o exemplo novamente e veja como o texto do elemento DIV é colorido de azul, uma boa indicação de que o evento DOMContentLoaded foi disparado com sucesso. Note ainda como usamos o método addEventListener() do objeto document para fazer a associação do evento. |
JavaScript ::: Dicas & Truques ::: Matemática e Estatística |
Como calcular juros simples e montante usando JavaScriptQuantidade de visualizações: 16675 vezes |
O regime de juros será simples quando o percentual de juros incidir apenas sobre o valor principal. Sobre os juros gerados a cada período não incidirão novos juros. Valor Principal ou simplesmente principal é o valor inicial emprestado ou aplicado, antes de somarmos os juros. Transformando em fórmula temos: J = P . i . n Onde: J = juros P = principal (capital) i = taxa de juros n = número de períodos Imaginemos uma dívida de R$ 2.000,00 que deverá ser paga com juros de 5% a.m. pelo regime de juros simples e o prazo para o pagamento é de 2 meses. O cálculo em JavaScript pode ser feito assim: ---------------------------------------------------------------------- Se precisar de ajuda com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- <script type="text/javascript"> var principal = 2000.00; var taxa = 0.08; var meses = 2; var juros = principal * taxa * meses; document.write("O total de juros a ser pago é: " + juros); </script> O montante da dívida pode ser obtido das seguintes formas: a) Montante = Principal + Juros b) Montante = Principal + (Principal x Taxa de juros x Número de períodos) M = P . (1 + (i . n)) Veja o código: ---------------------------------------------------------------------- Se precisar de ajuda com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- <script type="text/javascript"> var principal = 2000.00; var taxa = 0.08; var meses = 2; var juros = principal * taxa * meses; var montante = principal + juros; document.write("O total de juros a ser pago é: " + juros + "<br>"); document.write("O montante da dívida é: " + montante); </script> |
Desafios, Exercícios e Algoritmos Resolvidos de JavaScript |
Veja mais Dicas e truques de JavaScript |
Dicas e truques de outras linguagens |
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 |
Linguagens Mais Populares |
1º lugar: Java |