Algoritmos com java script

Sumário
Sobre este material …………………………………………………………… 3
Sobre o autor …………………………………………………………………... 4
Capítulo 1 – Algoritmos ………………………………………………………. 5
Capítulo 2 – Introdução à programação …………………………………… 10
Capítulo 3 – Entrada e saída de dados ………………………………….…. 20
Capítulo 4 – Estruturas de controle ……………………………………...… 26
Capítulo 5 – Arranjos ………………………………………………………….. 42
Capítulo 6 – Funções ………………………………………………………….. 50
2
https://codesilva.github.io

Sobre este material
Este material tem o objetivo de lhe introduzir conceito básicos de
algoritmos e programação. Por mais que você nunca tenha ouvido
falar sobre estes assuntos.
Se você já possui experiência, não tem problema. Use este
material para complementar seus conhecimentos e para começar a
conhecer a linguagem de programação JavaScript.
Espero poder contribuir com seu aprendizado.
3

Sobre o autor
Me chamo Edigleysson Silva e sou formado técnico em informática
e aluno de Ciência da Computação pelo Instituto Federal de
Ciência e Tecnologia do Ceará.
Sou desenvolvedor web há cinco anos e
durante todo esse tempo tenho concentrado
meus esforços em aprender e compartilhar
conhecimentos sobre JavaScript.
Já trabalhei com outras linguagens como: C#,
Java, Python e PHP. No entanto JavaScript foi
a que mais me encantou. Atuei em projetos
de aplicações web, e-commerce e desenvolvimento mobile, um
dos apps inclusive sendo apresentado na Clinton Foundation.
Sou voluntário Byte Girl, uma comunidade em que temos a
principal premissa, a inserção de mulheres no mundo da
tecnologia.
4

Capítulo 1 – Algoritmos
Objetivos do capítulo
• Definir algoritmo
• Descrever o que um algoritmo deve ter
• Formas de representação de um algoritmo
O que é um algoritmo?
O conhecimento de algoritmos pode parecer algo bem distante da
realidade de muitos. Se você nunca se deparou com essa palavra
pode achar um pouco estranho e até sofisticado demais, mas
diferente do que é de senso comum, os algoritmos fazem parte de
nossa rotina. Eles estão presentes nas mais variadas tarefas,
como: escovar os dentes, preparar um bolo, etc.
Mas não nos confundamos. Algoritmos não se referem a tarefas e
sim a uma sequência de passos que devem ser seguidos para a
conclusão destas tarefas.
Partindo dessas afirmações podemos chegar em uma simples
definição e dizer que um algoritmo é uma sequência finita,
ordenada e não ambígua de passos para solucionar determinado
problema ou realizar uma tarefa.
Mais formalmente, temos a definição dada por Alan Turing e Alonzo
Church no ano de 1936, como segue:
“Um algoritmo é um conjunto não ambíguo e ordenado de
passos executáveis que definem um processo finito”
Veja abaixo um exemplo de algoritmo:
5

Algoritmo para fritar um ovo
1. Pegue uma frigideira
2. Acenda o fogo
3. Coloque a frigideira no fogo
4. Coloque óleo na frigideira
5. Abra a geladeira
6. Pegue um ovo
7. Quebre a casca do ovo
8. Coloque o ovo na frigideira
9. Jogue a casca fora
10. Adicione sal a gosto
11. Espere até que o ovo esteja pronto
12. Apague o fogo
O algoritmo acima foi definido em 12 passos que devem ser
seguidos para uma simples tarefa. Veja que esta sequência é um
tanto detalhada, mas isso é necessário para se evitar
ambiguidades.
O que um algoritmo deve ter?
Todo algoritmo pode ser dividido em três partes simples, são elas:
entradas, processamento e saída. No algoritmo que vimos
anteriormente as entradas seriam o ovo e a frigideira por exemplo.
A preparação do ovo é o processamento e no final temos a saída
que é o ovo frito.
Numa ambientação de computação, um algoritmo deve possuir:
• Definição – Os passos devem ser bem definidos, com clareza
e sem ambiguidades.
• Finitude – O algoritmo deve possuir um fim.
6

• Efetividade – As operações do algoritmo devem ser básicas o
suficiente para que possam em princípio, serem executadas
de maneira exata e em tempo finito.
• Entradas – Entradas são os insumos que permitirão ao
algoritmo fazer o processamento e gerar uma saída.
• Saídas – Resultado Final
Formas de representação
Um algoritmo pode representado de diferentes formas. Aqui
destacamos três que são:
• Descrição Narrativa
• Fluxograma
• Pseudocódigo
Descrição Narrativa
Nesta representação os algoritmos são expressos em linguagem
natural (português, inglês, espanhol, etc.). O principal ponto
positivo aqui é que desse modo fica muito mais simples para que
humanos entendam do que o algoritmo está tratando. Todavia, em
nossa comunicação as palavras podem ter vários significados e
isso pode gerar ambiguidades, ou seja, é preciso ter mais atenção
na hora de descrever seu algoritmo na representação narrativa.
Fluxograma
Nesta representação se utiliza de formas geométricas variadas,
cada uma contém um significado específico para a descrição de
um algoritmo. Esse método de representação é bastante útil, pois
nos dá uma visão gráfica do algoritmo, mostrando inclusive o fluxo
7

a ser seguido. Veja abaixo um exemplo de um algoritmo
representado em fluxograma:
Figura 01 – Fluxograma
Esta é uma representação de um fluxograma que calcula a média
de um aluno e no final mostra se este aluno foi aprovado ou
reprovado, baseado no valor da média.
Pseudocódigo
A representação em pseudocódigo permite que o algoritmo seja
descrito em uma linguagem intermediária, que fica entre a
linguagem natural que é usada na Descrição Narrativa e a
Linguagem de Programação, que é o que o computador consegue
interpretar. No decorrer do ebook nós utilizaremos pseudocódigo e
veremos mais adiante como funciona.
8

Resumo
Neste capítulo foram introduzidos conceitos básicos acerca de
algoritmos e programação. Além disso foram mostradas algumas
forma de se fazer a representação de algoritmos.
Conseguimos entender que algoritmos estão presentes em muitas
tarefas que fazemos em nosso cotidiano, assim como: fritar um
ovo, fazer um bolo, calcular uma média de aluno, etc.
Nos capítulos posteriores veremos como faremos nosso próprios
algoritmos utilizando computadores para isso.
9

Capítulo 2 – Introdução à programação
• Entender como utilizaremos computadores para resolver
problemas
• Entender o que é uma linguagem de programação
• Conhecer o JavaScript
• Entender o que é necessário para se programar
computadores
• Começar as práticas
Usando computadores para resolver problemas
Para algumas pessoas, e esse pode ser o seu caso, o simples
temo “computador” pode soar um tanto técnico. Agora pare para
refletir um pouco e perceba que muito possivelmente você utiliza
computadores todos os dias.
Muito provavelmente você utiliza pelo menos um computador, seu
smartphone, durante muitas hora do dia. Dispositivos como sua
smart TV contém no mínimo um computador, um carro pode conter
por volta de 30 computadores na forma de microprocessadores
embutidos que regulam o nível combustível, combustão do motor,
transmissão, estabelecida, etc.
Espero ter clareado sua mente e conseguido lhe mostrar que os
computadores estão mais presentes em nossa vida do que
imaginamos. Computadores existem para resolver problemas de
forma rápida e com menos esforço do que se fosse feito
manualmente. É por isso que utilizaremos computadores para que
possamos entender melhor o funcionamento dos algoritmos.
10

