3.3 Operadores lógicos

No exercício anterior, foi criada uma condição com base em uma comparação (media >=7). Há situações em que mais do que uma condição deve ser analisada.

 

Alguns exemplos:

a) um cliente quer um carro da cor azul ou cinza;

b) o preço do carro deve ser inferior a R$ 20.000,00 e o ano maior ou igual a 2010;

c) o modelo do carro deve ser “fusca” e o preço menor que R$ 8.000,00.

 

Para definir mais de uma condição em um programa, devemos utilizar os opera­dores lógicos. A Tabela 3.2 apresenta os principais operadores lógicos disponíveis em JavaScript.

 

Vamos comparar os operadores lógicos utilizando tabelas que indicam os valores que cada comparação pode assumir, a fim de relacionar esses operadores. Para isso, faremos uso de uma tabela verdade – que é uma tabela com todas as possí­veis combinações dos valores lógicos (verdadeiro ou falso) das proposições e dos conectivos (operadores lógicos) utilizados. A seguir, temos a representação de duas variáveis, cor e ano, e um valor que ela pode assumir na execução do programa. Nas tabelas verdade, utilizamos uma letra, geralmente p e q, para representar uma proposição (“o carro é da cor azul”, “o ano do carro é 2017”).

 

var cor = "Azul"; // (p)
var ano = 2017;   // (q)

 

A Tabela 33 apresenta a tabela verdade da negação, representada pelo símbolo (!). Ela pode ser aplicada a apenas uma proposição.

 

 

 

A negação é o mais simples dos operadores relacionais. Ela inverte o resultado (verdadeiro ou falso) de uma condição. Equivale ao sinal de diferente (!=) quando puder ser aplicada. Por exemplo, os testes a seguir realizam a mesma verificação.

 

if (!cor == "Azul") { ... }
if (cor != "Azul") { ... }

 

A conjunção, representada pelos símbolos &&, reflete a ideia da simultaneidade. A Tabela 3.4 expressa os valores resultantes para as proposições p e q, usando a conjunção.

 

Na conjunção, como observado na Tabela 3.4, a expressão só retorna verdadeiro se todas as comparações forem verdadeiras. Se um cliente quer um carro azul e de 2017, ele só será atendido se as duas condições forem satisfeitas. São exemplos de condições utilizando &&.

 

  
if (cor == "Azul" && ano == 2017) { ... }
if (cor == "Cinza" && ano < 2017) { ... }
if (ano >= 2012 && ano <= 2017) { ... }
if (cor != "Azul" && cor != "Vermelho") { ... }

 

Observe a sintaxe dos dois últimos exemplos. Quando uma mesma variável é utilizada na condição, ela deve ser repetida em cada comparação.

Já a disjunção (| |) reflete uma noção de que pelo menos uma das condições deve ser verdadeira, para que o resultado seja verdadeiro. A Tabela 3.5 representa a disjunção.

 

 

Na disjunção, no mínimo uma das condições deve ser verdadeira. Agora, nosso cliente do exemplo quer um carro de cor azul ou de 2017. Qualquer carro em que uma dessas condições for verdadeira serve para esse cliente. Para criar a disjunção, utilize dois símbolos 11.

São exemplos de condições que utilizam o operador 11.

 

if (cor == "Azul" || ano == 2017) { ... }
if (cor == "Azul" || cor == "Branco") { ... }
if ((cor == "Azul" || cor == "Branco") && ano == 2017) { ... }
if (cor == "Azul" && (ano == 2016 || ano == 2017)) { ... }
 

 

Nos dois últimos exemplos, foram utilizados juntos os operadores And (&&) e Or (||). É fundamental o uso dos parênteses para indicar a ordem de precedência das comparações e evitar problemas de interpretação. Observe a última linha dos exemplos: se os parênteses não fossem utilizados, qualquer veículo de 2017 seria selecionado (pois a interpretação iria ocorrer da esquerda para a direita: veículos da cor “azul” e de 2016, ou de 2017).

Vamos construir um novo exemplo para explorar o uso dos operadores lógicos na construção do script. O nosso programa vai calcular o peso ideal de uma pessoa. Para isso, foram pesquisados alguns sites sobre o assunto. Em um deles, há a indi­cação de que o peso ideal de um adulto pode ser calculado a partir das fórmulas: 22 * altura² (para homens); e 21 * altura² (para mulheres).

