Fundamentos de Programação para a Web

Cláudio Luís Vieira Oliveira

[email protected]
Índice
HTML ............................................................................................................................................... 4
Cabeçalhos .............................................................................................................................. 6
Parágrafos ............................................................................................................................... 7
Fontes...................................................................................................................................... 8
Imagens ................................................................................................................................. 10
Links ...................................................................................................................................... 10
Listas...................................................................................................................................... 14
Tabelas .................................................................................................................................. 16
Exercícios............................................................................................................................... 17
Cascading Style Sheets .................................................................................................................. 18
CSS Inline ............................................................................................................................... 18
CSS Interno ............................................................................................................................ 19
CSS Externo ........................................................................................................................... 20
Seletores e classes ................................................................................................................ 22
Exercícios............................................................................................................................... 23
Programação para a Web ............................................................................................................. 25
JavaScript ...................................................................................................................................... 26
Primeiro script....................................................................................................................... 27
Variáveis em JavaScript......................................................................................................... 29
Operadores ........................................................................................................................... 31
Depuração de Scripts ............................................................................................................ 32
Caixas de mensagem e diálogo ............................................................................................. 35
Containers ............................................................................................................................. 36
Estruturas de controle .......................................................................................................... 38
Vetores .................................................................................................................................. 41
Exibição de imagens .............................................................................................................. 43
Interação com formulários ................................................................................................... 44
Melhorias na página da calculadora básica .......................................................................... 45
Botões de rádio ..................................................................................................................... 48
Caixas de seleção .................................................................................................................. 50
Validação dos campos do formulário ................................................................................... 52
JavaScript externo ................................................................................................................. 59
Interação entre páginas ........................................................................................................ 63
Requisição de dados ............................................................................................................. 64
Exercícios............................................................................................................................... 66
jQuery ............................................................................................................................................ 69
Olá jQuery.............................................................................................................................. 69
AJAX (Asynchronous Javascript and XML) ............................................................................. 70
Exercícios ............................................................................................................................... 72
Bootstrap ....................................................................................................................................... 73
Olá Bootstrap......................................................................................................................... 79
Formulários com Bootstrap ................................................................................................... 83
Exercícios ............................................................................................................................... 87
Cláudio Luís Vieira Oliveira

HTML
A linguagem HTML é a base de criação de qualquer página para a Web, porém trata-se de
uma linguagem que é composta por elementos estáticos e está fortemente focada na
composição e formatação de documentos. HTML é a sigla para HyperText Markup Language ou
Linguagem de Formatação de Hipertexto, trata-se de uma linguagem de marcação utilizada para
criar páginas na Internet. De modo geral, são documentos de texto escritos em códigos que
podem ser interpretados pelos navegadores que, por sua vez, exibem as páginas devidamente
formatadas. Todo documento HTML apresenta os comandos delimitados pelos sinais de maior e
menor, sendo esses elementos denominados tags ou etiquetas, e que correspondem aos
comandos de formatação da linguagem. A maioria das etiquetas tem sua correspondente de
fechamento que é identificado pelo uso do caracter / (barra), por exemplo:

</>
<h1>Olá</h1>

Uma tag também pode ser formada por um conjunto de atributos e valores. Os atributos
modificam os resultados padrões dos comandos e os valores caracterizam essa mudança, por
exemplo, temos o atributo color que possibilita mudar a cor da letra, conforme ilustra o seguinte
trecho de código-fonte.

</>
<font color='blue'>Olá</font>

De maneira geral a HTML é uma linguagem muito simples e acessível para a produção e
compartilhamento de documentos.

Recomendamos o uso do Visual Studio Code e do XAMPP para o

desenvolvimento dos exemplos contidos nesta obra. O Visual Studio code
pode ser gratuitamente obtido em https://code.visualstudio.com, enquanto
Atenção! que o XAMPP está disponível, também de forma gratuita, em
https://www.apachefriends.org/pt_br/index.html.

O exemplo a seguir mostra uma página contendo apenas elementos da HTML também
conhecidos como tags ou etiquetas.

</>
<!DOCTYPE html>
<html>
<head>
<title>Primeira página</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Olá pessoal</h1>
</body>
</html>
ola.html
4
 Fundamentos de Programação para a Web

Note que as etiquetas devem ser usadas de modo hierárquico, isto é, a etiqueta html foi
a primeira a ser aberta então, deverá ser a última a ser fechada. A etiqueta head, por sua vez,
deve estar dentro da etiqueta html e deverá ser fechada antes da etiqueta html e assim
sucessivamente.
Ao executarmos essa página o navegador Internet é ativado e ele solicita ao servidor web
o envio da mesma. O resultado deste processo deve ser similar ao mostrado pela Figura 1 a
seguir:

Figura 1: Exemplo de página em HTML

Como já mencionado anteriormente a base para a construção de aplicações para a web é

a linguagem HTML, porém basicamente realiza a formatação de documentos não apresentando
conceitos das linguagens de programação como variáveis e estruturas de controle, entre outros.
Desta forma, para se criar aplicações mais complexas e dinâmicas, torna-se necessário o uso de
outra linguagem de programação que irá complementar o HTML.
A seguir iremos detalhar a utilização das etiquetas mais comumente utilizadas em páginas
HTML. Porém, muitas outras estão disponíveis e podem ser facilmente encontradas na Internet
através de sites de busca.

Uma ótima referência é a Mozilla Developer Network, acesse

https://developer.mozilla.org/pt-BR/docs/Web/HTML

Dica!

5
Cláudio Luís Vieira Oliveira
Cabeçalhos

As etiquetas de cabeçalho são usadas para destacar determinados títulos e subtítulos. São
identificados pelas etiquetas <h1> até <h6>.

</>
<html>
<head>
<title>Cabeçalhos</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Cabeçalho 1</h1>
<h2>Cabeçalho 2</h2>
<h3>Cabeçalho 3</h3>
<h4>Cabeçalho 4</h4>
<h5>Cabeçalho 5</h5>
<h6>Cabeçalho 6</h6>
Texto com a formatação padrão (sem destaque).
</body>
</html>
cabecalho.html

Na Figura 2 temos a aparência da página após ser carregada pelo navegador.

Figura 2: Cabeçalhos

6
 Fundamentos de Programação para a Web
Parágrafos

A etiqueta de parágrafo permite agrupar e realizar o alinhamento do texto.

</>
<!DOCTYPE html>
<html>
<head>
<title>Parágrafos</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Parágrafos</h1>
<p>
A ligeira raposa marrom salta sobre o cão preguiçoso. A ligeira
raposa marrom salta sobre o cão preguiçoso. A ligeira raposa marrom
salta sobre o cão preguiçoso.
</p>
<p align="right">
A ligeira raposa marrom salta sobre o cão preguiçoso. A ligeira
raposa marrom salta sobre o cão preguiçoso. A ligeira raposa marrom
salta sobre o cão preguiçoso.
</p>
<p align="center">
A ligeira raposa marrom salta sobre o cão preguiçoso. A ligeira
raposa marrom salta sobre o cão preguiçoso. A ligeira raposa marrom
salta sobre o cão preguiçoso.
</p>
<p align="justify">
A ligeira raposa marrom salta sobre o cão preguiçoso. A ligeira
raposa marrom salta sobre o cão preguiçoso. A ligeira raposa marrom
salta sobre o cão preguiçoso.
</p>
</body>
</html>
paragrafo.html

Na Figura 3 mostramos os parágrafos alinhados à esquerda (padrão), direita, centro e

justificado.

7
Cláudio Luís Vieira Oliveira

Figura 3: Parágrafos

Fontes

É possível mudar a fonte de letra, tamanho e cor de um texto através da utilização da

etiqueta font. Também existem as etiquetas para itálico (i), negrito (b ou strong) e sublinhado
(u).

</>
<!DOCTYPE html>
<html>
<head>
<title>Fontes</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Fontes</h1>
HTML possui um conjunto de etiquetas (tags) que possibilitam a
formatação do texto de uma página. As etiquetas mais usadas para
realizar a formação são:<br />
<b>b - Negrito</b><br />
<strong>strong - Reforçado</strong><br />
<i>i - Itálico</i><br />
<u>u - Sublinhado</u><br /><br />
A etiqueta font permite a alteração do tipo da fonte de letra,
tamanho e cor do texto, por exemplo:<br />
<font size="+2" color="red">
Texto com tamanho ampliado e cor vermelha</font>
<br /><br />
<font size="-1" color="#FF8000">

8
 Fundamentos de Programação para a Web
Texto com tamanho reduzido e cor laranja</font>
</body>
</html>
fonte.html

A Figura 4 mostra as diferentes opções disponíveis para formatação dos textos de uma
página HTML.

Figura 4: Fontes

9
Cláudio Luís Vieira Oliveira
Imagens

A etiqueta img permite através dos atributos inserir (src), dimensionar (width e height) e
alinhar (align) imagens dentro de uma página web.

</>
<!DOCTYPE html>
<html>
<head>
<title>Imagens</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Imagens</h1>
A etiqueta img permite exibir imagens em uma página HTML.
<img src="lamp-lig.png" align="left" alt="Lâmpada Ligada">
</body>
</html>
imagem.html

Na Figura 5 podemos observar a exibição da imagem devidamente alinhada à esquerda.

Figura 5: Imagem

Links

Os links, também conhecidos por hyperlinks, permitem realizar a ligação entre as páginas
HTML e para diferentes tipos de conteúdo, por exemplo, imagens, documentos ou programas
para download. Também é possível realizar a ligação entre conteúdos que estão em uma mesma
página HTML. A etiqueta a (âncora) deverá ser usada para definir o link.

</>
<!DOCTYPE html>
10
 Fundamentos de Programação para a Web
<html>
<head>
<title>Sistema Solar</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Sistema Solar</h1>
<p align="justify">O Sistema Solar consiste no conjunto
constituído pelo Sol e todos os corpos celestes que estão sob sua ação
gravitacional.</p>
<a href="#sol">Sol</a><br>
<a href="mercurio.html">Mercúrio</a><br>
Vênus<br>
Terra<br>
Marte<br>
Júpiter<br>
Saturno<br>
Urano<br>
Netuno<br>

<h1><a id="sol">Sol</a></h1>
<p align="justify">O Sol é a estrela central do Sistema Solar. Seu
volume é composto por 92%
hidrogênio, 7% de hélio e 1% de outros elementos.</p>
<img src="sol.jpg"><br>
<a target="_blank"
href="https://pt.wikipedia.org/wiki/Sol">
Mais informações</a>
</body>
</html>
sistema-solar.html

Observe na página que o primeiro link criado, destacado a seguir, faz referência à uma
âncora criada na mesma página. Neste caso devemos começar com o caractere # e colocar o
nome.

</>
<a href="#sol">Sol</a><br>

O local da página que será mostrado deverá ser definido usando o atributo id da âncora,
conforme destacamos a seguir.

</>
<a id="sol">Sol</a>

Quando desejamos referenciar uma outra página devemos colocar o endereço completo
de onde a página se encontra localizada. Outra possibilidade, destacada a seguir, é indicar
somente o nome da página. Neste caso, ela deverá estar hospedada exatamente na mesma pasta
onde a página que a chamou está localizada.

11
Cláudio Luís Vieira Oliveira
</>
<a href="mercurio.html">Mercúrio</a><br>

Na Figura 6 temos a página criada, onde podemos observar os links que foram criados
para o Sol e Mercúrio.

Figura 6: Links

Ao clicar no link “Sol” a página terá seu conteúdo exibido a partir da âncora sol, conforme
ilustra a Figura 7.

Figura 7: Página mostrada a partir da âncora

12
 Fundamentos de Programação para a Web
No trecho da página destacado a seguir vamos criar um link para um endereço (URL)
localizado em outro servidor. Note, neste caso, que o endereço completo foi utilizado. Também
observe o uso do atributo target, com o valor "_blank", que determina que a página, indicada no
link, deverá ser aberta em uma nova aba do navegador.

</>
<a target="_blank"
href="https://pt.wikipedia.org/wiki/Sol">
Mais informações</a>

A página sobre o planeta Mercúrio irá apresentar o seguinte conteúdo.

</>
<!DOCTYPE html>
<html>
<head>
<title>Mercúrio</title>
<meta charset="UTF-8">
</head>
<body>
<h1Mercúrio</h1>
<p align="justify">Mercúrio é o menor planeta do Sistema Solar,
também é o mais próximo do Sol. Visualmente é parecido com a Lua,
apresentando crateras de impacto e planícies lisas, não possui
satélites naturais</p>
<a target="_blank"
href="https://pt.wikipedia.org/wiki/Merc%C3%BArio_(planeta)">Mais
informações</a>
</body>
</html>
mercurio.html

