ICC Turma D - UnB 2/04

Prática 8

1- Programas estruturados

Recordando conceitos:
A presença de cláusulas num programa faz nele surgir uma hierarquia de comandos, como veremos. Qualquer linguagem imperativa, isto é, linguagem de programação que contenha comandos de atribuição, seleção e repetição (como o javascript), produz o que podemos chamar de hierarquia de aninhamento de comandos em seus programas. Tais linguagens e programas, bem como os comandos que contêm cláusulas, são por isso chamados estruturados.

Os primeiros comandos estruturados com os quais iremos praticar em javascript serão comandos de seleção. Desses, o mais completo e versátil é o que podemos chamar de comando if-com-else. A sintaxe do comando if-com-else é:

if( condição )   // condição: expressão lógica
{
    // cláusula true: sequência de comandos
}
else
{
    // cláusula false: sequência de comandos
}

Na sintaxe acima observe, atentamente, o seguinte:
Nos exercícios seguintes, iremos praticar com o comando if-com-else. No primeiro execício dessa prática, 8.1, faremos crítica de dados referente ao primeiro trabalho de javascript. No segundo exercício, 8.2, tentaremos tornar mais interativo o botão do exercício 7.1 (da prática anterior), como sugerido ao final da 2a. aula teórica de Javascript.

No primeiro exercício, usaremos funções pré-definidas para testar a conversão dos dados de entrada do primeiro trabalho. No segundo exercício (8.2), ao examinarmos o script resultande do exercício 7.1 daremos exemplos de como podemos nele introduzir comando(s) de seleção para atingirmos o objetivo ali proposto.

As diversas maneiras que encontraremos para fazer esses dois exercícios ilustram duas coisas
  1. A prática da programação é naturalmente progressiva. Raramente alguém se senta hoje para escrever um programa a partir do nada. Na maioria das vezes, ele ou ela estará adaptando, estendendo ou juntando código já disponível para formar um programa novo, que atenda a uma certa especificação. Em jargão de programação, isto se chama reuso de código. O exemplo mais palpável e simples de reuso são as funções pré-definidas, que os interpretadores incorporam à linguagem de programação.
  2. Haverá sempre mais de um jeito de se implementar uma especificação. Dentre essas diversas maneiras, uma geralmente será mais simples de executar e/ou de entender. De início, basta que o programador encontre uma maneira que funcione adequadamente. Depois, o princípio da simplicidade (KISS) deve nortear sua prática de programação (KISS = Keep It Simple, Stupid!).
É hora, pois, de praticarmos com o comando de seleção. Para isso, vamos supor que voce já fez a prática anterior e o primeiro trabalho de javascript. Se ainda não os fez, faça-os agora, antes de prosseguir.

2- Comando de seleção na crítica de dados

2.1 Exemplo com o primeiro trabalho de Javascript

Para praticarmos o que se chama crítica de dados, voltemos ao primeiro trabalho de javascript, ao final da sua apostila html. Lá foi especificado que se implementasse um formulário semelhante ao do código abaixo

<blockquote style="text-align: right">
<form name="f1">
  Valor principal da presta&ccedil;&atilde;o:
<input name="principal" size="20"><br>
  Taxa de juros: <input name="taxa" size="30"><br>
<input name="result" size="40" value="Valor final: "><br>
<input type="reset" value="limpar">
<input type="button" value="calcular"
  onClick="

      //script do trabalho 6
  ">
</form>
</blockquote>

e que o script do botão do formulário f1 fizesse, quando clicado, o seguinte:

"Usando comandos de atribuição e operações aritméticas e literais, o resultado deve ser calculado como o novo valor total da prestação. O cálculo deve seguir a fórmula p*(1+t/100) (onde p=prestação, t=taxa de juros). Além disso, o script deve fazer com que apareça,  no terceiro campo, o resultado em reais e centavos, conforme o exemplo ilustrado na imagem abaixo. a serem processados por um script"

 Ao implementar esse script com um único comando de atribuição, digamos,

result.value = 'Valor final: R$ ' + ( __ ).toFixed(2);

onde  ___  corresponde à fórmula do cálculo descrita na especificação, algo estranho acontece ao usuário caso ele ou ela, acidentalemente ou não, digite dados inconsistentes num dos campos de entrada. Por exemplo, caso ele ou ela digite o valor principal da prestação separando reais de centavos pela vírgula (como seria no português), e não pelo ponto decimal. Por exemplo, digitando  123,45 ao invés de 123.45 (o programador não deve presumir que o usuário da página saiba o que seja "NaN", o que possa ter produzido tal resultado, ou porque ele não está obtendo uma resposta adequada).

A crítica de dados serve, neste caso, para informar ao usuário da página o que pode ter ocorrido de errado.

No script do trabalho 6 acima, a crítica de dados mais simples que se pode fazer é testar se os dados fornecidos nos respectivos campos representam valores numéricos, informando o usuário quando algum dado fornecido não representa, ou o resultado do cálculo quando todos os operandos representam números. Para isso, o script pode fazer uso de uma função pré-definida do Javascript que testa se um dado representa ou não valor numérico: a função isNaN( )

isNaN( ) ("is Not a Number") retorna como resultado:

Assim, antes de submeter os dados digitados à fórmula que calcula o valor final da prestação, como fizemos no primeiro trabalho, iremos agora antes armazenar cada dado convertido a representação numérica em uma variável correspondente, para testarmos se a conversão teve sucesso ou não, e decidir o que fazer, dependendo do resultado do teste. Para a conversão usaremos a função Number(), descrita na prática anterior.

Number() retorna como resultado:


Exercício 8.1

    Crítica de dados: Conversão numérica com verificação

Complete o script abaixo, no código fonte do formulário acima, para que o botão do trabalho 6 agora também informe ao usuário, em linguagem humana, caso o script não possa calcular o que se propõe. Para fazer o código fonte em notação identada, representando-se com margem os níveis de aninhamento de comandos, conforme explicado e descrito acima, use um editor ASCII (notepad) para editar o documento html desse exercício. Depois pedale (teste, corrija, etc.)

...
<input name="principal" ...>...
<input name="taxa" ...>...
<input name="result" ...>...
<input type="button" value="calcular" onClick="javascript:

     p = Number(principal.value);
// declaração implícita de p
     t = Number(taxa.value);     // declaração implícita de t
     if( isNaN(p) || isNaN(t) ) // ||: operador lógico "ou"
     {
         result.value = ___ ; // expressão literal avisando erro
     }
     else
     {
        
// script do tr.6 com as novas variáveis (p e t)
     };

  ">
 
...

     Crítica de dados: Consistência de dados numéricos

Agora que vc completou e testou com sucesso o script acima, pedalando com seu primeiro comando de seleção, podemos pensar um pouco além, no que se refere à crítica de dados. Sabemos que o primeiro dado numérico (armazenado em p) corresponde ao valor de uma prestação, em reais, e que o segundo dado (armazenado em t) corresponde a uma taxa de juros, em porcentagem. Portando, para ser consistente, a entrada de dados deve se limitar a valores não negativos na primeira variável, e a valores entre 0 e 100 na segunda.

Portanto, sua crítica de dados poderia ser aprimorada para testar, também, essas condições de consistência. Em javascript, as duas condições correspondem, respectivamente, às expressões lógicas  p >= 0  e  (0 <= t) && ( t <= 100).

A maneira mais simples de se incluir esse teste adicional na crítica de dados seria aumentando a expressão lógica no if acima, incluindo o novo teste de consistência das duas variáveis de entrada (com o operador lógico adequado, e parêntesis onde necessário), avisando ao usuário do erro com a mesma expressão literal usada no teste da conversão numérica (cláusula true do script acima).

Entretanto, se quiser, voce pode ser mais informativo com o usuário, avisando a ele também da natureza do erro, com mensagem de erro específicas (dados não numéricos, dados fora da faixa adequada). Neste caso, terá que se valer de comandos ifs diferentes, para testar antes uma coisa, depois a outra, antes de submeter a cláusula que calcula o valor com desconto a execução. Onde e como colocar este outro comando if-com-else no script acima, fica a seu critério. Se quiser, escolha onde e como, complete e pedale.


Exercício 8.2

    Interatividade: Acrescentando "memória" a um botão de formulário.

No script abaixo o botão do exercício 7.1, aqui completado, interage com o usuário acrescentando (concatenando) uma saudação ao nome digitado no campo c1, e mudando a legenda em sua própria face, para completar a saudação. Entretanto, se o botão for clicado uma segunda vez, o começo da saudação se repete em c1, passando o script do formulário a mostrar suas "limitações".

...
<form name="f2">
<input name="c1"
onClick="javascript:
     c1.value = '';

 " value="Digite seu nome"><br>.
<input type="button" name="b1" onClick="javascript:
     c1.value = 'Olá, ' + c1.value;

     b1.value = 'Bem vindo!';   
 
" value="Depois clique aqui">
 </form>
 
...

Agora, complete o script abaixo (que altera o acima) de sorte que o botão do formulário f2 interaja com o usuário "sabendo" quando ele, botão, está sendo clicado pela segunda vez, e retornando, neste caso, a legenda ao estado original. Após pedalar isso, veja que "efeitos colaterais" voce trará, junto com essa "memória", ao botão do formulário f2

...
<input name="c1" value="Digite seu nome"....>....
<input type="button" name="b1" onClick="javascript:
     if( b1.value == 'Depois clique aqui')
     {   // ==: operador lógico "igual a?"
         b1.value = 'Bem vindo!';   
         // script para a primeira clicada

     }
     else
     {   // script para a segunda clicada,
         b1.value = 'Depois clique aqui';
         // reseta a legenda original de b1
     };
  " value="Depois clique aqui">
  ...

Voce pode perceber que, ao alternar (toggle) a legenda do botão do formulário f2 entre dois valores (com o if-com-else acima), o botão se comporta de uma dentre duas formas (executando a cláusula TRUE ou a clásula FALSE), dependendo se a clicada é uma clicada "ímpar" ou "par".  O desafio, agora, passa a ser o seguinte: como voce poderia fazer o botão "se lembrar" de mais coisas? Como fazer com que ele se lembre, por exemplo, de quantas vezes já foi clicado? (para, por exemplo, informar esse dado ao usuário na sua própria legenda?)