ICC Turma D - UnB 2/04

Prática 7

1- Criando ou manipulando domumentos html com editores gráficos

Agora que voce já entendeu o que é, como funciona e como se controla,, o código fonte de um documento html via editor ASCII, vamos praticar um pouco com um interpretador html que também permite editar código fonte via editor gráfico. O objetivo é ganharmos alguma agilidade, para nos concentrarmos no código javascript.

Na sua casa: Se voce estiver fazendo esta prática em casa e não quiser ou puder instalar o Mozilla, pule a parte 1 desta prática, e tente fazer a parte 2 como achar melhor. Se voce quiser instalar o Mozilla, o processo será indolor, o software é livre e, ao passar a usá-lo, voce estará se livrando de várias vulnerabilidades com relação a vírus e programas maliciosos que afetam infestam a internet por afetar o Internet Explorer (mas não se livrará facilmente de alguns truques da fornecedora do sistema operacional, para que uma página ou outra encontre problemas). O saite para baixá-lo é http://www.mozilla.org.br.
No LINF: Se voce estiver no laboratório de ICC, e já configurou o Mozilla em sua conta pessoal para navegar na internet, abra o Mozilla e pule o próximo parágrafo.

No laboratório de ICC (para onde esta prática foi programada), se voce ainda não configurou o Mozilla em sua conta pessoal voce deve estar vendo esta página (prática 7) com o Internet Explorer. Neste caso clique aqui para abrir a página de instruções de configuração dos navegadores web no laboratório de ICC.  Na tabela "configurando o proxy nos diferentes browsers:", clique em "Mozilla", para ver as instruções de configuração. Agora procure no desktop da sua sessão do Windows o ícone do Mozilla (cabeça de dragão vermelho), e abra o Mozilla. Volte à janela do Internet Explorer contendo as instruções para configurar o Mozilla,  e siga-as na janela do Mozilla.
 
Navegue com o Mozilla até esta página (por exemplo, se voce estiver vendo esta página no Internet Explorer ou no Firefox, voce pode copiar o URL da caixa de localização acima e colar na caixa de localização numa janela do Mozilla, clicando em seguida a tecla Enter), Abaixo, estaremos fazendo referência a esta página visualizada no Mozilla. 

Após carregada esta página  no Mozilla, abra o menu de arquivos (file), escolha "editar página" (edit page). Ao fazê-lo, voce verá a mesma página agora numa outra janela, e num contexto diferente. A moldura da janela não é mais a do navegador. Voce não mais estará navegando (os links não mais funcionam), voce está agora editando esta página com o módulo editor do Mozilla  chamado "Composer", editor gráfico html (pioneiro) com o qual se parecem muitos outros.

No menu "Arquivo" (File), acione o comando "Salvar como..." para salvar esta página no seu diretório home. Ao fazê-lo, voce terá "clonado" esta página para o seu disco, processo que poderá tornar o código-fonte do seu clone diferente do original, já que o programa clonador entende html e pode resolver "corrigir" o código fonte que ele copiou do original. Vamos então explorar o Composer, mas alertas para esse detalhe:

Alerta: ao salvar um arquivo no Composer, voce estará cedendo o direito dele interferir no codigo fonte do seu documento html, (coisa que não acontece num editor ASCII).

Voce pode começar reparando que, na moldura inferior esquerda, estarão quatro "abas", conforme mostradas na imagem abaixo.

Moldura
Inferior
Esquerda
do Editor
html
Mozilla
Composer



Tais abas correspondem às várias "vistas" possíveis do MESMO documento html, aquele sendo editado nesta janela do Composer.
Em cada uma dessas vistas, haverá interpretação do código-fonte html em graus e com nuanças distintas. Por exemplo:

Com um editor gráfico ao estilo do Mozilla Composer, um documento html pode ser editado em qualquer uma dessas vistas e o resultado será automaticamente assimilado nas outras vistas, mesmo antes de se salvar o arquivo. As pedaladas da programação ficam assim mais ágeis, principalmente com o auxílio de um novo aliado.

O novo aliado são os comandos gráficos de edição, com menus insteressantes em suas janelas de diálogo. Alguns desses menus, por exemplo, listam parâmetros e valores de parâmetros selecionáveis para um determinado objeto que componha a página sendo editada. A janela de diálogo para um determinado elemento poder ser ativada pelo comando "propriedades" no menu que surge quando se clica com o botão direito do mouse sobre esse elemento. Experimente, por exemplo, na tabela e na imagem acima.

