Nas aulas anteriores, apresentei vários exemplos de programas que tinham uma sequência linear de execução, ou seja, as instruções (linhas do programa) eram executadas uma após a outra. As sequências de comandos que você viu nos exemplos apresentados até aqui são essenciais para a resolução de problemas. Entretanto, na maioria das vezes, os programas recebem os dados do usuário e têm de processar esses dados a fim de tomar decisões sobre as possíveis saídas do programa. Desse modo, precisaremos definir sequências de execução diferentes de acordo com os dados de entrada. Para isso, fazemos uso dos comandos de seleção.

Por exemplo, em aulas anteriores desta disciplina, vimos o programa que temos abaixo. Esse programa recebe como entrada as duas notas de um aluno e exibe na página HTML "true" apenas se a média das notas for maior ou igual a 7.

Código 1 - 09_1 Media de Notas.html e 09_1 Media.js

E se desejássemos exibir na tela a palavra "Aprovado" se esta condição fosse satisfeita, e "Reprovado", caso contrário? Para essa situação, precisamos usar comandos de seleção de JavaScript. Assim, o nosso programa será capaz de calcular a média e decidir se o aluno está "Aprovado" ou "Reprovado".

Nesta aula, você aprenderá a fazer uso dos comandos de seleção da linguagem JavaScript, os quais são fundamentais para especificar as decisões que um computador realizará. Entre os comandos de seleção, temos os comandos if-else (se/senão) e switch (escolha). Esse conteúdo é de grande importância para o desenvolvimento de programas em geral, não apenas em JavaScript, pois é através desses comandos que são feitos inúmeros testes condicionais no decorrer dos programas.

Tal como nas aulas passadas, serão sugeridas atividades no decorrer e ao final desta aula, tudo isso para facilitar o seu aprendizado. Vamos começar? Vem comigo! 👍

O comando if é o mais básico de todos os comandos de seleção e deve ser usado com as duas letras minúsculas. Ele determina que o programa deve executar um certo comando ou seção de código apenas se uma certa condição for verdadeira. A forma geral do comando if está apresentada no slide (Figura 1).

Se desejarmos executar apenas um comando, caso a condição seja verdadeira, o uso das chaves é opcional, ou seja, podemos ter o comando sem o uso da chave, como vemos no exemplo 1, ou com o uso da chave, como vemos no exemplo 2. No entanto, se a condição verdadeira levar à execução de mais de um comando, faz-se necessário o uso das chaves abrindo e fechando o bloco de comandos, como vemos no exemplo 3.

Vamos, agora, voltar ao exemplo referente à situação de aprovado ou reprovado de um aluno? Note, no slide (Figura 2), que podemos trabalhar isoladamente na função resultado, fazendo com que ela retorne uma string ao invés do valor booleano resultante da comparação m >= 7.

Vemos agora, no slide (Figura 3), uma solução usando o comando de seleção if para retornar o texto "Aprovado" somente quando a média do aluno for maior ou igual a 7. Isso porque a expressão m >= 7 será verdadeira (true) apenas quando o valor da variável m for maior ou igual a 7, fazendo com que o comando resultado = "Aprovado" seja executado.

No caso de a expressão ser falsa, ela resultará no valor false e o comando resultado = "Aprovado" não será executado. Vamos ver o que acontece?

Neste exemplo, vamos revisitar a página HTML que calcula a média dos alunos e retorna true se o aluno for "aprovado", ou seja, obtém a média maior ou igual a 7, e false se ele não for aprovado; neste caso, obtém a média menor que 7.

Dessa vez, caso o aluno seja aprovado, deverá ser exibido "Aprovado" ao invés de "true". No exemplo apresentado (ver Código 2), temos uma página HTML bem parecida, dois campos de entrada N1 e N2 do tipo numérico. Ao clicar no botão será invocada a função situacao, passando o nome dos dois campos de entrada N1 e N2 e do campo de saída resultado.

Código 2 - 09_2 Media de Notas.html e 09_2 Media.js

No JavaScript, veja que a função situacao recebe o nome dos campos de entrada, 1 e 2, e o campo de saída; recupera o valor numérico do campo de entrada1 e atribui o valor à variável x, e da mesma forma para a variável y, só que com entrada2; calcula a média desses dois valores e atribui a variável media; altera o valor do texto de saída com o texto: "O resultado é", e em seguida ele chama a função resultado, passando esse valor media que foi calculado na linha 04.

