Funções em JavaScript: Definição e Uso
Traduzido por
ScribdTranslationsFunções em JavaScript: Definição e Uso
Traduzido por
ScribdTranslationsCapítulo 3.
AS FUNÇÕES EM JAVASCRIPT 2022
Cap 3. AS FUNÇÕES EM JAVASCRIPT
Objetivos do terceiro capítulo:
Ao final deste capítulo, os estudantes serão capazes de:
DEFINIR O QUE É UMA FUNÇÃO
APRENDER A CRIAR E A UTILIZAR FUNÇÕES SIMPLES.
I. Apresentação das funções JavaScript
Nesta nova seção, vamos estudar outra estrutura básica indispensável do
JavaScript: as funções. Por enquanto, vamos nos contentar em definir o que é uma
função e aprender a criar e a usar funções simples.
Uma função é um grupo de linha(s) de código de programação destinado a
executar uma tarefa bem específica e que poderemos, se necessário, usá-la a
várias vezes. Além disso, o uso das funções melhorará grandemente a
legibilidade do seu roteiro.
1. Apresentação das funções JavaScript predefinidas
Em Javascript, existem dois tipos de funções:
. As funções próprias de Javascript. Elas são chamadas de "métodos". Elas estão associadas
a um objeto bem particular como era o caso do método alert() com o objeto
janela.
. As funções escritas por você mesmo para as necessidades do seu script.
As funções definidas na linguagem são chamadas de funções pré-definidas ou funções prontas.
à l'emploi pois é suficiente apenas ligá-los para utilizá-los.
Para ser totalmente preciso, as funções predefinidas em JavaScript são métodos. Uma
método é simplesmente o nome dado a uma função definida dentro de um objeto. Para o
Neste momento, vamos considerar que são simplesmente funções.
1
Ch 3. LES FONCTIONS EN JAVASCRIPT 2022
Por exemplo, o JavaScript possui uma função chamada random() (que pertence a
o objeto matemático que estudaremos mais tarde) e que irá gerar um número decimal aleatório
entre 0 e 1 ou ainda de uma função replace() (que pertence ao objeto String) que vai nos
permissão para procurar e substituir uma expressão por outra em uma cadeia de
caracteres.
Código HTML
<!DOCTYPE html>
<html>
<Cabeça>
<title>Cours JavaScript</title>
<meta charset="utf-8">
<link rel="stylesheet" href="[Link]">
<script src='[Link]' ></script>
</head>
<body>
<h1>Titre principal</h1>
<p>Um parágrafo</p>
<p id='p1'></p>
<p id='p2'></p>
</body>
</html>
Código JS
let prez = 'Bonjour, je suis Mohamed';
[Link]() gera um número decimal aleatório entre 0 e 1 que você
*coloque aqui dentro do nosso parágrafo p id='p1'*/
[Link]('p1').innerHTML = [Link]();
/*[Link]() procura uma expressão em uma cadeia de caracteres
*e a substitui por outro. Aqui, estamos procurando "Mohamed" no let prez e
*substituímos por "Aya" antes de exibir o resultado em p id='p2'*
deixe prez2 = [Link]('Mohamed', 'Aya');
[Link]('p2').innerHTML = prez2;
2
Capítulo 3. AS FUNÇÕES EM JAVASCRIPT 2022
RESULTAT
Título principal
Um parágrafo
0,9470418728056098
Olá, eu sou Aya
O principal interesse das funções predefinidas é nos permitir realizar operações
complexos de maneira muito simples: chamando-os, simplesmente.
De fato, você precisa entender bem que por trás desses nomes de funções se escondem
códigos às vezes longos e complexos que serão executados quando chamamos a função e que
vão permitir realizar uma operação precisa (gerar um número aleatório, etc.).
Além disso, o código de uma função é reutilizável: isso significa que poderemos
appeler une même fonction autant de fois qu’on le souhaite afin qu’elle accomplisse plusieurs
vez a mesma operação.
Para executar o código escondido por trás da função, basta chamá-la ou 'invocá-la'.
Para fazer isso, basta escrever o nome da função seguido de um par de parênteses e
eventualmente precisar argumentos entre os parênteses.
Os argumentos de uma função são valores que vamos passar para a nossa função para que
que ela funcione normalmente ou para especificar o comportamento que deve ter
adotante. Algumas funções não vão necessitar de argumentos, outras vão ter
precisa de um argumento, outros de dois, etc. Além disso, alguns argumentos vão ser
obrigatórios enquanto outros serão facultativos.
Por exemplo, no caso da nossa função replace(), será necessário fornecer como primeiro argumento
a expressão a ser pesquisada e substituída e, como segundo argumento, a expressão de substituição
para que a função funcione corretamente.
3
Capítulo 3. AS FUNÇÕES EM JAVASCRIPT 2022
2. As funções personalizadas
Além das numerosas funções JavaScript predefinidas e prontamente utilizáveis, nós
podemos criar nossas próprias funções em JavaScript quando quisermos realizar uma
tarefa muito precisa.
Para poder usar uma função personalizada, na prática, já é necessário defini-la.
Definição de uma função
Para definir uma função, vamos usar a palavra-chave function seguida do nome que desejamos
dar à nossa função então de um par de parênteses nos quais podemos
eventualmente definir parâmetros e finalmente de um par de chaves em que
on va placer le code de notre fonction.
A sintaxe de uma declaração de função é a seguinte:
function nom_de_la_fonction(arguments) {
... código das instruções ...
A chamada de uma função
Uma vez que nossa função estiver definida, só precisaremos chamá-la para usá-la.
A chamada de uma função é feita da forma mais simples do mundo pelo nome da função (com os
parênteses).
Seja por exemplo nom_de_la_fonction();
É necessário ter em mente, de forma lógica (pois o interpretador lê seu script de cima para baixo), que
sua função deve estar bem definida antes de ser chamada.
4
Capítulo 3. AS FUNÇÕES EM JAVASCRIPT 2022
Vamos imediatamente ver como fazer na prática.
Código HTML
<!DOCTYPE html>
<html>
<cabeça>
<title>Cours JavaScript</title>
<meta charset="utf-8">
<link rel="stylesheet" href="[Link]">
<script src='[Link]' ></script>
</head>
<body>
<h1>Titre principal</h1>
<p>Um parágrafo</p>
<p id='p1'></p>
<p id='p2'></p>
</body>
</html>
Code JS
/*Definimos duas funções personalizadas. */
A função aleatória() utiliza a função (método) random().
A função multiplicacao() multiplica dois números entre si.
Usamos uma instrução return para que nossas funções, uma vez chamadas,
*retornam o resultado de seu cálculo para que possamos usar esse resultado*
function aleatória(){
retornar [Link]() * 100;
}
função multiplicação(nombre1, nombre2){
//Atenção: os '+' são usados para concatenação!
retornar nombre1 + ' * ' + nombre2 + ' = ' + (nombre1 * nombre2);
}
Chamamos ou 'invocamos' ou ainda 'executamos' nossas funções e colocamos os
*resultados retornados nos parágrafos p id='p1' e p id='p2' de nosso
*arquivo HTML.
Aqui fornecemos dois argumentos para multiplicação() para que a função
*executa normalmente. Esses argumentos vão substituir os parâmetros*
[Link]('p1').innerHTML = aleatoire();
[Link]('p2').innerHTML = multiplication(5, 10);
RESULTAT
Título principal
Um parágrafo
40.592362809005245
5 * 10 = 50
5
Cap 3. AS FUNÇÕES EM JAVASCRIPT 2022
Os nomes das funções seguem as mesmas regras que os das variáveis. Portanto, você pode
dê o nome que você quiser à sua função desde que comece com um
letra, não contém espaços nem caracteres especiais e não está já sendo utilizado nativamente por
o JavaScript.
Aqui, criamos duas funções que chamamos de aleatorio() e multiplicacao(). Entre os
accolades, definimos o código que deverá ser executado quando chamamos nossas funções.
O objetivo da nossa função aleatória() vai ser retornar um número aleatório entre 0 e 100.
Para isso, começamos por usar random() que retorna um número aleatório entre
0 e 1 e multiplicamos o valor retornado por 100 para ter um número entre 0 e 100 tudo
simplesmente.
Em seguida, colocamos o resultado no parágrafo com o id='p1' do arquivo HTML fazendo
apelo ao script JavaScript.
Este primeiro exemplo de criação de função tem como objetivo mostrar que poderemos
executar uma função dentro de outra função sem problemas.
Observe que também usamos aqui para nossas duas funções uma instrução return. Esta
A instrução permitirá que nossas funções retornem um valor que poderemos então
manipular. Nós o estudaremos em detalhes mais tarde.
O objetivo da nossa segunda função multiplicação() é retornar o resultado da
multiplicação de dois números desconhecidos durante a definição da função.
Aqui, então será necessário passar esses dois números para nossa função quando a chamarmos para que ela
pudesse multiplicá-los e retornar o resultado. Ao chamar, vamos então passar esses
nomes nos argumentos da nossa função, entre parênteses.
No entanto, estamos aqui diante de um problema: como explicitar o fato de que nossa função deve
multiplicar dois números entre si quando não os conhecemos de antemão?
Nous allons pour cela utiliser ce qu’on appelle des paramètres. Les paramètres des fonctions
são "nomes de empréstimo" que serão substituídos pelos valores efetivos passados como argumento
quando chamamos nossa função.
6
Capítulo 3. AS FUNÇÕES EM JAVASCRIPT 2022
A ideia aqui é que podemos dar qualquer nome aos nossos parâmetros: eu os chamo aqui
"nome1" e "nome2", mas eu poderia muito bem chamá-los de "Salah" e "Math" ou "
x » e « y ». O importante será manter os mesmos nomes entre os parênteses e no
código da função.
Mais uma vez, quando chamamos nossa função, os argumentos passados (ou seja,
os valores efetivos) irão substituir os parâmetros.
Bem obviamente, as funções que acabamos de criar não são muito úteis aqui. No entanto, ele
É preciso começar com algo e dominar a base para criar coisas maiores.
mais complexos! Um pouco de paciência: estamos chegando lá.
3. Recapitulação sobre as funções
Aqui está um pequeno resumo das coisas importantes a lembrar a seu respeito sobre as funções
:
As funções são blocos de código nomeados e reutilizáveis, cujo objetivo é
de realizar uma tarefa precisa;
Existem dois grandes tipos de funções em JavaScript: as funções nativas ou
prédéfinidas (que na verdade são métodos) que só precisaremos chamar e as funções
personalizadas que vamos poder criar;
Para executar o código de uma função, é necessário chamá-la. Para isso, basta escrever seu
nom seguido de um par de parênteses, passando eventualmente argumentos dentro
os parênteses
Criamos uma função personalizada graças à palavra-chave function;
Se uma função precisa que valores sejam passados para funcionar, então definiremos
de parâmetros ao ser definido. Ao ser chamado, serão passados argumentos
que tomarão o lugar dos argumentos.
7
Capítulo 3. AS FUNÇÕES EM JAVASCRIPT 2022
II. Escopo das variáveis e valores de retorno das funções em JavaScript
Nesta parte sobre funções JavaScript, vamos estudar em detalhe a noção de valor
de volta de uma função e também vamos discutir um conceito essencial para o bom
compreensão do JavaScript e das funções: o escopo das variáveis.
1. A noção de escopo das variáveis: definição
A "alcance" de uma variável designa o espaço do script no qual ela estará acessível.
De fato, todas as nossas variáveis não estão automaticamente disponíveis a qualquer momento.
lugar em um roteiro e, portanto, nem sempre poderemos usá-los.
Em JavaScript, existem apenas dois escopos diferentes: o escopo global e o escopo
local.
Aqui, você deve lembrar bem da seguinte coisa: uma variável definida no espaço global de um
o script vai estar acessível em todo o script, mesmo a partir de uma função. No entanto, uma
variável definida em uma função só é acessível dentro dessa mesma função e não pode
não pode ser manipulada desde o espaço global do script.
Essa noção de escopo é uma noção que encontramos em muitas linguagens
informáticas. O escopo permite "proteger" certos códigos e certas variáveis ao os
inacessíveis do exterior. Isso ajuda a reforçar a segurança de um script e sua
stabilité dans le cas où on ne voudrait pas qu’un utilisateur puisse modifier la valeur d’une
variável de fora por razões de coerência e lógica do script.
2. Illustration de la notion de portée des variables en JavaScript : exemple pratique
Veja o exemplo a seguir para entender bem a noção de escopo das variáveis e os
sutilezas relacionadas à declaração de variáveis em diferentes escopos
Código HTML
<!DOCTYPE html>
<html>
<head>
<title>Cours JavaScript</title>
<metacharset="utf-8">
<link rel="stylesheet" href="[Link]">
<script src='[Link]' async></script>
</head>
<body>
<h1>Título principal</h1>
<p>Um parágrafo</p>
<pid='p1'></pid>
<pid='p2'></p>
8
Ch 3. LES FONCTIONS EN JAVASCRIPT 2022
<pid='p3'></p>
<pid='p4'></p>
<pid='p5'></p>
</body>
</html>
JS
//Declaramos duas variáveis globais
letx=5;
variar=10;
//Definimos uma primeira função que utiliza as variáveis globais
functionportee1(){
[Link]('p1').innerHTML=
Desde portee1() : <br>x =
}
//Definimos uma segunda função que define variáveis locais
functionportee2(){
leta=1;
varb=2;
[Link]('p2').innerHTML=
Desde portee2() : <br> a =
}
//Definimos uma terceira função que também define variáveis locais
functionportee3(){
letx=20;
variar=40;
[Link]('p3').innerHTML=
Desde portee3() : <br>x =
}
//Devemos lembrar de executar nossas funções!
portee1();
portee2();
portee3();
//Tentamos exibir variáveis globais e, em seguida, locais a partir do espaço global
[Link]('p4').innerHTML=
Desde o espaço global : <br>x =
[Link]('p5').innerHTML=
Desde o espaço global : <br>a =
RESULT
Título principal
Um parágrafo
Desde portee1() :
x=5
y = 10
9
Capítulo 3. AS FUNÇÕES EM JAVASCRIPT 2022
Desde portee2() :
a=1
b=2
Desde portee3() :
x = 20
y = 40
Desde o espaço global :
x=5
y = 10
Este código contém muitas coisas interessantes.
Comece já anotando que os
[Link]('{p1,p2,p3,p4,p5}').innerHTML = servem simplesmente para
colocar os resultados nos parágrafos no id especificado.
Neste script, começamos declarando e inicializando duas variáveis let x e var y.
o espaço global do nosso script e usando a nova notação com let e a antiga
comvar.
Para esta lição, vou usar sempre as duas notações para ilustrar as diferenças
sublinhados relacionados ao escopo entre essas duas maneiras de declarar variáveis.
Ensuite, nous allons créer trois fonctions qui vont utiliser des variables globales ou définir
suas próprias variáveis. Nossa função portee1() usa, por exemplo, nossas variáveis let x e var
Como essas variáveis foram declaradas no espaço global, elas são, portanto, acessíveis e
utilizáveis em todo o script e especialmente em funções.
Nossa segunda função portee2() declara suas próprias variáveis let a e var b. Essas variáveis
são, então, variáveis locais a esta função e só poderão ser usadas a partir de
essa função.
Finalmente, nossa terceira função portee3() também vai definir duas variáveis locais let
xetvar [Link], a situação é mais complexa do que anteriormente para entender, uma vez que temos
duas variáveis let x e duas variáveis var y: uma definida no espaço global e a outra definida
na função toda vez.
10
Capítulo 3. AS FUNÇÕES EM JAVASCRIPT 2022
Aqui, você deve entender bem que as variáveis let xglobal e let xlocal, embora elas
possui o mesmo nome, são duas entidades totalmente diferentes (e o mesmo para var
yglobal e local).
Neste caso, nossa função vai usar as variáveis definidas localmente em vez daquelas
definidas no espaço global.
Além disso, como as variáveis locais e globais não são as mesmas entidades, elas vão agir
independentemente e assim modificar o valor delet xlocale não modificará o valor da
variável global e vice-versa.
Vemos bem isso quando tentamos exibir os valores delet x e de var y do espaço
global : aqui, são as variáveis globais que são usadas prioritariamente e vemos que os
valeurs qu’elles contiennent n’ont pas été modifiées par la fonctionportee3().
Finalmente, tentamos exibir os valores de nossas variáveis let e var definidas localmente.
desde o espaço global. Como essas variáveis são locais, elas não são acessíveis a partir de
o espaço global e um erro será emitido pelo JavaScript nesse caso.
3. As diferenças de escopo entre as variáveis var e let em JavaScript
No exemplo anterior, não conseguimos observar nenhuma diferença de comportamento entre uma
variável declarada com a sintaxe let e uma variável declarada com var em JavaScript.
No entanto, existe uma diferença de alcance que poderemos observar ao definir
variáveis locais. De fato, quando se usa a sintaxe let para definir uma variável em
Dentro de uma função em JavaScript, a variável terá um escopo chamado "de bloco": a
a variável será acessível no bloco onde foi definida e nos blocos que o bloco
contém.
Em contrapartida, ao definir uma variável com a palavra-chave var em uma função, a variável
t terá um alcance ampliado uma vez que esta variável estará acessível em todos os blocos do
função. Vamos pegar imediatamente um exemplo para entender bem isso:
Código HTML
<!DOCTYPE html>
<html>
<cabeça>
<title>Cours JavaScript</title>
<metacharset="utf-8">
<link rel="stylesheet" href="[Link]">
<script src='[Link]'></script>
11
Cap 3. AS FUNÇÕES EM JAVASCRIPT 2022
</head>
<body>
<h1>Título principal</h1>
<p>Um parágrafo</p>
<pid='p1'></pid>
<pid='p2'></p>
<pid='p3'></pid>
<pid='p4'></p>
</body>
</html>
Código JS
functionportee1(){
letx=1;
vary=2;
se(true){
letx=5;//Variável diferente
vary=10;//Même variable qu'au dessus
[Link]('p1').innerHTML='x (dans if) = '+x;
[Link]('p2').innerHTML='y (dans if) = '+y;
}
[Link]('p3').innerHTML='x (hors if) = '+x;
[Link]('p4').innerHTML='y (hors if) = '+y;
}
portee1();
RESULT
Título principal
Um parágrafo
x (dentro do if) = 5
y (no if) = 10
x (exceto se) = 1
y (hors if) = 10
Aqui, criamos uma função portee1() que contém duas variáveis let x e var y assim como uma
condição se o código sempre vai ser executado porque seu teste está sempre validado (verdadeiro)
sempre avaliado... a verdadeira).
Na condição, definimos novamente duas variáveis let x e var y com valores
diferentes. Aqui, a variável let x definida vai bem representar uma entidade diferente daquela
definida fora da condição. Por outro lado, isso não será o caso para var y: neste
cas-là, redifinimos a mesma variável!
Ao exibir os valores das variáveis dentro e fora do loop, percebe-se
bem conta que nossas duas variáveis x são bem diferentes e armazenam bem valores
diferentes enquanto nossa variável var acaba de ser redefinida.
12
Capítulo 3. AS FUNÇÕES EM JAVASCRIPT 2022
Eu repito mais uma vez aqui: hoje, você ainda deve usar a nova sintaxe
declaração de variáveis em JavaScript usando a palavra-chave let. No entanto, eu preciso lhe
apresentar as variáveisvarcar de muitos sites e desenvolvedores continuam a usá-las.
Além disso, observe que é considerado uma má prática declarar vários
variáveis em diferentes espaços usando o mesmo nome, pois isso pode causar problemas
évidents de clarté e de legibilidade do código. Tentaremos, portanto, tanto quanto possível, evitar fazer
isso.
4. Les valeurs de retour des fonctions
Um valor de retorno é um valor devolvido por uma função uma vez que esta tenha terminado
sua execução.
Um valor de retorno é um valor único que será retornado pela função após seu
execução e que vamos poder recuperar para manipulá-la em nosso script.
Algumas funções pré-definidas retornarão um valor de retorno enquanto outras não o farão
não o envie de volta.
É sempre muito útil saber se uma função pré-definida em JavaScript vai retornar uma
valor ou não e que tipo de valor a função vai retornar uma vez que isso nos permitirá
saber o que fazer após a execução da função e eventualmente coletar o valor de
retorno para realizar diferentes operações.
Por exemplo, algumas funções JavaScript retornam o booleano verdadeiro se forem bem-sucedidas
realizar sua tarefa ou falso em caso de falha. Nesse caso, poderemos usar uma condição
em torno dessas funções para lidar e dar instruções em caso de falha de
nossa função.
Outras funções retornarão diretamente o resultado de sua ação, como a
funçãoreplace() por exemplo que vai retornar uma nova cadeia de caracteres com os
remplacements effectués.
No caso de funções personalizadas, teremos que decidir se nossa função vai
renviar um valor ou não.
Para que as nossas funções retornem um valor, será necessário usar uma instrução return.
instrução vai nos permitir retornar o resultado da função ou um valor do nosso
13
Ch 3. LES FONCTIONS EN JAVASCRIPT 2022
escolha que depois podemos ou manipular imediatamente ou armazenar em uma variável
para realizar diferentes operações com este valor.
Atenção, no entanto: a instrução return encerra a execução de uma função, o que significa
que todas as outras operações que seguem uma instrução return em uma função serão
ignoradas.
Por essa razão, sempre teremos cuidado em colocar a instrução return no final de
função, após todas as operações terem sido realizadas.
Olhe o código abaixo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Cours JavaScript</title>
<metacharset="utf-8">
<link rel="stylesheet" href="[Link]">
<script src='[Link]' async></script>
</head>
<body>
<h1>Titre principal</h1>
<p>Um parágrafo</p>
<pid='p1'></p>
<pid='p2'></p>
</body>
</html>
JS
letprez='Bonjour, je suis Mohamed';
/*Recuperamos o valor retornado por replace() que colocamos em uma
*variável chamada let resultadoSubstituir*/
letresultatReplace=[Link]('jour','soir');
//Podemos então usar nossa variável para diferentes operações
[Link]('p1').innerHTML=resultatReplace+' SALAH;
A função div() aceita dois números como argumentos e retorna o resultado
de la divisão de um pelo outro ou a mensagem "Divisão por 0 impossível"
*se o segundo número for igual a 0*
função div(a, b) {
se(b==0){
Divisão por 0 impossível
}
retorna/b;
alert('Esta mensagem nunca é exibida!');
}
}
A função prompt() abre uma caixa de diálogo que permite ao usuário
enviar dados. Aqui, pedimos dois números ao usuário e
14
Cap 3. AS FUNÇÕES EM JAVASCRIPT 2022
*coloca-os nas variáveis numero1 e numero2. Em seguida, utilizamo-los.
*como argumentos da nossa função div()*/
let nombre1 = prompt('Digite um primeiro número');
let nombre2 = prompt('Digite um segundo número');
Executamos nossa função passando os números enviados como argumento e
*exibimos o resultado no parágrafo p id='p2'*/
/***let resultatDiv = div(nombre1, nombre2);
[Link]('p2').innerHTML = resultatDiv;***/
RESULT
Título principal
Um parágrafo
Boa noite, eu sou Mohamed SALAH
Neste exemplo, começamos usando a função JavaScript predefinida replace() em
utilizando a sintaxe [Link](). Você não precisa entender essa sintaxe para
o momento, mas para simplificar, você pode lembrar que precisamos de uma cadeia de
caracteres para executar replace() e essa cadeia de caracteres está aqui contida em nosso
variávelprez.
Sabe-se que replace() retorna uma nova cadeia de caracteres com as substituições.
demandados em valor de retorno. Aqui, recuperamos esse valor de retorno em uma variável let
resultado que usamos em seguida.
Abaixo, criamos uma função div() cujo papel é dividir um número por outro.
No código da nossa função, isolamos o caso em que o denominador é igual a 0. Nesse caso,
nossa função retorna a string "divisão por 0 impossível". Em todos os outros casos, nossa
função retorna o resultado da divisão.
Observe que também coloquei uma instrução alert() após return no else da minha função
para mostrar a você que ela nunca será executada (pois ela está após
a instrução return que finaliza a função.
Finalmente, pedimos aos usuários que nos enviem dois números que vamos passar em
argumentos da nossa função div(). Para isso, usamos uma função prompt(). Esta função
abra uma caixa de diálogo e permita que os usuários nos enviem dados.
15
Ch 3. LES FONCTIONS EN JAVASCRIPT 2022
III. Funções anônimas, auto-invocadas e recursivas em JavaScript
Nesta nova lição, vamos aprofundar um pouco mais em nosso estudo das funções
JavaScript ao analisarmos o caso das funções anônimas e como chamá-las assim
sobre as funções recursivas.
1. O que é uma função anônima e quais são os casos de uso?
As funções anônimas são, como o próprio nome indica, funções que não vão
possuir um nome. De fato, ao criarmos uma função, não somos obrigados a lhe
dar um nome propriamente dito.
Geralmente, usaremos funções anônimas quando não precisarmos chamar nosso
função pelo seu nome ou seja, quando o código da nossa função é chamado apenas em um
local no nosso script e não é reutilizado.
Em outras palavras, as funções anônimas muitas vezes nos permitirão simplesmente
ganhar um pouco de tempo na escrita do nosso código e (embora isso seja debatível) a
tornar mais claro sem poluí-lo com nomes desnecessários.
2. Criação e execução ou chamada de uma função anônima
Vamos poder criar uma função anônima da mesma forma que uma função clássica, em
utilisant le mot cleffunctionmais en omettant le nom de la fonction après.
Veja o código abaixo:
Nós declaramos aqui uma função anônima, portanto o papel é executar uma
função alert() que vai ela mesma retornar a mensagem "Alerta executado por uma função"
anônimo" em uma caixa de alerta.
Neste nível, no entanto, enfrentamos um problema: como chamar uma função que
não tem nome?
Teremos várias maneiras de fazer em JavaScript. Para executar uma função anônima, nós
poderá, em particular:
Armazenar o código da nossa função em uma variável e usar a variável como uma
função ;
Auto-invocar nossa função anônima;
Utilizar um evento para disparar a execução da nossa função.
3. Executar uma função anônima usando uma variável
Vamos ver essas diferentes formas de fazer em detalhe, começando pela mais simples: fechar
a função em uma variável e usar a variável como uma função.
HTML
16
Capítulo 3. AS FUNÇÕES EM JAVASCRIPT 2022
<!DOCTYPE html>
<html>
<head>
<title>Cours JavaScript</title>
<metacharset="utf-8">
<metaname="viewport"
content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="[Link]">
<script src='[Link]' async></script>
</head>
<body>
<h1>Título principal</h1>
<p>Um parágrafo</p>
</body>
</html>
JS
deixe alerta = função(){}
alert('Alerte executada por uma função anônima');
};
/*Comentário de código para evitar uma execução intempestiva.
Remova o comentário para que funcione
alerte();
*/
RESULT
Título principal
Um parágrafo
Aqui, atribuímos nossa função anônima a uma variável nomeada
let alerte. Nossa variável contém
portanto aqui uma função complexa que agora poderemos usar
como se fosse uma função em si mesma.
Para "chamar nossa variável" e para executar o código da função anônima que ela
contém, será necessário escrever o nome da variável seguido de um par de parênteses. Esses
parenteses são chamadas de "chamadoras" porque servem para executar a função
que os precede.
4. Auto-invocar uma função anônima
A segunda maneira de executar uma função anônima será criar uma função anônima
que vai se auto-invocar, ou seja, que vai se invocar (ou chamar ou ainda se executar) ela-
mesmo desde sua criação.
Para criar uma função auto-invocada a partir de uma função, será simplesmente necessário
rajouter un couple de parenthèses autour de la fonction et un second après le code de la
função.
Da mesma maneira, o parêntese após a função vai fazer com que a
a função chama a si mesma.
HTML
<!DOCTYPE html>
<html>
<head>
17
Capítulo 3. AS FUNÇÕES NO JAVASCRIPT 2022
<title>Cours JavaScript</title>
<metacharset="utf-8">
<metaname="viewport"
content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="[Link]">
<script src='[Link]' async></script>
</head>
<corpo>
<h1>Título principal</h1>
<p>Um parágrafo</p>
</body>
</html>
JS
/*Comentário de código para evitar uma execução intempestiva (abertura das caixas de alerta). Remova o
commentaire pour qu'il fonctionne normalement
//Função anônima auto-invocada
(function(){alert('Alerta executada por uma função anônima')})();
//Função nomeada auto-invocada
(function olá(){alert('Olá!')})();
*/
RESULT
Titre principal
Um parágrafo
Você pode anotar duas coisas sobre funções auto-invocadas. Primeiro, você
deve saber que a noção de auto-invoação não se restringe apenas a funções anônimas:
nós vamos conseguir auto-invocar uma função que possui um nome. Entretanto, em
pratique, isso muitas vezes não terá muito interesse (já que se uma função tem um nome,
podemos simplesmente chamá-lo usando este nome).
Em seguida, você deve entender bem que ao auto-invocar uma função, a função
executa-se imediatamente e, portanto, não temos flexibilidade em relação a isso: uma função
A função auto-invocada será sempre executada logo após sua declaração.
5. Executar uma função anônima quando um evento é acionado
Finalmente também poderemos conectar nossas funções anônimas ao que chamamos de "
gerentes de eventos » em JavaScript.
A linguagem JavaScript de fato nos permitirá responder a eventos, ou seja,
executar certos códigos quando um evento ocorre.
O JavaScript permite responder a muitos tipos de eventos: clique em um elemento,
pression de uma tecla em um teclado, abertura de uma janela, etc.
Para indicar como queremos responder a tal evento, usamos gerenciadores
eventos que são funções que executarão tal código quando tal evento
acontece.
Les évènements vont faire l’objet d’une prochaine partie et je ne veux pas trop en parler pour
o momento. Observe simplesmente que vamos poder passar uma função anônima para um
18
Capítulo 3. AS FUNÇÕES EM JAVASCRIPT 2022
gerente de evento que o executará assim que o evento for acionado que o
gestor responsável.
Para um exemplo concreto do funcionamento geral da gestão de eventos e de
a utilização de funções anônimas, você pode ver o exemplo abaixo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Cours JavaScript</title>
<metacharset="utf-8">
<metaname="viewport"
content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="[Link]">
<scriptsrc='[Link]'async></script>
</head>
<corpo>
<h1>Título principal</h1>
<p>Um parágrafo</p>
Parágrafo 1
<pid='p2'>Parágrafo 2</p>
</body>
</html>
JS
//Representam nossos parágrafos p id='p1' e p id='p2'
letpara1=[Link]('p1');
letpara2=[Link]('p2');
/*Usa-se a função addEventListener() que serve como gerenciador
*do evento. Aqui, pedimos para executar a função anônima passada em
*segundo argumento durante o evento "click" que o elemento
*p id='p1' ou p id='p2'*/
[Link]('click',function(){alert('Clique no parágrafo id=p1');});
[Link]('click',function(){alert('Clic sur p id=p2');});
RESULTADO
Titre principal
Um parágrafo
Parágrafo 1
Paragraphe 2
Ce code contient beaucoup de notions que nous n’avons pas étudiées et que je ne vais pas
expliquer en détail pour le moment. Tout ce que vous devez savoir ici est que la fonction (ou
mais précisément la méthode addEventListener() permet d'exécuter un code lors de la capture
(no momento da ativação) de um evento particular que vamos especificar primeiro
argumento.
6. As funções recursivas
19
Capítulo 3. AS FUNÇÕES EM JAVASCRIPT 2022
Para concluir esta parte, gostaria também de apresentar funções que possuem uma
estrutura particular e que chamamos de funções recursivas.
Uma função recursiva é uma função que se chama a si mesma dentro de seu código.
Assim como para os loops, as funções recursivas nos permitirão executar uma
ação em loop até que uma certa condição de saída seja verificada.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Cours JavaScript</title>
<metacharset="utf-8">
<metaname="viewport"
content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="[Link]">
<scriptsrc='[Link]'async></script>
</head>
<corpo>
<h1>Título principal</h1>
<p>Um parágrafo</p>
<pid='p1'></p>
</body>
</html>
JS
functiondecompte(t) {
se(t>0) {
[Link]('p1').innerHTML+=t+'<br>';
retornar decompte(t-1);
}else{
retorne;
}
};
decompte(7);
RESULT
Titre principal
Un paragraphe
7
6
5
4
3
2
1
Aqui, nossa função conta() é uma função recursiva: ela vai se chamar a si mesma em
son code. A função aceita um número como argumento. Se esse número for estritamente positivo,
ele é exibido no parágrafo id='p1' e a função é executada novamente removendo 1
ao valor passado anteriormente e isso até chegar a 0.
20