Linguagens de Programação
Para que possamos entender os algoritmos por meio dos
computadores, precisamos primeiro saber como poderemos nos
comunicar com eles. Um computador é uma máquina que recebe
comandos e segue esse comandos de forma metódica, não
fazendo nada além do que foi programado. Para que possamos
definir o que a máquina fará precisaremos conhecer as chamadas,
linguagens de programação.
Essas linguagens se assemelham aos idiomas, possuindo
semântica e sentenças lógicas que devem ser seguidas de forma
estrita para que a comunicação possa ser estabelecida com
sucesso. Existem diversos tipos de linguagens, para os mais
variados objetivos e a escolha de qual utilizar pode variar de
acordo com a necessidade de desenvolvimento.
Programar um computador consiste basicamente em escrever
comandos em um arquivo. Comandos esses que seguirão
determinadas regras para que possam ser entendidos pela
máquina e nós veremos isso com mais detalhes no decorrer do
livro.
JavaScript para trabalhar com algoritmos
Na hora de se escolher uma linguagem você terá muitas opções,
pois existem muitas linguagens, com objetivos distintos.
Para o propósito deste material utilizaremos a linguagem de
programação JavaScript, pois é bastante simples e é muito
utilizada hoje em dia.
11

Benefícios de se aprender e utilizar JavaScript
Escolhemos esta linguagem de programação porque sua ascensão
tem acontecido gradualmente. Além de tudo queremos que você
consiga acompanhar os exemplos de forma simples e direta e isso
será proporcionado com o JavaScript, pois para os propósitos
deste livros, você precisará somente de um navegador web e um
editor de textos comum.
Lógica, operadores e variáveis
Para resolver problemas utilizando linguagens de programação nós
precisaremos entender basicamente três conceitos, são eles:
Lógica
Podemos fazer uma analogia entre escrever um programa e
argumentar com alguém. E de forma simples é o que estaremos
fazendo, argumentando com a máquina e é por isso que o uso da
lógica é necessário. Pois precisaremos realizar operações,
compreender sentenças lógicas e também conseguir compreender
os fluxos do programa. Veremos um pouco mais sobre isso nos
próximos capítulos.
Variáveis
Quando estamos resolvendo algoritmos computacionais precisamo
utilizar variáveis para armazenar tipos de informação. Fazendo aqui
mais uma analogia, uma variável é como se fosse uma caixa onde
informações são guardadas. Virtualmente em um programa
podemos ter infintas caixas.
Definir uma variável em JavaScript é algo bem simples:
var[1]
ebook[2]
;[3]
12

[1] Palavra reservada que informa para a máquina que ali está
sendo criada uma variável
[2] Identificador da variável. É por esse identificador que será
utilizado para realizar operações em outros setores do programa. É
como se fosse o nome daquela variável.
[3] Delimita o fim de um comando.
Operadores
Por fim, você precisar conhecer os operadores. Como o nome
sugere, eles permitem que operações sejam realizadas. Por
exemplo, adicionar valores para variáveis. Na tabela abaixo é
possível visualizar alguns operadores que podem ser utilizados em
JavaScript.
Operador Descrição Exemplo
= Atribui valor a uma variável var numero = 10;
+
Realiza a soma de dois
valores
5 + 2 = 7;
-
Subtrai o operando da direita
do operando da esquerda
5 – 2 = 3;
* Multiplica os dois operandos 5 * 2 = 10;
/
Divide o operando da
esquerda pelo da direita
5 / 2 = 2.5;
**
Calcula o valor exponencial
do operando da direita pelo
operando da esquerda.
5 ** 2 = 25;
Tabela 01 – Operadores matemáticos
Esses são apenas alguns operadores da linguagem. Durante o
decorrer deste capitulo ainda, veremos alguns outros operadores.
13

Comparações são necessárias
Os operadores que vimos anteriormente nos permitem definir
valores para varáveis e realizar operações matemáticas. No
entanto só isso não é o suficiente, pois em determinados
momentos é preciso fazer algumas comparações entre valores.
Para isso nós precisamos de operadores relacionais, que
comparam dois valores e nos dão um resultado binário, ou seja
podendo ser Verdadeiro (TRUE) ou Falso (FALSE). Por exemplo,
se alguém lhe pergunta:
5 é maior que 4?
Essa é uma comparação e nesse caso a resposta é Verdadeiro.
Podemos ver que o “maior que” é um dos operadores relacionais,
porém alguns outros são necessários. Veja a tabela abaixo:
==
Determina se dois valores
são iguais. Observe que o
operador relacional usa
dois sinais de igual. Um
erro cometido por muitos
desenvolvedores é usar
apenas um sinal de igual, o
que resulta em um valor
sendo atribuído a outro.
2 == 1 (false)
!=
Determina se dois valores
são diferentes.
2 != 1 (true)
>
Verifica se o operando da
esquerda é maior que o
operando da direita.
2 > 1 (true)
14

<
esquerda é menor que o
operando da direita.
2 < 1 (false)
>=
esquerda é maior ou igual
ao operando da direita.
2 >= 1 (true)
<=
esquerda é menor ou igual
ao operando da direita.
2 <= 1 (false)
Tabela 02 – Operadores relacionais
Vamos praticar
Nesse ponto já é hora de começarmos a testar os conhecimentos
que já temos. Para isso nós precisaremos simplesmente de um
navegador web, sim é só isso! Bem, nós utilizaremos o Google
Chrome, mas você pode utilizar qualquer outro de sua preferência.
Primeiro de tudo precisamos abrir o console do navegador, no
Chrome você pode fazer isso clicando com o botão direito do
mouse e selecionando o item inspecionar. Uma outra forma de faze
isso é pressionando a tecla F12. Fazendo isso você irá visualizar
algo parecido com o que é mostrado na imagem:
15

Imagem 02 – Console do Navegador
É possível ver algumas abas como, Elements, Console, Sources,
etc. Nó faremos uso da aba Console, pois é nesta aba que
poderemos executar códigos JavaScript.
Variáveis e atribuição de valores
Já vimos o conceito de variáveis em seções anteriores, mas
naquela ocasião algumas informações foram omitidas, para que
quando chegássemos em um momento oportuno.
Em nossa analogia, comparamos uma variável a uma caixa, mas
não falamos que tipo de coisas colocaremos em nossas caixinhas.
Então, colocaremos dados que serão úteis ao nosso programa e
esses dados podem ter os seguintes tipos:
• String – Esse tipo de dado é para a representação de textos,
como por exemplo o título de um livro, o nome de uma
pessoa, etc. Em JavaScript a representação de strings pode
ser feita tanto utilizando aspas simples (‘’) como aspas duplas
(“”).
• Numérico Inteiro – Esse tipo de dado nos é útil para a
representação dos números que não possuem parte
fracionária. Como por exemplo a idade de uma pessoa.
• Numérico com ponto flutuante – Tipo de dado utilizado na
representação de números com parte fracionária. Como por
exemplo valores monetários, o peso de uma pessoa, etc. Em
JavaScript a parte fracionária é separada por um ponto.
Em JavaScript existem alguns outros tipos de dados. Alguns deles
ainda veremos ao longo deste livro.
16

