Olá, estudante! Na Lição 7 aprendemos sobre como integrar e comunicar os elementos em HTML com a linguagem JavaScript, por meio de manipulação de rotinas de eventos com manipulação DOM. Esta é a maneira básica de manipular os elementos das linguagens estudadas até aqui, organizando de forma eficaz os códigos implementados nos navegadores de internet.

Nesta lição vamos nos aprofundar na lógica de programação por meio das estruturas condicionais, ou seja, as condições para executar um programa. Qual é a regra de negócio que deve ser executada primeiro? Entender sobre qual condição devemos aplicar em determinadas situações que exigem o nosso raciocínio lógico. Quais as práticas de programação que um desenvolvedor Front-End pode utilizar ou não?

A estrutura condicional é aplicada em diversas situações do nosso cotidiano. Como exemplo, vamos adotar que estamos sem dinheiro e precisamos ir até um caixa eletrônico realizar um saque, de preferência em uma agência mais próxima de nossa casa ou trabalho. Ao chegar na agência, já somos direcionados até o caixa eletrônico, por meio de uma fila de espera – caso a fila exista.

O próximo passo para sacar dinheiro é inserir o cartão – em alguma agência pode ter a opção sem cartão, por meio da funcionalidade biométrica. Após inserir o cartão, é apresentado o menu de opções: “o que deseja fazer?”, em seguida escolhemos a opção “saque”. Na seção de saque existem diversas lógicas utilizando a estrutura condicional. Dentre elas, é verificado se existe dinheiro naquele caixa eletrônico. Caso exista, é apresentado o valor das notas que estão disponíveis para serem sacadas. Digamos que na tela do caixa eletrônico apareçam apenas notas de R$ 50,00. Então, não adianta querer sacar R$ 60,00, pois o caixa não tem notas no valor de R$ 10,00 para disponibilizar.

Outra estrutura condicional é se tem saldo na conta; caso não tenha, se deve descontar do limite especial que o banco libera para cada cliente, dependendo das condições de cada conta e política da Agência. 

A ideia é praticar a lógica de programação, interpretar e implementar a sintaxe na linguagem JavaScript. Todo o desenvolvedor Front-End busca sempre aprimorar seu código, portanto tenha paciência e pratique cada vez mais para entender e refinar sua lógica de programação.

Em nosso cotidiano diversas são as situações que vivenciamos, as quais é necessário criar uma condição para indicar qual tarefa e/ou atividade deve ser executada primeiro. Nós seres humanos e outros animais costumamos tomar decisões o tempo todo, que interferem em nossas vidas, sendo certas decisões pequenas, como: imagine que ao chegar em casa após a aula você esteja com apetite. Então, como já conhece onde fica o lugar dos biscoitos deliciosos que a mamãe ou vovó fazem, a pergunta é: "devo comer um biscoito ou dois?"; ou em situações grandes, como: "devo ficar no meu país de origem e somente trabalhar ou devo estudar e ter uma melhor qualidade de vida futuramente em outro país?".

As estruturas condicionais nos permitem representar melhor as tomadas de decisões, de modo a determinar soluções de problemas complexos que afetam diretamente nossos clientes ou usuários finais, que necessitam optar por uma única condição ou diversas condições, dependendo da complexidade do problema estudado.

A linguagem JavaScript fornece essas estruturas para auxiliar o desenvolvedor Front-End a encontrar soluções para problemas complexos, em que os clientes necessitam desses serviços, seja para realizar um pix em um sábado à tarde, ou realizar um pagamento pelo internet banking, sem necessitar ir à agência, lotérica ou estabelecimentos credenciados que disponibilizam estes serviços. Para isso, precisamos aprender as estruturas condicionais e qual a melhor forma de utilizá-las, seja uma estrutura condicional simples ou composta.

