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 JavaScript

Quantidade 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>


Link para compartilhar na Internet ou com seus amigos:

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 JavaScript

Quantidade 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 JavaScript

Quantidade 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 JavaScript

Quantidade 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

Programa de Gestão Financeira Controle de Contas a Pagar e a Receber com Cadastro de Clientes e FornecedoresSoftware de Gestão Financeira com código fonte em PHP, MySQL, Bootstrap, jQuery - Inclui cadastro de clientes, fornecedores e ticket de atendimento
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
Controle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidadesControle de Estoque completo com código fonte em PHP, MySQL, Bootstrap, jQuery - 100% funcional e fácil de modificar e implementar novas funcionalidades
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
2º lugar: Python
3º lugar: C#
4º lugar: PHP
5º lugar: C
6º lugar: Delphi
7º lugar: JavaScript
8º lugar: C++
9º lugar: VB.NET
10º lugar: Ruby



© 2025 Arquivo de Códigos - Todos os direitos reservados
Neste momento há 91 usuários muito felizes estudando em nosso site.