Script que Exibe Números em Ordem Decrescente

Neste tutorial de nosso Curso de JavaScript Online e Grátis, vamos resolver um exercício bem interessante e útil: receber três números e exibir eles em ordem decrescente, ou seja, do maior para o menor.

Este é um exercício de nossa Lista de Questões de IF e ELSE em JS. Vamos te mostrar o enunciado, a solução e o código, todo comentado, passo a passo, para te ajudar e entender e se tornar um excelente programador JavaScript.

• Apostila de JavaScript para download

Enunciado da Questão

"6. Faça um script que leia três números e mostre-os em ordem decrescente."

Uso os conceitos de IF e ELSE e variável auxiliar para trocar o valor de duas variáveis.

Exercício Resolvido em JavaScript

Bom, vamos lá.

Primeiro, vamos criar 3 formulários de input do tipo number.
Em seguida, um botão que ao ser clicado chama a função exibir() do JavaScript (onclick="exibior()").

A parte do HTML é só essa. Agora vamos programar.
A primeira coisa que fazemos em nosso script é pegar os dados do formulário, e armazenar nas variáveis num1, num2 e num3.

Com os dados recebidos são do tipo string, usamos a função parseInt() para transformar eles em inteiros.

Inicialmente, num1 pega o valor do primeiro formulário, num2 do segundo e num3 do terceiro.
Nosso objetivo é bem simples: fazer com o que o valor armazenado em num1 seja o maior, num2 o valor do meio e num3 o menor. Assim, no final exibimos: num1 - num2 - num3
Os números em ordem decrescente.

Primeiro vamos fazer com que num1 seja o maior.
Para isso, comparamos ele com num2. Se o valor de num2 for maior:
if(num2 > num1)

Fazemos com que num1 e num2 invertam seus valores. Para isso, usamos a variável auxiliar aux.

Agora, vamos comparar num1 com num3.
Se num3 for maior, invertemos o valor.
Pronto, agora num1 tem o maior valor de todos, pois comparamos com os outros dois números.

Por fim, comparamos o valor entre num2 e num3.
Se num3 for maior, invertemos o valor no IF, senão, já temos os números em ordem crescente.

E, prontinho. Já temos num1 - num2 - num3 em ordem decrescente.
Só exibir num alert.

Script funcionando

---

Primeira numero:
Segundo numero:
Terceiro numero:

---

Código HTML + JavaScript

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="exibir()">Exibir ordem decrescente</button>

   <script type="text/javascript">

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

     var aux = num1;

     if(num2 > num1){
      aux=num2;
      num2=num1;
      num1=aux;
     }

     if(num3 > num1){
      aux=num3;
      num3=num1;
      num1=aux;
     }

     if(num3 > num2){
      aux=num3;
      num3=num2;
      num2=aux;
     }
     alert(num1+"-"+num2+"-"+num3);
    }
   </script>

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>

Vogal ou Consoante em JavaScript - Exercício Resolvido

Neste tutorial de JavaScript, vamos resolver o seguinte exercício:
"Faça um script que verifique se uma letra digitada num campo de input é vogal ou consoante."

De nossa lista de exercícios de IF e ELSE.

Vogal ou Consoante em JS

Nosso alfabeto possui 26 letras:
A – B – C – D – E – F – G – H – I – J – K – L – M – N – O – P – Q – R – S – T – U – V – W – X – Y – Z

Onde temos 5 vogais: A E I O U
E 21 consoantes.

O que vamos fazer é, basicamente, pegar o que o usuário digitou e comparar com tais letras.

"Aff...fazer 26 comparações vai ser bem cansativo!"
Claro que não, paladino das artes JavaScriptianas.

Não precisamos comparar tudo, vamos comparar só com as 5 vogais.
Se der certo, ok é vogal. Senão (else), é consoante!

Formulário de input e o botão:

Quando clicar no botão, será chamada a função checar().
Nesta função do JavaScript, vamos armazenar o caractere digitado pelo usuário na variável letra.

Agora, vem um 'pulo do gato'.
O caractere 'a' é diferente do 'A'.
O caractere 'e' é diferente do 'E', e o mesmo pras outras vogais.