Abaixo é possível ver na imagem alguns exemplo de como se
utilizam os tipos de dados. Veja:
Imagem 03 – Console do Navegador
Na imagem, é possível ver como fazer a criação de variáveis na
prática, por meio da palavra reservada var. É mostrado ainda como
definir tipos de dados distintos.
Podemos ver também que a variável soma recebe atribuições
sucessivas. Inicialmente ela é definida com o valor 0 (zero), depois
fazemos uma nova atribuição onde somamos seu valor atual em
uma unidade e repetimos essa operação. Veja que depois dessas
operações, a variável soma possui agora o valor 2 (dois). Essa é
uma operação matemática simples, utilizando uma variável e uma
constante. A próxima seção mostra um pouco mais sobre como
utilizar os operadores matemáticos.
Operações matemáticas
Operações matemáticas fazem parte de nosso cotidiano e por isso
essa parte é bem mais simples de entender. A imagem abaixo
mostra as operações básicas da matemática sendo realizadas com
constantes. Veja que no console o resultado da operação já é
mostrado em seguida.
17

Imagem 04 – Operações matemáticas
Na imagem só utilizamos dois operandos, mas você pode usar
quantos operandos forem necessários e também misturar
operadores. Se necessitar de precedência em determinada parte da
expressão numérica é possível envolvê-la entre parênteses, tal qual
aprendemos nas aulas de matemática.
A próxima imagem nos mostra também as operações básicas, só
que agora com variáveis. Observe:
Imagem 05 – Operações matemáticas
Operadores de comparação
As comparações são necessários em uma grande variedade de
algoritmos. Em um algoritmo de média de um aluno por exemplo, é
preciso verificar se a média do aluno atingiu determinado patamar
e para isso é preciso comparar.
18

A imagem abaixo mostra algumas comparações feitas com as
variáveis definidas anteriormente. Veja que no console, logo após a
operação ser executada, é mostrado se aquela comparação é
verdadeira (true) ou falsa (false).
Imagem 06 – Operações de comparação
O retorno de todas essas operações é um valor booleano. Dados
booleanos só podem ter dois valores possíveis, true ou false.
Assim como os outros tipos de dados já citados, um valor booleano
pode ser atribuído a uma variável como qualquer outro.
Resumo
Durante este capítulo alguns conceitos foram introduzidos e esses
conceitos é que formarão a base de conhecimento necessária na
resolução de algoritmos. Precisaremos utilizar a lógica matemática
e nossa caixa de ferramentas, com conhecimento de operadores e
variáveis.
Ao longo dos próximos capítulos aumentaremos nossa gama de
conhecimento e iremos desenvolver alguns algoritmos para a
fixação de conteúdo. Então fique ligado e vamos avançar.
19

Capítulo 3 – Entrada e saída de dados
• Entender e praticar comandos de entrada e saída em
JavaScript
• Como escrever nossos códigos em arquivos e executar no
navegador
Entrada e saída em JavaScript
Uma das coisas mais legais no desenvolvimento de algoritmos é a
interação com o usuário. Em alguns tipos de aplicação específicos
como games a interação do usuário é extremamente necessária.
Em um exemplo mais palpável para nós. Imagine que você precisa
desenvolver uma aplicação para controle de finanças. É fácil
perceber que essa aplicação dependerá muito do usuário, pois é
ele quem alimentará a aplicação, como lançar despesas e receitas
por exemplo.
Interagir com o usuário é necessário e vamos ver como fazer isso
com JavaScript.
Função alert()
A função de saída alert() permite mostrar dados em uma janela
padrão do navegador. Sua utilização é bem simples como segue:
alert(‘Texto a ser exibido’);
Basicamente você precisa informar a string que você quer que seja
exibida. Exemplo de utilização como mostra a imagem:
20

Imagem 07 – Execução da função alert()
Função prompt()
A função de entrada prompt() permite coletar informações do
usuário por meio do teclado. Ao chamar essa função, uma janela
será exibida com um campo onde o usuário poderá digitar.
A utilização da função é como segue:
var nome = prompt(‘Digite seu nome’);
No trecho acima a função solicita ao usuário que digite o seu nome.
Após o usuário digitar e confirmar, o valor informado será passado
para a variável nome. Exemplo de utilização como mostra a
imagem:
Imagem 08 – Execução da função prompt()
21

Salvando seus códigos JavaScript
Até aqui fizemos nossos códigos direto no console do navegador.
No entanto isso não é muito viável, pois em determinado momento
queremos salvar nosso código. Nessa seção nós veremos duas
formas de fazer nossos códigos em arquivos que possam ser
salvos e executados no navegador. Vamos a elas.
Precisamos de HTML
O propósito deste ebook é introduzir-lhe o conceito de Algoritmos
com JavaScript. Mas para um melhor aproveitamento
precisaremos conhecer um pouco de HTML que é o que fará com
que possamos escrever códigos JavaScript em arquivos e executá-
los no browser.
Basicamente, HTML é uma linguagem de marcação que é
interpretada pelo browser e permite que as páginas web sejam
renderizadas. Ela forma a estrutura básica de todos os websites
existentes. Para um pequeno teste, abra qualquer site que você
goste, em seguida visualize o código fonte (no Chrome isso pode
ser feito com Ctrl + U). Nas primeiras linhas já será possível
visualizar a tag: <html>.
Tags são utilizadas para fazer a marcação de determinados trechos
da página. Como código JavaScript por exemplo que é envolvido
pela tag script (<script></script>). Com essa marcação o
navegador irá “entender” que aqueles códigos que estiverem
naquela marcação deverão ser executados como JavaScript.
JavaScript direto no HTML
O primeiro método é colocar o código direto na tag script. Primeiro
de tudo você precisará criar um arquivo com a extensão .html.
Coloque o seguinte conteúdo em seu arquivo:
22

<html>
<head>
<title>Algoritmos com JavaScript</title>
<script>
// aqui você colocará seus códigos JavaScript
</script>
</head>
<body>
</body>
</html>
Esta estrutura tem uma explicação e esta pode ser encontrada no
apêndice. Por hora basta compreender que esta é a estrutura
básica de um arquivo HTML.
Bem, agora voltemos o foco para o JavaScript. Nesta estrutura É
possível visualizar as tags script. Onde a primeira informa o início
e a segunda que possui uma barra informa o fim. Vamos adicionar
o seguinte código entre estas tags:
<html>
...
<script>
alert(‘Hello World :)’);
</script>
...
</html>
Ao salvar um arquivo .html é possível visualizar que ele estará com
o ícone do navegador. Isso significa que este arquivo pode ser
executado pelo browser.
Após isso, qualquer alteração que você fizer no arquivo, você não
precisará reexecutar o arquivo, basta atualizar a página.
23

