JavaScript Progressivo

Mostrando postagens com marcador Teste condicional. 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>

Como Validar uma Data em JavaScript

Neste tutorial, vamos aprender como validar uma data, ou seja, vamos aprender como verificar se uma determinada data é válida, se ela existe ou não, usando programação Java Script.

Estudar offline: Apostila Java Script Progressivo

Datas válidas

Uma das coisas mais comuns que você vai fazer como programador JavaScript, é pedir datas ao usuários, como por exemplo, a data de nascimento.

Mas tem um problema: nunca duvide da capacidade do seu usuário.

Certamente alguns vão fornecer dia no lugar do mês, vão digitar 04 ao invés de 2004 e outras bizarrices.

Por isso, é sempre importante verificar se aquela data que ele forneceu está correta.

O nome disse é validação de data.

O grande segredo para validar uma data é atentar para o mês.

Os seguintes meses possuem:

31 dias: 1, 3, 5, 7, 8, 10 e mês 12
30 dias: 4, 6, 9 e mês 11
29 dias: mês 2 em anos bissextos
28 dias: mês 2 em anos não bissextos

Ou seja, você precisa saber quando um ano é bissexto ou não.

Vamos usar o tutorial sobre Como saber se um ano é bissexto ou não.

Validando uma data em JavaScript

Vamos lá.

Primeiro, pedimos o dia, mês e ano ao usuário, através de formulário HTML.

Quando o usuário clicar no botão "Validar", a página invoca a função "validar()" do JavaScript.

O que vamos fazer nessa função é tratar o mês, e para isso vamos usar o switch em JS.

Vamos usar cases acumulativos.

Primeiro, vem os case de valores 1,3, 5, 7, 8, 10 e 12.

Se cair neles, é porque os meses podem ter no máximo 31 dias.

Acima disso, está errado.

Depois vem os cases 4, 6, 9 e 11.

Se cair neles, os dias podem ter no máximo o valor 30, de 30 dias.

Acima disso (como 31), é erro.

Agora vem o pulo do gato.

Se cair no case 2, precisamos fazer um teste condicional para saber se o ano é bissexto ou não.

Se for bissexto, os dias podem ser no máximo 29 dias, acima disso está errado.

Se não for bissexto, os dias podem ser no máximo 28, acima disso está errado.

Veja como ficou o código HTML:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
   <script type="text/javascript" src="script.js"></script>
       Digite sua data de nascimento: <br />
       Dia:<input id="dia" type="number"> <br />
       Mês:<input id="mes" type="number"> <br />
       Ano:<input id="ano" type="number"> <br />
    <button onclick="validar()">Validar</button><br />

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

Agora o código do arquivo script.js :

function validar(){
    var dia = parseInt(document.getElementById("dia").value);
    var mes = parseInt(document.getElementById("mes").value);
    var ano = parseInt(document.getElementById("ano").value);
    resposta = document.getElementById('resposta');

    switch(mes){
     case 1: case 3: case 5: case 7: 
     case 8: case 10: case 12:
      if(dia <= 31)
       resposta.innerHTML = "Data válida";
      else
       resposta.innerHTML = "Inválido (mes com mais de 31 dias)";
      break ;
     case 4: case 6:
     case 9: case 11:
      if(dia <= 30)
       resposta.innerHTML = "Data válida";
      else
       resposta.innerHTML = "Inválido (mes com mais de 30 dias)";
      break ;
     case 2:
      if( (ano%400 == 0) || (ano%4==0 && ano%100!=0) )
       if( dia <= 29)
        resposta.innerHTML = "Data válida";
       else
        resposta.innerHTML = "Inválido (mes com mais de 29 dias)";
      else
       if( dia <= 28)
        resposta.innerHTML = "Data válida";
       else
        resposta.innerHTML = "Inválido (mes com mais de 28 dias)";
    }
}

Teste:

Digite sua data de nascimento:
Dia:
Mês:
Ano:

Resposta:

Ano Bissexto em JavaScript: Como validar

Neste tutorial de JavaScript, vamos te ensinar a criar um script que recebe um ano e diz se ele é bissexto ou não, tudo na base da lógica da programação, sem usar funções internas do JS.

Apostila de JavaScript: Faça agora o download

Ano Bissexto: Quando acontece ?

Dizemos que um ano é bissexto quando ele possui um ano a mais que o normal.

Ou seja, quando ele tem o 29 de fevereiro, contabilizando assim 366 dias no ano.

Temos anos bissextos a cada 4 anos.

JavaScript - Como saber se o ano é bissexto

