Olá, aluno(a), seja bem-vindo(a) à mais uma lição da disciplina de Programação Front-End! Na lição 6, você aprendeu sobre a integração de HTML com a linguagem JavaScript, por meio de campos de formulários, os princípios de eventos, as funções e os operadores aritméticos, de atribuição, de comparação e lógicos. Nesta lição, você se aprofundará nas rotinas de eventos com tratamento em Document Object Model (DOM). Essa forma de manipular os objetos, por meios de modelos de documentos, facilita a maneira de organizar os diretórios, a padronização dos arquivos e a separação dos elementos para cada documento criado, ou seja, os elementos em HTML implementados terão seu próprio arquivo, a estilização terá seu próprio diretório e assim sucessivamente.

O DOM é utilizado como representação de objetos que compõem a estruturação em forma de conteúdo de uma página web. Nesta lição, você verá como manipular os objetos pelo método DOM, com apoio das linguagens HTML, CSS e JavaScript. Entender a forma de manipular os objetos com o DOM é o princípio dos estudos para Programação Orientado a Objetos (POO).

Para entender melhor sobre as rotinas de tratamento de eventos manipulados por DOM, com a utilização de documentos criados como página de web, precisamos estudar os conceitos e o que essas rotinas têm de vantagem para o desenvolvedor Front-End. Uma das funcionalidades das rotinas de tratamento DOM é separar os arquivos contendo codificação em linguagem JavaScript de arquivos com conteúdo de elementos HTML e CSS, ou seja, organizam os documentos e seus diretórios para desenvolver páginas de web que facilitam a manutenção futura do desenvolvedor Front-End.

Antigamente, para desenvolver uma página de internet, o desenvolvedor Front-End apenas utilizava um arquivo com extensão “.html” e colocava todos os códigos dentro desse documento HTML. Desse modo, não separava as linguagens de programação e, por via de regra, a manutenção era complicada. Além disso, para o navegador interpretar todo o código, ficava muito lento o site, ou seja, as páginas de web apresentavam muita lentidão ao usuário, pois utilizavam-se muitos elementos, como tabelas, e, nas próprias tabelas, eram inseridas a linguagem de estilização CSS e a linguagem JavaScript.

Para o usuário acessar o site, era um verdadeiro desastre, isso causava estresse e desgaste, tanto por parte do usuário como por parte dos desenvolvedores, sem contar que, na maioria das vezes, não existia solução para isso. Com o tempo, as páginas de web tiveram uma evolução, em que o Front-End passou a ser manipulado por meio de rotinas estruturadas por objetos (DOM). Atualmente, a maioria das estruturações criadas pelas indústrias de desenvolvimento de software utiliza o conceito de Programação Orientada a Objetos (POO) com rotinas de tratamento de eventos DOM.

Essa forma de organizar e projetar os sistemas web, para nós, desenvolvedores Front-End, é muito útil, pois, caso ocorra um erro no documento, sabemos em qual linguagem ocorreu o problema e em qual documento e, também, qual linha foi afetada. Isso tudo facilita na hora de pensar como devemos solucionar os problemas apresentados.

No case desta lição, estruturaremos o uso de rotinas de tratamento de eventos (DOM), com manipulação da linguagem JavaScript contendo as tags HTML. Assim, para criar o vínculo entre os arquivos, acrescentamos, no documento HTML, a seguinte linha de código:

Toda vez que utilizaremos a linguagem JavaScript, devemos chamar, ou, melhor, referenciar, com o elemento “<script>”. Isso significa que, dentro dessa tag, teremos as propriedades, as variáveis, os parâmetros, os eventos, as funções e a lógica de programação para que se possa atender às necessidades e aos requisitos sugeridos pelo cliente. Na linha 1, denota-se o elemento ‘src=”nomeDoArquivo.js”’, que indica a origem de onde está localizado o arquivo com extensão “.js”, abreviatura de JavaScript.

Para facilitar a compreensão em nossos estudos, na próxima etapa, implementaremos um programa para revenda de veículos. Nesse sistema, devem ter, como resposta, o valor, em reais, da entrada de 30% e a opção de parcelamento em 48 meses (LEPSEN, 2018). Vamos lá? 

A principal função de um desenvolvedor Front-End é implementar códigos que facilitam a execução das rotinas, de forma ágil. Para isso, precisamos estudar sobre a abordagem de rotina de tratamento de eventos, conhecida como DOM (Document Object Model). O DOM permite realizar operações de inserção e remoção de elementos de um aplicativo mobile, de uma página de internet, entre outros. Dessa forma, essa abordagem facilita a incorporação dos códigos implementados nas linguagens HTML e JavaScript, suportados pelos principais navegadores de web disponíveis no mercado, como: Google Chrome, Firefox, Ópera, Safari, Internet Explorer etc.

Para o exemplo proposto, a nível de aprendizagem, o código HTML, na maioria dos sistemas e programas, segue o mesmo padrão descrito nas lições anteriores. Para solucionar o problema da revenda de veículos, precisamos inserir os elementos “ids”, pois, por meio deles, conseguimos manipular o tratamento de eventos DOM. Analisemos o código em HTML a seguir.

Analisemos as principais linhas do exercício proposto:

• Linha 1 a 8: na linha 1, declaramos o tipo de documento pelo qual os navegadores Web interpretarão o código implementado. Em nosso caso, estamos programando na linguagem HTML. Na linha 2, definimos em qual idioma a página de internet será traduzida, no caso, será traduzida para o português, “pt-BR”. Da linha 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”, para compatibilidade entre os navegadores, especialmente, o navegador Internet Explorer Edge e para 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).

• Linha 9 a 14:  na linha 9, temos a tag <body>, que estão contidos os elementos em HTML, CSS e JavaScript, ou seja, todo elemento que inserir dentro da tag “<body>...</body>”, será apresentado na página do site que está sendo desenvolvida. Nas linhas 10 e 11, chamamos os elementos <header> e <nav> para que possamos destacar os títulos e 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. Nas linhas 13 e 14, temos o fechamento das tags </nav> e </header> para que o sistema funcione corretamente.

• Linha 15 a 23: na linha 15, foi inserida a tag <div class=”conteudo”>, que ajuda na manutenção do conteúdo do site. Da linha 16 a 23, foi inserido o elemento <p>, que serve como parágrafo para o interpretador de texto. Desse modo, no primeiro elemento <p>, foram destacados o nome do veículo e um campo para que o usuário possa inserir o nome pela tag <input type=”text” id=”enVeiculo”>, o qual temos como tipo de entrada um nome, “Jeep Renegade”,  inserido pelo usuário, por meio do formulário disponível na página de web. O elemento “id” é uma identificação que será manipulada pela linguagem JavaScript, sendo sua codificação implementada no arquivo “revenda.js”, do diretório “js”.

• Linha 24 a 26: foi inserida a tag <p> e, dentro desse elemento, está o seguinte código: “<input type="button" value="Opções de valores" id="btValores">”. O “input type” é utilizado para identificar qual o tipo de entrada que o usuário visualiza no navegador de internet Web (browser). O nome de valor utilizado será: “Opções de valores”, seguido do identificador “id=btValores”, cujo nome “bt” é uma abreviação de botão. Na linha 26, temos o fechamento do elemento, “</p>”, que representa um parágrafo.

• Linha 27 a 30: Entre as linhas 27 e 29, foram adicionados os elementos <h3></h3> com o elemento identificador “id”, que são as saídas dos resultados dos veículos, a entrada da parcela do veículo acordado com o cliente e o resultado do número de parcelas restantes referente ao pagamento total do veículo, realizado em 48x sem juros. Na linha 30, temos o fechamento da tag </div>.

• Linha 31 a 36: foi inserido um comentário explicando a vinculação da linguagem JavaScript com os elementos HTML, ou seja, a manipulação dos eventos de rotinas DOM. Na linha 34, foi inserido o seguinte código: “<script src="js/revenda.js"></script>”, cujo elemento “src” significa source, ou origem, em português. Essa tag é utilizada para criar ou vincular um diretório ou arquivo, em nosso caso, criou-se um diretório “js”, abreviação de JavaScript, e um arquivo com o nome “revenda.js” para inserir a codificação da linguagem JavaScript. Entre as linhas 35 e 36, temos o fechamento das tags “</body>” e “</html” (LEPSEN, 2018).

O documento em linguagem JavaScript “revenda.js” contém as variáveis e as funções que servem para manipular os objetos referentes ao documento em HTML. Desse modo, examinaremos o código descrito e suas principais funcionalidades.

Analisemos as linhas do exercício proposto:

• Linha 1 a 7: na linha 1, declaramos uma função em JavaScript, nomeada “Promocao” — em programação, não utilizamos acentuação, pois isso facilita a interpretação e a compilação pelos navegadores web. Na linha 2, foi inserido um comentário explicando o que são variáveis e quais utilizaremos para manipular as ações digitadas pelo usuário final. Entre as linhas 3 e 7, foram declaradas as seguintes variáveis: nome do veículo (enVeiculo) e preço do veículo (enPreco). Como resultado, temos as seguintes variáveis: resultado do veículo (rsVeiculo), resultado de entrada do veículo (rsEntrada) e resultado das parcelas do veículo (rsParcela). Todas as variáveis estão vinculadas ao elemento “id” inserido no HTML, por meio da tag “document.getElementById”, que obtém o elemento por identificação por meio do documento HTML (ZAKAS, 2005).

• Linha 8 a 10: na linha 8, o comentário auxilia o desenvolvedor Front-End a verificar que, nas variáveis “veiculo” e “preco”, foram atribuídas as informações digitadas pelo usuário do sistema, por meio do navegador de preferência do usuário. Na linha 9, é apresentado como a linguagem JavaScript faz para capturar e armazenar a informação do nome do veículo inserido pelo usuário, por meio da propriedade “.value”, que captura o nome do veículo. Na linha 10, temos o armazenamento do preço do veículo. A função “Number()” serve para encapsular a informação inserida pelo usuário e permite converter para valores numéricos (SILVEIRA; ALMEIDA, 2013).

• Linha 11 a 13: Na linha 11, foi inserido um comentário explicando os cálculos para obter os valores de entrada e das parcelas. Importante lembrar que os cálculos podem ser realizados de diversas formas. Nesse exemplo, adotamos uma maneira simples de calcular. Na linha 12, a variável “entrada” calcula o preço do veículo inserido pelo usuário multiplicado por 0,30, ou seja, 30% no valor de entrada. Na linha 12, é atribuída a variável “parcelas”, que se refere ao preço do veículo multiplicado pela entrada de 30% e o resultado dessa multiplicação dividido pelo número de parcelas, que, no caso, denota-se em 48x sem juros.

• Linha 14 a 18: na linha 14, foi inserido um comentário explicando sobre os resultados e as saídas das informações que o programa calculou. Entre as linhas 15 e 17, utilizou-se a propriedade “textContent”, que tem como funcionalidade receber as informações e exibi-las no navegador Web. Assim, o resultado final será armazenado na variável “rsVeiculo”. A frase completa fica assim:
  
  “Promoção: Fox
  Entrada de R$: 14700.00
  + 48x de R$: 306.25”
  
  Entre aspas duplas é atribuída a palavra “Promoção: ...” concatenado pelo sinal de “+” o resultado armazenado na variável “veiculo”, formando, então, a seguinte frase: “Promoção: Fox”, e assim sucessivamente. Nas linhas 16 e 17, foi utilizada a propriedade “toFixed(2)”, que converte o valor decimal inserido para flutuante, com duas casas decimais após a vírgula. Por exemplo, caso o usuário insira o valor 9000, a propriedade “toFixed(2)” converte para 9000.00, e assim sucessivamente. Na linha 18, o símbolo de chave, “}”, fecha a função “Promocao”.

• Linha 19 a 22: na linha 22, foi inserido um comentário explicando sobre o botão “btValores”, cuja finalidade é apresentar o nome do veículo cadastrado, o valor da entrada a ser pago e o valor em 48x sobre as parcelas a pagar pelo consumidor, assim que o usuário clicar nesse botão. Na linha 20, a variável “btValores” obtém os dados informados pelo usuário e os armazena nela mesma, por meio do “id” inserido na página HTML “<input type="button" value="Opções de valores" id="btValores">”. Na linha 21, foi inserido um comentário explicando sobre as rotinas de tratamento de eventos (DOM, utilizando a propriedade “listener”. Na linha 22, a função “addEventListener()” foi adicionado ao botão “btValores” e, assim que o usuário clicar no botão “Opção de Valores”, esse evento será vinculado à função “Promocao()” e toda sua rotina será executada.

Existem diversas maneiras de programar e manipular os eventos e as rotinas com as propriedades compostas no DOM. A maioria dos sistemas implementados pelos desenvolvedores Front-End utiliza essas rotinas para facilitar na manutenção e agilidade dos sistemas, melhorando a interpretação para os navegadores Web disponíveis no mercado.

Uma das formas para referenciar um elemento HTML implementado no documento é sempre identificá-lo no próprio código HTML, como feito na seção Conceitualização, e, após a declaração pelo elemento “id”, utiliza-se o método “getElementById()” no documento JavaScript. Assim, é possível recuperar o conteúdo de um campo de formulário com a propriedade “value” e modificar o texto exibido na página da internet por meio da propriedade “textContent” (LEPSEN, 2018).

O DOM consegue separar o código HTML do código JavaScript, sendo uma boa prática de programação adotada pelos Desenvolvedores Front-End. Assim, sabemos que o HTML e JavaScript têm funcionalidades diversificadas no processo de construção de sistemas de Web. A única ligação que veremos entre o HTML e o JavaScript é a partir da inserção da tag <script src="nomeDoArquivo.js"></script> disponibilizada no documento HTML (UZAYR, 2022).

Agora é a sua vez de aplicar os conhecimentos adquiridos na manipulação de rotina de tratamento de eventos (DOM). Assim, elabore um programa para a promoção feita por um supermercado. Na compra de duas unidades de caixa de bombom, o cliente recebe como desconto os centavos do valor total. Por exemplo, caso o produto seja ofertado por R$ 9,90 e o cliente levar duas caixas de bombons, então, o sistema deve apresentar como mensagem: “Leve 2 por apenas R$ 18,00”. Implemente um programa que leia e mostre no sistema a descrição, o preço e o valor do produto na promoção. Bons estudos e até a próxima lição!