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!

JavaScript Progressivo