Depois, experimente no link "clique aqui" do terceiro parágrafo deste texto. Na janela de diálogo "Propriedades para Link" (link properties) voce poderá ficar conhecendo, por exemplo, os valores pré-definidos no html que o parâmetro target aceita e interpreta. Se voce tiver alguma curiosidade extra, poderá perceber que esses valores pré-definidos são relativos à hierarquia de janelas que se formam na medida em que o usuário vai clicando links com parâmetros target, ou na medida em que scripts vão abrindo janelas "filhas".

As janelas de diálogo sobre propriedades de objetos ajudam, também, a saber quais tipos de ganchos para scripts podem ser aceitos por um elemento da página. Experimente, por exemplo, no botão "Edição Avançada", a aba "Eventos de Javascript" que mostras os parâmetros (atributos) para uma instância de objeto que possa reconhecer eventos.


2- Criando e manipulando scripts para eventos

Abaixo, replicamos o primeiro formulário da prática 6 com uma pequena alteração.

Da forma em que foi apresentado na prática 6, o campo e botão abaixo não eram persistentes no Mozilla e no Firefox (apenas no Internet Explorer). Isto quer dizer que o botão formado pela diretiva  <button...>...</button> executava o script correspondente ao evento onClick quando clicado, mas, nesse dois navegadores, logo fazia o formulário voltar ao "estado original". Ao reproduzir abaixo o dito formulário, fizemos uma alteração no código fonte para que o efeito do botão seja persistente em qualquer navegador.
  

É claro que voce não vai poder verificar o que estou afirmando se tentar digitar ou clicar nesse formulário aqui nesta janela. Sendo esta a janela de um Editor, e sendo o formulário um elemento ativo da página, voce precisa abri-la no módulo navegador para testar o que estou dizendo. Pois aqui (no módulo editor) conteúdo ativo não funciona, como já dito. Para ver a página no módulo navegador, basta clicar no comando "Visualizar" (browse) que está na barra superior da moldura do Composer. Se fizer isso, o Composer irá antes salvar o arquivo correspondente e, nesse caso, o alerta na sessão 1 acima deve ser lembrado.

Por outro lado, no módulo editor (Composer)  voce pode verificar como esse botão está sendo formado. Assim, quando algo não funciona em sua página, antes de levar as mãos ao chão para amortecer o tombo da bicicleta da progração veja se voce não está no módulo errado: Editar no editor; Navegar no navegador. E tendo verificado como o botão acima está sendo formado,  voce está agora pronto para o seu primeiro exercício de programação em Javascript.

Exercício 7.1 Javascript

Faça com que o botão acima, quando clicado, além de alterar o campo de texto como vinha fazendo, passe também a alterar a legenda em sua própria face. Mais especificamente, faça com que, além de acrescentar "olá, " ao texto digitado no campo c1, o botão b1 acima também mude a sua própria legenda, de "Depois clique aqui" para, por exemplo, "Bemvindo ao meu script!".

Lembre-se que, no Composer, voce pode acessar o script do botão acima via interface gráfica, através da aba "Eventos JavaScript" na "Edição Avançada" das "Propriedades para campo de formulário", quando clica com o botão direito do mouse sobre o botão do formulário. A aba "Eventos Javascript" no composer serve também para mostrar quais tipos de eventos são reconhecidos por aquele tipo de objeto. Ou seja, a que tipo de evento no ambiente de navegação aquele tipo de objeto poderá reagir, executando um script.


Muito bem, agora que voce, tendo terminado o exercício 7.1, criou coragem para pedalar sem rodinha a bicicleta da programação, digitando o seu primeiro comando javascript sozinho (assim espero), chegou a hora de conhecer melhor as expressões em javascript. Como voce deve recordar, expressões são fórmulas que, dentre outras utilidades, fornecem valores a objetos através de comandos de atribuição.

Exercício 7.2 Javascript

Vamos agora testar os limites da aritmética do Javascript. Verifique o que acontece nas operações quando são digitados:


Aritmética
Soma
Multiplicação
Divisão
Resto div int
Um_número
Outro_número
Operação
Resultado













Como voce deve ter percebido, nas três últimas colunas o script coloca no resultado o nome NaN quando um dos operandos não representa um número. NaN significa "Not a Number", indicando uma tentativa de se efetuar operação aritmética com um dado que não representa nenhum valor numérico.

E como voce deve ter também percebido, na primeira coluna, o script do botão + não está executando a operação de soma de números, mas a concatenação de literais, mesmo quando se digitam sequências de algarismos nos correspondentes campos "um_número" e "outro_número" (como aconteceu no final da prática 6).

