Laço FOR em JavaScript: O que é, Para que serve e Como usar

Neste tutorial, vamos aprender o que é o laço for em JavaScript, para que serve, como funciona e, claro, exemplos de como usar ele em nossos scripts.


Laço FOR: O que é? Para que serve?

Assim como o laço while, ele é uma estrutura de repetição.
Ou seja, ele serve para repetir um determinado trecho de código por quantas vezes você quiser, ou seja, um loop.

Por padrão, ele recebe três informações:
Algo que acontece antes, como a inicialização de uma variável
Um teste condicional
Algo que vai ocorrer depois de cada iteração

Calma, com os exemplos, você vai entender melhor.
A estrutura do laço for é, portanto:

for( inicio ; teste ; depois){
   [codigo];
   [codigo];
   [codigo];
}

Como Funciona o Laço FOR

O inicio ocorre no começo do laço.
Normalmente é usado para se inicializar uma variável, um contador é o exemplo mais comum de uso.

Então, ocorre um teste condicional, como ocorre no IF e no laço WHILE.
Se este teste for true, então o código entre chaves é executado.

Ao término dessa execução (iteração), ocorre o código depois, geralmente é um incremento ou decremento ou outra operação do tipo, no contador, por exemplo.

Então o teste é feito novamente e enquanto for verdadeiro, o código entre chaves é executado, e a cada final de iteração, se executa o comando depois. E assim vai, até o teste ser FALSO e o JavaScript sai do laço FOR.

Exemplo de uso do Laço For

Operadores de Atribuição em JavaScript: ++. --. +=, -=, *=, /= e %=

Neste tutorial de JS, vamos aprender sobre os operadores de atribuição, que nos auxiliarão a escrever menos código, de maneira clara e concisa.

Operadores de Incremento e Decremento: ++ e --


Os chamados operadores de atribuição composta nada mais são que meios, maneiras ou atalhos, para escrevermos expressões de atribuição. Vamos usar bastante eles a partir de agora, principalmente em nossa seção de laços e loopings em JS.

No tutorial anterior, sobre o laço while em JavaScript, fizemos uso de uma expressão:
count = count + 1

Isso quer dizer o seguinte: o novo valor de count vai ser igual ao anterior somado de 1.
Ou seja, se antes count = 1
Depois de : count = count + 1
O valor de count vai ser 2.

Se count=10
E fazemos: count = count + 1
Temos: count = 11

Ou seja, pegamos o valor anterior e adicionamos um.
Podemos abreviar essa expressão:
count = count + 1

Para simplesmente:
count++


O operador ++ é dito de incremento, ele aumenta o valor da variável em uma unidade.

Existe também o operador de decremento: --
Que é o mesmo que fazer: count = count - 1

Ou seja, o novo valor de count é o valor antiga, subtraído de 1.
O código abaixo, por exemplo, faz uma contagem regressiva, de 10 até 1:


HTML:
<!DOCTYPE html>
<html>
 <head>
   <title>Apostila JavaScript Progressivo</title>
   <script type="text/javascript" src="script.js"> </script>
 </head>
 <body>
    <button onclick="contar()">Contar</button><br />
</body>
</html>

JS:
function contar(){
  count = 10;
  while (count>0){
 document.writeln(count+"<br />");
 count--;
  }
}

Operadores de atribuição aritmética: +=, -=, *=, /= e %=

+= e -=
Assim como adicionamos um: count = count + 1
Podemos adicionar outro valor, como 2: count = count + 2

Isso pode ser abreviado para:
count += 1
count += 2

Se quisermos subtrair o valor y de x podemos fazer tanto:
x = x - y
Como: x -= y

O mesmo vale para multiplicação e divisão:
x = x * y
Abreviando: x *= y

Por exemplo, tem um valor em real e quer ter ele em dólar?
Faça: valor = valor / dolar
Ou mais simplificadamente: valor /= dolar
Prontinho, agora o valor está em $.

Usamos o operador % de resto da divisão para saber o resto da divisão por 2.
A abreviação também vale para esse operador.

Se x = 10
E fazemos: x %= 2
Estamos fazendo: x = x%2 = 0

Bem simples, não?
Pode até parecer bobagem e preguiça dos programadores, mas você vai notar que com o tempo isso nos poupa muuuuito tempo, pois usamos demais essas operações matemáticas, mas demais meeeesmo. Além de deixar o código mais clean e menor.

Pré e Pós incremento e decremento

Se fizermos: y++
Você já sabe o que acontece: a variável y se incrementa em uma unidade.

Porém, há uma diferença entre:
x = y++
x = ++y

No primeiro caso, temos um pós-incremento.
Primeiro o valor de y é atribuído a x, só depois a variável y é incrementada.

Vamos supor que inicialmente:
x=10
y=1

Após fazemos: x = y++, temos:
x=1
y=2

No segundo caso, primeiro a variável y é incrementada.
Só depois ela é atribuída a x.

Se inicialmente temos:
x = 10
y = 1 

Fazemos: x = ++y
Primeiro y se incrementa e passa a valer 2
Só depois disso x recebe o novo valor.