A página deve ficar semelhante à ilustrada na Figura 33. Para criar o campo de formulário sexo, foram utilizadas as tags <input type=” radio” .. .>. A propriedade nane serve para indicar que os campos de seleção pertencem a um mesmo grupo e, dessa forma, marcar um item implica desmarcar automaticamente o outro. A página também apresenta uma imagem a fim de embelezá-la de uma forma simples, já que o foco do livro não é construir sofisticados layouts. Todas as figuras inseridas nos programas do livro foram criadas por Carolina Kuwabata, da Editora Novatec, a quem registro meu especial agradecimento.

 

 

 

Para alinhar a figura à esquerda da página e definir alguns outros estilos a serem aplicados aos elementos da página, vamos criar um arquivo chamado estilos.css, dentro de uma nova pasta de nome css. Como são poucos os estilos e seguem um mesmo modelo em todos os exemplos, vamos criar um novo arquivo de estilos para cada capítulo. Assim, mantemos organizados os códigos de nossos programas. Inclua as seguintes linhas no arquivo estilos.css a ser aplicado aos exemplos deste capítulo.

 

ing { float: left; height: 300px; width: 300px; }
hl { border-botton-style: inset; }
 

 

Essas regras CSS definem que as tags ing da página devem ficar alinhadas à esquerda e possuir o tamanho 300 x 300px. As tags hl, por sua vez, são apresentadas com uma borda inferior do estilo inset. Isso cria uma linha horizontal que separa o cabeçalho do restante da página, como pode ser observado na Figura 33. A tag <tink rel=”styiesheet” href=”css/estilos.css”> inserida no código HTML define a ligação do documento HTML com um arquivo de estilos CSS.

Para inserir uma imagem em uma página HTML, é necessário primeiro obter a imagem. Elas não são incorporadas ao documento, como ocorre com um docu­mento de texto. Na construção de páginas web, as imagens são apenas referenciadas no código. Elas devem continuar existindo no local indicado para serem exibidas no momento em que a página é renderizada pelos navegadores. Vamos salvar as imagens de nossos exemplos e exercícios em uma nova pasta ing, dentro da pasta de cada capítulo.

Você pode utilizar as imagens exibidas no livro, disponíveis no site da editora, ou realizar uma pesquisa no Google sobre um tema relacionado. Salve a imagem com o nome do arquivo a ser referenciado na tag <ing src=” …”>. O código HTML da página exibida na Figura 33 pode ser conferido no Exemplo 3.2. Lembre-se de utilizar os atalhos do editor (! Tab, img Tab, input:r Tab, input:b Tab, script:src Tab…) para facilitar a digitação dos comandos.

 

Exemplo 3.2 – Código HTML (ex3_2.html)

 
 <!DOCTYPE htnl>
<htnl lang="pt-br">
<head>
<pieta charset="UTF-8">
<neta nane="viewport" content="width=device-wtdth, initial-scale=1.0">
«neta http-equiv="X-UA-Cornpatible" content="ie=edge">
<Unk rel=''stylesheet" href="css/estilos.css">
<title>Exenplo 3.2</titLe>
</head>
<body>
<ing src="ing/ex3_2.jpg" ait="Balança de Peso">
<hl>Programa Cálculo do Peso Ideal</hl>
<p>Nome:
<input type="text" id="inNome">
</P>
<p>Sexo:
<input type="radio" name="sexo" id="rbMasculino"> Masculino
<input type="radio" name="sexo" id="rbFeminino"> Feminino</p>
<p>Altura:
<input type="text" id="inAltura">
</p>
<P>
<input type="button" value="Calcular Peso Ideal" ld="btCalcular">
<input type="button" value="Limpar Campos" id="btLimpar">
</p>
<h3 id="outResposta"x/h3>
<script src="js/ex3_2.js"></script>
</body>
</html>
 
 

 

Para interagir com o usuário a partir do dique nos botões disponibilizados na página, crie um novo arquivo do tipo JavaScript na pasta js e digite os comandos a seguir.

 

 

Código JavaScript do programa Cálculo do Peso Ideal (js/ex3_2.js)

 

Vamos analisar essa primeira function. Inicialmente, foi feita uma referência a todos os elementos utilizados na function e, após, obtidos os seus conteúdos. Utilizaram- -se os operadores lógicos para verificar se os campos foram preenchidos correta­mente. Nesse programa, essa verificação foi realizada a partir de duas condições. A primeira verifica o preenchimento do campo nome e do sexo do usuário. Caso não informados, é exibida uma mensagem de advertência, posiciona-se no campo inNome e há ainda um comando return. Mas retornar para onde?

No item 23, foi feita uma introdução às funções e aos eventos JavaScript. Nela, destacou-se que uma página está estática, aguardando uma ação (evento) do usu­ário. Quando um evento programado ocorre, uma função é chamada. E quando, nessa função, um comando return é executado, ele retorna para o local que originou a sua chamada – nesse caso, a própria página. Portanto, o programa é interrompido e fica no aguardo de uma nova ação (evento) programado no sistema – que poderá ser um novo clique nesse botão.