JavaScript separado do HTML
O segundo método é semelhante ao anterior, mas com a diferença
de que agora serão necessários dois arquivos. Um arquivo .js que
irá conter o seu código JavaScript e um arquivo .html que é onde
importaremos nosso arquivo JavaScript.
Aqui faremos um pouco diferente. Vejamos como ficariam esses
dois arquivos.
- script.js
alert(‘Hello World :)’);
- index.html
<html>
<head>
<title>Algoritmos com JavaScript</title>
<script src=”script.js”></script>
</head>
<body>
</body>
</html>
Nesse caso temos dois arquivos. Um chamado de index.html e o
outro script.js e nesta segunda forma o que fazemos é importar o
código JavaScript por meio também da tag <script>. Mas nesse
caso, fazemos uso de um atributo da tag que é o src, atributo esse
que serve para informarmos os caminho do arquivo JavaScript.
A execução é da mesma forma, ou seja, você precisar executar o
arquivo com extensão .html. Mas agora você só precisará altera o
arquivo .js e basta atualizar a página para ver as mudanças.
24

Resumo
Neste capítulo foram lhe apresentadas duas funções da linguagem
JavaScript. Funções essas que permitem que você mostre
informações para o usuário e também solicite que ele passe
informações para seu programa. Além disso, você aprendeu a
como fazer para salvar seus códigos JavaScript em arquivos e
executá-los no browser.
A partir daqui já temos algumas ferramentas bem úteis no
desenvolvimento de algoritmos e a partir do capítulo seguinte,
vamos conhecer mais ferramentas e aplicá-las ao desenvolvimento
de um algoritmo.
25

Capítulo 4 – Estruturas de controle
• Compreender e utilizar estruturas de decisão
• Compreender e utilizar estruturas de repetição
Antes de iniciar…
Chegamos em um ponto interessante do aprendizado de
algoritmos e programação. Durante este capítulo vamos construir
um pequeno algoritmo para cálculo de situação de um aluno, onde
coletaremos duas notas e faremos o cálculo de uma média simples
e se esse aluno tiver atingido uma nota maior ou igual a sete,
informaremos que ele está reprovado, entre cinco e sete ele
precisará fazer uma prova de recuperação e por fim se o aluno tive
uma nota menor que cinco ele estará reprovado.
Bem, já temos algumas ferramentas necessárias para fazer tal
algoritmo, o que nos resta é apenas fazer com que nosso programa
tenha fluxo para as eventuais possibilidades, que no caso da média
de um aluno são três. Agora vamos entender um pouco sobre
estruturas controle para que possamos utilizá-las posteriormente.
Estrutura de decisão
Geralmente algoritmos necessitam de tomada de decisão. No
algoritmos que trabalharemos , fluxos diferentes serão seguido
dadas as condições. Portanto é preciso fazer uma verificação para
que uma determinada ação seja tomada e determinadas instruções
sejam executadas.
Uma sentença lógica comum é: “Se a sua média for maior ou igual
a 7, então você estará aprovado”
26

Veja que para esta simples sentença precisaremos ter o valor da
média e compará-lo com o valor 7 e somente no caso em que for
maior ou igual a 7 ele estará aprovado.
Temos três tipos de estrutura de decisão, que são: decisão simples,
decisão composta e decisão múltipla. Veremos agora como isso
funciona em algoritmos e exemplificaremos com códigos
JavaScript.
Decisão simples
A estrutura de decisão simples é da seguinte forma (em
pseudocódigo):
SE condição ENTÃO instruções
A condição só pode ter dois valores possíveis: verdadeiro ou falso e
a instrução só será executada se o valor da condição for
verdadeiro. Abaixo temos um trecho de código JavaScript com a
verificação da média de um aluno.
var media = prompt(‘Informe sua média:’);
if(media >= 7){
alert(‘Você está aprovado :)’);
}
Nesse trecho de código solicitamos ao usuário que informe a
média e logo após isso fazemos uma verificação dessa média com
a condição media >= 7 e se esta for verdadeira a função alert()
será executada. Perceba que foi utilizada a palavra reservada If.
Essa instrução equivale ao SE do pseudocódigo.
27

Operadores Lógicos
Na seção anterior vimos como funciona a verificação de uma
condição utilizando a instrução if. Isso é muito interessante, mas
como fica quando precisarmos de mais de uma condição? Bem,
para que possamos entender isso precisaremos primeiro conhecer
os operadores lógicos que nos permitirão condições compostas.
Abaixo é possível ver uma tabela com operadores lógicos:
&&
A composição será verdadeira
se todas as condições forem
verdadeira.
media >= 5 &&
media < 7
||
A composição será verdadeira
se pelo menos uma das
condições for verdadeira.
media == 9 ||
media == 10
!
Inverte o valor da condição. Ou
seja, se esta for verdadeira,
será convertida em falsa. Se
for falsa, será convertida em
verdadeira.
!(media >= 5)
Tabela 03 – Operadores lógicos
Vejamos agora cada exemplo:
Usando o operador &&
if(media >= 5 && media < 7){
alert(‘Você precisará fazer a prova final.’);
}
28

Veja que agora na instrução if temos uma instrução composta por
duas verificações. Onde a função alert() será exibida somente
se essas duas verificações forem verdadeiras.
Nesse exemplo temos apenas duas verificações, mas podemos ter
quantas forem necessárias.
Usando o operador ||
If(media == 0 || media == 10){
alert(‘Ou sua média foi máxima, ou sua média foi
mínima.’);
}
Aqui também temos duas verificações e as instruções
correspondentes só serão executadas se pelo menos uma das
verificações for verdadeira.
Usando o operador !
If(!(media >= 5)){
alert(‘Você está reprovado :(’);
}
Nesse caso temos uma única verificação. Perceba primeiramente
que envolvemos a verificação entre parênteses. Assim como em
operações matemáticas, poderemos fazer aqui em operações de
comparação para que se tenha precedência na verificação.
Agora veja o funcionamento do operador NOT (!). Veja que se a
média de um aluno for 7 por exemplo, a função alert() não será
executada. Pois a média será maior ou igual a 5, logo a verificação
será verdadeira. No entanto o operador NOT irá inverter o resultado
e fará com que a condição seja falsa.
29

Mesclando expressões lógicas
Aprendemos como funcionam os operadores lógicos de forma
individual. Mas em muitos casos você precisará mesclá-los, ou
seja, precisará utilizar AND (&&), OR (||) e NOT (!) em uma mesma
instrução if. Você pode e deve fazê-lo livremente. Abaixo temos
alguns exemplos de verificação para que você exercite. Para os
exemplos abaixo considere a sendo 5, b sendo 8 e c sendo 10.
1. ((a > 4 && c == 10) && b == 8)
2. ((c – 5 == a && b – 4 == 2) || b*2 == c)
3. (!(a>6) || b < 4)
Decisão composta
Em decisões simples logo após a verificação da condição uma ou
mais instruções são executadas. Porém, existem casos em que é
preciso executar uma ou mais instruções para o caso de a
condição ser falsa. Essa estrutura é a decisão composta, abaixo
segue a definição em pseudocódigo.
SE condicão ENTAO instrucãoA SENAO intrucaoB
Em JavaScript fica da seguinte forma:
var media = prompt(‘Informe sua média:’);
if(media >= 7){
alert(‘Você está aprovado :)’);
}else {
alert(‘Você não conseguiu ser aprovado de forma
direta’);
}
Este é o mesmo exemplo que utilizamos na decisão simples, mas
aqui adicionamos a instrução else, que equivale ao SENAO.
30

