PDF - VERSÃO DE IMPRESSÃO

LIÇÃO 6: Operadores, Formulários,
Eventos e Funções no JavaScript

objetivo

Olá, estudante! Na Lição 5, aprendemos sobre a linguagem JavaScript e a sua integração com a linguagem HTML, algumas propriedades e comandos, como “alert()”, “prompt()”, caso necessite informar alguma mensagem, e, também, como fazer para o usuário inserir algum dado ou informação utilizando o navegador (browser). Aprendemos, também, sobre as variáveis em JavaScript e como padronizar seus nomes, além de termos visto como aprimorar a lógica de programação, por meio de exercícios resolvidos e propostos, e os tipos de variáveis existentes.

Nesta lição, estudaremos os tipos de operadores e entenderemos como refinar a integração do HTML com JavaScript, por meio de campos que são utilizados em formulários (como: cadastro de clientes, páginas de fale conosco e contato, entre outras formas), além de fazer uma breve introdução a eventos e funções. Os exercícios de fixação implementados nesta lição estão disponíveis no Google Drive.

problematização

Neste tópico, veremos sobre os operadores aritméticos que utilizamos em qualquer operação de matemática básica. A grande dificuldade em saber sobre lógica de programação é que necessitamos aprender alguns conceitos em matemática. Aqui, veremos conceitos básicos que auxiliam na comparação de valores lógicos e aritméticos. Pense: como se aprende matemática? Talvez, você diga que fazendo boa leitura do conteúdo, e, de fato, não é errado afirmar isso. Mas você concorda que resolver os cálculos matemáticos é essencial? Concorda que praticando os cálculos o aprendizado será mais efetivo? Para os conceitos apresentados aqui, seguimos a mesma ideia, você nunca deve deixar de estudar sobre eles, e a grande dificuldade de todo programador é ensinar sobre lógica, pois não há como fazer isso de maneira simples e fácil, é preciso praticar, praticar e praticar (UZAYR, 2022).

A elaboração de um código enxuto, com lógica compacta e objetiva, é o diferencial de todo o desenvolvedor Front-End. Quando a lógica é objetiva e direta, a execução do programa é facilitada, pois quanto maior for a quantidade de códigos inserida em sua página, maior será a lentidão do navegador para interpretar os dados e exibi-los. O importante é que ele seja de fácil manutenção (possua manutenibilidade). Outro detalhe que destaca muito um profissional de Front-End é que seu código não é obsoleto, ou seja, podem passar meses e, até mesmo, anos que sempre será utilizado. Pense no sistema de agência bancária, é apenas realizado a inovação de layout, só que, a lógica permanece a mesma, costuma-se dizer que a programação Back-End é utilizada como reuso, o que facilita muito para que o programa seja aperfeiçoado e robusto (LEPSEN, 2018).

Ao aprender a lógica de programação e tornar-se expert em uma linguagem, você estará apto(a) para o mercado de trabalho e tenho certeza de que não faltará emprego e melhores oportunidades em organizações que pensem no colaborador como uma peça de quebra-cabeça. Ele é essencial e fundamental para a sua empresa (UZAYR, 2022).

case

Neste tópico continuaremos nosso aprendizado na linguagem JavaScript, aprofundar-nos-emos na integração do HTML com JavaScript, pois ela é necessária para, nas próximas lições, implementarmos o site da pizzaria, principalmente, inserir a quantidade dos itens de menu “Pedidos” e criar o formulário para página de “Cadastre-se!”. Para isso, é necessário aprender aos poucos e saber quando aplicar os conceitos e fundamentos desta fantástica linguagem de programação. Nosso propósito aqui é estimular e facilitar seu aprendizado de maneira simples e prática, por isso, sempre, resolva os exercícios propostos e entenda o que está sendo realizado em cada tópico da lição.

Para este caso, continuamos a ver um pouco mais de operadores aritméticos e lógicos, pois isso facilitará nosso aprendizado, isto é, torna-se mais fácil de aprender as próximas lições que aplicam estruturas de dados condicionais. Outro comando que utilizaremos é aquele que cria formulários no HTML e os integra com as funções e os eventos da linguagem JavaScript. A princípio, pode parecer complexo, mas veremos, no próximo tópico, uma maneira ágil de aprender esses eventos. O propósito desta lição é praticar esses comandos; então, para isso, disponibilizaremos exemplos práticos e exercícios propostos para que você possa praticar em sua casa.