Existem duas condições que, sozinhas, já definem se um ano é bissexto ou não:

É múltiplo de 400. Exemplos: 1200, 1600, 2000, 2400, 2800...
É múltiplo de 4 mas não é de 100. Exemplos: 1996, 2000, 2004, 2008, 2012, 2016...

Se não obedecer alguma das condições anteriores, não é bissexto.

Algoritmo do Ano Bissexto em JavaScript

Vamos pedir o ano para o usuário.

Quando ele clicar no botão "Validar", chamamos a função validar() do JS.

Ela pega a string que o usuário escreveu, transforma em inteiro e armazena na variável ano.

O primeiro teste que vamos fazer é se é múltiplo de 400:

if(ano % 400 == 0)

Se for, retorna true, dizemos que o ano é bissexto e acaba aí o script.

Se não for, cai em um ELSE.

Dentro desse ELSE, vamos usar outro IF.

Esse novo IF vai testar duas coisas:

Se é múltiplo de 4
Se não é múltiplo de 100

Se ambas condições forem verdadeiras, o ano é bissexto e o IF é true, então avisamos que é bissexto.

Se alguma das condições não forem válidas, o teste retorna false e cai no ELSE interno, que avisa que o ano não é bissexto

Nosso código JavaScript fica:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
       Digite um ano:<input id="ano" type="number"> <br />
    <button onclick="validar()">Validar</button><br />

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

    <script type="text/javascript">
     function validar(){
       var ano = parseInt(document.getElementById("ano").value);
       resposta = document.getElementById('resposta');

       if (ano%400 == 0)
        resposta.innerHTML="É bissexto";
       else
        if(ano%4==0 && ano%100!=0)
         resposta.innerHTML="É bissexto";
        else
         resposta.innerHTML="Não é bissexto";
     }
    </script>

 </head>
</html>

Teste alguns anos:

Digite um ano:

Resposta:

Enxugando o código:

É possível reduzir todo aqueles IF e ELSE aninhados em uma única expressão, um único par IF e ELSE, ele fica assim:

if( (ano%400 == 0) || (ano%4==0 && ano%100!=0) )
 resposta.innerHTML="É bissexto";
else
 resposta.innerHTML="Não é bissexto";

Deu pra entender?

Se não der de primeira, tudo bem. Tente mais um pouco!

Equação do Segundo (2º) Grau em JavaScript

Neste tutorial de nossa apostila de JavaScript, vamos te ensinar como criar um script que resolve qualquer equação do segundo grau.

Apostila JavaScript Progressivo

Equação do 2º grau: Bháskara

Para resolvermos uma equação qualquer do segundo grau, usamos a fórmula de Bháslkara, talvez a equação mais conhecida da Matemática:

O 'triângulo' é a letra grega delta.

Onde a, b e c são os coeficientes da equação:

ax² + bx + c = 0

Por ser de grau 2, elas possuem duas raízes.

Se delta for positivo, essas raízes são reais e distintas.

Se delta for igual a 0, essas raízes são reais e iguais.

Se delta for menor que 0, as raízes são imaginárias e distintas.

Equação do 2º grau em JavaScript

Nosso site conta com 3 formulários, onde pede os coeficientes a, b e c ao usuário.

Em seguida, tem um botão "Calcular raízes", que invoca a função raiz() do JavaScript

Dentro dessa função, capturamos os coeficientes.

Em seguida, calculamos o delta:

var delta = b*b - 4*a*c

Agora vamos calcular as raízes.

Porém, para isso, precisamos primeiramente analisar o delta.

Se ele for maior que 0, exibimos as duas raízes reais distintas.

Se não for, cai no ELSE.

Dentro do ELSE, tem outro IF, para saber se o delta é nulo.

Se for, exibimos a raiz dupla.

E dentro desse ELSE, tem outro ELSE.

Cai nele caso o delta seja negativo.

Se for, primeiro calculamos a parte real:

real = -b/(2*a)

Depois, as duas partes imaginárias:

img1 = Math.sqrt(-delta)/(2*a)

img2 = - Math.sqrt(-delta)/(2*a)

E exibimos da seguinte forma:

raiz1 = real + img1i

raiz2 = real + img2i

Veja o código:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
       Equação do 2o grau: ax² + bx + c = 0  <br />
    Coeficiente a:<input id="num1" type="number"> <br />
    Coeficiente b:<input id="num2" type="number"> <br />
    Coeficiente c: <input id="num3" type="number"> <br />
    <button onclick="raiz()">Calcular raízes</button><br />

    <div id='resposta'></div>

    <script type="text/javascript">
     function raiz(){
       var a = parseFloat(document.getElementById("num1").value);
       var b = parseFloat(document.getElementById("num2").value);
       var c = parseFloat(document.getElementById("num3").value);
       ans = document.getElementById('resposta');

       var delta = (b*b) - 4*a*c;

       if (delta>0){
        raiz1 = (-b + Math.sqrt(delta) )/(2*a);
        raiz2 = (-b - Math.sqrt(delta) )/(2*a);

        ans.innerHTML = "Raiz 1: " + raiz1 + "<br/>" +"Raiz 2: " + raiz2;
       }else{
        if (delta==0){
         raiz = (-b + Math.sqrt(delta) )/(2*a);
         ans.innerHTML="Raiz dupla: " + raiz;
        }else{
         real = (-b)/(2*a);
         img1  = Math.sqrt(-delta)/(2*a);
         img2  = - Math.sqrt(-delta)/(2*a);

         ans.innerHTML = "Raiz 1: " + real + "+" + img1+"i"+"<br/>" +
             "Raiz 2: " + real + "+" + img2+"i"
        }
       }
     }
    </script>

 </head>
</html>

Faça o teste:

Equação do 2o grau: ax² + bx + c = 0
Coeficiente a:
Coeficiente b:
Coeficiente c:

Exercício Hacker

Quebre o script anterior. Encontre um erro, uma coisa que você digitar, vai dar problema.

Escreva nos comentários.

Switch em JavaScript - O que é, Como Usar e Para que serve

Neste artigo de nosso Curso de JavaScript, vamos para nosso último tutorial sobre Testes e Estruturas Condicionais, com o comando switch. Além desta nova palavrinha, vamos falar de três outras: case, break e default.

Apostila do curso: JavaScript Progressivo

Comando SWITCH - O que é ? Para que serve?

Nos tutoriais passados sobre IF e ELSE em JavaScript, vimos como fazer testes, ou seja, fazer perguntas:

Ei, JavaScript, esse número é par ou ímpar?
JS, o cliente escolheu que opção?
Cliente, você é homem, mulher ou outro?

E testes são essenciais, em todo e qualquer projeto, de toda e qualquer linguagem de programação. É algo essencial no mundo da computação.

Porém, dependendo do projeto que você vai fazer, pode ser necessário fazer muitos e muitos testes, e aí teremos códigos do tipo:

if (teste1)
   código;
else
   if(teste2)
      código;
   else
      código;
if (teste3)
   código;
if (teste4)
   código
   else
      código;
if (teste5)
   código ...

Deu pra notar o drama?
Vários if's e elses'...depois mais if dentre de else, e dentro desse novo else outro if, e outro if e outro if...

É aí onde vai atuar o comando switch, pra botar ordem nessa bagunça.
Ele é, na verdade, uma sequência de comparações, mas de maneira muito mais bonitinha e organizada.

Como usar o switch em JavaScript: case

A declaração e uso do switch é assim:

switch(variavel){
       case valor1:
                   codigo1;
       case valor2:
                   codigo2;
       case valor3:
                   codigo3;
...
}

Vamos lá explicar.
Primeiro, escrevemos o comando switch, em seguida, temos fornecer algum valor, como uma variável que armazena um número ou uma string.

Depois, o JS vai comparar variavel com valor1, se for igual, executa o código que vem no primeiro case.

Depois, o JS testa variavel com valor2, se for igual, executa o segundo case.
E assim, sucessivamente.

Ou seja, cada case desse é como se fosse um teste condicional IF.
Vamos comparar o que tem lá dentro do parêntesis do switch, com o que o valor que tem em cada case.

Exemplo de uso do comando SWITCH em JavaScript

Ok, chega de teoria! Vamos aprender a usar esse danado do switch.

Exercício de JavaScript

Escreva uma página que pede ao usuário um número de 1 até 12, e mostra o mês correspondente a este número. Por exemplo, 1 é Janeiro, 2 é Fevereiro etc.

Exibimos um formulário, de id=numero, do tipo numérico e pedimos o número para o usuário.
Em seguida, um botão chama a função exibir() do JavaScript, ao ser acionado (clicado).

Vamos para o JS.
Pegamos o que foi digitado no campo numero pelo usuário, passamos para inteiro (parseInt) e armazenamos na variável mes, dentro de nosso código JavaScript.

Depois, jogamos essa variável no switch.
E fazemos:
case 1: alert("Janeiro")
case 2: alert("Fevereiro")
etc