Por que preciso de decisões compostas?
Para explicar isso, vamos retornar ao nosso algoritmo que mostra a
situação de um aluno baseado em sua média. Precisaremos fazer
algumas verificações que são: se a média é maior ou igual a sete,
se a média for maior ou igual e a cinco e menor que sete e por fim,
se a média é menor que cinco. Vejamos como fica isso com
estrutura de decisão simples:
if(media >= 7){
alert(‘Você está aprovado(a)’);
}
if(media >= 5 && media < 7){
alert(‘Você precisará fazer outra avaliação’);
}
if(media < 5){
alert(‘Você está reprovado(a)’);
}
Perceba que verificamos o valor 7 por duas vezes. Isso pode ser
melhorado. Vamos ver como fica isso agora com a utilização de
estrutura de decisão composta.
if(media >= 7){
}else if(media >= 5) {
} else {
}
Melhorou! Veja que a grande sacada aqui é utilizar as instruções
else e if em conjunto. Primeiro foi verificado se a média é maior
ou igual a 7, caso não seja a verificação se a média é maior ou igual
a 5 será realizada. Perceba que já não comparamos mais se a nota
é menor que 7, pois na primeira verificação já foi feito isso. Por fim,
31

se a média não for maior ou igual a 5, só precisamos de um else e
informar que o aluno está reprovado.
Perceba que este exemplo utilizando decisão simples, todas as
verificações serão feitas, mesmo que a condição seja inválida. Com
decisão composta, as verificações serão feitas até que uma seja
atendida. Por exemplo, vamos supor que a média seja 8. Em
decisão serão verificados três if’s. Em decisão composta somente
o primeiro.
Já temos ferramentas o suficiente
Ainda há uma estrutura de decisão que deve ser mostrada. No
entanto, já estamos em um ponto onde podemos fazer o algoritmo
da média do aluno que foi proposto no início do capítulo. Vamos
exercitar um pouco para que o conteúdo possa fixar melhor.
Vamos ver cada parte desse código e no final será lançado um
desafio para que você possa incrementar seu algoritmo. Esse
desafio será retomado depois. Vamos ao exercício, siga os passos
abaixo.
1. Coletar notas do usuário
Primeiro de tudo vamos solicitar que o usuário informe duas notas.
Para isso utilizaremos a função de entrada do JavaScript, como
segue.
var nota1 = prompt(‘Informe a primeira nota:’);
var nota2 = prompt(‘Informe a segunda nota:’);
2. Calcular a média e mostrar a situação do aluno
Com as notas já informadas, precisamos calcular a média e logo
após isso faremos as verificações com estrutura de decisão
composta.
var media = (nota1+nota2)/2;
if(media >= 7){
32

}else if(media >= 5) {
} else {
}
Pronto, este algoritmo permite calcular a média de um aluno e
mostrar sua situação. Junte as partes e execute em seu browser.
Desafio: Faça um menu de opções, onde o usuário poderá
determinar quantas notas ele deseja informar. As opções são: duas
notas, três notas e quatro notas. Dependendo da escolha do
usuário, deverão ser coletadas quantidades de notas distintas e o
cálculo da média deverá ser modificado.
Decisão múltipla
Uma outra forma de escrever uma estrutura de decisão é utilizando
a instrução switch. Essa instrução tem a mesma função de if-
else-if, com a diferença que o comando switch não aceita
expressões. Veja como isso funciona em JavaScript.
var opcao = prompt(‘Selecione uma opção: 1 – Primeira
opção | 2 – Segunda opção’);
switch(opcao){
case 1:
alert(‘Você selecionou a primeira opção’);
break;
case 2:
alert(‘Você selecionou a segunda opção’);
break;
default:
alert(‘Você não selecionou nenhuma dessas
opções’);
break;
}
33

Nesse exemplo solicitamos ao usuário que informe uma opção e
logo após isso utilizamos a instrução switch, passando a variável
opcao e verificando cada caso com a instrução case e se a
verificação for atendida, as instruções daquele case serão
executadas.
Ao final de cada case é necessário adicionar a instrução break
para demarcar o final daquele case. No final temos a instrução
default que funciona semelhante ao else, ou seja será
executada se nenhum dos casos for atendido.
Retomando o desafio
Vamos utilizar o switch para adicionar um menu de opções em
nosso algoritmo de cálculo de média de um aluno. O trecho de
código ficará da seguinte forma:
var opcao = prompt(‘Selecione uma opção: 1 – para duas
notas | 2 – para três notas | 3 – para quatro notas’);
var media = -1;
switch(opcao){
case 1:
var nota1 = prompt(‘Digite a primeira nota’);
var nota2 = prompt(‘Digite a segunda nota’);
media = (nota1+nota2)/2;
break;
case 2:
var nota3 = prompt(‘Digite a terceira nota’);
media = (nota1+nota2+nota3)/3;
break;
case 3:
var nota3 = prompt(‘Digite a terceira nota’);
var nota4 = prompt(‘Digite a quarta nota’);
34

media = (nota1+nota2+nota3+nota4)/4;
break;
default:
alert(‘Opção inválida’);
break;
}
...
Recebemos uma opção do usuário por meio do prompt e com isso
faremos quatro tratamentos possíveis. Veja que inicializamos a
variável média antes da instrução switch e a utilizamos em cada
caso, pois ela será calculada de forma diferente em cada um deles.
Se a opção informada pelo usuário não estiver no menu, ele
receberá uma mensagem de Opção Inválida. Assim a média
continuará setada com valor -1. Prossiga com o desafio e faça a
verificação da situação do aluno e observe que se a média for -1 é
porque a opção selecionada é inválida e o usuário não receberá
resultado.
Estruturas de repetição
As vezes é necessário repetir uma determinada quantidade de
instruções. No algoritmo da média do aluno por exemplo, nós só
podemos executar uma única vez. Se quisermos fazer com que
seja possível calcular a situação de mais de um aluno,
precisaremos duplicar o código ou executar o programa repetidas
vezes.
Com o uso das estruturas de repetição (também conhecidos como
loops ou laços) é possível fazer como que se execute as instruções
repetidas vezes e é o que veremos nessa seção, mas antes vamos
ver como funcionam essas estruturas.
35

Comando while
O comando while permite que um bloco de instruções sejam
executadas desde que uma determinada condição se mantenha
verdadeira. Veja a seguinte afirmação:
Enquanto estiver chovendo eu não saio de casa
A instrução while funciona de forma semelhante, ou seja se
determinada condição for sempre atendida o bloco de instruções
será sempre repetido. No caso dessa afirmação por exemplo, a
condição é que esteja chovendo e até que isso seja diferente o
sujeito não sairá de casa.
Em JavaScript a instrução while é da seguinte forma:
var contador = 1;
while(contador <= 10) {
alert(contador);
contador = contador + 1;
}
O código acima executa a função alert() dez vezes. Perceba que
entre os parênteses informamos uma condição, assim como
fizemos com if. E assim como fizemos anteriormente aqui serão
válidos todos os conceitos já vistos.
Note que o bloco de código envolvido pelas chaves será executado
enquanto o valor da variável contador for menor ou igual a 10 e a
cada repetição veja que estamos somando mais um ao valor da
variável contador. Logo quando contador for igual a 10, este será a
ultima repetição, pois ao somar mais o valor será 11 e a condição
será quebrada.
36