Adotando como referência o conteúdo disponível na Wikipedia, crie as páginas

para os demais planetas, implementando também os respectivos links na
página sistema-solar.html.
Dica!

13
Cláudio Luís Vieira Oliveira
Listas

Uma página HTML pode ter, em seu conteúdo, listas ordenadas (numeradas) e listas não
ordenadas. O primeiro exemplo irá implementar uma lista não ordenada, observe o uso das
etiquetas ul para definir a lista e li para identificar cada item que compõe a lista.

</>
<!DOCTYPE html>
<html>
<head>
<title>Lista de Compras</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Lista de Compras</h1>
<ul>
<li>Banana</li>
<li>Café</li>
<li>Batata</li>
<li>Frango</li>
<li>Pão de Forma</li>
<li>Manteiga</li>
</ul>
</body>
</html>
lista-nao-ordenada.html

Na Figura 8 temos a exibição da página criada com a respectiva lista não ordenada que é
caracterizada pelo uso de marcadores iniciando cada item da lista.

Figura 8: Lista não ordenada

14
 Fundamentos de Programação para a Web
No exemplo seguinte vamos criar uma lista ordenada (numerada). Note que, neste caso,
devemos usar a etiqueta ol para delimitar a lista e li para identificar cada item.

</>
<!DOCTYPE html>
<html>
<head>
<title>Como trocar uma lâmpada?</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Como trocar uma lâmpada?</h1>
<ol>
<li>Desligar a energia elétrica</li>
<li>Pegar uma escada</li>
<li>Pegar uma lâmpada nova</li>
<li>Colocar a escada sob a lâmpada queimada</li>
<li>Subir na escada</li>
<li>Desrosquear a lâmpada queimada</li>
<li>Rosquear a nova lâmpada</li>
<li>Descer da escada</li>
<li>Ligar a energia elétrica</li>
</ol>
</body>
</html>
lista-ordenada.html

A lista ordenada será exibida na página, conforme ilustra a Figura 9.

Figura 9: Lista ordenada

15
Cláudio Luís Vieira Oliveira
Tabelas

É muito simples criar tabelas usando HTML. Um conjunto de etiquetas permitem

especificar a tabela com suas respectivas linhas e colunas.

</>
<!DOCTYPE html>
<html>
<head>
<title>Relatório de Vendas</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Relatório de Vendas</h1>
<table border="1" cellspacing="0" cellpadding="2">
<tr>
<td align="center">Produto</td>
<td align="center">Quantidade</td>
<td align="center">Preço (R$)</td>
</tr>
<tr>
<td>Televisor</td>
<td align="center">2</td>
<td align="right">3.000,00</td>
</tr>
<tr>
<td>Geladeira</td>
<td align="center">4</td>
<td align="right">1.990,00</td>
</tr>
<tr>
<td>Fogão</td>
<td align="center">3</td>
<td align="right">600,00</td>
</tr>
</table>
</body>
</html>
tabela.html

Analisando a página, inicialmente devemos identificar a etiqueta table e os atributos que

permitirão definir a borda e o espaçamento entre as células. Em seguida, note o uso da etiqueta
tr para especificar uma linha da tabela e a etiqueta td para determinar uma coluna. É importante
salientar que se trata de uma estrutura hierárquica, ou seja, as colunas devem estar dentro de
uma linha que, por sua vez, devem estar dentro da tabela. A Figura 10 mostra a exibição da
página.

16
 Fundamentos de Programação para a Web

Figura 10: Tabela

Exercícios

1) Criar uma página HTML, com conteúdo definido a seu critério, que mostre um título
formatado com a etiqueta <H2>, um parágrafo com alinhamento justificado e fonte
tamanho 7.
2) Desenvolver uma página HTML, com conteúdo definido a seu critério, que apresente o
título formatado com a etiqueta <h1>, dois subtítulos formatados com a etiqueta <h2>.
O conteúdo do primeiro subtítulo deverá ser apresentado na cor azul, fonte tamanho 4 e
alinhado à direita. O conteúdo do segundo subtítulo deverá estar alinhado à esquerda.
3) Elaborar uma página HTML que mostre em uma tabela de duas colunas e três linhas
imagens de aparelhos domésticos comuns, por exemplo, fogão, geladeira e televisor
entre outros. Cada imagem deverá ser colocada em uma célula, juntamente com sua
respectiva descrição formatada na cor verde, tamanho 6 e centralizada.
4) Criar uma página HTML, que mostre o título “Notícias” formatado com a etiqueta <H1> e
apresente um conjunto de links para, pelo menos, 5 (cinco) sites de notícias disponíveis
na Internet.
5) Elaborar um site com, no mínimo, três páginas HTML e conteúdo definido a seu critério,
sendo que a primeira página deverá possuir links para as outras duas páginas criadas. Este
Web Site deverá apresentar os seguintes recursos:

a) Mostrar imagens (HTML).

b) Exibir uma lista de tópicos (HTML).
c) Utilizar tabela (HTML).
d) Utilizar links (HTML).
e) Realizar a formatação de fontes (cores, tamanho, negrito e itálico).
f) Realizar a formatação de parágrafos (esquerda, direita, centralizado e justificado).

17
Cláudio Luís Vieira Oliveira

Cascading Style Sheets

As Folhas de Estilo em Cascata (CSS - Cascading Style Sheets) permitem customizar a
formatação dos elementos HTML. Desta forma, ampliam as possibilidades de exibição das
páginas oferecendo bastante versatilidade para a diagramação das páginas e para a construção
da identidade visual de um site. Outra vantagem de adotarmos CSS em nossos sites é a
possibilidade de separar o conteúdo das páginas de sua formatação, o que facilita o processo de
manutenção e atualização das páginas.
Vamos abordar as três formas que podemos utilizar para usar o CSS em nossas páginas
HTML.

CSS Inline

A primeira opção mostrada consiste em utilizar o atributo style das etiquetas para inserir
diretamente o elemento CSS. Esta opção é interessante apenas quando temos pouco conteúdo
no site ou para fazer algum teste rápido para avaliar alguma alteração na diagramação da página.
Mas, de forma geral, deva ser evitada nos sites que estão publicados.

</>
<!DOCTYPE html>
<html>
<head>
<title>Introdução ao CSS</title>
<meta charset="UTF-8">
</head>
<body style="background-color:navy;">
<h1 style="font-family:sans-serif; color:yellow; padding:20px;">
Introdução ao CSS
</h1>
<p style="color:white; padding:20px;">
CSS Inline.
</p>
</body>
</html>
css-inline.html

Conforme mostra o exemplo, o CSS trabalha sempre através de pares de propriedades e

valores, sendo que os pares devem ser separados por ponto e vírgula. Enquanto propriedades e
valores estão unidos pelo caractere dois pontos, por exemplo, color:white, onde color é a
propriedade e white é o valor que será atribuído à propriedade. Na Figura 11 temos a página
HTML customizada com as propriedades do CSS.

18
 Fundamentos de Programação para a Web

Figura 11: Exemplo de CSS Inline

CSS Interno

Esta opção permite separar o conteúdo da página dos elementos de formatação através
do emprego da etiqueta style, onde será definida o conjunto de propriedades que serão
customizados pela folha de estilos em cascata.

</>
<!DOCTYPE html>
<html>
<head>
<title>Introdução ao CSS</title>
<meta charset="UTF-8">
<style>
body {
background-color: black;
}
h1 {
color: cyan;
text-align: center;
padding: 30px;
}
p {
color: white;
padding: 30px;
}
</style>
</head>
<body>
<h1>Introdução ao CSS</h1>
<p>CSS Interno</p>
</body>
</html>
css-interno.html

19
Cláudio Luís Vieira Oliveira
Observe que dentro da etiqueta style serão definidas as propriedades que serão aplicadas
ao elemento HTML, conforme destaca o trecho de código-fonte a seguir, onde a etiqueta h1 terá
a sua cor alterada para cyan, o texto será exibido alinhado ao centro da página e terá uma
margem de 30 pixels em relação aos demais elementos HTML. Também é importante salientar
que o grupo de propriedades para determinado elemento HTML deverá estar delimitado por
chaves.

{CSS}
h1 {
color: cyan;
text-align: center;
padding: 30px;
}

Na Figura 12 temos a exibição da página criada.

Figura 12: Exemplo de CSS Interno

CSS Externo

Nesta opção iremos, além de separar o conteúdo das páginas de formatação, possibilitar
que uma única folha de estilos seja utilizada por diversas páginas do site. Desta maneira, é
possível criar uma identidade visual para todo o site que é simples de manter, pois qualquer
alteração dentro da folha de estilos irá automaticamente afetar todas as páginas do site. Observe
que será criado um arquivo (estilo.css) que irá conter todos os elementos CSS. A página HTML
apenas deverá referenciar este arquivo através da etiqueta link.

</>
<!DOCTYPE html>
<html>
<head>
<title>Introdução ao CSS</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilo.css" />

20
 Fundamentos de Programação para a Web
</head>
<body>
<h1>Introdução ao CSS</h1>
<p>CSS Externo</p>
</body>
</html>
css-externo.html

Como já mencionado anteriormente, o arquivo CSS, mostrado a seguir, contém apenas

os elementos de formatação da página.

{CSS}
body {
background-color: navy;
}

h1 {
color: yellow;
text-align: center;
}

p {
color: white;
}
estilo.css

Na Figura 13 apresentamos a página devidamente customizada pela folha de estilos.

Figura 13: Exemplo de CSS Externo

21
Cláudio Luís Vieira Oliveira
Seletores e classes

No exemplo anterior podemos notar que a formatação sobre determinado elemento

HTML irá afetar todos os elementos da página, por exemplo, a formatação da etiqueta de
parágrafo (p), mostrada em detalhes no trecho de código-fonte a seguir, irá afetar todos os
parágrafos da página.

{CSS}
p {
color: white;
}

Existem situações dentro do projeto que um web site que precisamos tratar dos
elementos de forma individual ou através de grupos. Nestes casos devemos aplicar os conceitos
de seletores quando precisamos atuar sobre um elemento individualmente ou classes quando
desejamos trabalhar com um grupo de elementos.

</>
<!DOCTYPE html>
<html>
<head>
<title>Introdução ao CSS</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body id="fundo">
<h1 id="titulo">Introdução ao CSS</h1>
<p class="texto">Seletores</p>
<p class="texto">Classes</p>
</body>
</html>
seletores-classes.html

Observe no código-fonte apresentado a seguir que um seletor será especificado usando

o caractere # precedendo o identificador (id) do elemento que será afetado, o identificador deve
ser único, ou seja, não podemos em uma mesma página definir mais do que um elemento HTML
com o mesmo id. Por exemplo, o elemento body que possui a propriedade id definida como
fundo, será referenciada no CSS como #fundo. Uma classe, por sua vez, permite referenciar um
conjunto de elementos através do atributo HTML class que será referenciado no CSS com o
caractere de ponto final antecedendo o nome da classe, por exemplo, .texto que será usado pelos
parágrafos que pertencem a classe texto.

{CSS}
#fundo {
background-color: #808080;
padding: 20px;
}

#titulo {

22
 Fundamentos de Programação para a Web
color: lime;
}

.texto {
color: lightcyan;
font-weight: bold;
}
estilo.css

Na Figura 14 apresentamos a página.

Figura 14: Seletores e classes

Uma ótima referência é a Mozilla Developer Network, acesse

https://developer.mozilla.org/pt-BR/docs/Web/CSS

Dica!

Exercícios

1) Criar uma página HTML, com conteúdo definido a seu critério, que mostre um título
formatado com a etiqueta <H2> e, através de CSS inline, um parágrafo com alinhamento
justificado e fonte 14 px.
2) Desenvolver uma página HTML, com conteúdo definido a seu critério, que apresente
título formatado com a etiqueta <h1>, dois subtítulos formatados com a etiqueta <h2>.
O texto relacionado ao primeiro subtítulo deverá ser apresentado na cor azul, fonte
tamanho 12px e alinhado à direita. O texto relacionado ao segundo subtítulo deverá estar
alinhado à esquerda. Utilizar CSS interno para realizar as formatações solicitadas.
3) Elaborar uma página HTML que mostre em uma tabela 6 imagens de aparelhos
domésticos comuns, por exemplo, fogão, geladeira e televisor entre outros. Cada imagem
deverá ser apresentada centralizada em uma célula, juntamente com sua respectiva
descrição formatada na cor verde, tamanho 24px e centralizada. Adotar CSS interno para
realizar as formatações solicitadas.
4) Elaborar um site com três páginas HTML, com conteúdo definido a seu critério, sendo que
a primeira página deverá possuir links para as outras duas páginas criadas. Utilizar um CSS

