T10_LM3: Subalgoritmos/funções (2013-2014)

JavaScript: Subalgoritmos
Carlos Santos
LabMM 3 - NTC - DeCA - UA
Aula 10, 18-10-2013

Subalgoritmos
• Porque não devemos repetir o mesmo algoritmo/código em diferentes
locais do programa?
• quantidade de código escrito aumenta;
• alterações ao algoritmo implicam uma manutenção mais complexa.
• Porque é uma boa prática centralizar rotinas em subalgoritmos?
• cada algoritmo só é escrito uma vez;
• diminui a dimensão da aplicação;
• facilita operações de alteração e/ou manutenção do código;
• pode minimizar alguns erros de programação.

Subalgoritmos - O que são?
• Subalgoritmos são algoritmos dentro de algoritmos que compreendem um
conjunto de instruções dedicadas à resolução de uma tarefa ou problema.
• são identificados por um nome único que é definido na sua declaração;
• são invocados através do seu nome único;
• Conceptualmente, podem-se distinguir dois tipos de subalgoritmos:
• procedimentos: definem um conjunto de instruções a executar;
• funções: definem um conjunto de instruções a executar e retornam um
valor final.

Subalgoritmos: declaração em Javascript
identiﬁcador único
do subalgoritmo/
função

lista de parâmetros necessários
para a execução do subalgoritmo/
função (pode não existir)

function nomeFunção ([arg0, arg1,..., argN])
{
// código a executar
[return valor;]
}
valor a retornar pela
função (opcional)

Subalgoritmos: ordem de execução

Subalgoritmos: caixa preta!

invocação

subalgoritmo
retorno da
execução

Subalgoritmos e estratégias de programação
• Sem recurso a subalgoritmos – Programação convencional linear
• Cada processo é executado após o anterior;
• Não se distinguem alterações à linearidade do ﬂuxo exceto pela utilização
de estruturas de decisão e repetição.

• Com recurso a subalgoritmos – Programação estruturada ou modular
• Programação por módulos baseada na divisão do problema em subproblemas;
• Cada módulo pensado para invocação a partir de múltiplos locais do
programa.

Tipos de subalgoritmos
• Intrínsecos
• nativos da própria linguagem de programação.
• Extrínsecos
• criados pelo programador

• NOTA: as frameworks disponibilizam bibliotecas de funções que permitem
ampliar as funções nativas de uma linguagem de programação.
• NOTA 2: apesar das diferenças conceptuais, a partir deste ponto irei utilizar apenas a designação “função” para
todos os tipos de subalgoritmos.

Funções: exemplo 1
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Funções: Exemplo 1</title>
<script language="javascript" type="application/javascript">
<!-function helloWorld() //Declaração da função
{
alert("Hello World!");
}
//-->
</script>
</head>
<body>
helloWorld(); //Invocação da função
</script>
</body>
</html>

Como invocar
• Uma instrução direta no código
• helloWorld();

• Associar a um evento
• onload="iniciarQuadroJogo()”; //evento de sistema
• onclick="clicarObjeto()”; //eventos de ações do utilizador
• timerID = setInterval(“limparQuadroJogo()”, 2000); //eventos periódicos gerados
por timers
• clearInterval(timerID); //para terminar com um timer específico

• Callback
• uma função é invocada assincronamente quando uma determinada
operação terminar...

Parâmetros de uma função
• Parâmetros de entrada
• deﬁnem o “protocolo” de comunicação com uma função, ou seja,
explicitam os dados que a função precisa para que possa atingir o seu
objetivo;
• não há um limite formal ao número de parâmetros de uma função;
• na declaração são separados por vírgula;
• podem ser de qualquer tipo de dados.
• Parâmetro de saída
• é o valor devolvido pela função no ﬁnal da sua execução;
• return valorDevolvido;
• após um return, o código seguinte da função não é executado!

<head>
function helloWorld() //Declaração da função
{
return true; //Qual o resultado da execução desta função?
alert("Hello World!");
}
</script>
</head>
<body>
helloWorld();
</script>
</body>

<head>
function helloPeople(name) //Declaração da função
{
alert(name);
}
</script>
</head>
<body>
helloPeople(“Manel”);
</script>
</body>

Parâmetros: como funcionam?
// Na invocação das funções temos valores,
// ou seja, a lista dos valores que queremos passar para a função
nomeFunção (valor0, valor1,..., valorN);

// Na declaração da função definimos os parâmetros.
// Na sua execução, os parâmetros são transformados em variáveis da função.
// Cada parâmetro é inicializado com o valor passado na respetiva posição.
function nomeFunção(param0, param1,..., paramN)
{
// código da função
// por exemplo, aqui, “param0” é uma variável cujo valor inicial é “valor0”
}

Funções: exemplo 3 - passagem de parâmetros
<head>
{
alert(name);
}
nesta invocação da função, ao parâmetro
</script>
“name” é atribuído o valor inicial “Manel”
</head>
<body>
</script>
</body>

<head>
{
alert(name);
}
</script>
</head>
<body>
helloPeople(“Maria”);
</script>
</body>

Funções: exemplo 5 - qual o resultado?
<head>
function incValores(x, y) //Declaração da função
{
x++;
y++;
alert(x + “ “ + y); // ??
}
</script>
</head>
<body>
var a = 4;
var b = 8;
alert(a + “ “ + b); // ??
incValores(a, b);
alert(a + “ “ + b); // ??
</script>
</body>

Funções: exemplo 6 - qual o resultado?
<head>
function incValores(a, b) //Declaração da função
{
a++;
b++;
alert(a + “ “ + b); // ??
}
</script>
</head>
<body>
var a = 4;
var b = 8;
alert(a + “ “ + b); // ??
incValores(a, b);
alert(a + “ “ + b); // ??
</script>
</body>

T10_LM3: Subalgoritmos/funções (2013-2014)

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à T10_LM3: Subalgoritmos/funções (2013-2014)

Similaire à T10_LM3: Subalgoritmos/funções (2013-2014) (20)

Plus de Carlos Santos

Plus de Carlos Santos (20)

Dernier

Dernier (20)

T10_LM3: Subalgoritmos/funções (2013-2014)