Conceitualização

Para aprender qualquer linguagem de programação, é preciso entender, no mínimo, sobre os operadores aritméticos e lógicos. Na linguagem JavaScript, temos, também, os operadores aritméticos, de atribuição, comparação, lógicos, bit a bit (bitwise), unários, entre outros. Começaremos pelos operadores aritméticos apresentados na Tabela 1 (GRONER, 2018).

Tabela 1 - Símbolos dos operadores aritméticos utilizados na linguagem JavaScript
Fonte: adaptada de Groner (2018).

#PraCegoVer: a tabela apresenta oito linhas e duas colunas. Na primeira linha, das duas colunas, temos os nomes delas, sendo o da primeira “Operadores aritméticos” e o da segunda “Especificação” (que trata das especificações de cada operador aritmético). Em relação à primeira coluna, da segunda à oitava linha, temos os símbolos dos operadores e, em relação à segunda coluna, nas mesmas linhas mencionadas, a explicação de cada um desses operadores. Na segunda linha, temos uma barra oblíqua, como símbolo, e “operador de divisão”, como especificação. Na terceira linha, temos um asterisco, como símbolo, e “operador de multiplicação”, como especificação. Na quarta linha, temos o sinal de mais, como símbolo, e “operador de adição”, como especificação. Na quinta linha, temos o sinal de menos, como símbolo, e “operador de subtração”, como especificação. Na sexta linha, temos dois sinais de mais, um ao lado do outro, como símbolo, e “operador de incremento”, como especificação. Na sétima linha 7, da primeira coluna, temos dois sinais de menos, como símbolo, e “operador de decremento”, como especificação. Por fim, na oitava linha, temos o símbolo de “porcentagem”, como símbolo, e “operador de módulo (utilizado para calcular o resto de uma divisão)”, como especificação.

Os operadores aritméticos são muito utilizados na linguagem JavaScript. Estes operadores facilitam o aprendizado e, lembrando, eles são os operadores básicos de qualquer linguagem de programação. Por exemplo, temos o operador aritmético “%”, que calcula o resto da divisão e o retorno de um número inteiro. Pense em um programa para saber se o número inserido pelo usuário é par ou ímpar. Então, ao dividir o número inserido pelo usuário por dois, averiguamos que, se o resultado for zero, consequentemente, ele é par (ZAKAS, 2005).

O operador de atribuição básico é o igual, “=”, isso, porém, não significa que, ao utilizar alguma atribuição, o valor dele retorna igual, mas, sim, que atribui o valor que está à direita. Por exemplo: “var nome = 'Joaquim';”, o valor “Joaquim” é atribuído à variável nome. Vejamos a Tabela 2:

Tabela 2 - Símbolos dos operadores de atribuição utilizados na linguagem JavaScript
Fonte: adaptada de Groner (2018).

#PraCegoVer: a tabela apresenta oito linhas e três colunas. Na primeira linha, das três colunas, temos os nomes delas, sendo o da primeira “Operadores de atribuição”, o da segunda “Operador otimizado” e o da terceira “Resumo”. Em relação à primeira coluna, da segunda à oitava linha, temos os símbolos dos operadores; em relação à segunda coluna, nas mesmas linhas mencionadas, os símbolos dos elementos de operações de atribuição; e, em relação à terceira coluna, nas mesmas linhas mencionadas, a explicação para que serve cada operação de atribuição. Na segunda linha, temos o sinal de igual, como símbolo, “a = b”, como operador otimizado, e “é atribuído o valor de b para a”, como explicação. Na linha 3, temos o símbolo de adição-igualdade (atribuição), como símbolo, “a += b”, como operador otimizado, e “é atribuída a soma de a + b (a = a + b)”, como resumo. Na quarta linha, temos o símbolo de subtração-igualdade (atribuição), como símbolo, “a -= b”, como operador otimizado, e “é atribuída a subtração de a - b (a = a - b)”, como resumo. Na quinta linha, temos o símbolo de multiplicação-igualdade (atribuição), como símbolo, “a *=”, como operador otimizado, e “é atribuída a multiplicação de a * b (a = a / b)”, como resumo. Na sexta linha, temos o símbolo de “divisão-igualdade (atribuição)”, como símbolo, “a /= b”, como operador otimizado, e “é atribuída a divisão de a / b (a = a / b)”, como resumo. Na sétima linha, temos o símbolo de resto-igualdade (atribuição), como símbolo, “a %= b”, como operador otimizado, e “é atribuído o resto de a % b (a = a % b)”, como resumo. Por fim, na oitava linha, temos o símbolo de exponenciação-igualdade (atribuição), como símbolo, “a **= b”, como operador otimizado, e “é atribuída a exponenciação de a ** b (a = a ** b)”, como resumo.

