Algoritmos Com Javascript

1 https://codesilva.github.io

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 https://codesilva.github.io

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 https://codesilva.github.io

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 https://codesilva.github.io

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 https://codesilva.github.io

• 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 https://codesilva.github.io

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 https://codesilva.github.io

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 https://codesilva.github.io

Capítulo 2 – Introdução à programação Objetivos do capítulo • 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 https://codesilva.github.io

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 https://codesilva.github.io

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 https://codesilva.github.io

[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 Atribui valor a uma variável Realiza a soma de dois valores Subtrai o operando da direita do operando da esquerda Multiplica os dois operandos Divide o operando da esquerda pelo da direita Calcula o valor exponencial do operando da direita pelo operando da esquerda.

Exemplo var numero = 10; 5 + 2 = 7; 5 – 2 = 3; 5 * 2 = 10; 5 / 2 = 2.5; 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 https://codesilva.github.io

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:

Operador

==

!= >

Descrição 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. Determina se dois valores são diferentes. Verifica se o operando da esquerda é maior que o operando da direita.

14 https://codesilva.github.io

Exemplo

2 == 1 (false)

2 != 1 (true) 2 > 1 (true)

<

>=

<=

Verifica se o operando da esquerda é menor que o 2 < 1 (false) operando da direita. Verifica se o operando da esquerda é maior ou igual 2 >= 1 (true) ao operando da direita. Verifica se o operando da esquerda é menor ou igual 2 <= 1 (false) ao operando da direita. 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 https://codesilva.github.io

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 https://codesilva.github.io

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 https://codesilva.github.io

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 https://codesilva.github.io

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 https://codesilva.github.io

Capítulo 3 – Entrada e saída de dados Objetivos do capítulo • 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 https://codesilva.github.io

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 https://codesilva.github.io

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: . 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>). 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 https://codesilva.github.io

<script> // aqui você colocará seus códigos JavaScript 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: ... <script> alert(‘Hello World :)’); ... 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 https://codesilva.github.io

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 <script src=”script.js”> 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 https://codesilva.github.io

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 https://codesilva.github.io

Capítulo 4 – Estruturas de controle Objetivos do capítulo • 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 https://codesilva.github.io

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 https://codesilva.github.io

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: Operador

Descrição

Exemplo

&&

A composição será verdadeira media >= 5 && se todas as condições forem media < 7 verdadeira.

||

A composição será verdadeira media == 9 || se pelo menos uma das media == 10 condições for verdadeira.

!

Inverte o valor da condição. Ou seja, se esta for verdadeira, !(media >= 5) será convertida em falsa. Se for falsa, será convertida em verdadeira. 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 https://codesilva.github.io

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 https://codesilva.github.io

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 https://codesilva.github.io

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){ alert(‘Você está aprovado(a)’); }else if(media >= 5) { alert(‘Você precisará fazer outra avaliação’); } else { alert(‘Você está reprovado(a)’); } 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 https://codesilva.github.io

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 https://codesilva.github.io

alert(‘Você está aprovado(a)’); }else if(media >= 5) { alert(‘Você precisará fazer outra avaliação’); } else { alert(‘Você está reprovado(a)’); } 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 ifelse-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 https://codesilva.github.io

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 notas | 2 – para três notas | 3 – var media = -1; switch(opcao){ case 1: var nota1 = prompt(‘Digite a var nota2 = prompt(‘Digite a media = (nota1+nota2)/2; break;

opção: 1 – para duas para quatro notas’);

primeira nota’); segunda nota’);

case 2: var nota1 = prompt(‘Digite a primeira nota’); var nota2 = prompt(‘Digite a segunda nota’); var nota3 = prompt(‘Digite a terceira nota’); media = (nota1+nota2+nota3)/3; break; case 3: var nota1 var nota2 var nota3 var nota4

= = = =

prompt(‘Digite prompt(‘Digite prompt(‘Digite prompt(‘Digite

a a a a

primeira nota’); segunda nota’); terceira nota’); quarta nota’);

34 https://codesilva.github.io

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 https://codesilva.github.io

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 https://codesilva.github.io

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 https://codesilva.github.io

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 https://codesilva.github.io

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 https://codesilva.github.io

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 https://codesilva.github.io

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 https://codesilva.github.io

Capítulo 5 – Arranjos Objetivos do capítulo • 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 https://codesilva.github.io

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 ‘Edy’

1

2

‘Gustavo’ ‘Thiago’

3 ‘Sabrina’

→ índices → elementos

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 https://codesilva.github.io

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 https://codesilva.github.io

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], [4, 5, 6], [7, 8, 9] ];

→ Linha 0 → Linha 1 → Linha 2

45 https://codesilva.github.io

É 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 https://codesilva.github.io

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
} 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 == 3) break; 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 https://codesilva.github.io

… 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 https://codesilva.github.io

Capítulo 6 – Funções Objetivos do capítulo • 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 https://codesilva.github.io

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 https://codesilva.github.io

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 https://codesilva.github.io

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 https://codesilva.github.io

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 https://codesilva.github.io

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 https://codesilva.github.io