JULIANO PAULO MENZEN

PROGRAMAÇÃO WEB

SUMÁRIO
Forma de Aplicação e Precedências do CSS 54
Introdução à Internet 5 Tags adicionais de HTML para iteração com o CSS 56
As fases da Internet 8 Seletores 56
Unidade de Medida em CSS 59
Mais um pouco de história 13 Estilos para Formatação de Texto 60
Tags Estruturais 15 Fluxo de Página 66
Formatação de Texto e Imagens 17
Tags para inclusão de títulos 18 Um pouco de História 82
Tag para inclusão de parágrafos e quebra de linhas 19 Estrutura de um Programa JavaScript 83
Tags para destacar textos 21 Variáveis, Atribuições e Operações 87
Tag para alterar a fonte de um texto 23 Interagindo com o Usuário 89 CENTRO UNIVERSITÁRIO UNIFTEC
Tag para inclusão de imagens em uma página 23 Comandos Condicionais e Expressões 91 Rua Gustavo Ramos Sehbe n.º 107.
Tag para adicionar separação de textos em documento 25 Estruturas de Repetição 93 Caxias do Sul/ RS
Meta Tags e Caracteres Especiais 26 Funções 94
Hyperlinks e Âncoras 28 Orientação a Objetos em JavaScript 95
Listas 30 Eventos 97 REITOR
Tabelas 31 Aplicação de CSS com JavaScript 99 Claudino José Meneguzzi Júnior 
PRÓ-REITORA ACADÊMICA
Formulários HTML 35 Débora Frizzo
Inclusão de Elementos de Áudio e Vídeo 40 DOM e Manipulação de Elementos 105 PRÓ-REITOR ADMINISTRATIVO
ADMINISTRATIVO
Funções Anônimas 109  Altair Ruz zarin
Noções de Design 47 Interagindo com o Tempo 111 DIRETORA DE EDUCAÇÃO A DISTÂNCIA (NEAD)
Arquitetura de Informação 47 Rotinas de Geolocalização 113 Lígia Futterleib
Usabilidade 48 Substituindo os Cookies 114
Aprendizagem 48 Canvas API 115
Desenvolvido pelo Núcleo de Educação a
Eciência 48
Distância (NEAD)
Memorização 48 Conceito 122 Designer Instrucional
Robustez 48 Biblioteca Modernizr 123 Sabrina Maciel
Satisfação 48 Framework JQuery 123 Diagramação, Ilustração e Alteração de Imagem
Acessibilidade 49 Eventos JQuery 126 Igor Zattera
Layout 50 Funcionalidades
Funcionalidades do JQuery 127 Revisora
Biblioteca jQuery UI 129 Caiani Martins

Conceito 54 Framework Bootstrap 130

 PROGRAMAÇÃO WEB

Praticamente
Praticamente todos nósnós utilizamos a internet. Seja para verificar o status dos
amigos nas redes sociais, seja para o trabalho do nosso dia a dia ou ainda para pes-
quisarmos aquele assunto sobre o qual queremos conhecer um pouco mais. Também
para escutar música, assistir filmes,
fil mes, enfim, poderíamos ficar
f icar aqui muito tempo citando
citando
os nossos usos da internet.
O que a maioria das pessoas não sabe é como tudo isso funciona. Talvez até
tenham uma ideia de como a internet trabalha, mas apenas uma ideia!
Nesta nossa disciplina de Programação Web, vamos deixar de ter uma
ideia de como a internet funciona para passarmos a ter certeza do seu fun-
cionamento.

Além de aprendermos sobre como tudo começou, vamos compreen-

der o funcionamento das redes e como criar web sites estáticos, ainda,
ainda , como
torná-los disponíveis na internet.
Depois de estudarmos e aplicarmos tudo isso, ao fina l da discipli
d iscipli--
na, ainda poderemos
poderemos exibir aos nossos amigos todas as páginas web que
criamos na própria internet!
Então, alunos, agora vamos navegar em nosso estudo!!!
 PROGRAMAÇÃO WEB

Entenda como uma necessidade de

segurança se tornou uma das maiores
inovações da humanidade no século XXI.
Você já se perguntou alguma vez quando a internet
surgiu? Para muitos de nós, quando nascemos, ou quando
passamos a perceber o mundo ao nosso redor, a internet já
estava presente. Tanto que, possivelmente, você não se imagina
 vivendo sem internet no mundo de hoje.
Na verdade, nem sempre foi assim, há pouco tempo,
considerando o tempo de existência da humanidade, a inter-
net não existia. Pergunte aos seus pais como eles utilizavam
a internet.
A resposta que você receberá é a de que eles não ti-
nham internet!!! Estranho? Nem tanto! Faça outro teste agora,
pergunte para algum amigo mais velho que você como era a
internet na época dele.
 PROGRAMAÇÃO WEB

Provavelmente, ele irá lhe responder

que a internet era bem diferente daquilo
que estamos acostumados a ver. Ela era
lenta, as páginas exibiam poucos recursos, Antes de aprendermos a criar os fa-
praticamente apenas texto e imagens e mosos websites, vamos estudar um pouco
nós não podíamos ver ou escrever para a história e entender como tudo começou.
os nossos amigos na rede social, por um
motivo muito simples: as redes sociais não A Internet é uma rede de compu-
existiam! tadores que começou através de pesquisas
militares durante a Guerra Fria, na déca-
Outro aspecto curioso que você vai da de 1960. Nesse período, existiam dois
ouvir deles é que a internet não estava dis- blocos com políticas e ideologias comple-
ponível a qualquer momento e em qualquer tamente contrárias, que eram os Estados
lugar. Para podermos utilizar a famosa Unidos e a União Soviética.
rede das redes, precisávamos de uma li-
nha telefônica e mesmo assim, tínhamos Estes dois blocos exerciam uma forte
a necessidade de discar para um provedor influência em todo o mundo e qualquer
de acesso com os famosos modens e o seu inovação, como mecanismo ou tecnologia,
barulhinho inconfundível. Se você não poderia proporcionar a um bloco liderar
teve a oportunidade de escutar o barulho, esta disputa. Nesse complexo momen-
neste link   você poderá ouvi-lo ou então to em que vivia o mundo, o governo dos
sentir saudades dessa época, caso tenha Estados Unidos temia um ataque as suas
passado por ela. bases militares pelo governo Russo. Um
ataque a essas bases poderia trazer à tona
A partir de agora, vamos entender informações sigilosas, como também po-
como todas estas situações apresentadas deria destruir para sempre informações
foram se transformando para que a internet contidas naquele local.
pudesse chegar ao ponto que chegou nos
dias atuais.
 PROGRAMAÇÃO WEB

Por conta disso, foi idealizado um
modelo de comunicação que permitisse
que as informações fossem armazenadas
e descentralizadas. Com isso, se uma base
americana fosse atingida, as informações
deste local não seriam perdidas. Este
modelo de comunicação descentralizada
foi batizado de ARPANET, criado pela
ARPA.
A ARPANET funcionava por meio
de um sistema de chaveamento de paco-
tes. Esse sistema fazia a transmissão de
dados em rede de computadores onde as
informações eram divididas em peque-
nos pacotes, os quais possuíam trechos
de dados, informações do destinatário e Donald Davies, propôs uma rede nacional
informações que permitiam a construção de dados também baseada em troca de
do conteúdo original na sua chegada. pacotes. Esta rede foi construída e passou
a se chamar Mark I. No ano de 1976,
Apesar de o governo americano fa- haviam 12 computadores e 75 terminais
zer todo esse investimento, com medo interligados pela rede.
de sofrer um ataque Russo, esse nunca
aconteceu. No entanto, a partir dessa ação, Por volta da década de 70, uma rede
surgiu um dos maiores meios de comuni- de pesquisa francesa chamada CYCLA-
cação do século 20/21, onde, em apenas DES, dirigida por Luis Pouzin, apresentou
Quatro anos, conseguiu atingir em torno um novo modelo de rede como alternati-
de 50 milhões de pessoas.  va a rede americana ARPANET. Sendo
essa, a primeira rede a fazer com que os
Saindo dos Estados Unidos e viajan- próprios equipamentos conectados à rede
do até o Reino Unido, em 1965, o Natio- fossem responsáveis pelo transporte das
nal Physical Laboratory, comandado por informações em vez da própria rede.

Arpanet foi a primeira rede operacional

de computadores base de comutação
de pacotes, sendo uma das redes
precursoras da internet.
Arpa foi a agência de projetos de
pesquisa avançada, sendo criada em
1958 pelos militares para garantir a
superioridade tecnológica dos EUA.
 PROGRAMAÇÃO WEB

Desta maneira, com o surgimento Em 1978, surgiu o protocolo TCP/ na rede, a década de 90 foi responsável
de redes em diversas partes do mundo e IP, onde cada dispositivo conectado à rede pela popularização da internet, de forma
cada uma com diferentes métodos de co- passou a receber um endereço único, para que no ano de 2003 haviam cerca de 600
municação, passou a ser necessário algo que este dispositivo pudesse ser identifi- milhões de pessoas conectadas, enquanto
que pudesse unificar estas redes. Com isso, cado na rede e pudesse receber os paco- que em 2007 este número já estava em 1
membros da DARPA e da Universidade de tes de rede destinados a ele. Assim, em bilhão e 234 milhões de usuários, segundo
Stanford, iniciaram em 1973 um trabalho 1983, o protocolo TCP/IP passou a ser a Internet World Estatistics.
de reformulação, onde todas as diferenças o único protocolo empregado pela rede
entre os protocolos de rede pudessem ser ARPANET. Nas terras tupiniquins a internet
escondidas através do uso de um protocolo teve início em 1988, e servia apenas para
inter-redes comuns. Com esta definição, os Com a ligação de diversas redes por ligar universidades brasileiras com univer-
responsáveis pela comunicação passaram a meio deste novo protocolo, surgiu o ter- sidades americanas. Em 1989 o governo
ser os dispositivos conectados e não a rede.
mo backbone, o qual representa grandes brasileiro iniciou um projeto chamado
Na verdade, o mesmo conceito proposto computadores conectados entre si, os quais de Rede Nacional de Ensino e Pesquisa
pela francesa CYCLADES. distribuem a comunicação de grandes flu- (RNP), que existe ainda hoje, e tem por
 xos de dados entre diferentes regiões, uti- objetivo organizar uma rede acadêmica de
A especificação deste modelo resul- lizando como canais de comunicação fibra alcance nacional.
tou no primeiro uso do termo “internet”, ótica, satélites ou ondas de rádio.
como abreviação de “internetworking” e  O primeiro backbone brasileiro en-
a partir disso, diversos padrões de redes No ano de 1992, Tim Bernes Lee trou em funcionamento em 1991, ligan-
passaram a empregar o seu uso. criou a World Wide Web, surgindo, a do apenas universidades, mas em 1995, o
Com a função da rede reduzida ape- partir de então, o protocolo HTTP, que governou abriu o backbone para fornecer
nas para a transferência de dados, tor- permite a transferência de informações em conectividade a provedores de acesso co-
nou-se possível a junção de praticamente formato textual através de uma linguagem merciais.
todas as redes, independentemente de de hipertexto conhecida como HTML.
suas características. Esse novo padrão de Atualmente, a internet no Brasil é
transferência de dados entre redes ficou A partir da World Wide Web e, gerenciada pelo NIC.br, a qual pode ser
conhecido como TCP.  juntamente, com o interesse comercial acessado em http://www.nic.br. Além de
 PROGRAMAÇÃO WEB

 Texto Sublinhado: Tag <u>. Exemplo:  Texto Riscado: Tag <s>. Exemplo: Devemos observar que estes ele-
<html> <html>
mentos de formatação também podem ser
  <head>   <head> aplicados de forma combinada, conforme
  </head>   </head> segue exemplo:
  <body>   <body>
<h1>Residuo eletronico</h1> <h1>Residuo eletronico</h1> <html>
<p> <p>   <head>
Residuo computacional Residuo computacional   </head>
tambem conhecido como tambem conhecido como   <body>
Residuo eletronico ou Residuo eletronico ou <h1>Residuo eletronico</h1>
lixo eletronico.... lixo eletronico.... <p>
</p> </p> Residuo
<p> <p> computacional
Origem: Wikipedia, a Origem: Wikipedia, a tambem conhecido como
enciclopedia livre. enciclopedia livre. Residuo eletronico
  </p>   </p> ou lixo eletronico
  </body>   </body>   ...
</html> </html> </p>
<p>
Origem: Wikipedia, a
enciclopedia livre.
  </p>
  </body>
</html>
 PROGRAMAÇÃO WEB

De acordo com o que se pode observar, a tag font somente

funciona se for utilizada em conjunto com as suas propriedades.
Não existe ordem específica para inclusão dessas propriedades,
Para alterar características da fonte de um determinado não havendo, também, necessidade de inclusão de todas as pro-
bloco de texto em uma página, deve-se aplicar a tag <font>. Essa priedades de uma única vez. A seguir, observe o detalhamento
tag permite, através do emprego de suas propriedades, alterar de cada uma das propriedades.
a família da fonte, bem como o seu tamanho e cor, conforme
segue no exemplo: Face: Permite definir as fontes que podem ser aplicadas
<html>
  <head> ao elemento. Pode ser aplicada mais de uma fonte, desde que o
  </head> respectivo nome seja separado por vírgula;
  <body>
<h1>Residuo eletronico</h1> Size: Permite definir o tamanho da fonte. Nessa proprie-
<p>
Residuo computacional tambem conhecido
dade é aceito um valor de um a sete, sendo que o valor padrão
como Residuo eletronico ou lixo eletronico....
é três;
</p>
<p> Color : Permite aplicar uma cor ao texto. Pode ser aplica-
da uma cor sólida ou uma em formato hexadecimal, conforme
Origem: Wikipedia, a enciclopedia livre. tabela 1 deste documento.
</p>
  </body>
</html>

Para incluir uma imagem dentro do documento html,

deve ser empregada a tag <img>. Esta tag opera em conjunto
com algumas propriedades, as quais permitem configurar esta
imagem dentro do documento. A imagem adicionada com a
tag <img> pode ser incluída em qualquer local do documento
html como, por exemplo:
 PROGRAMAÇÃO WEB

<html> São as propriedades da tag img que permitem a inclusão

  <head> e gestão da imagem no local adicionado. A seguir, temos as
  </head>
  <body>
funções de cada uma das propriedades:
<h1>Residuo eletronico</h1>
<p>  Src: Esta propriedade é a responsável por permitir adi-
Residuo computacional tambem conhecido cionar a imagem a tag. Podendo ser adicionadas imagens per-
como Residuo eletronico ou lixo tencentes ao próprio site ou, então, ser adicionadas imagens
eletronico.... referenciadas de outros websites. Visto que, quando se adiciona
</p>
uma imagem do site, deve-se apenas mencionar o seu diretório,
assim como o nome, a partir da página atual, enquanto que para
<p> uma imagem referenciada de outro site, deve-se informar a url
<font size=”1” color=”red” face=”verdana”> completa da imagem. Exemplo.
Origem: Wikipedia, a enciclopedia livre.
  </font>  Alt : Esta propriedade permite adicionar um texto al-
  </p>
  </body>
ternativo à imagem para as situações em que a imagem não
</html> puder ser exibida. Esta propriedade é muito importante para a
acessibilidade.
 Width: Permite definir em pixels a largura relativa ao
tamanho da exibição da imagem no documento. Aqui, devemos
observar que esta propriedade não altera o tamanho físico da
imagem, apenas o tamanho para a exibição. Se a imagem possuir
uma alta resolução e for exibida com um tamanho pequeno, ela
levará o mesmo tempo de carregamento, independentemente
do tamanho visualizado.
 Height : Permite definir em pixels a altura relativa ao
tamanho da exibição da imagem no documento. Nesse aspecto,
 PROGRAMAÇÃO WEB

devemos observar que esta propriedade <html>

não altera o tamanho físico da imagem,   <head>
  </head>
apenas o tamanho para a exibição. Já, se   <body>
a imagem possuir uma alta resolução e for <h1>Residuo eletronico</h1>
exibida com um tamanho pequeno, ela <p>
levará o mesmo tempo de carregamento, Residuo computacional tambem conhecido como Residuo
independentemente do tamanho visuali- eletronico ou lixo eletronico....
zado. </p>
<img src=”monitor.jpg” alt=”Monitor jogado na rua” width=”200” height=”200”>

<p>
<font size=”1” color=”red” face=”verdana”>
Origem: Wikipedia, a enciclopedia livre.
  </font>
 Para adicionarmos uma separação   </p>
de textos ou áreas em um documento, po-   </body>
</html>
demos empregar a tag <hr>. Este elemento
html, normalmente, não é utilizado, mas
para o início dos nossos estudos poderá
ser útil.
 PROGRAMAÇÃO WEB

Caption: Esta tag permite definir um título para a tabela;   </tr>

  <tr>
  <td>3</td>
 Tr : Define a linha de uma tag;
<td>Carlos Silveira</td>
  <td>27/08/1966</td>
 Th : Define uma célula para o título de uma coluna;   </tr>
  </table>
 Td: Define uma célula de uma coluna;   </body>
</html>
<html>
  <head>
<title>Pagina de programacao web</title>
<meta http-equiv=”content type”
content=”text/html” charset=”utf-8” />
  </head>
  <body>
  <table>
<caption>Lista de alunos</caption>
  <tr>
  <th>Código</th>
  <th>Nome</th>
<th>Data de Nascimento</th>
Além das tags apresentadas, existem diversas propriedades
  </tr> que podem ser empregadas na construção de tabelas. Segue uma
  <tr> lista das propriedades mais utilizadas:
  <td>1</td>
<td>José Silva</td> Border : Permite definir se uma tabela deve possuir borda.
  <td>12/11/1979</td> Esta propriedade pode possuir valor “0” ou “1” para desativar
  </tr>
  <tr>
ou ativar as bordas, respectivamente. Esta propriedade pode ser
  <td>2</td> aplicada à tag table.
<td>Antonio Oliveira</td>
  <td>01/01/1990</td>
 PROGRAMAÇÃO WEB

<table border=”1”>   </tr>

  <tr>   <tr>
  <th>Código</th>   <td>2</td>
  <th>Nome</th> <td>Antonio Oliveira</td>
<th>Data de Nascimento</th>   <td>01/01/1990</td>
  </tr>   </tr>
  <tr>   </table>
  <td>1</td>
<td>José Silva</td> Cellspacing : Define o espaçamento em pixels entre as
  <td>12/11/1979</td>
  </tr>
células de uma tabela. Essa propriedade pode ser aplicada às
  <tr> tag th ou td.
  <td>2</td>
<td>Antonio Oliveira</td> <table border=”1” >
  <td>01/01/1990</td>   <tr>
  </tr>   <th>Código</th>
  </table   <th>Nome</th>
<th>Data de Nascimento</th>
  </tr>
Cellpadding : Define o espaçamento em pixels entre o
  <tr>
conteúdo de uma célula e as suas bordas. Esta propriedade pode   <td>1</td>
ser aplicada à tag table. <td>José Silva</td>
  <td>12/11/1979</td>
<table border=”1” >   </tr>
  <tr>   <tr>
  <th>Código</th>   <td>2</td>
  <th>Nome</th> <td>Antonio Oliveira</td>
<th>Data de Nascimento</th>   <td>01/01/1990</td>
  </tr>   </tr>
  <tr>   </table>
  <td>1</td>
<td>José Silva</td>
  <td>12/11/1979</td>
 PROGRAMAÇÃO WEB

 Width: Define a largura da tabela em percentual. Se in- Bgcolor: Esta propriedade define a cor de fundo de uma
formado 100%, a tabela irá ocupar toda a largura do documento tabela, linha ou célula, podendo ser aplicada às tags table, tr,
no navegador. Esta propriedade pode ser aplicada na tag table th e td.
e na tag td ou th.
<table border=”1” width=”50%”>
<table border=”1” >   <tr>
  <tr> <th width=”20%”>Código</th>
<th width=”20%”>Código</th> <th width=”60%”>Nome</th>
<th width=”60%”>Nome</th> <th width=”30%”>Data de Nascimento</th>
<th width=”30%”>Data de Nascimento</th>   </tr>
  </tr>   <tr >
  <tr>   <td>1</td>
  <td>1</td> <td>José Silva</td>
<td>José Silva</td>   <td>12/11/1979</td>
  <td>12/11/1979</td>   </tr>
  </tr>   <tr>
  <tr>   <td >2</td>
  <td>2</td> <td>Antonio Oliveira</td>
<td>Antonio Oliveira</td>   <td>01/01/1990</td>
  <td>01/01/1990</td>   </tr>
  </tr>   </table>
  </table>
 PROGRAMAÇÃO WEB

Rowspan: Esta propriedade permite mesclar células entre Nota : As tabelas permitem, além de exibir dados em for-
linhas da tabela. O valor atribuído a ela refere-se à quantidade de mato tabular, organizar e estruturar o conteúdo de elementos
células que serão mescladas, devendo esta ser aplicada à tag td. de uma página. Dentro de uma determinada célula de tabela
podem ser adicionados quaisquer outros elementos, inclusive,
 Colspan: Essa propriedade permite mesclar células en- outras tabelas. Atualmente, essa aplicação para as tabelas tem
tre colunas da tabela. O valor atribuído refere-se à quantidade sido menos utilizada, dando lugar ao conceito de sites tableless.
de células que serão mescladas, devendo esta propriedade ser
aplicada à tag td.
<table border=”1”>
  <tr>  Em diversas situações existe a necessidade de enviar in-
  <td >1</td> formações da página web para o servidor, onde a mesma está
  <td>4</td>
  </tr>
hospedada. Esta atividade está presente em situações bastante
  <tr> comuns, como, por exemplo, no cadastramento de um cliente
  <td>5</td> em um e-commerce ou ainda, na própria compra de um item
  <td >6</td> pela internet, que exige que a página envie para o servidor as
  <td>7</td> informações relativas à compra que está sendo efetuada.
  <td>8</td>
  </tr>
  <tr>
Para ser possível utilizar este recurso, devemos utilizar
  <td>9</td> a tag form, e dentro desta tag devem ser adicionadas todas as
  <td>11</td> demais tags que recebem informações do usuário. Assim, essa
  <td>12</td> tag necessita de três propriedades a serem descritas:
  </tr>
  <tr> Name: Define o nome do formulário;
  <td>13</td>
  <td>15</td>
  <td>16</td> Method : Define a forma de envio do formulário para o
  </tr> servidor. Podem ser empregados dois valores: GET e POST.
  </table> Quando empregado GET, as informações são enviadas para
Questões para recapitularmos!
1. Qual a importância da usabilidade na cons-
trução de uma página web?

2. O que influencia o desenvolvimento do layout

de uma página web?
3. Explique o motivo da acessibilidade ser um
fator importante no design de um website.
4. Qual é o relacionamento do emprego correto
das tags html quando obedecem as regras de
semântica das tags em relação a acessibilidade
das páginas web?
 PROGRAMAÇÃO WEB

Depois de entendermos como funciona a

linguagem HTML e aprendermos sobre os
conceitos de Web Design, chegou a hora de
colocarmos tudo isso em prática através do
CSS. Neste capítulo, você aprenderá a criar
uma página web bonita e cheia de detalhes.
 PROGRAMAÇÃO WEB

e de maior dificuldade na hora da manu-

color: red; tenção. Exemplo:
font-size: 10px;
Com a evolução da internet, as pá- <p ”>
ginas web tinham a necessidade de atrair Este é um parágrafo vermelho</p>
mais atenção do usuário, de modo que ele
obtivesse uma experiência mais satisfatória
na absorção do conteúdo apresentado, seja Estilo Incorporado
ele qual for. Uma das peças responsáveis  Como vimos, os estilos sempre de-
por trazer essa melhor visualização de  vem estar associados a algum elemento Nesta forma de incluir CSS no
páginas HTML foi a linguagem CSS - do HTML. A forma como nós fizemos HTML todos os estilos são inseridos em
Cascading Style Sheets ou folhas de estilo esta associação depende do resultado que um único local da página. Estes CSSs
em camadas. queremos obter ao final do desenvolvi- devem ser incluídos sempre no cabeçalho
mento. Nós podemos aplicar o CSS de (head)1 da página HTML, dentro de uma
Por meio do CSS é possível mani- três formas, conforme veremos a seguir.  TAG style. Exemplo:
pular tanto visual (a maneira como são
impressos os elementos no navegador), Estilos locais (in-line) <head>
quanto estruturalmente (como o elemento <style type=”text/css”>
se comporta em relação ao demais ele- p {
Neste modelo, o estilo é aplica- color: red;
mentos da página) às propriedades dos margin-left: 20px;
elementos HTML. A seguir vemos um do diretamente à TAG HTML e deve }
exemplo de como é a estrutura CSS e outro ser utilizado dentro do atributo HTML   </style>
exemplo prático do seu uso. “style”, junto com a TAG desejada. Esta </head>
utilização deve ser evitada de modo geral,
propriedade: valor; ou ter uma utilização muito pontual, pois 1 O motivo de priorizarmos o uso do css in-page DENTRO do ca-
beçalho (head) da página é o fato de que, assim como lemos este texto,
por ser inserida diretamente na tag, não uma página HTML é lida pelo navegador de maneira descendente (de
seletor { cima para baixo), de modo que ao incluirmos o CSS no topo evitamos o
propriedade: valor;
permite nenhuma reutilização, levando, chamado FOUC (flash of unstyled content - lampejo de conteúdo não
} por exemplo, a um arquivo mais extenso estilizado). Dessa forma, evitando que o browser imprima a página na
tela, primeiramente sem estilo, para somente depois aplicar as correções e
propriedades referentes a cada elemento.
 PROGRAMAÇÃO WEB

Estilo Linkado ou Externo <html>

  <head>
<link rel=”stylesheet” href=”arquivo.css”
type=”text/css”/>
Nesta forma de inclusão do CSS, todo o estilo é escrito em   <style>
um ou mais arquivos (.css) externos à página HTML, sendo os div {
mesmos referenciados através da TAG <link/> no cabeçalho da background-color: #000000;
página. Esta maneira de aplicar estilos a uma página apresenta }
 vantagens sobre as demais por permitir que uma mesma folha   </style>
  </head>
de estilo seja aplicada a diversas páginas HTML, e permitindo   <body>
também que estes estilos fiquem salvos no cache 2 do navegador, <div style=”background-color: #ffff00”></div>
por exemplo.   </body>
</html>
<head>
<link rel=”stylesheet” href=”arquivo.css” type=
”text/css”/>
No “arquivo.css” temos:
</head>
div {
background-color: blue;
Precedência de Estilos }

As três formas de aplicação de estilos que vimos ante- Para que o browser decida qual regra irá aplicar, ele segue
riormente (in-line, in-page, externo) podem ser inclusas na algumas regras gerais de precedência. A seguir é apresentada
mesma página, referindo-se ao mesmo elemento. Quando isso sua ordem de relevância onde, por exemplo, um estilo in-line
ocorre, qual das formas de aplicação irá, efetivamente, estilizar tem mais “força” que um estilo externo.
o elemento? Exemplo:
Estilo In-line;
2 O cache pode ser compreendido como uma área de armazenamento onde dados ou processos, frequentemente,
utilizados são guardados para um acesso futuro mais rápido, logo, perceba que um site que você normalmente
acessa carrega mais rapidamente que um site nunca acessado. Isso se deve ao fa to do cache do navegador salvar a
estrutura básica das páginas que você e stá habituado a visitar, poupando o tempo de download delas em exibições
Estilo In-page;
futuras. Ele salva os planos de fundo das páginas, principais links, arquivos utilizados pela página (.css, .js) e
diversos outros dados dela, o que torna a navegação mais rápida.
 PROGRAMAÇÃO WEB

Folha de Estilo Externa (linkada); <p> Este é um texto em <span style=”font-style:italic”> italico </span></p>

Estilo padrão do navegador. 3 Outra tag HTML muito importante e que ainda não mencionamos, é a tag
DIV. Essa tag tem por objetivo nos permitir a divisão do conteúdo da página em
áreas, independentes entre si. Estas áreas servem para separar, semanticamente, o
conteúdo de acordo com o seu objetivo de negócio.

Como vimos, nós podemos incluir

o css apenas a tags HTML. É impossível
podermos aplicar o CSS a algum elemento
que não seja um elemento HTML, porém,
em diversas situações teremos a necessida-
de de aplicar um estilo apenas para uma
parte de um parágrafo, por exemplo, e <div>
neste caso, a tag <p>, que representa um <h3> Ultima noticia </h3>
parágrafo, contém todo o conteúdo do <p>conteúdo de um paragrafo </p>
mesmo. Para resolver este tipo de situação, </div>
existe uma tag HTML chamada “Span”,
que tem por objetivo permitir o incluso de
CSS para partes do código que não são
gerenciadas por um elemento HTML.
3 Mesmo respeitando a precedência de código todo browser tem por
Quando fazemos uso de um estilo in-page ou externo na nossa página, ne-
padrão sua própria definição de propriedades iniciais para cada elemento, cessitamos de uma forma para conciliarmos nossas regras de CSS com os elementos
o que varia de browser para browser. As propriedades iniciais do browser
são sobrepostas naturalmente por qualquer uma das 3 precedências apre- presentes na página. Isso se faz através do uso de seletores CSSs, sendo os principais:
sentadas, porém vale ressaltar que “propriedade não setada” difere de um
atributo igual a “zero” ou “none”, pois não setado remete as propriedades
iniciais do browser. Uma maneira encontrada por desenvolvedores para
contornar este problema é utilizar um arquivo css para “resetar” todas as
propriedades e torná-las iguais em todo s os browsers, zerando as proprie-
dades iniciais do navegador.
 PROGRAMAÇÃO WEB

Outras pseudo-classes de links: um link quando o mouse está sendo usados com cautela. Se valores negativos
clicado ou se pressionarmos a tecla não forem suportados pela aplicação de
Com o seletor a:link, estilizamos “Enter”, ativando o link. usuário, eles serão convertidos para o va-
apenas os links não-visitados, ou lor mais próximo suportado (e isso pode
seja, links no seu estado normal. tornar-se desastroso para um layout).
Com o seletor
seletor a:visite
a:v isited,
d, estilizamos
estiliz amos UNIDADE DE MEDIDA
ME DIDA RELATIVA
apenas links visitados,
visitados, ou seja, que As unidades de medida de compri-
 já foram cl icados. mento CSS referem-se às medidas na ho-
rizontal ou na vertical (e em sentido mais  A unidade de medida relativa é
Com o seletor a:hover, estilizamos amplo, em qualquer direção). aquela tomada em relação a uma outra
links quando o mouse está em cima medida. Folhas
Folhas de Estilo
E stilo em Cascata que
do mesmo. Com essa pseudo-classe O formato para declarar o va lor de usam unidades de comprimento relati-
podemos fazer diversos efeitos in- uma unidade de medida CSS é um número  vas são mais apropriadas para ajustes de
teressantes. Também, podendo ser com ou sem ponto decimal, podendo ser uso em diferentes tipos de mídia. (Por
aplicada a qualquer elemento, não precedido por um sinal ‘-’ (menos), sen- exemplo, de uma tela de monitor para uma
apenas em links, o que a torna ainda do o sinal ‘+’ (mais) o valor “default” e, impressora laser)
la ser)..
mais útil. imediatamente, seguido por uma unidade
identificadora. A unidade identificadora O valor é tomado em relação a:
Com o seletor a:focus, estilizamos é opcional quando se declara um valor ‘0’
links quando os selecionamos com (zero) e para algumas propriedades em em: ao tamanho da fonte (‘font-si-
o teclado, através da tecla Tab. Essa específico.
tecl a Tab. ze’) herdado;
pseudo-classe é útil para estilizar
links para pessoas que possuem ha- Algumas das propriedades CSS ex : a altura da letra x (xis) da fonte
bilidade limitada e não conseguem permitem que sejam declarados valores herdado;
utilizar o mouse, por exemplo. negativos para unidades de medida. A
adoção de valores negativos pode dificultar
dif icultar px : ao dispositivo de exibição medi-
Com o seletor a:active, estilizamos a formatação dos elementos e devem ser da, mais comumente usada);

%: a uma medida previamente
previamente de-
finida
fin ida (normalmente relacionada ao resolução do dispositivo de exibição.
elemento pai).
UNIDADE DE MEDIDA – PIXEL
A unidade de medida de compri-
mento pixel é relativa à resolução do dis-
positivo de exibição
ex ibição (a tela de um monitor,
por exemplo). A mais simples definição
de pixel seria:
Pixel é o menor elemento em um
dispositivo de exibição, ao qual é possível
atribuir-se uma cor.
Considere um dispositivo de exi-
bição construído com uma densidade de
90 dpi (dpi = dots per inch = pontos por
polegada). Por definição, a referência pa-
drão para pixel é igual a um ponto no
dispositivo citado. Daí, pode-se concluir
que 1 pixel naquele dispositivo de exibição
ex ibição
é igual a 1/90 inch = 0,28 mm.
Para uma densidade de 300 dpi 1
pixel é igual a 1/300 inch = 0,085mm.
PROGRAMAÇÃO WEB
Assim, pixel é uma medida ligada a
 Até o momento, entendemos como
UNIDADE DE MEDIDA ABSOLUTA podemos estruturar e organizar o CSS
dentro da nossa página. A partir de agora,
É aquela que não está referenciada a precisamos conhecer as propriedades do
qualquer outra unidade e nem é herdada. CSS que nos permitem aplicar formatações
São unidades de medida de comprimento, aos textos da nossa página.
definidas nos sistemas de medidas pela
“centímetros, Propriedade Color:
física e são conhecidos como “centímetros,
polegadas etc. São indicadas parapa ra serem
usadas quando as mídias de e xibição são
perfeitamente conhecidas. A propriedade color é utilizada para
par a
definir uma cor para um tex to. Em CSS,
pt : ponto
uma cor de fonte pode ser definida de três
t rês
maneiras:
pc: pica
Com um valor em hexadecimal,
como #ffff00 (vermelho);
mm: milímetro
Com um valor em RGB, como rgb
cm: centímetro
(255,255,0) (vermelho);
in: polegada
Com um nome, como red;
 PROGRAMAÇÃO WEB

<html> center : centraliza o texto.

text-align: center 
  <head>
  <style>
text-align: left : alinha o texto à esquerda.
  .texto-1{
  color:red;
} text-align: right : alinha o texto à direita.
  .texto-2{
  color:#0000ff; text-align: justify : ajusta o texto ao espaço determinado,
} ajustando os espaços entre fontes e entre palavras.
  .texto-3{
  color:rgb(0,255,0);
<html>
}
<head>
  </style>
  <style>
  </head>
  .esquerda{
  <body>
  text-align:left;
<p class=”texto-1”>cor
class=”texto-1”>cor vermelha</p>
}
<p class=”texto-2”>hexadecimal da cor azul</
azul</p>
p>
  .central{
<p class=”texto-3”>RGB
class=”texto-3”>RGB da cor vermelha</p>
  text-align:center;
  </body>
}
</html>
  .direita{
  text-align:right;
}
Propriedade Text-align:
Text-align:   .justificado{
  text-align:justify;
}
A propriedade text-align faz exatamente o que o nome   </style>
</head>
sugere: alinha o texto da mesma forma que ocorre com os edi- <body>
tores de texto. Assim como na maioria dos editores de texto, <p class=”esquerda”>alnhame
class=”esquerda”>alnhamento
nto a esquerda</p>
existem quatro tipos de alinhamento para textos em HTML , <p class=”central”>centralizado</p
class=”central”>centralizado</p>>
com CSS: <p class=”direita”>alinhamen
class=”direita”>alinhamentoto a direita</p
direita</p>
>
<p class=”justi
class=”justificado”>este
ficado”>este paragrafo esta usando
 PROGRAMAÇÃO WEB

um alinhamento justificado. Isso fara com que o texto   text-transform:capitalize;

se adapte ao container onde estiver inserido }
(note como o espacamento entre as letras e   </style>
palavras varia)</p> </head>
</body> <body>
</html> <p class=”texto-1”>caracteres em minusculo</p>
<p class=”texto-2”>caracteres em maiusculo</p>
<p class=”texto-3”>a primeira letra de cada
Propriedade Text-transform: palavra ser maiuscula</p>
</body>
</html>
A propriedade text-transform pode ser muito útil, princi-
palmente na elaboração de menus. Existem três tipos de trans-
formação de textos que podem ser realizadas através dessa Propriedade Letter-spacing:
propriedade CSS:
uppercase: transforma o texto em questão para maiúsculas. Esta propriedade nos permite definir o espaçamento entre
as letras de um texto na página.
lowercase : transforma o texto para minúsculas.
capitalize: transforma cada primeira letra das palavras do <html>
<head>
texto em maiúscula.   <style>
  .texto-1{
<html>   letter-spacing:-2px;
<head> }
  <style>   </style>
  .texto-1{ </head>
  text-transform:uppercade; <body>
} <p class=”texto-1”>texto com espacamento
  .texto-2{ reduzido</p>
  text-transform:lowercase; </body>
} </html>
  .texto-3{
 PROGRAMAÇÃO WEB

Propriedade Word-spacing: h-shadow : sombra horizontal (valores positivos aplicam

a sombra à direita do texto, valores negativos aplicam a
esquerda do texto);
Como o nome sugere, essa propriedade define o espaça-
mento entre as palavras de um texto.  v-shadow : sombra vertical (valores positivos aplicam a
sombra abaixo do texto, valores negativos aplicam acima
<html> do texto);
<head>
  <style>
  .texto-1{
blur : desfoque (quanto maior o valor, maior o desfoque);
  word-spacing:30px;
} color : cor da sombra;
  </style>
</head> text-shado w: 2px 3px 5px rgb(0,0,0);
<body>
<p class=”texto-1”>espacamento entre palavras
ampliado</p>
</body>
Propriedade Text-decoration:
</html>

Esta propriedade especifica uma decoração para o texto,

normalmente usada para sublinhar. Possui os seguintes valores:
Propriedade Text-shadow:
none: nenhum (valor padrão de texto);
Esta propriedade permite especificarmos uma sombra underline : sublinhado4 ;
para o texto. Ela é composta por dois valores obrigatórios e
dois valores opcionais. O valor padrão desta propriedade é none overline : sobrelinhado;
(neste caso, sem sombra): line-through: riscado.

Sintaxe: 4 Todo texto dentro de uma TAG ‘a’ (link) tem como padrão o valor sublinhado, para retirar este padrão é só
atribuir o valor none a esta propriedade.
 PROGRAMAÇÃO WEB

<html> p{
<head> font-family: “Times New Roman”, Times, serif;
  <style> }
  .texto-1{
  text-decotarion:none; No exemplo, utilizamos a família “Times New Roman5”
}
  .texto-2{
a fim de aplicar esta fonte à página. Nesse caso, o navegador
  text-decotarion:underline; procura nos diretórios locais pela fonte, se esta fonte não existir
} no computador do usuário, será substituída pela fonte padrão do
  .texto-3{ navegador: por este motivo esta propriedade deve ser descrita,
  text-decotarion:overline; sempre iniciando pela fonte desejada, seguida de uma ou mais
} fontes genéricas similares com a desejada. Garantindo, assim,
  .texto-4{
  text-decotarion:line-through;
que o navegador sempre chegue a um resultado, no mínimo,
} próximo ao desejado.
  </style>
 
<body>
</head> Propriedade Font-size:
<p class=”texto-1”>texto normal</p>
<p class=”texto-2”>texto sublinhado</p>
<p class=”texto-3”>texto sobrelinhado</p>
Especifica o tamanho da fonte. Pode ser atribuído uma
<p class=”texto-4”>texto riscado</p> medida tanto relativa, quanto absoluta. Quando este valor não
</body> é setado pelo desenvolvedor acaba sendo orientado pelas pro-
</html> priedades padrões do navegador.
<html>
Propriedade Font-Family: <head>
  <style>
  .texto-1{
Com esta propriedade nós podemos especificar uma fa- /*Tamanho defindo pelo navegador*/
mília de fontes a ser atribuída ao documento ou determinado }
bloco de texto. Exemplo:
5 Se o nome de uma família de fonte possuir mais de uma palavra, deve ser descrito entre aspas.
 PROGRAMAÇÃO WEB

<html> deve ser atribuída a elementos com position relative ou static.

<head> Quando dois ou mais elementos estiverem f lutuando, eles irão
  <style>
div {width:50px; height:50px;margin:0px;}
se acomodar lado a lado, enquanto houver espaço, prosseguindo
  .box-1{
logo abaixo. Desse modo, possui três valores:
  background-color:red; left 
}
  .box-2{ right 
  background-color:blue;
  position:absolute; none  (padrão)
  top:20px;
  lef:20px; <html>
}   <head>
  .box-3{   <style>
  background-color:green; div {width:50px;
} height:50px;margin:0px;float:left;}
  </style>   .box-1{
</head>   background-color:red;
<body> }
<div class=”box-1”></div>   .box-2{
<div class=”box-2”></div>   background-color:blue;
<div class=”box-3”></div> }
</body>   .box-3{
</html>   background-color:green;
}
  .box-4{
FLOAT   background-color:cyan;
}
  .box-5{
Float é uma propriedade que retira o elemento do flu-   background-color:yellow;
 xo da página e força-o a se posicionar à esquerda ou à direita }
da página, dependendo do valor setado. A propriedade float   .box-6{
  background-color:black;width:80px;
 PROGRAMAÇÃO WEB

  height:80px; <html>
  float:nome; <head>
}   <style>
  </style> div {width:50px;
  </head> height:50px;margin:0px;float:left;}
  <body>   .box-1{
<div class=”box-1”></div>   background-color:red;
<div class=”box-2”></div> }
<div class=”box-3”></div>   .box-2{
<div class=”box-4”></div>   background-color:blue;
<div class=”box-5”></div> }
<div class=”box-6”></div>   .box-3{
  </body>   background-color:green;
</html> }
  .box-4{
A propriedade CLEAR é usada para controlar o com-   background-color:cyan;
  float:nome;
portamento dos elementos que seguem aos elementos float no   clear:left;
documento. /*O estilo clear permite limpar a flutuação de um
element que vier antes o depois de determinado
Por padrão, o elemento subsequente a um float, ocupa o element, proporcionando uma especie de quebra de
espaço livre ao lado do elemento flutuado. pagina*/
}
  .box-5{
A propriedade clear pode assumir os valores left, right,   background-color:yellow;
both (ambos) ou none. A regra geral é: se clear for, por exem- }
plo, definido both para um box, a margem superior deste box   .box-6{
será posicionada sempre abaixo da margem inferior dos boxes   background-color:black;width:80px;heigh
flutuados que estejam antes dele no código (ocasionando uma t:80px;
espécie de quebra de linha). }
  </style>
</head>
<body>
 PROGRAMAÇÃO WEB

<div class=”box-1”></div> border: ajusta a largura, a cor e estilo da borda de todos

<div class=”box-2”></div> os lados de um elemento. Sintaxe:
<div class=”box-3”></div>
<div class=”box-4”></div>
<div class=”box-5”></div>  propriedade: largura estilo cor;
<div class=”box-6”></div>
</body> Exemplo:
</html>
border: 2px solid rgb(0,0,0);
Propriedades para Formatação de Elementos de Bloco
As definições de valores podem ser atribuídas separada-
mente para cada lado no elemento através da adição de sufixos
Assim como elementos inline, elementos de bloco podem à propriedade:
receber propriedades que irão influenciar sua apresentação e
comportamento: border-top
 width : especifica a largura de um elemento.
border-right 
max-width: especifica a largura máxima de um elemento.
border-bottom
min-width: especifica a largura mínima de um elemento.
height : especifica a altura de um elemento . border-left 
max-height : especifica a altura máxima de um elemento.
Os estilos de borda mais comuns são:
min-height : especifica a altura mínima de um elemento.
solid (borda lisa)
A largura e a altura de um elemento podem conter, ao
invés de uma medida absoluta ou uma medida relativa, o valor dashed (tracejada)
auto. Esse valor sugere que o elemento irá tomar um tamanho
necessário para acomodar seu conteúdo. dotted (pontilhada)
 Síntese
Nesse capítulo aprendemos que:
• O emprego do CSS, de forma adequada, fazf az com que o HTML
seja aplicado conforme o seu objetivo: Estrutur
Est ruturar
ar o Web Site;
Site;
• O objetivo do CSS é aplicar a formatação ao website, en-
quanto que o html tem por objetivo
objetivo estruturar
estr uturar o seu conteúdo
semanticamente;
• O HTML é limitado quanto aos recursos
recursos de
de formatação;
formatação;
• O CSS provê recursos de formatação que podem ser aplicados
nas mais diversas áreas do site;
•  A combinação
c ombinação de recu
r ecursos
rsos do CSS
C SS perm
permite
ite cri
criar
ar website
websitess
com alta qualidade visual;
• Os recursos disponibilizados pelo CSS podem ser combinados
entre os elementos da página, fornecendo recursos visuais
bastante interessantes;
• Esses recursos, quando utilizados corretamente, permitem
criar websites que funcionam
f uncionam em dispositivos com diversas
resoluções, fornecendo o conceito de responsividade.
Questões para recapitularmo
re capitularmos!
s!
1. Explique a importância do CSS na elaboração
de uma página web.

2. Cite três formas

formas de inclusão do CSS em uma
página web e apresente qual a prioridade e pre-
cedência desta inclusão do CSS destas formas.

3. O que são seletores para o CSS. Explique a

diferença entre os seletores por classe e os se-
letores por Id.
4. Qual a diferença entre unidades de medida
fifixas
xas e relativas, citando dois exemplos de cada
uma das unidades.
5. Implemente um Div com conteúdo
conteúdo conforme
a seguinte imagem:
6. Crie os seletores usando CSS (desconside-
rar bordas e cores) e na sequência faça uso de
HTML para incorporá-los
incorporá-los na página, confor-
me a representação a seguir:

7. Crie os seletores usando CSS (desconside-

rar bordas e cores) e na sequência faça uso de
HTML para incorporá-los
incorporá-los na página, confor-
me a representação a seguir:
 PROGRAMAÇÃO WEB

Quando você navega na internet, já deve ter se

indagado sobre como são programadas aquelas
páginas que interagem conosco, como se a página
fosse saber o que queremos fazer. A partir
de agora, vamos aprender a tornar as nossas
páginas interativas com o uso da tecnologia
JavaScript.
O JavaScript é uma linguagem de programação imple-
mentada para ser executada dentro do navegador web, para
que os programas (scripts) escritos nesta linguagem fossem
executados no próprio navegador, sem haver necessidade deste
programa passar pelo servidor. Por conta disso, o JavaScript
é uma linguagem conhecida como linguagem “client-side”.

Essa linguagem é baseada no padrão ECMAScript,

padronizada pela Ecms International, seguindo as especifi-
cações ECMS-262 e ISSO/IEC 16262.
Dentre as características e vantagens do JavaScript,
podemos citar as seguintes:
 PROGRAMAÇÃO WEB

O JavaScript é uma linguagem in- Permite que o conteúdo das páginas

terpretada 7  pelo navegador; seja criado conforme a interação do
usuário com a página;
O JavaScript não é Java;
Apesenta recursos para acessar ou-
Apresenta similaridades com a lin- tros, dinamicamente, no servidor
guagem Java e C++ na sua sintaxe; (ajax);
Apesar de ser padronizado, cada Possui recursos para trabalhar com
navegador pode apresentar carac- expressões regulares, validações de
terísticas implementadas de forma campos, recursos de data e hora,
diferente; e manipulação de tempos, ainda,
muitos outros que serão tratados
O JavaScript permite aumentar a neste capítulo.
iteração entre o usuário e as páginas
 web;
O script pode ser incluído na própria A linguagem JavaScript foi inicial-
página html ou em arquivo próprio; mente criada pela Netscape, sendo origi-
nalmente chamada de Mocha e, poste-
O conteúdo do script não é exibido riormente, chamada de LiveScript, sendo
para o usuário, mas pode ser facil- lançada no ano de 1995. Mais adiante, o
mente recuperado pelo usuário, pois seu nome foi rebatizado para JavaScript.
o seu código não é escondido pelo Isso se deve ao fato de que em 1995 a lin-
navegador; guagem de programação Java foi lançada
e, para aproveitar o sucesso desta lingua-
7 Linguagem Interpretada: É a linguagem de programação onde o código gem, o LiveScript passou a ser chamado
fonte é executado por um interpretador, não sendo executado diretamente
pelo sistema operacional. de JavaScript.

Rapidamente, o JavaScript obteve
uma grande aceitação como uma lingua-
gem “client-side”, por conta disso, a Mi-
crosoft lançou a sua própria linguagem
de scripts, sendo esta compatível com o
 JavaScript. O nome desta linguagem foi
 JScript, a qual muitas vezes é confundida
com o próprio JavaScript, entranto, ape-
sar de ser compatível com o JavaScript,
esta linguagem apresenta características
próprias, fazendo com que determinados
recursos desta não sejam compatíveis com
o JavaScript.
O primeiro navegador que teve su-
porte ao JavaScript foi o navegador Netsca-
pe 2.0, da própria Netscape, enquanto que
o JScript teve a sua primeira aparição no
navegador Internet Explorer 3.0 em 1996.
Em novembro de 1996, a Netscape
submeteu o JavaScript ao Ecma Inter-
nacional8 para tornar a linguagem um
padrão industrial, que resultou no padrão
 JavaScript conhecido como ECMAScript.
 
8 Ecma Internacional: Associação fundada em 1961 dedicada a padro- objetivos específicos, como novos objetos de interface ou facilidades para
nização de sistemas de informação. Abreviação de European Computer a programação. Exemplos de framework são o Jquery, ExtJs, AngularJs e
Manufacturees Association.  
PROGRAMAÇÃO WEB
Dessa maneira, a linguagem JavaS-
cript se tornou um padrão no desenvolvi-
mento para web. Entretanto, inicialmente
foi bastante denegrida pelos profissionais,
pois o público alvo da linguagem era um Um script criado em JavaScript pode
público leigo. Foi somente a partir do uso ser inserido em uma página HTML de
de recursos AJAX 9 que o JavaScript se três formas: no corpo da página HTML,
consolidou e recebeu mais atenção dos no cabeçalho da página HTM ou, então,
profissionais. A partir disso, observou-se em um arquivo próprio, sendo apenas re-
uma grande proliferação de Frameworks ferenciado na página.
e Bibliotecas JavaScript10 , além do surgi-
mento de novas práticas de programação, Para permitir uma boa separação
melhorando, assim, o uso do JavaScript. e identificação dos códigos do sistema,
manter os scripts em um arquivo separado
Atualmente, qualquer website de- é sempre o padrão recomendado e que
senvolvido profissionalmente apresenta deve ser seguido, mas para fins didáticos,
recursos que envolvem o uso de JavaScript. serão apresentadas as três formas de uso
neste material.
 Tanto na inclusão do Script no corpo
da página como no cabeçalho é neces-
9 Ajax: Abreviatura de Asynchronous JavaScript and XML. Este termo sário inserir o script dentro da tag html
refere-se ao uso das tecnologias JavaScript, CSS, XML e Html para permitir
a criação de solicitações assíncronas ao servidor, evitando a necessidade de “<script>”. Tudo o que estiver contido
submeter o conteúdo de toda uma página e, consequentemente, carregar
toda a página html no retorno. O emprego deste recurso permite a criação dentro do bloco de código desta tag, será
de páginas mais interativas com o usuário.
10 Frameworks e Bibliotecas JavaScript: são conjuntos de funcionalidades
interpretado pelo navegador como sendo
implementadas em JavaScript que podem ser incorporadas a uma aplicação um script JavaScript.
web, através do vínculo do arquivo JavaScript da biblioteca/framework em
questão, com a página html. Estas bibliotecas normalmente apresentam
vários outros.
 PROGRAMAÇÃO WEB

if (valor1 < valor2) diaDaSemana = Number(diaDaSemana);

{
document.write(valor1 + “ < “ + valor2); switch (diaDaSemana) {
} case 0:
  else diaPorExtensao = “Domingo”;
{   break;
document.write(valor1 + “ > “ + valor2); case 1:
} diaPorExtensao = “Segunda
--> Feira”;
  </SCRIPT>   break;
</BODY> case 2:
</HTML> diaPorExtensao = “Terça Feira”;
  break;
Outro comando condicional presente no JavaScript é o case 3:
“switch”. Com este comando, podemos selecionar uma operação diaPorExtensao = “Quarta Feira”;
a partir de diversas possibilidades. Adiante, apresentamos um   break;
exemplo do uso do comando switch para identificar qual é o case 4:
dia da semana, de acordo com o seu número. diaPorExtensao = “Quinta Feira”;
  break;
<HTML> case 5:
<HEAD> diaPorExtensao = “Sexta Feira”;
<TITLE>Meu script de comparacao</TITLE>   break;
</HEAD> case 6:
<BODY> diaPorExtensao = “Sábado”;
<SCRIPT LANGUAGE=”JAVASCRIPT” TYPE=”TEXT/   break;
JAVASCRIPT”>   default:
  <!-- diaPorExtensao = “Dia Invalido”;
var diaDaSemana; }
var diaPorExtensao;   alert(diaPorExtensao);
-->
diaDaSemana = prompt(“Informe o dia da   </SCRIPT>
semana”); </BODY>
</HTML>
 PROGRAMAÇÃO WEB

<HTML>
<HEAD>
<TITLE>Script de Repeticao</TITLE>
Comandos de repetição são utilizados para repetir uma </HEAD>
determinada parte de código do script em um número finito <BODY>
de vezes; para que uma estrutura de repetição possa ser criada, <SCRIPT LANGUAGE=”JAVASCRIPT” TYPE=”TEXT/
JAVASCRIPT”>
ela sempre necessita de três informações:   <!--
o início do processo de repetição; var i;

o código a ser repetido; //Sintaxe do comando for

for (i = 0; i < 10; i++)
a condição de término da repetição. {
document.write(“Estou executando uma
No JavaScript existem pelo menos três tipos de comandos repeticao”);
de repetição que precisam ser conhecidos neste momento: }

//Sintaxe do comando while

For : Nesse tipo de estrutura de repetição a definição do i = 0; //Necessario inicializar a variavel
início, condição de término e incremento são definidos no início contadora antes;
da estrutura. while (i < 10)
{
 While: Nesse tipo de estrutura de repetição a condição document.write(“Estou executando uma
repeticao”);
de término é definida no início da repetição, de forma que se i++; //Necessario incrementar o
a condição não for atendida, o bloco de código da estrutura de contado no bloco de codigo;
repetição nunca será executado; }

Do-while : Neste tipo de estrutura de repetição a condição //Sintaxe do comando do-while

de término é definida no final do bloco de código, de forma i = 0; //Necessario inicializar a variável
do{
que se a condição não for atendida o programa irá executar o document.write(“Estou executando uma
bloco de código pelo menos uma vez. repeticao”);
 PROGRAMAÇÃO WEB

i++; //Necessario incrementar o contado <HTML>

no bloco de codigo; <HEAD>
} <TITLE>Exemplos de funcoes</TITLE>
while (i < 10);
<SCRIPT LANGUAGE=”JAVASCRIPT” TYPE=”TEXT/JAVASCRIPT”>
-->   <!--
  </SCRIPT>
</BODY> function ExibeAlerta() //Funcao sem
</HTML> parametros de entrada
{
alert(“Alerta gerado pela funcao”);
//Esta funcao nao apresenta nenhum
retorno de informacao
}
Uma função é um bloco de programa encapsulado sob um
nome, o qual pode ser executado quantas vezes forem necessárias, function ExibeAlertaParametro(mensagem)
sem a necessidade de reescrever todo o bloco de código, sendo {
essencial apenas chamar a identificação deste bloco, ou seja, o   alert(mensagem);
nome. Em determinadas linguagens de programação também }
existem as sub-rotinas, as quais executam uma ação semelhante function Somar(valor1, valor2) //Funcao com
com a das funções. dois parametros
{
Uma função pode receber parâmetros de entrada e poderá var resultado;
também retornar um resultado. Além disso, uma função também
pode ter variáveis declaradas em seu interior, mas neste caso //A Soma é armazenada na variavel
resultado
é importante ressaltar que uma variável criada dentro de uma resultado = valor1 + valor2;
função, apenas poderá ser utilizada nesta função, não possuindo
 valor ou conteúdo fora dela. Enquanto que uma variável decla- //O retorno do resultado é feito
rada fora da função pode ser utilizada em seu interior. através da palavra
  //return;
return resultado;
 PROGRAMAÇÃO WEB

carregada somente depois do script já ter sido executado. Isso

acontece, porque o script está acima do local de criação da div.
 Já, o seguinte exemplo irá funcionar corretamente.
Conforme foi visto no capítulo anterior, a formatação de
<HTML>
uma página html não é feita pelo html, mas sim pelo CSS. Até
<HEAD> o momento, foi apresentada apenas uma maneira de inserir CSS
<TITLE>Meu primeiro evento</TITLE> em uma página: Definindo a estrutura do CSS e vinculando a
<SCRIPT LANGUAGE=”JAVASCRIPT” TYPE=”TEXT/ mesma a um determinado elemento, seja através do CSS in-line,
JAVASCRIPT”> incorporado ou linkado. Nessas situações, o CSS sempre tem a
  <!--
function executa()
necessidade de ser criado de forma “fixa” na página.
{
objetodiv.innerHTML = “conteudo...”; Outra forma de inserir CSS em um elemento html, acon-
} tece através do seu uso integrado ao JavaScript. Nessa situação,
--> podemos inserir o CSS de forma dinâmica na página, criando
  </SCRIPT> efeitos bastante interessantes em uma página, principalmente
</HEAD>
<BODY onload=”executa()”>
quando o seu uso estiver associado a captura de eventos em
<div id=”objetodiv”>  JavaScript. Para utilizar CSS com JavaScript, devemos utilizar
  </div> o objeto “style” associado ao elemento html em questão.
</BODY>
</HTML> O objeto “style” apresenta propriedades que são próprias
do CSS. A seguir temos o exemplo de uso deste objeto.
Este exemplo funcionará, visto que a escrita do conteúdo
está encapsulada em uma função, logo, essa função somente será <html>
executada quando o evento “onLoad” do corpo da página for   <head>
disparado. O evento “onLoad” é disparado somente depois que <script type=”text/javascript”
language=”javascript”>
todo o conteúdo da página html terminar de ser interpretado e   <!--
carregado pelo navegador. function inicializa()
{
 PROGRAMAÇÃO WEB

quadrado.style.position =
“absolute”;
quadrado.style.width = “100px”;
quadrado.style.height = “100px”;
quadrado.style.top = “200px”;
quadrado.style.left = “10px”;
quadrado.style.backgroundColor =
“red”;
}
-->
  </script>
  </head>
<body onload=”inicializa()”>
<div id=”quadrado”></div>
  </body>
</html>
 Síntese
Neste capítulo aprendemos sobre o JavaScript, sua história
e como ele pode ser utilizado nas páginas, com o objetivo de am-
pliar as funcionalidades das mesmas. Desse modo, aprendemos
que o JavaScript surgiu com a empresa Netscape, não possuindo
relação com a linguagem Java; bem como, o mesmo é utilizado
para proporcionar maior interação entre as páginas e o usuário;

 Aprendemos, também, sobre a estrutura do JavaScript, a

qual apresenta os seguintes detalhes:

• A linguagem é padronizada, mas sempre interpretada pelo

browser;

• A linguagem de programação é fracamente tipada;

• Possui as mesmas estruturas de repetição, condições e ex-

pressões de qualquer linguagem de programação moderna;

 Além disso, vimos a interação existente entre o JavaScript

e os elementos Html e CSS. Assim, com o JavaScript é possível
acessar as estruturas de CSS e Html da página modificando o
seu conteúdo durante a própria navegação. Já, o JavaScript nos
permite inclusive criar elementos em tempo de execução e não
apenas modificar os mesmos.
Questões para
recapitularmos!
1. Por que, apesar do Java Script ser um
padrão aberto, as funcionalidades
nem sempre funcionam da mesma
forma em diferentes navegadores?
2. Construa um script Java Script que
solicite, através do prompt, o nome
do usuário e, após, exiba uma men-
sagem de boas-vindas contendo o
nome do usuário na própria página
html.
3. Construa uma página html com
dois campos de input que permi-
tem ao usuário inserir um número
de colunas e, também outro campo
que permita inserir um número de
linhas. A partir desta informação,
construa um script Java Script que
desenhe uma tabela html de forma
dinâmica, com o número de linhas
e colunas relativas a informação di-
gitada pelo usuário.
 4. Pesquise na internet o algoritmo
utilizado para validar um núme-
ro de cpf. Com base na pesquisa,
construa um script Java Script para
implementar esta regra de validação.
Logo, construa uma página Html
com um campo onde possa ser in-
formado um número de cpf e aplique
o script criado neste campo para
 verificar se o cpf informado é válido.
5. Crie um formulário html com os
seguintes campos:
• Nome;
• Idade;

• Telefone;
• E-mail;
No evento de submit deste formu-
lário construa um script java script para
tornar o campo “Nome” e “E-mail” obri-
gatórios.
 PROGRAMAÇÃO WEB

Agora que entendemos como programar com

JavaScript em uma página web, chegou o
momento de percebermos todo o potencial que
esta linguagem possui, demonstrando por que
ela é uma das linguagens de programação mais
utilizadas no mundo atual.
 PROGRAMAÇÃO WEB

<input type=”button” onclick=”inicio()” value=”Inicio”> <html>

</input>   <head>
<input type=”button” onclick=”finaliza()” value=”Fim”>   <script>
</input>
<p id=”paragrafo”></p> function posiciona()
  </body> {
</html>   navigator.geolocation.
getCurrentPosition(showPosition);
}

function showPosition(position) {
var latlon = position.coords.
Com o HTML5 é possível utilizar a API de Geolocali- latitude + “,” +
zação, a qual permite obtermos informações sobre a localização position.coords.longitude;
atual, como latitude, longitude, altura, velocidade de movimen-
tação, entre outras funcionalidades. var url = “http://maps.google.
com/maps?q=” + latlon;
Essa API utilizará recursos de GPS ou triangulação, window.location = url;
conforme a disponibilidade dos mesmos, sendo que inicialmente }
sempre será utilizado triangulação, pelo fato de ser mais rápido   </script>
para o browser obter esta informação, melhorando o desempenho
da aplicação. Porém, a tendência da localização por triangulação </head>
é ser menos precisa que a do GPS. <body onload=”posiciona()”>

  </body>
Para ser possível utilizar a API de geolocalização é neces- </html>
sário aceitar a pergunta do navegador, que solicita a obtenção
das informações de localização. Exemplo:
 PROGRAMAÇÃO WEB

removeItem(chave): exclui um valor do Storage;

clear(): limpa o storage.
Como vimos anteriormente, os cookies são uma maneira
de salvar informação no navegador, entretanto, esta maneira A diferença entre os dois é que o sessionStorage apenas
de armazenar informação possui limitações de quantidade de armazena
informação e, também, apresenta dif iculdade em ler e escrever navegadorosoudados durante a sessão do usuário, caso ele feche o
a aba, seus dados serão excluídos. Enquanto que
as informações. o localStorage não possui expiração def inida. Exemplo:
Para auxiliar na tarefa de salvar e recuperar informações <html>
locais, o HTML 5 apresenta um recurso chamado de Storage   <head>
API.   <script>
var linhaExecucao;
A API Storage permite duas formas de armazenamento
function gravar()
de dados no lado do cliente: {
  sessionStorage.
sessionStorage; setItem(“nome”,”Joao da Silva”);
}
localStorage.
function ler()
{
O sistema de localStorage e sessionStorage fazem parte var retorno;
da API Storage. Seu tipo de armazenamento é de chave: valor, retorno = sessionStorage.
sendo a chave sempre uma string. O objeto desta API apresenta getItem(“nome”);
4 métodos:   alert(retorno);
}
getItem(chave): obtém um valor armazenado no Storage;   </script>

</head>
setItem(chave, valor): armazena um valor no Storage;   <body>
 PROGRAMAÇÃO WEB

<input type=”button” onclick=”gravar()”   </script>

value=”Grava Informacao” > </i>
<input type=”button” onclick=”ler()” </head>
value=”Ler Informacao” > </button>   <body>
  </body> <input type=”button” onclick=”desenhar()”
</html> value=”Desenhar” >
<canvas id=”desenho” width=”400”
height=”400”></canvas>
  </body>
</html>

O HTML 5 trouxe consigo uma API gráfica interpre-

tada sem o uso de plugins, a qual é manipulada através da tag Além disso, com o Canvas é possível desenhar na página
canvas. Esta API permite desenhar na tela do navegador através e atualizar, dinamicamente, estes desenhos através de scripts
do javascript. conforme a necessidade do usuário. Esta possibilidade permite
inúmeros usos desta API, substituindo os atuais plugins como o
Para iniciar um desenho, devemos incluir no documento Flash pelo Canvas. A seguir, veremos um exemplo de desenho
html a tag canvas, que delimita a área do desenho e no javascript, construído com o Canvas.
desse modo, a fim de inicializar o canvas através do método <html>
getContext.   <head>
  <script>
<html> function desenhar()
  <head> {
  <script> var context;
function desenhar() context = document.getElementById
{ (“desenho”).getContext(“2d”);
var context;
context = document. //iniciar o desenho
getElementById(“desenho”).   context.beginPath();
getContext(“2d”);
} //posicionar o cursor para o
 PROGRAMAÇÃO WEB

Essa biblioteca apresenta uma série de funcionalidades, senta comentários no código, possuindo redução de espaços e
das quais pode-se citar: nome de variáveis para que o arquivo seja menor, possibilitando
melhor desempenho.
Resolução de incompatibilidades entre navegadores;
A versão descompactada, por sua vez, apresenta comen-
Redução significativa de código; tários no código, o que permite um melhor entendimento do
que as rotinas do framework se propõe.
Reutilização de código.
Além disso, também existe a versão 1.x e a versão 2.x.
Altamente expansível e com diversas funcionalidades Ambas versões possuem as mesmas funcionalidades, porém a
adicionais:  versão 2.x não possui compatibilidade com navegadores antigos
(internet explorer 6, 7 e 8).
 jQuery
 jQuer y UI para elementos de interface;
i nterface;
A seguir, podemos observar
observa r um exemplo de código. Logo,
 jQuery
 jQuer y Mobile para desenvolvimento mobile. o código comentado demonstra como a ação é feita com JavaS-
cript sem o uso do framework jQuery.
Apresenta
Apresenta grande facilidade
facil idade de uso dos recursos Ajax e
manipulação DOM através dos seletores. <html>
  <head>
<script
<scri pt src=”Jq
src= ”Jque
uery-2.
ry-2.1.
1.1.
1.js”></script>
js”></scrip t>
Permite a implementação
implementação de recursos de CSS nas versões   <script>
1, 2 e 3. function executa()
{
O jQuery pode ser acessado pelo site http://jquery.com/   //document.
e o download pode ser feito no endereço http://jquery.com/ getElementById(“teste”).value = 5;
  $(“#teste”).val(5);
download/.. Na página de download existem
download/ ex istem quatro versões que
}
podem ser feitas. Existe a versão compactada (compressed) e   </script>
descompactada (uncompressed). A versão compactada também   </head>
é conhecida como versão de produção. Essa versão não apre-
 PROGRAMAÇÃO WEB

<body onload=”executa()”>
onload=”executa()”> Seletor por Classe : Permite a seleção de elementos através
<input type=”text”
type=” text” id=”teste”></input>
id=”teste”></input> da propriedade class dos elementos, retornando um array de
  </body>
</html>
elementos. Exemplo:
Html:
Seletores JQuery
<td class=“celula”></td>

O jQuery apresenta uma forma de selecionar os elementos,

elementos,  JavaScript:
muito dinâmica e simplificada, sendo muito semelhante aos
  document.getElementsByClassName(“célula”)
seletores de CSS, mas com recursos mais avançados. Agora,
serão apresentados alguns dos seletores que podem ser empre-
gados com jQuery.  Jquery:
$(“.celula”)
Seletor por Id: Permite a seleção através do Id de um
elemento. Exemplo: Seletor por Elemento: Permite a seleção de elementos
através do nome do elemento, retornando um array
ar ray de elemen-
Html: tos. Exemplo:
<td id=”célula”></td>
id=”célula”></td>
Html:
 JavaScript: <td></td>

  document.getElementById(“célula”)
 JavaScript:
 Jquery:   document.getElementsByTagName(“td”)

$(“#celula”)
 Jquery:
$(“.td”)
 PROGRAMAÇÃO WEB

Seletor Múltiplo: O seletor múltiplo permite a combinação <html>

de diversos elementos e diversos tipos de seletores ao mesmo   <head>
  <script>
tempo, retornando um array com os elementos selecionados.   $(document).ready(function(){
//Aqui devem ser programados
progra mados os
Além dos seletores antes apresentado, existem diversos demais eventos . . .
outros que podem ser utilizados. Para saber mais sobre estes })
seletores, devemos acessar
acessa r a documentação do jQuery, por meio   </script>
do endereço http://api.jquery.com/category/selectors/
http://api.jquery.com/category/selectors/..   <head>
  <body>
  </body>
</html>

Internamente, ao evento “ready” podem ser adicionados

O uso do jQuery permite ampliar a quantidade e tipos de demais eventos e códigos em JavaScript. Estes eventos podem
eventos que já eram disponibilizados no JavaScript. O primei- ser adicionados neste local, também com o emprego de f unções
ro evento a ser considerado com o jQuery é o evento “ready”. anônimas vistas anteriorme
a nteriormente.
nte. Agora, segue exempl
e xemploo de como
Esse evento é muito importante, pois o mesmo será disparado programar no evento “ready”.
quando a página concluir a criação da árvore DOM, contendo
os elementos da página, diferentemente
d iferentemente do evento “onLoad
“onLoad”” do <html>
 JavaScript
 JavaScr ipt clássico, o qual é executado quando a página concluí
conclu í   <head>
o carregamento
carreg amento de todos os elementos, inclusive o seu conteúdo,   <script>
  $(document).ready(function(){
como imagens, tornando a execução das instruções contidas no
evento “ready” muito mais rápida do que o “load”. Logo a seguir, //Aqui foi escrita uma mensagem no
temos o exemplo de como utilizar o evento ready: corpo da página
$(“bod
$(“body”)
y”).
.text(“O documento
docum ento esta
carregado”);
  $(“#minhacamada”).click(function(e){
alert(“evento
alert(“evento de clique executado no
elemento de id ‘minhacamada’ com
função
fun ção anonim
ano nima.
a...”)
.”);
 PROGRAMAÇÃO WEB

});
})
  </script> keydown() Executado no momento em que uma tecla é
  <head> pressionada, independente de se soltar ou manter a
  <body> tecla pressionada.
  </body>
</html> keypress() Executado quando uma tecla é pressionada. É executado
uma vez se a tecla é pressionada e liberada. Executado
Adiante, será apresentada uma tabela com outros eventos diversas vezes se a tecla for pressionada e mantida.
que podem ser utilizados com jQuery. keyup() Executado no momento em que uma tecla é liberada
após ser pressionada.
click() Evento gerado quando se produz um click em um
elemento da página. focusin() Evento executado quando um elemento ganha o foco.
Este foco pode ser causado pelo clique do mouse ou
dblclick() Evento gerado quando se produz um duplo clique sobre pela tabulação do teclado.
um elemento.
focusout() Este evento ocorre quando um elemento perde o foco,
hover() Executada quando o mouse entra e sai de cim a de um podendo ser perdido pelo uso do mouse ou tabulação
elemento. do teclado.
mousedown() Executado quando o usuário pressiona o botão do focus() Executado quando um elemento ganha o foco.
mouse.
mouseup() Executado quando o usuário solta o botão do mouse.
mouseenter() Executado quando o mouse for situado sobre o emento.
Além dos novos eventos e seletores, o jQuery apresenta
mouseleave() Executado quando o mouse sai de cima de um inúmeras facilidades que podem ser empregadas no desenvolvi-
elemento. mento em JavaScript. Dentre essas facilidades, está a execução
mousemove() Executado quando o mouse é movimentado sobre o de rotinas Ajax e também facilitadores relativos a manipula-
elemento. ção de elementos. O uso de recursos Ajax será visto em outra
mouseout() Executado quando o mouse sai do elemento. disciplina, enquanto que agora serão apresentados alguns dos
 PROGRAMAÇÃO WEB

recursos que facilitam a programação em JavaScript. $.unique(array): Retorna um array de elementos somente
com elementos únicos.
$.trim(str): Este comando remove espaços na esquerda e
na direita de uma strings. Exemplo: $.type(objeto): Determina o tipo do elemento. Exemplo:

<script> <script>
var nome = “ Juliano “; if ($.type(true) == “boolean”)
nome = $.trim(nome); {
</script> document.write(“Este tipo é booleano”);
}
</script>
$.inArray(valor, array): Retorna a primeira ocorrência do
 valor passado, que for encontrada no vetor passado. Exemplo: .val(): Retorna o valor (conteúdo) de um determinado
objeto.
<script>
var nomes = new Array(); .text(): Seta o valor para um determinado objeto. Exemplo:
var valorEncontrado;
<script>
nomes[0] = “José”; var conteudo = $(“camponome”).val();
nomes[1] = “Carlos”;   $(“p”).text(conteudo);
nomes[2] = “Cassio”; </script>

valorEncontrado = $.inArray(“Carlos”,nomes); .css(): Atribui ou permite a leitura de um determinado va-

lor de uma propriedade CSS do elemento em questão. Exemplo:
  alert(valorEncontrado);
<script>
</script>
//lendo a cor de fundo de um paragrafo para uma
variável
$.isArray(objeto) : Retorna verdadeiro se o objeto passado Var corDeFundo;
for um array JavaScript. corDeFundo = $(“p”).css(“background-color”);
</script>
 PROGRAMAÇÃO WEB

Draggable Cria elementos possíveis de serem arrastados pela

(arrastar) interface.
Droppable Cria elementos para receber os elementos
(soltar) arrastáveis.
Resizable Cria elementos cujas dimensões podem ser
O jQuery UI é uma biblioteca JavaScript, criada em 2007 (dimensionar) controladas pelo usuário.
por um grupo de desenvolvedores que, atualmente, possuem Selectable Cria elementos que possam ser selecionados pelo
como gerente de projeto Richard D. Worth. (selecionar) usuário, seja individualmente ou em grupos.
Sortable Cria elementos que possam ser ordenados pelo
A biblioteca jQuery UI foi criada com o objetivo de ser (ordenar) usuário com ação de arrastar e soltar.
utilizada em conjunto com a biblioteca jQuery, objetivando a Accordion Cria o efeito acordeão, para ocultar/mostrar
criação de elementos para interfaces de usuários ricos. conteúdo.
Autocomplete Apresenta ao usuário uma lista de sugestões de
Essa biblioteca permite ao desenvolvedor criar elementos palavras, à medida que ele digita em um campo
de interface com o usuário, com um mínimo de código e sintaxe texto.
semelhante a biblioteca jQuery. Button Possibilidade de criar vários tipos de botões.
Datepicker Cria uma ja nela popup para seleção da data a ser
A biblioteca jQuery UI, bem como uma vasta documen- digitada, em um campo destinado a coletar uma
tação da mesma podem ser encontrados no site http://jqueryui. data.
com/. Dialog Cria vário s tip os de ja nelas de diá logo, como janelas
modais.
Os elementos que fazem parte da biblioteca jQuery UI Progressbar Cria uma barra indicativa do andamento de uma
foram classificados de acordo com as suas funcionalidades, o tarefa.
que pode ser observado na tabela seguinte. Slider Cria um botão arrastável em uma guia para seleção
de um valor compreendido em determinada faixa.
Tabs Cria uma interface cuja navegação é feita com o uso
de abas.
 PROGRAMAÇÃO WEB

<html>
Color Animation Este efeito tem por objetivo animar as cores de um
<head>
elemento.
<title>jQuery UI Datepicker - Default
Toggle class Esses efeitos destinam-se a anim ar elementos functionality</title>
Add class baseados na manipulação dos seus atributos de <link rel=”stylesheet” href=”jquery-ui.css”>
classe. <script src=”jquery-1.10.2.js”></script>
Remove class <script src=”jquery-ui.js”></script>
Swich class   <script>
Effect Aplica em um elemento uma série de efeitos de $(function() {
animação padrão da biblioteca jQuery, tais como os $(“#datepicker” ).datepicker();
efeitos de esmaecimento, pulsação, balanço, sacudir, });
etc.   </script>
</head>
Toggle Aplica um dos efeit os padrão da biblio teca jQuery, <body>
com a fnalidade de alternar entre ocultar e exibir <p>Date: <input type=”text” id=”datepicker”></p>
um conteúdo. </body>
Hide Efeito destinado a ocultar um conteúdo. </html>
Show Efeito destinado a mostrar um conteúdo.
Position Destina-se a controlar e manipular o
posicionamento de elementos na interface.

Wid gets Destin a-se à cria ção de wid gets personaliz ados.

A seguir, segue exemplo extraído da própria documenta-

ção, o qual demonstra a utilização do jQuery UI para o elemento
datepicker.