Agora, foque na função resultado declarada entre as linhas 10 e 17. Ela recebe um valor numérico da média que foi calculada. E se o m > = 7, você verá que, de fato, ele faz a atribuição de que resultado é igual a "Aprovado" e retorna esse resultado.

Teste o comportamento da página, colocando dois valores numéricos 7 e 8 para ter uma média 7,5. Verifique que, ao clicar OK, será exibido: O resultado é "Aprovado". Ao reduzir essas notas para o valores numéricos 7 e 6, o resultado exibido será undefined.

Mas o que aconteceu? Volte ao JavaScript e veja que foi declarada uma variável resultado e não foi atribuído nenhum valor a ela. Note que a variável estará com o valor undefined.

Apenas se o m > = 7 o resultado vai receber o texto "Aprovado"; dessa forma, ao digitar os valores 7 e 6, a média fica 6,5, que é um valor abaixo de 7, portanto, a linha de código 13 (resultado = "Aprovado") não será executada.

E como o valor de resultado é undefined na linha 11, ele continuará undefined ao ser retornado, e isso será exibido na tela. Caso queira, você poderá acrescentar o texto "Parabéns!!!" ao final. Para isso, você terá que colocar resultado igual a "Aprovado", e em seguida, concatenar esse texto com um ponto, dando os parabéns ao aluno.

Volte à página e coloque uma média com a qual o aluno seja aprovado e veja que, de fato, os dois comandos serão executados e será acrescentado o texto: "O resultado é Aprovado". seguido do texto: "Parabéns!!!". Veja a Figura 4.

Mas, o que aconteceria se as chaves localizadas entre as linhas 12 e 15 fossem retiradas? As chaves foram colocadas para executar mais de um comando se o m >= 7. Dessa forma, o bloco de comandos delimitado pelas chaves é executado. Mas, ao tirar as chaves, deixando m >= 7 ao colocar a média das notas 7 e 8, o texto "Parabéns!!!" continuará sendo exibido.

E se colocar uma média inferior a 7, volte à situação em que o aluno tira as notas 7 e 6, você verá que o texto undefined será exibido juntamente com o texto "Parabéns!!!", que também foi concatenado ao texto.

Isso ocorre porque o if, por não usar as chaves, guarda apenas a atribuição da linha 13, mas a linha 14 será executada em qualquer situação. A identação correta para o código seria essa mesmo, porque se o m >= 7 aparecerá "Aprovado". A linha 15 será sempre executada, independentemente do m >= 7 ou do m <= 7. Se você quiser que o texto "Parabéns!!!" seja acrescentado apenas se o m >= 7, você terá que guardar esses dois comandos usando as chaves.

Código 3 - 09_3 Media de Notas.html e 09_3 Media.js

No exemplo, vimos que não estávamos exibindo "Reprovado" caso o aluno não atingisse a média 7. No entanto, considere que desejamos não somente exibir a mensagem "Aprovado" quando a média for igual ou superior a 7, mas também exibir a mensagem "Reprovado" no caso de sua média ser menor que 7. O que será preciso alterar, no exemplo mostrado anteriormente, para que isso passe a acontecer? Uma alternativa é executar dois testes sequencialmente, como podemos ver no slide (Figura 5).

Nesta função, primeiramente, o programa verifica se m >= 7. Em caso afirmativo, o resultado recebe o valor "Aprovado". Depois disso, o programa verifica se m < 7. Em caso afirmativo, o resultado recebe o valor "Reprovado".

Apesar desse código estar correto, ele se utiliza de duas condições complementares, ou seja, opostas ou contraditórias. Quando a primeira é verdadeira, a segunda é falsa e vice-versa. Nesse caso, é indicado que você faça uso da instrução if-else, em português se-senão, cuja forma geral apresentamos no slide (Figura 6). Nesse comando, temos que, se a condição for verdadeira, apenas os comandos 1 a n serão executados. Senão, ou seja, caso a condição seja falsa, apenas os comandos m a p serão executados.

Apesar de existir a opção sem as chaves, vamos apresentar apenas a versão recomendada, ou seja, a versão com as chaves. É importante notar que, assim como o if, o else também deve ser usado somente com letras minúsculas. Vamos ver como ficaria o nosso exemplo?