Ou seja, em vez de fazermos 5 comparações (com cada vogal), temos que fazer 10, ok?
Não!

Vamos usar uma função chamada toLowerCase() que passa tudo pra minúsculo, usamos ela assim:
letra = letra.toLowerCase();

Prontinho, tudo em minúsculo agora!

Em seguida testamos a variável letra com 'a', 'e', 'i', 'o' e com 'u':

if(letra=='a' || letra=='e' || letra=='i' || letra=='o' || letra=='u')

Se for verdade, cai no IF e dizemos que é vogal.
Se for falso, cai no ELSE e dizemos que é consoante.

Resultado

Digite apenas UM caractere:

Código HTML + JavaScript

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
   Digite apenas UM caractere:

   <input id="char" type="text"> <br />
   <button onclick="check()">Checar</button>

   <script type="text/javascript">

    function check(){
     var letra = document.getElementById("char").value;
     letra = letra.toLowerCase();

     if(letra=='a' || letra=='e' || letra=='i' || letra=='o' || letra=='u')
   alert("Vogal");
  else     
      alert("Consoante");
    }
 </script>

 </head>
</html>

Exercício hacker

Existem, de cara, duas maneiras de 'quebrar' esse script, ou seja, de hackear  ele.
Você consegui descobrir?

A resposta está aqui embaixo, escrita em branco, para ler basta selecionar.
Porém, só veja depois de pensar bastante como burlar esse script, ok?

1. Digitar um número
2. Digitar mais de um caractere

Qual o maior número ? Exercício de IF ELSE em JavaScript

Neste tutorial, vamos resolver uma questão e comentar seu código, usando IF e ELSE:

Faça um script que peça ao usuário dois números e em seguida exiba o maior deles. Use JavaScript.

Tutorial anterior: IF e ELSE aninhados

• Baixar apostila de JavaScript

Exibindo o Maior Número em JavaScript

Primeiro, vamos usar dois campos de formulário, de input, do tipo number, para receber os dois números que o usuário vai digitar.

Nosso código HTML:

Primeiro numero: <input id="num1" type="number"> <br />
Segundo numero :<input id="num2" type="number"> <br />

Depois, um botão escrito "Calcular maior", que ao ser clicado (atributo onclick) vai chamar a função maior() (declarada e definida em nosso script de JS):

<button onclick="maior()">Calcular maior</button>

Design da página feito, agora vamos para a parte da programação JavaScript em si.
Vamos lá fazer nossa função maior() .

Vamos declarar duas variáveis, numero1 e numero2, que vão pegar os valores inseridos no formulário num1 e num2.

Como esses dados vem no formato string, usamos a função parseFloat() pra transformar em float (tipo numérico decimal), fica assim:

var numero1 = parseFloat(document.getElementById("num1").value);
var numero2 = parseFloat(document.getElementById("num2").value);

Prontinho, agora temos duas variáveis do tipo float em mãos, a numero1 e a numero2.
Vamos aos testes!



Primeiro, vamos testar com IF se o primeiro número é maior que o segundo.
Se for, pronto, acabou...exibimos um alert dizendo isso e acabou.

Se o primeiro não for maior que o segundo, é porque o segundo é maior que o primeiro, correto?
Errado !!!

Pois os dois podem ser iguais! Precisamos fazer outro teste!
Então, dentro do else fazemos mais um if para verificar se o número 2 é maior que o primeiro, se for, aí sim, exibimos essa informação.

Por fim, fazemos o else desse segundo if que foi aninhado. Se o primeiro número não é maior que o segundo, nem o segundo número é maior que o primeiro, é porque eles são iguais!

Veja como ficou nosso código:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
   Primeiro numero: <input id="num1" type="number"> <br />
   Segundo numero :<input id="num2" type="number"> <br />
   <button onclick="maior()">Maior</button>

   <script type="text/javascript">
    function maior(){
     var numero1 = parseFloat(document.getElementById("num1").value);
     var numero2 = parseFloat(document.getElementById("num2").value);
     
     if (numero1 > numero2)
         alert(numero1 + " eh maior que " + numero2);
     else
         if(numero2 > numero1)
            alert(numero2 + " eh maior que " + numero1);
         else
            alert(numero1 + " eh igual a " + numero2);
    }
 </script>

 </head>