23
Cláudio Luís Vieira Oliveira
externo de modo que todas as páginas apresentem um fundo preto, os títulos deverão
ser mostrados em amarelo, os textos na cor branca, fonte tamanho 14px e os links na cor
cian.
5) Aplicando o conceito de CSS externo, seletores e classes, criar uma página que exiba no
nome das cores vermelho, verde, amarelo, azul, cian, rosa, roxo e marrom. Cada item
deverá ser mostrado formatado na cor que representa e em tamanho 28px.

24
 Fundamentos de Programação para a Web

Programação para a Web

A linguagem HTML é a base de criação de qualquer página para a Web, porém trata-se de
uma linguagem que é composta por elementos estáticos e está fortemente focada na
composição e formatação de documentos.
O grande crescimento e popularização da Internet nas últimas décadas trouxe a
necessidade da criação de novas linguagens que conseguissem agregar conteúdo dinâmico as
páginas, além de recursos como, por exemplo, a validação de dados e acesso a banco de dados
entre outras funcionalidades.
Neste contexto, surgem linguagens como o PHP, ASP.net, JSP e JavaScript entre outras.
Estas linguagens não substituem o HTML, que é a base de qualquer documento para a Web, mas
atuam em conjunto suprindo os recursos que não estão disponíveis no HTML.
Estas linguagens são classificadas em Server Side, ou seja, são executadas no servidor
Web ou Client Side que são as linguagens que são executadas no cliente (Navegador Web).
Nas linguagens Server Side os programas criados são executados no servidor e os
resultados são enviados, em HTML, para o cliente que está acessando o servidor através de um
programa navegador, conforme ilustra a Figura 15. Como principais linguagens Server Side
podemos citar PHP, ASP, ASP.Net e JSP (Java).

Figura 15: Estrutura básica de uma aplicação Web

Por outro lado, nas linguagens Client Side os scripts são enviados, juntamente com o
HTML, para o navegador Web, o qual será o responsável pela execução. A principal linguagem
Client Side, se tornando um padrão de mercado, é o JavaScript.

25
Cláudio Luís Vieira Oliveira

JavaScript
O JavaScript é uma linguagem de programação orientada a objetos que é interpretada e
executada pelo navegador Web (client-side script). Apresenta uma sintaxe similar a linguagem
Java e tem como objetivo principal dar uma maior interatividade às páginas.
Uma característica importante da linguagem JavaScript reside no fato de ela não possuir
tipos de dados, sendo que qualquer variável definida é do tipo variante, ou seja, o tipo de dados
é definido de acordo com a informação de está armazenada naquele momento. O tipo de dados
de determinada variável pode ser modificado ao longo da execução da aplicação, conforme o seu
conteúdo vai sendo alterado.
Como podemos observar na Figura 16 toda linguagem orientada a objetos, o JavaScript
está fundamentado sobre os conceitos de funções, objetos, eventos, propriedades e métodos.
Por exemplo:

Figura 16: Funções, objetos, eventos, atributos e métodos

26
 Fundamentos de Programação para a Web
Primeiro script

Abaixo está o código fonte do primeiro script que será criado. Este script é parte de uma
página com conteúdo HTML e que deve ser gravada com a respectiva extensão.

</>
<!DOCTYPE html>
<html>
<head>
<title>Introdução ao JavaScript</title>
<meta charset="UTF-8">
</head>
<body onload="iniciar()">
<script type="text/javascript">
function iniciar() {
document.write("<h1>" + document.title
+ "</h1>");
document.write("Olá pessoal!<br>");
}
</script>
</body>
</html>
ola.html

Este exemplo consiste basicamente em utilizar o evento onload da página HTML para
realizar a chamada da função iniciar(). A função, por sua vez, utilizará o método write do objeto
document para escrever um determinado conteúdo na área de trabalho do navegador. O
resultado obtido após a execução da página no navegador é mostrado na Figura 17:

Figura 17: Utilizando o JavaScript

Vários objetos estão disponíveis para serem utilizados, com o intuito de ilustrar esse
conceito, vamos criar uma nova página. A função iniciar() irá utilizar o objeto navigator e, através
das propriedades appName e appVersion, identificar o nome e a versão do navegador que o
usuário está utilizando.

27
Cláudio Luís Vieira Oliveira

</>
<!DOCTYPE html>
<html>
<head>
<title>Bem-vindo ao JavaScript</title>
<meta charset="UTF-8">
</head>
<body onload="iniciar()">
<script type="text/javascript">
function iniciar() {
document.write("<h1>" + document.title + "</h1>");
document.write ("Você está utilizando o navegador " +
navigator.appName + ", versão " + navigator.appVersion);
}
</script>
</body>
</html>
navegador.html

A Figura 18 mostra o resultado da execução da página que foi criada, sendo importante
observar a exibição do nome do navegador e a respectiva versão.

Figura 18: Mostrando propriedades de um objeto

28
 Fundamentos de Programação para a Web
Variáveis em JavaScript

Conforme abordado anteriormente, as variáveis em JavaScript não possuem um tipo de

dados no momento de sua declaração, elas passam a assumir o tipo de dados dos valores que
estão armazenados naquele instante. No exemplo a seguir, será possível observar que a
variável x recebe inicialmente uma cadeia de caracteres, ou seja, neste momento, ela é do tipo
de dados String.
Posteriormente ela recebe um valor numérico assumindo, a partir deste momento, o tipo
de dados inteiro. Neste exemplo ela finaliza como sendo do tipo de dados float.

</>
<!DOCTYPE html>
<html>
<head>
<title>Bem-vindo ao JavaScript</title>
<meta charset="UTF-8">
</head>
<body onload="iniciar()">
<script type="text/javascript">
function iniciar() {
var x = "Olá!";
document.write("<h1>Variáveis em JavaScript</h1>");
document.write("A variável agora é String: " + x + "<br>");
x = 12 + 13;
document.write("Agora é do tipo de dados inteiro: " + x +
"<br>");
x = 4.50 + 5.25;
document.write("Neste momento é float: " + x + "<br>");
}
</script>
</body>
</html>
variaveis.html

Na Figura 19 é mostrada a página criada:

Figura 19: Variáveis