A Tabela 2 apresenta os operadores de atribuição e como é utilizada a lógica de forma compacta, o que facilita muito o tempo de execução dos seus programas. Assim, temos os operadores de comparação, que são utilizados para as estruturas condicionais. Veja os modelos dispostos na Tabela 3:

Tabela 3 - Símbolos de operadores de comparação utilizados na linguagem JavaScript
Fonte: adaptada de Groner (2018).

#PraCegoVer: a tabela apresenta oito linhas e três colunas. Na primeira linha, das três colunas, temos os nomes delas, sendo o da primeira “Operadores de comparação”, o da segunda “Exemplos” e o da terceira “Resumo”. Em relação à primeira coluna, da segunda à oitava linha, temos os símbolos dos operadores de comparação; em relação à segunda coluna, nas mesmas linhas mencionadas, os exemplos de como os símbolos são aplicados na codificação; e, em relação à terceira coluna, nas mesmas linhas mencionadas, a explicação para que serve cada operação de comparação. Na segunda linha, temos dois sinais de iguais, um ao lado do outro, como símbolo, “5 == “5””, em JavaScript significa: “igualdade”, como exemplo, e “retorna verdadeiro se os valores são iguais”, como resumo. Na terceira linha, temos o símbolo sinais de exclamação e igual (que, em JavaScript, chama-se diferenciação) como símbolo, “5 != “5””, como exemplo, e “retorna verdadeiro caso os valores sejam diferentes”, como resumo. Na quarta linha, temos três sinais de igual (igualdade com variáveis primitivas), um ao lado do outro, como símbolo, “5 === 5”, como exemplo, e “retorna verdadeiro se os operadores são iguais e do mesmo tipo primitivo”, como resumo. Na quinta linha, temos o sinal de menor, como símbolo, “2 < 3”, como exemplo, e “retorna verdadeiro se o valor da esquerda é menor que o da direita”, como resumo. Na sexta linha, temos o sinal de maior, como símbolo, “8 > 6”, como exemplo, e “retorna verdadeiro se o valor da esquerda é maior do que o da direita”, como resumo. Na sétima 7, temos os sinais de menor e igual, um ao lado do outro, como símbolo, “5 <= 5”, como exemplo, e “retorna verdadeiro se o valor da esquerda é menor ou igual ao valor da direita”, como resumo. Na oitava linha, temos os sinais de maior e igual, um ao lado do outro, como símbolo, “5 >= 4”, como exemplo, e “retorna verdadeiro se o valor da esquerda é maior ou igual ao valor da direita”, como resumo.

Na Tabela 3, são apresentados os operadores que comparam seus operandos e retornam um valor se, e somente se, eles forem verdadeiros. Estes operandos podem ser classificados em numéricos, objetos, lógicos e strings (MDN, 2022). Dessa forma, temos os operadores lógicos que testam se os valores ou expressões são do tipo booleano (verdadeiro ou falso). A Tabela 4 ilustra estes operadores, vejamos:

Tabela 4 - Símbolos de operadores lógicos utilizados na linguagem JavaScript
Fonte: adaptada de Groner (2018).

#PraCegoVer: a tabela apresenta quatro linhas e três colunas. Na primeira linha, das três colunas, temos os nomes delas, sendo o da primeira “Operadores lógicos”, o da segunda “Exemplos” e o da terceira “Resumo”. Em relação à primeira coluna, da segunda à oitava linha, temos os símbolos dos operadores lógicos; em relação à segunda coluna, nas mesmas linhas mencionadas, os exemplos de como os símbolos são aplicados na codificação; e, em relação à terceira coluna, nas mesmas linhas mencionadas, a explicação para que serve cada operação lógica. Na segunda linha, temos duas barras, como símbolo, “valor1 || valor2”, como exemplo, e “retorna verdadeiro se apenas um valor for verdadeiro”, como resumo. Na terceira linha, temos dois símbolos ampersand, como símbolo, “valor1 && valor2”, como exemplo, e “retorna verdadeiro se os dois valores forem verdadeiros”, como resumo. Na quarta linha, temos um ponto de exclamação e a palavra Not entre parênteses, lado a lado, como símbolo, “!valor1”, como exemplo, e “retorna o oposto do valor, pois o sentido é de negação. Neste caso, o “valor1” é falso”, como resumo.

