Olá, aluno(a), na lição anterior, configuramos o layout do site por meio da linguagem CSS, aplicando suas extensões, estilizando o menu de navegação e a logo, no topo da página do site, e personalizando o conteúdo principal da página. Nesta lição, começamos a introduzir a linguagem JavaScript e, para facilitar seu aprendizado, as resoluções dos exercícios propostos estão disponíveis no Google Drive. 

Estudaremos, agora, na linguagem JavaScript, sobre seus elementos e como funciona suas propriedades e objetos e faremos uma breve introdução sobre eventos e funções. Assim, o objetivo é integrar a linguagem JavaScript à estrutura do documento HTML e CSS. Isso será de grande importância para seu conhecimento, pois o mercado de trabalho necessita de profissionais que saibam implementar sistemas flexíveis e de fácil manutenibilidade para a equipe de suporte.

Para conhecimento técnico, a linguagem JavaScript é a mais difundida em relação às outras linguagens de programação. Esta linguagem ocupa o 7º lugar na listagem de linguagens mais requisitadas hoje em dia (TIOBE, 2022). Além disso, é a melhor linguagem para aprender a desenvolver web front-end, e 97,8% dos sites do mundo utilizam JavaScript. Dessa forma, em termos de salário, a renda mensal para um Desenvolvedor Front-End no Brasil é de, aproximadamente, R$ 4.814,00 por mês (HOSTINGER, 2022).

A linguagem JavaScript é eficaz e uma das mais populares do mundo, sendo utilizada como Front-End e, também, como Back-End. A linguagem possui a tecnologia Node.js, que são módulos de pacote usados em desenvolvimento para dispositivos móveis, aplicativos que geram: I) arquivos em extensões APK para Android e IPA para iOS (Apple); II) aplicações desktop; e III) aplicações web (ZAKAS, 2005).

O JavaScript é utilizado para dispositivos embarcados e para IOT (Internet of Things, ou Internet das Coisas). Com esta ideia, refinamos os sistemas que são disponibilizados para a indústria 4.0 e, também, os aparelhos eletrodomésticos e eletrônicos (GRONER, 2018). Para aprender a linguagem JavaScript, é preciso dedicação e entusiasmo. Assim, você estará apto(a) a mergulhar em: lógica de programação; estrutura de dados; funções e eventos; conceitos de variáveis primitivas e relativas; e em Programação Orientada à Objetos (POO) com JavaScript. Sempre terá alguma informação ou atualização que deverá se aprofundar (UZAYR, 2022).

Primeiramente, aprenderemos o básico, como criar diretórios e entender sobre comentários, variáveis, métodos e funções. Estes comandos estão disponíveis na linguagem JavaScript e ajudam na implementação dos sistemas. Depois de ver estes conceitos, você estará apto(a) a aprender sobre dispositivos móveis, programar Apps e utilizar as extensões fornecidas para Android, iOS e outros. Assim, a intenção é sempre avançar em seus estudos; nesta disciplina, vamos entusiasmá-lo(a) para que aprenda bem como aplicar a lógica de programação, por meio da linguagem JavaScript. Seja bem-vindo(a) a este mundo fascinante que o(a) aguarda e pode ter certeza de que você fará muita diferença ao aprender e aplicar conceitos no desenvolvimento de seus programas, sistemas e aplicativos voltados à informação precisa e sólida para seus clientes. Bons estudos!

Nesse case, aprenderemos sobre a linguagem JavaScript resolvendo os exercícios proposto de programação. Assim, espero que consiga acompanhar os exemplos e criar os códigos de cada exercício apresentado nas lições posteriores. Para cada lição, estudaremos diversos tópicos e elementos e, para esta lição, aprofundar-nos-emos no comando “alert()”, na criação de variáveis e constantes no JavaScript (LEPSEN, 2018). Dessa forma, utilizaremos o conhecimento adquirido nas lições sobre HTML e CSS, para implementarmos nosso código em JavaScript. Por isso, a importância em aprender, pelo menos, os fundamentos básicos das lições anteriores, pois isso o(a) ajudará na implementação de sistemas e na incorporação da lógica de programação e estruturas condicionais de dados (UZAYR, 2022).

Por fim, antes de começar a explicar sobre os conceitos de JavaScript, crie uma nova pasta ou diretório, no local “C:”, com o nome “Licao5”, e, dentro dessa pasta, crie o arquivo, com o nome “exemplo1.html”. Desse modo, as lições posteriores apresentarão exemplos a respeito dos tópicos e conceitos abordados, assim, ficará fácil quando quiser revisar ou, até mesmo, relembrar seus códigos. Importante lembrar que os exemplos propostos terão as respostas para que veja como foi solucionado. Como a criação de diretórios já foi explicada na Lição 2, caso tenha dúvida, basta acessá-la.

O primeiro método que estudaremos será o “alert()”, que tem a funcionalidade de exibir as mensagens em uma caixa do próprio navegador (browser). Uma dica: digite os comandos e códigos em vez de copiar, pois é uma forma de lembrar do comando quando precisar implementar. Para isso, acesse o arquivo “exemplo1.html”, criado no diretório “C:\Licao5” em seu dispositivo, crie o arquivo e digite o código a seguir:

Para executar o código inserido no arquivo “exemplo1.html”, basta dar um duplo clique com o botão esquerdo do mouse e, então, seu navegador renderizará o código e abrirá uma caixa com a mensagem inserida dentro do método “alert()”. Pronto, agora, aprendemos a criar pop-up, que são mensagens ou propagandas de promoções que aparecem em caixas suspensas ao acessarmos o site de eletrodomésticos, instituições de ensino, entre outros.

Procure sempre revisar seus códigos, pois a linguagem de programação JavaScript, assim como todas as outras, é rígida quanto à sintaxe dos comandos. Ela utiliza uma propriedade, chamada Case Sensitive, que diferencia as letras maiúsculas de minúsculas. Caso o pop-up do método alert() não aparecer no navegador, analise, cuidadosamente, sua digitação. Aos poucos, você se acostumará com a escrita dos códigos e adquirirá, cada vez mais, experiência e conhecimento (ZAKAS, 2005; LEPSEN, 2018).

Outro método que estudaremos é o “prompt()”. Já pensou como faz para seu programa receber os dados do usuário, o qual deseja informar seu nome? O comando “prompt()” exibe uma caixa com um texto e um espaço para digitação. Assim, o usuário que estiver utilizando seu programa informará os dados solicitados pelo sistema (GRONER, 2018). Para isso, crie um novo arquivo dentro do diretório “C:\Licao5”, com o nome “exemplo2.html”, e digite o seguinte código:

Analisemos linha a linha: 

• Linha 1: na primeira linha, temos a metatag, para corrigir a acentuação das palavras. Note que a frase “Qual é o seu nome?” têm acento agudo na letra “é”, por isso, aprendemos os elementos principais e básicos na linguagem HTML.

• Linhas 2 e 5: na segunda linha, temos a tag <script>. A tag é utilizada todas as vezes que for programar na linguagem JavaScript, e a codificação deve ser inserida entre as tags, por exemplo, <script>Inserir o código aqui...</script> , incorporada dentro de um documento HTML. Precisamos especificar a localização dos comandos em JavaScript, por isso, utilizamos a tag <script>, para abrir o código, e a tag </script), na linha 5, para fechar o conteúdo do programa.

• Linha 3: na terceira linha, inserimos o comando “prompt()”. Note que, antes, foram inseridos o comando “var” e a palavra “nome”, que significa que estamos armazenando a frase “Qual é o seu nome?”, em algum lugar na memória do computador. Daqui a pouco, aprenderemos sobre o comando “var”.

• Linha 4: na quarta linha, foram inseridos o comando “alert()”, para que o próprio sistema dê uma resposta para o usuário (que seria “Olá”), e o nome que ele mesmo digitou na terceira linha. O sinal de “+” significa uma concatenação entre a string (palavra) “Olá“ e o nome do usuário. Por exemplo, pensemos que o usuário digitou o nome “José”. A palavra “José” será armazenada na variável, chamada “nome”, e, depois, concatenada com a palavra “Olá”. Tendo como resposta: “Olá José”.

Outra dica importante é que, para se tornar um(a) excelente desenvolvedor(a) Front-End, no decorrer da sua carreira, precisará trabalhar com diversos projetos, provavelmente em outras linguagens. Terá também que dar manutenção em algum sistema que você nunca viu ou naquele sistema que faz anos que funciona e o cliente nunca pediu alguma manutenção ou sugeriu alguma nova necessidade. Nesse momento, você perceberá a importância de inserir comentários a estes sistemas. O comentário nada mais é que uma observação inserida no código, com o objetivo de explicar algum detalhe específico que você, como programador(a), ou outro colaborador da empresa achou importante. Além disso, ele permite que entenda o funcionamento do sistema, ou seja, a lógica de programação que foi estabelecida ou alguma regra de negócio solicitada pelo cliente (SILVEIRA; ALMEIDA, 2013).

Os comentários não afetam a execução do programa, pelo contrário, eles são ignorados, pelos compiladores e interpretadores, e essenciais na vida de um programador. É importantíssimo adicionar comentários, para explicar os detalhes de alguma fórmula ou cálculos bem como as rotinas de como comportam-se os itens de pedidos e as formas de pagamentos desenvolvidas pelos programadores atribuídas ao próprio sistema  (LEPSEN, 2018).

Na linguagem JavaScript, os comentários são inseridos em uma linha ou para várias linhas. Vejamos como fica um exemplo inserindo comentários. Elaboraremos um programa que leia um número informado pelo usuário e calcule o quadrado desse número.

Analisemos linha a linha: 

• Linhas 1, 2 e 9: a explicação dos códigos é a mesma apresentada no primeiro exemplo, alterando somente o número da linha. 

• Linha 3: na terceira linha, utilizamos um comentário, com o caractere “//”, que, em HTML, serve para fazer comentários em apenas uma linha. Caso pretenda fazer comentários em mais de uma linha, então, utilize o caractere “/* Insira seu comentário */”, que é um comentário em várias linhas.

• Linha 4: na quarta linha, declaramos uma variável, com o nome “numero”, que serve para armazenar o número inserido pelo usuário.

• Linha 5: na quinta linha, inserimos um comentário para explicar o procedimento de como calcular o quadrado de número digitado pelo cliente.

• Linha 6: na sexta linha, armazenamos o resultado na variável “quadrado” e inserimos a variável “numero” que o usuário informou bem como a operação “**”, que representa o quadrado de número, ou seja, o número elevado ao seu quadrado.

• Linha 7: é comentada a resposta do cliente. Repare que os comentários não aparecem na hora da execução do programa, servem apenas para quem for dar manutenção no código saber o que realmente foi feito. Isto facilita muito para a equipe de suporte, quando precisa ajustar ou testar o programa.

• Linha 8: na oitava linha, é inserido o comando “alert()”, que apresenta o resultado da nossa operação. Dentro do comando, temos, entre parênteses, a frase “O quadrado do número é: “, informando ao cliente qual a operação e o resultado. Após a frase, temos o sinal de mais, “+”, que, na linguagem JavaScript, serve para concatenar com o valor armazenado na variável “quadrado”.

Agora, vamos estudar um pouco sobre as variáveis? Assim, conseguimos implementar alguns conceitos e desenvolver nosso primeiro programa, utilizando a linguagem JavaScript!

Em JavaScript, o uso de variáveis serve para armazenar dados que podem ser definidos, recuperados e atualizados sempre que for necessário. Os valores que são atribuídos a uma variável têm um tipo primitivo. Em JavaScript, os tipos são (GRONER, 2018; LEPSEN, 2018):

1. number (que significa número).

2. string (podem ser palavras, nomes ou frases).

3. boolean (resultados com verdadeiro ou falso).

4. function (são funções criadas pelo programador).

5. object (são objetos que estudamos na Programação Orientada a Objetos (POO). 

6. undefined (que significa indefinido).

7. null (valores que retornam nulo).

8. Arrays (são datas e expressões regulares).

 A linguagem JavaScript é diferente de outras que utilizam o conceito de variáveis, fortemente, tipadas, como Java, C/C++, C#, entre outras. Para declarar uma variável em Java, por exemplo, utilizamos “int numero = 5;”, ou seja, informamos o tipo da variável, que é inteiro, e o nome da variável, que é “numero”, e atribuímos a este número o valor da variável, que é “5” . Em JavaScript, usamos apenas a palavra “var”, veja o mesmo exemplo, agora, em JavaScript: “var numero = 5;”. Não precisamos utilizar o tipo primitivo, o próprio interpretador de JavaScript, ao compilar, já entende que é um número inteiro e, também, não utiliza acentuação para as variáveis, pois o interpretador não entende e causa erro em seu código (GRONER, 2018).

As variáveis definidas com letras maiúsculas são diferentes de variáveis escritas com letras minúsculas. Além disso, o uso do elemento “_”, para a linguagem JavaScript, é válido. Em nossas lições, daremos preferência às letras minúsculas para começar a declaração das variáveis e, quando utilizarmos letras maiúsculas, serão para palavras compostas, isso é definido na literatura como padrão camelcase. Alguns exemplos válidos são: media1, nome, primeiroSalario, precoUnitario, valorTotal, entre outros (UZAYR, 2022).

Vejamos uma aplicação, utilizando todos os conceitos vistos até aqui. Faremos uma transação, em que precisamos ler o preço de um produto e informar a condição de pagamento. Calcularemos e informaremos o valor para pagamento à vista, com 20% de desconto, e o valor a prazo em até três vezes sem juros.

Analisemos as principais linhas do exercício proposto: 

• Linhas 1, 2 e 16: a explicação dos códigos é a mesma apresentada no primeiro exemplo, alterando somente o número da linha. 

• Linha 3: aqui, utilizamos um comentário em uma linha apenas. Explicando a lógica que acontece na Linha 4: criamos uma variável, nomeada “preco” (sem acento), e a convertemos para número, assim que o usuário informar o preço do produto, o valor inserido pelo usuário será armazenado na variável “preco”. Desse modo, os comentários servem para que o desenvolvedor entenda a lógica de programação aplicada no código.

• Linha 4: na quarta linha, definimos uma variável do tipo inteiro, mas, como o usuário deverá inserir um valor do tipo real, ou seja, com ponto flutuante (duas casas após a vírgula), precisaremos inserir o comando “Number”, que serve para converter o valor em número.

• Linhas 5 a 9 e 12: foram realizados comentários (sendo utilizada a cor verde para diferenciar o que é comentário do código implementado), que servem para o desenvolvedor entender a regra de negócio solicitada pelo cliente. Nas linhas 5, 6, 7, 8 e 9, o comentário é realizado em diversas linhas, por isso, utilizamos o símbolo “/* o comentário... */”. Na linha 12, como o comentário é feito em apenas uma linha, utiliza-se o símbolo “//”.

• Linhas 10 e 11: na décima linha, foi criada a variável, com o nome “valorAVista”, padrão adotado na lição. Assim que o balconista inserir o preço do produto, o qual o cliente escolheu, a seguinte fórmula será realizada: “preco * 0.80”, ou seja, o preço do produto terá um desconto de 20%. Também, podemos executar a seguinte fórmula: “var valorAVista = preco – (preco * 0.20);”, que teria o mesmo efeito, porém, o computador demora um pouco mais para realizar os cálculos. Na décima primeira linha, aplicamos o parcelamento em até três vezes sem juros.

• Linha 13 a 15: na décima terceira linha, chamamos o método “alert()” para exibir o valor do produto, valores à vista e a prazo em até três vezes sem juros. Note que inserimos o código “\n”, que serve para pular uma linha. Em HTML, o comando era “<p>”, no JavaScript, este comando segue o padrão da linguagem C. Também, inserimos o comando “.toFixed(2)”, que serve para contabilizar quantas casas decimais queremos ter após a vírgula. Em nosso caso, queremos representar apenas duas casas decimais.

Agora é a sua vez de aplicar os conhecimentos adquiridos até aqui na linguagem JavaScript. Para isso, será proposto um exercício, com a finalidade de praticar a lógica de programação, os comandos de integração nas linguagens HTML e JavaScript. Você deve elaborar um programa para uma churrascaria, o qual leia o valor total da conta e quantos clientes a pagarão. Calcule e informe o valor a ser pago por cliente. Para ajudar na elaboração do exercício proposto, segue a Figura 1, que mostra como precisa ser o resultado do exercício ao executar o programa no navegador Chrome (browser).

Na Figura 1(a) apresenta o valor total a ser informado pelo usuário ou atendente da churrascaria. Na Figura 1(b), o atendente informa a quantidade de clientes que vão dividir o valor total da conta a ser paga. Por último, na Figura 1(c), o resultado final com o valor total a ser pago, número de cliente que dividiram a conta e o valor a pagar individual de cada cliente. Bons estudos e até a próxima!