29
Cláudio Luís Vieira Oliveira
Observe, neste mesmo exemplo, que os valores para o tipo de dados String devem ser
especificados entre aspas simples (') ou duplas ("). Por exemplo:

{JS}
var x = "Olá";
var y = 'amigo! ';

Valores numéricos, por sua vez, não possuem delimitadores e como separador decimal
deve-se utilizar o caractere de ponto final (.), conforme mostrado a seguir:

{JS}
var x = 12 + 13;
var y = 4.50 + 5.25;

30
 Fundamentos de Programação para a Web
Operadores

De mesma maneira que outras linguagens de programação, JavaScript implementa um

grande conjunto de operadores, vamos apresentar aqui os mais utilizados.

Grupo Operador Descrição

= Atribuição simples
+= Atribuição de adição
-= Atribuição de subtração
Atribuição *= Atribuição de multiplicação
/= Atribuição de divisão
%= Atribuição de resto
**= Atribuição de exponenciação
== Igual
Exatamente igual (conteúdo e
===
tipo de dado)
!= Diferente
Exatamente diferente
Relacional !==
(conteúdo e tipo de dado)
< Menor
<= Menor ou igual
> Maior
>= Maior ou igual
+ Adição
- Subtração
* Multiplicação
/ Divisão
Aritméticos
% Resto da Divisão
** Exponenciação
++ Incremento
-- Decremento
&& E (AND)
Lógicos || OU (OR)
! NÃO (NOT)

No trecho de programa a seguir vamos ilustrar o uso de alguns operadores.

{JS}
var x = 10;
x -= 4;
var y = x ** 2;

Na primeira linha temos o operador de atribuição (=), isto é, a varíavel x irá receber o
valor 10. Na linha seguinte usamos o operador de atribuição de subtração (-=), neste caso, x irá
receber o valor de 10 (que é o valor atual de x) menos 4. Ou seja, ao final da operação x
armazenará o valor 6.
Na terceira linha usamos o operador de exponenciação (**) e elevamos o valor de x, que
é 6, ao quadrado (62), desta forma, y irá armazenar 36.

31
Cláudio Luís Vieira Oliveira

A Mozilla Developer Network, apresenta a relação completa dos operadores,

acesse
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript
Dica!

Depuração de Scripts

Os navegadores implementam ferramentas que nos permite monitorar a execução de das

instruções JavaScript e emitir diretamente comandos para avaliar o seu funcionamento. Aqui
vamos abordar o uso destas ferramentas no navegador Firefox.
Clique na barra de ferramentas no botão “Open menu” que fica localizado no canto
superior direito da janela do navegador, conforme mostra a Figura 20. Então, selecione a opção
“Web Developer” e depois escolha “Web Console”.

Figura 20: Menu

Na parte inferior da janela do navegador será mostrado o “Web Console” (Figura 21). Nele
é possível enviar comandos ele também aponta as linhas de um script que apresentaram erro
durante a execução do script.

32
 Fundamentos de Programação para a Web

Figura 21: Console

Observe na Figura 22 que vamos utilizar o console para verificar o funcionamento de

alguns dos operadores apresentados anteriormente.

Figura 22: Avaliando o uso dos operadores

Esta é uma maneira muito rápida e fácil de verificar como determinado comando ou
operação irá se comportar. O próximo exemplo mostra como podemos identificar erros nos
scripts de uma página HTML. Observe no código-fonte a seguir que intencionamente foi deixado
um erro, pois a string atribuída à variável nome não foi adequadamente delimitada por aspas.

</>
<!DOCTYPE html>
<html>
<head>
<title>Caixas de Diálogo e Mensagem</title>
<meta charset="UTF-8">
</head>
<body onload="iniciar()">
<script type="text/javascript">
function iniciar() {
var nome = "Zé Ninguém;
}
</script>
<h1>Erro</h1>
</body>
</html>
erro.html

33
Cláudio Luís Vieira Oliveira
Ao carregar a página no navegador, observe na Figura 23 que o console irá indicar que
houve o erro a apontando a linha do arquivo, que, no nosso é exemplo, se trada da linha 10.

Figura 23: Identificando erros

Ao clicar na linha indicada o navegador irá exibir o código-fonte da página, deixando a

linha que apresenta o erro em destaque, conforme ilustra a Figura 24.

Figura 24: Código-fonte da página com o erro em destaque

Os ambientes integrados de desenvolvimento (IDEs) também podem auxiliar na tarefa de

identificar erros nos scripts. Como exemplo, observe na Figura 25 o erro sendo indicado no
NetBeans. Ao posicionar o ponteiro do mouse sobre o ícone que aparece no lugar da linha 10, a
IDE irá mostrar o motivo do erro (Missing close quote), ou seja, neste exemplo faltou fechar as
aspas duplas.

34
 Fundamentos de Programação para a Web

Figura 25: Erro identificado através da IDE NetBeans

Caixas de mensagem e diálogo

Neste exemplo são mostradas as funções prompt e alert que permitem, respectivamente,
receber e exibir informações em janelas (caixas de diálogo e mensagem) destacadas da página
principal. Também é mostrado o método toUpperCase() que permite converter uma
determinada cadeia de caracteres em letras maiúsculas.

</>
<!DOCTYPE html>
<html>
<head>
<title>Caixas de Diálogo e Mensagem</title>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript">
function login() {
var nome = prompt("Qual o seu nome?",
"Zé Ninguém");
alert("Olá, " + nome.toUpperCase() +
".");
}
</script>
<h1>Identificação</h1>
<input type="button" value="Login"
onclick="javascript:login()">
</body>
</html>
caixas.html

35
Cláudio Luís Vieira Oliveira
Na Figura 26, temos um exemplo da execução da página após o pressionamento do botão
Login:

Figura 26: Uso da função prompt

Depois de preencher o campo nome e pressionar o botão OK, podemos observar na Figura
27 que será exibido o nome da pessoa através do emprego da função alert.

Figura 27: Uso da função alert

Containers

Apesar da linguagem HTML não permitir a inserção (e ou modificação) do seu conteúdo

após o carregamento da página, ela provê alguns elementos (TAGs) que atuam como container
de dados. Elementos container são aqueles que permitem marcar uma determinada porção do
texto e, posteriormente, através de uma linguagem de script, esse texto pode ter o seu conteúdo
modificado após a página ser carregada.

</>
<!DOCTYPE html>
36
 Fundamentos de Programação para a Web
<html>
<head>
<title> Elementos Containers</title>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript">
function login() {
var nome = prompt("Qual o seu nome?",
"Zé Ninguém");
resultado.innerHTML = "Olá, " +
nome.toUpperCase() + ".";
}
</script>
<h1>Identificação</h1>
<input type="button" value="Login"
onclick="login()">
<hr>
<div id="resultado">Olá.</div>
</body>
</html>
containers.html

Na Figura 28 temos um exemplo de como a página poserá ser exibida após a execução do
script:

Figura 28: Texto exibido no elemento container

37
Cláudio Luís Vieira Oliveira
Estruturas de controle

A linguagem JavaScript implementa as tradicionais estruturas para controle de fluxo do

programa, são elas:

if: permite definir a execução ou não de determinado bloco de código de acordo com a
condição especificada. No exemplo abaixo se testa o valor da variável x e, de acordo com o seu
valor, o comando if determina qual bloco de código deverá ser executado.

</>
<!DOCTYPE html>
<html>
<head>
<title>Estruturas de Controle</title>
<meta charset="UTF-8">
</head>
<body onload="iniciar()">
<script type="text/javascript">
function iniciar() {
var x = prompt("Digite um número?");
document.write("<h1>Estruturas de Controle</h1>");
if (x > 5) {
document.write("O valor de X é maior que cinco.<br>");
}
else if (x < 5) {
document.write("O valor de X é menor que cinco.<br>");
}
else {
document.write("O valor de X é igual a cinco.<br>");
}
}
</script>
</body>
</html>
estrutura-if.html

switch: de acordo com o valor da variável testada pelo comando, é determinado o bloco
de código que será executado. Neste exemplo, o número que representa o dia da semana é
obtido e, com base em seu valor, o nome que representa o dia é armazenado em uma variável
sendo, posteriormente, exibido na área de trabalho do navegador.

</>
<!DOCTYPE html>
<html>
<head>
<title>Estruturas de Controle</title>
<meta charset="UTF-8">
</head>
<body onload="iniciar()">
<script type="text/javascript">

38
 Fundamentos de Programação para a Web
function iniciar() {
var hoje = new Date();
var diaSemana = hoje.getDay();
var nomeDiaSemana = "";
document.write("<h1>Estruturas de Controle</h1>");
switch(diaSemana) {
case 0:
nomeDiaSemana = "Domingo";
break;
case 1:
nomeDiaSemana = "Segunda-feira";
break;
case 2:
nomeDiaSemana = "Terça-feira";
break;
case 3:
nomeDiaSemana = "Quarta-feira";
break;
case 4:
nomeDiaSemana = "Quinta-feira";
break;
case 5:
nomeDiaSemana = "Sexta-feira";
break;
case 6:
nomeDiaSemana = "Sábado";
}
document.write ("Hoje é " + nomeDiaSemana);
}
</script>
</body>
</html>
estrutura-switch.html

for: o comando permite repetição enquanto a condição especificada seja verdadeira. No

exemplo abaixo são mostrados os números inteiros de 0 a 4:

</>
<!DOCTYPE html>
<html>
<head>
<title>Estruturas de Controle</title>
<meta charset="UTF-8">
</head>
<body onload="iniciar()">
<script type="text/javascript">
function iniciar() {
document.write("<h1>Estruturas de Controle</h1>");
for (var i = 0; i < 5; i++) {
document.write("Contando ... " + i + "<br>");
}
39
Cláudio Luís Vieira Oliveira
}
</script>
</body>
</html>
estrutura-for.html

while: similar ao comando for, executa a repetição de um bloco de programa. Neste

exemplo são mostrados os números entre 1 e 5:

</>
<!DOCTYPE html>
<html>
<head>
<title>Estruturas de Controle</title>
<meta charset="UTF-8">
</head>
<body onload="iniciar()">
<script type="text/javascript">
function iniciar() {
var i = 1;
document.write("<h1>Estruturas de controle</h1>");
document.write("Contando ...");
while (i <= 5) {
document.write(" " + i);
i++;
}
}
</script>
</body>
</html>
estrutura-while.html

do-while: é similar aos comandos for e while apresentados anteriormente, porém,

apresenta uma diferença fundamental, como o a verificação da condição ocorre apenas após a
execução do bloco de programa a ser repetido, o mesmo sempre será executado pelo menos
uma vez. Quando se utiliza for e while se a condição inicial resultar em falso o bloco a ser repetido
nunca é executado. No exemplo a seguir são mostrados os números pares entre 0 e 10:

</>
<!DOCTYPE html>
<html>
<head>
<title>Estruturas de Controle</title>
<meta charset="UTF-8">
</head>
<body onload="iniciar()">
<script type="text/javascript">
function iniciar() {
var i = 0;
document.write("<h1>Estruturas de controle</h1>");
40
 Fundamentos de Programação para a Web
document.write("Contando ...");
do {
document.write(" " + i);
i = i + 2;
}
while (i <= 10);
}
</script>
</body>
</html>
estrutura-do.html

Vetores

O objeto Array permite a definição de vetores cujos elementos poderão ser acessados
posteriormente através do respectivo índice.

</>
<!DOCTYPE html>
<html>
<head>
<title>Montadoras</title>
<meta charset="UTF-8">
</head>
<body onload="exibir()">
<script type="text/javascript">
function exibir() {
var montadora = new Array("Fiat",
"Ford", "General Motors",
"Honda", "Nissan", "Renault",
"Volkswagen");
document.write("<h1>Montadoras</h1>");
for (i = 0; i < montadora.length; i++)
document.write (montadora[i] +
"<br>");
}
</script>
</body>
</html>
vetores.html

Neste exemplo um vetor é declarado e inicializado com alguns itens, posteriormente a

rotina JavaScript acessa os elementos do vetor e os imprime na página HTML, conforme ilustrado
pela Figura 29.

41
Cláudio Luís Vieira Oliveira

Figura 29: Exemplo de uso de vetores

42
 Fundamentos de Programação para a Web
Exibição de imagens

A linguagem JavaScript é bastante versátil no acesso à arquivos com imagens permitindo

que uma imagem possa ser trocada por outra, sem que com isso, a página HTML original
precise ser recarregada. Esta característica permite dar dinamismo a páginas, sem a
necessidade de scripts com código complexo.

</>
<!DOCTYPE html>
<html>
<head>
<title>Imagens</title>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript">
function mudar(objeto, imagem) {
lampada.src = imagem;
}
</script>
<h1>Imagens</h1>
<a onmouseover="mudar('lampada',
'lamp-lig.png')"
onmouseout="mudar('lampada',
'lamp-desl.png')">
<img src="lamp-desl.png"
border="0" id="lampada">
</a>
</body>
</html>
imagens.html

Neste exemplo, mostrado na Figura 30, a imagem exibida na página é trocada sempre que
o ponteiro do mouse entra ou sai da área ocupada pela imagem.

Figura 30: Substituindo uma figura através do JavaScript

43
Cláudio Luís Vieira Oliveira
Interação com formulários

Em JavaScript é possível o acesso aos elementos de formulários definidos em HTML. Desta

forma, consegue-se realizar verificações e alterações no conteúdo dos elementos,
proporcionando maiores possibilidades de interação com o usuário final da aplicação.

</>
<!DOCTYPE html>
<html>
<head>
<title>Calculadora Simples</title>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript">
function somar() {
res.value = parseInt(v1.value) + parseInt(v2.value);
}
</script>
<h1>Calculadora Simples</h1>
Valor 1: <input type="text" id="v1" value="0"><br>
Valor 2: <input type="text" id="v2" value="0"><br>
<input type="button" value="Somar"
onclick="somar()"><br>
Resultado: <input type="text" id="res" value="0" readonly>
</body>
</html>
somar.html

Na Figura 31 podemos observar o resultado da página após a interação do usuário:

Figura 31: Formulário

44
 Fundamentos de Programação para a Web
Melhorias na página da calculadora básica

Uma vez que os conceitos básicos sobre a interação entre formulários em HTML e a
linguagem JavaScript foram abordados, é possível realizar algumas melhorias na aplicação
mostrada no exemplo anterior. O primeiro passo consiste em implementar as outras três
operações aritméticas básicas. O modo mais fácil para fazer isso, consiste em criar um botão para
cada operação juntamente com a respectiva função. As outras alterações realizadas serão o
suporte aos números reais (float) e evitar a divisão de um determinado número por zero.

</>
<!DOCTYPE html>
<html>
<head>
<title>Calculadora Simples</title>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript">
function somar() {
res.value = parseFloat(v1.value) + parseFloat(v2.value);
}

function subtrair () {
res.value = parseFloat(v1.value) -parseFloat(v2.value);
}

function multiplicar () {
res.value = parseFloat(v1.value) * parseFloat(v2.value);
}

function dividir () {
if (parseFloat(v2.value) === 0)
res.value = "Erro!";
else
res.value = parseFloat(v1.value) / parseFloat(v2.value);
}
</script>
<h1>Calculadora Simples</h1>
Valor 1: <input type="text" id="v1" value="0"><br>
Valor 2: <input type="text" id="v2" value="0"><br>
<input type="button" value="Somar"
onclick="somar()">
<input type="button" value="Subtrair"
onclick="subtrair()">
<input type="button" value="Multiplicar"
onclick="multiplicar()">
<input type="button" value="Dividir"
onclick="dividir()"><br>
Resultado: <input type="text" id="res" value="0" readonly>
</body>
</html>
45
Cláudio Luís Vieira Oliveira
calculadora.html

Na Figura 32 mostramos o resultado da subtração dos dois valores digitados pelo usuário.

Figura 32: Formulário

Outra implementação possível consiste em criar uma única função que irá realizar todas
as operações. Para que isso seja possível a função deverá receber um parâmetro indicando qual
operação será executada como apresentado no trecho de código-fonte a seguir para o botão
Somar.

</>
<input type="button" value="Somar"
onclick="calcular('+')">

Em seguida a função deverá, com base no valor do parâmetro, executar a operação

solicitada, conforme mostrado no código-fonte abaixo:

</>
<!DOCTYPE html>
<html>
<head>
<title>Calculadora Simples</title>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript">
function calcular(op) {
if (op === '+')
res.value = parseFloat(v1.value) + parseFloat(v2.value);

46
 Fundamentos de Programação para a Web
else if (op === '-')
res.value = parseFloat(v1.value) - parseFloat(v2.value);
else if (op === '*')
res.value = parseFloat(v1.value) * parseFloat(v2.value);
else {
if (parseFloat(v2.value) === 0)
res.value = 'Erro!';
else
res.value = parseFloat(v1.value) / parseFloat(v2.value);
}
}
</script>
<h1>Calculadora Simples</h1>
Valor 1: <input type="text" id="v1" value="0"><br>
Valor 2: <input type="text" id="v2" value="0"><br>
<input type="button" value="Somar"
onclick="calcular('+')">
<input type="button" value="Subtrair"
onclick="calcular('-')">
<input type="button" value="Multiplicar"
onclick="calcular('*')">
<input type="button" value="Dividir"
onclick="calcular('/')"><br>
Resultado: <input type="text" id="res" value="0" readonly>
</body>
</html>
calculadora-parametro.html

47
Cláudio Luís Vieira Oliveira
Botões de rádio

Os botões de rádio são amplamente utilizados em formulário quando é necessário

restringir os valores de uma determinada entrada dados a um conjunto de opções possíveis.
Tomando como referência o exemplo da calculadora será utilizado um conjunto de botões de
rádio para que o usuário possa selecionar a operação a ser realizada.

</>
<!DOCTYPE html>
<html>
<head>
<title>Calculadora Simples</title>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript">
function calcular() {
if (somar.checked === true)
res.value = parseFloat(v1.value) + parseFloat(v2.value);
else if (subtrair.checked === true)
res.value = parseFloat(v1.value) - parseFloat(v2.value);
else if (multiplicar.checked === true)
res.value = parseFloat(v1.value) * parseFloat(v2.value);
else {
if (parseFloat(v2.value) === 0)
res.value = "Erro!";
else
res.value = parseFloat(v1.value) / parseFloat(v2.value);
}
}
</script>
<h1>Calculadora Simples</h1>
Valor 1: <input type="text" id="v1" value="0"><br>
Valor 2: <input type="text" id="v2" value="0"><br>
Operação:
<input type="radio" id="somar" name="op" checked> Somar
<input type="radio" id="subtrair" name="op"> Subtrair
<input type="radio" id="multiplicar" name="op"> Multiplicar
<input type="radio" id="dividir" name="op"> Dividir<br>
<input type="button" value="Executar"
onclick="calcular()"><br>
Resultado: <input type="text" id="res" value="0" readonly>
</body>
</html>
calculadora-radio.html

