Funções em Javascript

Definimos o conceito de função e aprendemos a criá-las e a chamá-las.

Agora veremos um assunto muito importante, sobretudo para os que nunca programaram e estão dando seus primeiros passos no mundo da programação com Javascript, já que veremos um conceito novo, o de função, e os usos que têm. Para os que já conhecem o conceito de função também será um capítulo útil, pois também veremos a sintaxe e o funcionamento das funções em Javascript.

O que é uma função

Na hora de fazer um programa levemente grande existem determinados processos que se podem conceber de forma independente, e que são mais simples de resolver que o problema inteiro. Ademais, estes costumam ser realizados repetidas vezes ao longo da execução do programa. Estes processos podem se agrupar em uma função, definida para que não tenhamos que repetir uma vez ou outra esse código em nossos scripts, e sim, simplesmente chamamos a função, e ela se encarrega de fazer tudo o que deve.

Portanto, podemos ver uma função como uma série de instruções que englobamos dentro de um mesmo processo. Este processo poderá logo ser executado desde qualquer outro site somente ao ser chamado. Por exemplo, em uma página web pode haver uma função para mudar a cor de fundo e de qualquer ponto da página poderíamos chamá-la para que nos mude a cor quando desejarmos.

As funções utilizam-se constantemente, não só as que você escreve como também as que já estão definidas no sistema, pois todas as linguagens de programação têm um montão de funções para realizar processos habituais como, por exemplo, obter a hora, imprimir uma mensagem na tela ou converter variáveis de um tipo a outro. Já vimos alguma função em nossos simples exemplos anteriores quando fazíamos um document.write() na verdade estávamos chamando à função write() associada ao documento da página que escreve um texto na página. Nos capítulos de funções vamos ver primeiro como realizar nossas próprias funções e como chamá-las logo. Ao longo do livro veremos muitas das funções definidas em Javascript que devemos utilizar para realizar distintos tipos de ações habituais.

Como se escreve uma função

Uma função deve-se definir com uma sintaxe especial que vamos conhecer a seguir:

function nomefuncao (){
instruções da função
...
}

Primeiro escreve-se a palavra função, reservada para este uso. Seguidamente se escreve o nome da função, que como os nomes de variáveis podem ter números, letras e algum caractere adicional como um hífen abaixo. A seguir se colocam entre chaves as diferentes instruções da função. As chaves no caso das funções não são opcionais, ademais é útil colocá-las sempre como se vê no exemplo, para que seja visto facilmente a estrutura de instruções que engloba a função.

Vejamos um exemplo de função para escrever na página uma mensagem de boas vindas dentro de etiquetas <H1> para que fique mais ressaltado.

function escreverBoasvindas(){
document.write("<H1>Olá a todos</H1>")
}

Simplesmente escreve na página um texto, é uma função tão simples que o exemplo não expressa suficientemente o conceito de função, mais já veremos outras mais complexas. As etiquetas H1 não se escrevem na página, e sim são interpretadas como o significado da mesma, neste caso que escrevemos uma cabeçalho de nível 1. Como estamos escrevendo em uma página web, ao colocar etiquetas HTML se interpretam como o que são.

Como chamar a uma função

Quando se chamam às funções: Para executar uma função temos que chamá-la em qualquer parte da página, com isso conseguiremos que se executem todas as instruções que tem a função entre as duas chaves. Para executar a função utilizamos seu nome seguido dos parênteses.

NomeDaFuncao()

Onde colocamos as funções

Vemos a maneira de inserir as funções Javascript de cliente dentro das páginas web.

À princípio, podemos colocar as funções em qualquer parte da página, é claro que sempre entre etiquetas <SCRIPT>. No obstante, existe uma limitação na hora de colocá-la em relação aos lugares de onde for chamada. O mais normal é colocar a função antes de qualquer chamada à mesma e assim, certamente não iremos nos enganar.

Teoricamente, a função deve-se definir no bloco <SCRIPT> onde esteja a chamada à função, embora seja indiferente se a chamada se encontrar antes ou depois da função, dentro do mesmo bloco <SCRIPT>.

