Construindo página HTML para cálculo numérico

Lab-5
Métodos de Refinamento
Lab-5.1 HTML
HTML (HiperText Markup Language) é a linguagem usada para construir as

páginas da Web. É acessada, lida e exibida pelos browsers (navegadores
como: Internet-Explorer, Crome, FireFox, etc.)
Na realidade não é uma linguagem de programação propriamente dita. É

uma linguagem para descrição de páginas da Web. Define o formato e o
layout da página, e proporciona um meio de vincular o texto de uma
página ao texto de outra página.
É uma linguagem composta por tags (marcações) cujos comandos têm o

seguinte formato:
<TAG> Texto </TAG>

Onde:
 Uma tag é delimitada pelos símbolos “<” e “>” e define o início de um
bloco de marcação (<TAG>).
 Para encerrar a validade de um bloco de marcação justapõe-se uma
barra invertida ao nome da tag (</TAG>)
Uma página em HTML é organizada em 4 seções:
A. Início  <HTML> Coisas executadas durante a carga

B. Cabeçalho  <HEAD> da página (antes de <body>)
</HEAD>
C. Corpo  <BODY>
</BODY> Coisas executadas depois da carga
D. Fim  </HTML> da página
05 LabMétodos de Refinamento Página 35

Lab-5.2 Preparando Página na Web
Vamos iniciar a construção de uma página Web incluído as tags das 4

<HTML> seções típicas da págna, para isso:
<HEAD>  Abra um bloco de notas
</HEAD>  Inclua as tags <HTML> e </HTML> respectivamente na primeira e
<BODY> última linha do bloco de notas
</BODY>  Digite as seções das tags “<HEAD>” e “<BODY>” conforme a figura ao
</HTML> lado:
Lugar onde entram as tags  Salve o arquivo com o nome “Metodo da Bisseção.htm”
de construção de Páginas
Lab-5.3 Estrutura da Página na Web
Gerar Página A execução da página será feita em dois momentos:

Virtual
 Momento-1: Entrada dos dados do problema
 Momento-2: Apresentação dos resultados
No Momento-1, a página já estará construída com tags HTML e só

precisamos exibi-la no browser. Ainda no momento-1, após o usuário
fornecer todos os dados do problema, ele deverá clicar um botão
<Calcular> que irá encerrar o momento-1 e iniciar o momento-2.
Script para criar tags No Momento-2, serão realizados os cálculos para a solução do problema e
on-the-fly gerada uma página virtual que irá apresentar os resultados dos cálculos.
Página HTML para
entrada dos dados
Lab-5.4 Formato da página para o Momento-1
Entre as tags <BODY> e </BODY> são colocadas tags para a construção da

página para solicitar os dados do problema. Essa página deverá apresentar
uma tela segundo o formato mostrado abaixo:

Nessa tela podem ser identificadas três regiões:
 Cabeçalho
 Área de entrada de dados
 Botão para iniciar Momento-2 (execução dos cálculos)
Cabeçalho
Área de entrada
de dados
Botão para iniciar

Momento-2
Lab-5.5 Construção do Cabeçalho da página para o

Momento-1
Na seção “BODY” inclua tags para apresentar o cabeçalho da tela de

entrada de dados (do Momento-1), conforme o trecho abaixo:
<HTML>
<HEAD>
<TITLE> Met. da Bisseção </TITLE>
</HEAD>
<BODY>
<CENTER>
<FONT SIZE="5">
<I>Cálculo de Raiz - Método da Bisseção</I>
</FONT>
</ CENTER > Cabeçalho
<P>
<HR>
<B>Dados de Entrada:</B>
<HR>
<P>
</BODY>
</HTML>
No trecho acima, aparecem as seguintes tags:
 <TITLE> = define um título que aparece na barra de título do
browser, e serve para buscas na Web.
 <CENTER> = centraliza o texto apresentado a seguir à tag (não é
mais suportado pela HTML5, foi substituído por CSS)
 <FONT SIZE = “5”> = define a fonte, o tamanho e a cor para um
texto (não é mais suportado pela HTML5, foi substituído por CSS)
 <I> = define o estilo do texto como Itálico (letras inclinadas)
 <P> = define o início de um parágrafo (nova linha)

 <HR> = inclui uma linha horizontal (do inglês horizontal row)
 <B> = define o estilo do texto como Bold (negrito)
