JavaScript - Funções

Uma função é um grupo de código reutilizável que pode ser chamado em qualquer lugar em seu programa. Isso elimina a necessidade de escrever o mesmo código repetidamente. Ajuda os programadores a escrever códigos modulares. As funções permitem que um programador divida um grande programa em várias funções pequenas e gerenciáveis.

Como qualquer outra linguagem de programação avançada, JavaScript também oferece suporte a todos os recursos necessários para escrever código modular usando funções. Você deve ter visto funções comoalert() e write()nos capítulos anteriores. Estávamos usando essas funções repetidas vezes, mas elas haviam sido escritas em JavaScript principal apenas uma vez.

JavaScript também nos permite escrever nossas próprias funções. Esta seção explica como escrever suas próprias funções em JavaScript.

Definição de Função

Antes de usarmos uma função, precisamos defini-la. A maneira mais comum de definir uma função em JavaScript é usando ofunction palavra-chave, seguida por um nome de função exclusivo, uma lista de parâmetros (que pode estar vazia) e um bloco de instrução cercado por chaves.

Sintaxe

A sintaxe básica é mostrada aqui.

<script type = "text/javascript">
   <!--
      function functionname(parameter-list) {
         statements
      }
   //-->
</script>

Exemplo

Experimente o seguinte exemplo. Ele define uma função chamada sayHello que não aceita parâmetros -

<script type = "text/javascript">
   <!--
      function sayHello() {
         alert("Hello there");
      }
   //-->
</script>

Chamando uma função

Para invocar uma função em algum lugar posteriormente no script, você simplesmente precisa escrever o nome dessa função, conforme mostrado no código a seguir.

<html>
   <head>   
      <script type = "text/javascript">
         function sayHello() {
            document.write ("Hello there!");
         }
      </script>
      
   </head>
   
   <body>
      <p>Click the following button to call the function</p>      
      <form>
         <input type = "button" onclick = "sayHello()" value = "Say Hello">
      </form>      
      <p>Use different text in write method and then try...</p>
   </body>
</html>

Resultado

Parâmetros de Função

Até agora, vimos funções sem parâmetros. Mas existe uma facilidade para passar parâmetros diferentes ao chamar uma função. Esses parâmetros passados podem ser capturados dentro da função e qualquer manipulação pode ser feita sobre esses parâmetros. Uma função pode ter vários parâmetros separados por vírgula.

Exemplo

Experimente o seguinte exemplo. Nós modificamos nossosayHellofunção aqui. Agora são necessários dois parâmetros.

<html>
   <head>   
      <script type = "text/javascript">
         function sayHello(name, age) {
            document.write (name + " is " + age + " years old.");
         }
      </script>      
   </head>
   
   <body>
      <p>Click the following button to call the function</p>      
      <form>
         <input type = "button" onclick = "sayHello('Zara', 7)" value = "Say Hello">
      </form>      
      <p>Use different parameters inside the function and then try...</p>
   </body>
</html>

Resultado

A declaração de retorno

Uma função JavaScript pode ter um opcional returndeclaração. Isso é necessário se você deseja retornar um valor de uma função. Esta declaração deve ser a última declaração em uma função.

Por exemplo, você pode passar dois números em uma função e então esperar que a função retorne sua multiplicação no programa de chamada.

Exemplo

Experimente o seguinte exemplo. Ele define uma função que pega dois parâmetros e os concatena antes de retornar o resultante no programa de chamada.

<html>
   <head>  
      <script type = "text/javascript">
         function concatenate(first, last) {
            var full;
            full = first + last;
            return full;
         }
         function secondFunction() {
            var result;
            result = concatenate('Zara', 'Ali');
            document.write (result );
         }
      </script>      
   </head>
   
   <body>
      <p>Click the following button to call the function</p>      
      <form>
         <input type = "button" onclick = "secondFunction()" value = "Call Function">
      </form>      
      <p>Use different parameters inside the function and then try...</p>  
  </body>
</html>

Resultado

Há muito o que aprender sobre funções JavaScript, no entanto, cobrimos os conceitos mais importantes neste tutorial.

Funções aninhadas de JavaScript
Construtor de função JavaScript ()
Literais de função JavaScript