A Figura 33 mostra a implementação da página da calculadora básica usando os botões

de rádio.

48
 Fundamentos de Programação para a Web

Figura 33: Botões de Rádio

49
Cláudio Luís Vieira Oliveira
Caixas de seleção

Outro elemento disponível em formulário que possibilita limitar a entrada de dados à um

conjunto pré-determinado de valores são as caixas de seleção. Observe que no formulário HTML
devemos utilizar a etiqueta select e acrescentando també as respectivas opções, conforme
podemos notar no trecho de código-fonte a seguir.

</>
Operação: <select id="op">
<option value="">(Escolha uma opção)</option>
<option value="+">Somar</option>
<option value="-">Subtrair</option>
<option value="*">Multiplicar</option>
<option value="/">Dividir</option>
</select>

Observe no seguinte trecho de código-fonte que a função calcular deverá determinar o

valor que foi escolhido pelo usuário na caixa de seleção através da propriedade value.

</>
function calcular() {
if (op.value === '+')
res.value = parseFloat(v1.value) + parseFloat(v2.value);
else if (op.value === '-')
res.value = parseFloat(v1.value) - parseFloat(v2.value);
...
}

A seguir apresentamos a implementação completa da página.

</>
<!DOCTYPE html>
<html>
<head>
<title>Calculadora Simples</title>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript">
function calcular() {
if (op.value === '+')
res.value = parseFloat(v1.value) + parseFloat(v2.value);
else if (op.value === '-')
res.value = parseFloat(v1.value) - parseFloat(v2.value);
else if (op.value === '*')
res.value = parseFloat(v1.value) * parseFloat(v2.value);
else if (op.value === '/') {
if (parseFloat(v2.value) === 0)
res.value = 'Erro!';

50
 Fundamentos de Programação para a Web
else
res.value = parseFloat(v1.value) / parseFloat(v2.value);
}
else
alert('Escolha a operação desejada!');
}
</script>
<h1>Calculadora Simples</h1>
Valor 1: <input type="text" id="v1" value="0"><br>
Valor 2: <input type="text" id="v2" value="0"><br>
Operação:
<select id="op">
<option value="">(Escolha uma opção)</option>
<option value="+">Somar</option>
<option value="-">Subtrair</option>
<option value="*">Multiplicar</option>
<option value="/">Dividir</option>
</select><br>
<input type="button" value="Executar"
onclick="calcular()"><br>
Resultado: <input type="text" id="res" value="0" readonly>
</body>
</html>
calculadora-selecao.html

O resultado da execução do script irá produzir um resultado semalhante ao mostrado na

Figura 34.

Figura 34: Utilização da Caixa de Seleção

51
Cláudio Luís Vieira Oliveira
Validação dos campos do formulário

Um aspecto importante do JavaScript é permitir a verificação e validação local dos dados

de um formulário. Desta forma, não é necessário realizar requisições ao servidor web, o que
aumenta significativamente a capacidade de interação com o usuário e o desempenho da página.
A página que será criada deverá obter a descrição, preço unitário e quantidade de um
determinado produto para, posteriormente, calcular o preço total. Os dados que o usuário irá
digitar no formulário deverão ser validados aplicancando as seguintes regras:

a) Todos os campos devem ser obrigatoriamente preenchidos.

b) O campo quantidade deverá aceitar um número inteiro entre 1 e 999.
c) O campo preço unitário deverá aceitar apenas número reais positivos.

Para a realizar a validação existe o evento onblur o qual permite executar uma função
quando o campo de texto perde o foco, ou seja, o cursor deixa o campo seja através do
pressionamento do botão esquerto do mouse em outra área da tela ou pressionando da tecla de
tabulação. Desta forma, para validar o campo descrição teríamos, por exemplo:

</>
<input type="text" id="desc" value="" size="20" maxlength="20"
onblur="validarDescricao()" />

A função em JavaScript que seria chamada pelo evento onblur, poderia ser escrita da
maneira mostrada a seguir, onde inicialmente verificamos se o valor do campo desc (descrição
do produto) está vazio. O método trim irá desconsiderar na comparação os espaços em branco
que, eventualmente, possam ocorrer no início e/ou no fim do valor digitado no campo.

{JS}
function validarDescricao() {
if (desc.value.trim() === "") {
desc.style.background = "yellow";
alert("Preencha a descrição do produto!");
return false;
}
else {
desc.style.background = "white";
return true;
}
}

Quando o campo estiver vazio ele será destacado em amarelo e uma mensagem será
mostrada, conforme ilustra a Figura 35. Além disso, quando a validação falhar, a função retornará
falso, caso contrário, o retorno será verdadeiro.

52
 Fundamentos de Programação para a Web

Figura 35: Alertando que o campo não foi preenchido

A seguir apresentamos a implementação completa.

</>
<!DOCTYPE html>
<html>
<head>
<title>Produto</title>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript">
function validarDescricao() {
if (desc.value.trim() === "") {
desc.style.background = "yellow";
alert("Preencha a descrição do produto!");
return false;
}
else {
desc.style.background = "white";
return true;
}
}

function validarQuantidade() {
var erro = false;
if (qtd.value.trim() === "") {
erro = true;
}
else {
if (isNaN(qtd.value) === true) {
erro = true;
}

53
Cláudio Luís Vieira Oliveira
else {
var nQtd = parseInt(qtd.value);
if (nQtd < 1 || nQtd > 999) {
erro = true;
}
}
}

if (erro === true) {

qtd.style.background = "yellow";
alert("A quantidade deve ser um número entre 1 e 999!");
}
else {
qtd.style.background = "white";
}
return (!erro);
}

function validarPreco() {
var erro = false;
if (unit.value.trim() === "") {
erro = true;
}
else {
if (isNaN(unit.value) === true) {
erro = true;
}
else {
var nUnit = parseFloat(unit.value);
if (nUnit <= 0.0) {
erro = true;
}
else {
unit.value = nUnit.toFixed(2);
}
}
}

if (erro === true) {

unit.style.background = "yellow";
alert("O preço unitário deve ser um número maior que zero!");
}
else {
unit.style.background = "white";
}
return (!erro);
}

function calcular() {
if (validarDescricao() && validarQuantidade() && validarPreco())
{
var nTotal = parseFloat(unit.value) * parseInt(qtd.value);
54
 Fundamentos de Programação para a Web
total.value = nTotal.toFixed(2);
}
}
</script>
<h1>Produto</h1>
<table border="0">
<tr>
<td align="right">Descrição:</td>
<td><input type="text" id="desc" value="" size="20"
maxlength="20" onblur="validarDescricao()" /></td>
</tr>
<tr>
<td align="right">Quantidade:</td>
<td><input type="text" id="qtd" value="" size="3"
maxlength="3" onblur="validarQuantidade()" /></td>
</tr>
<tr>
<td align="right">Preço Unitário:</td>
<td><input type="text" id="unit" value="" size="10"
maxlength="10" onblur="validarPreco()" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Calcular"
onclick="calcular()"/></td>
</tr>
<tr>
<td align="right">Preço Total:</td>
<td><input type="text" id="total" value="" size="10" readonly
/></td>
</tr>
</table>
</body>
</html>
produto.html

Na Figura 36 temos o resultado devidamente calculado e formatado, após a validação dos

dados digitados.

55
Cláudio Luís Vieira Oliveira

Figura 36: Cálculo do preço total

Outra possibilidade consiste em exibir as mensagens de erro em elementos DIV do HTML,

conforme apresentado no seguinte programa.

</>
<!DOCTYPE html>
<html>
<head>
<title>Produto</title>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript">
function validarDescricao() {
if (desc.value.trim() === "") {
desc.style.background = "yellow";
eDesc.style.color = "#FF0000";
eDesc.innerHTML = "Preencha a descrição do produto!";
return false;
}
else {
desc.style.background = "white";
eDesc.innerHTML = "";
return true;
}
}

function validarQuantidade() {
var erro = false;
if (qtd.value.trim() === "") {
erro = true;
}
else {

56
 Fundamentos de Programação para a Web
if (isNaN(qtd.value) === true) {
erro = true;
}
else {
var nQtd = parseInt(qtd.value);
if (nQtd < 1 || nQtd > 999) {
erro = true;
}
}
}

if (erro === true) {

qtd.style.background = "yellow";
eQtd.style.color = "#FF0000";
eQtd.innerHTML = "A quantidade deve ser um número entre 1 e
999!";
}
else {
qtd.style.background = "white";
eQtd.innerHTML = "";
}
return (!erro);
}

function validarPreco() {
var erro = false;
if (unit.value.trim() === "") {
erro = true;
}
else {
if (isNaN(unit.value) === true) {
erro = true;
}
else {
var nUnit = parseFloat(unit.value);
if (nUnit <= 0.0) {
erro = true;
}
else {
unit.value = nUnit.toFixed(2);
}
}
}

if (erro === true) {

unit.style.background = "yellow";
eUnit.style.color = "#FF0000";
eUnit.innerHTML = "O preço unitário deve ser um número maior
que zero!";
}
else {
unit.style.background = "white";
57
Cláudio Luís Vieira Oliveira
unit.innerHTML = ""
}
return (!erro);
}

function calcular() {
if (validarDescricao() && validarQuantidade() &&
validarPreco()) {
var nTotal = parseFloat(unit.value) * parseInt(qtd.value);
total.value = nTotal.toFixed(2);
}
}
</script>

<h1>Produto</h1>
<table border="0">
<tr>
<td align="right">Descrição:</td>
<td><input type="text" id="desc" value="" size="20"
maxlength="20" onblur="validarDescricao()" /><div
id="eDesc"></div></td>
</tr>
<tr>
<td align="right">Quantidade:</td>
<td><input type="text" id="qtd" value="" size="3"
maxlength="3" onblur="validarQuantidade()" /><div
id="eQtd"></div></td>
</tr>
<tr>
<td align="right">Preço Unitário:</td>
<td><input type="text" id="unit" value="" size="10"
maxlength="10" onblur="validarPreco()" /><div id="eUnit"></div></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Calcular"
onclick="calcular()"/></td>
</tr>
<tr>
<td align="right">Preço Total:</td>
<td><input type="text" id="total" value="" size="10" readonly
/></td>
</tr>
</table>
</body>
</html>
produto-2.html

58
 Fundamentos de Programação para a Web
JavaScript externo

Muitas vezes a solução de um determinado problema computacional acaba por gerar

longos arquivos de código-fonte. A modularização é utilizada para permitir agrupar melhor o
código-fonte facilitando o entendimento e as tarefas de manutenção. Desta forma, é possível
criarmos um arquivo externo apenas com o código-fonte em JavaScript mantendo-o separado
do HTML, como mostraremos neste próximo exemplo onde será desenvolvida uma calculadora
com uma interface gráfica “estilo” Windows.
Em primeiro lugar iremos criar apenas a página com o conteúdo HTML.

</>
<!DOCTYPE html>
<html>
<head>
<title>Calculadora</title>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript" src="calculadora.js"></script>
<h2>Calculadora</h2>
<table bgcolor="#BBBBBB" border="0" cellpadding="3"
cellspacing="0" summary="">
<tr>
<td colspan="4">
<input type="text" id="res" value="0" size="12" readonly>
<input type="hidden" id="v1" value="0">
<input type="hidden" id="op" value="">
</td>
</tr>
<tr>
<td><input type="button" id="off" value="Off"
onclick='retornar()'></td>
<td><input type="button" id="lim" value=" C "
onclick='limpar()'></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td><input type="button" id="d7" value=" 7 "
onclick='digito("7")'></td>
<td><input type="button" id="d8" value=" 8 "
onclick='digito("8")'></td>
<td><input type="button" id="d9" value=" 9 "
onclick='digito("9")'></td>
<td><input type="button" id="div" value=" / "
onclick='operacao("/")'></td>
</tr>
<tr>
<td><input type="button" id="d4" value=" 4 "
onclick='digito("4")'></td>

