Nesta aula, vimos como criar nossas próprias funções em Javascript. Mas, o que é uma função? Para que serve?
Definição
Em qualquer linguagem de programação, uma função (ou ainda subrotina, procedimento ou subprograma) consiste numa porção de código que resolve um problema específico, parte de um problema maior.
Por que usar?
As vantagens no uso de funções para compor um programa incluem:
- Redução de código duplicado;
- Possibilidade de reutilização do código em outros programas;
- A decomposição de um problema grande em pequenas partes;
- Melhor interpretação visual do código.
Exemplo
Para exemplificar, vamos relembrar o código necessário para uma tarefa bem simples: exibir a hora do sistema (do cliente) na página.
var agora = new Date(); var horas = agora.getHours(); var minutos = agora.getMinutes(); var segundos = agora.getSeconds(); document.write(horas + ":" + minutos + ":" + segundos);
Fácil, não? Mas, se fosse necessário mostrar a hora (atualizada) mais de uma vez, teríamos que repetir todo esse código, sempre que necessário.
Imagine agora que exista uma função chamada mostrarHora, que obtém e mostra a hora atual. Dessa forma, sempre que desejássemos exibir a hora atual, bastaria usar:
mostrarHora();
O código acima representa uma chamada a uma função denominada mostrarHora. Substituindo todo o código usado no script anterior por apenas esta chamada resulta numa economia significativa de código (este ficaria menor) e, de quebra, o programa como um todo tornaria-se mais inteligível, mais claro e simples.
De fato, não existe uma função chamada mostrarHora no Javascript, mas isso não quer dizer que não possamos criá-la.
Tipos de função
No Javascript, existem dois tipos de funções:
- Funções próprias do Javascript, a que chamamos de “métodos”. Exemplos: write - método do objeto document, alert – método do objeto window, go- método do objeto history;
- Funções definidas pelo programador (portanto, criadas por nós).
Declarando uma função
Para criarmos nossa própria função, devemos seguir este modelo:
function nomeDaFuncao(argumentos)
{
comandos executados pela função...
}
O código acima é chamado de declaração de função. O nome da função possui as mesmas restrições existentes para nomes de variáveis: não pode começar com números e não pode conter espaços nem caracteres especiais (exceto o underline). Por convenção, a primeira letra da função é minúscula (por isso o “n” minúsculo em “nomeDaFuncao”), mas isso não é uma regra.
Após o nome da função, entre parênteses, são especificados os argumentos necessários. Os argumentos são dados que a função utiliza em seu processamento. Uma função que informa a hora, por exemplo, não requer nenhum argumento. Já uma função que mostre o fatorial de um número requer que o tal número seja informado. Apesar de nem todas as funções requererem argumentos, os parênteses devem ser mantidos, mesmo que vazios. Mais à frente veremos exemplos de funções com e sem argumentos.
Finalmente, dentro das chaves encontra-se todo o processamento realizado pela função.
Para clarear as idéias, nada melhor que um exemplo real. A função mostrarHora poderia ser declarada desta maneira:
function mostrarHora()
{
var agora = new Date();
var horas = agora.getHours();
var minutos = agora.getMinutes();
var segundos = agora.getSeconds();
document.write(horas + ":" + minutos + ":" + segundos);
}
Obs.: Percebam que não há nada entre parênteses, pois esta função não necessita de argumentos.
Ao declararmos uma função, esta passa a poder ser chamada em qualquer ponto do programa a partir do local onde foi declarada. Ou seja, não podemos chamar uma função antes desta ter sido declarada. Por isso, é recomendada a declaração de todas as funções logo que possível, geralmente dentro da tag <head>.
Escopo de variáveis
Outro aspecto importante sobre as funções é o chamado escopo de variável. De forma geral, uma variável que é declarada dentro de uma função só é visível dentro desta. Ou seja, ainda considerando a função mostrarHora, se puséssemos o código a seguir fora da função (no body, por exemplo)…
alert(horas + ":" + minutos + ":" + segundos);
…nada aconteceria. Ao invés de mostrar a hora em uma caixa de mensagem, o browser provavelmente acusaria erro neste código. Para o browser, tais variáveis simplesmente não existem fora da função. E agora? Se por acaso quiséssemos usar o valor produzido pela função (nesse caso, a hora) em um outro local, que não dentro da função? Felizmente, existe uma maneira de se acessar dados produzidos por uma função: através do valor de retorno da função.
Valor de retorno
Uma função pode, ao término de seu processamento, retornar um valor para o programa. Este valor pode ser utilizado como uma variável, com uma diferença: não pode ser alterado (pode ser lido, utilizado como argumento para uma outra função, etc). Estabelecer um valor de retorno possibilita uma maior flexibilidade no uso da função.
Tomando novamente como exemplo a função mostrarHora, ao analisar seu código, podemos perceber que a saída da função é dada por meio do método write. Se quiséssemos utilizar a hora dentro de um alert, teríamos que mudar o corpo da função, o que nem sempre é possível.
Uma maneira de tornar a função mais flexível seria utilizando um valor de retorno, como no código a seguir:
function mostrarHora()
{
var agora = new Date();
var horas = agora.getHours();
var minutos = agora.getMinutes();
var segundos = agora.getSeconds();
return (horas + ":" + minutos + ":" + segundos);
}
Se a função fosse chamada após esta alteração, nada aconteceria. Neste caso, a hora foi obtida, mas não foi exibida. Uma alteração na chamada da função resolveria o problema:
alert(mostrarHora());
Veja que a função agora comporta-se como uma variável. Para mostrar seu valor, devemos utilizar uma função de saída, como write ou alert. Portanto, o código abaixo também funcionaria – sem alterar novamente a função:
document.write(mostrarHora());
Vamos a um outro exemplo:
function quadrado(numero)
{
return (numero * numero);
}
Note que desta vez existe algo nos parênteses. Esta função se propõe a retornar o quadrado de um dado número – daí a necessidade de haver o argumento. Ela poderia ser chamada da seguinte forma:
alert("O quadrado de 3 é "+quadrado(3));
O “3″ fornecido como argumento, “entra” na função como sendo o valor da variável número (argumentos são reconhecidos dentro da função como variáveis que não precisam ser declaradas).
A seguinte chamada, apesar de confusa, também funcionaria:
document.write(quadrado(quadrado(5)));
Desta vez, o browser faria o processamento de dentro para fora – primeiro calcularia o quadrado de 5 e, a partir do valor retornado, calcularia o quadrado deste valor. O valor resultante seria então exibido na página.
Funções também podem conter mais de um argumento:
function soma(a, b)
{
return a + b;
}
O princípio é o mesmo neste caso.
Para finalizar, deixo um exercício: construa uma função – chame-a de destacaElemento – que, ao receber um elemento de formulário como argumento (ex.: document.form.textfield), altere a cor do background deste para amarelo.
4.12.2007 às 18:40 |
[...] função na programação já foi visto em aulas anteriores. Uma explicação breve pode ser vista nesta aula, sobre funções no [...]
12.08.2008 às 18:14 |
Boa tarde!!!!
SR.Iram Rodrigues
gostaria que você respondese uma pergunta para mim é possivel uma função pegar valores de outra função ou uma função dentro da outra
13.09.2008 às 10:52 |
Ola,
preciso criar um formulario onde os campos e preenchimento com o type=text sejam obrigatorios, porem não consigo faze isso.
Alguem pode me ajudar?
Mas preciso dos codigos com comandos faceis, pois estou no segudo semestre da faculdade ainda.