Aula 3 – Funções em JavaScript

Sergio Zumpano Arnosti

𝑓 𝑥 = 𝑎0 + 𝑎𝑛 cos𝑛𝜋𝑥

𝐿+ 𝑏𝑛 sin

𝑛𝜋𝑥

𝐿

∞

𝑛=1

𝑔(𝑥) = 𝑥2𝑑𝑥1

0

1 + 𝑥 𝑛 = 1 +

𝑛𝑥

1!+𝑛 𝑛 − 1 𝑥2

2!+ ⋯

tan 𝜃 =sin 𝜃

cos 𝜃

sinh 𝑥

ℎ 𝑥, 𝑦 = 𝑥3𝑑𝑥 𝑦4𝑑𝑦

𝑓 𝑥 =𝑥 24 1

𝑧 𝑥 =𝑑𝑦

𝑑𝑥

𝐴 𝑧, 𝑤 =𝑤 ⋯ 10⋮ ⋱ ⋮10 ⋯ 10

. 𝑧

O que são funções na matemática ?

O que são funções em linguagens de programação ?

• Podemos dizer que funções/procedimentos são sub-rotinas que executam uma tarefa em particular.

• As linguagens de programação atuais possuem

formas de se criar sub-rotinas. • O programador pode criar as suas próprias

funções. • A própria linguagem tem algumas sub-rotinas

prontas que facilitam o trabalho do programador.

• Sub-rotina é um algoritmo.

Mas, pra que servem as funções ?

<script type="text/javascript">

var notaP1;

var notaP2;

var media;

notaP1 = 6.0;

notaP2 = 8.0;

media = (2*notaP1 + 3*notaP2)/5;

document.write("Média de Matemática: " + media + "<br/>");

notaP1 = 9.0;

notaP2 = 8.0;

media = (notaP1 + 2*notaP2)/3;

document.write("Média de Ciências: " + media + "<br/>");

notaP1 = 6.0;

notaP2 = 8.0;

media = (2*notaP1 + 5*notaP2)/7;

document.write("Média de Português: " + media + "<br/>");

</script>

• Organiza a programação (Modulariza).

• Evita que um mesmo código tenha que ser

reescrito várias vezes.

• Reutilização.

• Facilita a leitura e manutenção do código.

• Dividir em pequenas partes e conquistar.

Definindo um função em JS

function nomeDaFuncao (arg1, arg2, ..., argN){

/* Código JavaScript a ser executado */

}

Rotina principal faz uma

chamada a sub-rotina (função).

Função executa a sua rotina e retorna à principal.

Como funciona ?

Retorno

Chamada

Vamos fazer um exemplo simples ?

Exemplo

function cumprimentar(){

alert("Olá, como vai você ?");

}

Parâmetros ou Argumentos

function nomeDaFuncao (arg1, arg2, ..., argN){

/* Código JavaScript a ser executado */

}

Valores passados na chamada da função para serem utilizados

dentro da rotina a ser executada, devem ser separados por

vírgulas.

Retorno de valores

• Procedimento: Não retorna valor algum, apenas executa uma ação.

• Função: Executa uma rotina e obrigatoriamente retorna um valor.

• Método: Análogo a funções e procedimentos, porém é executado por um objeto para alterar seu estado.

Retorno de valores

function nomeDaFuncao (arg1, arg2, ..., argN){

/* Código JavaScript a ser executado */

return valor;

}

Utilizamos a palavra-chave return seguida do valor de

qualquer tipo a ser retornado para a rotina principal.

Expressões com função

var nomeDaFunção = function (arg1, ..., argN){

/* Código JavaScript a ser executado */

return valor;

}

Escopo var x = 10;

function y(){

document.write(x);

var x = 20;

document.write(x);

}

y();

document.write(x);

sayHello();

function sayHello(){

document.write(" Olá! ");

}

sayHello();

var sayHello = function()

{

document.write("Olá!");

};

Escopo

• A declaração de uma variável está ligada ao início de seu escopo.

• As variáveis dentro de uma função fazem parte de um

escopo local, assim como os seus argumentos.

• Posso acessar uma variável externa à função desde que não exista um escopo local para uma variável com o mesmo nome.

Resumindo, para construir funções devemos definir:

• Nome da função Deve ser objetivo e relacionado a ação executada pela função.

• Lista de parâmetros Verificar quais valores a função deve receber para executar a sua rotina.

• Código JS a ser executado Montar o código específico. Não é uma boa prática imprimir resultados dentro da função, preferível retornar .

Agora que sabemos os princípios para se definir uma função,

Vamos fazer um exercício mais completo !!!

<script type="text/javascript">

var notaP1;

var notaP2;

var media;

notaP1 = 6.0;

notaP2 = 8.0;

media = (2*notaP1 + 3*notaP2)/5;

document.write("Média de Matemática: " + media + "<br/>");

notaP1 = 9.0;

notaP2 = 8.0;

media = (notaP1 + 2*notaP2)/3;

document.write("Média de Ciências: " + media + "<br/>");

notaP1 = 6.0;

notaP2 = 8.0;

media = (2*notaP1 + 5*notaP2)/7;

document.write("Média de Português: " + media + "<br/>");

</script>

Transforme em função !

Funções aninhadas e closures function externa(x) {

function interna(y) {

return x + y;

}

return interna;

}

func_interna = externa(3);

result = func_interna(5); // returns 8

result1 = externa(3)(5); // returns 8

Características interessantes O Array (vetor) arguments :

• Mesmo que a função não receba argumentos em sua declaração,

podemos passar valores a ela e chamá-los com o vetor arguments.

• Serve para definir funções que recebam qualquer número de

argumentos.

• Como usar ?

nomeDaFuncao.arguments.length – dá o número de argumentos

nomeDaFuncao.arguments[i] – pega o valor do vetor na posição i

Funções interessantes

Math.random(); /* Gera números randômicos entre 0 e 1 */ Math.floor(n); /* Arredonda um número para o maior inteiro menor que n */ eval("string"); /* Avalia o valor da string, se não for uma string retorna o valor inalterado */ setTimeout("função", t); /* Após um certo tempo t, executa a função passada */

Referências

Mozilla Developer Network. Function and functions scope Disponível em: < https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope#Scope_and_the_function_stack > Acesso em: 07 maio 2014. ALLARDICE, James. Explaining function and variable hoisting in JavaScript < http://jamesallardice.com/explaining-function-and-variable-hoisting-in-javascript/ > Acesso em: 07 maio 2014. W3schools.com. JavaScript and HTML DOM Reference < http://www.w3schools.com/jsref/default.asp > Acesso em: 07 maio 2014.

Obrigado !!!