59
Cláudio Luís Vieira Oliveira
<td><input type="button" id="d5" value=" 5 "
onclick='digito("5")'></td>
<td><input type="button" id="d6" value=" 6 "
onclick='digito("6")'></td>
<td><input type="button" id="mul" value=" X "
onclick='operacao("X")'></td>
</tr>
<tr>
<td><input type="button" id="d1" value=" 1 "
onclick='digito("1")'></td>
<td><input type="button" id="d2" value=" 2 "
onclick='digito("2")'></td>
<td><input type="button" id="d3" value=" 3 "
onclick='digito("3")'></td>
<td><input type="button" id="sub" value=" - "
onclick='operacao("-")'></td>
</tr>
<tr>
<td><input type="button" id="d0" value=" 0 "
onclick='digito("0")'></td>
<td><input type="button" id="sep" value=" , "
onclick='separador()'></td>
<td><input type="button" id="tot" value=" = "
onclick='total()'></td>
<td><input type="button" id="adi" value=" + "
onclick='operacao("+")'></td>
</tr>
</table>
</body>
</html>
calculadora-completa.html

Note no trecho de código-fonte a seguir que a chamada do arquivo externo será efetuada
através da própria etiqueta script através do atributo src.

</>
<script type="text/javascript" src="calculadora.js"></script>

Na sequência devemos criar o arquivo calculadora.js que irá conter as funções em

JavaScript.

{JS}
function String2Number(valor) {
valor = valor.replace(",", ".");
return(parseFloat(valor));
}

function digito(dig) {
if (res.value.length < 12) {
if (res.value != "0")

60
 Fundamentos de Programação para a Web
res.value = res.value + dig;
else
res.value = dig;
}
}

function total() {
if (op.value === "+")
res.value = parseFloat(v1.value) + parseFloat(res.value);
else if (op.value === "-")
res.value = parseFloat(v1.value) - parseFloat(res.value);
else if (op.value === "X")
res.value = parseFloat(v1.value) * parseFloat(res.value);
else if (op.value === "/") {
if (res.value !== 0)
res.value = parseFloat(v1.value) / parseFloat(res.value);
else
res.value = "Erro!";
}
}

function operacao(ope) {
v1.value = res.value;
op.value = ope;
res.value = "0";
}

function separador() {
if (res.value.indexOf(",") < 0)
res.value = res.value + ",";
}

function limpar() {
res.value = "0";
}
calculadora.js

Na Figura 37 podemos observar a aparência da página criada.

61
Cláudio Luís Vieira Oliveira

Figura 37: Exemplo completo da calculadora

62
 Fundamentos de Programação para a Web
Interação entre páginas

A linguagem JavaScript possui objetos que permitem realizar a interação entre diferentes
páginas HTML. Neste exemplo, será mostrado o código necessário para que a calculadora,
desenvolvida no exemplo anterior, preencha um campo do tipo texto existente em uma outra
página HTML.
A página principal irá conter uma função em JavaScript que irá abrir a página HTML que
contém o programa da calculadora. Esta função será chamada quando o usuário clicar no botão
calculadora, também iremos implementar o campo texto que deverá receber o valor disponível
na calculadora. Nesta página, será utilizado o método open do objeto window que permite abrir
uma nova instância do navegador, controlando parâmetros como tamanho, localização, barras
de menu entre outros.

</>
<!DOCTYPE html>
<html>
<head>
<title>Interação entre páginas</title>
<meta charset="UTF-8">
</head>
<body>
<script type="text/javascript">
window.addEventListener("message", (event) => {
valor.value = event.data;
}, false);

function abrirCalc() {
var janela= window.open('calculadora-completa.html',
'Calculadora', 'toolbar=no, \
location=no,directories=no,status=no,menubar=no, \
scrollbars=no,resizable=no,menubar=no,top=250,left=450, \
width=200,height=300');
}
</script>
<h1>Interação entre páginas</h1>
Digite um valor ou utilize a
<input type="button" onclick="abrirCalc()" value="calculadora">:
<input type="text" id="valor" value="0">
</body>
</html>
interacao.html

Por outro lado, a página da calculadora-completa.html deverá ser alterada para receber
um botão que irá transferir o resultado para a página que a chamou e, posteriormente, fechar a
janela. Por exemplo:

</>
<input type="button" id="off" value="Off"
onclick='retornar()'>

63
Cláudio Luís Vieira Oliveira
Em seguida a função retornar deverá ser acrescentada ao arquivo calculadora.js.

{JS}
function retornar() {
window.opener.postMessage(res.value, "*");
window.close();
}

O funcionamento é simples, basta carregar a página principal e ao clicar sobre o link da

calculadora, uma outra página contendo a aplicação é exibida, ao se pressionar o botão Off, o
conteúdo que está no visor é transferido para o campo texto da página anterior e a janela que
contém a calculadora é fechada, conforme podemos notar na Figura 38.

Figura 38: Interação entre as páginas

Requisição de dados

Os valores obtidos através de formulários podem ser enviados para outra página. Neste
caso, devemos usar a propriedade location do objeto window para criar o caminho (URL) da
página que deverá ser carregada quando o usuário pressionar o botão Enviar. Juntamente com
endereço da página, devemos acrescentar os parâmetros que serão enviados, assim como os
respectivos valores.

</>
<!DOCTYPE html>
<html>

64
 Fundamentos de Programação para a Web
<head>
<title>Envio de Dados</title>
<meta charset="UTF-8">
<script type="text/javascript">
function gerarURL() {
window.location ="receber.html?nome=" + nome.value + "&email=" +
email.value;
}
</script>
</head>
<body>
<h1>Envio de Dados</h1>
Nome: <input type="text" id="nome" size="20"><br>
Email: <input type="text" id="email" size="20"><br>
<input type="button" value="Enviar" onclick="gerarURL();">
</body>
</html>
enviar.html

A página que irá receber os dados deverá usar a propriedade window.location.href para
obter a cadeia de caracteres (string) que contém o endereço (URL) da página e todos os valores
que foram enviados. Em seguida, torna-se necessário realizar a manipulação da cadeia de
caracteres para a fim de separar e obter os valores desejados de cada um dos parâmetros.

</>
<!DOCTYPE html>
<html>
<head>
<title>Requisição de Dados</title>
<meta charset="UTF-8">
<script type="text/javascript">
function obterValor(chave) {
url = window.location.href;
chave = chave.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + chave + '(=([^&#]*)|&|#|$)');
var res = regex.exec(url);
if (!res)
return null;
if (!res[2])
return '';
return decodeURIComponent(res[2].replace(/\+/g, ' '));
}

function lerFormulario() {
var nome = obterValor("nome");
var email = obterValor("email");
var texto = "Nome: <b>" + nome + "</b><br>" +
"E-mail: <b>" + email + "</b><br>";
resultado.innerHTML = texto;
}
</script>
65
Cláudio Luís Vieira Oliveira
</head>
<body onload="lerFormulario()">
<h1>Requisição de Dados</h1>
<div id="resultado"></div>
</body>
</html>
receber.html

A Figura 39 mostra o resultado do processamento dos parâmetros que foram recebidos

pela página.

Figura 39: Dados recebidos

Uma ótima referência para ampliar os conhecimentos em JavaScript é a

Mozilla Developer Network, acesse
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript
Dica!

Exercícios

1) Desenvolver uma página Web que receba quatro números reais digitados pelo usuário e,
em seguida, utilizando JavaScript, calcule e exiba a valor da média desses números.
2) Desenvolver uma página Web para uma determinada loja que precisa calcular o preço de
venda de um produto. O cálculo deverá ser efetuado através da multiplicação do preço
unitário pela quantidade vendida e, posteriormente, subtrair o valor do desconto.
Considerar todas as variáveis do tipo de dado real, que serão digitadas pelo usuário e um
arquivo externo de JavaScript contendo as funções necessárias para resolver o problema.
3) A Lei de Ohm define que a resistência (R) de um condutor é obtida através da divisão da
tensão aplicada (V) dividida pela intensidade de corrente elétrica (A). Desta forma, a partir

66
 Fundamentos de Programação para a Web
de uma tensão e corrente, digitadas pelo usuário em um formulário HTML, utilize o
JavaScript para calcular e mostrar o valor da resistência na mesma página Web que
contém o formulário.
4) Adotando um arquivo externo de JavaScript contendo as funções necessárias para
resolver o problema, elaborar uma página Web que a partir de um valor digitado pelo
usuário e o respectivo prefixo mostrar a representação do valor nos demais prefixos, por
exemplo:

Digite o valor: 10.000

Digite o prefixo: M
Converter
Resultado:
10.000.000 k
10 G
0,01 T

Adotar, como referência a tabela mostrada abaixo:

Prefixo Valor (Decimal)

k (kilo) 103
(1000)
M (mega) 106
(1,000,000)
G (Giga) 109
(1,000,000,000)
T (Tera) 1012
(1,000,000,000,000)

5) Considerando que a aprovação de um aluno em determinada disciplina requer uma média

final maior ou igual a 6,0 (seis). Elaborar uma página Web que receba duas notas, realize
o cálculo da média, exiba o valor calculado e uma imagem indicando se o aluno está
aprovado ou reprovado.
6) A partir dos lados de um retângulo ou quadrado, digitados pelo usuário, elaborar uma
página Web que calcule e exiba o valor da área da figura e informe se é um retângulo ou
um quadrado, exibindo uma imagem que represente a respectiva figura geométrica.
Lembrando que a área é obtida pela multiplicação da base (L) pela altura (A).
7) Considerando um número inteiro digitado pelo usuário, calcular e exibir o valor da sua
fatorial em uma página Web. Por exemplo, se o usuário digitar 4, temos que a fatorial é
4 x 3 x 2 x 1, isto é, 24.
8) Considerando três números inteiros digitados pelo usuário em uma página web,
determinar e exibir o maior número.
9) Realizar o desenvolvimento de uma página HTML que irá receber as informações através
de um formulário e realizar a validação dos dados digitados, considerando que uma
seguradora de veículos precisa calcular o valor da apólice com base nas seguintes
informações: nome, sexo e ano de nascimento do segurado, marca, modelo, ano de
fabricação, valor do veículo e porcentagem do bônus. As seguintes validações deverão ser
realizadas no formulário utilizando, para isso, um arquivo JavaScript externo:
a) O campo sexo deverá aceitar apenas F (Feminino) ou M (Masculino).
b) O campo ano de nascimento deve aceitar um valor entre 2001 e 1901.

67
Cláudio Luís Vieira Oliveira
c) O campo ano de fabricação deverá ser um valor inteiro positivo.
d) O campo valor do veículo deve ser um número real positivo.
e) O campo porcentagem do bônus deverá ser um número real entre 0 e 25.

10) Adotando como referência o formulário desenvolvido no exercício anterior, crie uma
função JavaScript para determinar o valor da apólice, a partir dos seguintes critérios para
cálculo:
a) Para veículos 2010 ou mais recentes o valor da apólice é de 1,25% do valor do
veículo, veículos entre 2009 e 2000 o valor da apólice é de 1,75% do valor do
veículo, veículos entre 1999 e 1980 o valor da apólice é de 2,00% e para os demais
anos de fabricação devemos utilizar 2,50% como base de cálculo.
b) Caso o segurado seja do sexo feminino aplicar um desconto 10% sobre o valor
calculado no item a, caso contrário, acrescer 5% ao valor calculado no item a.
c) Se o segurado possuir menos de 30 anos ou mais de 60 anos, acrescentar 20% ao
valor da apólice após os cálculos realizados no item a e no item b.
d) A partir do valor apurado nos itens a, b e c aplicar o desconto com base na
porcentagem de bônus informada pelo usuário.

68
 Fundamentos de Programação para a Web

jQuery
Uma biblioteca de funções JavaScript muito utilizada e, provavelmente, a mais popular é
a jQuery. Foi criada com o objetivo de simplificar a seleção de elementos, a criação de efeitos
visuais e a manipulação de eventos. É uma ferramente bastante versátil, possibilitando inclusive
a criação de plugins.
Os arquivos necessários para o funcionamento do jQuery estão disponíveis em
jquery.com e podem ser instalados no seu servidor. Uma página que irá usar o Bootstrap deverá
carregar os seguintes arquivos:

</>
<!—jQuery: Carregar através do servidor local ou usar CDN -->
<!-- Versão minimizada do jQuery -->
<script src="js/jquery.min.js"></script>

Os arquivos também estão disponíveis através de CDN (Content Delivery Network), desta
forma, eles não serão instalados no seu servidor e serão acessados diretamente através da
conexão com a Internet.

Olá jQuery

O exemplo a seguir irá mostrar alguns conceitos básicos do jQuery. Em primeiro lugar
observe o uso do $() que é utilizado para localizarmos um elemento dentro do HTML. Por
exemplo, para idenficarmos a caixa de texto que possui o id definido como nome, devemos usar
$("#nome") e para obter o que usuário digitou na caixa de texto, usamos o método val, ou seja,
$("#nome").val().