Ou seja, se o mes digitado for 1, vai aparecer uma janela dizendo que o mês é Janeiro.
Se o usuário tiver digitado 2, a janela vai mostrar Fevereiro, e assim sucessivamente.

O código fica:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
   Digite um mês de 1 até 12:<input id="numero" type="number"> <br />
   <button onclick="exibir()">Exibir mês</button>

   <script type="text/javascript">

    function exibir(){
     var mes = parseInt(document.getElementById("numero").value);
     
     switch(mes){
      case 1:  alert("Janeiro");
      case 2:  alert("Fevereiro");
      case 3:  alert("Março");
      case 4:  alert("Abril");
      case 5:  alert("Maio");
      case 6:  alert("Junho");
      case 7:  alert("Julho");
      case 8:  alert("Agosto");
      case 9:  alert("Setembro");
      case 10: alert("Outubro");
      case 11: alert("Novembro");
      case 12: alert("Dezembro");
     }
    }
 </script>

 </head>
</html>

Sério, testem o código JS acima e vejam o resultado.

A instrução break no JavaScript

Se você digitar 1, vai aparecer "Janeiro". Ok, perfeito.
Mas depois aparece Fevereiro, Março....

Se digitar 2, aparece "Fevereiro", tudo correto.
Mas depois aparece Março, Abril...

Obviamente, tem algum problema aí!
É a falta do break,

Propositalmente, deixamos de te falar uma coisa no funcionamento da instrução switch.
Quando ela encontra algum case correto, ela executa o código dele...e de tudo que está abaixo!

Por isso que aparece inicialmente o mês correto...e depois todos os meses em seguida.
Para solucionar isso, basta escrever break dentro dos case, fica assim agora:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
   Digite um mês de 1 até 12:<input id="numero" type="number"> <br />
   <button onclick="exibir()">Exibir mês</button>

   <script type="text/javascript">

    function exibir(){
     var mes = parseInt(document.getElementById("numero").value);
     
     switch(mes){
      case 1:  alert("Janeiro"); break;
      case 2:  alert("Fevereiro"); break;
      case 3:  alert("Mar�o"); break;
      case 4:  alert("Abril"); break;
      case 5:  alert("Maio"); break;
      case 6:  alert("Junho"); break;
      case 7:  alert("Julho"); break;
      case 8:  alert("Agosto"); break;
      case 9:  alert("Setembro"); break;
      case 10: alert("Outubro"); break;
      case 11: alert("Novembro"); break;
      case 12: alert("Dezembro");
     }
    }
 </script>

 </head>
</html>

Agora sim, tudo perfeito!A propósito, meu mês de nascimento é 5:

Instrução switch, break, case e default em JS

Qual o mês de vocês?

Agora uma dúvida: por que não colocamos break no último case?
Respondam nos comentários.

A instrução default em JavaScript
Digite 0 e clique no botão pra ver o que acontece.
Nada. Por que? Porque não tem um case 0 pra tratar esse caso.

Digite -1...13...não vai aparecer nunca nada.
Imagina que o cliente ia digitar 11 e sem querer digitou 112, não percebeu que digitou um número a mais.

Vai apertar milhões de vezes o botão e não vai aparecer nada, o site não faz nada.
Obviamente, vai ligar na sua empresa reclamando, xingando seu sistema e tudo mais.

Conselho de amigo: nunca duvide de um usuário. Fazem muuuuuita m.... coisas erradas.

Então, como resolvemos isso?
Para tratarmos todos os outros casos que não estão nos cases, usamos a instrução default.
Tudo que não cair em algum case, vai de imediato pro default.

Nosso código fica assim:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
   Digite um mês de 1 até 12:<input id="numero" type="number"> <br />
   <button onclick="exibir()">Exibir mês</button>

   <script type="text/javascript">

    function exibir(){
     var mes = parseInt(document.getElementById("numero").value);
     
     switch(mes){
      case 1:  alert("Janeiro"); break;
      case 2:  alert("Fevereiro"); break;
      case 3:  alert("Março"); break;
      case 4:  alert("Abril"); break;
      case 5:  alert("Maio"); break;
      case 6:  alert("Junho"); break;
      case 7:  alert("Julho"); break;
      case 8:  alert("Agosto"); break;
      case 9:  alert("Setembro"); break;
      case 10: alert("Outubro"); break;
      case 11: alert("Novembro"); break;
      case 12: alert("Dezembro"); break;
      default: alert("Voce nao digitou um mes valido");
     }
    }
 </script>

 </head>
</html>

E por fim, nosso código bonitinho, certinho, bem tratado, anti-usuário-de-dedo-gordo:

Digite um mês de 1 até 12: