JavaScript Progressivo

Mostrando postagens com marcador Exercício de JavaScript. Mostrar todas as postagens

Par ou Ímpar em JavaScript (e outros múltiplos)

Neste tutorial de JavaScript, vamos te ensinar como saber se um número é par ou ímpar; e também saber se ele é múltiplo de qualquer outro valor que você desejar saber.

Estudar por PDF: Apostila JavaScript Progressivo

Par ou Ímpar em JavaScript

Para resolver este exercício, precisamos primeiramente saber o que é e como usar o operador %, de resto da divisão.

Pra isso, você precisa voltar pra escolinha, quando fazia continhas:

Ao dividirmos 17 por 2, o resultado é um quociente de valor 8 e resto 1.

Esse resto, é o resto da divisão.

Quando fazemos: x % y

O JS nos retorna o resto da divisão.

E ai que vem o pulo do gato:

O resto da divisão de um número par por 2 é sempre 0.

Se o resto da divisão for 1, o número é ímpar.

Então, nosso código fica:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
       Numero:<input id="num" type="number"> <br />
    <button onclick="paridade()">Resposta</button><br />

    Resposta: <div id='resposta' style='display:inline'></div>

    <script type="text/javascript">
   function paridade(){
    var num = parseInt(document.getElementById("num").value);
       var resposta = document.getElementById('resposta');
        
          if (num%2 == 0)
           resposta.innerHTML = "Par";
          else
           resposta.innerHTML = "Ímpar";
   }
    </script>
 </head>
</html>

Teste:

Numero:

Resposta:

Múltiplos em JavaScript

Os números pares são, na verdade, números múltiplos de 2.
Existem uma infinidade de outros múltiplos e uma hora ou outra você vai precisar identificar eles.

Por exemplo, múltiplos de 3: 3, 6, 9, 12, 15, 18, 21...
Múltiplos de 4: 4, 8, 12, 16, 20, ...
Múltiplos de 7: 7, 12, 21, 28, 35, ...

A lógica para identificar um determinado múltiplo é a mesma que usamos para saber se um número é par ou ímpar, basta usar o módulo da divisão %.

Para o número x ser múltiplo de y, o valor da operação: x % y
Deve ser 0. Simples assim.

Teste o seguinte código:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
       Numero     :<input id="num" type="number"> <br />
       Multiplo de:<input id="mult" type="number"> <br />
    <button onclick="paridade()">Checar</button><br />

    Resposta: <div id='resposta' style='display:inline'></div>

    <script type="text/javascript">
   function paridade(){
    var num = parseInt(document.getElementById("num").value);
    var mult = parseInt(document.getElementById("mult").value);
       var resposta = document.getElementById('resposta');
        
          if (num%mult == 0)
           resposta.innerHTML = num+" é múltiplo de "+mult;
          else
           resposta.innerHTML = num+" não é múltiplo de "+mult;
   }
    </script>
 </head>
</html>

Saber qual número é maior ou menor

Neste tutorial, vamos resolver o seguinte exercício:
"Faça um script que leia três números inteiros, em seguida mostre o maior e o menor deles."

Estudar pelo PDF: Fazer download da Apostila

Maior e Menor número em JS

Em um exercício anteriores, fizemos um script que recebe 3 números e diz qual o maior, vamos usar ele como base para resolver este exercício.

De fato, vamos usar o mesmíssimo código da função maior() que descobre o maior número.

Se você entendeu bem esta lógica, vai entender com facilidade a função menor(), que descobre o menor número.

Sim, nosso script agora vai ficar mais complexo, com duas funções: a maior() e a menor().

Dentro da função menor() definimos a variável: menor

Vamos fazer ela receber o primeiro número, do primeiro campo numero1.

Agora vamos comparar menor e num2.

Se num2 for menor que menor, fazemos:

menor = num2

Prontinho, agora a variável menor tem o menor vale entre os dois primeiros números digitados.

Vamos repetir o raciocínio para a terceira variável, a num3.