Como explicado na prática 6, isto se deve porque, dentre as duas possíveis interpratações de + em Javascript, a saber, soma de números ou concatenação de literais, o script está escolhendo a segunda interpretação (concatenação de literais). Por que? Por que é que, na expressão n1.value + n2.value (do lado direito da atribuição que constitui o script do referido botão), o javascript está interpretando os operandos como literais, mesmo quando o conteúdo de ambos os campos é uma sequência de algarismos?

A resposta é reveladora da forma como linguagens de programação se comunicam entre si. Primeiro, observemos que os campos n1 e n2 são objetos html de tipo texto (type="text" presumido por default). Quando o evento onClick ocorre, os dados contidos nesses campos  são passados ao javascript, e o interpretador os entende como dados no tipo correspondente. Isto é, o javacript recebe o dado como literal, já que texto em html corresponde a literal em javascript.

Além disso, como todo dado em html é textual, não haveria outra possibilidade: qualquer dado que o html passe para um script será recebido como literal, tipo que, no javascript, corresponde a dado textual no html.

Por outro lado, quando o dado recebido pelo javascript se destina a uma operação inequivocamente aritmética, como no caso dos scripts dos botões nas tres úlitmas colunas acima (*, / , %), o script funciona como esperado. Por que?

Porque, nesses casos, antes de efetuar a operação o interpretador javascript, sabendo que se trata inequivocamente de uma operação aritmética, tenta executar uma conversão dos dados para uma representação interna adequada à operação. Se o literal recebido for uma sequência de algarismos (com ou sem sinal de menos no início), o dado será internamente representado (em código 2-complemento) como um número inteiro. Se for um tal sequência contendo tambem um ponto, e/ou seguido de notação exponencial (letra "e" seguido de uma outra tal sequência), o dado será internamente representado (em código PFN) como o número fracionário correspondente. E se a conversão de pelo menos um dos operandos falhar, a operação por isso também falha, fato indicado pelo nome do resultado, NaN.

Voltando à operação +: Quando o dado recebido pelo javascript se destina à operação +, nenhuma conversão automática será executada por um motivo óbvio. Tal operação existe para dados literais, significando concatenação, e os dados recebidos do html são literais. O interpretador então concatena os dados literais.A menos que alguma instrução diga o contrário, qualquer coisa que se digite num campo de texto html será recebido como literal. O interpretador não se vê obrigado a adivinhar quando seria possível a conversão numérica, já que nada lhe foi dito a respeito. Se um comando javascript precisa tratar dados vindos de um campo como numéricos para somá-los, cabe ao programador indicar isso na expressão que calcula a soma. 

O programador pode fazer isso forçando o javascript a tentar converter para representação numérica dados recebidos do html. Esta conversão precisa acontecer antes da operação + executar, para que o javascript a interprete como soma numérica. Como pode o programador forçar o interpretador a fazer isso? A resposta é simples: usando uma função pré-definida com esse objetivo, cuja sintaxe é explicada abaixo).


Exercício 7.3 Javascript

Usando a função pré-definida  Number( ), descrita abaixo, faça com que tal botão funcione da forma esperada (na coluna "soma" na tabela acima). Isto é, faça com que o botão execute, caso possível, a soma numérica do que tenha sido digitado nos campos correspondentes ("um_número" e "outro_número"). Tomadas as devidas providências para que os dados recebidos pelo script do botão + sejam tratados como numéricos, a operação efetuada resultará na soma numérica dos operandos nos campos correspondentes, se o que foi digitado representar números, e numa mensagem de erro (NaN), se um dos dados digitados não for numérico.

Number(_______________)
conversão
 p/ valor numérico
expressão de valorseta
literal (campo, etc.)


Outro desdobramento óbvio do que vimos até aqui consiste em se evitar que o nome NaN "contamine" cálculos, quando um dos dados numéricos esperados pelo programa não estiver corretamente formado. Evitar esta "contaminação" é útil porque o NaN se propaga através de resultados parciais de operações aritméticas, dificultando a identificação da origem do erro.

A estratégia de se detectar o quanto antes a entrada de dados inconsistentes no programa se chama crítica de dados. E a estratégia de se detectar e identificar o quando antes resultados parciais inconsistentes se chama tratamento de erro. Críticas de dados e tratamento de erro constituem as mais simples aplicações do comando de seleção, assunto da próxima prática.

Outra brincadeira que podemos fazer na próxima prática, usando comandos de seleção, é deixar o botão do exercício 7.1 menos palha. O script feito no exercício 7.1 ainda deixa o botão sem "lembrança" do que lhe aconteceu antes: se for clicado mais vezes, continua acrescentando 'Olá, ' ao nome, e dizendo 'Benvindo ...' em sua face. Podemos fazer esse botão mais esperto usando comando de seleção, na próxima prática.