Comando do-while
O do-while é bem semelhante ao que vimos anteriormente. Sua
principal diferença é que com o do-while o bloco de instruções é
executado pelo menos uma vez, coisa que não acontece com o
while, pois a primeira coisa que este último faz é verificar a
condição.
Veja como é feito o comando do-while em JavaScript:
var contador = 11;
do{
alert(contador);
contador = contador + 1;
}while(contador <= 10);
Nesse exemplo coloquei o mesmo bloco de instruções executado
no comando while. Perceba que este bloco deverá ser repetido
enquanto a variável contador tiver valor menor ou igual a 10. No
entanto a variável contador já começa com valor 11. Ainda assim o
bloco será executado uma vez.
Ainda neste exemplo, após a execução o valor da variável contador
será 12, a repetição não continuará pois a condição estará
quebrada.
Comando for
Este comando também nos serve para criar laços de repetição.
Porém, ele funciona de uma forma um pouco diferente. Em
JavaScript ela pode ser definida da seguinte forma:
for(expressao1; condicao;
expressao2) {
instrucoes;
}
for(var i=1; i <= 10;
i++) {
alert(i);
}
37

Na coluna esquerda temos a definição de como se utiliza o loop for
e na segunda temos um exemplo de utilização. Vamos explicar
cada parte presente no loop for:
- expressao1: Variável que será utilizada como contador, recebe um
valor inicial.
- expressao2: Condição para execução do loop
- expressao3: Incremento da variável que servirá como contador.
O comando for é muito utilizado com arranjos. Veremos isso mais
adiante.
NOTA: Observe que no exemplo utilizamos i++ para incrementar
(somar 1) a varíavel i. Essa sintaxe é equivalente a i = i + 1
Loop infinito
Quando a condição de parada de uma determinada estrutura de
repetição nunca é alcançada, as instruções do laço são executadas
indefinidamente, e consequentemente o programa nunca chega ao
seu fim. Na maioria dos casos esse comportamento deve ser
evitado. Porém existem casos em que se usa loops infinitos, mas
estes são utilizados com comandos de desvio, que veremos na
próxima seção.
Comandos de desvio
Como vimos anteriormente é possível trabalhar com loops infinitos
e comandos de desvio. Logo, vamos conhecer um pouco mais
esses comandos.
Comando break
Este mesmo comando já foi visto na instrução switch como
delimitador de um fim de um case. Aqui o processo é semelhante,
38

pois também delimita o fim, mas nesse caso o fim do loop. Quando
o loop está executando e encontra a instrução break o loop é
quebrado imediatamente. Veja um exemplo de loop infinito, com a
chamada de um break em determinadas condições.
var contador = 0;
while(true){
if(contador == 200) break;
contador++;
}
Note que no exemplo acima a condição sempre será verdadeira
(até porque já passamos true como constante), ou seja é um loop
infinito. No entanto, em determinado momento este loop será
quebrado e isso ocorrerá quando o valor da variável contador for
igual a 200, pois aí a instrução break será executada saindo assim
do loop.
Perceba que na instrução if nós não utilizamos as chaves para
delimitar as instruções. Isso ocorre porque no caso só há uma
instrução a ser executada, portanto pode-se escrever nas mesma
linha a verificação if e a instrução a ser executada.
Outro detalhe é o uso do operador de incremento que já foi
mostrado em seções anteriores.
Comando continue
O comando continue permite que um laço do loop seja saltado.
Basicamente você pode avançar para o próximo loop sem a
necessidade de executar o bloco. Veja o exemplo abaixo:
var contador = 0;
while(contador <= 20){
contador++;
if(contador%2 == 0) continue;
alert(contador);
}
39

No exemplo acima temos um loop while que executa a função
alert() somente quando o valor da variável contador for um valor
ímpar. Perceba que o continue não encerra o loop, ele só avança
para o próximo laço.
Perceba o uso do operador resto (%). Este operador retorna o resto
da divisão. Neste caso verificamos se o valor da variável contador
dividido por 2 tem resto igual a 0, se assim for, o próximo laço será
executado.
Calculando várias médias com laço infinito
Bem, agora que já temos conhecimento sobre laços infinitos e
comandos de desvio, vamos praticar um pouco. Nesse exemplo,
vamos implementar nosso algoritmo de média de duas notas, de tal
modo que seja possível calcular quantas médias desejar. Veja o
exemplo:
while(true){
var opcao = prompt(‘Selecione uma opção: 1 –
Calcular Média | 0 – Encerrar execução’);
if(opcao == 0) break;
var nota1 = prompt(‘Primeira nota:’);
var nota2 = prompt(‘Segunda nota:’);
var media = (nota1+nota2)/2;
...
}
Quando executado, esse trecho de código irá solicitar uma opção
do usuário. Se for um 1, será feito o cálculo da média do aluno. A
parte de verificação da situação do aluno foi suprimida, pois já foi
mostrada em seções anteriores.
40

Se a opção informada pelo usuário for 0, o comando de desvio
break é chamado e o loop é encerrado. Mas e o que acontece se
informamos um valor diferente de 0 e 1? Se você executou e fez
este teste, percebeu que o algoritmo executa normalmente. Como
resolver isso? É aqui que passo a bola para você. Altere este código
e faça com que sempre que o usuário informar algum valor que
seja diferente de 1, o programa seja encerrado.
Resumo
Neste capítulo começamos a criar nossos próprios algoritmos com
JavaScript e para isso utilizamos as ferramentas que já tínhamos.
Utilizamos entrada e saída para poder coletar informações,
utilizamos operações matemáticas para calcular a média,
utilizamos estruturas de controle e repetição e operações lógicas
para verificar a situação do aluno. Nos próximos capítulos veremos
alguns conceitos mais avançados e que tornarão nosso código
mais sofisticado.
41

Capítulo 5 – Arranjos
• Entender e fazer operações com vetores
• Compreender como funcionam as matrizes
• Utilizar loops com arranjos
Antes de iniciar…
No final do capítulo anterior, nós vimos como implementar o
algoritmo que calcula a média de um aluno. De tal modo que agora
o usuário poderá calculas a média de um aluno por quantas vezes
quiser, porém a cada nova execução os dados anteriores são
perdidos. Agora pense como você faria para poder adicionar várias
notas de alunos distintos e depois visualizar a média de todos? E
se quiser calcular a média geral da turma?
Bem, vimos algo parecido na resolução do desafio do capítulo 3,
onde em determinadas condições usávamos uma quantidade de
variáveis distintas. Mas e se for preciso calcular a média de 20
alunos e depois mostrar? Precisaríamos de 20 variáveis para as
médias, isso é inviável.
Para tal tarefa precisaremos fazer uso de Arranjos (em inglês
Arrays) , que são estruturas de dados capazes de agrupar vários
elementos em uma única variável.
Durante este capítulo os arranjos serão apresentados e então
poderemos fazer implementações mais sofisticadas.
Vetores
42