</html>

Como todas as instruções após IF e ELSE são comandos de apenas uma linha de código, não usamos chaves { }, pois não é necessário nesses casos.

Teste você mesmo o resultado:

---

Primeiro numero:
Segundo numero:

---

PS: Se quiser testar com números decimais, lembre-se de usar ponto . ao invés de vírgula ,

IF ELSE dentro de IF ELSE - Aninhamento

Neste tutorial de nosso Curso de JavaScript, vamos continuar nos aprofundando no estudo dos testes condicionais IF e ELSE, pois são a base da programação. Agora, vamos aprender como aninhar eles, ou seja, colocar um teste dentro de outro e ver a utilidade disto.

Você vai notar que nossos scripts vão ficar cada vez mais realistas e poderosos, nos permitindo programar coisas incríveis.

Tutorial anterior: IF e ELSE em JavaScript - O que é e Como usar

• Apostila em PDF: Fazer download

Usando Vários IF e ELSE em JavaScript

"Você foi contratado pelo governo para criar um script das eleições. Seu programa deve ter as seguintes características:

• Perguntar a idade do usuário
• Se for menor de 16 anos, avisar que não pode votar
• Se tiver 16 ou 17, avisar que o voto é facultativo
• Se tiver mais de 65, avisar que também é facultativo o voto
• De 18 até 65, é obrigatório votar

Utilize a linguagem de programação JavaScript."

Ok, vamos lá.
Vamos precisar fazer mais de um teste para fazer nosso script.

Primeiro, no HTML. Vamos criar um botão do tipo numérico e de nome (ID) idade:

<input id="idade" type="number">

E um botão que chama a função votar() do JavaScript:

<button onclick="votar()">Ok</button> <br />

Suave na nave? Agora vamos começar a programar.
Primeiro, vamos pegar o que o usuário digitou no formulário "idade".
Como tudo que alguém digita é string, vamos passar pra inteiro via parseInt e guardar na variável idade:

var idade = parseInt(document.getElementById("idade").value);

Prontinho, agora temos um número inteiro.
Vamos testar se é menor que 16, se for já avisa logo que não pode votar:

if (idade < 16)
    alert("Voce ainda nao pode votar");

Próximo passo de nosso script, vamos colocar outro teste, acima de 65, avisando que só vota se quiser:

if (idade > 65)
    alert("Seu voto eh facultativo);

Agora é que o bicho pega...agora precisamos testar se tem menos de 18 e 16 ou mais, para dizer que é facultativo e também testar quem tem de 18 até 65 pra dizer que é obrigatório.

Que tal um:

if (idade > 18)
    alert("Voce eh obrigado a votar");

?

Mas aí quem digitar 66 vai receber duas mensagens:
Seu voto é facultativo
Voce eh obrigado a votar

Pois vai cair nos dois IF...e agora, José ?

IF e ELSE aninhados

A solução é simples: colocar um IF dentro do outro ou dentro de um ELSE.
Vamos lá, devagar, acompanhar a lógica.

O primeiro IF continua ok. Testamos se a idade da pessoa é menor que 16.
Se for, acaba o script, ela não pode votar e ponto final.

Porém, agora vamos usar um else:

if (idade < 16){
    alert("Voce ainda nao pode votar");

}
else{
    // algum codigo aqui
}

O segredo agora é: vamos colocar mais testes dentro desse else.
Uma coisas sabemos: se foi pro else, é porque tem 16 anos ou mais, concorda?

Já sabemos que a idade é 16 ou mais. Agora, dentro do else, vamos testar se a idade é menor que 18.
Se for, é porque ele tem 16 ou mais e menos que 18, sendo seu voto facultativo:

if (idade < 16){
     alert("Voce ainda nao pode votar");
}
else{
     if(idade < 18){
        alert("Seu voto eh facultativo");
     }
}

Olha que belezura...um if dentro de um else.
Vamos colocar agora mais um else...é o else deste novo if:

if (idade < 16){
     alert("Voce ainda nao pode votar");
}
else{
     if(idade < 18){
        alert("Seu voto eh facultativo");
     }
     else{
        // codigo caso a idade seja 18 ou mais
     }
}

Lembre-se: cada else pertence somente a um if.
Esse segundo else só funciona se a idade digitada for 18 anos ou mais.

Porém, temos que tratar dois casos ali dentro:
Se for 18 ou mais, porém com 65 anos ou mais
Se for 18 ou mais, porém com menos que 65 anos

A solução?
Simples, vamos colocar mais um par de if else ali dentro desse segundo else:

if (idade < 16){
     alert("Voce ainda nao pode votar");
}
else{
     if(idade < 18){
        alert("Seu voto eh facultativo");
     }
     else{
         if(idade > 65){
            alert("Seu voto eh facultativo");
         }
         else{
             alert("Seu voto eh obrigatorio");
      }
     }
}

Prontinho. Script pronto.
Recapitulando:

• Se for menor que 16 a idade? Cai no primeiro if e acabou o script, não pode votar
• Se for 16 ou mais? Ai vai pro else
• Dentro desse else, testamos se é menor que 18...se for, tem 16 ou mais e menos que 18, logo é facultativo
• Se tem 18 ou mais, vai pra um novo else
• Dentro desse novo else, testamos se tem mais de 65, se sim, voto é facultativo
• Se não tiver mais de 65, é porque tem 18 anos ou mais e 65 anos ou menos, logo o voto é obrigatório

Bacana, não?
Teste:

---

Qual sua idade:

---

IF ELSE aninhados e Indentados

Note uma coisa em nosso script: os IF e ELSE estão organizados e alinhados, isso se chama indentação.

Um par de if e else deve ficar sempre alinhado verticalmente, na mesma coluna.
Caso precise aninhar mais algum teste dentro de outro teste, dê um espaçamento e coloque esses novos testes 'dentro' dos antigos, para ficar uma estrutura organizada e clara de se entender.

if (condição1)      // Primeiro IF
   if (condição2)   // Segundo IF, dentro do primeiro IF
      [codigo];
   else             // ELSE é do segundo IF
       [codigo];

else                // ELSE do primeiro IF
    if (condição3)  // IF dentro do primeiro ELSE
       [codigo]
    else           // ELSE do terceiro IF, dentro do primeiro ELSE
        [codigo]

IF e ELSE em JavaScript - O que é, Como Usar, Para que serve e Exemplos de Código

Nesta aula de nossa Apostila de JavaScript online, vamos aprender o que é a instrução if else, para que serve, onde é usada, como usar e ver exemplos de código JS comentado.

Este tutorial é uma continuação de nosso curso, principalmente do tutorial anterior:
IF - O Teste Condicional do JavaScript

• Download: Apostila JavaScript Progressivo

IF e ELSE em JavaScript - Como Usar

A sintaxe do uso das instruções if e else é a seguinte:

if (teste){
    código caso o teste seja verdadeiro ;
}else{
    código caso o teste seja falso ;
}

A lógica do IF continua a mesma, o que muda é o else, que vem sempre depois do if (e nunca sozinho).
Vamos lá, entender o que se passa:

1. Comando if é introduzido
2. Um teste condicional é realizado (geralmente usando operadores de comparação)
3. Caso o teste retorne true (verdade) o código que vem ao if é executado
4. Caso o teste retorne false (falso), o código que vem depois do else que é executado

O que é e Para que serve o IF e ELSE em JavaScript

No tutorial anterior, quando aprendemos a usar a instrução if, vimos que o código dentro dela só executava se o teste fosse verdadeiro, caso fosse falso, o código ficava inutilizado, o JS simplesmente pulava ele.

Com a instrução else, isso não ocorre mais.

Agora ou acontece uma coisa ou acontece outra.

Um dos códigos sempre é executado.

Se parar para pensar, é isso que acontece o tempo inteiro quando usamos qualquer software ou sistema. Quando digita sua senha e tenta fazer login, ou ela tá certa ou tá errada, ou seja, é ou é true ou é false.

Ou você clica em um link, ou não clica.

Ou fecha a página ou não fecha.

Ou aperta um botão ou não.

Não é a toa que em computação, o sistema mais importante é o binário.

É 1 ou 0, verdade ou falso...essa também a base de todos os testes condicionais.

Mas vamos deixar de falar e mostrar exemplos reais de código!

Exemplos de código de IF e ELSE em JS

• Exemplo de código 1:

No exemplo abaixo, o IF será sempre executado, afinal, o teste sempre dará verdadeiro:

if (true){
 alert("JavaScript eh a melhor linguagem de programacao");
}else{
 alert("Odeio JavaScript");
}

Já no código abaixo, o IF nunca será executado, pois o teste retorna falso. Logo, o else é sempre executado:

if (false){
 alert("Eu adoro ouvir Pablo Vittar");
}else{
 alert("Adoro ouvir Iron Maiden");
}

Somente programadores JavaScript podem ver o que está dentro do primeiro ELSE do segundo IF.

• Exemplo de código 2:

Vamos criar um login básico e simples?

Primeiro, vamos criar nosso campo de input (do tipo senha, password) e o botão de entrar.

Quando a pessoa clicar no botão "Entrar", vai ser chamada a função login() de nosso código JavaScript.

Dentro desse script,  definimos a nossa senha:

var senha="2112"

Em seguida, a função login(), que captura o que o usuário digitou na caixa de input e armazena na variável tentativa.

Por fim, usamos o teste condicional IF ELSE para verificar se a senha digita está correta.

Fazemos o teste:

senha == tentativa

Se o resultado for positivo, a pessoa digitou a senha corretamente, cai no IF que exibe uma mensagem de sucesso.

Se digitar qualquer coisa diferente da senha, cai no ELSE que avisa que não vai entrar no sistema.

Veja como ficou o código:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
   Digite a senha:
   <input id="password" type="password">
   <button onclick="login()">Entrar</button> <br />

   <script type="text/javascript">
    var senha='2112';
    function login(){
     var tentativa = document.getElementById("password").value;

     if (tentativa == senha)
      alert("Senha correta, entrando no sistema...");
     else 
      alert("Senha incorreta, tente novamente");
    }
    
   </script>

 </head>
</html>

Veja como fica o resultado, teste:

---

Digite a senha:

---

• Exemplo de código 3

"Faça um script que pergunte a idade ao usuário. Se tiver 65 anos ou mais, exiba uma mensagem dizendo que ele já pode se aposentar. Senão, o tempo que ele ainda tem que trabalhar para se aposentar".

Primeiro, criamos nosso formulário de input, do tipo numérico (number) e o botão de OK.
Ao clicar no botão (onclick), ele chama a função aposentar() do script.

Dentro do script, vai só a definição dessa função.
Inicialmente, ela pega o valor digitado pelo usuário (que é sempre uma string) e transformar em int (parseInt()), salvando esse resultado na variável idade.

Agora, pegamos essa variável e testamos se ela é maior ou igual a 65.
Se for, o teste retorna true, cai no IF e uma mensagem de parabéns é exibida.

Se for menor que 65, retorna false o teste e cai no ELSE.
O else exibe quantos anos a pessoa ainda tem que trabalho (65-idade).


Código JS:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
   Qual sua idade: 
   <input id="idade" type="number">
   <button onclick="aposentar()">Ok</button> <br />

   <script type="text/javascript">
    function aposentar(){
     var idade = parseInt(document.getElementById("idade").value);

     if (idade >= 65)
      alert("Parabens, voce ja pode se aposentar !");
     else 
      alert("Ainda falta " + (65-idade) +" ano(s) para se aposentar");
    }
    
   </script>

 </head>
</html>

Resultado:

---

Qual sua idade:

---

PS: no código acima só tem um detalhe, não usamos as chaves para delimitar o código dentro do IF nem do ELSE. Isso ocorreu por um motivo: quando o código for apenas uma linha, não é obrigatório usar chaves.

IF - Teste Condicional em JavaScript

Neste tutorial, vamos falar de um dos assuntos mais importantes da programação em JavaScript, o teste condicional IF.

Para entender e usar o IF, você precisa ter lido o tutorial anterior:
Operadores de comparação

• Leia offline: Apostila de JavaScript

Comando IF : Como Usar

A estrutura, o protótipo do comando IF, em JavaScript, é:

if (condicao) {
   codigo ;
   codigo ;
}

Primeiro, digitamos o comando if.
Em seguida, é necessário vir um teste, uma comparação: foi por isso que estudamos operadores de comparação no tutorial passado de nosso Curso de JavaScript, pois o teste condicional IF só funciona com uma expressão de comparação.

Caso a condição retorne true (ou seja, seja verdadeira), o código entre os colchetes { } será executado.

Caso a condição retorne false, o código dentro dos colchetes não é executado. Este bloco inteiro de IF é pulado e o script continua rodando normalmente, como se aquele trecho não existisse.

Uma maneira ainda mais simples e fácil de entender a instrução if é pensar em sua tradução.
If significa se, em português.
Então, a lógica é assim: "se isso é verdade, executar a seguinte instrução ; se isso for falso, não fazer nada, pular a instrução seguinte".

Teste condicional IF : Exemplos de Uso

Agora que aprendemos a definição, e a importância dos testes condicionais (ler seção Testes e Laços), vamos ver um exemplo de uso do comando IF em JavaScript.

Você foi contratado para criar um site no ramo adulto. Você deve criar um script que pergunte a idade do usuário, se ele for menor deve aparecer uma janela de alert informando que ele não pode acessar o conteúdo.

Primeiro, vamos pedir os dados do usuário em um formulário do tipo input.
Vamos pegar esse valor, via JavaScript, e armazenar na variável idade.

Como os valores que o usuário fornece são strings, passamos para inteiro via parseInt().

Agora vem o pulo do gato.
Vamos fazer um teste, testar se a variável idade é menor que 18:

if (idade<18){
      alert("Voce tem " + idade + " anos,  menores de idade 

             nao podem entrar");
}

Se tiver digitado um valor menor que 18, o teste IF vai retornar verdadeiro e tudo dentro dos colchetes do IF será executado.

No caso, aparece uma mensagem dizendo sua idade e que menores não podem acessar o site.
O código completo do site com o script, fica:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
   Digite sua idade:
   <input id="idade" type="text">
   <button onclick="entrar()">Entrar</button> <br />

   <script type="text/javascript">
    function entrar(){
     var idade = parseInt(document.getElementById("idade").value);

     if (idade<18){
      alert("Voce tem " + idade + " anos,  menores de idade 

             nao podem entrar");
     }
    }
    
 </script>

 </head>
</html>

Veja abaixo o resultado do script:

---

Digite sua idade:

---

Caso digite 17, por exemplo, e tentar entrar, vai ver este resultado na tela:

E o que acontece se você digitar 18 ou mais? Nada.
Afinal, o operação de comparação vai retornar false e o IF não vai ser executado, e o código corre normalmente.

Como não tem nada depois do IF, nada ocorre.

Entenda a natureza da coisa: o que vai acontecer vai depender do que o usuário fizer.
Nosso script está rodando baseado em condições, e não simplesmente rodando do começo até o fim, linha por linha, como era bem antigamente, antes da existência do JS (sim, as páginas sempre rodava do mesmo jeito, abriam e funcionavam da mesma maneira sempre, pra todos - agora não, são dinâmicas, 'conversam' com os internautas).

Operadores de comparação no Teste Condicional IF

Uma das coisas mais legais da programação, é o fato de ser possível fazer a mesma coisa de maneiras bem diferentes.

O código de um programador é como se fosse uma impressão digital, é único. Por isso, não tente nunca imitar ninguém, vá desenvolvendo sua lógica, seu raciocínio e sua criatividade.

Existem, por exemplo, outras maneiras de fazer esse mesmo teste condicional do exemplo passado, para saber se o usuário tem menos de 18 anos, como por exemplo:

if (idade<=17){
      alert("Voce tem " + idade + " anos,  menores de idade nao podem entrar");

}

Consegue entender por que vai ser a mesma coisa?
No tutorial a seguir, vamos estudar o ELSE e vamos ver outras possibilidades de se fazer essa mesma comparação.