Você está na página 1de 120

Desenvolvimento para Internet

Andréa Rodrigues
Graduada em ciências da computação; mestrado em sistemas
distribuídos; doutorado em educação pela UFRN. Atualmente, trabalha
no IFPR, onde atua como coordenadora de inclusão; trabalha no
projeto de educação a distância e é professora de cursos técnicos,
ministrando disciplinas na área de programação e desenvolvimento
web. Sua área de pesquisa é Acessibilidade e Usabilidade da
Internet, pesquisando principalmente a interatividade de alunos com
necessidades educativas especiais.
Direção Geral Jean Franco Sagrillo
Direção Editorial Jeanine Grivot
Edição Anna Carolina Mendes Curto
Gerência de Editoração Marcelene Tomeleri
Revisão Jeferson Turbay Braga
Projeto Gráfico e Capa Adriana de Oliveira
Editoração Ana Paula Vialich

Rodrigues, Andréa
Desenvolvimento para Internet / Andréa Rodrigues. – Curitiba, PR: Editora LT,
2010.

Bibliografia
ISBN.: 978-85-63687-01-2

1. Ciência da computação 2. Informação – Sistema de armazenagem


e recuperação 3. Informática I. Título

CDD: 004
10-00981
Índices para catálogo sistemático:
1. Informática: Ciência da computação 004

Telas padrão Microsoft reproduzida com permissão da Microsoft Corporation.

2010

Todos os direitos reservados pela Editora do Livro Técnico


Edifício Comercial Sobral Pinto
Avenida Cândido de Abreu 469, 2º andar, conjs. nºs 203-205
Centro Cívico – CEP: 80530-000
Tel.: 41 3027-5952 / Fax: 41 3076-8783
www.editoralt.com.br
Curitiba – PR
Em conformidade com o Catálogo Nacional de
Cursos Técnicos este livro é indicado, entre outros, para os
seguintes cursos:
• Técnico em Informática
• Técnico em Informática para Internet
• Técnico em Manutenção e Suporte em Informática
• Técnico em Redes de Computadores.
Apresentação

A Internet já faz parte do nosso cotidiano. Nela, consultamos a


programação de cinema, realizamos compras, movimentamos nossa
conta bancária, enviamos e-mails, trabalhamos, nos divertimos e
estudamos.
No entanto, até agora realizávamos estas ações apenas como
usuários. Com o estudo deste livro, vamos aprender como desenvolver
nossas próprias páginas, tanto para uso pessoal, quanto, principalmente,
para nos tornarmos profissionais no desenvolvimento de páginas e sites
na Internet.
O desenvolvimento que possibilita o uso dos recursos da Internet,
em uma primeira instância, pode ser realizado por qualquer pessoa.
Os recursos que iremos apresentar são simples. Com um pouco de
dedicação, ao final do livro, você poderá ter um belíssimo site, pois
aprenderá algumas tecnologias básicas utilizadas no desenvolvimento
de páginas da Internet.
Para você que é aluno ou um profissional de informática e precisa
aprender a desenvolver suas próprias páginas, esse é um primeiro
e importante passo. Podemos criar páginas envolvendo diversas
tecnologias, algumas consolidadas e outras emergentes, no entanto a
base obtida com este livro será fundamental para que futuramente você
possa trabalhar com recursos mais sofisticados e complexos.
Este livro também é voltado para aqueles que querem conhecer o
assunto desenvolvimento de sites para uso pessoal ou desejam iniciar
em uma promissora profissão: a de desenvolvimento de sistemas
computacionais que utilizem a tecnologia da Internet. O mercado
de trabalho é amplo e promissor para profissionais que possuem o
conhecimento necessário para a implementação de soluções que operem
no ambiente da Internet. Tal fato precisa levar em conta o usuário e as
diversas tecnologias de visualização, além da necessidade de adicionar
interatividade às páginas web, usando a linguagem JavaScript.
O livro tem duas partes. Na primeira, é apresentada a linguagem
HTML e uma introdução ao estilo Cascata, que consistem na base do
desenvolvimento para a Internet e são importantes em todas as fases de
desenvolvimento dos sites. Já na segunda parte, apresentamos ao leitor a
linguagem aplicações web, que de fato, tem se tornado um padrão para
novos desenvolvimentos de sistemas corporativos e pessoais.
A linguagem de marcação (Hypertext Markup HTML), é funda-
mental para apresentação das aplicações nos browsers. O uso de CSS
(Cascading Style Sheets) torna o projeto e manutenção de páginas mais
simples e elegantes. Por sua vez, o uso do JavaScript permite criar páginas
dinâmicas e implementar regras junto ao código HTML.
O objetivo principal desta obra é abordar os conceitos e comandos
necessários para o desenvolvimento de páginas de forma simples e em
uma linguagem acessível. O material a ser apresentado neste livro pode
ser utilizado também na disciplina de Programação para a Internet I dos
cursos de Informática, ou em cursos livres nos quais o objetivo seja ensinar
os primeiros passos no desenvolvimento de ações para a Internet, por meio
de lições curtas.
SUMÁRIO
CAPÍTULO 1 – HTML 9
História da Internet ............................................................................................... 9
Atividades................................................................................................................ 10
Conceitos Básicos.................................................................................................. 11
Atividades................................................................................................................ 12
O Que é HTML......................................................................................................... 12
Atividades................................................................................................................ 14
Escrevendo sua Primeira Página . ........................................................................ 14
Atividades................................................................................................................ 16
Atributos ................................................................................................................. 16
Atividades................................................................................................................ 18
Conhecendo Mais Tags.......................................................................................... 19
Atividades................................................................................................................ 21
Atributos do Corpo da Página................................................................................ 21
Atividades................................................................................................................ 24

CAPÍTULO 2 – Listas 25
Listas Não Ordenadas . ......................................................................................... 25
Atividades................................................................................................................ 27
Listas Ordenadas . ................................................................................................. 28
Atividades................................................................................................................ 30
Links........................................................................................................................ 31
Atividades................................................................................................................ 32

CAPÍTULO 3 – Formulários 33
Formulários Parte I ................................................................................................ 33
Atividade.................................................................................................................. 35
Formulários Parte II ............................................................................................... 35
Atividades................................................................................................................ 37
Formulários Parte III .............................................................................................. 38
Atividades................................................................................................................ 42
Enviando Formulários............................................................................................. 42
Atividade.................................................................................................................. 43

CAPÍTULO 4 – Imagens 44
Trabalhando com Imagens.................................................................................... 44
Atividades................................................................................................................ 48
CAPÍTULO 5 – CSS 49
Apresentação.......................................................................................................... 49
Histórico e Origem.................................................................................................. 49
Atividades................................................................................................................ 50
A Sintaxe Básica das CSS ..................................................................................... 51
Atividades................................................................................................................ 53
A Construção da sua Primeira Folha de Estilos . ................................................. 53
Atividades................................................................................................................ 55
Bordas .................................................................................................................... 55
Atividade.................................................................................................................. 59

CAPÍTULO 6 – JavaScript 60
Apresentação.......................................................................................................... 60
O Que é JavaScript.................................................................................................. 60
Caixas de Diálogo ou de Mensagem . .................................................................. 62
Comentários, Variáveis e Operadores................................................................... 66
Conversão de Valores . .......................................................................................... 68
Atividades................................................................................................................ 71

CAPÍTULO 7 – Estruturas Condicionais e de Repetição 72


Estrutura Condicional............................................................................................. 72
Atividades................................................................................................................ 74
Operadores Relacionais e Lógicos........................................................................ 75
Seleção de Múltipla Escolha ................................................................................ 77
Laços de Repetição................................................................................................ 79
Atividades................................................................................................................ 82

CAPÍTULO 8 – Funções 84
Atividades................................................................................................................ 86
Tipos de Funções . ................................................................................................. 87
O Objeto Math. ....................................................................................................... 90
Data e Hora............................................................................................................. 96
Exemplos de Data e Hora ..................................................................................... 98

CAPÍTULO 9 – Trabalhando com Strings 103


Strings..................................................................................................................... 103
Atividades................................................................................................................ 106

CAPÍTULO 10 – Interagindo com o Usuário 107


Atividades................................................................................................................ 111
O Que são Eventos? .............................................................................................. 112
Atividades................................................................................................................ 117

Referências Bibliográficas 118


1

HTML
O HTML é uma Linguagem de Marcação (Hypertext Markup Language), ou seja, uma
série de códigos que definem o formato ou o significado do texto. Essa linguagem de marcação
é a principal ferramenta para se fazer uma página na Internet. Por meio do conhecimento da
linguagem HTML, o profissional de web torna-se, desta forma, capacitado a trabalhar e montar
a página web. Neste primeiro capitulo, iremos conhecer esta importante linguagem. A seguir,
serão apresentados conceitos essenciais sobre HTML para a criação de sites.

História da Internet
“O sucesso é a soma de pequenos esforços - repetidos dia sim, e no outro dia também.” (Robert Collier)
9
A Internet é uma rede que conecta computadores do mundo inteiro. Criada em 1969
como um projeto militar, foi usada durante anos para comunicação entre universidades e insti-
tutos de pesquisa. Ela teve sua origem na década de 1960, porque o governo americano queria

HTML
desenvolver um sistema para que os seus computadores militares pudessem trocar informações
entre si, de uma base militar para outra, de forma segura. O sistema somente começou a ser
explorado comercialmente no início dos anos 1990.
Antes da World Wide Web (WWW), a Internet era apenas usadas nas universidades e pelo
exército, para testes, estudos, trocas de informações e arquivos. A Internet não era democrática
como hoje, quando pessoas de várias partes do mundo se conhecem por meio dela. Igualmente,
jornais podem publicar matérias sobre um determinado fato e esse material é acessado e lido
por várias pessoas de diversos lugares do mundo ao mesmo tempo.
A World Wide Web é um conjunto de documentos que se tornam acessíveis por meio da
Internet. Esses documentos (ou páginas web) contêm uma tecnologia chamada hipertexto, pela
qual se podem percorrer partes do documento (e outros documentos) através de pontes chamadas
de links. Pode-se descrever a World Wide Web como um sistema de informação em hipertexto, grá-
fico, distribuído, independente de plataforma, dinâmico, interativo e global, utilizado na Internet.
O hipertexto permite que você leia um texto e navegue por ele e por informações visuais de forma
não linear, com base nas informações que se deseja obter em seguida.
A Organização Europeia para a Investigação Nuclear (CERN) foi a responsável pela
invenção da World Wide Web, ou simplesmente a web, como hoje a conhecemos. Em uma pri-
meira fase, o sistema permitia apenas aos cientistas trocar dados.
O responsável principal pela invenção foi
Tim Berners-Lee. Em 1989, ele propôs um projeto
de hipertexto que permitia às pessoas trabalharem O W3C é um consórcio de empresas de
em conjunto, combinando o seu conhecimento tecnologia, atualmente com cerca de 500
em uma rede de documentos. Foi esse projeto que membros. Desenvolve padrões para a cria-
ficou conhecido como Web. Ela funcionou pri- ção e a interpretação dos conteúdos para a
meiramente dentro do CERN, e no Verão de 1991 Web. Sites desenvolvidos segundo esses
foi disponibilizada mundialmente. padrões, podem ser acessados e visuali-
Em 1994 Berners-Lee criou o World Wide zados por qualquer pessoa, com o uso de
Web Consortium (W3C) onde atualmente exerce qualquer tecnologia, independentemente do
a função de diretor. Mais hardware ou software utilizado – tais como
tarde, e em reconhecimento celulares e PDAs; tudo isso de maneira
dos serviços prestados para rápida e compatível com os novos padrões
o desenvolvimento global da
e tecnologias que podem surgir com a
Web, foi nomeado cavaleiro
evolução da Internet. Para alcançar seus
pela rainha da Inglaterra.
objetivos, a W3C possui diversos comitês
Recentemente, Tim Berners-
Lee foi considerado um que estudam as tecnologias existentes para
www.w3c.br/sobre/

dos maiores gênios vivos a apresentação de conteúdo na Internet e


do mundo, segundo o criam padrões de recomendação para utili-
levantamento Top100 Living zar essas tecnologias. No Brasil, o escritório
Tim Berners-Lee, Diretor
do W3C e criador da World Geniuses, da consultoria
da W3C iniciou suas operações em 1º de
Wide Web. Creators Synectics. novembro de 2007.

10

Vamos Fazer
HTML

Visite a página do escritório brasileiro do W3C e conheça melhor seus objetivos.


www.w3c.br

Atividades
1) Qual a diferença entre a Internet e a Web?

2) Qual a origem da Internet?

3) O que significa hipertexto?

4) O que é o W3C, qual a sua função?

5) Qual a importância de se criarem padrões para a Internet?


Conceitos Básicos
“Uma longa viagem começa com um único passo.” (Lao Tsé)

A área da informática tem se desenvolvido muito. As profissões ligadas a essa área são
inúmeras e estão aumentando quantitativamente. No início da era da computação, as profis-
sões disponíveis eram basicamente quatro: analista, programador, operador e digitador. Hoje,
só na área de desenvolvimento para Internet temos: Webwriter, Web Designer, Web Master, Web
Developer, Expert em Segurança de Sites, Arquiteto de Informação, entre outras.

Desenvolvedor Web ou Web Developer


O Desenvolvimento web é o termo utilizado para descrever o desenvolvimento de sites,
na Internet ou em uma Intranet, a rede interna das empresas. Normalmente está associado à
programação e à marcação, mas também pode ser usado para se referir ao projeto visual das
páginas.
Desde meados da década de 1990 o desenvolvimento web tem sido uma das indústrias de
mais rápido crescimento no mundo, pois a Internet trouxe novos hábitos de consumo e criou
inovadoras formas de negócios. O mercado de tecnologia e informática de um modo geral está
bem aquecido. Para os programadores web não seria diferente: o número de vagas ofertadas
supera o de profissionais qualificados para preenchê-las. Este livro fornece a base necessária e
os fundamentos para um profissional de programação web.
11
Para ser um Web Developer, conhecimentos em HTML e CSS são indispensáveis. O
mínimo que se espera de um bom desenvolvedor web é o conhecimento dos Web Standards,

HTML
HTML e CSS. São linguagens que contribuem para a criação de documentos mais consistentes
entre si, mais compatíveis e de manutenção extremamente simples. Aliás, o conhecimento dos
padrões não é mais um diferencial, mas sim um requisito básico; com os padrões web temos
mais acessibilidade, isto é facilidade de uso e também mais visibilidade, principalmente no que
diz respeito a motores de busca, como o Google, por exemplo.

Página Web
Uma página da web é um arquivo onde você pode inserir textos, imagens, tabelas e incor-
porar planilhas, apresentações, vídeos e muito mais. A palavra site em inglês deriva do latim situs
(lugar demarcado, local, posição). Uma página web, também conhecida pelo equivalente inglês
webpage é geralmente escrita em formato HTML e com ligações de hipertexto que permitem a
navegação de uma página, ou seção, para outra.
Uma coleção de páginas web armazenadas em uma única pasta ou em subpastas rela-
cionadas de um servidor web é conhecida como site. Um site web costuma incluir uma página
principal chamada index.htm ou index.html. O site é hospedado por computadores conecta-
dos permanentemente à Internet.
Os documentos em HTML são arquivos texto, que podem ser editados em qualquer
editor simples e depois visualizados em seu browser, ou em um software, para a criação de páginas
web. Editores HTML oferecem vários recursos extras para auxiliar na criação de páginas; além
disso, acrescentam outras funcionalidades, e muitos dão a opção de visualização do projeto,
tanto em linhas de código HTML quanto no resultado delas no design da página. Este tipo de
editor HTML denomina-se habitualmente WYSIWYG (What You See Is What You Get) porque
quando se trabalha com ele o que se vê ao criar com o editor é o que se obtém logo que se grava
a página.
Para que uma página esteja permanentemente disponível pela web, ela precisa ter um
endereço fixo, alojado em um servidor. Existem vários provedores de espaço gratuitos e tam-
bém os provedores de acesso, que geralmente oferecem espaço para os sites de seus assinantes.
Definida a hospedagem, basta enviar dados para o provedor os arquivos de seu site e suas páginas
já estarão disponíveis para visitas.

Atividades
1) Qual a diferença entre uma home page, uma página e um
site?

2) Pesquise o nome de pelo menos três editores HTML.

3) Qual o nome do arquivo que costumamos dar para a página


principal de um site?
12
4) O que significa Web Standarts?
HTML

5) Porque nossas páginas devem ser acessíveis?

O que é HTML
“Para sonhar um ano novo que mereça este nome, você, meu caro, tem de merecê-lo, tem de fazê-lo
novo, eu sei que não é fácil, mas tente, experimente, consciente. É dentro de você que o Ano Novo
cochila e espera desde sempre.” (Carlos Drummond de Andrade)

Na indústria de computadores, uma Linguagem de marcação é o código que é usado para


explicar a estrutura de informação em nossos documentos. A linguagem de marcação mais popular e
usada atualmente que se constitui na força motriz para a World Wide Web é o HTML, sigla que é uma
abreviatura de “HyperText Mark-up Language”, ou Linguagem de Marcação de Hipertexto.
Hipertexto são aqueles itens marcados em uma página web que, quando clicados, levam
a imagens ou informações mais detalhadas sobre o assunto. O hipertexto é um texto (ou uma
imagem) grifado e destacado na página por uma cor diferente da cor do texto no qual está inse-
rido. Quando se coloca o cursor sobre o hipertexto, o cursor muda seu formato para um ícone
representado por uma pequena mão.
O HTML foi inventado em 1990 por Tim Berners-Lee. O objetivo era tornar mais fácil,
para os cientistas de diferentes universidades, terem acesso aos documentos de outras institui-
ções. O projeto se tornou um grande sucesso; ao inventar o HTML, ele lançou as bases para a
web como a conhecemos hoje.
Originado do casamento dos padrões HyTime (Hypermedia/Time-based Doumnt Structuring
Language) e SGML (Standard Generalized Markup Language), o HTML é a linguagem usada para
criar páginas na web que estabelece como um determinado elemento deve ser visualizado,
não sendo, portanto uma linguagem de programação, e sim, uma linguagem de formatação,
de exibição de textos através de “comandos” conhecidos como TAGs. Em suma, HTML é
empregado para definir as funções dos diferentes elementos das páginas (como textos, fotos ou
animações) que serão visualizadas pelo programa de navegação (Browser).
A HTML é uma linguagem, o que possibilita apresentar informações na Internet. O que
você vê quando visualiza uma página na Internet é a interpretação do seu browser da HTML.
Se você quiser fazer sites, é importante aprender HTML. A boa notícia é que HTML é
fácil de aprender e usar. Com este livro, você aprenderá a criar belas páginas e ao concluir seu
estudo, você terá aprendido como fazer seu primeiro site. A seguir, vamos ver onde e como criar
nossa página e onde podemos colocá-la para que todos a possam ver.

Os Principais Elementos de uma Página HTML


Uma página HTML é composta basicamente de títulos, textos, parágrafos, imagens e links
responsáveis pela chamada de outras páginas para a tela. Todos esses elementos são posiciona-
dos na página por meio de comandos específicos da linguagem.
13
A estrutura de um documento HTML apresenta os seguintes componentes:

HTML
<HTML>
<HEAD>
<TITLE>TÍTULO DA PÁGINA</TITLE>
</HEAD>
<BODY>
CORPO DA PÁGINA.
</BODY>
</HTML>

Exemplo 1: Estrutura básica de uma página


Atividades
1) O que significa HTML e porque ela foi criada?

2) Descreva os componentes básicos de um documento HTML.

3) Do que pode ser composta uma página em HTML?

4) O que significa TAG?

5) Qual a origem do HTML?

Escrevendo sua Primeira Página


“Sorte é o que acontece quando a preparação encontra a oportunidade.” (Elmer Letterman)

HTML utiliza marcações específicas e distintas para dizer ao browser como exibir o docu-
mento. As marcas utilizadas para produzir o hipertexto são chamadas tags. Uma tag consiste
dos sinais < (menor que) e > (maior que) e um texto dentro deles. Um documento HTML
é composto de TAGs que farão com que o browser monte a página de acordo com a formatação
definida pelos comandos HTML. De um modo geral, as tags aparecem em pares, por exemplo,
<H1> Cabeçalho</H1>. No exemplo, <H1> informa o início da formatação do primeiro
14
nível de cabeçalho e </H1> avisa que o cabeçalho acabou.
HTML

Principais TAGS
Todo documento em HTML deve possuir um título. De um modo geral, o título aparece
em lugar separado da página e é utilizado para identificar o documento em outros contextos,
como por exemplo, em mecanismos de busca como o Google. É interessante que o título possa
sugerir claramente o conteúdo do documento. As principais TAGS, que fazem parte da estru-
tura básica de um documento HTML são as seguintes:

TAG O QUE FAZ

Marca o início e o fim do documento HTML. Com ela você inicia e finaliza a cons-
<HTML>
trução da página web.

Marca o início e do fim do cabeçalho, ou seja, a área onde serão descritos os


<HEAD>
cabeçalhos e o título da página.

Marca o início e o fim do título do cabeçalho. O título da página aparecerá na barra


<TITLE>
superior do browser.

<BODY> Marca o início e o fim do corpo da página.


Importante:
HTML não faz diferença entre maiúsculas e minúsculas (não é
case sensitive). Então a notação <title> é equivalente a <TITLE> ou
<TiTlE>.

Criando Documentos HTML


Todo documento deve ser identificado como HTML (<html> </html>), ter uma área
de cabeçalho (<head></head>) com o nome para o documento (<title> </title>), um título
principal e uma área definida como corpo(<body></body>) do conteúdo do documento.
Como exemplo, faça as seguintes ações, para visualizá-lo:
1. Abra um editor de texto, por exemplo, o bloco de notas;
2. Digite o exemplo 2, no quadro abaixo.

<HTML>
<HEAD>
<TITLE>Minha Primeira Página</TITLE>
</HEAD>
<BODY>
Bem-vindo ao meu Site.
</BODY>
15
</HTML>

HTML
Exemplo 2: Página simples em HTML

3. Salve o arquivo como exemplo2.htm


4. Abra o navegador e carregue o arquivo exemplo2.htm
A página vai aparecer como na figura abaixo:

Figura 1: Tela do exemplo 2


Vamos Fazer:
Crie uma nova página, e coloque a seguinte frase: “Não se pode ensinar tudo a alguém,
apenas se pode ajudá-lo a encontrar por si mesmo.” Galileu Galilei

Atividades
1) O que significa case sensitive?

2) Crie uma página baseada no exemplo 2 e coloque seu nome.

3) Na mesma página, modifique o titulo para Meu Site.

4) Crie uma nova página onde o título é Currículo; no corpo da


página, coloque seu nome completo.

5) O que é identação e qual a sua finalidade?

Atributos
“Imaginação é mais importante que inteligência”. (Albert Einstein)
16
Em nossa primeira página, colocamos apenas um texto, mas podemos melhorá-la e colocar
uma cor de fundo ou uma imagem. Como você deve estar lembrado, uma tag é um comando
HTML

para o navegador. Em algumas tags você pode acrescentar informações adicionais por meio dos
atributos.

Mudando a Cor de Fundo da Página


Atributos são escritos dentro da tag, seguidos por um sinal de igual e depois entre aspas
são declaradas as informações do atributo. O exemplo a seguir, altera a cor da página por meio
do atributo bgcolor e o valor, que no caso é o nome ou o número da cor, conforme o exemplo
abaixo.

<BODY bgcolor=”green”> ou <BODY bgcolor=”#00ff00”>

Para algumas cores, você pode usar o nome das cores em inglês ( white – branco; black
– preto; red – vermelho; blue – azul; green – verde; yellow - amarelo). No exemplo acima nós
usamos o código “#00ff00” para fazer a página na cor verde. Este é o código para a cor verde no
sistema chamado de números hexadecimais (HEX).
As cores podem ser representadas por nomes ou números. Um
código hexadecimal para cores é formado por um sinal # seguido de
seis dígitos.

Por exemplo:
Branco: #ffffff Preto: #000000 (zeros)
Vermelho: #ff0000 Azul: #0000ff
Verde: #00ff00 Amarelo: #ffff00

Para ver como fica sua página com as modificações, digite o exemplo 3 e em seguida
visualize-o no navegador.

<HTML>
<HEAD>
<TITLE>Mudando a Cor de Fundo</TITLE>
</HEAD>
<BODY bgcolor=”green”>
Bem-Vindos!!!
</BODY>
</HTML>

17
Exemplo 3: Página com fundo verde

HTML

Figura 2: Tela do exemplo 3

Podemos também colocar uma imagem como plano de fundo; para isso, selecione uma
imagem qualquer da Internet, salve na mesma pasta em que você está gravando suas páginas e,
em seguida, altere o código, como no exemplo a seguir.
<HTML>
<HEAD>
<TITLE>Mudando a Cor de Fundo</TITLE>
</HEAD>
<BODY background=”floral2.jpg “>
Bem-Vindos!!!
</BODY>
</HTML>

Exemplo 4: Página com imagem de fundo

Figura 3: Tela do exemplo 4


18
HTML

Atividades
1) Procure, na Internet, imagens para você inserir no fundo de
sua página, salve pelo menos duas imagens diferentes.

2) Com base no exemplo 3, altere a cor de fundo para azul, usando


o nome da cor (lembre-se que esta deve ser em inglês).

3) Repita o exercício anterior e troque a cor por vermelha, mas


desta vez utilize o código numérico.

4) Com base no exercício 3, mude o plano de fundo e insira uma


imagem, (lembre-se que a imagem deve estar na mesma pasta
do arquivo HTML).

5) Repita o exercício 4 e coloque a outra imagem que você gra-


vou. Qual foi a que teve o melhor resultado?
Conhecendo Mais TAGS
“Se não existe esforço, não existe progresso.” (Frederick Douglass)

Conheça mais algumas tags, conforme a tabela abaixo. Em seguida, mostraremos exemplos
de como usá-las.

TAG O QUE FAZ

<H1>
<H2> Cabeçalhos, normalmente são usados para títulos e subtítulos de uma página.
HTML possui seis níveis de cabeçalhos, numerados de 1 a 6, sendo o número 1 o
<H3> de maior destaque. Cabeçalhos são exibidos em letras maiores e em negrito.
<H6>

<I> Itálico.

<B> Negrito.

<U> Sublinhado.

<BR> Faz uma quebra de linha, sem acrescentar espaço extra entre as linhas.

Serve para definir uma linha horizontal (“hr” vem de horizontal rule - régua
<HR>
horizontal).

19

Normalmente as tags HTML possuem início e fim <INICIO>.. </FIM>,


porém existem algumas exceções como as marcações: <BR> e <HR>

HTML
Testando as Novas Tags
O código abaixo exemplifica o uso das tags de cabeçalho, negrito, itálico, sublinhado,
inserir uma linha e uma combinação de negrito e itálico.

<HTML>
<HEAD>
<TITLE>Letra da Música Felicidade</TITLE>
</HEAD>
<BODY >
<H1> Felicidade</H1>
<H2> Fábio Jr</H2>
<H3> Composição: Umberto Tozzi </H3>
<B>Trecho da Música Felicidade!</B><BR>
<HR>
<B>Felicidade!</B><BR>
<I>Brilha no ar</I><BR>
<B><I>Como uma estrela</I></B><BR>
<U>Que não está lá</U><BR>
Conto de fadas<BR>
Uma gota d’água <BR>
Descobrindo<BR>
Que é o mar azul<BR>
Descobrindo<BR>
Que é o mar azul...<BR>
<HR>
</HTML>

Exemplo 5: Página com elementos de formatação

20
HTML

Figura 4: Tela do exemplo 5

Vamos Fazer:
Crie uma nova página e insira a letra da sua música favorita com as seguintes forma-
tações: fundo azul, o título da página será o título da música, coloque algumas frases em
negrito, itálico e sublinhado para treinar os comandos que você aprendeu.
Atividades
1) Procure na Internet a letra da sua música preferida.

2) Coloque o título da página com o título da música.

3) Repita o título na página e coloque-o como cabeçalho de nível 1,


coloque o cantor ou grupo como cabeçalho de nível 2.

4) Após o título e o intérprete, coloque uma linha horizontal

5) Para cada estrofe, coloque uma formatação diferente, da


seguinte forma:
• Primeira estrofe: negrito;
• Segunda estrofe: itálico;
• Terceira estrofe: sublinhado;
• Quarta estrofe: faça uma combinação de itálico e negrito;
• Quinta estrofe: faça uma combinação de itálico e sublinhado.

Atributos do Corpo da Página 21

“Para se ser um gênio é necessário apenas 1% de inspiração e 99% de transpiração.” (Isaac Newton)

HTML
A Tag BODY foi vista anteriormente para definirmos uma cor de fundo ou aplicar uma
imagem ao fundo da nossa página. A Tag <BODY> delimita o corpo do documento e contém
atributos (relativos a texto, fundo e a links), conforme a tabela abaixo:

Atributos da Tag BODY

ATRIBUTO O QUE FAZ

BGCOLOR cor de fundo

TEXT cor dos textos da página (padrão: preto)

BACKGROUND indica a imagem a ser aplicada no fundo da página

LINK cor dos links (padrão: azul)

ALINK cor dos links, quando acionados (padrão: vermelho)

VLINK cor dos links, depois de visitados (padrão: azul escuro ou roxo)
Neste momento, não exemplificaremos os atributos de links; eles serão apresentados pos-
teriormente, quando aprendermos a criar links em nossa página. O exemplo abaixo mostra
como usar vários atributos, simultaneamente, em um documento que tem a seguinte definição
de atributos gerais:

<BODY BGCOLOR=”#FFFFFF” TEXT=”GREEN” LINK=”#008000” >

<HTML>
<HEAD><TITLE>Provérbio Chinês</TITLE></HEAD>
<BODY BGCOLOR=”YELLOW” TEXT=”GREEN”>
<HR>
<B><I>Dê um peixe a um homem faminto e você o alimentará por um dia.<BR>
Ensine-o a pescar, e você o estará alimentando pelo resto da vida.<BR>
</I></B>
<HR>
</BODY>
</HTML>

Exemplo 6: Alterando os atributos de uma página

22
HTML

Figura 5: Tela do exemplo 6

Além de podermos escolher a fonte para toda a página, também podemos especificar para
cada trecho uma fonte, cor e tamanho. A tag </FONT> é muito versátil, permitindo-nos dar
às fontes praticamente qualquer formatação. Os atributos para a tag </FONT> são:
Atributos da Tag FONT

ATRIBUTO O QUE FAZ

FACE Tipo de fonte (Arial, Courier, Times New Roman etc)


SIZE Tamanho da fonte. Os valores variam de 01 a 07.
COLOR Cor do texto

<HTML>
<HEAD><TITLE>Fontes</TITLE></HEAD>
<BODY>
<HR>
<FONT FACE=”Comic Sans MS” COLOR=”#FF0000” SIZE=4> Limitações são fronteiras cria-
das apenas pela nossa mente</FONT><BR>
<FONT FACE=”Courier” COLOR=”#00FF00”SIZE=6> Limitações são fronteiras criadas ape-
nas pela nossa mente </FONT><BR>
<FONT FACE=”Arial” COLOR=”BLUE” SIZE=5> Limitações são fronteiras criadas apenas pela
nossa mente</FONT><BR>1
<HR>
</BODY>
</HTML>

Exemplo 7: Alterando a cor de fundo, o tipo e o tamanho da fonte 23

HTML

Figura 6: Tela do exemplo 7


Atividades
1) Crie uma nova página com a frase abaixo e, em seguida, rea-
lize as formatações solicitadas.

“É bom sonhar, mas é melhor sonhar e trabalhar. A fé é poderosa,


mas a ação com fé é mais poderosa.” (Thomas Robert Gaines)

2) Coloque o título da página como Sonhar e o fundo com sua


cor preferida ou com uma imagem.

3) Coloque a cor da letra azul, fonte Arial, tamanho 12.

4) Formate a frase com negrito.

5) O nome do autor deve ficar em itálico.

6) Insira uma linha horizontal, repita a frase e coloque-a com outra


formatação.

24
HTML
2
Listas
Listas Não Ordenadas
“A verdadeira sabedoria consiste em saber como aumentar o bem-estar do mundo.”
(Benjamin Franklin)

Vamos aprender como fazer as listas em HTML , estas podem ser:


1. Listas Numeradas
2. Listas Não Numeradas
3. Listas Encadeadas

ATRIBUTO O QUE FAZ

UL Lista não ordenada

OL Lista Numerada ou Ordenada 25

LI Item de lista

Listas
No exemplo a seguir, iremos criar uma lista simples.

<HTML>
<HEAD><TITLE>Listas</TITLE></HEAD>
<BODY>
<H2>Estados da Região Sul</H2>
<UL>
<LI>Paraná
<LI>Santa Catarina
<LI>Rio Grande do Sul
</UL>
</BODY>
</HTML>

Exemplo 8: Lista não ordenada


Figura 7: Tela do exemplo 8

No próximo exemplo, iremos fazer uma lista encadeada.

<HTML>
<HEAD><TITLE>Listas</TITLE></HEAD>
<BODY>
<H2>Estados e Cidades da Região Sul</H2>
<UL>
<LI>Paraná
<UL>
26 <LI>Curitiba
<LI>Pato Branco
</UL>
Listas

<LI>Santa Catarina
<LI>Rio Grande do Sul
</UL>
</BODY>
</HTML>

Exemplo 9: Lista encadeada


Figura 8: Tela do exemplo 9

Atividades
1) Crie a seguinte lista:

Material Escolar (Negrito)


• Lápis
27
• Borracha
• Caneta

Listas
• Caderno

2) Crie a lista, conforme o exemplo abaixo:

Principais Cidades (Negrito, itálico e sublinhado)


• São Paulo
– Guarulhos
– Campinas
• Minas Gerais
– Ouro Preto
– Mariana
• Rio de Janeiro
– Petrópolis
– Parati
Listas Ordenadas
“O insucesso é apenas a ocasião de recomeçar uma tentativa com mais sabedoria.” (Henry Ford)

Como padrão, as Listas ordenadas começam por um número, mas podemos configurá-
las para começar com letras ou iniciar com valores diferentes de 1 ou A. No exemplo a seguir,
temos uma lista ordenada padrão.

<HTML>
<HEAD><TITLE>Listas</TITLE></HEAD>
<BODY>
<H2>Estados da Região Sul</H2>
<OL>
<LI>Paraná
<LI>Santa Catarina
<LI>Rio Grande do Sul
</OL>
</BODY>
</HTML>

28 Exemplo 10: Lista ordenada


Listas

Figura 9: Tela do Exemplo 10


No próximo exemplo, veremos uma lista ordenada começando com a primeira letra do
alfabeto.

<HTML>
<HEAD><TITLE>Listas</TITLE></HEAD>
<BODY>
<H2>Estados e Cidades da Região Sul</H2>
<OL START=1 TYPE=A>
<LI>Paraná
<LI>Santa Catarina
<LI>Rio Grande do Sul
</OL>
</BODY>
</HTML>

Exemplo 11: Lista ordenada usando letras

29

Listas
Figura 10: Tela do exemplo 11

Se alterarmos a linha 5, podemos alterar a configuração para que a lista comece pela
segunda letra do alfabeto em minúsculo.

<OL START=2 TYPE=a>

<HTML>
<HEAD><TITLE>Listas</TITLE></HEAD>
<BODY>
<H2>Estados e Cidades da Região Sul</H2>
<OL START=2 TYPE=a>
<LI>Paraná
<LI>Santa Catarina
<LI>Rio Grande do Sul
</OL>
</BODY>
</HTML>

Exemplo 12: Lista ordenada usando letra minúscula

30
Figura 11: Tela do exemplo 12
Listas

Em uma lista ordenada, os números são inseridos automatica-


mente. Se você quiser trocar os números por letras, Ex.: A, B, C, ao
invés de usar só <OL> use <OL START=1 TYPE=A>. Em que 1
indica para começar pela primeira letra do alfabeto.

Atividades
Crie uma lista com as mais belas praias do Brasil
1) Bombinhas
2) Copacabana
3) Pipa
4) Porto de Galinhas
5) Búzios
Altere a lista para que ela fique numerada, com letras maiúsculas
e depois minúsculas.
Links
“A preguiça e a ignorância revoltam-se sempre contra o esforço e o talento.”
(Gaspar Melchor de Jovellanos)

A palavra inglesa link é usada para designar um “atalho”, “caminho” ou “ligação”. Através
dos links é possível navegar entre páginas, a partir de palavras, imagens ou outros objetos.
Com HTML, é possível fazermos ligações de uma região de texto (ou imagem) para outro
documento. O browser destaca essas regiões e imagens do texto, indicando que são ligações de
hipertexto - também chamadas hypertext links ou hiperlinks ou simplesmente links.
Em função do destino, os links são classicamente agrupados da seguinte forma:

• Links internos: os que se dirigem a outras partes dentro da mesma página.


• Links locais: os que se dirigem a outras páginas do mesmo site web.
• Links remotos: os que se dirigem às páginas de outros sites web.
• Links com endereços de correio: para criar uma mensagem de correio dirigida a um
endereço.
• Links com arquivos: para que os usuários possam fazer download de arquivos.

Agora, vamos aprender como fazer links externos.


Para inserir um link em um documento, utilizamos a tag <A>, da seguinte forma: 31

<A HREF = “destino”>âncora</A>

Listas
<HTML>
<HEAD><TITLE>Links</TITLE></HEAD>
<BODY>
<H2>Esta Página Contém Links</H2>
<A HREF = “http://www.google.com.br”>GOOGLE</A><BR>
<A HREF = “http://www.uol.com.br”>UOL</A>
</BODY>
</HTML>

Exemplo 13: Página com links


Figura 12: Tela do exemplo 13

Além de criar o link, podemos inserir um texto explicativo, com o atributo TITLE.

<A HREF = http://www.uol.com.br TITLE = ”Este link vai para a página do


UOL”>UOL</A>

32
Listas

Atividades
1) O que significa o termo link?

2) Quais são os principais tipos de links?

3) Crie uma página com seus cinco links preferidos.

4) Coloque textos explicativos em todos os links.

5) Agora, coloque seus links em uma lista numerada.


3
Formulários
“O pessimista queixa-se do vento, o otimista espera que ele mude e o realista ajusta as velas.”

Formulários Parte I
Ao navegar pela Internet, é normal precisarmos cadastrar informações ou recolher dados para
uma compra. Para isso, existem os formulários que permitem a comunicação entre os usuários e o
site. Os formulários servem para recolher dados dos visitantes e enviá-los para você, através de
seu servidor.
Um formulário é um recurso do HTML que contém elementos que permitem aos visi-
tantes inserirem dados. Os comandos <FORM></FORM> delimitam o início e o fim de um
formulário. O elemento <form> por si só não faz com que o navegador desenhe nada na página
nem permite inserir informações. Ele delimita os elementos que recolhem os dados e possui
informações que orientam o navegador como e para onde devem ser enviados os dados.

Criando seu Primeiro Formulário


A tag <input>, especifica uma variedade de campos editáveis dentro de um formulário. 33
Ela pode receber como atributos botões e janelas de textos.
Vamos ver como esta tag funciona:

Formulários
<INPUT TYPE=”TEXT” NAME=”Variável de Entrada” SIZE= 8 VALUE=”Texto”>

<HTML>
<HEAD><TITLE>Formulários</TITLE></HEAD>
<BODY>
<H1>Meu Primeiro Formulário</H1>
<form>
Primeiro nome: <input type=” text “ name=”primeiro_nome”>
<br><br>
Sobrenome: <input type=” text “ name=”último_nome”>
</ form>
</BODY>
</HTML>

Exemplo 14: Formulário com campos de texto


Figura 12: Tela do exemplo 14

<HTML>
<HEAD><TITLE>Formulários</TITLE></HEAD>
<BODY>
<H1>Meu Primeiro Formulário</H1>
<form>
Login: <input type=” text “ name=”login” SIZE= 15 VALUE=”Texto”>
<br><br>
</ form>
34 </BODY>
</HTML>
Formulários

Exemplo 15: Campo texto com valor padrão

Figura 13: Tela do exemplo 15


Atividade
1) Crie um formulário para cadastrar os seguintes dados:
a. Nome
b. Cidade
c. Estado
d. País (Deixe o país com o padrão Brasil)

Formulários Parte II
“A leitura traz ao homem plenitude, o discurso segurança e a escrita exatidão.” (Francis Bacon)

A Tag <input> pode assumir diversas formas com finalidades diferentes. Vamos conhe-
cer outras possibilidades de uso desta Tag.

Radio Buttons
Os Radio Buttons são utilizados quando precisamos informar um grupo de opções, porém
o usuário só pode selecionar uma única opção.
35

<HTML>

Formulários
<HEAD><TITLE>Formulários</TITLE></HEAD>
<BODY>
<H1>Formulários</H1>
Informe seu sexo:
<BR>
<form>
<input type=”radio” name=” sexo” value=”masculino”> Masculino
<BR>
<input type=”radio” name=” sexo” value=” feminino”> Feminino
</form>
</BODY>
</HTML>

Exemplo 16: Formulário com radio buttons


Figura 14: Tela do exemplo 16

Checkboxes
Os chekboxes são utilizados quando o usuário pode escolher várias alternativas.

<HTML>

36 <HEAD><TITLE>Formulários</TITLE></HEAD>
<BODY>
<H1>Formulários</H1>
Formulários

Escolha os cursos que gostaria de fazer: <BR>


<form>
<input type=”checkbox” name=”curso”>Java <br>
<input type=”checkbox” name=”curso”>CSS <br>
<input type=”checkbox” name=”curso”>PHP <br>
<input type=”checkbox” name=”curso”>JavaScript <br>
<input type=”checkbox” name=”curso”>Banco de Dados <br>
</form>
</BODY>
</HTML>

Exemplo 17: Usando checkboxe


Figura 15: Tela do exemplo 17

Atividades 37

1) Monte uma página em que o usuário só poderá escolher uma

Formulários
das alternativas abaixo:
Informe seu estado civil:
a. Casado
b. Solteiro
c. Viúvo
d. Separado

2) Monte uma página em que o usuário poderá escolher mais de


uma das alternativas abaixo:
Viagens Tabajara. Infome os opcionais do seu pacote:
a. Translado
b. City tour
c. Passeio de Jangada
d. Jantar Romântico
e. Passeio de Buggy
Formulários Parte III
“Só existem dois dias do ano em que não podemos fazer nada. O ontem e o amanhã.”
(Mahatma Ghandi)

TextArea
Permite criar uma área de texto, delimitando o número de linhas e de colunas. Normalmente
este item é utilizado para os usuários deixarem seus comentários sobre determinado assunto.
Vamos ver como podemos utilizá-lo.

<HTML>
<HEAD><TITLE>Formulários</TITLE></HEAD>
<BODY>
<H1>Formulários</H1>
Sua opinião é muito importante:
<BR>
<form>
<textarea name=”comentários” COLS=30 ROWS=10>Coloque aqui seus
comentários</textarea>
38

</form>
Formulários

</BODY>
</HTML>

Exemplo 18: Criando uma área para comentários


Figura 16: Tela do exemplo 18

Select
39
Esta tag permite criar uma lista de opções. Ela possui a seguinte sintaxe:
• NAME: é obrigatório e serve para identificar o nome da lista;

Formulários
• OPTION: consiste em um item da lista;
• MULTIPLE: com este atributo a lista irá ser visualizada sempre aberta;
• SELECTED: informa o valor padrão da lista;
• VALUE: informa o valor a ser retornado ao servidor.

<HTML>
<BODY>
<H1>Formulários</H1>
Informe seu estado:
<BR>
<form>
<SELECT NAME=”Estados”>
<OPTION SELECTED VALUE=”RJ”> Rio de Janeiro
<OPTION VALUE=”SP”> São Paulo
<OPTION VALUE=”MG”> Minas Gerais
<OPTION VALUE=”PR”> Paraná
<OPTION VALUE=”SC”> Santa Catarina
<OPTION VALUE=”RS”> Rio Grande do Sul
<OPTION VALUE=”RN”> Rio Grande do Norte
</SELECT >
</form>
</BODY>
</HTML>

Exemplo 19: Criando um menu de opções

40
Formulários

Figura 17: Tela do exemplo 19


Botões
Submit: este botão permite o envio de ATENÇÃO: por enquanto nosso botão
informações quando pressionado. SUBMIT não irá funcionar, pois para isso é
necessário um script, isto é um conjunto de
Reset: este botão limpa todos os campos comandos que irá informar para onde os dados
preenchidos, voltando ao estado inicial. serão enviados e como eles serão tratados.

<INPUT TYPE=”RESET” VALUE=”Limpar”>


<INPUT TYPE=”SUBMIT” VALUE=”Enviar”>
<HTML>
<BODY>
<H1>Informe seu Nome</H1>
<form>
Primeiro nome: <input type=”text” name=”primeironome”>
<br><br>
Sobrenome: <input type=”text” name=”ultimonome”>
<br><br>
<INPUT TYPE=”RESET” VALUE=”Limpar”>
<INPUT TYPE=”SUBMIT” VALUE=”Enviar”>
</form>
</BODY>
</HTML> 41

Exemplo 20: Criando botões

Formulários

Figura 18: Tela do Exemplo 20


Atividade
1) Crie um formulário com os seguintes itens:
a. Campo de texto: nome e sobrenome;
b. Radio Button: escolha a sua classe (turística, executiva, luxo);
c. Checkbox: opcionais (seguro, bolsa viagem, translado, city tour);
d. Caixa de Seleção: escolha o destino (Bonito, Fernando de
Noronha, Natal, Rio de Janeiro, Gramado);
e. Monte uma área de texto para o cliente deixar seus comentários;
f. Insira os botões de enviar e limpar.

Enviando Formulários
“Mude a forma como olha para as coisas e verá que as coisas que você vê estarão mudadas.” (Wayne Dyer)

Por enquanto, nossos formulários eram só visuais, eles não funcionavam. Se desejarmos
que, ao clicar o botão de envio de um formulário, sejam enviados os dados por e-mail, devemos
utilizar alguma tecnologia de programação de páginas do lado do servidor, como ASP ou PHP;
42 porém este não é o objetivo deste livro. Existem sites que fazem o processamento do seu formu-
lário e o enviam para o e-mail especificado.
A seguir, vamos dar um exemplo utilizando o processamento de formulários da Netpoint
Formulários

que é bem fácil de usar, basta que você informe seu e-mail.

<html>
<HEAD><TITLE>Formulários</TITLE></HEAD>
<body>
<form action = ”http://www.netpoint.com.br/utils/forms/email.asp” method=”post”>
<input type=hidden name=para value=”seu e-mail”>
<input type=hidden name=assunto value=”Meu primeiro formulário”>
<h2>Informe seu dados</h2>
Nome : <input type=”text” name=”01_Nome”> <BR>
Estado : <input type=”text” name=”03_Estado”> <BR>
E-mail : <input type=”text” name=”05_email”> <BR>
<input type=”submit” value=”Enviar” name=”B1”> <BR>
</form>
</body>
</html>

Exemplo 21: Enviando um formulário


Figura 18: Tela do formulário

43

Formulários
Figura 19: Confirmação de envio

Atividade
1) Altere o código ao lado com seu e-mail para que possa se ver
o funcionamento adequado do exemplo.
4
Imagens
Trabalhando com Imagens
“Aqueles que dizem que algo não pode ser feito deveriam sair do caminho daqueles que estão a tentar
fazer.” (Joel Arthur Barker)

Vamos aprender a inserir imagens na página, bem como modificar sua altura, largura,
inserir borda e redimensioná-la para o centro e para a direita da página, tudo mostrado por meio
das telas.
Para inserirmos uma imagem, precisamos utilizar a tag abaixo:

<img src=” aqui colocamos o caminho da imagem”>

Esta tag pode ter vários atributos:


44
• SRC - este atributo diz onde está a imagem.
• ALT - este atributo permite colocar um texto alternativo na imagem.
Imagens

• Border - este atributo configura uma borda (moldura) na imagem. Seus valores variam
de 0 (sem borda) a infinito. Se não for especificado, o seu valor será 1.
• Width - especifica a largura da imagem. Seu valor é medido em pixels. Se não for especi-
ficado, a imagem aparece com seu tamanho original.
• Height - especifica a altura da imagem. Seu valor é medido em pixels. Se não for especi-
ficado, a imagem aparece com seu tamanho original.
• Align - atribui valores para o alinhamento horizontal (à esquerda, ao centro, à direita
- left, center e right); ou valores para o alinhamento vertical (top, midlle, baseline e bottom).
Outros valores também são aceitos: texttop, absmidlle, absbottom.
– ALIGN=LEFT - a imagem fica à esquerda,
– ALIGN=RIGHT - a imagem fica à direita,
– ALIGN=TOP - alinha o topo da imagem com o topo do elemento mais alto da linha,
que pode ser outra imagem,
– ALIGN=MIDDLE - alinha a base do texto com o centro da imagem,
– ALIGN=BOTTOM - alinha a imagem com a base dos outros elementos da linha.
– ALIGN=TEXTTOP - alinha o topo da imagem com o topo do texto,
– ALIGN=ABSMIDDLE - alinha o centro do texto com o centro da imagem.
– ALIGN=BASELINE e ALIGN=ABSBOTTOM - alinham a imagem com a base dos
outros elementos da linha;
• Vspace - especifica o espaço acima e abaixo da imagem. Seu valor é medido em pixels.
• Hspace - especifica o espaço à direita e à esquerda da imagem. Seu valor é medido em
pixels.
Agora vamos ver alguns exemplos de como podemos usar imagens em nossas páginas.

<html>
<HEAD><TITLE>Imagens/TITLE></HEAD>
<body>
<p> Uma imagem:
<img src=”maca.jpg”>
</p>
<p> Uma imagem animada:
<img src=”balanca.gif”>
</p>
<p> Observe que não há diferença para inserir uma
imagem animada ou uma imagem não animada.
</p>
45
</body>
</html>

Imagens
Exemplo 22: Insere uma imagem e uma gif animada

Figura 20: Tela do exemplo 22


<html>
<body>
<img src=”morango.jpg”
alt=”Morangos deliciosos”>
<p>
O texto será exibido se você passar o ponteiro do mouse sobre a imagem
</p>
</body>
</html>

Exemplo 23: Uma imagem com texto alternativo

46
Imagens

Figura 21: Tela do exemplo 23

<html>
<body>
Você também pode usar uma imagem
como vínculo:<BR>
Vamos consultar o oráculo!!!<BR>
<a HREF=”http://www.google.com.br”><img src=”logo.gif” alt=”Esta imagem tem um link
para o Google” border=”1”></a>
</body>
</html>

Exemplo 24. Uma imagem com link


Figura 22: Tela do exemplo 22

<html>
<body>
<p>
<img src =”eclipse.jpg” align =”left” >
47
Um parágrafo com uma imagem. O atributo align (alinhamento) da imagem é configurado
para “left” (esquerda). A imagem irá flutuar para a esquerda deste texto.

Imagens
</p> <p>
<img src =”luanova.jpg” align =”right” >
Um parágrafo com uma imagem. O atributo align (alinhamento) da imagem é
configurado para “right” (direita). A imagem irá flutuar para à direita deste texto.
</p>
</body>
</html>

Exemplo 25: Alinhando texto à imagem


Figura 23: Tela do exemplo 25

48

Atividades
Imagens

1) Monte uma página com 5 imagens e faça uma breve descrição


delas, com o texto alinhado à direita.

2) Monte uma página com 5 imagens com links.

3) Insira texto alternativo nas imagens.

4) Crie uma página e insira alguns gifs animados.

5) Para finalizar, crie uma página com uma música, use as forma-
tações que aprendemos; coloque a imagem do cantor(a) ou
grupo e faça um link para a página pessoal do(s) artista(s).
5

CSS
Apresentação
Vimos, no primeiro capítulo, a linguagem HTML, agora vamos conhecer um pouco do
CSS. O uso de CSS (Cascading Style Sheets) torna o projeto e manutenção de páginas mais
simples e elegantes. No capítulo a seguir, veremos como tornar nossas páginas mais fáceis de
manter.

Histórico e Origem
49
“A primeira e melhor vitória é conquistar a si mesmo.” (Platão)

CSS
A Cascading Style Sheet (CSS) ou Estilo em Cascata é uma ferramenta utilizada para a cons-
trução da aparência de páginas para a web, permitindo uma considerável redução no tempo de
trabalho. Quando o HTML foi criado, a intenção não era de
forma alguma formatar informação. À medida que o HTML
foi se popularizando e evoluindo na área de suas qualidades, www.uni-paderborn.de/mitteilung/39402/

houve a inclusão do domínio de controlar algumas aparências


para o documento. Isso fez com que a linguagem ficasse muito
complexa, mais difícil para se entender e manter.
Outro problema era que os browsers tinham diferenças de
implementações, o que dificultava a visualização dos sites, tra-
zendo menos controle na navegação pela web. Håkon Wium
Lie, vendo toda essa dificuldade, resolveu criar um jeito mais
fácil para formatar a informação. Foi aí que ele propôs a cria-
ção do CSS ou Cascading Style Sheet em 1994.
Em 1995, apresentaram sua proposta e finalmente, o
W3C – World Wide Web Consortium – que estava acabando de
nascer, se interessou pelo projeto e resolveu criar uma equipe,
obviamente liderada por Håkon e Bert Bos. Figura 24: Dr. Håkon Wium Lie
O resultado apareceu logo. Em 1996, lançaram a recomendação oficial pelo W3C do CSS
Level 1 (CSS 1). Dois anos depois, em 1998, lançaram a segunda versão das Folhas de Estilo para
web. A versão 3 do CSS ainda está em desenvolvimento.
As CSS (Folhas de Estilo em Cascata), permitem que você separe toda a formatação do
seu site do código (X)HTML. Enquanto você trabalha em cima do HTML, o CSS fica por conta
da formatação das fontes, cores, background, bordas, efeitos em links, etc., tudo isso concentrado
em um arquivo. Existem várias maneiras de se usar o CSS, seja interna ou externamente.

Introdução ao CSS
A CSS, ou as folhas de estilos em cascata, trouxe uma visão totalmente nova quanto ao
design de páginas da web e ao seu desenvolvimento. Usando a CSS, é possível separar completa-
mente o texto exibido em uma página da web (criada usando a linguagem HTML ou Hyper-Text
Markup Language) e as informações que descrevem como exibir e apresentar esse texto (definido
usando a CSS). A CSS foi introduzida para resolver problemas e ajudar a economizar tempo, e
ainda oferece mais possibilidades quanto ao design da aparência das páginas da web.
O princípio das folhas de estilo consiste em agrupar, em um mesmo documento, caracterís-
ticas de formatação associadas a grupos de elementos. Basta definir por um nome, um conjunto
de definições e características de formatação, e chamá-lo para aplicá-lo a um texto. Quando um
site, composto de várias centenas de páginas web, precisa ser alterado, graças às folhas de estilo,
basta alterar a definição das folhas de estilo em um só lugar para que se modifique a aparência
de todo o site.
50 Chamam-se “folhas de estilo em cascata” porque é possível definir vários itens, e os esti-
los podem ser herdados em cascata, permitindo obter uma apresentação homogênea sobre todo
um site, recorrendo a uma mesma definição de estilo para todas as páginas.
CSS

Atividades
1) O que é CSS?

2) Qual a diferença entre CSS e HTML?

3) O que podemos fazer com CSS?

4) Qual a versão atual do CSS?

5) Como podemos usar o CSS nas páginas web?


A Sintaxe Básica das CSS
“A vitória cabe ao que mais persevera.” (Napoleão Bonaparte)

Veremos, a seguir, como desenvolver a nossa primeira página, usando folhas de estilo. O
CSS é semelhante ao HTML, assim se você aprendeu bem as lições anteriores será muito fácil
aprender o CSS.
A sintaxe básica do CSS é:
Seletor {Propriedade: valor}

Em que:
• Seletor: é a tag HTML, à qual será aplicada uma propriedade.
• Propriedade: é o atributo do elemento HTML, ao qual será aplicada a regra (por exemplo:
font, color, background, etc...).
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra
tipo arial, cor azul, fundo verde, etc...)
Agora vamos ver como ficaria o código CSS. Nesse exemplo vamos apenas colorir a cor
de fundo.

body { background: blue }

51
Neste caso, temos apenas uma propriedade, caso tenhamos mais propriedades estas deverão
ser separadas por “;” , por exemplo:

CSS
h1{text-align: center; color:black}

Agrupando Vários Elementos


Uma regra CSS pode ser usada por vários seletores que podem ser agrupados como no
exemplo abaixo. Nesta forma cada seletor deve ser separado por uma vírgula.
Podemos ainda dizer que todos os Headers, H1, H2, H3, H4 são iguais, isto é, tem o
mesmo estilo. Como?

h1,h2,h3,h4,h5,h6{color: white}

No exemplo acima, agrupamos todos os elementos cabeçalho. A cor de todos os cabeça-


lhos será branca para contrastar com o fundo azul que aplicamos anteriormente.
Como Usar o CSS
Podemos usar o CSS de três maneiras:
• In-line: Nesta forma, aplica-se o CSS diretamente no elemento HTML;
• Interno: Cria-se um bloco de estilos dentro do código HTML;
• Externo: Esta é a maneira mais usual, pois criamos um arquivo separado. Neste caso,
dentro do código HTML existe somente um link para o arquivo.
Entre as três maneiras citadas, a que é recomendada é a forma externa, pois podemos
aplicar um mesmo estilo a várias páginas simultaneamente, além de facilitar a manutenção, pois
estaríamos atualizando um único arquivo. Nas demais formas, teríamos que alterar o código
de cada página ou arquivo HTML do site, procedimento que além de extremamente demorado
poderia causar erros.
O método utilizado no livro é o de ligar a página HTML a uma folha de estilos externa,
que nada mais é do que um simples arquivo de texto com a extensão .css. Vamos ver como
podemos usar:
Esta linha de código deve ser inserida no cabeçalho do documento HTML, isto é, entre
as tags <head> e </head>. Conforme mostrado abaixo:

<html>
<head>
<title>Minha primeira página com CSS</title>
<link rel=”stylesheet” type=”text/css” href=”estilo.css”>
</head>
52
<body>
CSS

Exemplo 26. Como inserir um link para um arquivo CSS

Comentários em CSS
Como em qualquer linguagem, comentários são usados para explicar o seu código, e
podem ajudar quando você editar o código-fonte em uma data posterior. Um comentário será
ignorado pelos browsers, e em CSS começa com “/*” e termina com “*/”, como este:

/ * Este é um comentário * /
p{
text-align: center;
/ * Este é outro comentário * /
color: black;
font-family: Arial
}
Atividades
1) Descreva a sintaxe básica do CSS.

2) O que é uma propriedade.

3) Quais são as possíveis formas de utilizarmos o CSS?

4) Qual a forma mais recomendada para ser utilizada? Por quê?

5) Exemplifique outras propriedades que podemos aplicar ao


seletor H1.

A Construção da sua Primeira


Folha de Estilos
“Eu sou um caminhante lento, mas eu nunca caminho para trás.” (Abraham Lincoln)

Vimos no capítulo anterior a sintaxe básica do CSS e as formas de usá-los. Agora, veremos
como criar a nossa primeira página com CSS, usando um arquivo externo.
Para criar nossa primeira página, digite o código HTML abaixo e salve com o nome 53
home.html:

CSS
<html>
<head>
<title>CSS</title>
<link rel=”stylesheet” type=”text/css” href=”estilo.css”>
</head>
<body>
<h1>Minha primeira folha de estilos</h1>
</body>
</html>

Exemplo 27: Primeira página usando CSS

Em seguida, abra outro arquivo e digite o código abaixo, salve-o com o nome estilo.css
e salve na mesma pasta.

body {background-color: blue;}


O arquivo home.html, possui um link para o arquivo estilo que contém por enquanto a
formatação do fundo da página.

<link rel=”stylesheet” type=”text/css” href=”estilo.css” />

O resultado será o apresentado na figura a seguir:

Figura 25: Tela do Exemplo 26

Agora, vamos acrescentar novos elementos ao nosso arquivo de estilos. Se quisermos


54 alterar a cor do título como visto no capítulo anterior, basta acrescentar o seguinte código:

h1{color: white}
CSS

Salve o arquivo e carregue novamente a tela e você verá algo parecido com a figura abaixo,
uma página com o fundo azul e a cor do título branca

Figura 26 : Tela do Exemplo 26 com a alteração da cor da fonte:


Poderíamos também acrescentar outras propriedades ao seletor body, como o tipo e a cor
da fonte do texto.

body
{
background-color: blue;
font-family : arial;
color : white;
}
h1{color: white}

Exemplo 27: Como utilizar o CSS para a formatação da página

Atividade
1) Altere o exemplo anterior, modificando as propriedades e
valores.

55

Bordas

CSS
“Pessimismo leva à fraqueza, otimismo ao poder.” (William James)

Outro elemento muito utilizado nas páginas são as bordas, que têm função decorativa ou
de separação de elementos. O CSS permite inúmeras combinações para gerar bordas.

A espessura das bordas


A espessura das bordas é definida pela propriedade border-width, que pode assumir
os valores thin, medium, e thick (fina, média e grossa), ou um valor numérico em pixels:
(1px ,10 px, 15px) .

Tipos de bordas
Existem vários tipos de bordas disponíveis para escolha. Em todos os tipos de bordas,
podemos utilizar a cor e a espessura que quisermos.
As bordas podem ser dotted (pontilhada) ou dashed( tracejada), entre outros formatos; a
seguir a imagem com os principais tipos de bordas:

Fonte: http://pt-<br.html.net/tutorials/css/lesson11.asp#s1>

Figura 27: Exemplo de Bordas

Usando as Bordas
O Código a seguir deve ser salvo como HTML, ele possui somente o conteúdo.

<html>
<head>
<title>Usando o Box Model</title>

56 <link rel=”stylesheet” type=”text/css” href=”estilo2.css”>


</head>
<body>
CSS

<h1>Como usar a expessura das bordas</h1>


<BR>
<h2>Pela Internet</h2>
<BR>
<h3>Gilberto Gil</h3>
<BR>
<p>
Criar meu web site<BR>
Fazer minha home-page<BR>
Com quantos gigabytes<BR>
Se faz uma jangada<BR>
Um barco que veleja ...<BR>
</p>
</body>
</html>

Exemplo 28: Código HTML


Em seguida digite o próximo exemplo e salve como estilo2.css

h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}

h2 {
border-width: medium;
border-style: outset;
border-color: red;
}

h3 {
border-width: thick;
border-style: double;
border-color: green;
}
p{
border-width: large;
border-style: dashed;
border-color: blue;
}

Exemplo 29: Formatando bordas com o CSS 57

CSS
Abra o arquivo HTML e visualize o resultado, que ficará semelhante à figura abaixo.

Figura 28: Tela do exemplo 29


Podemos também definir a altura e a largura das bordas com seguintes atributos:
• Width: largura
• Height: altura

Se acrescentarmos, no exemplo anterior, a altura e a largura como apresentado no código


abaixo, teremos um efeito diferente.

h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}

h2 {
border-width: medium;
border-style: outset;
border-color: red;
}

h3 {
height: 50px;
58 width: 200px;
border-width: thick;
border-style: double;
CSS

border-color: green;
}
p{
height: 100px;
width: 200px;
border-width: large;
border-style: dashed;
border-color: blue;
}

Exemplo 30: Alterando a largura e altura das bordas


Figura 29: Tela do exemplo 30

Veja que nos pontos onde alteramos a largura da borda, ela fica diferente do formato
padrão que é a largura da página. 59

CSS
Referências
Neste livro, demos somente algumas noções do CSS, existem
muitas outras propriedades que podem ser exploradas; para uma refe-
rência completa consulte o guia do W3C.
(http://www.w3c.br/divulgacao/guiasreferencia/css2/)

Atividade
Monte um exemplo, aplicando outros tipos de bordas.
6

JavaScript
Apresentação
O objetivo desta unidade é mostrar o conteúdo que é necessário para melhorar a
interação da página com o usuário. Mas por que abordar o assunto JavaScript? A web que o
usuário final vê é construída por três “camadas”: Conteúdo (HTML), Formatação (CSS)
e Comportamento (JavaScript, que incrementa o comportamento). Se todas essas camadas
forem bem construídas, o programador obterá os melhores resultados e uma maior satisfação
do cliente.

60

O que é JavaScript
JavaScript

“Dê um peixe a um homem faminto e você o alimentará por um dia. Ensine-o a pescar,
e você o estará alimentando pelo resto da vida.” (Confúcio)

JavaScript é uma linguagem de programação criada em 1995 por Brendan Eich, da Netscape,
como uma extensão do HTML, para o browser Netscape Navigator v2.0. JavaScript é uma lin-
guagem de programação utilizada para criar pequenos programas para realizar ações em uma
página web.
É também uma linguagem de script ou roteiro, orientada a objetos, usada para desenvol-
ver aplicações a clientes e permitir ao programador acrescentar ações em páginas escritas em
HTML.
O JavaScript não está relacionado ao Java. É uma linguagem de programação feita para
complementar as capacidades do HTML. O código de JavaScript é enviado ao cliente como
parte do código HTML de uma página, e pode ser utilizado para criar efeitos especiais, como
botões animados, sons etc.
O código JavaScript não é compilado e deve ser colocado no código fonte, junto com os
comandos da linguagem HTML, pois este não é suficiente para realizar todas as ações que se
podem necessitar em uma página web.
Com JavaScript, podemos criar efeitos especiais nas páginas e definir interatividades com
o usuário. Quando se acessa um site, alguns exemplos de scripts são: aparecimento da data/horá-
rio atual, saudações como “bom dia”, “boa tarde” ou “boa noite”. Graças a sua compatibilidade
com a maioria dos navegadores modernos, é a linguagem de programação mais utilizada.
Mesmo que você não conheça ou não tenha experiência em uma linguagem programação,
poderá aprender esta linguagem com facilidade e utilizá-la em suas páginas para criar conteúdos
dinâmicos e páginas interativas como programas e calculadoras.

Criando seu primeiro Script


Podemos embutir o código em qualquer lugar da página, entretanto é recomendável
colocar no início do código HTML, para facilitar a manutenção.

Estrutura Básica de um Script


Para inserirmos código JavaScript dentro de um documento HTML, é necessário delimitar
o conjunto de instruções

<SCRIPT LANGUAGE= “JavaScript”>


Instruções
</SCRIPT>

A exibição de informações para o usuário pode ser feita usando a função: 61

document.write(“mensagem”); ou alert(“mensagem”);

JavaScript
<HTML>
<HEAD>
<SCRIPT LANGUAGE=”JavaScript”>
document.write(“Bem-vindo à Linguagem JavaScript”)
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Exemplo 31: Página com uma mensagem de texto


Figura 30: Tela do exemplo 31

Importante
Em javaScript, se devem-se respeitar as maiúsculas e as minús-
culas, pois é uma linguagem case sensitive. Isso quer dizer que há
diferença entre maiúscula e minúscula. Portanto, document não é a
mesma coisa que Document, write não é a mesma coisa que Write e
assim por diante.

62

Caixas de Diálogo ou de Mensagem


JavaScript

“Ninguém se liberta de um hábito atirando-o pela janela: é preciso fazê-lo


descer a escada, degrau por degrau.” (Mark Twain)

Vimos que é possível escrever uma mensagem usando a linguagem JavaScript; agora,
vamos aprender um interessante recurso que é a possibilidade de criar caixas de diálogo sim-
ples, que podem ser muito úteis aos usuários que a visualizam.
Essas caixas de diálogo podem ser de alerta, de confirmação ou de prompt de entrada.
Todas elas são chamadas de forma simples e intuitiva por uma função.
Javascript coloca à disposição três caixas de mensagens:
• alert()
• prompt()
• confirm()

Vamos realizar algum exemplo de utilização dos métodos da janela e nos centrar nos
exemplos que servem para caixas de diálogo, que são muito úteis.
Usando o alert()
As caixas de diálogo de alerta são simples. Sua função é mostrar apenas uma mensagem,
com um botão de confirmação para que esta seja fechada.
Para chamar esta caixa de diálogo, usamos a função alert(). Esta função recebe como
parâmetro uma string que será a mensagem a ser exibida.
Em caixas de diálogo, há a possibilidade de controlar o texto usando \n para a quebra de
linhas.
Veja o código abaixo:

<HTML>
<HEAD>
<SCRIPT LANGUAGE=”JavaScript”>
alert (“Bem-vindo ao JavaScript!!!!”)
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Exemplo 32: Usando o alert para exibir uma mensagem


63

JavaScript

Figura 31. Tela do exemplo 32


<HTML>
<HEAD>
<SCRIPT LANGUAGE=”JavaScript”>
alert (“Esta é uma mensagem com várias linhas\n Linha 2: Depois da tormenta, sempre vem
a bonança.\n Linha 3: Não confie na sorte. O triunfo nasce da luta.”);
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Exemplo 33: Criando uma mensagem com várias linhas

64
Figura 32: Tela do exemplo 33
JavaScript

Usando o prompt()
A caixa de diálogo de prompt nos possibilita solicitar uma entrada. A função prompt()
recebe uma string como parâmetro. Esse parâmetro será a mensagem a ser exibida dentro da
caixa de diálogo. A caixa de diálogo de prompt possui três elementos:
• um campo de entrada para o texto,
• um botão OK e outro CANCELAR.

A função prompt() sempre irá retornar um valor, ou seja, podemos


gravar o resultado da função em uma variável ou algo assim. Se
clicarmos no botão OK, o valor que retornará será o que estiver escrito
no campo de texto, mesmo se ele estiver vazio. Se clicarmos em
CANCELAR, o valor retornado será null.
<HTML>
<HEAD>
<SCRIPT LANGUAGE=”JavaScript”>
ver nome=window.prompt(“Por favor, informe seu nome: “,””);
document.write(“Bem-vindo(a), “ +nome);
</SCRIPT>
</HEAD>
<BODY> </BODY> </HTML>

Exemplo 34: Interagindo com o usuário

Figura 33: Tela do exemplo 34

65

JavaScript

Figura 34: Resultado final do exemplo 34


Usando o confirm()
A caixa de diálogo de confirmação é chamada pela função confirm() e tem apenas dois
botões: um OK e outro CANCELAR. Assim como a função prompt(), a função confirm()
também retorna um valor que pode ser true (verdadeiro) ou false (falso). Isso a torna ideal para
ser usada com uma estrutura seletiva if. Neste capítulo, iremos apenas exemplificar; nas próxi-
mas páginas, falaremos melhor sobre o if.

<HTML>
<HEAD>
<SCRIPT LANGUAGE=”JavaScript”>
escolha = confirm(“Clique em um botão!”);
if (escolha)
{ alert (“Você clicou no botão OK,\n”+”valor: “+escolha); }
else
{ alert (“Você clicou no botão CANCELAR,\n”+”valor: “+escolha); }
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

66
Exemplo 35: Usando o confirm
JavaScript

Figura 35: Tela do exemplo 35

Comentários, Variáveis e Operadores


“Pedras no caminho? Guardo todas, um dia vou construir um castelo...” (Fernando Pessoa)

Um comentário é uma parte de código que não é interpretada pelo navegador. O pro-
gramador, à medida que desenvolve o script, vai deixando frases ou palavras soltas, chamadas
comentários, que o ajudam (ou a qualquer outra pessoa) a ler mais facilmente o script na hora
de modificá-lo ou depurá-lo.
Veja exemplos:

<SCRIPT>
//Este é um comentário de uma linha
/*Este comentário pode se expandir por várias linhas.
As que quiser*/
</SCRIPT>

Exemplo 36

Váriáveis
Variável é uma posição de memória que pode conter um valor qualquer em determinado
ponto do programa. As variáveis contêm dados que podem ser modificados durante a execução
de um programa.
É necessário dar-lhes um nome, para que se (depois) for necessário ler ou manipular o
que foi armazenado, baste pedir a leitura, usando o nome que foi dado. Toda variável tem um
nome e um valor.

Nomes de variáveis
Pode-se dar qualquer nome para uma variável. Porém, existem algumas regras e restrições:
– Um nome de variável não pode começar com um número. Em outras partes do nome 67
sim, mas no começo não.
– Caracteres especiais como: +, *, \, /, !, etc. - não podem ser usados como parte do nome

JavaScript
de uma variável.
– O underline ou underscore (_) pode ser usado livremente, tanto no começo, como no
meio ou fim do nome da variável.
– Espaços são proibidos.
– Existem palavras reservadas pela linguagem como: window, if, else, etc... Estas palavras
não podem ser usadas.

O nome das variáveis é case sensitive, isto é, existe a diferencia-


ção entre maiúsculas e minúsculas.

O JavaScript adota um sistema de gerenciamento mais amigável das variáveis. Enquanto


que em algumas linguagens é necessário haver uma definição sobre o quê exatamente uma
variável guardará (um texto, um número inteiro, um número decimal, uma lista, etc...), no
JavaScript isso não é necessário. Se um usuário quiser guardar um número na variável, tal ação
lhe é permitida; ou se, logo após, resolver colocar seu nome na mesma variável, não haverá
problema.
Operadores
São símbolos, em geral de um ou poucos caracteres, que permitem operações aritméticas,
lógicas, etc. Em outras palavras, são usados basicamente para modificar valores de variáveis.
Nesta página, são dados os operadores de JavaScript em forma de tabelas classificadas por grupo
funcional.

Operadores aritméticos

Operador Descrição Exemplo(s)

a = 5+2
+ Soma valores.
b = b +1

x=x–5
– Subtrai valores.
x=a–b

a=2*3
* Multiplica valores.
b=c*5

a = 50 / 3
/ Divide valores.
b=b/4

d=5%3
68 % Resto da divisão.
d assume valor 2

(var)++ Incremento. X++


JavaScript

(var)– – Decremento. X– –;

Atribui o valor do operando esquerdo x=3


=
ao operando direito. a=b+c

Operadores Aritméticos

Conversão de Valores
“Todas as flores do futuro estão nas sementes de hoje.” (Provérbio chinês)

Diferentemente da maioria das linguagens, o JavaScript define as variáveis dinamica-


mente. Portanto, ao atribuir uma variável, ele escolhe o tipo conforme o valor passado para a
variável, não sendo necessário especificá-lo.
Conversão de Valores
O JavaSscript entende que o que é digitado é uma string. Por isso
ao se trabalhar com números é necessário fazer a devida conversão.
Esta conversão pode ser feita das seguintes formas:
• eval() - Converte uma string para um valor inteiro ou ponto flutuante;
• parseInt ( ): converte uma string em um número inteiro,
• parseFloat( ): converte uma string em um número de ponto flutuante.

Exemplo Usando o eval()

<HTML>
<HEAD>
<SCRIPT LANGUAGE=”JavaScript”>
var n1,n2,soma,num1,num2;
n1=eval(window.prompt(“Por favor, informe o primeiro número: “,””));
n2=eval(window.prompt(“Por favor, informe o segundo número: “,””));
soma=n1+n2;
document.write(“A soma é: “ +soma);
</SCRIPT>
</HEAD> 69
<BODY>
</BODY>

JavaScript
</HTML>

Exemplo 37: Usando conversão de valores

Figura 36.
Exemplo usando parseInt()

<HTML>
<HEAD>
<SCRIPT LANGUAGE=”JavaScript”>
var n1,n2,soma,num1,num2;
n1=window.prompt(“Por favor, informe o primeiro número: “,””);
n2=window.prompt(“Por favor, informe o segundo número: “,””);
num1=parseInt(n1);
num2=parseInt(n2);
soma=num1+num2;
document.write(“A soma é: “ +soma);
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Exemplo 38: Conversão de inteiros

Exemplo usando parseFloat()


70
<HTML>
<HEAD>
JavaScript

<SCRIPT LANGUAGE=”JavaScript”>
var n1,n2,media,num1,num2;
n1=window.prompt(“Por favor, informe a primeira nota: “,””);
n2=window.prompt(“Por favor, informe a segunda nota: “,””);
num1=parseFloat(n1);
num2=parseFloat(n2);
media=(num1+num2)/2;
document.write(“Sua média é: “ +média);
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>

Exemplo 39: Conversão de Reais


Atividades
1) O que é uma linguagem de script?

2) Explique qual é a vantagem de utilizar código JavaScript em


uma página HTML.

3) JavaScript permite código externo? Explique como fazer.

4) Construa uma página em que apareça a mensagem de “Feliz


Aniversário!!!”

5) Construa uma página e coloque uma mensagem com quebra


de linha.

6) Construa uma página que leia o valor de uma compra e calcule


10% de desconto.

7) Construa uma página que leia o valor do dólar, a quantidades


de dólares a ser trocada e informe o valor em Real.

8) Construa uma página que leia a temperatura em graus centí-


grados e converta para Farenheit.

9) Construa uma página que leia 4 números e mostre a média


ponderada, sabendo-se que os pesos são respectivamente: 71
1, 2, 3 e 4.

JavaScript
10) Construa uma página que leia o saldo de uma aplicação e
imprima o novo saldo, considerado o reajuste de 1%.

11) Construa uma página que calcule o valor de uma prestação


em atraso, utilizando a fórmula:

PRESTAÇÃO = VALOR + (VALOR * (TAXA/100) * TEMPO).

12) Faça um programa que leia o número do funcionário, o número


de horas trabalhadas mensais, o valor que recebe por hora e
o número de filhos com idade menor de 14 anos. Ele deve cal-
cular e escrever o salário deste funcionário, sendo que a cada
filho menor de 14 anos acrescenta-se 10% de salário.

13) O custo ao consumidor de um carro novo é a soma do custo


de fábrica com a percentagem do distribuidor e dos impostos
(aplicados ao custo de fábrica). Supondo que a percentagem
do distribuidor seja de 28% e os impostos de 45%, escreva um
programa que leia o custo de fábrica de um carro e escreva o
custo ao consumidor.
7

Estruturas Condicionais e
de Repetição
Estrutura Condicional
“A distância entre o sonho e a realidade chama-se trabalho.” (Anônimo)

A estrutura condicional também é conhecida como estru-


72 tura de decisão ou de seleção: ela se caracteriza pela execução
de determinados códigos de programação, dependendo da vera- Sintaxe:
cidade de uma condição. O comando só será executado se a SE condição
Estruturas Condicionais e de Repetição

condição for verdadeira. Uma condição é uma comparação ENTÃO comando


que possui dois valores possíveis, verdadeiro ou falso.
Na sua formulação, a mais simples, a expressão if apresenta-se assim:

if (condição verdadeira)
{
uma ou várias instruções;
}

Desta forma, se a condição é verdadeira, as instruções executam-se. Se ela não é, as


instruções não se executam e o programa passa para o comando seguinte. Na estrutura con-
dicional composta de um conjunto de comandos executados, os procedimentos se dão de uma
forma se a condição especificada for verdadeira e de outra se a condição for falsa.
De maneira um pouco mais evoluída, tem-se a expressão if...else

if (condição verdadeira)
{
instrução1;
}
else
{
instrução2;
}

Se for verdadeira (true), o bloco de instruções 1 se executa. Se ela não for verdadeira (false),
o bloco de instruções 2 se executa.

<HTML>
<HEAD>
<SCRIPT LANGUAGE=”JavaScript”>
ver resposta = confirm(“Você gosta de maçã?”)
if ( resposta == true )
{
document.write( “<p>Eu também gosto!<\/p>” ); 73
}
else

Estruturas Condicionais e de Repetição


{
document.write( “<p>Não gosta???<\/p>” );
}
</SCRIPT>
</HEAD>
</BODY>
</HTML>

Exemplo 40: Usando a estrutura condicional

Figura 37
Figura 38

Atividades
1) Construa um script que leia o nome e as 3 notas de um aluno,
considerando a média 7; calcule a média e informe se o aluno
está aprovado ou reprovado segundo o modelo:
74
Fulano, você está aprovado com média X.
Estruturas Condicionais e de Repetição

2) Construa um script que leia e idade de uma pessoa e informe


a sua classe eleitoral: não eleitor (abaixo de 16 anos); eleitor
obrigatório (entre a faixa de 18 e menor de 65 anos); eleitor
facultativo (de 16 até 18 anos e maior de 65 anos, inclusive).

3) Escreva um algoritmo para ler dois valores numéricos e apre-


sentar a diferença do maior pelo menor.

4) Faça um algoritmo que leia um número e mostre uma mensa-


gem indicando se este número é par ou ímpar e se é positivo
ou negativo.

5) Faça um algoritmo que leia um número inteiro, e verifique


se o número corresponde a um mês válido no calendário e
escreva o nome do mês, se não, escreva uma mensagem ‘Mês
Inválido’.
6) Um Banco concederá um crédito especial, variável com o saldo
médio, no último ano, aos seus clientes. Faça um algoritmo
que leia o saldo médio de um cliente e calcule o valor do cré-
dito de acordo com a tabela abaixo. Mostre uma mensagem
informando o saldo médio e o valor do crédito.

Saldo médio Percentual

de 0 a 200,00 nenhum crédito (crédito = 0)

de 201,00 a 400,00 20% do valor do saldo médio

de 401,00 a 600,00 30% do valor do saldo médio

acima de 600,00 40% do valor do saldo médio

Operadores Relacionais e Lógicos


“Se fiz descobertas valiosas, foi mais por ter paciência do que qualquer outro talento.” (Isaac Newton)

Os operadores lógicos e relacionais são elementos importantes para a tomada de decisões


e para o consequente desvio do fluxo do programa.
Graça aos operadores lógicos e e ou, pode-se testar uma associação de condições. 75
Assim if ((condição1) && (condição2)), testará se a condição 1 e a condição 2 são
realizadas. E if ((condição1) || (condição2)), testará se pelo menos uma das condições é

Estruturas Condicionais e de Repetição


verdadeira.

Operadores lógicos

Operador Descrição Exemplo(s), seja a = 3 e b = 5

E lógico: retorna verdadeiro se ambas


&& as expressões são verdadeiras e falso a==3 && b<10 // retorna verdadeiro
nos demais casos;

OU lógico: retorna verdadeiro se pelo


a==3 || b<10 // retorna verdadeiro
|| menos uma das expressões é verda-
a==1 || b==3 // retorna falso
deira e falso se todas são falsas;

NÃO lógico: retorna verdadeiro se o


! ! (a==3) // retorna falso
operando é falso e vice-versa.

Tabela 1: Operadores Lógicos


Tabela-Verdade
Uma tabela-verdade é construída com a finalidade de mostrar exatamente os casos em
que uma expressão será verdadeira (V) ou falsa (F). Admitindo-se, como é sabido, que o seu
valor lógico só depende dos valores lógicos das proposições simples. Abaixo, temos exemplos
da tabela verdade com os operadores E (&&) e OU (||).

Operadores de comparação

Operador Descrição Exemplo(s), supondo a = 3 e b = 5

a == 3; // retorna verdadeiro
== Igual
a == b; // retorna falso

a != 3; // retorna falso
!= Diferente
a != b; // retorna verdadeiro

a > b; // retorna falso


> Maior
b > a; // retorna verdadeiro

a >= 3; // retorna verdadeiro


>= Maior ou igual
b >= 7; // retorna falso

a < b; // retorna verdadeiro


76 < Menor
b < a; // retorna falso

a <= 3; // retorna verdadeiro


Estruturas Condicionais e de Repetição

<= Menor ou igual


a <= 0; // retorna falso

Tabela 2: Operadores Relacionais

O código abaixo exemplifica o uso de operadores relacionais e lógicos para apresentar


uma mensagem de Bom dia, Boa Tarde ou Boa Noite, de acordo com a hora do dia:

<html>
<head><title>Modelo com mensagem</title>
<SCRIPT language=”JavaScript”>
day = new Date()//Função que captura a data
hr = day.getHours()//Função que extrai a hora
if ((hr>=1)&&(hr<12))
{
document.write(“Bom Dia”);
}
if ((hr>=12)&&(hr<=18) )
{
document.write(“Boa tarde”);
}
if ((hr>18)&&(hr<=24) )
{
document.write(“Boa Noite”);
}
</SCRIPT>
</head>
</HTML>

Exemplo 41: Usando o if com operadores lógicos e relacionais

77

Estruturas Condicionais e de Repetição


Figura 39: Tela do exemplo 41

Seleção de Múltipla Escolha


“É tentando o impossível que se chega à realização do possível.” (Henri Barbusse)

A seleção de múltipla escolha compara


um dado valor a constantes, desviando o fluxo
Os cases são as possibilidades que o switch
de código para o ponto indicado pela primeira
deve obter; podem ser um número, um caracter
constante onde há casamento. A instrução switch
ou até mesmo uma string. Porém, jamais
é uma maneira mais elegante de fazer a escolha poderemos fazer uma comparação com o case
de uma opção. Caso a instrução if .. else seja usada (ex.: media>=7), porque o case apenas aceita
para vários testes, acaba sendo gerado uma série comparação de igualdade.
de if´s e dificulta-se em muito a leitura do script.
Para utilizarmos o comando switch, primeiramente, passamos para o comando da entrada
a ser avaliado, o que na maioria das vezes será uma variável. Depois, abrimos um bloco de dados
( { } ). Dentro deste bloco de dados usamos o case.
Sua estrutura básica é:
switch(variável)
{ case 1:
document.write(‘Opção 1’);
break;
case 2:
document.write(‘Opção 2’);
break;
case 3:
document.write(‘Opção 3’);
break;
default:
document.write(‘Padrão’);
break;
}

Exemplo 42: Usando o case

Comando break
Se usarmos o comando break antes do início do próximo case, obrigamos o algoritmo a sair
de toda estrutura switch e o case seguinte não será executado.
78
Comando default
O default só é ativado quando nenhum outro case é ativado. É como se fosse uma forma
Estruturas Condicionais e de Repetição

de saber o que fazer caso nada de esperado aconteça. Cada estrutura switch pode conter apenas
um default.

<HTML>
<HEAD>
<script type=”text/javascript”>
var d = new Date()
theDay=d.getDay()
switch (theDay)
{
case 5:
document.write(“Hoje é sexta-feira!!!!”)
break
case 6:
document.write(“Hoje é Sábado- Dia de Festa”)
break
case 0:
document.write(“Hoje é Domingo- Dia de Descanso”)
break
default:
document.write(“Dia de Trabalho :(“)
}
</script>
</HEAD>
<BODY>
</BODY>
</HTML>

Exemplo 43: Usando o case na página

79

Estruturas Condicionais e de Repetição


Figura 40: Tela do exemplo 43

Laços de Repetição
“Eis a fórmula do sucesso: define o teu objetivo, investe nele, e dá o teu melhor para o alcançares.” (Michael Skok)

Um laço de repetição é uma sequência de ações que são repetidas por um número espe-
cífico de vezes, até que uma condição seja satisfeita. Enquanto a condição for verdadeira, as
instruções serão executadas. O laço de repetição também pode ser chamado de loop.
Os laços de repetição são ferramentas poderosas para o controle do fluxo de execução do
programa. Eles permitem que um determinado trecho de código seja executado até que uma
condição específica seja satisfeita. Estão associados a uma estrutura de repetição, uma condição
(também chamada “expressão de controle” ou “condição de parada”) e a um bloco de código:
verifica a condição, e caso seja verdadeira, o bloco é executado. Após o final da execução do
bloco, a condição é verificada novamente, e caso ela ainda seja verdadeira, o código é executado
novamente.
Laço For
A construção “para” é uma estrutura de repetição que designa uma variável de controle
para cada interação do bloco, e uma operação de passo a cada interação. Sua estrutura básica é
a seguinte:

for (valor inicial ; condição ; incremento)


{
instruções;
}

<html>
<head>
<script type=”text/javascript”>
var i=0;
for (i=0;i<=5;i++)
{
document.write(“O número é: “ + i);
document.write(“<br />”);
}
</script>
80 </head>
</html>
Estruturas Condicionais e de Repetição

Exemplo 44: Escrevendo números de 1 a 5 com o laço para

Figura 41: Tela do exemplo 44


While
O while também repete um bloco por determinado número de vezes, enquanto determi-
nada condição for verdadeira:
Sintaxe:

while( condição de execução )


{
Instruções;
}

<HTML>
<HEAD>
<SCRIPT LANGUAGE=”JavaScript” TYPE=”text/javascript”>
var i = 0;
while (i<=5)
{
document.write (“ O número é: “+ i);
i++;
}
</SCRIPT>
</HEAD> 81
<BODY>
</BODY>

Estruturas Condicionais e de Repetição


</HTML>

Exemplo 45: Usando while para escrever de 1 a 5

Figura 42
Deve-se observar que, caso o bloco de código nunca modifique
o estado da condição, a estrutura será executada para sempre, uma
situação chamada laço infinito. Da mesma forma, é possível especificar
uma estrutura em que o bloco de código modifica o estado da condi-
ção, mas esta é sempre verdadeira.

Atividades
1) Faça um programa que solicite ao usuário que digite valo-
res numéricos inteiros positivos. Encerre a entrada de dados
quando for digitado um número negativo ou zero. Calcule a
média dos números positivos digitados.

2) Faça um programa que solicite ao usuário 10 números inteiros


e, ao final, informe a quantidade de números ímpares e pares
lidos. Calcule também a soma dos números pares e a média
dos números ímpares.

3) Uma determinada empresa armazena para cada funcionário


(10 no total) uma ficha contendo o código, o número de horas
trabalhadas e o seu número de dependentes.
Considerando que:
82
a. A empresa paga 12 reais por hora e 40 reais por dependente.
b. Sobre o salário são feitos descontos de 8,5% para o INSS e 5%
Estruturas Condicionais e de Repetição

para IR.
Faça um programa para ler o código, número de horas traba-
lhadas e número de dependentes de cada funcionário. Após a
leitura, escreva qual é o código, os valores descontados para
cada tipo de imposto e finalmente o salário líquido de cada um
dos funcionários.

4) Em uma pesquisa de campo, uma editora solicitou os seguin-


tes dados para os entrevistados: sexo, idade e quantidade de
livros que leu no ano de 2006. Faça um programa que leia os
dados digitados pelo usuário, sendo que deverão ser solicita-
dos dados até que a idade digitada seja um valor negativo.
Depois, calcule e imprima:
a. A quantidade total de livros lidos pelos entrevistados menores
de 10 anos.
b. A quantidade de mulheres que leram 5 livros ou mais.
c. A média de idade dos homens que leram menos que 5 livros.
d. O percentual de pessoas que não leram livros.
5) Foi realizada uma pesquisa com 200 pessoas que assistiram a
uma peça de teatro, com relação a sua opinião sobre a mesma.
Cada espectador respondeu a um questionário que solicitava
os seguintes dados:
– idade da pessoa;
– o identificador da pessoa;
– opinião em relação à peça (nota de 0 a 10).
Faça um programa que, a partir destes dados, calcule e
imprima:
a. A quantidade de respostas 10.
b. A média de idade das pessoas que responderam ao
questionário.
c. A porcentagem de pessoas que deram nota 5 ou menos na
opinião sobre peça.
d. O identificador da pessoa mais velha, considere que a maior
idade não é repetida.

6) Foi feita uma pesquisa para saber o perfil dos alunos que cur-
sam o ginásio de uma determinada escola. Cada aluno fornecia
a sua série (primeira-1, segunda-2, terceira-3 ou quarta-4),
quantos livros liam por mês e se gostavam de fazer redação
(Sim-1 ou Não-0). Faça um programa que leia os dados, cal-
cule e imprima:
• A quantidade de alunos que está na terceira série; 83
• A maior quantidade de livros lidos por um aluno que está na
quarta série;

Estruturas Condicionais e de Repetição


• A porcentagem de alunos que não gostam de fazer redação e
que estão na terceira série.
Obs: A condição de parada (flag) é que seja digitado 0 (zero)
para idade.
8

Funções
“Não espere por uma crise para descobrir o que é importante na sua vida.” (Platão)

Uma função poderia ser definida como um conjunto de instruções que permitem pro-
cessar as variáveis para obter um resultado. Uma função é um grupo de linha(s) de código de
programação destinado a uma tarefa bem específica e que podemos, se necessário, utilizar várias
vezes. A utilização de funções melhora bastante a leitura do script.
Em qualquer linguagem de programação, uma função consiste em uma porção de código
que resolve um problema específico, parte de um problema maior.
Por que usar?
As vantagens no uso de funções para compor um programa incluem:
84 • Redução de código duplicado;
• Possibilidade de reutilização do código em outros programas;
Funções

• A decomposição de um problema grande em pequenas partes;


• Melhor interpretação visual do código.
Em JavaScript, existem dois tipos de funções:
• As funções próprias do JavaScript são denominadas de “métodos” e são associadas a um
objeto bem particular como o caso do método alert().
• As funções escritas pelo programador são estas que vão nos interessar agora.

FUNÇÕES
Funções são usadas para criar pequenos trechos de códigos,
separados do script principal. Esses trechos de códigos podem gerar
um resultado (o que chamamos de funções com retorno) ou apenas
executar uma rotina (funções sem retorno). Funções também são úteis
para serem facilmente chamadas em eventos com o clique ou para
submeter um formulário. Toda função deve ter um nome e possuir um
delimitador de parâmetro que é identificado com parênteses.
Criando uma função
A criação de uma função é simples.

function nome da função()


{
Comandos;
}

As funções são declaradas pela palavra reservada function seguido pelo identificador,
seguido por parâmetros delimitados por “(“ abre parênteses e “)” fecha parênteses e do corpo
dela que é delimitado por “{“ abre chave e “}” fecha chave, exemplo :

function quadrado(x)
{
return x*x;
}

Funções sem Retorno


Funções sem retorno são ideais para criar pequenos trechos de script que serão repetidos
várias vezes durante o código.
Veja este exemplo completo:

<HTML>
<HEAD> 85
<script language= “javascript”>
function idade (idade)

Funções
{
if ( idade >= 18)
{
document.write( “ Você é maior de idade “ );
}
else
{
document.write( “ Você é menor de idade “ );
}
}
n1=window.prompt(“Por favor, informe sua idade”,””);
id=parseInt(n1);
idade(id);

</script>

</HEAD>
<BODY>
</BODY>
</HTML>

Exemplo 46: Usando funções sem retorno


Figura 43: Tela do exemplo 46

Figura 44: Continuação da tela do exemplo 46

86 Convém verificar (porque o browser lê o script de cima para baixo)


que a sua função deve estar definida antes de chamá-la.
Funções

Atividades
1) Crie uma função para calcular o quadrado de um número.

2) Crie uma função para calcular a média de dois valores.

3) Crie uma função para calcular a área das seguintes figuras


geométricas:
• Quadrado
• Retângulo
• Triângulo
• Círculo
Tipos de Funções
“Concentre-se naquilo que tem na sua vida e terá sempre mais. Concentre-se no
que não tem e nunca terá o suficiente.” (Oprah Winfrey)

Funções com Retorno


Funções com retorno são criadas da mesma forma das funções sem retorno. Sua diferença
principal é que esta função devolve um resultado para o script. Por exemplo, podemos gerar um
resultado de uma soma e devolver este resultado para o script. Para que uma função retorne
algum valor usamos a palavra reservada return.

<html>
<head>
<script type=”text/javascript”>
function myFunction()
{ return (“Hello world!”); }
</script>
</head>
<body>
<script type=”text/javascript”>
87
document.write(myFunction())
</script>

Funções
</body>
</html>

Exemplo 47: Usando função com retorno

Figura 45: Tela do exemplo 47


Funções com Parâmetros ou Argumentos
Muitas vezes, funções devem receber dados para processá-los. A inserção de dados na
função é dada por meio dos parâmetros ou argumentos da função.
Uma função pode ter quantos parâmetros forem necessários, desde que cada um seja
separado por vírgula e não tenha a mesma denominação.

<html>
<head>
<script type=”text/javascript”>
function product(a,b)
{ return a*b;}
</script>
</head>
<body>
<script type=”text/javascript”>
document.write(“O resultado é: “ + product(4,3));
</script>
</body>
</html>

Exemplo 48: Funções com parâmetro

88
Funções

Figura 46: Tela do exemplo 48

<html>
<head>
<script type=”text/javascript”>
function ObterNomeDoDia (DiaDaSemana)
{
var Dia;
if (DiaDaSemana == 0)
Dia= ‘Domingo’;
else if (DiaDaSemana == 1)
Dia= ‘Segunda-feira’;
else if (DiaDaSemana == 2)
Dia= ‘Terça-feira’;
else if (DiaDaSemana == 3)
Dia= ‘Quarta-feira’;
else if (DiaDaSemana == 4)
Dia= ‘Quinta-feira’;
else if (DiaDaSemana == 5)
Dia= ‘Sexta-feira’;
else if (DiaDaSemana == 6)
Dia= ‘Sábado’;
else
Dia= ‘’;
return Dia;
}

function MostrarNomeDoDia ()
{
var DataHora, Nome;
DataHora= new Date (); 89
Nome = ObterNomeDoDia (DataHora.getDay ());
alert (‘Hoje é: ‘ + Nome);

Funções
}
</script>
</head>
<body onload=”MostrarNomeDoDia ()”>
</body>
</html>

Exemplo 49: Usando funções de data

Figura 47: Tela do exemplo 49


O Objeto Math
“O bem que praticares num lugar é teu advogado em qualquer parte.” (Chico Xavier)

Frequentemente é necessário fazer operações matemáticas nas aplicações. O JavaScript


possui suporte nativo para as operações básicas mais utilizadas. Nesta lição, apresentaremos os
métodos e propriedades do objeto Math do JavaScript.
O objeto Math é um objeto embutido do JavaScript que inclui funções e constantes mate-
máticas. Você não precisa criar um objeto Math, porque ele existe automaticamente em qualquer
programa JavaScript.
Vamos verificar os métodos e o que cada um faz:

Método Descrição

abs(x) Retorna o valor absoluto do número passado por parâmetro.

acos(x) Retorna o arco cosseno do número passado por parâmetro.

asin(x) Retorna o arco seno do número passado por parâmetro.

Retorna o arco tangente do número passado por parâmetro. O valor numérico fica
atan(x)
sempre entre – π e π radianos.
2 2

90 Retorna o ângulo teta de um ponto (x,y). O valor numérico fica sempre entre –π e π
atan2(x,y)
radianos.
Funções

Arredonda o número para cima, ou seja, retorna o maior valor inteiro mais próximo
ceil(x)
do número passado por parâmetro.

cos(x) Retorna o cosseno do número passado por parâmetro.

Retona o valor de E (número de Euler) elevado ao expoente X, que é o número pas-


exp(x)
sado por parâmetro.

Arredonda o número para baixo, ou seja, retorna o menor valor inteiro mais próximo
floor(x)
do número passado por parâmetro.

log(x) Retorna o logaritmo natural na base E do número passado como parâmetro.

max(x,y) Retorna o maior número. Se X for maior, retorna X, caso contrário retorna Y.

min(x,y) Retorna o menor número. Se X for menor, retorna X, caso contrário retorna Y.

pow(x,y) Retorna o valor da base X elevado ao expoente Y.


random() Retorna um número aleatório entre 0 e 1.

round(x) Arredonda o número passado como parâmetro para o valor inteiro mais próximo.

sin(x) Retorna o seno do número passado como parâmetro.

sqrt(x) Retorna a raiz quadrada do número passado como parâmetro.

tan(x) Retorna a tangente do número passado como parâmetro.

Como usar?
Método pow: Retorna o valor de uma base elevada a uma determinada potência.

<html>
<head>
<script language=”javascript”>
var res = Math.pow(4, 5);
document.write(“4 elevado ao exponente 5 é “ + res);
</script>
</body>
</html>

Exemplo 50: Usando métodos matemáticos 91

Funções

Figura 48: Tela do exemplo 50


Método max: Retorna o maior, de zero ou mais números.

<html>
<head>
<script language=”javascript”>
var maior = Math.max(4, 6, 2, 9);
document.write(“O maior número é “ + maior);
</script>
</head>
</html>

Exemplo 51: Usando o método max

92
Funções

Figura 49: Tela do exemplo 51

<html>
<head>
<script type=”text/javascript”>
document.write(Math.max(5,7) + “<br />”);
document.write(Math.max(-3,5) + “<br />”);
document.write(Math.max(-3,-5) + “<br />”);
document.write(Math.max(7.25,7.30));
</script>
</head>
</html>

Exemplo 52: Usando o método max de várias formas


Figura 50: Tela do exemplo 52

Método min: Retorna o menor de zero ou mais números.

<html>
<head>
<script language=”javascript”>
var menor = Math.min(4, 6, 11, 2, 9);
document.write(“O menor número é “ + menor);
</script>
93
</head>
</html>

Funções
Exemplo 53: Usando o método min

Figura 51: Tela do exemplo 53


Método sqrt: Retorna a raiz quadrada de um valor.

<html>
<head>
<script language=”javascript”>
var raiz2 = Math.sqrt(9);
document.write(“A raiz quadrada de 9 é “ + raiz2);
</script>
</head>
</html>

Exemplo 54: Usando o método sqrt

94
Funções

Figura 52: Tela do exemplo 54

Método random: Retorna um número aleatório entre 0 e 1.

<html>
<head>
<script type=”text/javascript”>
document.write(Math.random());
</script>
</head>
</html>

Exemplo 55: Usando o método random


Figura 53: Tela do exemplo 55

Retorna um número aleatório entre 0 e 10

<html>
<head>
<script language=”javascript”>
var numero = Math.floor(Math.random() * 11);
document.write(“O número gerado foi “ + numero);
</script>
</head>
</html> 95

Funções
Exemplo 56: Gerando números entre 0 e 10

Figura 54: Tela do exemplo 56

Nos exemplos com números randômicos; a cada vez que você


rodar o script, ele irá gerar um número diferente.
Data e Hora
“Não corrigir as nossas falhas é o mesmo que cometer novos erros.” (Confúcio)

Para obter a data (e a hora) atual com o JavaScript, basta instanciar um objeto novo do tipo
Date. Este método reenvia todas as informações “data e hora” do computador do utilizador. O
objeto Date é um objeto embutido no JavaScript que permite trabalhar com datas e horas. Você
pode criar um objeto Date sempre que precisar armazenar uma data e utilizar os métodos do
objeto Date para trabalhar com a data.
O objeto Date não tem propriedades, para configurar ou obter valores de um objeto Date,
você deve utilizar outros métodos, que serão abordado logo a seguir.

variavel=new Date();

Principais Métodos:

Método Descrição

getDate(): Devolve o dia do mês;

getDay(): Devolve o dia da semana;

getHours() Retorna a hora;


96
getMinutes() Devolve os minutos;
Funções

getMonth() Devolve o mês (atenção ao mês que começa por 0);

getSeconds() Devolve os segundos;

Retorna o ano com todos os dígitos. Usar este método para estar certo de que
getFullYear()
funcionará bem em datas posteriores ao ano 2000.

Note que o mês inicia com zero e não um. Se você não somar 1,
janeiro aparecerá como 0 e dezembro como 11. Já os dias do mês vão
de 1 a 31, não é preciso somá-los.
Os dias da semana também iniciam em zero, representando o
domingo, e vão até seis (sábado).
Exemplos dos Métodos de Data e Hora

<html>
<head>
<script language=”javascript”>
var data = new Date();
var dia = data.getDate();
document.write(“Dia do Mês: “ + dia);
</script>
</head>
</html>

Exemplo 57: Usando métodos de data e hora

97

Funções
Figura 55: Tela do exemplo 57

<html>
<head>
<script language=”javascript”>
var data = new Date();
var hora = data.getHours();
document.write(“O valor da hora é: “ + hora);
</script>
</head>
</html>

Exemplo 58: Como receber a hora do sistema


Figura 56: Tela do exemplo 58

Exemplos de Data e Hora


“Escolhe um trabalho de que gostes e não terás de trabalhar nem um dia na tua vida.” (Confúcio)

Agora, exemplificaremos como utilizar os métodos de data e hora do JavaScript.

<html>
<head>
98
<script language=”javascript”>
var data = new Date();
Funções

var ano = data.getFullYear();


document.write(“Estamos no ano: “ + ano);
</script>
</head>
</html>

Exemplo 59: Como receber o ano do sistema


Figura 57: Tela do exemplo 59

<html>
<head>
<script language=”javascript”>
var data = new Date();
document.write(“Hoje é: “ + data.toLocaleDateString());
</script>
</head>
</html>
99

Exemplo 60: Como receber a data completa do sistema

Funções

Figura 58: Tela do exemplo 60


<html>
<head>
<script language=”javascript”>
var data = Date();
document.write(“Data e hora atuais: “ + data);
</script>
</head>
</html>

Exemplo 61: Data no formato americano

100
Figura 59: Tela do exemplo 61
Funções

<html>
<head>
<script type=”text/javascript”>
var hoje = new Date();
var fimAno = new Date(hoje.getFullYear(), 11, 31);
var dia = 1000 * 60 * 60 * 24;
var restantes = Math.ceil((fimAno.getTime() - hoje.getTime()) / (dia));
document.write(‘Faltam ‘ + restantes + ‘ dias para o fim do ano.’);
</script>
</head>
</html>

Exemplo 62: Cálculo com data


Figura 60: Tela do exemplo 62

<html>
<head>
<title>Relógio com Javascript</title>
<script language=”JavaScript”>
function moveRelogio(){
momentoAtual = new Date()
hora = momentoAtual.getHours()
minuto = momentoAtual.getMinutes()
segundo = momentoAtual.getSeconds() 101

horaImprimivel = hora + “ : “ + minuto + “ : “ + segundo

Funções
document.form_relogio.relogio.value = horaImprimível
setTimeout(“moveRelogio()”,1000)
}
</script>
</head>
<body onload=”moveRelogio()”>
Vemos aqui o relógio funcionando...
<form name=”form_relogio”>
<input type=”text” name=”relogio” size=”10”>
</form>
</body>
</html>

Exemplo 63: Exemplo do site http://www.criarweb.com/artigos/490.php


Figura 61

102
Funções
9

Trabalhando com Strings


Strings
“A preguiça caminha tão devagar que a pobreza não tem dificuldade em alcançá-la.” (Confúcio)

No JavaScript, você vai trabalhar constantemente com strings. Entender como elas fun-
cionam e como podemos manipulá-las é fundamental. O objeto string da JavaScript conta com
vários métodos que facilitam a nossa vida quando precisamos manipulá-lo.
String é um tipo de dados em JavaScript que representa todo tipo de texto, desde caracteres
simples como letras, até textos mais complexos como frases e parágrafos.

Método Descrição 103

Trabalhando com Strings


Retorna o caracter da posição nro: texto.charAt(2) (lembre-se de que a
charAt(nro)
numeração dos caracteres começa com zero).

indexOf(substring) Retorna a posição da primeira substring dentro da string.

lastIndexOf(substring) Retorna a posição da última substring dentro da string.

substring(início,fim)
Retorna a substring entre a posição início e fim.
substr(início,fim)

toLowerCase() Retorna a string em minúsculas: texto.toLowerCase().

toUpperCase() Retorna a string em maiúsculas: texto.toUpperCase().

length Retorna o número de caractere da string: texto.length.


A seguir, iremos exemplificar como usar cada um dos métodos descritos acima:

length
<html>
<head>
<script type=”text/javascript”>
var nome = prompt( “Qual o seu nome?”, “” );
alert( “Oi “ + nome + “, tudo bom?\n” +
“Seu nome possui “ + nome.length + “ caracteres.” );
</script>
</head>
</html>

Exemplo 64: Tamanho de string

Figura 62: Tela de entrada


104
Trabalhando com Strings

Figura 63: Resultado final do exemplo 64

charAt
<html>
<head>
<script type=”text/javascript”>
var nome = prompt( “Qual o seu nome?”, “” );
alert( nome.charAt( 4 ) ); //
alert( nome.charAt( 13 ) ); //
</script>
</head
</html>

Exemplo 65: Usando o charAT


Figura 64: Tela de entrada do exemplo 65

Replace

<html>
<head>
<script type=”text/javascript”>
var str=”Visite São Paulo!”;
document.write(str.replace(“São Paulo”,” o Rio de Janeiro”));
</script>
</head>
</html>

Exemplo 66: Troando uma string 105

Trabalhando com Strings

Figura 65: Tela do exemplo 66


Atividades
1) Pergunte o nome completo de seu visitante (prompt) e logo
após, imprima na tela:

Olá nome_completo_aqui, seu nome possui X caracteres.

2) Peça ao visitante um endereço de e-mail. Verifique se este


endereço possui uma arroba (@).

3) Leia um nome e coloque as letras em minúsculo.

4) Leia uma palavra e coloque em maiúscula.

5) Coloque a frase abaixo e troque Copacabana por Búzios.

“Minha praia favorita é Copacabana”

106
Trabalhando com Strings
10

Interagindo com o Usuário


“O sofrimento é passageiro; desistir é para sempre.” (Lance Armstrong)

O formulário feito em JavaScript é parecido com um formulário comum. A diferença é


que podemos adicionar-lhe alguns recursos interessantes, como um aviso, que diz ao usuário
que ele se esqueceu de preencher algum campo, e na mesma janela deste aviso fornece-se um
prompt para o preenchimento deste campo. Para isto, é usado um código JavaScript específico,
que será demonstrado a seguir.
O JavaScript possibilita que os formulários escritos em HTML tenham mais interativi-
dade. A grande desvantagem do HTML sempre foi o fato de ser totalmente estático, ou seja,
depois de interpretado o código e montada a página gráfica, nada poderia acontecer. Nesta lição,
aprenderemos como acrescentar ações em JavaScript nos objetos dos formulários.
Um formulário é uma área que pode conter elementos de formulário. Estes elementos
permitem ao usuário entrar com informação (como campos de texto, campos de área de texto, 107
menus drop-down, botões radiais, caixas de seleção, etc.) em um formulário. Conceitualmente,
os objetos são divididos em: Input, Textarea e Select.

Interagindo com o Usuário


Como vimos anteriormente, podemos inserir vários tipos de entrada de dados em um
formulário, a maioria delas definida pela tag input. O campo <INPUT> tem um atributo
TYPE, para gerar diferentes entradas de dados:
• Text: é um campo de texto no qual os dados nele introduzidos são visíveis para o usuário.
• Password: um campo de texto idêntico a text com a diferença que os dados nele intro-
duzidos não podem ser visualizados pelo usuário, e sim são mostrados com asteriscos *.
• Radio: botão circular que permite ao usuário escolher uma opção entre várias pertencen-
tes a um mesmo grupo.
• Checkbox: campo de verificação que permite ao usuário selecionar mais de uma opção
entre várias. Similar a radio, porém com esta vantagem.
• Button: é um tipo de botão ao qual podem ser atribuídas múltiplas funções mediante
eventos.
• Reset: é um tipo de botão que se encarrega de restabelecer o formulário a seus valores por
padrão.
• Submit: é um tipo de botão que se encarrega de enviar o formulário.
A seguir, veremos como fazer interagir os campos de formulário com o JavaScript.
<html>
<head>
<title>Validação</title>
<script language=”JavaScript”>
function validaForm() {
conf=””;
if((document.forms[0].nome.value==””) ||
(document.forms[0].nome.value.substring(0,1)==” “)){
conf=”- NOME é um campo obrigatório!”;
}
if((document.forms[0].email.value==””) ||
(document.forms[0].email.value.substring(0,1)==” “)){
conf=conf+”\n- E-MAIL é um campo obrigatório!”;
}
if((document.forms[0].telefone.value==””) ||
(document.forms[0].telefone.value.substring(0,1)==” “)) {
conf=conf+”\n- TELEFONE é um campo obrigatório!”;
}
if((document.forms[0].celular.value==””) ||

(document.forms[0].celular.value.substring(0,1)==” “)){
conf=conf+”\n- CELULAR é um campo obrigatório!”;
}
108 if (conf!=””) {
alert(conf);
conf=””;
Interagindo com o Usuário

return false;
}
}
</script>
</head>
<body bgcolor=”#FFFFFF” text=”#000000”>
<form name=”form1” method=”post” action=”VerificaEmail.html” onSubmit=”return
validaForm()”>
Nome: <input type=”text” name=”nome”> <br>
E-mail: <input type=”text” name=”email”> <br>
Telefone: <input type=”text” name=”telefone”> <br>
Celular: <input type=”text” name=”celular”> <br>
<input type=”submit” name=”Submit” value=”Submit”>
</form>
</body>
</html>

Exemplo 67: Não deixar campo em branco


Figura 66: Tela de entrada de dados

109
Figura 67: Aviso para não deixar espaço em branco

Interagindo com o Usuário


<html>
<head><title>botão</title></head>
<form>
<body>
<align=”center”><br><h3> Clique em um dos botões para alterar a cor de sua página</
h3>
<input type=”button” name=”btazul” value=”Azul”
onclick=”document.bgColor=(‘blue’)”>&nbsp&nbsp
<input type=”button” name=”btvermelho” value=”vermelho”
onclick=”document.bgColor=(‘red’)”>&nbsp&nbsp
<input type=”button” name=”btverde” value=”verde”
onclick=”document.bgColor=(‘green’)”>&nbsp&nbsp
<input type=”button” name=”btamarelo” value=”amarelo”
onclick=”document.bgColor=(‘yellow’)”>&nbsp&nbsp
<input type=”button” name=”btazulclaro” value=”Azul claro”
onclick=”document.bgColor=(‘cyan’)”>&nbsp&nbsp
<input type=”button” name=”btverde claro” value=”verde claro”
onclick=”document.bgColor=(‘lime’)”>&nbsp&nbsp
</form>
</script>
</body>
</html>

Exemplo 68: Inserindo botões para mudar de cor

110
Interagindo com o Usuário

Figura 68: Tela do exemplo 68


Faltam as atividades

Figura 69

Atividades 111
1) Crie um formulário com os seguintes dados:
• Nome

Interagindo com o Usuário


• Curso
• E-mail
• Esporte
O campo e-mail não pode ficar em branco.

2) Crie uma página onde o usuário possa escolher como fundo


as seguintes cores
• Rosa
• Azul-marinho
• Verde
O que são eventos?
“Não desista enquanto você ainda for capaz de fazer um esforço a mais.
É nesse algo a mais que está a sua vitória.” (Roberto Shinyashiki)

Eventos ou events são comportamentos ligados às ações dos visitantes sobre determinado
elemento de uma página. Quando um usuário visita uma página e interage (clicando, digitando,
movendo, etc.), está produzindo eventos. Os eventos são a maneira que temos em Javascript de
controlar as ações dos visitantes e definir um comportamento da página.
Existem diversos eventos definidos para uso com JavaScript.

Manipuladores de eventos
Manipuladores de eventos Javascript servem para interfacear um script com atividades do
sistema ou ações do usuário. Eles são divididos em duas categorias: eventos de sistema e eventos
de mouse.
• Os eventos de sistema disponíveis são: OnLoad e OnUnload. Eles não exigem a interação
do usuário para serem ativados.
• Os eventos de mouse disponíveis são: OnClick, OnFocus, OnBlur, OnChange, OnSelect,
OnSubmit e OnMouseOver. Eles exigem a interação do usuário (por meio do mouse ou
não) para serem ativados.
112 Como vimos, temos vários gestores de eventos. A seguir, iremos apresentar os principais:
Interagindo com o Usuário

ONLOAD
Este evento é ativado após a página HTML ser completamente carregada. Ele pode ser
associado às tags <BODY> ou <FRAMESET>.

<html>
<head>
<script type=”text/javascript”>
function mensagem(){
window.alert(‘Bem-vindo ao meu site. Divirta-se!’);
}
</script>
</head>
<body onload=”mensagem()”>
Veja o que o evento <I>OnLoad</I> faz.
</body>
</html>

Exemplo 69: Usando eventos

113

Interagindo com o Usuário


Figura 70: Telas do exemplo 69
ONUNLOAD
Este evento é ativado após a página HTML ser abandonada (seja por meio do clique sobre
algum link, ou sobre os botões de avanço/retrocesso do browser). Ele pode ser associado às tags
<BODY> ou <FRAMESET>.

<html>
<head>
<script type=”text/javascript”>
function mensagem(){
window.alert(‘Obrigado por visitar o meu site!’);
}
</script>
</head>
<body onunload=”mensagem()”>
Veja o que o evento <I>onunload</I> faz.
</body>
</html>

Exemplo 70: Usando o evento de saída

114
Interagindo com o Usuário

Figura 71: Tela do exemplo 70

ONCLICK
O evento mais básico de mouse é tratado pelo manipulador OnClick. Este evento é ativado
sempre que se dá um clique sobre um objeto que aceita evento de clique de mouse. Objetos que
aceitam um evento OnClick são links, caixas de verificação e botões.

<html>
<head>
<script type=”text/javascript”>
function mensagem()
{
window.alert(“Você clicou o botão!”);
}
</script>
</head>
<body>
<form>
<input type=”button” value=”Clique Aqui”
onclick=”mensagem()”>
</form>

</body>
</html>

Exemplo 71: Usando o onclick

115

Interagindo com o Usuário

Figura 72: Telas do exemplo 71


ONFOCUS
Onfocus ocorre quando um objeto torna-se o item em foco. Isso acontece quando o usuário
clicar ou alternar para um objeto específico na página. Este evento pode ser associado aos objetos
text, password, textarea e select (definidos pelas tags <INPUT>, <TEXTAREA> e <SELECT>).

<html>
<head>
<script type=”text/javascript”>
function alerta()
{
window.alert(‘Preencha com cuidado!’);
}
</script>
</head>
<body>
<h2>Preencha o Formulário Abaixo:</h2><BR>
<form>
<b>Informe seu nome: </b>
<input type=”text” ><BR>
<b>Informe seu E-mail:</b>
<input type=”text” onfocus=”alerta()”><BR>
</form>
116 </body>
</html>
Interagindo com o Usuário

Exemplo 72: Usando o onfocus


Figura 73: Telas do exemplo 72

Atividades
1) O que são eventos?

2) Quais são os principais eventos de mouse?

3) Como funciona o evento ONCLIK?

4) Crie um formulário com o evento ONFOCUS.

5) Monte um formulário que ao sair dê uma mensagem de saída.

Atividades Complementares 117

1) (FCC 2010 – MPE-RN – Analista de Tecnologia da Informação

Interagindo com o Usuário


– Suporte Técnico) Na interface Web, ele é um arquivo
independente do arquivo HTML no qual são declaradas pro-
priedades e valores de estilização para os elementos do HTML,
cabendo-lhe, dessa forma, a tarefa de estilização e ao HTML,
exclusivamente, a marcação e estruturação do conteúdo do
documento. Trata-se de:
a. CSS (Cascading Style Sheets).
b. XML (eXtensible Markup Language).
c. XHTML (eXtensible Hypertext Markup Language).
d. Tableless.
e. RDF (Resource Description Framework).

2) (CESGRANRIO 2010 – BACEN – Analista do Banco Central –


Área1) Analise o fragmento HTML abaixo.
<ing
src=”http://www.exeploxyz.com.br/destaques/bportal/image”
width=”120” height=”60” alt=”” />
Considerando-se as recomendações de acessibilidade para
sites do governo brasileiro na Internet, o fragmento é proble-
mático porque
a. apresenta imagens em formatos desproporcionais.
b. disponibiliza links em elementos gráficos ou sonoros.
c. possui uma URL absoluta, em vez de relativa.
d. não está adequado para apresentação em dispositivos móveis.
e. não apresenta um equivalente textual para a imagem.

3) (FCC 2009 – TJ-SE – Técnico Judiciário – Programação de


Sistemas) Sobre as listas em HTML é correto afirmar que as
tags
a. <LI> e </LI> definem os elementos das listas ordenadas e
não ordenadas.
b. <OL> e <UL> demarcam os elementos das listas ordenadas
e não ordenadas.
c. <DL> e </DL> demarcam os elementos das listas de
definição.
d. <DT> e </DT> identificam os termos a serem definidos.
e. <DD> e </DD> definem os termos presentes.

4) (SANEPAR 2004 – Cargo Analista de Informática II) Constitui


uma boa prática em programação a documentação dos códigos
fontes através da inclusão de comentários. Na linguagem
118 HTML, qual dos comandos é correto para inserir comentário?
a. /* Este é um comentário */
b. # Este é um comentário #
Interagindo com o Usuário

c. < Este é um comentário />


d. <!– – Este é um comentário -->
e. <– – Este é um comentário -->

5) (SANEPAR 2004 – Cargo Analista de Informática II) HTML é


uma acrossemia para HyperText Markup Language, sendo uma
linguagem de programação utilizada para a criação de docu-
mentos hipertexto para a Web. A respeito da linguagem HTML,
considere as seguintes afirmativas:
I. A HTML é uma linguagem interpretada e o interpretador é o
browser (navegador).
II. Os documentos escritos em HTML são arquivos em formato
texto e podem ser criados com a utilização de um simples edi-
tor de texto.
III. A HTML é uma linguagem compilada gerando um código exe-
cutável que será armazenado em um servidor Web.
IV. A HTML é uma linguagem que faz uso de comandos ou tags
que especificam a aparência e conteúdo de uma página Web.
Assinale a alternativa correta.
a. Somente as afirmativas I, II e III são verdadeiras.
b. Somente as afirmativas II e IV são verdadeiras.
c. Somente as afirmativas I, II e IV são verdadeiras.
d. Somente as afirmativas I, III e IV são verdadeiras.
e. Somente as afirmativas III e IV são verdadeiras.

6) (SANEPAR 2004 – Cargo Analista de Informática II) A lingua-


gem HTML utiliza os códigos de cores em padrão RGB (Red,
Green, Blue), cujos valores são dados em hexadecimal na
forma “#RRGGBB”. Dessa forma, o branco é representado
em um código HTML como “#FFFFFF” e a cor preta como
“#000000”. Com base nessas informações e nos conhecimen-
tos da linguagem HTML, o comando para associar a cor azul
ao fundo da página Web é:
a. <body color=”#00FFFF”>
b. <body background=”#0000FF”>
c. <body bgcolor=”#0000FF”>
d. <body background=”#00FFFF”>
e. <body color=”#0000FF”>

7) (SANEPAR 2004 – Cargo Analista de Informática II)


A linha de comando HTML que coloca a imagem “img.gif”
como ligação ou hiperlink para o site “www.siteremoto.br” é: 119

a. <L href=”http://www.siteremoto.br”> <img src=”img.gif”> </L>

Interagindo com o Usuário


b. <A http=”http://www.siteremoto.br”> <img src=”img.gif”> </A>
c. <A href=”http://www.siteremoto.br”> <img src=”img.gif”> </A>
d. <A href=”http://www.siteremoto.br”> img.gif </A>
e. <A href=”http://www.siteremoto.br”> <image =”img.gif”> </A>

8) (FCC 2009 – TJ-SE – Técnico Judiciário – Programação de


Sistemas – Disciplina: Linguagem de Programação | Assuntos:
JavaScript)
A função parsenlnt( ) da biblioteca JavaScript tem o objetivo de
a. transformar uma string de caracteres em um número, numa
determinada base numérica.
b. informar a quantidade de caracteres que compõem uma string.
c. extrair uma determinada quantidade de caracteres de uma
string.
d. substituir partes dos caracteres de uma string por uma sequência
de outros caracteres.
e. dividir uma string de caracteres em partes menores de tamanho
fixo.
Referência Bibliográfica
CARDOSO, M. Desenvolvimento web para ensino superior. Rio de Janeiro: Axcel books do Brasil,
2004.
FLANAGAN, D. JavaScript: o guia definitivo. 4. ed. São Paulo: Bookman, 2004.
NIELSEN, J.; LORANGER, H. Usabilidade na web: projetando websites com qualidade. São
Paulo: Campus, 2007.
OLIVIERO, C. A. J. Faça um site JavaScript, orientado por projeto. 6. ed. São Paulo: Érica, 2007.
SILVA, M. S. Construindo sites com CSS e (X)HTML: sites controlados por folhas de estilo em
cascata. São Paulo: Novatec, 2008.

120