Veja (Código 4) como fica o exemplo ao fazer uma pequena alteração na função resultado utilizando o if e o else. Se (if) o m >= 7, será executada a linha de comando 13, sendo atribuído "Aprovado" ao resultado. Senão (else), caso o m não seja maior ou igual a 7, que é a mesma coisa que dizer que o m < 7, resultado vai receber o texto "Reprovado".

Código 4 - 09_4 Media de Notas.html

Agora, você corrigirá o erro em que, caso o aluno seja reprovado, o valor undefined seria exibido. Voltando pra página, teste o exemplo dado, coloque o valor 7 e o valor 8, note que o texto "Aprovado" será exibido. E caso ele tire as notas 7 e 6 , a média agora vai ser 6,5, e será exibido "Reprovado" e não undefined, como exposto na Figura 7.

Resumindo, o comportamento desse novo código é igual ao anterior, porém, agora não existem mais duas condições sendo avaliadas, apenas uma. Nesse caso, se a média for maior ou igual a 7, a expressão é verdadeira e apenas o primeiro comando resultado = "Aprovado" é executado. Caso contrário, ou seja, caso a média seja menor que 7, a expressão é falsa e apenas o comando resultado = "Reprovado" é executado.

Até agora, vimos que o nosso exemplo trabalha apenas com duas condições complementares. E se tivermos mais condições? Por exemplo, se desejarmos que o programa continue retornando "Aprovado" para médias maiores que 7, mas que ele retorne "Recuperação" para notas maiores ou iguais a 5 e menores que 7 e retorne “Reprovado” apenas para notas menores que 5.

Nesse caso, é indicado que você faça uso da instrução if-else encadeada, cuja forma geral apresentamos no slide (Figura 8). Nesse comando, temos que, se a condição 1 for verdadeira, apenas os comandos 1 a n serão executados. Caso a condição 1 seja falsa, verificamos a condição 2. Se ela for verdadeira, apenas os comandos m a p serão executados; caso contrário, ou seja, caso a condição 2 também seja falsa, apenas os comandos q a t serão executados. Assim, para que os comandos q a t sejam executados, será necessário que as condições 1 e 2 sejam falsas.

É importante ressaltar que não existe um limite para o encadeamento de condições. Vamos ver como ficaria o nosso exemplo?

Veja no Código 5 que você pode alterar um pouco mais a função resultado e ter o if-else encadeado. Assim, se (if) o m for maior ou igual a 7, resultado recebe o texto "Aprovado". Senão (else), se o m não for maior ou igual a 7 e for maior ou igual a 5, resultado recebe o texto "Recuperação". Senão (else), resultado recebe o texto "Reprovado".

Código 5 - 09_5 Media de Notas.html e 09_5 Media.js

Você tem agora o if-else encadeado, que verifica primeiro se o m >= 7, atribuindo o texto "Aprovado". Caso seja falso, será feito um novo teste para verificar se o m é maior ou igual a 5, atribuindo o texto "Recuperação" à resultado. Caso esta segunda condição também seja falsa, ou seja, o m é menor que 7 e menor que 5, entramos na condição else e o resultado recebe o texto "Reprovado".

Você pode ir à página e verificar que, se forem adicionados os valores numéricos 7 e 8, o aluno, nesse caso, estará aprovado. Agora, você verificará uma média entre os valores 5 e 7, digitando as notas 7 e 4. O aluno ficará com a média 5,5 e ao clicar OK aparecerá o resultado "Recuperação", entrando no caso intermediário. Faça um novo teste para as notas 5 e 4. O aluno ficará com a média 4,5 e ao clicar OK o resultado será "Reprovado", como exposto na Figura 9. Veja que você terá o if-else encadeado e, como já foi dito, não tem um limite para esse encadeamento.

JavaScript também oferece um operador condicional ternário que recebe uma condição e duas expressões. Para isso, o formato utilizado é condição?expressão1:expressão2. Esse operador retorna a primeira expressão, caso a condição seja verdadeira; caso contrário, retorna a segunda expressão.

Ele é muito utilizado para fazer uma atribuição condicional como a que vemos no slide (Figura 10), a qual corresponde à atribuição que vimos anteriormente usando if-else. Porém, note que fazemos a atribuição condicional com um único comando. Se m for maior ou igual a 7, a variável resultado receberá o valor "Aprovado". Caso contrário, ou seja, caso m seja menor que 7, a variável resultado receberá o valor "Reprovado".

Código 6 - 09_6 Media de Notas.html e 09_6 Media