Os arranjos podem ter diferentes dimensões. Um tipos especial de
arranjo com apenas uma dimensão é chamado de vetor. Abaixo
temos a ilustração de um vetor:
0 1 2 3
‘Edy’ ‘Gustavo’ ‘Thiago’ ‘Sabrina’
Este vetor possui 4 elementos e neste caso todos são do tipo
string, pois cada posição desse vetor possui um valor em string.
Note que cada elemento possui um índice, essa informação será
útil para localizar valores de um vetor.
NOTA: Em JavaScript os índices de um array começam no zero.
Isso é comum para a maioria das linguagens, mas não é regra.
Declaração de vetores em JavaScript
A definição de arrays em JavaScript é feita de forma muito simples.
Isso se dá pelo fato de a linguagem se dinâmica. Veja abaixo duas
formas de se criar um vetor em JavaScript.
var vetor = new Array(); var vetor = [];
Como isso é somente uma questão de notação. No decorrer deste
ebook utilizaremos a segunda notação. Veja agora como se definir
um array com valores.
var vetor = [‘Edy’, ‘Gustavo’, ‘Thiago’, ‘Sabrina’];
Veja que este vetor é justamente aquele que está representado na
seção anterior.
43
→ índices
→ elementos

Acessando elementos de um vetor
Agora que já sabemos como declarar vetores, é hora de
aprendermos como faremos para acessar seus elementos. Isso
será feito de uma forma bem simples, veja abaixo:
alert(vetor[0]); Edigleysson→
alert(vetor[3]); Sabrina→
alert(vetor[9]); Isso vai te retornar um erro!→
Acessaremos elementos de vetores fazendo a chamada de seu
identificador (que nesse caso é vetor) seguindo de colchetes([]) e
entre esses colchetes passamos o índice do elemento desejado.
Perceba pelo trecho acima que caso você tente acessar um índice
inexistente, seu algoritmo irá parar no erro.
Adicionando elementos a um vetor
Para adicionar elementos a um vetor em JavaScript nós utilizamos
o método pop(). Para entendermos melhor isso, considere o
seguinte vetor:
var alunos = [‘Eduardo’, ‘Lola’, ‘Maria’];
Agora imagine que você quer adicionar um novo aluno a este vetor.
Você poderá fazê-lo da seguinte forma:
alunos.push(‘João’);
Agora o vetor alunos possui 4 posições. Sendo o último elemento o
de valor João. Existem outras formas de se adicionar elementos a
um vetor em JavaScript, mas este método nos servirá para o
propósito deste material.
44

Alterando o elemento de um vetor
Para alterar o valor de um determinado índice de um vetor, faça
como abaixo:
alunos[0] = ‘Camila’;
Acesse o elemento como mostrado na seção 5.2.2 e faça a
atribuição de um novo valor.
Matrizes
No início do capítulo foi dito que arranjos podem ter várias
dimensões. Quando isso acontece, chamamos esses arranjos de
matrizes, Esse conceito em programação é bem semelhante ao da
matemática. Abaixo temos a notação de matriz:
Matriz mxn
De forma bem simples, matrizes são vetores que possuem como
elementos, outros vetores. Veja abaixo um exemplo de definição de
uma matriz 3x3 em JavaScript.
var matriz = [
[1, 2, 3], Linha 0→
[4, 5, 6], Linha 1→
[7, 8, 9] Linha 2→
];
45

É possível perceber que é como se fosse um vetor que possui um
vetor em cada elemento. Se acessarmos o primeiro elemento da
variável matriz por exemplo, teremos um vetor de três posições,
mas como aqui estamos utilizando a notação de matriz,
chamaremos isto de linha e cada linha de uma matriz é um vetor e
as posições deste vetor representarão as colunas. Vejamos como
isso funciona de forma melhor:
Acessando elementos de uma matrizes
A notação de acesso de elementos segue as mesmas diretrizes
vistas em seções anteriores para acesso de elementos de vetores.
Considerando a variável anterior, vejamos como acessar elementos
da matriz.
var linha1 = matriz[0];
alert(linha1[0]);
-– ou --
alert(matriz[0][0]);
Veja acima duas formas de acessar o elemento da primeira linha e
da primeira coluna. A primeira forma foi mostrada só para ilustrar e
mostrar como funciona. A notação a ser usada para acesso de
dados em matrizes é a segunda, ou seja matriz[i][j]. Onde i será o
índice da linha e j o índice da coluna.
Arranjos e Loops
Agora já sabemos como criar estruturas que podem armazenar
vários elementos. Agora imagine que você precise mostrar toso os
elementos de um array de 20 posições. Como você faria isso?
Fazer vinte instruções alert() não é algo viável e é aí que
faremos a utilização de loops. Nessa seção veremos como
percorrer elementos de um array utilizando loops e vamos
46

implementar nosso algoritmos de média do aluno, mostrando no
final a média geral da turma.
Percorrendo array com loop for
Veja o trecho de código abaixo:
var frutas = [‘Banana’, ‘Manga’, ‘Uva’, ‘Pêra’];
for(var i=0; i<frutas.length; i++){
alert(frutas[i]);
}
Primeiro de tudo é declarado um array de 4 posições. Em seguida é
criado um loop for, com o contador inciando com o valor 0 (pois
será necessário para indexar a primeira posição do array). Na
condição do loop temos algo novo, nós estamos chamando o
atributo length. Este atributo informa a quantidade de elementos de
um array. Utilizamos este atributo pois com ele teremos mais
dinamicidade ao percorrer arrays. No bloco de código a ser repetido
temos a função alert() sendo executada com cada índice do
array.
Implementando nosso algoritmo de média
Vamos aos passos necessários para implementar o nosso
algoritmo de média utilizando arrays e loops. Veja os passos e
tente fazer:
Passo 1 – Menu de opções
var opcao = 0;
var medias = [];
var nota1, nota2, media;
while(true){
opcao = prompt(‘Selecione uma opção: 1 – Calcula
média de um novo aluno | 2 – Visualizar média geral da
turma | 3 – Encerrar execução’);
if(opcao != 1 && opcao != 2) continue;
47

}
Nosso menu possui três opções. Se o usuário informar o valor 1,
ele irá adicionar notas de um novo aluno, se selecionar 2, poderá
visualizar a média geral, se selecionar 3 o programa para de
executar e por fim se informar qualquer valor que não esteja entre
esses, nada acontece.
Perceba que as variáveis que serão necessárias já foram
inicializadas antes do início do loop.
Passo 2 – Calculando média dos alunos
...
while(true) {
…
if(opcao != 1 && opcao != 2) continue;
if(opcao == 1){
nota1 = prompt(‘Informe a primeira nota do
aluno’);
nota2 = prompt(‘Informe a segunda nota do aluno’);
media = (nota1+nota2)/2;
medias.push(media);
alert(‘Media registrada’);
}else {
}
}
Se a opção selecionada for 1, solicitamos ao usuário que informe
as notas. Daí calculamos a média e adicionamos ao array de
medias.
Passo 3 – Calculando média geral
48

…
while(true){
…
if(opcao == 1) {
...
}else {
var somatorio = 0;
var mediaGeral = 0;
for(var i=0; i<medias.length; i++){
somatorio = somatorio + medias[i];
}
mediaGeral = somatorio/medias.length;
alert(‘A média geral é: ’ + mediaGeral);
}
}
Por fim, calculamos a média geral dos alunos quando o usuário
selecionar a opção 2. Veja a instrução alert(). Note que temos uma
mescla de string com variável. Esta notação nos permite colocar
variáveis junto com texto.
Resumo
É notório que nosso pequeno algoritmo de média está ficando mais
sofisticado. Estamos quase finalizando e o próximo capítulo será o
fechamento dos conhecimentos básicos que você precisa ter sobre
algoritmos.
49

Capítulo 6 – Funções
• Entender o que são funções e como podem melhorar
nosso código
• Definir nossas próprias funções
Antes de iniciar...
Quando estamos implementando algoritmos, é comum
identificarmos parte do código que se repetem e partes distintas.
Suponha que você tenha um algoritmos de 1000 linhas e que uma
determinada parte deste algoritmo se repete por 8 vezes e suponha
que você precise alterar o comportamento desse bloco de código.
Você terá de alterar parte por parte desse bloco de códigos. Esse
procedimento leva muito tempo o que coloca em cheque a
produtividade de desenvolvimento.
Funções permitirão que nós possamos fazer uma separação de
determinadas partes de um algoritmo e reutilizar quando
necessário. No exemplo hipotético que demos acima, não seria
melhor se pudéssemos alterar o bloco de códigos uma vez e este
possa ser replicado nas partes em que ele é utilizado? É isso que
poderemos fazer com funções, vamos lá.
Funções
Funções e procedimentos podem ser compreendidos como trechos
reutilizáveis de código. Uma função ou procedimento pode, então,
ser utilizado várias vezes por um mesmo programa. Isso simplifica
a criação de programas maiores, dividindo-os em unidades
menores que trabalham em conjunto. Funções e procedimentos
50

são bastante semelhantes e, posteriormente, vamos entender as
diferenças entre eles.
Algumas funções que utilizamos
No decorrer deste livro nós utilizamos algumas funções. Uma das
mais utilizadas foi a função alert(). Note que por trás desta
função existe um código que é executado e permite que seja
mostrado uma janela com uma mensagem no navegador. Agora
imagine se toda vez que fôssemos utilizar essa funcionalidade de
mostrar uma mensagem, tivéssemos de escrever todo o código,
que chato seria. Que bom que esses códigos foram englobados em
uma função e nós só fazemos a chamada desta função.
Definindo funções em JavaScript
Para definir funções em JavaScript nós faremos a utilização da
palavra reservada function. Veja abaixo um exemplo de criação de
uma função com JavaScript.
function nomeDaFuncao() {
// intruções;
}
Agora você pode abstrair blocos do seu código para poder reutilizá-
los. Vamos fazer aqui uma pequena analogia com funções no
conceito de matemática. Considere a seguinte função:
f(x) = x+1
Esta função possui um parâmetro que é a variável x e ela devolve
um valor que é o valor da variável x somado em 1. Vamos
reproduzir essa função simples, mas antes vamos entender o que
são parâmetros e retorno de funções.
51

Parâmetros
Assim como na Matemática, quando utilizamos funções, nosso
objetivo é informar determinados valores e aguardar o resultado
como retorno. Na função de exemplo, se informarmos o valor 2
para esta função, ela nos retornará o valor 3. Nesta situação
hipotética o valor 2 seria o parâmetro da função.
Basicamente, os parâmetros de uma função são para que esta
possa ter dados para fazer determinados processos. Estes
parâmetros são como variáveis que estão sendo criadas
exclusivamente para serem utilizadas na função, logo seguem as
mesmas convenções de nomes de variáveis.
Veja abaixo o exemplo da função em JavaScript:
function f(x) {
alert(x+1);
}
f(2); Execução da função→
Veja que definimos nossa função com o nome de “f” e esta função
recebe um parâmetro. Logo abaixo da definição da função é
mostrado como executá-la. Basta “chamar” o nome da função
seguido de parênteses e informar os parâmetros entre os
parênteses. Caso a função não possua parâmetros, deixe os
parênteses vazios.
Ao executar essa função será exibido uma mensagem no
navegador, por meio da função alert(). Veja, que é possível executar
funções dentro de outras.
Função soma e função mensagem
Veja a definição da função soma abaixo:
52

function soma(a, b){
alert(a+b);
}
soma(3, 4) Execução, com resultado igual a 7→
Note que aqui temos uma função que possui dois parâmetros. Na
chamada da função separamos cada parâmetros por vírgula e a
sequência de passagem será colocada nas variáveis de parâmetro.
Por exemplo, nesta função a seria igual a 3 e b seria igual a 4.
Veja agora a função mensagem:
function mensagem() {
alert(‘Mensagem fixa’);
}
mensagem() Execução→
Aqui já temos uma função que não recebe parâmetros e sempre
que for executada mostrará a mesma mensagem no navegador.
Veja que na execução os parênteses ficam vazios.
Funções com retorno
Na maioria dos casos para que tenhamos reutilização de códigos
com funções, precisaremos retornar valores. Suponha uma função
que checa precisão do tempo e você deseja utilizá-la em seu
programa, o ideal é que você consiga em seu código, executar essa
função apenas para obter as informações meteorológicas e seguir
com os procedimentos do seu algoritmo.
Para isso a função precisará retornar um valor e é isso que vamos
ver agora. Vejamos o exemplo de uma outra função matemática.
f(x,y) = (x+y)/2
53

Esta função receberá dois valores e retornará a média aritmética
desses. Essa função é bastante útil em nosso algoritmo de cálculo
de média de alunos. Mas não podemos só calcular a média e
mostrar na tela com a função alert(). Precisamos obter a média
e salvar em um array, como poderíamos fazer isso?
Bem, é aí que entra o retorno de funções e a instrução return.
Essa instrução permite que um valor seja retornado pela função,
veja como fica em JavaScript:
function calculaMedia(a,b){
return (a+b)/2;
}
...
var media = calculaMedia(nota1, nota2);
medias.push(media);
Observe o uso da instrução return e observe também a execução
da função. Veja que armazenamos o retorno da função em uma
variável e podemos fazer o que seja necessário com este retorno.
Veja que retornamos uma expressão matemática. Você poderia
retornar todos os tipos de dados disponíveis em JavaScript.
Resumo
Neste capítulo aprendemos o que são funções e os variados tipos
de funções que existem. Aprendemos também como que as
funções podem melhorar o nosso código.
54

Referências
• DE SOUSA, Bruno Jefferson; DIAS JÚNIOR, José Jorge Lima;
FORMIGA, Andrei de Araújo. Introdução a Programação,
2014.
• MUELLER, John Paul; MASSARON, Lucas. Algorithms for
Dummies, 2017.
55

Algoritmos com java script

Mais conteúdo relacionado

Mais procurados

Semelhante a Algoritmos com java script

Algoritmos com java script