Na Tabela 4, são apresentados os operadores lógicos e como devem ser utilizados, são muito usados para verificar se um valor é falso ou verdadeiro. No caso do símbolo “&&”, é aplicado quando precisamos comprovar se os dois operadores são verdadeiros. No caso do símbolo “||”, é aplicado apenas quando um dos operadores é verdadeiro, o outro operador não precisa, necessariamente, ser verdadeiro. No caso do símbolo “! – negação”, é aplicado quando queremos provar ao contrário da nossa lógica, ou seja, testa-se o operador, para saber se ele é falso realmente, mas, na verdade, este operador tem que ser verdadeiro (MDN, 2022).

A linguagem de programação JavaScript proporciona a integração de conceitos lógicos, funções e orientações a objetivos aplicados com os elementos do HTML, assim, podemos utilizar formulário para criar eventos e funções. Vejamos esta integração no código a seguir:

1. <!DOCTYPE html>

2. <html lang="pt-BR">

3. <head>

4. <meta charset="UTF-8">

5. <meta http-equiv="X-UA-Compatible" content="IE=edge">

6. <meta name="viewport" content="width=device-width, initial-scale=1.0">

7. <title>Lição 6 - Exemplo 1 de Formulário com JavaScript.</title>

8. </head>

9. <body>

10. <h1>Informe a cidade que quer viajar?</h1>

11. <p>

12. Destino: <input type="text" id="destino">

13. <input type="button" value="Selecionar"> </p>

14. <p id="resposta">

15. </p>

16. </body>

17. </html>

Analisemos as principais alterações do código, que estão localizados entre as linhas 12 e 14:

Linha 12: na décima segunda linha, inserimos o elemento “<input type="text" id="destino"”, que significa que criamos um campo de formulário do tipo que aceita inserir textos e alocamos um identificador para ele, nomeado “destino” (LEPSEN, 2018).
Linha 13: nesta linha, inserimos um campo de formulário, mas o seu tipo de botão serve para o usuário clicar, assim que inserir o nome do local de deseja visitar. Configuramos este campo com o valor selecionar, que aparece para o usuário (SILVEIRA; ALMEIDA, 2013).
Linha 14: nesta linha, inserimos um parágrafo com o elemento “<p>” e o identificador para configurar o evento em JavaScript.

Para utilizarmos os eventos e as funções do JavaScript, introduziremos alguns conceitos destes métodos. Assim que o navegador carregar o documento HTML criado, ele exibirá um título com a informação: “Informe a cidade que quer viajar?”, prescrevido da palavra “Destino” e do campo de texto do formulário, para que o usuário digite a cidade ou local que deseja viajar. Assim que o usuário clicar no botão “Selecionar”, implementaremos uma função para que exiba uma mensagem para ele (GRONER, 2018).

A ideia é introduzir o conceito de função e evento, para utilizar um evento, deve utilizar uma função, que já é interpretada pelo compilador do JavaScript. Exemplos de funções: (on)click, (on)change, (on)submit, (on)load, entre outros. Podemos alterar a ação, ao clicar no botão do formulário, modificar os conteúdos de um campo de texto, enviar os dados de um formulário de contato, entre outros (UZAYR, 2022). Insira o código a seguir:

1. <!DOCTYPE html>

2. <html lang="pt-BR">

3. <head>

4. <meta charset="UTF-8">

5. <meta http-equiv="X-UA-Compatible" content="IE=edge">

6. <meta name="viewport" content="width=device-width, initial-scale=1.0">

7. <title>Lição 6 - Exemplo 1 de Formulário com JavaScript.</title>

8. </head>

9. <body>

10. <h1>Informe a cidade que quer viajar?</h1>

11. <p>

12. Destino: <input type="text" id="destino">

13. <input type="button" value="Selecionar" onclick="selecionarViagem()"> </p>

14. <p id="resposta">

15. </p>

16. <script>

17. function selecionarViagem() {

18. var destino = document.getElementById("destino").value;

19. document.getElementById("resposta").innerHTML = "Seja bem vindo a " + destino;

20. }

21. var selecionar = document.getElementById("Selecionar");

22. selecionar.onclick = selecionarViagem;

23. </script>