Lab-5.6 Construção da Área de Entrada de Dados da

página para o Momento-1
A área de entrada de dados deverá ser construída logo após o cabeçalho e

colocada entre as tags <FORM> e </FORM>. A tag <FORM> define um
formulário que irá receber os objetos de entrada de dados fornecidos pelo
usuário, a ser usado nos cálculos.
Um formulário consiste em uma área de uma página Web onde objetos

(campos e controles) podem ser acrescentados para receber e transmitir
informações. Esses campos e controles são elementos gráficos especiais
para a construção da interatividade na interface com o usuário.
Elementos Campos e Controles

One-Line Text Box <INPUT TYPE = “TEXT”>
Scrolling Text Box <TEXTAREA>
Check Box <INPUT TYPE = “CHECKBOX”>
Radio Button <INPUT TYPE=”RADIO”>
Drop-Down Menu <SELECT>
Push Button <INPUT TYPE=”BUTTON” ou “RESET”
Incluíndo as tags da área de entrada de dados entre <FORM> e </FORM>:
<BODY>
<CENTER>
<FONT SIZE="5"> <I>Cálculo de Raiz - Método da Bisseção</I></FONT></TD>
</CENTER>
<P>
<HR>
<B>Dados de Entrada:</B>
<HR>
<P>
<FORM>
Intervalo Inicial:
a= <INPUT TYPE="text" NAME="an" VALUE="-2" SIZE=10 >
b= <INPUT TYPE="text" NAME="bn" VALUE="-1" SIZE=10 ><P>
Área de entrada Nº Máximo de Iterações:
de dados <INPUT TYPE="text" NAME="nitera" VALUE="100" SIZE=10 ><P>
Tolerância: |x<SUB>n+1</SUB>-x<SUB>n</SUB>| <
<INPUT TYPE="text" NAME="tol" VALUE="0.0001" SIZE=10 >
<P>
Equação para busca da raiz: <B>F(x)= </B>
<INPUT TYPE="text" NAME="equacao" VALUE="pow(x,5)-x*x*x+1" SIZE=25 >
</FORM>
<HR>
</BODY>

No trecho, aparecem as seguintes tags:
<SUB> = define o estilo do texto como subscrito
<INPUT> = Para entrada de um único dado, de simples preenchimento.
Pode ter os seguintes parâmetros:
 TYPE = Especifica o tipo de controle: BUTTON, CHECKBOX, HIDDEN,
IMAGE, PASSWORD, RESET, RADIO, SUBMIT, TEXT
 NAME = inclui um nome que pode ser acessado de um script
 VALUE= informa um valor default para o campo
 SIZE = tamanho do campo em caracteres na tela
 ALIGN= alinhamento TOP/MIDDLE/BOTTOM
 SRC = URL do arquivo com a imagem do objeto
Na tag <INPUT> podem ser especificados no parâmetro TYPE vários tipos

de objetos de entrada de dados, como mostrado a seguir:
 TEXT - Para entrada de uma linha de dados simples (TextBox)
 PASSWORD - Para entrada de dados confidenciais
 BUTTON – para Botão de ações customizadas
 SUBMIT - para Botão de envio de dados para uma página no servidor
 RESET - para Botão de reinicialização de campos do formulário
 IMAGE - Para inclusão de imagens sensíveis ao clique do mouse
 CHECKBOX – para caixas de verificação, de seleção/não seleção de
propriedades (marcado / desmarcado)
 RADIO - para botões RadioBox de seleção de uma entre várias opções
 HIDDEN – para especificar campos onde as informações não devem ser
exibidas (são escondidas)
Notar que na “Tolerância” foram usados símbolos especiais da

matemática “<” e “>” (que também poderiam ser caracteres da língua
portuguesa como o “ã” e o “ç”) que para exibição na página exigem uma
representação apropriada (para entendimento de qualquer browser). Essa
representação começa com um caractere “&”(símbolo de início de escape)
+ caractere escolhido + sinal escolhido + caractere “;” (símbolo de fim de
escape)
& c cedil ;
Símbolo de início Caractere Sinal Símbolo de fim