Já a segunda condição valida o preenchimento do campo altura. Um detalhe nessa condição é que o método NunberO, se aplicado a um conteúdo vazio, retorna o valor 0. Caso o usuário informe uma altura inválida (um texto ou um número com vírgula, por exemplo), a conversão realizada pelo método Number() resultará em “NaN” (Not-a-Number). A condição, portanto, faz essa verificação e, caso isso ocorra, também exibe uma mensagem, posiciona no campo altura e retorna à página.

Realizadas as validações, é hora de calcular o peso ideal seguindo a fórmula indi­cada. No tf para verificar o sexo, é utilizado o valor booleano (true ou false) da propriedade checked do campo RadioButton. Essa propriedade verifica se o campo está ou não selecionado. Nesse tf há uma particularidade. Quando uma variável contém o valor true ou false, não é necessário realizar uma comparação, pois a própria variável já contém um valor que é true ou false.

Observe que nesse programa apenas o cálculo da fórmula está dentro da condição. A entrada e saída de dados é a mesma para pessoas do sexo masculino ou feminino.

Para limpar o conteúdo dos campos, foi criada a função limparCamposQ. Esse processo pode ser realizado de duas formas principais. No exemplo de resolução exibido a seguir, é realizado o acesso aos elementos da página e atribuído um valor vazio ou falso a cada campo.

 

function calcularPesoO {
// cria referência aos elementos manipulados pela function
var inNome = document.getElementById("inNome");
var rbMasculino = document.getElementById("rbMasculino'');
var rbFeminino = document.getElementById("rbFeminino");
var inAltura = document.getElementById("inAltura");
var outResposta = document.getElementById("outResposta");
// obtém o conteúdo dos campos de edição da página
var nome = inNome.value;
var masculino = rbMasculino.checked;
var feminino = rbFeminino.checked;
var altura = Number(inAltura.value);
// verifica se nome foi preenchido e sexo selecionado
if (nome == "" || (masculino == false && feminino == false)) { alert("Por favor, informe o nome e selecione o sexo...");
inNome.focus();       // posiciona (joga o foco) no campo de edição inNone
return;
}
// se altura vazio (0) ou NaN: Not-a-Nunber (um texto for informado, por exemplo) if (altura == 0 11 isNaN(altura)) {
alert("Por favor, informe a altura corretamente...");
inAltura.focus();
return;
}
//se masculino (significa se masculino == true)
if (masculino) {
var peso = 22 * Math.pow(altura, 2);            // Math.pow eleva ao quadrado
} else {
var peso = 21 * Math.pow(altura, 2);
}
// apresenta a resposta (altera o conteúdo da linha outResposta)
outResposta.textContent = nome + Seu peso ideal é 11 + peso.toFixed(3) + " kg";
}
// cria referência ao elemento btCalcular e registra evento associado a calcularPeso var btResultado = document.getElementById("btCalcular");
btCalcular.addEventListener("click", calcularPeso);
function limparCampos() {
// Limpa os conteúdos dos elementos
document.getElementById("inNome").value =
document.getElementById("rbMasculino").checked = false;
document.getELementById("rbFeminino").checked = false;
document.getElementById("tnAltura").value =
document.getElementBy!d("outResposta").textContent =
// posiciona (joga o foco) no elemento inNome
document.getElementById("inNome").focus();
}
var btLimpar = document.getElementById("btLimpar");
btLimpar.addEventListener("click", timparCampos);

 

Observe que a propriedade value, antes utilizada para obter o conteúdo de um campo, é agora empregada para atribuir um conteúdo vazio para os campos do formulário. Para desmarcar os campos do tipo RadioButton, a propriedade checked recebe o valor false. Já a propriedade textContent, por sua vez, é utilizada para limpar a linha da resposta. No final, capturamos o segundo botão (btLimpar) e adicionamos um “ouvinte” para o evento click que vai carregar a função limparCampos.

Outra forma de limpar os campos de edição é executando uma chamada ao método location.reload( ) que recarrega a página atual. Dessa forma, a página volta ao seu estado inicial, não sendo necessário alterar o conteúdo de cada elemento da página. A seguir, a programação com o uso do método location.reload( ).

 

function limparCanpos() {

// recarrega a página

location.reload();

// posiciona (joga o foco) no elemento inNome

document,getElementBy!d(“inNome”).focus();

}

var btLimpar = document.getElementById(“btLÍPipar”);

btLimpar.addEventListener(“click”, limparCampos);