<SCRIPT>
minhaFuncao()
function minhaFuncao(){
//faço algo...
document.write("Isto está bem")
}
</SCRIPT>

Este exemplo funciona corretamente porque a função está declarada no mesmo bloco que sua chamada.

Também é válido que a função se encontre em um bloco <SCRIPT> anterior ao bloco onde está a chamada.

<HTML>
<HEAD>
<TITLE>MINHA PÁGINA</TITLE>
<SCRIPT>
function minhaFuncao(){
//faço algo...
document.write("Isto está bem")
}
</SCRIPT>
</HEAD>
<BODY>

<SCRIPT>
minhaFuncao()
</SCRIPT>

</BODY>
</HTML>

Vemos um código completo sobre como poderia ser uma página web onde as funções estão no cabeçalho. Um lugar muito bom para colocá-las, porque se supõem que no cabeçalho ainda não vão utilizar e sempre poderemos desfrutar deles no corpo porque certamente já foram declarados.

Este último em compensação seria um erro:

O que será um erro é uma chamada a uma função que se encontra declarada em um bloco <SCRIPT> posterior.

<SCRIPT>
minhaFuncao()
</SCRIPT>

<SCRIPT>
function minhaFuncao(){
//faço algo...
document.write("Isto está bem")
}
</SCRIPT>

Parâmetros das funções
Vemos o que são os parâmetros em chamadas à funções e como utilizá-los.

As estruturas que vimos anteriormente sobre funções não são as únicas que devemos aprender para manejá-las em toda a sua potência. As funções também têm uma entrada e uma saída, que se podem utilizar para receber e devolver dados.

Parâmetros

Os parâmetros se usam para mandar valores à função, com os quais ela trabalhará para realizar as ações. São os valores de entrada que recebem uma função. Por exemplo, uma função que realizasse uma soma de dois números teria como parâmetros a esses dois números. Os dois números são a entrada, assim como a saída seria o resultado, mais isso será visto mais tarde.

Vejamos um exemplo anterior no qual criávamos uma função para mostrar uma mensagem de boas vindas à página web, mas que agora passaremos um parâmetro que vai conter o nome da pessoa a qual se vai saudar.

function escreverBoasvindas(nome){
document.write("<H1>Ola " + nome + "</H1>")
}

Como podemos ver no exemplo, para definir na função um parâmetro temos que por o nome da variável que vai armazenar o dado que passarmos. Essa variável, que neste caso se chama nome, terá como valor o dado que passarmos a esta função quando a chamarmos, alé disso, a variável terá vida durante a execução da função e deixará de existir quando a função terminar sua execução.

Para chamar a uma função que tem parâmetros coloca-se entre parêntesis o valor do parâmetro. Para chamar à função do exemplo haveria que escrever:

escreverBoasvindas("Alberto Garcia")

Ao chamar à função assim, o parâmetro nome toma como valor "Alberto Garcia" e ao escrever a saudação na tela escreverá "Olá Alberto Garcia" entre etiquetas <H1>.

Os parâmetros podem escrever qualquer tipo de dados, numérico, textual, boleano ou um objeto. Realmente não especificamos o tipo do parâmetro, por isso devemos ter um cuidado especial ao definir as ações que realizamos dentro da função e ao passar valores à função para assegurarmos que tudo é conseqüente com os tipos de nossas variáveis ou parâmetros.

Múltiplos parâmetros

Uma função pode receber tantos parâmetros quanto quisermos e para expressá-lo colocam-se os parâmetros separados por vírgulas dentro dos parênteses. Vejamos rapidamente a sintaxe para que a função de antes receba dois parâmetros, primeiro, o nome a quem saudar e segundo, a cor do texto.