de escape escolhido escolhido de escape
&agrave à &egrave è &ograve ò &ugrave ù

&aacute á &eacute é &oacute ó &uacute ú
&acirc â &ecirc ê &ocirc ô &ucirc û
&auml ä &euml ë &ouml ö &uuml ü
&atilde ã &igrave ì &otilde õ < <
&aring å &iacute í &oslash ø > >
&aelig æ &icirc î & & &szlig β
&ccedil ç &iuml ï " “

Lab-5.7 Construção da área com botão para iniciar o
Momento-2
A área com o botão para iniciar o Momento-2 é construída incluindo-se

uma tag <INPUT> imediatamente antes da tag de finalização do formulário
(</FORM>). Nessa tag <INPUT> define-se o objeto botão (button) no
parâmetro TYPE e incluiu-se a chamada ao método “Calcular” passando-se
os valores de an, bn, nitera, tol e equacao, segundo a regra do ponto:
form.an.value conforme mostrado a seguir.
<FORM>
Intervalo Inicial:
a= <INPUT TYPE="text" NAME="an" VALUE="-2" SIZE=10 >
b= <INPUT TYPE="text" NAME="bn" VALUE="-1" SIZE=10 ><P>
Nº Máximo de Iterações:
<INPUT TYPE="text" NAME="nitera" VALUE="100" SIZE=10 ><P>
Tolerância: |x<SUB>n+1</SUB>-x<SUB>n</SUB>| <
<INPUT TYPE="text" NAME="tol" VALUE="0.0001" SIZE=10 >
<P>
Equação para busca da raiz: <B>F(x)= </B>
<INPUT TYPE="text" NAME="equacao" VALUE="pow(x,5)-x*x*x+1" SIZE=25 >
<P>
Botão para iniciar <CENTER>
<INPUT TYPE="BUTTON" VALUE="Calcular" ONCLICK="calcular
Momento-2
(form.an.value,form.bn.value,form.nitera.value,form.tol.value,form.equacao.value)">
</CENTER>
</FORM>
Ao clicar o botão “Calcular” a <HR>
tag <INPUT> dispara o método </BODY>
calcular() que é imediatamente
executado
Os elementos de formulários do tipo “BUTTON” são conectados aos
respectivos scripts por meio do manipulador de eventos “ONCLICK”
Quando se especifica o argumento NAME de um elemento, os scripts

passam a tratar o elemento como um objeto do Internet Object Model.
Lab-5.8 Construção da área para o script da função

“calcular”
Ao clicar o botão <Calcular> o formulário deverá chamar o script do

método “calcular” que já deve estar na memória do computador, portanto,
esse script deverá ser colocado antes de <BODY> (para ser armazenado
durante a carga da página), portanto, entre as tags <HEAD> e </HEAD>.
Uma tag <SCRIPT LANGUAGE = “JavaScript”> sinaliza que o código que se

segue até a tag de fechamento </SCRIPT> está em uma linguagem
JavaScript, conforme mostrado a seguir:

<HTML>
<HEAD>
<TITLE> Met. da Bisseção </TITLE>
<SCRIPT LANGUAGE="JavaScript">
function calcular(aa,bb,yy,zz,tt) {
alert("Entrou em calcular");
}
</SCRIPT>
</HEAD>
A instrução “function” é usada para definir uma função em JavaScript, e Nota-1:

precisa ser seguida do nome da função (opcionalmente pode vir um (i)Todo comando JavaScript
caracter sublinhado, o nome do manipulador de eventos e de parênteses termina sempre com um
de abertura e fechamento). caractere “;” (ponto-e-vírgula)
(ii) A linguagem JavaScript é
“case sensitive” ou seja ela faz
Todas as instruções em JavaScript são interpretadas e estão contidas em
distinção entre letras
um bloco script definido pelas chaves de abertura “{“ e fechamento “}”, no maiúsculas e letras
caso desta aplicação, da função “calcular” minúsculas. Assim, os
métodos abaixo são distintos
A instrução “alert” exibe uma caixa de mensagem com o texto "Entrou em (e portanto fonte de erros na
calcular" (fornecido entre aspas), no argumento da chamada. codificação de comandos
JavaScript):
 Math.floor(numDecimal /
Salve o arquivo e execute em um browser.
2);  correto
Verifique se tudo está funcionando corretamente.  math.floor(numDecimal /
2);  errado
Modelo de Objetos da Internet (Internet Object Model)
No modelo um objeto “navigator” contem pelo menos um objeto
“window” que contém os objetos “frame”, “location”, “history” e
“document”. O objeto “document” contém o objeto “form” que pode
conter os objetos radio, button, e text. Assim, os objetos se organizam em
um modelo hierárquico conforme mostra a figura abaixo:
String navigator
Math window
Date frame location history document
form anchor link
text hidden textarea password checkbox button radio reset submit select

