Olá, estudante! Na lição 12, estudamos sobre os vetores (arrays) de forma que sua estrutura de dados consegue armazenar uma lista em forma de posições na memória do computador. Os vetores são muito utilizados para inserir ou remover itens (elementos) de uma lista de pedidos, ou de compras, ou de alunos de uma turma, por exemplo. Também podemos recuperar e mostrar todos os itens que estão contidos dentro desta lista (ZAKAS, 2005).

Conseguimos criar vetores e correlacionar um vetor com o outro, ou até mesmo concatenar os vetores (acoplar/juntar os vetores), caso necessite realizar esta operação em algum determinado momento da sua codificação. 

Com os vetores, aprendemos a armazenar e percorrer cada item (elementos) e, também, conseguimos acessar a posição de cada elemento, como inserir, remover e modificar a posição automaticamente – como o exemplo proposto sobre atendimentos de pacientes em Consultórios Odontológicos, em que, se estes pacientes são diagnosticados como urgentes, devem ser atendidos na primeira posição que compõem a lista de pacientes.

Nesta lição, vamos aprender como se comportam as strings, que nada mais são do que uma cadeia de caracteres que servem para realizar operações, por meio de métodos para obter cada uma das letras que compõem uma palavra. Podemos converter uma palavra em letras maiúsculas ou minúsculas ou, então, extrair e concatenar partes de uma palavra, por exemplo, temos o dado "Josiane", mas queremos apenas abreviar o seu nome, como "Josi", ou seja, apenas um conjunto de palavras, e para este método obtemos os caracteres individualmente e concatenamos (juntamos) em 4 caracteres, formando o apelido "Josi".

As strings permitem trabalharmos com propriedades que já vem liberadas na biblioteca da linguagem JavaScript, como a propriedade “charAt()”, que serve para percorrer os caracteres de uma string, retornando o caractere de uma posição da palavra que desejamos.

Um dos exemplos que temos com as cadeias de strings é criar uma sugestão de e-mail composto pelas iniciais do nome e sobrenome do usuário, ou validar um formulário de contato em que alguns campos específicos sejam de preenchimento obrigatório, ou até mesmo a validação de senha de usuários ao acessar uma interface de login e senha (LEPSEN, 2018).

Este processo de validação de senhas de usuários de um sistema também pode ser realizado a partir dos métodos e propriedades de manipulação de strings. Isto é muito utilizado em Sistemas de Segurança de Informação atualmente. A atual relevância para o fato é criar regras de composição seguras que gerem caracteres de strings com senhas seguras que são disponibilizadas para o usuário (SILVEIRA; ALMEIDA, 2013).

Uma das preocupações de qualquer desenvolvedor Front End é garantir a segurança dos dados e as informações que contenham em cada usuário. Imagina se alguém invadir ou hackear seu WhatsApp ou sua rede social, qual o transtorno você teria neste exato momento? E se isso ocorrer em uma empresa, quais seriam os impactos? 

Pois bem, o desenvolvedor Front End deve estar preocupado em implementar uma política de senhas em um sistema para impedir que senhas tradicionais sejam geradas, como “12345” ou “admin123”, denominadas como senhas fracas, pois senhas como essas tornam o sistema vulnerável a qualquer invasão e todos os esforços para desenvolver o sistema estarão comprometidos (GRONER, 2018).

Ao utilizar as propriedades e os métodos de manipulação de strings, é possível verificar se uma senha conta com um número mínimo ou máximo de caracteres. Esta senha geralmente é formada por letras e números, pode abranger letras maiúsculas ou letras minúsculas e, ainda, pode-se utilizar algum caractere especial na sua composição.

Você vai aprender a manipular as cadeias de strings nesta lição, e aqui vamos resgatar alguns conhecimentos já obtidos na lição passada sobre o processo de tratamento de criação de vetores, pois alguns métodos utilizados no tratamento de strings retornam um vetor de elementos, como o método “indexOf()”, “lastIndexOf()” e “length()”, por ter o mesmo comportamento tanto em vetores, quanto em strings, o que facilita a nossa aprendizagem (UZAYR, 2022).

Outro método utilizado é quando queremos converter as letras para maiúsculas ou minúsculas, apenas alguns caracteres de uma palavra. Na linguagem JavaScript, estão disponíveis os métodos “toUpperCase()” e “toLowerCase()” que devem ser aplicados na palavra ou na letra que se deseja realizar a conversão (ZAKAS, 2005).

Ao aprender a utilizar essas propriedades e métodos, além de servir para apresentar uma palavra de modo a convertê-la em sua funcionalidade, também é importante para auxiliar nas condições envolvendo palavras e letras. Como sabemos, as linguagens diferenciam as letras maiúsculas de suas equivalentes minúsculas em uma forma de comparação, ou seja, podemos, junto com a propriedade ou método adotado, utilizar também das estruturas sequenciais, condicionais e de repetição (GRONER, 2018).

Neste case, vamos utilizar os métodos “indexOf()”, “split()”, “length()”, “charAt()”, dentre outros. Nesta seção, será implementado o seguinte problema: Uma Organização necessita de um programa na web, que gere um e-mail tanto corporativo como institucional para todos os seus colaboradores. O e-mail deve ser formado pelas letras iniciais do nome do colaborador e de seu sobrenome, seguido do domínio da organização “@xxxxxxx.xxx.xx”. Exemplo: Digamos que o nome do colaborador é “Joaquim Onório de Freitas”, e o da empresa é “Sociedade Anônima S/A”, então o e-mail fica: “jofreitas@sociedadeanonima.com.br”. No tópico “Conceitualização”, vamos ver como implementar esse problema.

Para realizar operações com strings, a linguagem JavaScript tem métodos próprios para esta funcionalidade. Existem métodos para obter cada uma das letras que compõem uma determinada palavra. Assim, podemos converter uma palavra em letras maiúsculas e minúsculas ou, então, extrair partes de uma palavra, como o exemplo que vamos estudar, que será a validação de um e-mail, podendo ser corporativo ou institucional (SILVEIRA; ALMEIDA, 2013).

Os exemplos que utilizam de rotinas de programação com operações envolvendo cadeias de caracteres são muitos. Para as strings, de modo peculiar, podemos utilizar para validação de campos obrigatórios no preenchimento de nomes em um formulário de cadastro de clientes, pedidos de compras, interfaces de login e senha ou criar uma sugestão de e-mail com as iniciais de nome e o sobrenome de um colaborador ou e-mail institucional que utiliza apenas de letras iniciais do nome e o sobrenome ou criar interface de jogos em que o usuário deve acertar as letras que compõem uma palavra (LEPSEN, 2018).

Neste contexto, vamos estudar sobre como percorrer os caracteres de uma string. Estudaremos sobre alguns métodos JavaScript disponíveis para a manipulação de cadeias de caracteres por um dos métodos mais simples e utilizados na programação, que é o método “charAt()”. Esse método é utilizado para retornar o caractere de uma posição específica da palavra. Assim como nos vetores (arrays), a posição inicial da string é 0 (zero).

Outra propriedade já mencionada na lição anterior é a propriedade “length”, utilizada para obter o tamanho do vetor. Esta propriedade é importante para a manipulação de strings. Ela pode ser utilizada em conjunto com a propriedade “charAt()” para concatenar as strings, de modo que é possível percorrer todos os caracteres de uma string. Por exemplo, se quisermos verificar quantas palavras contém o texto de um anúncio, podemos implementar um script com essa funcionalidade (GRONER, 2018).

No exemplo proposto no tópico Case, vamos utilizar uma cadeia de string para resolver o seguinte problema: uma empresa corporativa precisa de um programa que gere e-mails corporativos e institucionais de um único padrão. O e-mail deve ser formado pelas letras iniciais do nome do colaborador e de seu sobrenome, seguidos pelo nome de domínio da empresa “@xxxxxxx.xxx.xx”.  O código em HTML para a solução do problema pode ser implementado da seguinte forma:

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 E-mail Corporativo e Institucional” localizado dentro da tag <h1></h1>. Após isso, inserimos um bloco de divisão com nome de classe “conteudo”, contendo um campo para preencher o nome completo do Funcionário e, também, um botão com o nome "Gerar E-mail do Colaborador". Por fim, vinculamos a linguagem JavaScript por meio do elemento <script src=””></script> para que o sistema implemente a lógica de programação pelo método de strings, e que estes estejam vinculados com a linguagem HTML.

Esta implementação obtém o nome do colaborador e, depois de realizar a validação do preenchimento do nome, divide-o em elementos de vetor a partir da ocorrência de espaçamento. Por exemplo, digamos que o nome inserido pelo usuário é “Alan Turing”, no vetor tem a ocupar duas posições. Em seguida, a estrutura de repetição implementada com o comando for (para) irá percorrer os elementos do vetor, com exceção do último, pois queremos o sobrenome inteiro (assim, o for repete até que i < tam-1). Desta forma, dentro da repetição é realizado o procedimento que obtém a primeira letra de cada uma dessas palavras (partes) do vetor. Por último, é concatenado ao domínio de e-mail "@xxxxxxx.xxx.xx" com a última parte do sobrenome, ou seja, as iniciais de Alan + o sobrenome (Turing) + o domínio registrado pela empresa, ficando como resultado: “aturing@xxxxxxx.xxx.xx”.

Nesta lição, aprendemos a aplicar a manipulação por meio de uma cadeia de strings, sendo muito utilizado em nosso dia a dia. Para fixação de aprendizado, vimos como implementar um programa para gerar e-mail corporativo e institucional, muito utilizado este recurso no mercado de trabalho. O exemplo é bem prático e simples, assim que inserir o nome completo do colaborador, é gerado o e-mail com suas letras iniciais, sobrenome e o domínio que está registrado na empresa.

Note que os exemplos implementados em lições anteriores, no geral, realizavam operações sobre variáveis com números e listas de dados. Nesta lição, abordamos sobre as rotinas de programação que trabalham com cadeias de caracteres (strings). Com isso, aprendemos a percorrer os caracteres de uma string com o auxílio dos vetores (arrays) e métodos disponíveis na linguagem JavaScript, que facilitam a implementação e a nossa evolução como desenvolvedor Front End para aprimorarmos nossos conhecimentos.

Nesta lição, ainda, vamos praticar o seguinte exemplo: com seus conhecimentos adquiridos até aqui, elabore um programa de web que explore o método “charAt()” e consiga atender a seguinte pergunta: “Qual é a música?”. Deste modo, você deve criar uma rotina para ler uma palavra (sugere-se uma música) e exibir, após o clique no botão “Fica a Dica”, a letra inicial da música e as demais ocorrências dessa letra na palavra. As demais letras da música não devem ser exibidas – no lugar deixar apenas um sublinhado (underline) “_”, para representar cada letra que contém o tamanho total da música. Não esquecer que, ao inserir a música no campo “Música”, não deve expor visivelmente o nome dela e, sim, ao preencher deve ter asteriscos “*”. Suponhamos que o nome da música seja: “Mel”, o usuário ao cadastrar deve visualizar apenas “***”.

Na lição número 14, vamos avançar sobre o processo de criação de funções em um programa e o uso das atribuições de eventos em JavaScript. Vimos, até o momento, a forma básica de como criar funções e eventos, mas se precisamos implementar uma função com passagem de parâmetros, ou criar funções anônimas, fazer uma função retornar um determinado valor ou um conjunto de valores, vamos trabalhar com esta técnica que é diversificadamente utilizada em quase todas as linguagens de programação comerciais. Espero por você na lição 14. Bons estudos e até a próxima!