function escreverBoasvindas(nome,corTexto){
document.write("<FONT color=" + corTexto + ">)
document.write("<H1>Olá " + nome + "</H1>")
document.write("</FONT>")
}

Chamaríamos à função com esta sintaxe. Entre parênteses colocaremos os valores dos parâmetros.

var meuNome = "Pedro"
var minhaCor = "red"
escreverBoasvindas(meuNome,minhaCor)

Coloquei entre parênteses, duas variáveis no lugar de dois textos entre aspas. Quando colocamos variáveis entre os parâmetros na verdade o que estamos passando à função são os valores que contém as variáveis e não as mesmas variáveis.

Parâmetros passam-se por valor

Para seguir a linha do uso de parâmetros em nossos programas Javascript, temos que indicar que os parâmetros das funções se passam por valor. Isto quer dizer que mesmo que modifiquemos um parâmetro em uma função a variável original que havíamos passado não mudará seu valor. Pode-se ver facilmente com um exemplo.

function passoPorValor(meuParametro){
meuParametro = 32
document.write("mudei o valor a 32")
}
var minhaVariavel = 5
passoPorValor(minhaVariavel)
document.write ("o valor da variavel e: " + minhaVariavel)

No exemplo, temos uma função que recebe um parâmetro, e que modifica o valor do parâmetro atribuindo-lhe o valor 32. Também temos uma variável, que iniciamos a 5 e posteriormente chamamos à função passando esta variável como parâmetro. Como dentro da função modificamos o valor do parâmetro poderia acontecer da variável original mudasse de valor, mas como os parâmetros não modificam o valor original das variáveis, esta não muda de valor. Deste modo, ao imprimir na tela o valor de minhaVariavel se imprimirá o número 5, que é o valor original da variável, no lugar de 32 que era o valor col o que havíamos atualizado o parâmetro.

Em javascript somente se podem passar as variáveis por valor.

Valores de retorno
Veremos como as funções podem devolver valores. Também veremos um apontamento sobre o âmbito de variáveis em funções em Javascript.

As funções também podem retornar valores, de modo que ao executar a função poderá se realizar ações e dar um valor como saída. Por exemplo, uma função que calcula o quadrado de um número terá como entrada -tal como vimos- a esse número e como saída terá o valor resultante de encontrar o quadrado desse número. Uma função que devolva o dia da semana teria como saída em dia da semana.

Vejamos un exemplo de função que calcula a média de dois números. A função receberá os dois números e retornará o valor da média.

function media(valor1,valor2){
var resultado
resultado = (valor1 + valor2) / 2
return resultado
}

Para especificar o valor que retornará a função se utiliza a palavra return seguida do valor que se deseja devolver. Neste caso se devolve o conteúdo da variável resultado, que contém a média dos dois números.

Para receber os valores que devolve uma função se coloca o operador de atribuição =. Para ilustrar isto, pode-se ver este exemplo, que chamará à função média() e salvará o resultado da média em uma variável para logo, imprimi-la na página.

var minhaMedia
minhaMedia = media(12,8)
document.write (minhaMedia)

Múltiplos return

Em uma mesma função podemos colocar mais de um return. Logicamente só vamos poder retornar uma coisa, mas dependendo do que tenha acontecido na função poderá ser de um tipo ou de outro, com uns dados ou outros.

Nesta função podemos ver um exemplo de utilização de múltiplos return. Trata-se de uma função que devolve um 0 se o parâmetro recebido era par e o valor do parâmetro se este era ímpar.

function multiploReturn(numero){
var resto = numero % 2
if (resto == 0)
return 0
else
return numero
}

Para averiguar se um número é par encontramos o resto da divisão ao dividi-lo entre 2. Se o resto é zero é porque era par e devolvemos um 0, em caso contrário -o número é ímpar- devolvemos o parâmetro recebido.

Âmbito das variáveis em funções

Dentro das funções podemos declarar variáveis, inclusive os parâmetros são como variáveis que se declaram no cabeçalho da função e que se iniciam ao chamar a função. Todas as variáveis declaradas em uma função são locais a essa função, ou seja, somente terão validade durante a execução da função.

Podemos declarar variáveis em funções que tenham o mesmo nome que uma variável global à página. Então, dentro da função a variável que terá validade é a variável local e fora da função terá validade a variável global à página.

Em troca, se não declaramos as variáveis nas funções se entenderá por javascript que estamos fazendo referência a uma variável global à página, de modo que se não está criada, a variável a cria, mas sempre global à página no lugar de local à função