Regra do Ponto: Para acessar um objeto no modelo, é necessário dar o
caminho completo desse objeto começando pelo objeto mais externo até
ao objeto que se quer acessar separados por um ponto.
Por exemplo para um botão : (window).document.form.button
O objeto window está entre parentes porque ele ocupa a primeira posição
na hierarquia e é também o valor default (se nada for fornecido).
Os objetos apresentam propriedades e métodos.

 Propriedades - são atributos que guardam informações do objeto, ou
características que descrevem o objeto ou afetam como o objeto se
apresenta, ou seja, como ele é visto, por exemplo:
- navigator.appName = nome do navegador (browser)
- navigator.appVersion = versão do navegador
 Métodos – são as funções/processos que manipulam os
dados/propriedades de um objeto. É um conjunto de procedimentos
que sabem operar sobre as instâncias da classe (objetos).
- window.open (“URL”, “windowName”, [“WindowFeatures”])
- window.document.write (“*** mensagem ***”)
Para acessar as propriedades de um objeto em JavaScript, também se usa a

regra do ponto: nome_do_objecto.nome_da_propriedade.
Nota-2: Manipuladores de Eventos.

São métodos pré-definidos que informam aos seus scripts sobre a
ocorrência de um evento específico. JavaScript define os seguintes
manipuladores:
 mouseMove - ocorre sempre que o cursor do mouse se mover sobre
um vínculo
 onBlur - é disparado quando um objeto perde o foco
 onChange - ocorre quando uma propriedade de um objeto é
modificada
 onClick - é disparado quando um objeto de um formulário é clicado
 onFocus - ocorre quando um campo é focalizado por meio do
teclado ou de um clique do mouse
 onLoad - é disparado quando o navegador conclui o carregamento
de uma janela ou de todos os frames existentes em um conjunto de
frames
 onMouseOver - é disparado cada vez que o cursor do mouse se
move sobre um objeto vindo de fora desse objeto
 onSelect - ocorre quando alguns dos conteúdos de um objeto é
selecionado
 onSubmit - é disparado quando o usuário envia respostas a um
formulário
 onUnload - ocorre quando os conteúdos de uma janela são
descarregados.
 OnKeyPress – ocorre quando o usuário pressiona alguma tecla

Lab-5.9 Formato da página para o Momento-2
A Área de exibição de resultados será construída “on-the-fly”, isto é, será

virtual e apresentada depois da página para a entrada dos dados do
problema. Ela deverá ter o seguinte formato:
Cabeçalho
Área com eco dos

dados de entrada
Matriz com resultados das

iterações
Resultado Final
Nesse formato observam-se quatro áreas:

 Cabeçalho
 Área com eco dos dados de entrada
 Matriz com os resultados de cada iteração
 Resultado Final
Lab-5.10 Construção do Cabeçalho da página virtual para o

Momento-2
A construção “on-the-fly” da área de exibição de resultados é feita com a Observação:

instrução em JavaScript: self.document.write. E essa construção deve ser Javascript utiliza as
feita na função “calcular”. Assim, não mais é necessária a chamada ao convenções de C e C++ para
método “alert” dentro da função “calcular”. Uma maneira de fazer isto é incluir comentários no
transformando a chamada em comentário através da inclusão de duas código:
//comentário
barras invertidas logo no início da linha de chamada ao método:
Tudo o que está escrito
function calcular(aa,bb,yy,zz,tt) { entre o // e o fim da linha
//alert("Entrou em calcular"); será ignorado
self.document.write("<FONT SIZE=5> <I>Cálculo de Raiz - Método da Bisseção Também é possível incluir
</I></FONT>"); comentários em diversas
self.document.write("<H2>Resultados da Iteração</H2>"); linhas com o código:
self.document.write("Solução de "+tt+" = 0 <P>"); /*comentário em
self.document.write("Intervalo Inicial, a= "+aa+" b= "+bb+"<P>"); diversas linhas*/
self.document.write("Nº Máximo de Iterações: "+yy+"<P>"); Não confundir os
self.document.write("Tolerância: "+zz+"<P>"); comentários Javascript e os
Bissecao(aa,bb,yy,zz,tt); comentários Html ()
}

Lab-5.11 Construção da Área com a Matriz dos resultados
de cada iteração no Momento-2
Ao final da função “calcular” está colocada uma chamada ao método

“Bissecao” que irá calcular e imprimir “on-the-fly” a Matriz com os
resultados de cada iteração. Este método está construído em Java Script e
inserido logo depois do fecha-chave “}” da função calcular.
Para gerar o formato da Matriz com resultados das iterações, a tag

indicada é a tabela (<TABLE>) que divide uma única página em áreas.
Uma tabela possui uma estrutura parecida com a de uma planilha
eletrônica. São compostas por linhas e colunas criadas nas tags:
<TR> - começa uma nova linha da tabela
<TD> - marca uma célula de dados
Linhas <TR>
Célula <TD>
Parâmetros de <TABLE>:
 cellPadding= número de pixels entre a borda e os dados das células
 width= determina a largura da tabela em pixels
 border= espessura da borda em pixels (0 = sem borda)
Parâmetros de <TR> e <TD>:

 align = determina o alinhamento horizontal de dados dentro de cada
célula (LEFT, CENTER, RIGHT)
 valign = determina o alinhamento vertical de dados dentro de cada
célula (TOP, CENTER, BOTTON)
 bgColor = informa a cor do fundo
 colSpan = informa o número de colunas da linha ou de uma célula
A função “Bissecao()” é programada na linguagem JavaScript cujas as

instruções básicas são:
Tipo Instrução Descrição
o
Repetição for <expressão> Repete um bloco de instrução um n fixo de vezes
while <condição> Repete um bloco de instrução enquanto condição for
verdadeira
a
break Termina a execução e passa o controle para a 1 .
instrução seguinte ao loop
Teste if (expressão) Dependendo de expressão executa uma alternativa
{ alternativa-1}
else
{ alternativa-2}
Declaração var Declara uma variável
function Declara uma função
return Especifica valor a ser retornado por uma função