24. </body>

25. </html>

Analisemos as linhas 13, 17, 18, 19, 20, 21 e 22. Apenas nesta linhas, foram implementados novos conhecimentos da linguagem JavaScript e, em relação ao restante das linhas, já vimos em lições anteriores:

Linha 13: nesta linha, precisamos chamar a função, então, para isso, utilizamos o nome do evento, que é “onclick="selecionarViagem()"”, senão, a resposta não aparecerá abaixo do nosso formulário.
Linha 17: na décima sétima linha, inserimos uma função, nomeada “selecionarViagem()”, e, dentro das chaves, temos a codificação. Para criar uma função, basta dar um nome a ela, seguido da palavra “function”.
Linha 18: nesta linha, inserimos uma variável, nomeada “destino”, seguida de um atributo que obtém o elemento no documento pelo identificador, cujo nome é “destino”, inserido na linha 12, “<input type="text" id="destino">”. Dessa forma, queremos selecionar o valor que o usuário digitará, então, armazenamo-lo numa variável.
Linha 19: nesta linha, exibimos a resposta “Seja bem vindo a:”, concatenada com a variável “destino”.
Linha 20: nesta linha, fechamos a nossa função “selecionarViagem()” com o sinal de chaves, “}”.
Linha 21 e 22: nestas linhas, adicionamos uma variável, nomeada “selecionar”. Assim que o usuário clicar, com o botão esquerdo do mouse, nela, aparecerá a mensagem abaixo do campo. Este evento é chamado “onclick()”.

saiba aplicar

Até aqui, estudamos os conceitos básicos das linguagens HTML, CSS e JavaScript, os principais métodos e funções e a integração do HTML com JavaScript. No mercado de trabalho, o desenvolvedor Front-End utiliza esses conhecimentos diariamente: na inserção de uma propaganda em forma de banner, que chamamos de pop-up, na elaboração de um formulário de cadastro, para que os clientes comprem seus produtos, nas implementações em carrinho de compra, no rastreamento de pedidos, entre outros.

Por isso, todo desenvolvedor Front-End precisa estudar sobre como facilitar o acesso aos sistemas para seus clientes. Entender a lógica de programação e a necessidade dos consumidores é um grande desafio para este profissional, pois ele está transformando uma ideia que o cliente deseja em um sistema, chamamos isso, no mercado, de produto intangível.

Há muito tempo, os desenvolvedores pensaram em criar um sistema em que o cliente pudesse acessar e digitar o conteúdo dos textos. Isso surgiu da necessidade de seus clientes: transformar o editor de texto Microsoft Word, por meio de acesso à nuvem. Olha a praticidade e a confiabilidade desses desenvolvedores em transformar o desejo de seus clientes em realidade, escrever e editar os textos em tempo real. Agora, pense: quais linguagens de programação foram utilizadas para desenvolver o aplicativo em nuvem da Microsoft Word online?

Agora, é a sua vez de aplicar os conhecimentos adquiridos até aqui na linguagem JavaScript. Utilize os mesmos conceitos vistos nesta lição e elabore um programa que faça a saudação de bom dia. O programa lerá o nome informado pelo usuário, e o sistema responderá à seguinte mensagem: “Bom dia (nome inserido pelo usuário), seja bem-vindo à disciplina de Programação Front-End”. Utilize os conceitos vistos até agora para aprimorar e praticar seus conhecimentos.

Bons estudos e até a próxima!

REFERÊNCIAS

GRONER, L. Estrutura de dados e algoritmos em JavaScript. 2 ed. São Paulo: Novatec, 2018.

LEPSEN, E. F. Lógica de programação e algoritmos com JavaScript: uma introdução à programação de computadores com exemplos e exercícios para iniciantes. 1. ed. São Paulo: Novatec, 2018.

MDN. Expressões e operadores. 6 nov. 2022. Disponível em: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Expressions_and_Operators#operador_comparaca. Acesso em: 17 jan. 2023.

SILVEIRA, P.; ALMEIDA, A. Lógica de programação: crie seus primeiros programas usando JavaScript e HTML. São Paulo: Casa do Código, 2013.

UZAYR, S. U. TypeScript for beginners: The ultimate guide. 1. ed. New York: Taylor & Francis Group, 2022.

ZAKAS, N. C. Professional JavaScript for Web Developers. Indianapolis: Wiley Publishing Inc., 2005.

Page updated

Google Sites

Report abuse