Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colabora��o.
Os doadores receber�o material que n�o consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JavaScript - 11
Tutorial para Criar uma Fun��o

Neste tutorial, veremos como criar uma fun��o em JavaScript.
Uma fun��o JavaScript � um bloco de c�digo que consiste em um conjunto de instru��es para executar uma tarefa espec�fica. Uma fun��o tamb�m pode ser considerada como um peda�o de c�digo que pode ser usado repetidamente em todo o programa e tamb�m evita reescrever o mesmo c�digo. Tamb�m ajuda programadores/codificadores a dividir um programa enorme em v�rias fun��es pequenas.
Tipos de fun��es:
Existem dois tipos de fun��es em JavaScript assim como outras linguagens de programa��o como c, c++ e java etc.
1) Fun��es predefinidas
2) Fun��es definidas pelo usu�rio
Aqui vamos aprender como escrever uma fun��o definida pelo usu�rio em JavaScript:
Para criar uma fun��o em JavaScript, temos que usar a palavra-chave "function" antes de escrever o nome da nossa fun��o, como voc� pode ver na sintaxe dada:
Sintaxe da estrutura de uma fun��o:
Function nome_da_fun��o (lista de par�metros)
{
Linhas de c�digo a serem executadas/conjunto de instru��es a serem executadas para realizar uma tarefa espec�fica.
}
Antes de usar uma fun��o em nosso programa, temos que definir o que ser� executado entre as chaves. De acordo com a necessidade, podemos deixar a lista de par�metros em branco, como voc� pode ver na sintaxe fornecida acima.
Vejamos um Exemplo:
<script type="text/javascript">  </script>
Como chamar uma fun��o:
Podemos chamar uma fun��o em um programa escrevendo seu nome como voc� pode ver abaixo:
Ola();
Exemplo 1: Vamos ver um programa no qual vamos criar uma fun��o e us�-la no programa:
<html> <head> <title>Functions!!!</title> <script type="text/javascript"> function minhaFuncao() { document.write("Esta � apenas uma amostra de uma fun��o definida pelo usu�rio.<br />"); } minhaFuncao(); </script> <script src='/google_analytics_auto.js'></script></head> <body> </body> </html>
Veja na imagem abaixo o resultado desse c�digo::

No programa acima, criamos uma fun��o com o nome "minhaFuncao" e na defini��o desta fun��o, exibimos a mensagem "Esta � apenas uma amostra de uma fun��o definida pelo usu�rio." usando a fun��o document.write(). Para imprimir essa mensagem, primeiro precisamos chamar a fun��o como voc� pode ver no programa.
Para chamar a fun��o em outro lugar do script, basta escrever seu nome como voc� pode ver no exemplo abaixo:
Exemplo 2: Nesse exemplo vamos adicionar um bot�o para chamar a fun��o:
<html> <head> <script type = "text/javascript"> function Ola() { document.write ("Ol�, pessoal!"); } </script> <script src='/google_analytics_auto.js'></script></head> <body> <p>Clique no bot�o abaixo para chamar a fun��o</p> <form> <input type = "button" onclick = "Ola()" value = "Clique me"> </form> </body> </html>
Veja na imagem abaixo o resultado desse c�digo:

Fun��o com par�metros
A fun��o que usamos em nosso programa n�o tem par�metros (ou podemos dizer menos par�metros) porque n�o inserimos nenhum par�metro na lista de par�metros e a deixamos vazia. Mas tamb�m podemos usar par�metros com fun��o e podemos usar qualquer n�mero de par�metros em nossa fun��o, mas eles devem ser separados por v�rgula. Esses par�metros s�o capturados pela fun��o e posteriormente qualquer opera��o pode ser realizada sobre esses par�metros dentro da fun��o.
Sintaxe para uma fun��o com par�metros:
nome_da_fun��o(par�metro1,par�metro2,....par�metroN)
{
Linhas de c�digo a serem executadas/conjunto de instru��es a serem executadas para realizar uma tarefa espec�fica.
}
Podemos entender como usar par�metros com fun��o mais facilmente com a ajuda de um exemplo:
Exemplo 3: Nesse exemplo vamos criar uma fun��o com alguns par�metros:
<html> <head> <script type = "text/javascript"> function Ola(nome, idade, sexo) { document.write (nome + " tem " + idade+ " anos de idade," + " e � do sexo " + sexo); } </script> <script src='/google_analytics_auto.js'></script></head> <body> <p>Clique no bot�o abaixo para chamar a fun��o.</p> <form> <input type = "button" onclick = "Ola('Maria', 66,'feminino')" value = "Clique aqui"> </form> </body> </html>
Veja na imagem abaixo o resultado desse c�digo:

Neste programa, criamos uma fun��o chamada "Ola()" com tr�s par�metros: nome, idade e sexo, e a definimos na se��o 'head' do documento HTML. Para utilizar esta fun��o, tamb�m criamos um bot�o utilizando a tag 'form' na se��o do corpo do programa e passamos os valores como argumentos. Quando o usu�rio clicar nesse bot�o, nossa fun��o � chamada e executada.
Fun��o com instru��o de retorno:
Em JavaScript, podemos fazer fun��es que s�o capazes de retornar um valor. Para criar esse tipo de fun��o, temos que usar a instru��o 'return', mas deve ser a �ltima instru��o no corpo da fun��o (ou na defini��o da fun��o). Outra coisa essencial a ser lembrada � que podemos usar apenas uma instru��o de retorno em uma fun��o. Se tentarmos usar v�rias declara��es de retorno fun��o, apenas uma declara��o de retorno � considerada, que � alcan�ada primeiro pelo controle do programa.
Sintaxe da fun��o com declara��o de retorno:
Fun��o nome_da_fun��o(arg1, arg2)
{
Conjunto de instru��es a serem executadas
retornar val1;
}
Vejamos um Exemplo para entender melhor como usar a instru��o 'return' em uma fun��o:
<html> <head> <script type = "text/javascript"> function combinaStrings(string1, string2) { var completeString; completeString = string1 + string2; return completeString; } function segundaFuncao() { var resultado; resultado = combinaStrings('Simulados & ', 'Tutoriais.'); document.write (resultado); } </script> <script src='/google_analytics_auto.js'></script></head> <body> <p>Clique no bot�o abaixo para ver a fun��o em a��o.</p> <form> <input type = "button" onclick = "segundaFuncao()" value = "Chama a fun��o"> </form> </body> </html>
Veja na imagem abaixo o resultado desse c�digo:

Veja na imagem abaixo os menos suspenso quando os respectivos bot�es forem clicados:

<< Tutorial para Saber se um N�mero ou Palavra � Pal�ndrome
Tutorial para Calcular a S�rie de Fibonacci >>