Inclua a função Bissecao logo depois do fecha-chave “}” da função calcular:
//alert("Entrou em calcular");
self.document.write("<FONT SIZE=5> <I>Cálculo de Raiz - Método da
Bisseção</I></FONT>");
..............................................
Bissecao(aa,bb,yy,zz,tt);
}
function Bissecao(aa,bb,yy,zz,tt) {
//alert("Entrou em Bisseção");
with(Math) {
x0 = eval(aa);
x1 = eval(bb);
self.document.write("<TABLE BORDER=1 CELLPADDING=4>");
self.document.write("<TR><TD>Iteração <B>n</B></TD><TD>a<SUB>n</SUB>
</TD>");
self.document.write("<TD>b<SUB>n</SUB></TD><TD>x<SUB>n+1</SUB></TD>
<TD>f(x<SUB>n+1</SUB>)</TD><TD>Erro</TD></TR> ");
n = 0;
x2 = (x0+x1)/2;
x = x2;
f2 = eval(tt);
self.document.write("<TR><TD>0</TD><TD>"+x0+"</TD><TD>"+x1+"</TD>
<TD>"+x2+"</TD><TD>"+f2+"</TD></TR>");
nit = eval(yy);
erro = eval(zz);
er=abs(x1-x2);
while ( (n < nit) && (er > erro) ){

n++;
x = x1;
f1 = eval(tt);
if (f1*f2<0) {x0=x2; } else {x1=x2;}
x2=(x1+x0)/2;
x = x2;
f2 = eval(tt);
er1=abs(x1-x0)/2;
self.document.write("<TR><TD>"+n+"</TD><TD>"+x0+"</TD><TD>"+x1+
"</TD><TD>"+x2+"</TD><TD>"+f2+"</TD><TD>"+er1+"</TD> </TR>");
er=er1;
}
}
</SCRIPT>
A função eval() avalia ou executa um argumento conforme mostrado

abaixo:
 Se o argumento for uma expressão matemática, a função calcula a
expressão.
 Se o argumento for uma ou mais instruções em JavaScript, a função
executa as instruções
 Se o argumento for uma variável, a função irá converter o valor
para ponto flutuante

Lab-5.12 Construção da Página com a Área de
apresentação do Resultado Final no Momento-2
As instruções para apresentar o resultado final são colocadas ao final da

função Bissecao, conforme mostra o trecho abaixo:
function Bissecao(aa,bb,yy,zz,tt) {
//alert("Entrou em Bisseção");
with(Math) {
……………………………………….
er=er1;
}
self.document.write("</TABLE><P><P><B>A raiz é: "+x2);
self.document.write("</B></BODY></HTML>");
}
return;
}
</SCRIPT>

Verifique se tudo está funcionando corretamente.
Lab-5.13 Programando Método da Posição Falsa
A estrutura do programa para cálculo de raízes usando o Método da

Posição Falsa é muito parecida com a do Método da Bisseção desenvolvido
nos itens anteriores. Portanto vamos aproveitar o código deste para
construir o programa para determinação de raízes usando o método da
posição falsa. Para isto, abra o arquivo “Metodo da Bisseção.htm”. Salve
com o nome: “Metodo da Posição Falsa.htm”.
Altere o título da página:

<HTML>
<HEAD>
<TITLE> Met. da Posição Falsa </TITLE>
Também aqui a execução da página é feita em dois momentos:

 Momento-1: Entrada dos dados do problema
 Momento-2: Apresentação dos resultados
Lab-5.14 Alterando trecho referente à entrada dos dados do

problema
O trecho referente a entrada de dados do problema praticamente não se

altera, com exceção do trecho referente ao cabeçalho logo no início da tag
<BODY>, conforme mostrado a seguir:
<BODY>
<CENTER>
<FONT SIZE="5"> <I>Cálculo de Raiz - Método da Posição Falsa </I></FONT></TD>
</CENTER>
<P>

Lab-5.15 Alterando trecho referente à função “calcular”
<SCRIPT LANGUAGE="JavaScript">
//alert("Entrou em calcular");
self.document.write("<FONT SIZE=5> <I>Cálculo de Raiz - Método da Posição
Falsa</I></FONT>");
self.document.write("<H2>Resultados da Iteração</H2>");
self.document.write("Solução de "+tt+" = 0 <P>");
self.document.write("Intervalo Inicial, a= "+aa+" b= "+bb+"<P>");
self.document.write("Nº Máximo de Iterações: "+yy+"<P>");
self.document.write("Tolerância: "+zz+"<P>");
PosicaoFalsa(aa,bb,yy,zz,tt);
}
Lab-5.16 Substituindo a função “Bissecao” pela função

“PosicaoFalsa”
function PosicaoFalsa(aa,bb,yy,zz,tt) {
with(Math) {
x0 = eval(aa);
x=x0;
f0 = eval(tt);
x1 = eval(bb);
x = x1;
f1 = eval(tt);
self.document.write("<TABLE BORDER=1 CELLPADDING=4>");
self.document.write("<TR><TD>Iteração<B>n</B></TD><TD>a<SUB>n</SUB> </TD>");
self.document.write("<td>b<sub>n</sub></td><td>x<sub>n+1</sub></td><td>
f(x<sub>n+1</sub>)</td><td>Erro</td></tr> ");
n = 0;
x2 = x0-f0*(x1-x0)/(f1-f0);
x = x2;
f2 = eval(tt);
self.document.write("<tr><td>0</td><td>"+x0+"</td><td>"+x1+"</td><td>"+x2+"</td>
<td>"+f2+"</td></tr>");
nit = eval(yy);
erro = eval(zz);
er=abs(x2-x1);
while ( (n < nit) && (er > erro) ){
n++;
if (f1*f2<0) {x0=x2;} else {x1=x2;}
x=x0;
f0 = eval(tt);
x = x1;
f1 = eval(tt);
xx=x2;
x2 = x0-f0*(x1-x0)/(f1-f0);
x = x2;
er1=abs(x2-xx);
f2 = eval(tt);
self.document.write("<tr><td>"+n+"</td><td>"+x0+"</td><td>"+x1+"</td><td>"+x2+
"</td><td>"+f2+"</td><td>"+er1+"</td> </tr>");
er=er1;
}
self.document.write("</table><P><P><B>A raiz é: "+x2);
self.document.write("</B></BODY></HTML>");
}
return;}

Verifique se tudo está funcionando corretamente.

Construindo página HTML para cálculo numérico

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Construindo página HTML para cálculo numérico

Enviado por

Direitos autorais:

Formatos disponíveis

Lab-5

HTML (HiperText Markup Language) é a linguagem usada para construir as

Na realidade não é uma linguagem de programação propriamente dita. É

É uma linguagem composta por tags (marcações) cujos comandos têm o

<TAG> Texto </TAG>

Uma página em HTML é organizada em 4 seções:

A. Início  <HTML> Coisas executadas durante a carga

05 LabMétodos de Refinamento Página 35

Vamos iniciar a construção de uma página Web incluído as tags das 4

Lab-5.3 Estrutura da Página na Web

Gerar Página A execução da página será feita em dois momentos:

No Momento-1, a página já estará construída com tags HTML e só

Lab-5.4 Formato da página para o Momento-1

Entre as tags <BODY> e </BODY> são colocadas tags para a construção da

05 LabMétodos de Refinamento Página 36

Botão para iniciar

Lab-5.5 Construção do Cabeçalho da página para o

Na seção “BODY” inclua tags para apresentar o cabeçalho da tela de

05 LabMétodos de Refinamento Página 37

Lab-5.6 Construção da Área de Entrada de Dados da

A área de entrada de dados deverá ser construída logo após o cabeçalho e

Um formulário consiste em uma área de uma página Web onde objetos

Elementos Campos e Controles

Incluíndo as tags da área de entrada de dados entre <FORM> e </FORM>:

05 LabMétodos de Refinamento Página 38

Na tag <INPUT> podem ser especificados no parâmetro TYPE vários tipos

Notar que na “Tolerância” foram usados símbolos especiais da

Símbolo de início Caractere Sinal Símbolo de fim

&agrave à &egrave è &ograve ò &ugrave ù

05 LabMétodos de Refinamento Página 39

A área com o botão para iniciar o Momento-2 é construída incluindo-se

Quando se especifica o argumento NAME de um elemento, os scripts

Lab-5.8 Construção da área para o script da função

Ao clicar o botão <Calcular> o formulário deverá chamar o script do

Uma tag <SCRIPT LANGUAGE = “JavaScript”> sinaliza que o código que se

05 LabMétodos de Refinamento Página 40

A instrução “function” é usada para definir uma função em JavaScript, e Nota-1:

Date frame location history document

form anchor link

05 LabMétodos de Refinamento Página 41

Os objetos apresentam propriedades e métodos.

Para acessar as propriedades de um objeto em JavaScript, também se usa a

Nota-2: Manipuladores de Eventos.

05 LabMétodos de Refinamento Página 42

A Área de exibição de resultados será construída “on-the-fly”, isto é, será

Área com eco dos

Matriz com resultados das

Nesse formato observam-se quatro áreas:

Lab-5.10 Construção do Cabeçalho da página virtual para o

A construção “on-the-fly” da área de exibição de resultados é feita com a Observação:

05 LabMétodos de Refinamento Página 43

Ao final da função “calcular” está colocada uma chamada ao método

Para gerar o formato da Matriz com resultados das iterações, a tag

Parâmetros de <TR> e <TD>:

A função “Bissecao()” é programada na linguagem JavaScript cujas as

05 LabMétodos de Refinamento Página 44

while ( (n < nit) && (er > erro) ){

A função eval() avalia ou executa um argumento conforme mostrado

05 LabMétodos de Refinamento Página 45

As instruções para apresentar o resultado final são colocadas ao final da

Salve o arquivo e execute em um browser.

Lab-5.13 Programando Método da Posição Falsa