Comparamos menor com num3.

Se num3 for menor que menor, fazemos:

menor = num3

Se nem num2 for menor que menor e num3 for menor que menor, nada ocorre.

Veja como ficou nosso código:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
    Primeira numero:<input id="numero1" type="number"> <br />
    Segundo  numero:<input id="numero2" type="number"> <br />
    Terceiro numero: <input id="numero3" type="number"> <br />
    <button onclick="maior()">Maior</button>
    <button onclick="menor()">Menor</button>

    <script type="text/javascript">
     function maior(){
       var num1 = parseFloat(document.getElementById("numero1").value);
       var num2 = parseFloat(document.getElementById("numero2").value);
       var num3 = parseFloat(document.getElementById("numero3").value);

       var maior = num1;

       if(num2 > maior)
        maior = num2;
       if(num3 > maior)
        maior = num3;

       alert("Maior: "+maior);
     }


  function menor(){
       var num1 = parseFloat(document.getElementById("numero1").value);
       var num2 = parseFloat(document.getElementById("numero2").value);
       var num3 = parseFloat(document.getElementById("numero3").value);

       var menor = num1;

       if(num2 < menor)
        menor = num2;
       if(num3 < menor)
        menor = num3;

       alert("Menor: "+menor);
      }
    </script>

 </head>
</html>

Teste o resultado:

Primeira numero:
Segundo numero:
Terceiro numero:

Calcular média e dizer se foi Aprovado ou Reprovado

Neste tutorial de nosso Curso de JavaScript, vamos resolver um exercício e comentar seu código.
Faremos uso dos tutoriais da seção de Testes Condicionais IF e ELSE.

Exercícios de IF e ELSE

Apostila de JavaScript para download

Exercício de JavaScript

Faça um script que pede duas notas de um aluno. Em seguida ele deve calcular a média do aluno e dar o seguinte resultado:

A mensagem "Aprovado", se a média alcançada for maior ou igual a sete;
A mensagem "Reprovado", se a média for menor do que sete;
A mensagem "Aprovado com Distinção", se a média for igual a dez.

Questão resolvida e Código Comentado

Inicialmente, criamos dois campos de input em HTML, do tipo number, para receber as notas dos alunos e um botão 'Calcular média', que quando acionado chama a função media(), que vai dentro do código JS.

Vamos lá, inicialmente, declaramos duas variáveis nota1 e a nota2, que vão receber os dados digitados nos formulários de input.

Como esses dados vem no formato string, precisamos transformar eles em dados números do tipo decimal, por isso usamos a função parseFloat().

Com os dois números em mãos, declaramos a variável media, que recebe o valor da média das duas notas (somamos elas e dividimos por 2).

Agora pegamos esse valor, e vamos usar nos testes condicionais.
Se este valor for maior ou igual a 7, é porque foi aprovado.

Mas temos dois tipos de aprovações.
Então, dentro do IF, testamos se essa nota é igual a 10. Se for, dizemos que foi aprovado com distinção. Se não for, é porque a nota é maior ou igual a 7 e é menor que 10, logo dizemos apenas que foi aprovado.

Se o primeiro IF for falso, é porque a nota é menor que 7, cai no ELSE com a mensagem de provação.

Script funcionando

Primeira nota
Segunda nota

Código HTML + JavaScript

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
   Primeira nota <input id="nota1" type="number"> <br />
   Segunda  nota <input id="nota2" type="number"> <br />
   <button onclick="media()">Calcular M�dia</button>

   <script type="text/javascript">

    function media(){
     var nota1 = parseFloat(document.getElementById("nota1").value);
     var nota2 = parseFloat(document.getElementById("nota2").value);

     var media = (nota1 + nota2)/2 ;

     if(media >= 7)
      if(media==10)
       alert("Uau! Aprovado com distin��o");
      else
       alert("Parabens, aprovado! Media "+media);
     else
      alert("Reprovado!")

    }
 </script>

 </head>
</html>