Até aqui, os exemplos de programas apresentados são pequenos. Programas comerciais podem ter centenas ou milhares de linhas de código, e podem usar algoritmos complexos. Uma forma de organizar o programa, tornando-o mais legível e fácil de manter, é separando blocos de comandos que executem uma tarefa específica e dando a eles nomes que indiquem o que esses blocos fazem. Esses blocos separados de comandos são funções. No bloco principal do programa, as funções são ativadas pelo uso do seu nome seguido de parêntesis, dentro dos quais pode haver ou não parâmetros de ativação. Você já utilizou algumas funções pré-definidas, ou embutidas, como parseInt(). Vamos aprender como criar nossas próprias funções.
Para definir uma função, você deve usar a palavra reservada funcion seguida do nome da função e um par de parêntesis () e de um bloco de comandos delimitado por chaves - {}. Estes serão os comandos executados quando a função for ativada. Dentro dos parêntesis, você pode incluir uma lista de parâmetros que devem ser passados na mesma ordem quando da ativação da função. Os parâmetros são como variáveis, que vimos no tópico anterior, só que não se usa const ou var para declarar seus nomes. O valor dessas "variáveis" é passado no momento da ativação da função, separados por vírgulas e na mesma ordem que aparecem na definição. Note que os comandos não são executados no momento da definição da função, mas sim quando a função é ativada dentro do programa.
Novamente vamos nos valer de um exemplo para explicar como tudo funciona.:
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="utf-8" />
<title>Exemplo Javascript - Declaração e uso de funções</title>
</head>
<body>
<p id="resultado"> </p>
<p><button type="button" onclick="calcularArea()">Calcular a área</button>
</body>
<script type="text/javascript">
var linhasMensagem = [];
/* Utilitário para imprimir uma mensagem na tela.
*/
function mostrarMensagem(msg) {
linhasMensagem.push(msg.toString());
document.getElementById('resultado').innerHTML = linhasMensagem.join('<br />');
}
</script>
<script type="text/javascript">
// Exemplo de uso de definição de função
const pi = 3.14;
var raio = 3; // Valor inicial...
mostrarMensagem("Para um círculo com raio " + raio +
", o perímetro é: " + (2 * pi * raio).toString());
function calcularArea() {
mostrarMensagem("Para um círculo com raio " + raio +
", a área é: " + (pi * raio * raio).toFixed(2));
}
</script>
</html>Para ficar fácil de entender a diferença entre definição e ativação da função, usamos um elemento novo no código HTML, um botão (<button type="button"> ... </button>). Este elemento tem um atributo chamado onclick, que indica o nome da função no script que deve ser ativada quando o botão for acionado.
Note que a mensagem com a área do círculo só aparece depois que o botão é acionado na tela. Este recurso é muito utilizado em scripts para a Internet, e é chamado de programação orientada a eventos. Há muitos outros tipos de eventos que podem ser gerados por uma página HTML. Consulte a referência ou um manual de HTML se desejar saber mais.
Nenhum comentário:
Postar um comentário