Web Sites com Ajax

Funções

As funções são blocos de códigos reutilizáveis, uma verdadeira "mão na roda". Elas são executadas através de algum evento ou quando são invocadas.

Você pode chamar uma função de qualquer lugar da página ou até mesmo de outras páginas contanto que o script esteja em um arquivo externo (.js).

As funções podem conter parâmetros ou não e, quando eles existem, são informados à função quando a chamamos.

Sintaxes

Sintaxe - sem parâmetros

function nomeDaFuncao() {
 //códigos referente à função.
}

Sintaxe - com parâmetros

function nomeDaFuncao(varivel 1, variavel 2, variavel 3, ...) {  //códigos referente à função.
}

Exemplos

Veja alguns exemplos para uma melhor compreensão.

Exemplo - sem parâmetros

function boasVindas() {
 alert("Olá, seja bem vindo.\nEspero que goste do nosso site.");
}

// Um exemplo para chamá-la.
<a ... onclick="javascript:boasVindas();">Chamar a Função</a>


Essa função é bem simples e, ao ser chamada, exibirá uma mensagem alert().

Ela é invocada através do evento onclick inserido na tag a (link).

Demonstração de uma função sem parâmetros.

Exemplo - com parâmetros

function boasVindas(nome) {
 alert("Olá " + nome + ", seja bem vindo.\nEspero que goste do nosso site.");
 window.location.href = "http://www.imasters.com.br";
}

// Um exemplo para utilizá-la.
<input type="button" value="Mensagem de boas vindas" onclick="boasVindas(document.nomeForm.nomeCampo.value);" />


Acima temos o exemplo de uma função com parâmetro.

Esta mensagem pode ser personalizada uma vez que o parâmetro passado a ela é o nome de algum usuário. Após, temos uma forma de redirecionar o usuário para um site específico, no exemplo, o portal iMasters.

Para chamarmos a função utilizamos um campo de formulário do tipo texto (text) para que o usuário possa digitar o seu nome.

Ao clicar no botão intitulado Mensagem de boas vindas é invocada a função boasVindas, passando a ela o nome digitado.

Para enviarmos o nome digitado à função fazemos assim: document.nomeForm.nomeCampo.value.

Interpretamos essa declaração da seguinte forma:

document é igual ao documento, ou seja, a página em si; nomeForm é igual ao nome do form, concedido a ele através do atributo name da tag form; nomeCampo é o nome do campo no qual o usuário informou o seu nome; já o nomeCampo.value é o valor contido no campo, no caso, o nome informado.

Demonstração de uma função com parâmetro.

A declaração return

Quando queremos que uma função retorne algum valor, utilizamos a declaração return, a qual tem o papel de especificar o valor retornado pela função.

Exemplo

function calculo(valor1,valor2) {
 total = valor1 * valor2;
 return total;
}

// Chamando a função através do alert().
alert(calculo(58,10));


No exemplo acima, chamamos a função calculo fornecendo a ela dois parâmetros - valor1 (58) e valor2 (10).

Nessa função temos a variável total que multiplica os dois parâmetros informados.

Demonstração da função com return.

Algumas importantes considerações sobre as funções:

• A palavra function sempre deve ser escrita com letras minúsculas;
• O nome da função pode conter letras minúsculas e/ou maiúsculas;
• As chaves { } indicam o início e o término da função;
• Mesmo que uma função não contenha parâmetros, os parentêses ( ) devem ser incluídos após o nome da função.

• « Loops
• |
• Eventos »