Olá, na lição 13 aprendemos como manipular uma cadeia de elementos em strings, e sobre como utilizar as propriedades e métodos para obter cada uma das letras que compõem uma palavra. Estudamos sua funcionalidade como o processo de validação de senhas de usuários de um sistema, principalmente ilustrando sobre a importância de implementar boas práticas de programação para serem utilizadas em Sistemas de Segurança de Informação.

Outro aspecto abordado foi na preocupação que o desenvolvedor Front-End precisa ter ao garantir a segurança dos dados e informações que envolvem os usuários que acessam determinados sistemas, é o caso de ter uma conta on-line no internet banking, o qual gostaríamos de realizar transações em forma de serviços digitais oferecidos pelas agências. Ou até mesmo, usufruir tranquilamente das redes sociais, que toda vez que acessamos necessitam de realizar um check-in em formato de login e senha para validar se realmente o usuário está correto.

Para esta lição, vamos aprofundar um pouco mais nos estudos de funções e eventos; o processo de criação de funções em um programa, bem como o uso dos eventos em JavaScript. Pelo decorrer das lições anteriores, já estamos familiarizados com a ideia de implementar funções e eventos, porém na sua forma básica.

Agora vamos criar nossas próprias funções e também desenvolver funções com passagem de parâmetros, ou, até mesmo, estruturar funções anônimas, ou seja, fazer com que uma função retorne um determinado valor – ou um conjunto de valores – e, ainda, utilize uma função como um módulo que contém um trecho de código que se repete e que pode ser acionado em vários trechos de um programa – quando precisamos executar esse trecho de código, chamamos o módulo da função, sem a necessidade de reescrever seus comandos.

Os eventos também podem ser explorados, pois o único evento que trabalhamos nos exemplos propostos até aqui foi o evento “click”. Existem diversos eventos disponíveis na linguagem JavaScript, entre eles estão: “change”, “focus”, “keypress”, “blur”, dentre outros. Eles podem ser programados quando o usuário sair de um campo de edição, trocar um campo de seleção, posicionar o cursor em um elemento de formulário, ou, então, pressionar uma determinada tecla no preenchimento de um campo, ou seja, temos diversas opções e funcionalidades de eventos. Lembrando que estamos aprendendo as principais funções e eventos que auxiliam nós desenvolvedores Front-End a implementar a maioria dos sistemas e página de web que existem nos navegadores de internet.

O uso correto de funções e eventos ajudam a verificar como podemos controlar melhor a execução de um programa ao adicionar ações associadas a esses eventos, para isso, aprendemos o conceito de modularização.

É importante destacar que o processo de modularização de programas serve para melhor organizar nosso código. A modularização permite a reutilização de trechos de programa que facilitam a leitura e futuras manutenções em seus sistemas, ou seja, de certa forma, modifica o foco em relação ao que vimos até aqui, pois nossos programas foram evoluindo em complexidade e qualidade, mas sempre com recursos essenciais para que aprendêssemos de forma gradual a solucionar diversos problemas que existem em nosso dia a dia (UZAYR, 2022).

Vamos continuar a resolver problemas nas próximas lições, sendo que nosso objetivo principal é com foco em produzir códigos mais limpos (clean) que possamos compreender e manipular de forma passível e que seja de fácil reutilização (aproveitamento) (GRONER, 2018). 

Saber quando, nós desenvolvedores Front-End, devemos aprimorar algo, é o que nos destaca no mercado de trabalho e valoriza nossa profissão.

As funções recebem também o nome de métodos, procedures e módulos. Para cada linguagem de programação, as funções têm pequenas variações de definição, dependendo da linguagem e do paradigma de programação utilizado.

Na linguagem JavaScript, o uso das funções é associado às modularizações, que são fundamentais para a organização dos códigos em um programa. Para entendermos melhor a utilização dos módulos, digamos que temos que implementar um sistema para uma empresa que deve cadastrar os clientes, funcionários e fornecedores.

Em todos os cadastros, deve ser validado o CPF da pessoa. Se optarmos em desenvolver uma função para validar o CPF, ela poderá ser reutilizada nos três cadastros desse sistema. Desta forma, podemos criar uma função que receba como parâmetro um número de CPF e testá-la. Uma vez concluído o desenvolvimento deste módulo, ela poderá ser reutilizada nesses cadastros e principalmente em outros sistemas que vamos desenvolver no decorrer de nossa vida de programadores (GRONER, 2018).

Outra propriedade das funções são os parâmetros. Nota-se que em lições anteriores já estudamos e utilizamos o método “alert()”, que sempre passamos por parâmetro a mensagem de alerta a ser exibida em forma de popup. Ou seja, um parâmetro é uma informação enviada para uma função no momento em que realizamos a chamada dela. O parâmetro serve para ampliar o uso da função (SILVEIRA; ALMEIDA, 2013).

Em nosso exemplo, vamos trabalhar com a função anônima, ou seja, vamos criar a nossa própria função! As funções anônimas são definidas de acordo com os eventos, sem precisar atribuir um nome para a função, apenas utilizamos a palavra “function()” seguida do código do programa que queremos executar. Com base nisso, vamos implementar um programa que deve ler o preço de um produto qualquer e exibir as formas de pagamento disponíveis que a loja oferece, sendo que devem ser geradas as parcelas em até 10x sem juros e apresentar todas as parcelas de 1x até 10x. Vamos ver a implementação no tópico de “Conceitualização”. 

Temos diversos tipos de funções, como funções com passagem de parâmetros, funções que retornam algum tipo de valor, funções anônimas, funções atribuídas para variáveis, dentre outras.

Como já estudamos, as funções com passagem de parâmetros são utilizadas para passar parâmetros em forma de valores ou mensagens. Toda vez que queremos informar algum resultado ou uma mensagem de atenção e/ou aviso estamos fornecendo uma função ou método que utiliza um parâmetro com a mensagem específica que precisamos enviar (ZAKAS, 2005).

Com a passagem de parâmetros, é possível obter o conteúdo das variáveis passadas em forma de parâmetros, ou seja, os argumentos da função podem ser utilizados com a palavra específica “arguments”. Os “arguments” funcionam como um vetor que contém a lista de valores já informados na chamada da função/método. Assim, sempre que precisamos saber um dado ou uma informação, podemos recuperá-los utilizando a palavra “arguments” (LEPSEN, 2018).

Já as funções que retornam determinados valores são as funções implementadas para receberem parâmetros e então apresentam dentro de cada função uma mensagem ao usuário. Estas funções se tornam mais úteis se retornam um valor específico, pois dessa forma o programa que chamou a função define o que deseja realizar com o conteúdo retornado. Para fazer um programa retornar um valor específico, utilizamos o comando “return”, seguido do conteúdo que desejamos retornar. Vamos explorar uma situação, a qual o aluno está aprovado ou reprovado, conforme o código a seguir:

Note que na função "situacaoAluno()" agora temos dois parâmetros. Observe que a função recebe dois parâmetros e com base neles é definido o conteúdo da variável "situacao". Desta forma, os dois parâmetros são: nota e média, ou seja, qual a nota que o aluno alcançou nas avaliações realizadas e qual foi a média geral no final de ano.

Desta forma, é atribuída à variável "situacao" a estrutura condicional reduzida, ou seja, se a nota do aluno for maior ou igual à média, então a situação é "Aprovado", se não, é "Reprovado". O sinal de interrogação "?" é a primeira parte da estrutura condicional e o sinal de ":" seria a parte do "else" (se não). Deste modo, a função retorna a "situacao" do aluno. O interessante é que em apenas 3 linhas de código criamos uma função com parâmetro e que retorna um valor, no caso a situação do aluno.

Nas funções anônimas, é definida a programação de um evento sem atribuir um nome para a função. Ou seja, utilizamos o comando "function()" e inserimos a lógica da programação que necessitamos resolver. Estas funções são muito utilizadas para a inserção de pequenos blocos de código. Alguns desenvolvedores Front-End utilizam esses recursos para inserir funções específicas que sejam de fácil manutenção pela equipe de suporte (UZAYR, 2022).

As funções que aceitam como atribuição a uma variável são aquelas que, no lugar de se atribuir uma expressão para a variável, conseguimos realizar a atribuição de uma função. Na literatura, estudamos este formato como "expressão de função". Para chamar a função, devemos informar o nome da variável e, como nos outros formatos, é possível declarar parâmetros a serem manipulados pela procedure "function()".

Note que implementamos uma variável “dobro” e atribuímos uma função com parâmetro a “function(a)”. Esta função retorna o valor multiplicado pelo valor 2, ou seja, o dobro que será atribuído na variável “dobro”. Após isso, criamos uma variável “num”, o qual o usuário vai inserir um valor inteiro. Em seguida, chamamos a função/método “alert()” com a mensagem “O dobro é:”, e ligamos com o sinal de “+” a variável “dobro” e “num”.

Existem diversos recursos sobre funções que podem ser estudados. É possível fazer uma função retornar um conjunto de valores a partir do uso de vetores, passando objetos como referências, ou seja, que alteram o conteúdo dos parâmetros em memória refletindo-os no restante do programa. Podemos, também, implementar uma função dentro de outra função, e fazer uma função chamar a si mesma, o qual nomeamos como "recursividade" – é um estudo avançado para esta lição, mas não deixe de estudá-lo à medida que você evoluir no aprendizado e complexidade dos sistemas que você for desenvolver (GRONER, 2018).

Vamos implementar agora o programa comentado na seção "case". Devemos programar uma função anônima que vai ler o preço de um produto inserido pelo usuário e exibir as condições de pagamentos disponíveis que a loja oferece, todos os produtos em até 10 vezes sem juros. Este programa deve apresentar todas as parcelas de 1x até 10x, sem juros. O documento em HTML fica conforme ilustrado.

Para este exemplo, foi desenvolvido um código em HTML que contempla a sua validação em praticamente todos os navegadores, de preferência nos navegadores de web que são mais utilizados comercialmente. Configuramos o interpretador de linguagem “pt-Br”. Dentro do elemento <head></head> foram implementados os elementos metadados como: I) configuração do conjunto de caracteres que o navegador aceita a correção dos erros ortográficos “UTF-8”; II) a compatibilidade dos navegadores para interpretação da linguagem JavaScript, principalmente quando utiliza o navegador Internet Explorer e/ou Edge; III) o metadado que padroniza internacionalmente a interpretação dos comandos na linguagem HTML; e IV) o título da aba do navegador quando acessa a página (UZAYR, 2022).

No elemento <body></body> inserimos o título da página do site como: “Programa Formas de Pagamento Parcelado.” localizado dentro da tag <h1></h1>. Após isso, inserimos o elemento < div class="conteudo"></div> e, dentro deste bloco, o elemento <p></P para pular uma linha, ou seja, chamamos de elemento para configurar um parágrafo em um texto quando precisamos redigir um conteúdo em formato de artigo. Ainda na tag <p></p> colocamos um campo de formulário para que o usuário insira os dados, no caso o valor do preço do produto. Foi inserido também um botão com o nome: “Opções de Pagamento”, assim que o usuário clicar, vai listar a quantidade de 1x até 10x do número de parcelas sem juros. Por fim, vinculamos a linguagem JavaScript por meio do elemento <script src=””></script> para que o sistema entenda que as estruturas sequencial, condicional e repetição estejam vinculadas com a linguagem HTML. Já na linguagem JavaScript, implementamos a lógica de programação da função anônima.

No início do código JavaScript, temos uma mudança, começamos pela captura do elemento "btParcelas" que se encontra no documento da página HTML, especificamente na linha 19. Na linha 5, inserimos o evento "addEventListener()", que indica a funcionalidade com o parâmetro de clicar no botão "btParcelas" e a função anônima "function()" e "{" para indicar que a programação da função anônima será desenvolvida na sequência, ou seja, tudo que vir após o símbolo chave está contido na função anônima.

Em seguida, é criado as mesmas operações de uma função nomeada, onde é implementado a referência aos elementos da página, para obter o seu conteúdo e, para esse programa, foi utilizada uma rotina de repetição "for", em que armazena a resposta exibida na seguinte mensagem: "Formas de Pagamento:" concatenando com a variável "lista".

Nesta lição, estudamos sobre como utilizar as funções e eventos, que, de certa forma, auxilia no controle das execuções de um programa e, também, adicionam ações que estão associadas a esses eventos, como o caso da modularização. A modularização permite que nossos códigos sejam organizados e padronizados, além de permitir a reutilização de blocos ou até mesmo do código em sua forma total. Isto ajuda na leitura e em futuras manutenções em nossos sistemas.

Para nós desenvolvedores Front-End, dominar o processo de construção de funções com passagem de parâmetros e retorno de valor é um importante avanço para quem deseja tornar-se um excelente profissional na área de desenvolvimento de softwares. Implementar programas, sejam para web, desktop, mobile, entre outros, com o uso de funções, ajuda a organizar melhor nosso código e facilita o entendimento para a equipe de manutenção e suporte, além de permitir a reutilização de módulos já desenvolvidos.

As funções criadas e testadas podem ser novamente utilizadas em outra parte do programa, como exemplo, citamos os cadastros que precisam ter a validação do CPF, ou até ao inserir um CEP, os demais campos já venham completados do formulário. As funções economizam tempo e ajudam a produzir sistemas mais confiáveis que permitem o seu melhor gerenciamento e também o trabalho em equipe.

Todos esses benefícios mencionados nesta lição servem de inspiração para que possamos aprender sobre como implementar um sistema, de maneira simples, de modo que, na maioria das vezes, a lógica de programação estabelecida nos sistemas seja complexa, para nós, desenvolvedores Front-End, devemos codificar de uma maneira clara e objetiva e que seja de fácil manutenção, e também que possamos inserir novas lógicas, ou seja, implementando sistemas não obsoletos.

Para familiarizarmos com nosso aprendizado sobre funções e eventos, você como desenvolvedor Front-End recebeu a tarefa de implementar um sistema de controle de pedidos de uma churrascaria. Segue os detalhes e a documentação de requisito: I) O cliente realiza o pedido pelo garçom (atendimento na mesa), que, então, utiliza-se de um tablet ou smartphone para anotar o pedido do cliente; II) A página deve ter recursos que facilitem o atendimento do garçom; III) Um desses recursos é a lista de itens que deve conter as opções de carne e outras a opções de bebidas (cervejas, vinhos e refrigerantes), praticamente um menu on-line; IV) Quando ocorrer a troca entre as opções de carnes e a lista de bebidas, o conteúdo da lista de itens do pedido deve ser automaticamente disponibilizada; e V) A mensagem do pedido do cliente deve ser exibida na própria página de internet. Agora é com você desenvolvedor Front-End. Bons estudos e até a próxima!