</>
<html>
<head>
<title>Olá jQuery</title>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.4.1.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#aqui").click(function() {
alert ("Olá " + $("#nome").val());
});
});
</script>
</head>
<body>
<h1>Olá jQuery</h1>
Qual o seu nome?
<input type="text" id="nome" /><br />
<input type="button" id="aqui" value="Clique aqui!" />
</body>

69
Cláudio Luís Vieira Oliveira
</html>
ola-jquery.html

Note, neste mesmo exemplo, o uso do evento $(document).ready, ele é gerado após
todos os elementos HTML da página serem carregados. Desta forma, todas as demais funções do
jQuery devem ser executadas a partir dele. Por isso, que o evento associado ao clique do botão
“aqui” está inserido dentro de $(document).ready. Na Figura 40 temos um exemplo de página
após o usuário preencher o campo nome e pressionar o botão “Clique aqui!”.

Figura 40: Olá jQuery

AJAX (Asynchronous Javascript and XML)

Podemos entender que AJAX é uma forma de realizar uma requisição ao servidor onde
este apenas retornará dados e não uma página HTML completa com marcadores e conteúdo.
Desta forma, é possível carregarmos apenas uma parte de uma página, aumentando o
desempenho e também possibilitando uma maior interação. O jQuery facilita a implementação
de AJAX, oferecendo um método especifico para isso, conforme podemos identificar no código-
fonte a seguir.

</>
<!DOCTYPE html>
<html>
<head>
<title>A ligeira raposa</title>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.4.1.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#mais").click(function(){
$.ajax({url: "conteudo.txt", success: function(resultado){

70
 Fundamentos de Programação para a Web
$("#info").html(resultado);
}});
});
});
</script>
</head>
<body>
<h1>A ligeira raposa</h1>
A ligeira raposa marrom salta sobre o cão preguiçoso. <input
type="button" id="mais" value="Mais informações" />
<div id="info"></div>
</body>
</html>
ajax-jquery.html

O arquivo conteudo.txt, mostrado a seguir, contém o texto que será acrescentado à

página HTML quando o usuário clicar no botão “Mais informações”.

</>
A ligeira raposa marrom salta sobre o cão
preguiçoso. A ligeira raposa marrom salta
sobre o cão preguiçoso. A ligeira raposa
marrom salta sobre o cão preguiçoso. A
ligeira raposa marrom salta sobre o cão
preguiçoso. A ligeira raposa marrom salta
sobre o cão preguiçoso. A ligeira raposa
marrom salta sobre o cão preguiçoso.
conteudo.txt

Na Figura 41 podemos observar a página carregada com o conteúdo inicial, definido no

HTML.

Figura 41: Página com o conteúdo inicial

Em seguida, na Figura 42, temos a página após a requisição AJAX que é responsável por
carregar o conteúdo do arquivo texto na div identificada com o id “info”.

71
Cláudio Luís Vieira Oliveira

Figura 42: Página após a requisição AJAX

Exercícios

1) Desenvolver uma página Web, com JavaScript e jQuery, que receba quatro números reais
digitados pelo usuário e, em seguida, calcule e exiba a valor da média dos números
digitados.
2) Criar uma página Web, com JavaScript e jQuery, para uma determinada loja que precisa
calcular o preço de venda de um produto. O cálculo deverá ser efetuado através da
multiplicação do preço unitário pela quantidade vendida e, posteriormente, subtrair o
valor do desconto. Considerar todas as variáveis do tipo de dado real, que serão digitadas
pelo usuário.
3) Desenvolver uma página HTML, com conteúdo definido a seu critério, que apresente o
título formatado com a etiqueta <h1>, dois subtítulos formatados com a etiqueta <h2>.
O conteúdo associado ao primeiro subtítulo deverá ser apresentado na cor azul, fonte
tamanho 12px, alinhado à direita. O conteúdo relacionado ao segundo subtítulo deverá
estar alinhado à esquerda. Utilizar jQuery e AJAX para que o conteúdo associado a cada
subtítulo possa ser mostrado ou escondido quando se clicar no subtítulo, este conteúdo
deverá ser obtido de dois arquivos texto, relacionados aos respectivos subtítulos.
4) Colocar em uma página HTML um botão com o texto “Obter Data e Hora Atuais”. Este
botão, quando pressionado, deverá realizar uma requisição AJAX à um servidor da
Internet, por exemplo, http://worldclockapi.com/ e exibir em uma <DIV> a data e hora
atuais.
5) Alterar o exercício anterior de modo que seja possível exibir na <DIV>, além da data e
hora atuais, uma imagem que deverá representar o dia ou a noite, conforme o horário.

72
 Fundamentos de Programação para a Web

JavaScript Object Notation (JSON)

JavaScript Object Notation (JSON) ou traduzindo Notação de Objetos JavaScript é uma
notação leve para representação e troca de dados. É de fácil compreensão, leitura e escrita.
Adota formato texto, é auto descritivo e completamente independente de linguagem.
Uma especificação em JSON está constituída em duas estruturas. A primeira delas, é
chamada de objeto e consiste em uma coleção de pares (nome e valor) o que pode caracterizar
um objeto, registro, dicionário ou arrays associativos. Um item da coleção deve ser delimitado
por chaves. Cada nome é seguido pelo caractere ':' (dois pontos) e, em seguida, o valor deve ser
especificado. Vários pares (nome/valor) devem ser separados por vírgula, conforme ilustra o
próximo exemplo.

{JSON}
{ codigo: 10, descricao: "Televisor", preco: 1990.00 }

Desta forma, analisando a estrutura, podemos entender que estamos especificando um

par que apresenta o nome 'codigo' que possui o valor 10. Depois temos o par cujo nome é
'descricao' e que tem o valor "Televisor" e o par chamado 'preco' que tem o valor 1990.00.

Manipulação em JavaScript

Utilizar JSON com JavaScript é muito simples, basta referenciar o objeto e a respectiva
chave, conforme podemos ver no programa a seguir.

{Node.js}
<!DOCTYPE html>
<html>
<head>
<title>Produtos</title>
<meta charset="UTF-8">
<script>
function carregar() {
var produto = {
codigo: 10,
descricao: "Televisor",
preco: 1990.00
};
res.innerHTML = "Dados do produto: " +
"<br>Código: " + produto.codigo +
"<br>Descrição: " + produto.descricao +
"<br>Preço: " + produto.preco;
}
</script>
</head>
<body onload="carregar()">
<h2>Produtos</h2>
<div id="res"></div>
</body>
</html>
json-basico.js
73
Cláudio Luís Vieira Oliveira
A notação JSON permite obter informações de maneira dinâmica através do uso de
funções. Note no exemplo a seguir que o valor da chave date será obtido através da função hoje()
que, por sua vez, irá possibilitar obter a data atual.

{Node.js}
<!DOCTYPE html>
<html>
<head>
<title>Produtos</title>
<meta charset="UTF-8">
<script>
function hoje() {
var agora = new Date();
return (agora.getDate() + "/" +
(agora.getMonth() + 1) + "/" +
agora.getFullYear());
}

function carregar() {
var produto = {
codigo: 10,
descricao: "Televisor",
preco: 1990.00,
data: function () { return hoje(); }
};
res.innerHTML = "Dados do produto: " +
"<br>Código: " + produto.codigo +
"<br>Descrição: " + produto.descricao +
"<br>Preço: " + produto.preco +
"<br>Data do cadastro: " + produto.data();
}
</script>
</head>
<body onload="carregar()">
<h2>Produtos</h2>
<div id="res"></div>
</body>
</html>
json-funcao.js

A segunda estrutura do JSON é chamada de array e consiste em uma lista ordenada de

valores que pode caracterizar array, vetor, lista, sequência ou mesmo uma coleção de valores
ordenados. Um array é delimitado por colchetes onde os valores são separados por vírgula,
conforme podemos observar no exemplo a seguir.

{JSON}
[ 10, 20, 30, 40, 50 ]

Um array pode conter objetos, desta maneira, podemos realizar a seguinte notação:

74
 Fundamentos de Programação para a Web
{JSON}
[ { codigo: 11, descricao: "Geladeira", preco: 2990.00 }, { codigo:
12, descricao: "Fogao", preco: 840.00 }, { codigo: 13, descricao:
"Computador", preco: 3500.00 } ]

Manipular objetos e arrays JSON em JavaScript é uma tarefa bastante simples. Neste
próximo programa vamos mostrar como percorrer o array de objetos armazenado na variável
produtos.

{Node.js}
<!DOCTYPE html>
<html>
<head>
<title>Produtos</title>
<meta charset="UTF-8">
<script>
function carregar() {
var produtos = [
{ codigo: 11, descricao: "Geladeira", preco: 2990.00 },
{ codigo: 12, descricao: "Fogao", preco: 840.00 },
{ codigo: 13, descricao: "Computador", preco: 3500.00 }
];
res.innerHTML = "Produtos cadastrados:";
for (var i = 0; i < produtos.length; i++) {
res.innerHTML += "<br><br>Código: " + produtos[i].codigo +
"<br>Descrição: " + produtos[i].descricao +
"<br>Preço: " + produtos[i].preco;
}
}
</script>
</head>
<body onload="carregar()">
<h2>Produtos</h2>
<div id="res"></div>
</body>
</html>
json-colecao.js

Aprofundando um pouco mais na interação entre JSON e JavaScript, vamos implementar

um exemplo de aplicação para a Internet que mostrará como podemos inserir e remover items
à um array e listar o seu conteúdo, considerando um conjunto de produtos que apresentam,
como características, código e descrição e preço. É importante observar que, neste exemplo,
iremos processar o JavaScript no lado cliente (navegado), sem utilizar o Node.js.
A página HTML, mostrada a seguir, irá possuir três caixas de texto para que o usuário
possa digitar as características do produto e um botão para inserção. A div identificada como
“tabela” irá, posteriormente, mostrar o conjunto de dados que estarão no array JSON.

75
Cláudio Luís Vieira Oliveira
</>
<html>
<head>
<title>Produtos</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<script type="text/javascript" src="json-produto.js"></script>
</head>
<body>
<h1>Produtos</h1>
Código: <input type="text" id="cod" size="5" />
Descrição: <input type="text" id="desc" size="20" />
Preço: <input type="text" id="prec" size="10"/>
<input type="submit" value="Inserir" onclick="inserir()" /><br>
<h2>Lista de Produtos</h2>
<div id="tabela"></div>
</body>
</html>
json-produto.html

As funções JavaScript serão implementadas em um arquivo a parte, cujo conteúdo é

mostrado a seguir. A variável produtos irá conter o array. Observe na função inserir, que o
método push irá adicionar um objeto ao array. Por outro lado, o método splice será responsável
pela remoção de objetos do array produtos. Este método deve receber, como parâmetros, a
posição do item no array e quantos itens devem ser removidos que, neste exemplo, deixamos
fixo o valor 1. Ou seja, apenas será apagado o item que está na posição que foi passada como
parâmetro.

{JS}
var produtos = [];

function inserir() {
produtos.push({codigo: parseInt(cod.value), descricao: desc.value,
preco: parseFloat(prec.value)});
mostrar();
}

function remover(i) {
produtos.splice(i, 1);
mostrar();
}

function mostrar() {
console.log(JSON.stringify(produtos));
var conteudo = "<table cellspacing='0' cellpadding='4' border='1'>"
+
"<tr><td>Código</td>" +
"<td>Descrição</td>" +
"<td>Preço</td></tr>";

76
 Fundamentos de Programação para a Web
for (var i in produtos) {
conteudo += "<tr><td><button onclick='remover(" +
i + ")'><image src='deletar.png' height='12px'></button> " +
produtos[i].codigo +
"</td><td> " + produtos[i].descricao +
"</td><td align='right'>" + produtos[i].preco.toFixed(2) +
"</td></tr>";
}
conteudo += "</table>";
tabela.innerHTML = conteudo;
}
json-produto.js

A função mostrar irá montar uma tabela para exibir os dados que estão armazenados no
array produtos. Esta função é chamada sempre que ocorre uma inserção ou remoção no array,
de modo que as informações exibidas na página web permaneçam sempre atualizadas. Na Figura
43 temos um exemplo da página criada.

Figura 43: Dados do array JSON

Aprenda mais sobre JSON acessando https://www.json.org/json-pt.html

Dica!

Exercícios

1) Considerando um aluno com nome, ra, duas notas e situação acadêmica (aprovado ou
reprovado), elaborar uma representação JSON considerando uma sala de aula com 5
alunos.
2) A partir da representação JSON desenvolvida no exercício anterior, elaborar um programa
em modo console de texto que mostre o nome dos alunos reprovados.

77
Cláudio Luís Vieira Oliveira
3) Considerando o estoque de uma loja, elaborar a representação JSON para um conjunto
de produtos, onde cada um possui as seguintes características: código, descrição, preço
unitário, quantidade e fornecedor.
4) Considerando a representação JSON desenvolvida no exercício anterior, elaborar uma
página web com JavaScript no lado cliente que mostre apenas os produtos que
apresentem estoque inferior a 10 unidades.

78
 Fundamentos de Programação para a Web

Bootstrap
A adoção de frameworks facilita o desenvolvimento de aplicações, pois implementa as
funções mais comumente utilizadas em determinada parte do projeto, por exemplo, acesso a
banco de dados ou interface com o usuário entre outras.
O Bootstrap é um framework HTML, CSS e JavaScript para desenvolvimento de interfaces
responsivas para aplicações Internet e que, desta forma, irão funcionar adequadamente tanto
em computadores como em dispositivos móveis.
Os arquivos necessários para o funcionamento do Bootstrap estão disponíveis em
getbootstrap.com e podem ser instalados no seu servidor. Uma página que irá usar o Bootstrap
deverá carregar os seguintes arquivos:

</>
<!—Bootstrap: Carregar através do servidor local ou usar CDN -->
<!-- Versão minimizada do CSS -->
<link rel="stylesheet"
href="css/bootstrap.min.css">

<!-- Tema CSS opcional -->

<link rel="stylesheet"
href="css/bootstrap-theme.min.css">

<!-- Versão minimizada do JQuery -->

<script src="js/jquery.min.js"></script>

<!-- Versão minimizada do Boostrap -->

<script src="js/bootstrap.min.js"></script>

Os arquivos também estão disponíveis através de CDN (Content Delivery Network), desta
forma, eles não serão instalados no seu servidor e serão acessados diretamente através da
conexão com a Internet.

Olá Bootstrap

A estrutura básica de uma página com Bootstrap, mostrada no código-fonte a seguir,

consiste em realizar algumas definições e carregar as Folhas de Estilo (CSS) e as bibliotecas em
JavaScript necessárias.

</>
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>Olá Bootstrap</title>

79
Cláudio Luís Vieira Oliveira
<!—Bootstrap: Carregar através do servidor local ou usar CDN -->
<!-- Versão minimizada do CSS -->
<link rel="stylesheet"
href="css/bootstrap.min.css">

<!-- Tema CSS opcional -->

<link rel="stylesheet"
href="css/bootstrap-theme.min.css">

<!-- Versão minimizada do JQuery -->

<script src="js/jquery.min.js"></script>

<!-- Versão minimizada do Boostrap -->

<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>Olá Pessoal!</h1>
</body>
</html>
ola-bootstrap.html

Analisando a página que foi criada, observe o uso da etiqueta meta para definir a
compatibilidade do Bootstrap com o Internet Explorer:

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

A etiqueta meta seguinte define a viewport, ou seja, a área para a exibição da página.
Neste caso, a propriedade device-width define que toda a área disponível deverá ser usada tanto
para smartphones, tablets ou computadores. Esta etiqueta é fundamental para que a página se
comporte de maneira responsiva.

</>
<meta name="viewport" content="width=device-width, initial-scale=1">

Note que, na sequência, são carregadas as folhas de estilo “bootstrap.min.css” e

“bootstrap-theme.min.css”. Também devem ser carregadas as bibliotecas JavaScript JQuery
(jquery.min.js) e Bootstrap (bootstrap.min.js).
Na Figura 44 podemos observar a página que foi criada após a mesma ser carregada no
navegador.

80
 Fundamentos de Programação para a Web

Figura 44: “Olá Bootstrap”

Design responsivo

O design responsivo é uma técnica de design para a Internet que procura fazer com que
as páginas renderizarem bem em uma variedade de dispositivos com tamanhas de janela ou tela
bastante distintos.

</>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Página Responsiva</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.mi
n.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.
js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>Página responsiva usando Bootstrap</h1>
<p>Redimensione a janela para observar o ajuste da página em
áreas com diferentes dimensões</p>
</div>

81
Cláudio Luís Vieira Oliveira

<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Coluna 1</h3>
<p>A ligeira raposa marrom salta sobre o cão preguiçoso. A
ligeira raposa marrom salta sobre o cão preguiçoso. A ligeira raposa
marrom salta sobre o cão preguiçoso.</p>
<p>A ligeira raposa marrom salta sobre o cão preguiçoso. A
ligeira raposa marrom salta sobre o cão preguiçoso. A ligeira raposa
marrom salta sobre o cão preguiçoso.</p>
</div>
<div class="col-sm-4">
<h3>Coluna 2</h3>
<p>A ligeira raposa marrom salta sobre o cão preguiçoso. A
ligeira raposa marrom salta sobre o cão preguiçoso. A ligeira raposa
marrom salta sobre o cão preguiçoso.</p>
<p>A ligeira raposa marrom salta sobre o cão preguiçoso. A
ligeira raposa marrom salta sobre o cão preguiçoso. A ligeira raposa
marrom salta sobre o cão preguiçoso.</p>
</div>
<div class="col-sm-4">
<h3>Coluna 3</h3>
<p>A ligeira raposa marrom salta sobre o cão preguiçoso. A
ligeira raposa marrom salta sobre o cão preguiçoso. A ligeira raposa
marrom salta sobre o cão preguiçoso.</p>
<p>A ligeira raposa marrom salta sobre o cão preguiçoso. A
ligeira raposa marrom salta sobre o cão preguiçoso. A ligeira raposa
marrom salta sobre o cão preguiçoso.</p>
</div>
</div>
</div>
</body>
</html>
responsivo.html

Na Figura 45 podemos observar a mesma página sendo exibida em áreas com diferentes
dimensões.

Figura 45: Página responsiva

82
 Fundamentos de Programação para a Web
Formulários com Bootstrap

Vamos modificar a página, criada anteriormente, que realizava a validação dos campos
do formulário e cálculo do preço total de produto, só que agora usando o framework Bootstrap.
Também vamos retirar o código JavaScript da página HTML e colocá-lo em um arquivo a parte.

</>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>Produto</title>

<!-- Bootstrap -->

<!-- Versão minimizada do CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap
.min.css">

<!-- Versão minimizada do JQuery -->

<script src="https://code.jquery.com/jquery-
3.3.1.slim.min.js"></script>

<!-- Versão minimizada do Popper -->

<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/poppe
r.min.js"></script>

<!-- Versão minimizada do Boostrap -->

<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.m
in.js"></script>
</head>
<body>
<script src="produto.js" type="text/javascript"></script>
<div class="container">
<h1>Produto</h1>
<div class="form-group">
Descrição:
<input type="text" id="desc" class="form-control"
maxlength="20" />
</div>
<div class="form-group">
Quantidade:
<input type="text" id="qtd" class="form-control" maxlength="3"
/>
</div>
<div class="form-group">

83
Cláudio Luís Vieira Oliveira
Preço Unitário:
<input type="text" id="unit" class="form-control"
maxlength="10" />
</div>
<div class="form-group">
<input type="submit" value="Calcular" class="btn btn-primary"
onclick="calcular()"/>
</div>
<div class="form-group">
Preço Total:
<input type="text" id="total" class="form-control" readonly />
</div>

<!-- Modal -->

<div class="modal" id="alerta">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Atenção</h4>
<button type="button" class="close" data-
dismiss="modal">&times;</button>
</div>
<div id="mensagem" class="modal-body">
Preencha o campo.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-
dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
produto-bootstrap.html

Note que vamos explorar os recursos do Bootstrap utilizando a classe form-group para
deixar o formulário responsivo e a classe modal para criar uma caixa de mensagem que irá
substituir a função alert do JavaScript.
Na sequência temos o arquivo que irá implementar as funções JavaScript.

{JS}
function validarDescricao() {
if (desc.value.trim() === "") {
desc.style.background = "yellow";
mensagem.innerHTML = "Preencha a descrição do produto!";
$('#alerta').modal('show');
return false;
}
else {

84
 Fundamentos de Programação para a Web
desc.style.background = "white";
return true;
}
}

function validarQuantidade() {
var erro = false;
if (qtd.value.trim() === "") {
erro = true;
}
else {
if (isNaN(qtd.value) === true) {
erro = true;
}
else {
var nQtd = parseInt(qtd.value);
if (nQtd < 1 || nQtd > 999) {
erro = true;
}
}
}

if (erro === true) {

qtd.style.background = "yellow";
mensagem.innerHTML = "A quantidade deve ser um número entre 1 e
999!";
$('#alerta').modal('show');
}
else {
qtd.style.background = "white";
}
return (!erro);
}

function validarPreco() {
var erro = false;
if (unit.value.trim() === "") {
erro = true;
}
else {
if (isNaN(unit.value) === true) {
erro = true;
}
else {
var nUnit = parseFloat(unit.value);
if (nUnit <= 0.0) {
erro = true;
}
else {
unit.value = nUnit.toFixed(2);
}
}
85
Cláudio Luís Vieira Oliveira
}

if (erro === true) {

unit.style.background = "yellow";
mensagem.innerHTML = "O preço unitário deve ser um número maior
que zero!";
$('#alerta').modal('show');
}
else {
unit.style.background = "white";
}
return (!erro);
}

function calcular() {
if (validarDescricao() && validarQuantidade() && validarPreco()) {
var nTotal = parseFloat(unit.value) * parseInt(qtd.value);
total.value = nTotal.toFixed(2);
}
}
produto.js

Na Figura 46 temos a página remodelada com o uso do Bootstrap. Observe a caixa de

mensagem sendo exibida, indicando que o campo quantidade deve ser corretamente
preenchido. Além do design responsivo é importante notar que a visualização da página fica bem
mais fluida e profissional.

Figura 46: Caixa de diálogo

86
 Fundamentos de Programação para a Web
Exercícios

1) Desenvolver uma página Web, com JavaScript, jQuery e Bootstrap, que receba quatro
números reais digitados pelo usuário e, em seguida, verifique se o usuário apenas digitou
número, calcule e exiba a valor da média dos números digitados.
2) Criar uma página Web, com JavaScript, jQuery e Bootstrap, para uma determinada loja
que precisa calcular o preço de venda de um produto. O cálculo deverá ser efetuado
através da multiplicação do preço unitário pela quantidade vendida e, posteriormente,
subtrair o valor do desconto. Verificar se todos os campos do formulário foram
preenchidos e considerar todas as variáveis do tipo de dado real.
3) Considerar o desenvolvimento de uma Página HTML com BootStrap e jQuery que irá
receber as informações através de um formulário, realizar a validação dos dados digitados,
considerando que uma seguradora de veículos precisa calcular o valor da apólice com
base nas seguintes informações: nome, sexo e ano de nascimento do segurado, marca,
modelo, ano de fabricação, valor do veículo e porcentagem do bônus. As seguintes
validações deverão ser realizadas no formulário utilizando, para isso, um arquivo
JavaScript externo:
a) O campo sexo deverá aceitar apenas F (Feminino) ou M (Masculino).
b) O campo ano de nascimento deve aceitar um valor entre 2001 e 1901.
c) O campo ano de fabricação deverá ser um valor inteiro positivo.
d) O campo valor do veículo deve ser um número real positivo.
e) O campo porcentagem do bônus deverá ser um número real entre 0 e 25.
4) Adotando como referência o formulário desenvolvido no exercício anterior, crie uma
função que use jQuery para determinar o valor da apólice, a partir dos seguintes critérios
para cálculo:
a) Para veículos 2010 ou mais recentes o valor da apólice é de 1,25% do valor do
veículo, veículos entre 2009 e 2000 o valor da apólice é de 1,75% do valor do
veículo, veículos entre 1999 e 1980 o valor da apólice é de 2,00% e para os demais
anos de fabricação devemos utilizar 2,50% como base de cálculo.
b) Caso o segurado seja do sexo feminino aplicar um desconto 10% sobre o valor
calculado no item a, caso contrário, acrescer 5% ao valor calculado no item a.
c) Se o segurado possuir menos de 30 anos ou mais de 60 anos, acrescentar 20% ao
valor da apólice após os cálculos realizados no item a e no item b.
d) A partir do valor apurado nos itens a, b e c aplicar o desconto com base na
porcentagem de bônus informada pelo usuário.
5) Colocar em uma página HTML contendo jQuery e Bootstrap um botão com o texto “Obter
Data e Hora Atuais”. Este botão, quando pressionado, deverá realizar uma requisição
AJAX e exibir na página a data e hora atuais obtidas de um servidor da Internet, por
exemplo, http://worldclockapi.com/.

87