A linguagem JavaScript proporciona ao desenvolvedor Front-End métodos condicionais para atender à demanda e necessidade que os clientes precisam otimizar por meio da informação. Estes métodos condicionais são, na maioria das vezes, eficazes para solucionar problemas decorrentes em nosso cotidiano. Assim, as estruturas condicionais foram desenvolvidas para facilitar a codificação ao nível de compreensão que nós desenvolvedores conseguimos aplicar em nossos projetos implementados no dia a dia (ZAKAS, 2005).

Para definir uma estrutura condicional em um determinado programa, a linguagem JavaScript utiliza-se de instruções próprias para essa finalidade. Dentre elas, os comandos são utilizados para a leitura de dados (entrada de variáveis, parâmetros no início do programa), também realiza métodos e funções operacionais (processamento do sistema) e apresenta os resultados para o usuário final (saída de informações com a lógica de programação e estruturas utilizadas). Nesta lição, vamos modificar alguns desses comandos para que possamos inserir dentro do programa as estruturas condicionais, ou seja, a execução desses métodos vai depender da condição e necessidade de atender aos problemas estabelecidos pelos clientes e também dos dados fornecidos pelo usuário ao digitar no sistema (LEPSEN, 2018).

Para este case, preparamos o seguinte problema: devemos calcular a média das notas de um aluno e exibir a estrutura condicional se o aluno foi aprovado, está em exame (recuperação) ou reprovado. Assim, para a entrada de dados, temos a leitura do nome do aluno e as notas que ele obteve durante o período da disciplina cursado. Para o processamento dos dados, temos o cálculo da média das notas do aluno e a estrutura condicional "Aprovado", "Exame" ou "Reprovado". Lembrando que, para a saída, será informado ao usuário final (Professor e/ou aluno) a situação do aluno com a seguinte mensagem: "Você foi aprovado(a)", ou "Você está em exame", ou “Você foi reprovado(a)” (GRONER, 2018).

A estrutura condicional na linguagem JavaScript pode ser simples ou composta. Para entendermos melhor como utilizar os tipos de condições estruturais, sendo simples ou compostas, é essencial analisar sua montagem por meio de fluxogramas para facilitar nosso entendimento e como é utilizado na linguagem de programação JavaScript.

Os fluxogramas auxiliam os desenvolvedores a entender a sintaxe da lógica a ser utilizada mediante o problema exposto, sendo úteis para facilitar a compreensão do fluxo de comandos em uma estrutura de controle. A Figura 1 apresenta essas condições.

A Figura 1 apresenta uma estrutura condicional clássica, sendo que inicia por uma seta e também uma ilustração no formato de losango, indicando que existe uma condição a ser adotada. Caso for verdadeira esta condição, o programa executa apenas as condições verdadeiras, sendo falso somente as condições falsas. Essas condições controlam o fluxo do programa, tanto na entrada dos dados e processamento da lógica do sistema quanto na saída das informações exibidas ao usuário final (SILVEIRA; ALMEIDA, 2013).

Dessa forma, para criar uma estrutura condicional clássica em nosso código, utilizamos as propriedades if... else (se... senão), sendo que a sua estrutura condicional pode ser do tipo simples ou composto. Caso adote uma condição do tipo simples, por exemplo, podemos ter um fornecedor farmacêutico que deseja vender apenas medicamentos para uma determinada faixa etária. Também temos a estrutura condicional composta que cria diversas condições, como: “um aluno de natação o qual podemos classificar de acordo com a sua faixa etária: infantil, juvenil ou adulto”.

Na linguagem JavaScript, a estrutura condicional if...else pode ser descrita com a sintaxe de definição com apenas uma condição, sendo classificada como simples ou composta, e várias condicionantes. Exemplos de sintaxe do comando if...else:

Na linha 1 temos o comentário explicando para que serve o trecho do código contido entre as linhas 2 e 4. Na linha 2 temos o if (se), e entre parênteses a condição, sendo esta condição sempre verdadeira. Na linha 3 temos o comando que atende à condição do se. Por fim, na linha 4, temos o símbolo chave, que fecha a condição do if (se). Na linguagem JavaScript, quando existir apenas um comando que pertence a uma condição simples, o uso das chaves não é obrigatório. Mesmo assim, para fins didáticos, vamos sempre adotar o uso das chaves “{...}”.

Temos também a sintaxe com definição com uma condicionante, utilizando if... else (se... senão):

Na linha 1 temos o comentário indicando que a estrutura condicional tem o comportamento de verdadeiro ou falso, ou seja, if... else (se... senão). Na linha 2 temos entre parênteses a condição verdadeira. Na linha 3 a condição com o comando sendo verdadeiro. Na linha 4 fecha a chave e continua com o else (senão), indicando que a condição será falsa. Na linha 5 o comando falso. E, por último, na linha 6, fecha “}” da estrutura condição do if... else.

Outro exemplo de sintaxe de estrutura condicional utilizada é a de múltiplas condições:

Na linha 1 temos o comentário ilustrando a funcionalidade de utilizar a estrutura condicional empregando múltiplas condições. Entre as linhas 2 e 5 existem duas condições verdadeiras: repare que na linha 2 temos a abertura condicional if (se), e na linha 4 temos a condição else if (senão se); se a condição 2 for verdadeira, executará o comando 2, descrito na linha 5. Na linha 6 temos a condição else (senão) indicando que, se os dados fornecidos pelo usuário forem falsos, então, o interpretador executa a opção Comando 3, descrito na linha 7. Na linha 8 fecha a múltipla condição da estrutura condicional.

Para o nosso desenvolvimento nesta lição, vamos resolver o problema para calcular a média das notas de um aluno e exibir a estrutura condicional se o aluno foi aprovado, está em exame ou reprovado, conforme enunciado no Case. Primeiramente, utilizaremos das rotinas de elementos de manipulação DOM para estruturar nossas variáveis, parâmetros, métodos e funções. Em um documento HTML, insira o código a seguir:

Analisemos as principais linhas do exercício proposto:

• Linhas 1, 2, 3 a 8: na linha 1 declaramos qual o tipo de documento que os navegadores Web vão interpretar o código implementado. Em nosso caso, estamos programando na linguagem HTML. Na linha 2, qual o idioma que será traduzida a página de internet, que será traduzida para o português “pt-BR”. Nas linhas 3 a 8 estão os códigos que compõem o cabeçalho do site em HTML. Dentre as tags <head></head> temos os metadados que servem para tratamento de acentos ortográficos como “UTF-8”, compatibilidade entre os navegadores, em especial ao navegador Internet Explorer Edge, a padronização internacional da linguagem HTML para todos os navegadores e o título principal da página de internet que está localizado ao acessar a aba no navegador (GRONER, 2018).

• Linhas 10 a 14:  nas linhas 10 e 11, chamamos os elementos <header> e <nav> para que possamos destacar os títulos e quais os elementos que podem vir a ser navegados no documento HTML. Na linha 12 é inserido um título com a tag <h1> para o usuário localizar e saber do que se trata o programa, que em nosso caso é sobre o cálculo da média do aluno, e também qual a sua situação – aprovado, exame ou reprovado. Nas linhas 13 e 14 ocorre o fechamento das tags </nav> e </header>, para que o sistema funcione corretamente.

• Linhas 15 a 37: na linha 15 foi inserido um bloco de divisão para identificar o conteúdo contido no documento HTML. Nas linhas 16 a 34 foram inseridos nos elementos <p></p> o nome do aluno, as três notas que o aluno possa obter no decorrer do ano letivo e um botão para o usuário final clicar no site e apresentar o resultado da média e a situação do aluno. Nas linhas 35 e 36 foram inseridos no elemento <h3> como resultado a Média e a Situação do aluno, assim que o usuário pressionar o botão “Exibir Média e Situação” contido no formulário. Na linha 37 foi fechado o bloco de divisão da classe conteúdo referente à tag <body> do documento HTML.

• Linhas 38 a 43: nas linhas 38 a 40 foram inseridos comentários para que o desenvolvedor saiba que existe uma vinculação dos elementos em HTML com a linguagem de programação Javascript. Na linha 41 foi implementado o caminho raiz contendo o diretório “js” e o arquivo nomeado como “mediaDoAluno.js”. Nas linhas 42 e 43 foram finalizadas as tags </body> e </html>, para que o navegador de Web entenda que o código foi encerrado.

Agora, falta implementar o arquivo “mediaDoAluno.js”. Vejamos como foi implementada a lógica de programação de estruturação condicional na linguagem JavaScript:

Analisemos as principais linhas do exercício proposto:

• Linhas 1 a 40: nas linhas 1 a 8 foram criadas as variáveis para obter os valores inseridos pelo usuário informando o nome e as notas dos alunos. Nas linhas 10 a 15 foram configuradas as variáveis nome e notas, para converter os caracteres e erros ortográficos. No caso das notas, utilizou-se a função “Number”, que serve para o interpretador da linguagem JavaScript entender que é um número e não um texto do tipo primitivo string. Na linha 17 foi calculada a média das notas. Na linha 20 foi apresentado no sistema da página Web o resultado da média, para o aluno saber o cálculo. Nas linhas 26 a 36 inseriu-se a lógica de estrutura condicional “if” para verificar se a média do aluno está acima de 7.0, entre 4.0 e 5.99 ou inferior a 3.99. Nas linhas 38 e 40 são apresentados os resultados assim que o usuário clicar no botão “Exibir Média e Situação” (LEPSEN, 2018).

Neste problema, podemos abordar as três linguagens de programação que o desenvolvedor Front-End precisa dominar para o mercado de trabalho. Repare que o código HTML contém as tags básicas de estruturação da página. Além disso, temos a referência ao arquivo contendo o programa JavaScript para manipular os eventos dos dados e informações da página. E, por último, temos apenas a estilização da página, alterando a cor da fonte de acordo com a média do aluno: se a média for maior ou igual a 7.0, cor “azul”; se a média estiver entre 4.0 e 6.99, cor “verde”; caso contrário, a cor da fonte será “vermelho” (ZAKAS, 2005).

Nesta lição, aprendemos como utilizar a estrutura condicional if... else (se... senão), de modo simples e múltiplas condições, dependendo do problema proposto. No exemplo proposto, implementamos uma condição composta, verificando as condições da média do aluno e apresentando como resultado a resposta, caso o aluno tenha sido aprovado, exame ou reprovado.

Este tipo de estrutura condicional é muito utilizado em nosso cotidiano, visto que a maioria dos problemas que envolvem sistemas e aplicativos sempre terá esta estrutura condicional. Esta ferramenta auxilia o desenvolvedor Front-End a solucionar problemas que para o usuário final parecem ser complexos. Tudo depende do esforço e estudo do desenvolvedor Front-End.

Na próxima lição, vamos aprender a manipular a estrutura de repetição for (para) e quando devo utilizar a estrutura de repetição for. Veremos seus conceitos, sintaxe e vamos implementar um exemplo para entender seu funcionamento.

Agora é a sua vez de aplicar os conhecimentos adquiridos vistos até aqui, implementando com a estruturação condicional if... else (se... senão). Deste modo, elabore um programa que leia um número, informado pelo usuário, e calcule sua raiz quadrada. Caso a raiz quadrada deste número seja exata, conhecida como “quadrado perfeito”, informar a seguinte resposta: "Raiz quadrada é:   "; caso contrário, informe ao usuário: "Este número não é uma raiz quadrada perfeita. Raiz é: ". Isto é, implementar um programa que leia e mostre no sistema a resposta ao usuário final. Bons estudos e até a próxima!