Obviamente, o mesmo vale para o decremento.
Não tem mistério nem confusão: se vem primeiro o incremento ou decremento, então a atribuição vai ser em relação novo valor, incrementado ou decrementado.

Se vem primeiro a variável, a atribuição é com esse valor antigo, antes de ser incrementado ou decrementado.

Esses tipos de questões são bem comuns em concursos!

Exercício de Operadores de Atribuição

Inicialmente, x=5, produto = 4, divisao=14
Fazemos duas operações:
1. produto *= x++;
2. divisao /= ++x;

Quando vale cada variável após as  duas operações, realizadas na sequência?

Resposta e solução comentada: na apostila!

Laço WHILE em JavaScript

Neste tutorial, vamos aprender o que é o laço While em JavaScript, para que serve, como funciona, como usar e alguns exemplos práticos deste loop.

Laço WHILE: O que é e Como funciona


O WHILE é um comando, uma estrutura de repetição, que em inglês significa 'enquanto'.

Basicamente ela funciona assim: enquanto uma condição for satisfeita, ela fica repetindo e repetindo um determinado trecho de código.

Através deste laço ou loop, conseguimos que um mesmo pedaço de código se repita quantas vezes desejarmos.

A declaração do laço while, em JavaScript, é:
while(teste){
   [codigo]
   [codigo]
   [codigo]
}

Ou seja, primeiro digitamos while, depois algum teste condicional (como fazemos com o IF), em seguida um trecho de código entre chaves.

O laço while funciona assim: ele verifica o teste.
Se for verdadeiro, ele executa o código.

Depois, faz o teste condicional novamente e enquanto for true, vai continuar a executar de novo, de novo e de novo o código entre chaves.

O laço while só para de executar quando o teste der falso.

Como usar o Laço While

Vamos criar um script que simplesmente vai escrever no documento HTML os números de 1 até 10.
Veja:


<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
    <button onclick="contar()">Contar</button><br />

    <script type="text/javascript">
   function contar(){
    var count = 1;

    while (count<=10){
     document.writeln(count+"<br />");
     count = count+1;
    }
   }
    </script>
 </head>
</html>


O código acima simplesmente exibe um botão na página.
Quando você clica, ele chama a função contar() do JavaScript.

Nessa função, declaramos uma variável de nome count e inicializamos com valor 1.
Agora vamos para o laço while.

O teste condicional dele é: count<=10

Ou seja, enquanto a variável count for menor ou igual a 10, o teste é verdadeiro, e o código do laço executa. O código do laço é simplesmente exibir o valor de count e dar uma quebra de linha.
Em seguida, incrementamos o valor de count em uma unidade.

Ou seja, ele imprime, e incrementa.
Imprime, e incrementa.
Vai fazendo isso...imprime 1, 2, 3, 4, ...até no 10 ele imprime.

Na última 'rodada', chamada de iteração, ele imprime o 10.
Incrementa o valor, e temos count=11

Então, o teste vai passar a ser falso, logo, o while vai parar de executar.
E o resultado é uma contagem de 1 até 10 na sua tela.

Experimente colocar 1000 e veja como seu computador é rápido.

Exemplo de laço While

Faça um script que printe na tela todos os números pares de 1 até 100.

A lógica aqui é a mesma: temos que criar uma variável que vai ficar mudando de valor e vamos imprimindo na tela esses valores.

A diferença agora é que em vez de incrementar em uma unidade, vamos incrementar em duas (count = count+2), veja como fica nosso código:


<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
    <button onclick="contar()">Contar</button><br />

    <script type="text/javascript">
   function contar(){
    count = 2;

    while (count<=100){
     document.writeln(count+"<br />");
     count = count + 2;
    }
   }
    </script>
 </head>
</html>


Teste, de verdade, esse código.

Exemplo de uso do Laço While

Crie um script que exiba todos os múltiplos de 3, de 1 até 100, usando laço while.

O que vamos fazer de diferente neste exemplo é inserir um teste condicional IF dentro do laço WHILE.

Vamos usar uma variável count, que vai receber todos os valores, de 1 até 100.
A cada valor que ela receber, vamos usar o IF para saber se ela é múltipla de 3, analisando o resto da divisão.

Se for múltiplo de 3, imprimimos o valor de count. Senão, nada acontece.
Independente do que ocorra, incrementamos em um o valor de count, senão o loop nunca acaba.

Veja como fica nosso código:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>
    <button onclick="contar()">Contar</button><br />

    <script type="text/javascript">
   function contar(){
    count = 1;

    while (count<=100){
     if(count%3 == 0)
      document.writeln(count+"<br />");
     count = count + 1;
    }
   }
    </script>
 </head>
</html>

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.

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:
Paridade em JS
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.

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.

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:
  1. É múltiplo de 400. Exemplos: 1200, 1600, 2000, 2400, 2800...
  2. É 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:
  1. Se é múltiplo de 4
  2. 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.

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:

Fórmula de Bháskara em JavaScript

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.

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."


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: