CURSO TCNICO DE NVEL MDIO EM INFORMTICA

Apostila Guia

Disciplina

Linguagens de Programao para Internet

Docente

Jurasildo Oliveira Reinaldo

Mossor, julho de 2016

Lista de Figuras
Figura 1: Funcionamento de uma aplicao Web (ANTONIO, 2016) ................................................. 7
Figura 2: Primeira pgina Web. .......................................................................................................... 9
Figura 3: Definio de pargrafos .................................................................................................... 10
Figura 4: Tag <br> ............................................................................................................................. 10
Figura 5: Tag <pre></pre> ................................................................................................................ 11
Figura 6: Layout padro ................................................................................................................... 15
Figura 7: Layout utilizando a semntica do HTM5 ........................................................................... 16
Figura 8: Input Text .......................................................................................................................... 17
Figura 9: Input radio ......................................................................................................................... 17
Figura 10: Definio da estrutura de uma declarao CSS .............................................................. 18
Figura 11: Agrupamento de seletores .............................................................................................. 20
Figura 12: Espaamento entre elementos ....................................................................................... 26
Figura 13: Padding ............................................................................................................................ 27
Figura 14: Menu Dropdown ............................................................................................................. 35
Figura 15: Funcionamento de pginas web dinmicas. ................................................................... 46
Figura 16: Estrutura do projeto ........................................................................................................ 49
Figura 17: Modelo do banco - agendaWeb ...................................................................................... 50
Figura 18: Interface principal ........................................................................................................... 51
Figura 19: Interface do arquivo novoContato.html ......................................................................... 51
Figura 20: Editar contato por ID ....................................................................................................... 52
Figura 21: Tela editar contato .......................................................................................................... 53

Sumrio
1.

A Evoluo das Linguagens Web .............................................................................................. 6

2.

Aplicaes Web.......................................................................................................................... 7

3.

Front-end e Back-end ................................................................................................................. 7

4.

Desenvolvendo para Web........................................................................................................... 8

5.

HTML HyperText Markup Language ..................................................................................... 8

6.

5.1.

Meta Tags ........................................................................................................................... 9

5.2.

Pargrafo .......................................................................................................................... 10

5.3.

Ttulos ............................................................................................................................... 11

5.4.

Utilizando Estilos com HTML ............................................................................................ 11

5.5.

Inserindo comentrio no cdigo HTML ............................................................................ 11

5.6.

Links .................................................................................................................................. 12

5.7.

Tabelas ............................................................................................................................. 13

5.8.

Listas ................................................................................................................................. 13

5.9.

Blocos - div ....................................................................................................................... 14

5.10.

Layout ........................................................................................................................... 15

5.11.

Formulrios .................................................................................................................. 16

5.11.1.

Input Text ................................................................................................................. 16

5.11.2.

Input Radio ............................................................................................................... 17

5.11.3.

Input Submit ............................................................................................................. 17

CSS Cascading Style Sheets.................................................................................................... 18

6.1.

Seletor descendente (espao) .......................................................................................... 20

6.2.

Seletor filho (>) ................................................................................................................. 21

6.3.

Seletor irmo adjacente (+) .............................................................................................. 21

6.4.

Seletor irmo comum (~) ................................................................................................. 22

6.5.

Insero de CSS em pginas HTML................................................................................... 23

6.6.

Cores................................................................................................................................. 24

6.7.

Backgrounds ..................................................................................................................... 25

6.8.

Bordas............................................................................................................................... 25

6.8.1.

Border-color ............................................................................................................. 25

6.8.2.

Bordas individuais .................................................................................................... 25

6.9.
6.10.

Margens............................................................................................................................ 26
Padding ......................................................................................................................... 27
3

6.11.

Propriedades de dimenso .......................................................................................... 28

6.12.

Propriedades de texto .................................................................................................. 28

6.12.1.

Text color .................................................................................................................. 28

6.12.2.

Text alignment.......................................................................................................... 28

6.12.3.

Text decoration ........................................................................................................ 28

6.12.4.

Text transformation ................................................................................................. 29

6.12.5.

Text identation ......................................................................................................... 29

6.13.

Fontes ........................................................................................................................... 29

6.13.1.

Font style .................................................................................................................. 29

6.13.2.

Font size ................................................................................................................... 30

6.13.3.

Font weight .............................................................................................................. 30

6.14.

Links .............................................................................................................................. 30

6.15.

Layout ........................................................................................................................... 30

6.15.1.

display ...................................................................................................................... 30

6.15.2.

Position ..................................................................................................................... 31

6.15.3.

Sobreposio de elementos ..................................................................................... 32

6.15.4.

Propriedade Float ..................................................................................................... 32

6.15.5.

Propriedade Clear..................................................................................................... 32

6.15.6.

Propriedade Overflow .............................................................................................. 32

6.16.
7.

Menus Dropdowns ....................................................................................................... 32

JavaScript.................................................................................................................................. 35
7.1.

Introduo ........................................................................................................................ 35

7.2.

Funes de Display ........................................................................................................... 36

7.3.

Sintxe .............................................................................................................................. 36

7.3.1.

Valores...................................................................................................................... 37

7.3.2.

Operadores............................................................................................................... 37

7.3.3.

Expresses ................................................................................................................ 37

7.3.4.

Palavras reservadas .................................................................................................. 38

7.3.5.

Comentrios ............................................................................................................. 38

7.4.

Identificadores ................................................................................................................. 38

7.5.

Tipos de dados ................................................................................................................. 39

7.5.1.

Strings ....................................................................................................................... 39

7.5.2.

Nmeros ................................................................................................................... 39

7.5.3.

Boolean..................................................................................................................... 40
4

7.5.4.

Array ......................................................................................................................... 40

7.5.5.

Objetos ..................................................................................................................... 41

7.6.

Funes ............................................................................................................................ 43

7.7.

Datas................................................................................................................................. 43

7.8.

Eventos ............................................................................................................................. 44

7.9.

Validao de formulrios ................................................................................................. 44

8.

Servlets ..................................................................................................................................... 46

9.

Apache Tomcat......................................................................................................................... 47
9.1.

Instalao do Tomcat ....................................................................................................... 47

9.2.

Projeto Web ..................................................................................................................... 48

9.2.1.
10.

Projeto AgendaWeb ................................................................................................. 48

JSF JavaServer Faces .......................................................................................................... 53

Referencial bibliogrfico .............................................................................................................. 55

Apndices ......................................................................................................................................... 56

1. A Evoluo das Linguagens Web

A sociedade vem evoluindo significativamente quando o assunto tecnologia.
Inmeras delas criadas para facilitar o processo comunicao. Alm claro, do
telefone, outra tecnologia que gerou um grande impacto na histria e na vida das
pessoas foi a Internet.
A Internet, tambm denominada de World Wide Web, teve suas origens no
Departamento de Defesa dos Estado Unidos mais especificamente na ARPA
Advanced Research Projects Agency. O objetivo principal da ARPA era construir um
sistema que mantivesse a comunicao e disponibilidade dos dados, em casos de
ataques que pudessem chegar a destruir os computadores. A soluo encontrada foi a
chamada ARPANET: uma rede de computadores conectados entre si, de tal forma, que
mesmo se um ou mais computadores fossem destrudos, a comunicao e os dados no
seriam perdidos.
No incio, apenas algumas universidades e instituies de pesquisa faziam
parte da rede. Posteriormente, empresas comerciais viram uma oportunidade de
negcio na Web, assim como Tim Berners Lee, um pesquisador ingls, que em 1989
imaginou a possibilidade de integrar seu computador numa rede mundial onde cada
computador fosse um arquivo dessa mesma rede, podendo ser acessado por qualquer
computador ligado Net. Com essa ideia, Tim Berners Lee ficou conhecido como o pai
da Web.
Com o crescimento surpreendente da Internet, principalmente entre usurios
leigos, novos valores foram acrescentados na forma como o usurio interagia com as
pginas Web.
Assim que a Internet foi criada, o objetivo principal era manter a comunicao
e segurana dos dados. Assim, a forma como as informaes eram apresentadas ao
usurio, no era to relevante. As primeiras pginas Web contenham apenas imagens e
textos, em grande parte devido a limitada velocidade de transmisso de dados.
Com o passar dos anos e o aumento da velocidade, a Internet passou a oferecer
contedo mais multimdia, como msicas, vdeos e animaes. As pginas Web no se
limitavam apenas a mostrar textos e imagens, mas passaram a ser mais dinmicas,
oferecendo aplicaes como jogos, vdeo conferncia, e aplicaes bancrias.
A criao de pginas Web dinmicas aconteceu, em grande parte, devido a
evoluo das linguagens de programao. As pginas iniciais eram compostas
basicamente por HTML Hypertext Markup Language. Posteriormente, surgiram:
JavaScript, PHP, Python, Java, e Ruby.

2. Aplicaes Web
Uma aplicao Web, diferentemente de uma aplicao desktop, tem seu processamento
feito em um servidor remoto e no localmente. Quando o usurio acessa uma pgina
Web por meio de um navegador, diversas operaes ocorrem implicitamente em
poucos segundos.
Tomando como exemplo a Figura 1 para envio de um formulrio, o usurio
digita o endereo do site no navegador e preenche o formulrio. Quando ele clica para
enviar os dados, o navegador enviar uma requisio utilizando o protocolo
HTTP/HTTPS para o servidor que est no endereo lhe passado. Chegando no servidor,
ele analisa o cdigo e envia para os interpretadores das linguagens especficas: PHP,
Java, Python, e Ruby. Depois do interpretador realizar as operaes que lhe foram
passadas, agora ele deve retornar para o servidor o resultado em formato HTML para
que o cliente (browser) consiga interpret-la.

Figura 1: Funcionamento de uma aplicao Web (ANTONIO, 2016)

3. Front-end e Back-end
Os termos front-end e back-end so comumente utilizados para designar um processo
de desenvolvimento de aplicaes Web.
O desenvolvimento front-end utilizado quando se deseja tratar apenas
detalhes relacionados a apresentao de pginas ao usurio, ou seja, a interface.
Detalhes como: cor, fonte, elementos visuais, udio, vdeo e animaes. Todas as
tecnologias que trabalham com front-end so executadas no lado cliente. Uma
tecnologia front-end o CSS Cascading Style Sheets, que ser abordada nos
prximos captulos.
7

O termo back-end voltado para se trabalhar no lado do servidor, ou seja, o

usurio faz uma solicitao por meio do navegador utilizando uma tecnologia front-end
como JavaScript e o servidor Web a responde enviando o resultado, de tal forma que o
navegador consiga interpret-lo.
Exemplos de tecnologias front-end e back-end:
Front-end
JavaScript
HTML/HTML5
CSS/CSS3
JQuery
Flash

Back-end
PHP
Java
.Net
Python
Ruby

4. Desenvolvendo para Web

O desenvolvimento web sustentado por trs pilares: o HTML, CSS e JavaScript.
Todas essas tecnologias sofreram variaes com o passar dos anos. O HTML
atualmente est na verso 5, o CSS na 3 e o JavaScript manteve sua nomenclatura
padro.
Uma aplicao Web completa no pode ser desenvolvida apenas com uma
dessas tecnologias isoladamente, mas uma complementando a outra. O HTML fornece
a estrutura e os componentes da pgina; o CSS pega esses componentes e os apresenta
ao usurio de uma forma mais agradvel atravs de uma interface. O JavaScript
permite interatividade do usurio com a pgina, permitindo que a pgina tome decises
com base nos dados passados pelo usurio e nas aes por ele realizadas.
Essas tecnologias so todas client-side, ou seja elas so executadas somente no
lado do cliente, mais especificamente, pelo navegador. Para criao de pginas
dinmicas server-side necessrio utilizar linguagens que sejam executadas no
servidor Web, sendo o PHP uma das mais utilizadas atualmente.
Com a expanso das pginas dinmicas, vrios frameworks foram criados para
facilitar o desenvolvimento de aplicaes Web atravs das linguagens Java, PHP,
Ruby, e Python. Durante a disciplina, sero vistos os frameworks JSF JavaServer
Faces e JSP JavaServer Pages

5. HTML HyperText Markup Language

Para se desenvolver uma pgina Web simples em HTML preciso apenas de um editor
de textos e um navegador. Inicialmente, cria-se um arquivo com a extenso .html e
em seguida escreve-se o cdigo da Figura 2.
8

Um documento HTML composto basicamente por elementos na forma de tags.

As tags so palavras reservadas que ficam entre parnteses angulares (< e >) como por
exemplo <html> que serviro como marcao para o CSS e o JavaScript. Toda tag
deve ser fechada, utilizando outra com o mesmo nome, mas acrescentando uma barra
invertida no incio, por exemplo: </head>. Algumas tags especficas podem ser
fechadas apenas colocando uma barra invertida no final da tag aberta, por exemplo a
<img /> utilizada para imagens.
Todo o contedo de um arquivo HTML est delimitado pelas tag
<html></html>. Dentro delas ficam as tags <head></head> e <body></body>. Na tag
<head> ficam trechos de cdigo que fornecem informaes sobre o documento HTML,
por exemplo a tag <title></title> que fica dentro da tag <head></head> atribui um
ttulo pgina.
Na tag <body></body> fica toda a parte visvel da pgina como pargrafos,
tabelas, formulrios, imagens, e vdeos. A tag <!DOCTYPE html> define o tipo de
documento que a pgina representa. Essa tag j faz parte do HTML5, para verses
anteriores utiliza-se outras declaraes.

Figura 2: Primeira pgina Web.

As tags podem possuir atributos, ou seja, caratersticas que agregam valor a

uma tag. Por exemplo, a tag <html> possui um atributo chamado lang que especifica o
idioma que a pgina foi escrita.

5.1. Meta Tags

Meta tags so utilizadas para descrever o contedo da pgina Web, muito

utilizadas por buscadores como google. Essas tags devem ficar dentro da tag
<head></head>. So exemplos de meta tags: keywords, description e author.
A declarao de uma meta tag formada por um dos trs seguintes atributo
name, http-equiv e charset, e um atributo chamado content. A tag charset,
9

especifica o tipo de codificao utilizada pela pgina, podendo ser ANSI, ASCII,
ISSO-8859-1 e UTF-8. J a tag content associa um valor as tags name, http-equiv e
charset. Veja abaixo algumas declaraes de meta tags.

5.2.

Pargrafo

Normalmente todo cdigo HTML que estiver dentro da tag <body> ficar
visvel na pgina, mas como o HTML se trata de uma linguagem de marcao
importante que todos dados pertenam a uma tag. Isso importante porque mais na
frente as tags sero mapeadas pela linguagem de folha de estilos, CSS.
Um pargrafo definido pela tag <p></p>, sendo que espaos em branco e
mudana de linhas no afetam a formatao do pargrafo. Veja abaixo, duas
declaraes que geram a mesma sada.

Figura 3: Definio de pargrafos

Nos casos de quebra de linha intencional, utiliza-se a tag <br>, que por
curiosidade, no tem barra de fechamento.

Figura 4: Tag <br>

10

Quando se deseja que o navegador formate o pargrafo de acordo como ele

est sendo escrito, utiliza-se a tag <pre></pre>.

Figura 5: Tag <pre></pre>

5.3.

Ttulos

Para criar ttulos nas pginas, utiliza-se a tag <h1></h1> at <h6></h6>.

Quanto maior o nmero, menor a fonte. No se utiliza essas tags para aumentar ou
diminuir a fonte dos textos. Elas so utilizadas apenas para criao de ttulos.

5.4.

Utilizando Estilos com HTML

O HTML5 fornece a possibilidade de formatar os elementos da pgina

utilizando o prprio HTML. Na prtica, no aconselhvel misturar formatao
com cdigo HTML em um mesmo arquivo, mas para fins didticos sero vistos
alguns atributos que podem ser utilizados para esse fim.
A definio de um atributo de estilo feita por meio da palavra style seguida
de um sinal de igual, o nome da propriedade, dois pontos e o valor, tudo entre
aspas. Abaixo, foi atribudo a cor vermelha a um pargrafo, por meio da
propriedade color.
<p style="color:red;">Isto um pargrafo.</p>

So exemplos de propriedades do atributo style:

5.5.

Font-family: Tipo da fonte

Font-size: Tamanho da fonte.
Text-align: Alinhamento do texto.
Background-color: Cor de fundo da pgina.

Inserindo comentrio no cdigo HTML

11

 uma boa prtica de programao comentar sempre os trechos de cdigo

para que no futuro, outras pessoas possam entende-lo. Em HTML os comentrios
so definidos como no trecho abaixo:
<!--meus comentrios-->

5.6.

Links

Links so atalhos criados para ligar pginas web quando o usurio clica em
em um texto, imagem ou boto.
Um link definido pela tag <a></a> e um atributo chamado href que
contm o endereo da pgina referenciada. O trecho de cdigo a seguir mostra
como realizada a criao de um link chamado clique aqui que chama a pgina
cadastro.html.
<a href="cadastro.html">Clique aqui</a>

A tag <a></a> possui um outro atributo chamado target que possibilita

especificar onde a nova pgina poder ser aberta. Os valores que esse atributo
possui so:

_blank: abre o documento referenciado em uma nova janela ou aba.

_self: abre o documento na mesma pgina (default).
_parent: abre o documento em um frame pai.
_top: abre o documento em toda a rea da janela.
Framename: abre o documento em um frame especfico.

Tambm possvel criar um link a partir de uma imagem. Para isso, utilizase a tag <img> sem fechamento, com os atributos src para indicar o local da
imagem e alt para mostrar uma legenda flutuante, quando a imagem no pode ser
exibida. Veja o trecho de cdigo abaixo:
<a href="nova_pagina">
<img src="imagem.jpg" alt="minha legenda">
</a>

Outra formar de se beneficiar dos links mover-se dentro da mesma pgina.

Para que isso acontea preciso adicionar uma tag chamado id no elemento
referenciado e no campo href da tag <a></a> colocar o valor da tag id antecedida
por um jogo da velha.

12

<h1><a href="#cap2">Ir para o capitulo 2</a></h1>

<h1>Captulo 1</h1>
<h1 id="cap2">Captulo 2</h1>

5.7.

Tabelas

As tabelas em HTML so muito teis para mapear o resultado de consultas a

banco de dados. Sua definio bem simples.
O corpo de uma tabela definido pela tag <table></table>, suas linhas por
<tr></tr> e suas colunas por <td></td>. O trecho de cdigo abaixo mostra a criao
de uma tabela com duas linhas e trs colunas.
<table>
<tr>
<td>Maria</td>
<td>Estudante</td>
<td>35</td>
</tr>
<tr>
<td>Luz</td>
<td>Advogado</td>
<td>43</td>
</tr>
</table>

Por padro a tabela vem sem borda, para adicion-las utiliza-se o atributo
border na tag <table>. Quanto maior o nmero maior a espessura da borda.
<table border="1">

Para adicionar um ttulo a tabela utiliza-se a tag <caption></caption> dentro

da tag <table>.
<table>
<caption>Alunos</caption>
</table>

5.8.

Listas

As listas so utilizadas para organizar sequncias de dados por nmero ou

marcadores. As listas que utilizam marcadores so chamadas listas no organizadas
13

e so definidas pela tag <ul></ul>. Cada item da lista deve ter uma tag <li></li>,
como est no cdigo abaixo:
<ul>
<li>Caf</li>
<li>Leite</li>
<li>Po</li>
</ul>

O HTML5 fornece quatro tipos de estilos de marcadores:

List-style-type: disc
List-style-type: circle
List-style-type: square
List-style-type: none
<ul style=" list-style-type: disc"></ul>

O outro formato de lista a numerada. Esse tipo utiliza a tag <ol></ol> e a

tag <li></li> para os itens da lista.
<ol>
<li>Caf</li>
<li>Leite</li>
<li>Po</li>
</ol>

O HTML5 oferece quatro tipos diferentes de listas organizadas por meio do

atributo type:

Type="1": Lista os elementos com nmeros

Type="A": Lista os elementos com uppercase (letras maisculas)
Type="a": Lista os elementos com lowercase (letras minsculas)
Type="I": Lista os elementos com uppercase em algarismos romanos
Type="i": Lista os elementos com lowercase em algarismos romanos

5.9.

Blocos - div

Blocos so utilizados para criar sees ou divises em um documento

HTML utilizando a tag <div></div> para limitar as regies. Divs so bastante
utilizadas para criar grupos de elementos a serem formatados por CSS.

14

<div style="color:#0000FF">
<h3>Isto um ttulo</h3>
<p>Isto um paragrafo.</p>
</div>

5.10. Layout
O termo Layout se refere a estrutura da pgina Web que normalmente
possui a estrutura da Figura 6. Essa estrutura normalmente codificada utilizando
divs, mas com a adoo do HTML5 foram criadas tags especficas para criao de
layouts, aproveitando a interpretao semntica que os navegadores oferecem a
elas.

Figura 6: Layout padro

Elementos que compe o layout de uma pgina Web:

Head Define um cabealho para a pgina

Nav Define um local para os links de navegao
Section Cria uma seo no documento
Article Define uma rea especfica para a escrita de artigos
Aside Define o contedo ao lado do texto central
Footer Define o contedo do rodap

15

Figura 7: Layout utilizando a semntica do HTM5

5.11.

Formulrios

Os formulrios so utilizados para coletar dados de entrada do usurio por

meio de componentes que so adicionados ao seu corpo. O cdigo abaixo mostra a
definio bsica de um formulrio:
<form>
...
Elementos do formulrio
...
</form>

O input o elemento mais importante de um formulrio podendo sofrer

diversas variaes de acordo com o tipo de atributo: text, radio, e submit.

5.11.1.

Input Text

Esse tipo de input utiliza somente uma linha para entrada de textos.
Nome:<br>
<input type="text" name="nome"><br>
Idade:<br>
<input type="text" name="idade">

O resultado gerado com esse input pode ser visto na Figura 8.

16

Figura 8: Input Text

5.11.2.

Input Radio

O input radio utilizado quando se deseja criar uma lista de opes e o

usurio obrigado a selecionar somente uma delas.
<input type="radio" name="sexo" value="masculino" checked>
Masculino<br>
<input type="radio" name="sexo" value="feminino">Feminino<br>

Figura 9: Input radio

Vale salientar que o formulrio marcar como selecionado todos os

input radio que possurem o valor do atributo name diferente. Assim, caso
deseje que somente uma opo esteja selecionada por vez, deve-se colocar o
valor do atributo name de todos os input sempre com o mesmo nome.
Quando se deseja que o formulrio j inicie com uma opo selecionada
utiliza-se o atributo checked.

5.11.3.

Input Submit

O submit um input, na forma de boto, que envia todos os dados do

formulrio para um servidor capaz de processa-los e retornar um resultado. O
cdigo abaixo mostra um input submit que envia os dados para uma pgina
chamada processa.php.
<form action="processa.php">
Nome:<br>
<input type="text" name="nome" value="Bruna"><br>
Idade:<br>
<input type="text" name="idade" value="23"><br><br>
<input type="submit" value="Enviar">
</form>

17

O atributo action do formulrio responsvel por indicar quem se

responsabilizar por processar tais dados. Nesse exemplo, um servidor php ir
executar as instrues da pgina processa.php e consequentemente processar
os dados do formulrio.
O atributo value do input submit contm a legenda do boto.
Um atributo muito importante de um formulrio a forma como os
dados sero enviados ao servidor. Existe basicamente dois mtodos: GET e
POST.
O mtodo GET deve ser utilizado quando os dados enviados no
necessitarem de muito sigilo, pois todos os dados tornam-se visveis no
endereo da pgina. J o mtodo POST oferece um pouco mais de segurana
escondendo os dados do endereo da pgina. A definio de cada mtodo
segue abaixo:
<form action="processa.php" method="get">
<form action="processa.php" method="post">

6. CSS Cascading Style Sheets

O CSS uma linguagem de folhas de estilos utilizada para descrever a
apresentao dos elementos em um documento HTML ou XML. O CSS permite definir
o design, layout e diferentes variaes de tela de acordo com o dispositivo.
A Figura 10 mostra a definio de uma declarao CSS. Uma declarao CSS
definida por um seletor que mapeia o identificador no cdigo HTML com suas
caractersticas no CSS. O CSS da Figura 10 atribui a todas as tags <h1> do documento
HTML a cor azul e uma fonte de tamanho 12.
Diferentes propriedades podem ser adicionadas em um mesmo bloco CSS,
apenas separando-as por ponto e virgula.
<h1>Hello World!</h1>

Figura 10: Definio da estrutura de uma declarao CSS

Na maioria das vezes utiliza-se um seletor nico no arquivo HTML chamado

id. Um id permite que o CSS consiga mapear somente um elemento especfico na
18

pgina HTML. Por exemplo, no cdigo abaixo, existe dois pargrafos, mas cada um
deles possui um atributo chamado id com um valor nico. Dessa forma, consegue-se
atribuir propriedades diferentes em elementos com tags semelhantes.
<head>
<style>
#p1{
color: red;
}
#p2{
color: black;
}
</style>
</head>
<body>
<p id="p1">Primeiro pargrafo</p>
<p id="p2">Segundo pargrafo</p>
</body>

Para o CSS referenciar o id utiliza-se um jogo da velha antes do nome do

seletor.
Em alguns casos, por praticidade, necessrio escrever apenas uma declarao
CSS que possa ser aplicada a vrios elementos na pgina HTML. Uma forma de
conseguir isso adicionando um atributo chamado class selector nas tags HTML.
Quando se declara um atributo class em uma tag HTML, est se criando um grupo de
elementos que iro compartilhas as mesmas caractersticas definidas na declarao
CSS.
Para o CSS mapear um atributo classe utiliza-se um ponto antes do valor do
atributo class. Veja o cdigo abaixo:
<head>
<style>
.paragrafos{
color: red;
}
</style>
</head>
<body>
<p class="paragrafos">Primeiro pargrafo</p>
<p class="paragrafos">Segundo pargrafo</p>
19

</body>

Tambm possvel que apenas um elemento especfico de uma classe possa se

afetado. Para que isso acontea, adiciona-se a tag do elemento antes do ponto, como
mostra o cdigo abaixo:
<head>
<style>
h1.centro{
color: red;
}
</style>
</head>
<body>
<h1 class="centro">Ttulo</p>
<p class="centro">Pargrafo</p>
</body>

O CSS permite que seletores possam ser agrupados e assim compartilhar as

mesmas propriedades. Evitando reescrever cdigo ou escrever cdigo desnecessrio.

Figura 11: Agrupamento de seletores

O CSS permite relacionar seletores atravs de quatro diferentes combinaes:

seletor descendente (espao), seletor filho (>), irmo adjacente (+) e irmo comum (~).

6.1.

Seletor descendente (espao)

Esse seletor corresponde a todos os elementos descendentes de um elemento

especfico. O cdigo abaixo demonstra o uso do seletor descendente (espao) sendo
aplicado a tag <div> e <p>. Como o terceiro pargrafo fica fora da <div> ele no
ser atingido pelo estilo declarado.
<style>
div p {
background-color: yellow;

20

}
</style>
</head>
<body>
<div>
<p>Paragrafo 1 na div.</p>
<p>Paragrafo 2 na div.</p>
</div>
<p>Paragrafo 3 fora da div.</p>
</body>

6.2.

Seletor filho (>)

O seletor filho seleciona todos os elementos que so filhos de um elemento

especfico. No cdigo abaixo, o pargrafo 3 no ser atingindo na declarao do
CSS. Isso, porque a tag <p> no filha da tag <div> e sim da tag <span>, utilizada
para colorir uma parte do texto.
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragrafo 1 na div.</p>
<p>Paragrafo 2 na div.</p>
<span><p>Paragrafo 3 na div.</p></span>
</div>
</body>

6.3.

Seletor irmo adjacente (+)

21

Esse seletor seleciona todos os elementos que so irmos adjacente de um

elemento especfico. No cdigo abaixo, apenas o pargrafo 3 ser modificado pelo
CSS, pois s considerado o primeiro elemento da sequncia.
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragrafo 1 na div.</p>
<p>Paragrafo 2 na div.</p>
</div>
<p>Paragrafo 3 fora da div.</p>
<p>Paragrafo 4 fora da div.</p>
</body>

6.4.

Seletor irmo comum (~)

A funo desse seletor bem similar ao da seo anterior. A principal

diferena est na quantidade indefinida de irmos adjacentes que um elemento pode
ter.
No cdigo abaixo, os pargrafos 3 e 4 sofrero a ao do CSS, ou seja, tero
sua cor de fundo alterada pra amarelo.
<style>
div ~ p {
background-color: yellow;
}
</style>
</head>
<body>
<div>

22

<p>Paragrafo 1 na div.</p>
<p>Paragrafo 2 na div.</p>
</div>
<p>Paragrafo 3 fora da div.</p>
<p>Paragrafo 4 fora da div.</p>
</body>

6.5.

Insero de CSS em pginas HTML

A utilizao do CSS em pginas HTML pode acontecer de trs formas:

dentro da prpria pgina utilizando a tag <style></style>; na prpria tag HTML,
como vimos no captulo anterior, utilizando a propriedade style; e em um arquivo
externo.
A definio da tag <style></style> na prpria pgina HTML deve ocorrer
entre a tag <head></head> como est demonstrado no cdigo abaixo:
<head>
<style>
p{
color: red;
text-align: center;
}
<style>
</head>
<body>
<p>Isto um pargrafo</p>
</body>

Outra forma mais comum e recomendada criando um arquivo separado

para o cdigo CSS. A definio da declarao CSS a mesma, o que muda a
forma como o HTML chama o arquivo CSS.
Um arquivo CSS externo inserido numa pgina HTML por meio da tag
link que deve ficar no cabealho HTML. Essa tag contm trs atributos:

rel Define um elo de ligao entre um documento e um recurso externo.

type Especifica o tipo do recurso referenciado.
href A localizao do recurso.
23

<head>
<link rel="stylesheet" type="text/css" href="meu_Estilo.css"
>
</head>

Um aspecto interessante da insero a prioridade que o CSS executado.

As definies mais internas tm uma maior prioridade sobre as mais externas. Por
exemplo, no cdigo abaixo foram definidas as trs formas de insero do CSS em
uma pgina HTML.
As propriedades do CSS so adotadas em efeito cascata, de dentro para fora,
ou seja, no cdigo abaixo, apenas a definio dentro da tag <body> ser adotada,
pois a ltima declarao sobrescreve as demais.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="me_Estilo.css">
<style>
body {background-color: linen;}
</style>
</head>
<body style="background-color: lightcyan" >
<h1>Mltiplos estilos CSS</h1>
</body>
</html>

6.6.

Cores

As cores em CSS podem ser definidas de trs formas: um nome vlido, um

nmero RGB e um valor hexadecimal.
Veja abaixo a baixo exemplos dessas trs formas:

Por nome: <h2 style="background-color:red">

RGB: <h2 style="background-color:rgb(255, 0, 0)">
Hexadecimal: <h2 style="background-color:#FF0000">

24

6.7.

Backgrounds

Os backgrounds ou planos de fundo so propriedades que modificam a

aparncia de componentes. As principais propriedades do background so:

Background-color: Especifica a cor de fundo de um elemento. Ex:

background-color: lightblue;

Background-image: Define uma imagem como plano de fundo do

elemento. Ex: background-image: url("my_image.gif");
Background-repeat: Aplicado juntamente com a propriedade backgroundimage possibilita repetir a imagem na pgina Web horizontalmente e
verticalmente. Ex: background-repeat: repeat-x; backgroundrepeat: repeat-y;

6.8.

Background-attachment: Especifica que a imagem de fundo deve ser fixa

ou rolar junto com a pgina. Ex: background-attachment: fixed;
Background-position: Define a posio da imagem na pgina. Os valores
dessa propriedade podem ser definidos especificando a regio da pgina
atravs da combinao das posies left, right, center com bottom, center e
top. Ex: background-position: left top;
Outra possibilidade especificar a posio da imagem em
porcentagem. O primeiro valor correspondendo ao eixo x e o segundo ao y.
Ex: background-position: 50% 20%;
Tambm possvel especificar a posio da imagem referenciando a
quantidade de pixels. Ex: background-position: 50px 20px. A
desvantagem de utilizar pixels a dependncia que a pgina passa a ter do
tamanho da tela, pois como se trata de um tamanho fixo, o modo como ela
ser exibida ser o mesmo em todas as telas.

Bordas

Para se especificar o tipo de borda que os elementos devem mostrar na tela

utiliza-se a propriedade border-style. Os valores mais utilizados so: dotted
Define uma borda tracejada e solid Define uma borda slida
6.8.1. Border-color

Propriedade utilizada para definir as cores das bordas. Ex: bordercolor: red;

6.8.2. Bordas individuais

25

Algumas vezes necessrio exibir apenas algumas bordas, para isso

utiliza-se quatro propriedades individuais para cada lado. So elas: bordertop-style: dotted; border-right-style: solid;
style: dotted; border-left-style: solid;

6.9.

border-bottom-

Margens

As margens possibilitam inserir espaos, fora das bordas, entre elementos da

pgina. O CSS possui propriedades especficas para cada lado de um elemento:
margin-top, margin-bottom, margin-left e margin-right.

Figura 12: Espaamento entre elementos

Uma das propriedades mais interessantes das margens a inherit. Essa

propriedade permite que o elemento herde as caractersticas do seu pai. Por
exemplo, o cdigo abaixo contm um elemento div com um pargrafo dentro.
Quando se definiu a margem left do pargrafo como inherit, automaticamente ele
herdou as propriedades das margens da div container.
<head>
<style>
div.container {
border: 1px solid red;
margin-left: 100px;
}
p.one {
margin-left: inherit;
}
</style>
</head>
<body>
<h2>Uso da propriedade inherit</h2>
26

<div class="container">
<p class="one">Vou herdar as margens
antecessor. (Da div container).</p>
</div>

do

meu

</body>

O CSS permite algumas variaes na hora de definir as margens.

margin: 25px 50px 75px 100px

o Top-margin: 25px
o Right-margin: 50px
o Bottom-margin: 75px
o Left-margin: 100px
margin: 25px 50px 75px
o Top-margin: 25px
o Right-margin: 50px
o Bottom-margin: 75px
margin: 25px 50px
o Top-margin: 25px
o Right-margin: 50px
margin: 25px
o Todos os lados: 25px

6.10. Padding
A propriedade padding utilizada para definir espaos entre o contedo do
elemento e suas bordas. A Figura 13 mostra a propriedade padding sendo aplicada a
uma imagem.

Figura 13: Padding

O CSS possui propriedades especficas para tratar padding. So elas:

padding-top, padding-right, padding-bottom e padding-left.
Ex: padding-top: 50px;

27

6.11. Propriedades de dimenso

As propriedades de dimenses permitem controlar a altura e largura dos
componentes.

Width Define a largura de um componente

Height Define a altura do componente
Max-width Define a largura mxima do componente
Max-height Define a altura mxima do componente
Veja alguns exemplos utilizando as propriedades de dimenso:
width: 500px;
height: 100px;
max-width: 500px;
max-height: 50px;

Quando o texto se refere a altura ou largura mxima, significa o mximo

que o elemento pode chegar quando a janela do navegar redimensionada.

6.12. Propriedades de texto

O CSS oferece diversas propriedades pra texto.
6.12.1. Text color

Propriedade utilizada para colorir o texto.

Ex: color: blue;
6.12.2. Text alignment

Propriedade utilizada para alinhamento do texto, podendo ter os

seguintes valores: center, left, rigth e justify.
Ex: text-align: justify;
6.12.3. Text decoration

Propriedade utilizada para decorar o texto, como sublinhados

(underline), tachado (overline), e barra superior (line-through).
28

Ex: text-decoration: underline;

6.12.4. Text transformation

Propriedade utilizada para transformar texto em caixa alta, caixa baixa e

capitalizar a primeira letra de cada palavra. Por exemplo:
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;

6.12.5. Text identation

Propriedade utilizada para identar a primeira linha de um texto.

Ex: text-indent: 50px;

6.13. Fontes
O CSS trata a questo das fontes dividindo-as em dois grupos: generic
family e font family.
O grupo das fontes generic family so tipos mais simples como Serif, Sansserif e Monospace.
O grupo das fontes font family so tipos mais complexos derivadas do grupo
das generic family, o que pode acontecer de certos navegadores ou sistemas
operacionais no possurem tais fontes. Uma boa prtica de desenvolvimento com
esse tipo de fonte definir mais de um tipo, comeando com a fonte desejada e
finalizando com uma generic family. Sempre que um nome de fonte possuir mais
de uma palavra elas devem ficar entre aspas duplas.
Ex: font-family: "Times New Roman", Times, serif;

6.13.1. Font style

29

Propriedade utilizada principalmente para transformar um texto em

itlico
Ex: font-style: italic;

6.13.2. Font size

Propriedade utilizada para definir o tamanho da fonte, podendo ser

expressa em trs medidas: cm, px e em. A medida em recomendada devido a
sua natureza geral adaptativa. Um em (1em) equivale ao tamanho padro da
fonte do navegador que 16 pixels. Veja a definio do tamanho de uma fonte
utilizando unidades de medidas diferentes:
Ex: font-size: 2.5em; font-size: 40px;

6.13.3. Font weight

Propriedade responsvel por definir a largura da fonte. Podendo

assumir valores como normal e bold (negrito).
Ex: font-weight: normal; font-weight: bold;

6.14. Links
Os links so utilizados para ligar pginas por meio de nomes. Alm de todas
as propriedades de texto citadas nas ultimas sees, os links tambm suportam
diferentes estados. O CSS define 4 estados para links:

a:link um link no visitado

a:visited um link j visitado
a:hover um link quando o mouse passa por cima
a:active um link quando ele clicado

Quando mais de um estado utilizado, deve-se seguir a seguinte sequncia

de precedncia:

a:visited > a:link>a:hover > a:activer

6.15. Layout
6.15.1. display

30

A propriedade display define como os elementos de uma pgina Web

so organizados e mostrados. O CSS dispe de dois valores base para essa
propriedade:

Block Quando um elemento mostrado com esse valor significa que cada
elemento vai ocupar uma linha inteira, consequentemente cada elemento vai
ficar em uma linha.
Inline Os elementos que adotarem esse valor sero mostrados na mesma
linha, se houver espao suficiente. Caso contrrio, o elemento passar para a
linha subsequente.
None Define que o elemento no ser mostrado na pgina. Alm disso,
um elemento display com esse valor no deixa espao vazio ao contrrio da
propriedade visibility:hidden, que tambm esconde o elemento na pgina,
mas deixa um espao vazio em seu lugar.
Inline-block a combinao da propriedade display:inline com
display:block. Ao contrrio da inline, a inline-block permite atribuir uma
largura e uma altura ao elemento.

Alguns exemplos de declaraes usando block, inline, none, inlineblock e hidden:

display: inline;
display: block;
display: none;
display: inline-block;
visibility: hidden;

6.15.2. Position

A propriedade position utilizada para determinar o posicionamento de

um elemento HTML. O CSS oferece quatro tipos de valores para a propriedade
position: static, relative, fixed e absolute.

Static Geralmente a forma padro de posicionamento, sendo os

elementos posicionados de acordo com a ordem padro de insero na
pgina Web.
Relative Um elemento com position:relative deslocado na pgina em
relao a sua posio atual.
Absolute Um elemento com position:absolute posicionado com
relao a seu elemento pai.
Fixed Um elemento com position:fixed leva em considerao apenas a
rea chamada de viewport, ficando sempre no mesmo lugar, mesmo
quando utilizada a barra de rolagem.
31

6.15.3. Sobreposio de elementos

Quando elementos so posicionados, pode acontecer de alguns deles

ficarem sobrepostos. Para tratar isso, utiliza-se a propriedade z-index capaz de
definir a ordem de visualizao dos elementos.
Um z-index pode assumir valores positivos e negativos; positivos
colocam os elementos no topo da pilha e negativos no fim.

6.15.4. Propriedade Float

A propriedade float pode ser utilizada quando precisamos flutuar um

elemento de uma posio para outra, podendo assumir os seguintes valores:
top, right, bottom e left.

6.15.5. Propriedade Clear

Utilizada em conjunto com a float, a propriedade clear trata efeitos

colaterais provocados pela flutuao dos elementos. Quando um elemento
flutuado, pode acontecer dos elementos posteriores o sobreporem, precisando
que o clear os coloque novamente no lugar. A propriedade clear pode assumir
os valores padres de posicionamento: top, right, bottom e left.

6.15.6. Propriedade Overflow

Quando um elemento maior que o elemento que o contm e ele

flutuado, o elemento maior pode sair do espao do elemento pai. A propriedade
overflow:auto no permite que isso ocorra.

6.16. Menus Dropdowns

Os dropdowns so menus que reagem ao passar do mouse abrindo novas
opes em submenus. O cdigo abaixo mostra a criao de uma barra de
navegao contendo trs menus e um menus chamado Dropdown que contm
mais trs submenus.

32

Para se criar submenus comum utilizar divs aninhadas. Para cada

subdiviso cria-se uma div filha que ir guardar o contedo dos submenus. Na linha
63 foi criada uma div dentro da tag <li> que ir alojar os submenus.
Os menus principais foram criados utilizando uma lista no organizada sem
um estilo definido.
Os menus foram deslocados para a esquerda utilizando a propriedade
float:left.
Todos os descendentes <a> da tag <li> e a classe dropbtn tero os
seguintes valores:
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;

Esses valores indicam que os elementos sero mostrados em linha utilizando

blocos; tero a cor branca, centralizados e sem sublinhados.
As linhas 25 a 27 define, quando o mouse passar por cima dos descendentes
<a> da tag <li>, ou seja, os menus, e da classe dropbtn e dropdown eles
assumiram a cor de fundo vermelha.
Nas linhas 29 a 31, o CSS define que os elementos representados pela classe
dropdown, ou seja, os submenus sero apresentados na forma inline-block.
As linhas 33 a 39 definem a cor, o alinhamento e a forma como os
submenus so mostrados. J as linhas 41 a 47 trata a cor, o alinhamento e outros
detalhes dos elementos <a> descendentes da classe dropdown-content.
A linha 49 atribui a cor de fundo #f1f1f1 (cinza) aos elementos <a>
descendentes da classe dropdown-content, ou seja, os submenus quando o mouse
passa por cima.
As ltimas linhas, 51 a 53, so utilizadas para permitir que ao passar o
mouse por cima do menu Dropdown os elementos sejam apresentados na forma
de blocos.

33

34

A Figura 14 mostra o resultado do cdigo acima.

Figura 14: Menu Dropdown

7. JavaScript
O JavaScript uma linguagem de programao interpretada, ou seja, no
necessita de um compilador especfico, apenas necessrio um navegador que possa
suport-lo, o que no uma tarefa to difcil, pois a maioria dos navegadores atuais
oferecem esse suporte. A linguagem JavaScript do tipo client-side, ou seja, roda
apenas no lado do cliente. Assim, o usurio tem a autonomia de habilitar ou desabilitar
o JavaScript do seu navegador, cabendo a pgina web avisar ao usurio se o suporte
est habilitado ou no.

7.1.

Introduo

35

Uma declarao em JavaScript pode colocada entre as tags <head> e

<body> de uma pgina HTML atravs da tag <script>. O atributo type opcional,
pois o JavaScript considerado pelos navegadores uma linguagem de script padro.
<script type="text/javascript">
//cdigo JavScript aqui
</script>

Tambm possvel colocar o cdigo JavaScript em um arquivo separado e

depois cham-lo no arquivo HTML por meio da tag <script>.
<!DOCTYPE html>
<html>
<body>
<script src="meuScript.js"></script>
</body>
</html>

7.2.

Funes de Display
O JavaScript permite visualizar dados de diferentes maneiras:

Windows.alert() exibi os dados em uma janela pop-up passados como

parmetro.

Document.write() exibi os dados na prpria pgina onde foi chamado.

innerHTML() Exibe os dados passados como parmetro em um elemento

especfico, obtido atravs do mtodo: document.getElementId(). No cdigo
abaixo, o script obtm o id chamado demo, do pargrafo <p> e escreve nele a
soma 5 + 6.
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

console.log() Exibe os dados no console do navegador passados como

parmetro.

7.3.

Sintxe

As instrues em JavaScript so separadas por ponto e vrgula. Os dois

trechos de cdigo abaixo esto corretos e geram a mesma sada.

36

var x = 5;
var y = 6;
var z = x + y;
var x = 5;var y = 6;var z = x + y;

O JavaScript trabalha com cinco tipo de declaraes: valores, operadores,

expresses, palavras chaves e comentrios.
7.3.1. Valores

A linguagem JavaScript trabalha com dois tipos de valores: valores

fixos que so chamados de literais, como nmeros e textos. E valores variveis,
representado por variveis propriamente ditas.
Exemplo de valores fixos: 12, 0.45, Lua.
Exemplo de valores variveis:
var x;
x = 6;
7.3.2. Operadores

O JavaScript utiliza os seguintes operadores:

o

Para atribuir valores a variveis: ( =)

Ex: var x = 5; var y = 6;

Operaes aritmticos: (+, -, *, /, %, ++, --)

Ex: (5 + 6) * 10
Ex: incremento: var x = x++; decremento: var y=x--;
Ex: Operador mdulo, var x = 5%3; resposta: x==2.

o Operadores lgicos: (&&, ||, ==, ===, !=, !==, >, <, >=, <=, ?)
Ex: a==b; 3!=5; 4>3;
7.3.3. Expresses

Expresses so formadas da combinao de operadores e valores. Veja

alguns exemplos:
5 * 10 = 50
"John" + " " + "Doe" = "John Doe"
37

Var a =5; 4 * a + 3 = 23

7.3.4. Palavras reservadas

As palavras reservadas so comuns no somente a JavaScript, mas

tambm a todas as linguagens de programao. A palavra reservada var
utilizada para declarar uma varivel em JavaScript.
Ex: var x = 5 + 6;

7.3.5. Comentrios

Os comentrios em JavaScript podem serem feitos para comentar

somente uma linha ou vrias linhas simultaneamente.
Ex 1: comentando somente uma linha
// var x = 6;

Isto no vai ser executado

Ex 2: comentando mais de uma linha

/* var x = 6;
x=x*3; */

7.4.

Identificadores

Identificadores so utilizados para nomear variveis. O JavaScript permite

comear o nome de uma varivel por underscore (_), letras e cifro ($).
O JavaScript case sensitive, ou seja, letras minsculas e maisculas so
consideradas diferentes. Ex: var nome; var Nome;
Uma boa prtica de programao em JavaScript, quando se utiliza mais de
um nome para se declarar uma varivel, comear a primeira palavra em
minsculo e iniciar a segunda em maisculo.
Ex: var subTitulo; var sobreNome;

38

7.5.

Tipos de dados

O JavaScript possui muitos tipos de dados, entre eles esto String, Number,
Boolean, Array, Object. Veja alguns exemplos:
var
var
var
var

idade = 16;
sobrenome = "Johnson";
marcas = ["Saab", "Volvo", "BMW"];
x = {firstName:"John", lastName:"Doe"};

// Number
// String
// Array
// Object

7.5.1. Strings

As Strings so utilizadas para armazenar e manipular textos, podendo

est dentro de aspas simples ou dupla.
Uma possibilidade combinar Strings utilizando aspas simples e dupla.
Veja o exemplo:
var answer = "It's alright";
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';

Para encontrar o tamanho de uma String utiliza-se a propriedade length.

Ex: var texto = "abcdefghijklmnopqrstuvwxyz";
var tamanho = Texto.length;
Resposta: tamanho igual a 26.

Normalmente Strings so literais na forma: var nome = "Cleosvaldo".

No entanto, possvel declarar uma String como um objeto.
Ex: var y = new String("John");
Obs: O operador new utilizado para criar instncias de classes, nesse
caso, a classe String.

7.5.2. Nmeros

O JavaScript oferece suporte a somente dois tipos de nmeros: inteiro e

decimal. Os nmeros decimais podem ser escritos na forma extra grande e
nmeros pequenos.

39

Ex: var x = 123e5;

// equivalente a 12300000

var y = 123e-5;

// equivalente a 0.00123

O JavaScript interpreta constantes como nmeros hexadecimais.

Ex: var x = 0xFF;

// x igual a 255

Por padro o JavaScript mostra os nmeros em decimal, mas utilizando

o mtodo toString possvel converter um nmero para qualquer base.
Ex: var numero = 128;
numero.toString(16); // converte para a base 16 = 80
numero.toString(8); // converte para a base 8 = 200
numero.toString(2); // converte para a base 2 10000000

7.5.3. Boolean

O tipo de dado boolean utilizado como resultado de operaes

lgicas, podendo assumir os valores true e false.
Ex: (10 > 9) // retorna true
10 > 9 // retorna true

Quando o resultado de uma expresso diferente de zero, excerto

NULL e vazio, significa que o resultado verdadeiro.
Ex: var x = null; var y = "Francisvania"; var z
= 10 / "H";
Boolean(x);

// retorna false

Boolean(y);

// retorna true

Boolean(z);

// retorna false

7.5.4. Array

Os Arrays so estruturas de dados multidimensionais utilizados para

armazenar mltiplos valores, em apenas uma varivel.
O cdigo abaixo mostra a criao de um array com a atribuio de seus
valores.

40

Ex: var cars = ["Mercedes", "Volvo", "BMW"];

Outra forma possvel para se declarar um array utilizando a palavra
reservada new. Veja o exemplo abaixo, que criar um array chamado cars e
mostra na pgina apenas o elemento da posio 0.
Ex:
<p id="demo"></p>
<script>
var cars = ["Mercedes", "Volvo", "BMW"];
document.getElementById("demo").innerHTML=cars[0];
</script>

Um mesmo Array pode conter diferentes tipos de dados. Assim como

pode-se definir o nome dos ndices que sero utilizados para um futuro acesso.
Obs: a nomeao de ndices s poder acontecer se a declarao do
array ocorrer com abre e fecha chaves, significando que ele declarado como
objeto.
Exemplo de um array com diferentes tipos de dados:
var person = ["Cleosvaldo", true, 46];

Exemplo da definio de ndices para um array:

var person
{nome:"Cleosvaldo", estudante:true, idade:46};

document.getElementById("demo").innerHTML
person["nome"];

O JavaScript oferece algumas propriedades e mtodos bastante teis

para se trabalhar com arrays.
o Length Retorna o tamanho do array.
o Push Adiciona um novo elemento ao array.
7.5.5. Objetos

41

Um objeto em JavaScript definido para abrigar diversos valores ou

tambm chamados propriedades, seguindo o modelo: nome:valor.
Ex: Criando um objeto.
var car = {marca:"Fiat", modelo:"500", cor:"Branca"};

Ex: Acessando as propriedades do objeto

Document.getElementById("demo").innerHTML = car.marca;
Document.getElementById("demo").innerHTML = car["marca"];

Assim como toda linguagem orientada a objetos, o JavaScript permite

criar mtodos para os objetos.
Um mtodo pode ser visto como uma propriedade do objeto, se
diferenciando por conter um corpo onde ficam suas operaes.
Ex:
var pessoa = {
nome: "John",
sobrenome : "Doe",
id

: 5566,

nomeCompleto : function() {
return this.nome + " " + this.sobrenome;
}
};

Para acessar um mtodo similar a acessar qualquer outra propriedade.

Ex:
document.getElementById("demo").innerHTML =
pessoa.nomeCompleto();

Obs: Quando se acessa um mtodo, sempre deve-se colocar os

parnteses no final.

42

7.6.

Funes

As funes so blocos de cdigo utilizados para realizar uma tarefa

particular. Em JavaScript, as funes so definidas da forma abaixo:
function nome_da_funo(parmetro 1, parmetro 2, parmetro 3,
parmetro n) {
//cdigo a ser executado
}

Uma funo pode retornar um valor. Para isso, utiliza-se a palavra reservada
return.
Ex: var x = myFunction(4, 3);
function myFunction(a, b) {
return a * b;

// chamando a funo

// Declarao da funo
//retornando o produto a * b

7.7.

Datas
O JavaScript trabalha com dois formatos de datas:

o Como String - Sat May 28 2016 21:27:54 GMT-0300 (Hora oficial do

Brasil)
o Como um inteiro Retornando o nmero de segundos desde, 1 de Janeiro
de 1970, 00:00:00.
Existem quatro maneiras de se inicializar um objeto do tipo Date.
new Date() Cria um Date com a data corrente
new Date(milissegundos) Criar um objeto Date a partir do nmero de
milissegundos passados como parmetro.
new Date(String da data) - Cria um objeto Date, passando a data
como String: "October 13, 2014 11:13:00"
new Date(ano, ms, dia, horas, minutos, segundos,
milissegundos) Cria um objeto Date, especificando os valores da data

separadamente.
Veja alguns mtodos do objeto Date:
43

o
o
o
o
o
o
o
o
o

7.8.

getDate() obtm o dia do ms como um nmero de 1 a 31

getDay() obtm o dia da semana como um nmero de 0 a 6
getFullYear() obtm os quatro dgitos de um ano
getHours() obtm as horas como um nmero de 0 a 23
getMilliseconds() obtm os milissegundos como um nmero de 0 a 999
getMinutes() obtm os minutos como um nmero de 0 a 59
getMonth() obtm o nmero da semana como um nmero de 0 a 11
getSeconds() obtm o nmero de segundos como um nmero de 0 a 59
getTime() obtm o nmero de milissegundos desde 1 de Janeiro de 1970,
00:00:00.

Eventos

Eventos so aes que o JavaScript oferece aos elementos HTML para que
eles reajam a determinados estmulos. Tanto causado pelo usurio, quanto pelo
resultado de um processamento.
Os eventos mais comuns esto relacionados ao uso do mouse e teclado. O
HTML possui diversos atributos para se trabalhar com esses eventos. Segue uma
lista dos principais:
o Onclick ativado ao clicar em um elemento
o Onmouseover ativado ao mover o mouse sobre o elemento
o Onmouseout ativado ao sair com o mouse da regio do elemento
Exemplo de um elemento que recebe um evento onclick e mostra a data
atual.
<button onclick="displayDate()">Que horas so?</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>

7.9.

Validao de formulrios

A validao de formulrios bastante til, para evitar a sobrecarga do

trfego de dados entre o navegador e o servidor web.

44

O JavaScript permite validar os dados de um formulrio antes de enviar ao

servidor web. Geralmente, so mostradas mensagens de alertas ou campos com
cores destacados ao usurio, informando que algum campo foi preenchido
incorretamente.
O HTML oferece um atributo chamado requered que impede o envio dos
dados do formulrio, caso o campo esteja vazio. No entanto, o JavaScript
possibilita uma validao bem mais robusta, como ser visto a seguir.
Ex: Validao de um formulrio utilizando HTML.
<form action="demo_form.asp" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>

Quando um elemento HTML bem elaborado, o JavaScript possui um

mtodo de validao chamado checkValidity que verifica se os dados de entrada
esto de acordo com a forma declarada no HTML.
Ex:
<input id="id1" type="number" min="100" max="300">
<button onclick="myFunction()">OK</button>
<p id="demo"></p>
<script>
function myFunction() {
var inpObj = document.getElementById("id1");
if (inpObj.checkValidity() == false) {
document.getElementById("demo").innerHTML =
inpObj.validationMessage;
}
}
</script>

A validao de um formulrio por JavaScript comea na forma de acesso. A

linha abaixo mostra como acessar o valor de um determinado elemento de um
formulrio. O nome do formulrio myForm e fname o nome do input text.
var x = document.forms["myForm"]["fname"].value;

45

8. Servlets
Quando a navegao em sites na internet se limitava apenas ao acesso de
pginas estticas em servidores web, ou seja, pginas criadas somente em HTML, CSS
e JavaScript. O usurio no tinha como interagir dinamicamente com o contedo, pois
todo o processamento era realizado somente no browse do cliente. O cliente solicitava
uma pgina e o servidor web a entregava.
Com o passar do tempo e a expanso da internet, surgiu o conceito de
pginas dinmicas. Agora o cliente poderia interagir dinamicamente com as pginas
web, e os sites tinham a capacidade de processar informaes especficas solicitadas
pelos clientes.
Mas como foi possvel realizar o processamento de informaes do lado do
servidor? A resposta para essa pergunta foi utilizar as linguagens j existentes como C,
C++, PhP, C#, e Java. Mas como o servidor web executa essas linguagens, recebendo
requisies em HTTP? Para isso foi criado o conceito de web container. Um container
criado especificamente para cada linguagem de programao, permitindo processar
informaes em uma linguagem especfica como Java, C++, e Python. Assim, quando
o cliente solicita informaes sobre sua conta bancria a um servidor web, o servidor
codifica essa requisio para uma linguagem especfica e a passa para o web
container, que se encarregar de acessar o banco de dados e retornar os dados para o
servidor, que em seguida retornar ao cliente.
A implementao do web container, em Java, baseada em Servlets, uma
tecnologia criada pela Sun para o desenvolvimento de aplicaes Web a partir de
componentes Java que executem no lado do servidor. Servlets so classes Java que so
instanciadas e executadas em associao com servidores web, de base de dados, de
email, e de arquivos. Com o objetivo de fornece uma comunicao entre clientes e
servidores por meio do protocolo HTTP.

Figura 15: Funcionamento de pginas web dinmicas.

46

Existem diversos Web containers no mercado, entre os principais deles esto:

Apache Tomcat, Apache Geronimo, GlassFish, JBoss Aplication Server, Jaminid,
Winstone e Tiny Java Web Server.

9. Apache Tomcat
O Apache Tomcat um servidor web open source, que contm um web
container Java e implementa as tecnologias: Servlets, JSP - JavaServer Pages, Java
Expression Language e Java WebSocket.

9.1.

Instalao do Tomcat

O
Apache
Tomcat
pode
http://tomcat.apache.org/download-70.cgi.

ser

baixado

no

site:

A configurao do Tomcat no ambiente Windows muito simples.

preciso apenas baixar o arquivo ZIP do site e colocar a pasta descompactada na
unidade C. Nessa apostila ser utilizada a verso 7.0.69 64 bits do Tomcat.
Para configurar o Tomcat em uma IDE como Netbeans necessrio
primeiramente configurar, a IDE, com as ferramentas necessrias para se trabalhar
com a Web. Portanto, necessrio que o seguinte plug-in esteja instalado: Java EE
Base.
Caminho: Ferramentas Plug-ins- aba plug-ins disponveis

O prximo passo criar um servidor web no Netbeans, veja a sequncia de

passos:
Caminho: Aba - servios, boto direito servidores,
adicionar servidor, Escolher Apache Tomcat, Selecionar a pasta
do Tomcat Localizao do servidor, definir um usurio e uma
senha, Criar usurio caso no exista.

Com o servidor web criado, agora vamos criar um projeto chamado

AgendaWeb, que utilizar o framework Hibernate para intermediar a comunicao
com o banco de dados MySQL e estar disponvel para ser acessado por meio do
navegador web.

47

9.2.

Projeto Web

O Nome do projeto ser AgendaWeb e os passos para sua criao no

Netbeans segue abaixo:
Caminho: Menu arquivo Novo projeto; Categorias Java Web;
Projetos Aplicao Web; Nome do projeto AgendaWeb; Servidor
Apache Tomcat; Frameworks Hibernate; Conexo ao banco de dados
jdbc:mysql...; finalizar.
9.2.1. Projeto AgendaWeb

Quando se trata de desenvolvimento web comum utilizar uma tcnica

de engenharia de software chamada MVC Model View Controller. Essa
tcnica permite separar as partes referentes a modelagem do banco de dados, a
apresentao da pgina e uma parte para gerenci-las.

Utilizando o padro MVC, vamos criar trs pacotes no projeto

AgendaWeb: controllers, models e daos. Tambm vamos criar uma pasta
chamada views, onde ficaro os arquivos HTML, CSS e JSP de exibio. A
Figura 16 abaixo, mostra a estrutura do projeto. Todos esses arquivos esto nos
anexos.

48

Figura 16: Estrutura do projeto

Por padro, um projeto web criado no NetBeans vem com a seguinte

estrutura: uma pgina principal chamada index.jsp; uma pasta chamada METAINF, com um arquivo de configurao de contexto, e uma pasta chamada
WEB-INF, com o arquivo web.xml, onde se define a pgina inicial a ser
chamada no servidor. Os demais pacotes e pastas foram definidos seguindo o
princpio MVC.
O primeiro passo no desenvolvimento do projeto modelar o banco de
dados. Apenas para fins didticos, vamos criar trs classes que possam modelar
uma agenda. A Figura 17 mostra os relacionamentos e propriedades de cada
uma delas. Para criar um modelo similar ao utilizado nesse projeto, pode-se
utilizar o software MySQL Workbench.

49

Figura 17: Modelo do banco - agendaWeb

Com a criao do modelo em UML, o prximo passo agora mape-lo

para as classes Java. Dentro do pacote models, vamos criar trs arquivos:
Contato.java (Apndice A), Endereco.java (Apndice B) eTelefone.java
(Apndice C).
Cada uma das propriedades do modelo UML deve ser mapeada para sua
classe correspondente. Assim, como os mtodos get e set, correspondente
cada propriedade.
Aps o mapeamento do modelo em suas respectivas classes, agora
vamos criar uma classe chamada ConnectionFactory responsvel por abrir e
fechar conexes com nosso banco de dados. Essa classe vai ficar no arquivo
ConnectionFactory.java (apndice D), no pacote daos.
Agora que temos a classe responsvel por conectar nossa aplicao ao
banco de dados e as classes que representam o nosso modelo. Vamos criar trs
classes que iro gerenciar as operaes com nosso banco de dados:
ContatoDAO.java (Apndice E), EnderecoDAO.java (Apndice F) e
TelefoneDAO.java (Apndice G).
Todas as operaes que desejarmos fazer com as tabelas do banco sero
definidas nessas classes. Operaes como insert, update, delete e select que
nossa aplicao solicitar sero atendidas por essas classes. Assim, todo cdigo
SQL da nossa aplicao ser mantido nessas classes.
Com a camada model do MVC pronta, agora vamos iniciar a camada
front end ou seja, o views. A primeira pgina da nossa aplicao ser o arquivo
agendaWeb.jsp (Apndice H). Esse arquivo a porta de entrada para a
aplicao. Ele mostra a interface de uma agenda, junto com os contatos que j
esto armazenados no banco. Isso possvel graas a comodidade que o JSP
fornece, em interpretar uma pgina JSP como se fosse HTML, e ao mesmo
tempo, permitir que cdigo Java seja inserido em meio a tags HTML.

50

O arquivo CSS da pgina agendaWeb.jsp (Apndice H) est na pasta

views com o nome de agendaWeb.css (Apndice I). Como resultado, da
aplicao do CSS, a nossa pgina principal ficar como na Figura 18.

Figura 18: Interface principal

O boto novo permite chamar o arquivo novoContato.html (Apndice J)

com um formulrio, onde ser possvel entrar com o nome, telefone e endereo
do contato. O CSS correspondente, est na pasta views com o nome de
novoContato.css (Apndice K).

Figura 19: Interface do arquivo novoContato.html

Quando o usurio preenche os campos e clica no boto confirmar, ele

est solicitando ao servidor web que busque um arquivo chamado
51

novoContato.java (Apndice L), que est dentro do pacote controllers. Esse

arquivo implementa um Servlet.
Toda classe Servlet deve estender a classe HttpServlet e sobrescrever
dois mtodos por onde as solicitaes dos clientes, ou seja, os navegadores so
recebidas.
Quando os dados de um formulrio so enviados utilizando o mtodo
GET, o Servlet vai recebe-los no mtodo doGet (HttpServletRequest request,
HttpServletResponse response). J se os dados forem enviados utilizando
POST, o mtodo doPost ( HttpServletRequest request, HttpServletResponse
response ) ser chamado. Ambos os mtodos possuem os mesmos parmetros,
sendo que o parmetro request utilizado para receber os dados e o response
para enviar uma resposta de volta a quem solicitou.
Esse Servlet, representado pelo arquivo novoContato.java (Apndice
L), vai criar uma instncia de cada classe, do pacote models e adicion-las ao
banco de dados, utilizando suas respectivas classes DAOS do pacote daos.
Quando a operao realizada, o Servlet gera uma pgina HTML
dinmica, como de resposta a requisio.
importante e extremamente aconselhvel, no utilizar Servlets para
gerar pginas HTML complexas. Primeiramente, porque o cdigo vai ficar sujo
visualmente e segundo, porque todo cdigo HTML a ser gerado, tem que ser
passado como String, tornando altamente invivel gerar pginas de alta
complexidade.
Quando o usurio volta a pgina principal e escolhe o menu editar. Ele
vai parar uma pgina HTML chamada form_editar.html (Apndice M). Essa
pgina contm um campo, onde o usurio vai passar o ID do contato que ele
deseja alterar.

Figura 20: Editar contato por ID

Ao digitar o ID, o servidor web executa o Servlet editar.java (Apndice

N). A funo desse Servlet somente encaminhar o valor do ID recebido,
utilizando o mtodo doPost, para a pgina editar_dados.jsp (Apndice O).
O
encaminhamento

feito,
chamando
o
mtodo
getServletContext().getRequestDispatcher(String string) que retorna um objeto
do tipo RequestDispatcher. E em seguida, chamando o mtodo
getRequestDispatcher(String string) do objeto RequestDispatcher.
52

O arquivo editar_dados.jsp (Apndice O) responsvel por buscar no

banco de dados, as informaes do contato relacionado com o ID lhe foi
passado.

Figura 21: Tela editar contato

Quando o usurio clica no boto confirmar, o formulrio enviado para

a Servlet no arquivo update.java (Apndice R). Essa Servlet recebe todos os
dados do formulrio e aplica uma operao SQL de update utilizando as
classes do pacote daos.
Agora voltando a tela inicial da aplicao, ao clicar no boto excluir o
arquivo excluirContato.html (Apndice P) chamado, mostrando uma tela
similar a Figura 20. No entanto, agora o ID passado vai ser recebido pela
Servlet do arquivo excluir.java (Apndice Q).
A funo dessa Servlet simplesmente buscar um contato, referente a
um ID lhe passado e exclu-lo do banco de dados.

10.

JSF JavaServer Faces

Durante muitos anos o desenvolvimento de software se limitou as aplicaes

Desktop. Onde as aplicaes eram instaladas nos computadores locais, responsveis
por todo o processamento. Esse tipo de aplicao construdo com uma srie de
componentes que a plataforma de desenvolvimento oferece para cada sistema
operacional, como calendrios, botes, janelas e outros componentes drag and drop.
Com o surgimento da Web, as aplicaes passaram a ser executadas
remotamente e acessadas por terminais simples. Uma aplicao Web roda em um
53

servidor local e recebe requisies via navegadores por meio do protocolo HTTP. No
entanto, para se desenvolver uma aplicao Web necessrio conhecer HTML, CSS e
JavaScript, o que muitas vezes pode gerar certa dificuldade para quem no est
familiarizado com o desenvolvimento Web.
Diante do contexto abordado, surgiram os frameworks web baseados em
componentes. Essas ferramentas buscam mesclar os dois estilos de desenvolvimento,
aproveitando as vantagens de cada um. Veja alguns exemplos desse tipo de
framework: JavaServer Faces (JSF), Apache Wicket, Vaadin, Tapestry ou GWT da
Google.
O JSF uma ferramenta que nos possibilita criar aplicaes Java para Web
utilizando componentes visuais pr-prontos, de tal forma que o desenvolvedor no se
preocupe com o CSS, HTML e JavaScript da pgina. Basta adicionar os componentes
e eles sero renderizados como HTML.
Por padro o JSF j vem com diversos componentes bsicos prontos como
inputs, botes, formulrios, calendrios e comboBoxes. No entanto, caso necessite de
componentes mais sofisticados possvel utilizar extenses do JSF como PrimeFaces,
RichFaces, e IceFaces. Essas extenses possuem um grande nmero de componentes
sofisticados, que podem suprir a maioria das necessidades dos desenvolvedores web.

54

Referencial bibliogrfico
ARNOLD, K.; GOSLING, J.; HOLMES, D. A Linguagem de Programao Java. 4. ed. Porto Alegre:
Bookman, 2007.

DEVCAST: Programao Web: Por onde comear?. Realizao de Jaison Schmidt. S.i:
Devmedia, 2016. P&B.
W3SCHOOLS. W3Schools. 2016. Disponvel em: <http://www.w3schools.com/>. Acesso
em: 08 jun. 2016.
ABREU, Karen Cristina Kraemer. Histria e usos da Internet. Disponvel em:
<http://www.bocc.ubi.pt/pag/abreu-karen-historia-e-usos-da-internet.pdf>. Acesso em: 08
jun. 2016.
ANTONIO, Gutierry. Introduo ao desenvolvimento web no Delphi. Disponvel em:
<http://www.devmedia.com.br/introducao-ao-desenvolvimento-web-no-delphi/34423>.
Acesso em: 08 jun. 2016.
PRIMEFACES. PrimeFaces. Disponvel em: <http://www.primefaces.org/>. Acesso em:
08 jun. 2016.
CAELUM. Lab. Java com Testes, JSF e Design Patterns. Disponvel em:
<https://www.caelum.com.br/apostila-java-testes-jsf-web-services-design-patterns/>.
Acesso em: 08 jun. 2016.
K19 TREINAMENTOS. Desenvolvimento Web com HTML, CSS e JavaScript. So
Paulo: K19, 2012.
CAELUM. Java
para
Desenvolvimento
Web. Disponvel
<https://www.caelum.com.br/apostila-java-web/>. Acesso em: 08 jun. 2016.
APACHE TOMCAT. Apache
Acesso em: 08 jun. 2016.

Tomcat. Disponvel

55

em:

em:

<http://tomcat.apache.org/>.

Apndices
Apndice A - Contato.java

56

Apndice B: Endereco.java

57

58

Apndice C: Telefone.java

59

Apndice D: ConnectionFactory.java

60

Apndice E: ContatoDAO.java

61

62

63

Apndice F: EnderecoDAO.java

64

65

66

Apndice G: TelefoneDAO.java

67

68

Apndice H: agendaWeb.jsp

69

70

Apndice I: agendaWeb.css

71

72

73

Apndice J: novoContato.html

74

75

76

Apndice K: novoContato.css

77

78

79

Apndice L: novoContato.java

80

81

82

Apndice M: form_editar.html

83

Apndice N: editar.java

84

Apndice O: editar_dados.jsp

85

86

87

Apndice P: excluirContato.html

88

Apndice Q: excluir.java

89

90

Apndice R: update.java

91

92

93