Professional Documents
Culture Documents
9 de abril de 2013
Sumrio i
Sobre a K19 1
Seguro Treinamento 2
Termo de Uso 3
Cursos 4
1 Introduo 1
1.1 Client Side e Server Side . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 HTML, CSS e Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
2 HTML 3
2.1 Estrutura Bsica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.2 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.3 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.4 Semntica HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.5 Pargrafos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.6 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.7 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.8 Cabealhos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
2.9 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.10 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.11 Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.12 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.13 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.14 ncoras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.15 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.16 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.17 Imagens . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.18 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
2.19 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
www.facebook.com/k19treinamentos i
S UMRIO ii
2.20 Tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
2.21 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
2.22 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
2.23 Listas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
2.24 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
2.25 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
2.26 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
2.27 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
2.28 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
2.29 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
2.30 Formulrio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
2.31 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
2.32 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
3 CSS 39
3.1 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
3.2 Estrutura de uma regra CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
3.3 Tipos de seletores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
3.4 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
3.5 Cores em CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
3.6 Unidades de medida . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
3.7 Principais propriedades CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
3.8 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
3.9 Box model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
3.10 A propriedade display . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
3.11 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
3.12 Posicionando elementos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
3.13 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
3.14 Desafios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
4 JavaScript 71
4.1 Declarando e inicializando variveis em JavaScript . . . . . . . . . . . . . . . . . . . . . 71
4.2 Operadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
4.3 Controle de fluxo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
4.4 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
4.5 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
4.6 Funes JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
4.7 Objetos JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
4.8 Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
4.9 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
4.10 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
A Javascript Avanado 85
A.1 Objetos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85
A.2 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
A.3 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
A.4 Funes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
A.5 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
A.6 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
A.7 Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
ii www.k19.com.br
iii S UMRIO
B jQuery 105
B.1 Introduo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
B.2 Sintaxe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
B.3 Seletores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
B.4 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
B.5 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
B.6 Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
B.7 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
B.8 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
B.9 Efeitos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
B.10 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
B.11 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
B.12 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
B.13 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
B.14 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
C HTML5 123
C.1 article . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
C.2 section . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124
C.3 header . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
C.4 footer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
C.5 nav . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
C.6 aside . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
C.7 figure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
C.8 figcaption . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
D CSS3 129
D.1 Bordas arredondadas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
D.2 Sombras . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
D.3 Transformaes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
D.4 Fontes no CSS3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
F Quizzes 147
G Respostas 149
www.facebook.com/k19treinamentos iii
S UMRIO iv
iv www.k19.com.br
1 S UMRIO
Sobre a K19
A K19 uma empresa especializada na capacitao de desenvolvedores de software. Sua equipe
composta por profissionais formados em Cincia da Computao pela Universidade de So Paulo
(USP) e que possuem vasta experincia em treinamento de profissionais para rea de TI.
Visando a mxima qualidade, a K19 mantm as suas apostilas em constante renovao e melho-
ria, oferece instalaes fsicas apropriadas para o ensino e seus instrutores esto sempre atualizados
didtica e tecnicamente.
www.facebook.com/k19treinamentos 1
S UMRIO 2
Seguro Treinamento
Na K19 o aluno faz o curso quantas vezes quiser!
Comprometida com o aprendizado e com a satisfao dos seus alunos, a K19 a nica que pos-
sui o Seguro Treinamento. Ao contratar um curso, o aluno poder refaz-lo quantas vezes desejar
mediante a disponibilidade de vagas e pagamento da franquia do Seguro Treinamento.
As vagas no preenchidas at um dia antes do incio de uma turma da K19 sero destinadas ao
alunos que desejam utilizar o Seguro Treinamento. O valor da franquia para utilizar o Seguro Treina-
mento 10% do valor total do curso.
2 www.k19.com.br
3 S UMRIO
Termo de Uso
Termo de Uso
Todo o contedo desta apostila propriedade da K19 Treinamentos. A apostila pode ser utilizada
livremente para estudo pessoal . Alm disso, este material didtico pode ser utilizado como material
de apoio em cursos de ensino superior desde que a instituio correspondente seja reconhecida pelo
MEC (Ministrio da Educao) e que a K19 seja citada explicitamente como proprietria do material.
proibida qualquer utilizao desse material que no se enquadre nas condies acima sem
o prvio consentimento formal, por escrito, da K19 Treinamentos. O uso indevido est sujeito s
medidas legais cabveis.
www.facebook.com/k19treinamentos 3
S UMRIO 4
TR
EIN
AM
EN
TR
TO
EIN
S
TREINAMENTOS
AM
EN
TO
S
Conhea os nossos cursos
www.k19.com.br/cursos
4 www.k19.com.br
CAPTULO
I NTRODUO
1
Durante muito tempo, a ideia de desenvolvimento web ficou associada apenas a construo de
pginas que possuam somente o intuito de oferecer aos usurios o acesso a um determinado con-
tedo. Porm, com a popularizao da internet, novas necessidades foram surgindo em diversas
reas.
Na rea de entretenimento, cada vez mais jogos online foram aparecendo. Diversas redes sociais
ganharam foras graas grande interatividade permitida entre os usurios. Gravadoras de msica
passaram a vender seus ttulos atravs de canais especializados. No meio corporativo, as empresas
passaram a adotar sistemas web para controlar as suas tarefas administrativas. Enfim, necessidades
antes inexistentes surgiram em uma velocidade muito grande. Muitos sites deixaram de ser simples
pginas para se tornarem verdadeiras aplicaes.
H cerca de 15 anos, era muito comum que um nico desenvolvedor fosse responsvel por todo
o desenvolvimento de uma aplicao web. Essa pessoa era chamada de webmaster. Com o passar do
tempo, o papel do webmaster como era conhecido foi desaparecendo. A complexidade e volume de
trabalho para o desenvolvimento de uma aplicao web se tornaram muito grande para apenas uma
pessoa ou at mesmo para um grupo pequeno de desenvolvedores (webmasters).
Hoje, a funo de webmaster ainda existe mas com um papel um pouco diferente. Geralmente,
esse profissional apesar de possuir bons conhecimentos nas diversas tecnologias utilizadas apenas
gerencia o desenvolvimento que realizado por outros profissionais.
Por outro lado, os desenvolvedores back-end trabalham com linguagens como Java, C#, VB.NET,
PHP, Ruby, Python, SQL entre outras. Essas linguagens atuam do lado do servidor por isso so clas-
sificadas como server side. Isso no significa que os desenvolvedores front-end no precisam co-
nhecer as linguagens utilizadas pelo back-end e vice-versa. Na prtica, ocorre uma especializao
dos profissionais em determinadas tecnologias que podem tender mais para o front-end ou para o
www.facebook.com/k19treinamentos 1
I NTRODUO 2
back-end.
Como acabamos de ver, as principais linguagens e tecnologias client side so HTML, CSS, Javas-
cript, Adobe Flash, Microsoft Silverlight e VBScript. De todas elas as trs primeiras so as mais impor-
tantes e atualmente esto em maior evidncia. Cada uma das trs linguagens possui um papel bem
especfico que podemos resumir da seguinte maneira: o cdigo HTML ser responsvel por prover
o contedo de uma pgina, o cdigo CSS cuidar da formatao visual do contedo apresentado e o
cdigo Javascript permitir que as pginas possuam algum tipo de comportamento (inteligncia)
e que alguma interao possa ser estabelecida com os usurios.
Nos prximos captulos, discutiremos em detalhes cada uma dessas trs linguagens.
2 www.k19.com.br
CAPTULO
HTML
2
Quando acessamos uma pgina web, estamos interessados na informao contida nessa pgina.
Essa informao pode estar na forma de texto, imagem ou vdeo. Em geral, o contedo de uma p-
gina web definido com a linguagem HTML (HyperText Markup Language). HTML uma linguagem
de marcao originalmente proposta por Tim Berners-Lee no final da dcada de 1980. O objetivo do
Tim Barners-Lee era criar um mecanismo simples que pudesse ser utilizado por qualquer pessoa que
quisesse disseminar documentos cientficos.
Desde sua proposta at os dias de hoje, a linguagem HTML sofreu diversas alteraes. A cada
verso, novos recursos so adicionados e problemas corrigidos. A verso mais atual da especificao
da linguagem HTML a 5. Essa verso ainda no foi finalizada, ela est na fase de trabalho em pro-
gresso (working draft). Porm, j existem navegadores implementando alguns dos novos recursos
do HTML5.
As especificaes da linguagem HTML so publicadas pelo World Wide Web Consortium mais
conhecido por sua sigla W3C. Alm do HTML, o W3C tambm responsvel por linguagens como o
XML, o SVG e pela interface DOM (Document Object Model), por exemplo.
Estrutura Bsica
Um documento HTML composto por elementos que possuem uma tag, atributos, valores e
possivelmente filhos que podem ser um texto simples ou outros elementos. Cada elemento deve
obrigatoriamente possuir uma tag e ela deve ser definida entre parnteses angulares (< e >). Veja o
exemplo:
www.facebook.com/k19treinamentos 3
HTML 4
No exemplo acima, temos um elemento HTML representado pela tag p e um texto simples Ol
Mundo! filho desse elemento.
Exerccios de Fixao
1 Na pasta Desktop do seu usurio, crie uma nova pasta com o seu primeiro nome. Dentro dessa
pasta, crie um diretrio chamado html. Para facilitar, utilize apenas letras minsculas em todas as
pastas e arquivos que criarmos durante o curso.
2 Agora, utilizando um editor de texto, crie um novo arquivo chamado ola-mundo.html e salve-o
dentro da pasta html. Em seguida, insira o seguinte cdigo dentro do arquivo ola-mundo.html:
4 www.k19.com.br
5 HTML
Exerccios Complementares
1 Crie uma pgina HTML que exiba o nome deste curso duas vezes.
Semntica HTML
De acordo com a especificao da linguagem HTML, cada elemento possui um propsito bem
definido. Para o funcionamento correto das pginas de uma aplicao web, fundamental respeitar
o propsito de cada elemento e utiliz-lo nas condies corretas. Muitos autores utilizam o termo
semntica HTML ao se referirem ao uso correto dos elementos da linguagem HTML. Por exemplo:
No exemplo acima, utilizamos o elemento p para definir um pargrafo. De acordo com a espe-
cificao da linguagem HTML, esse elemento deve ser utilizado justamente para definir pargrafos.
Portanto, ele foi aplicado corretamente. Agora, vejamos outro exemplo:
Dessa vez, utilizamos o elemento address. De acordo com a especificao, o elemento address
www.facebook.com/k19treinamentos 5
HTML 6
deve ser utilizado para fornecer informaes de contato dos autores do documento ou da maior parte
do documento. Normalmente, esse elemento aparece no incio ou no final das pginas.
Se observarmos o exemplo mais atentamente, trata-se de uma pgina do site do Jonas (repare
no ttulo da pgina). O autor da pgina o Jonas e no o Rafael ou o Marcelo. Portanto, o elemento
address foi aplicado incorretamente. Alm disso, devemos evitar o uso desse elemento para infor-
mar endereos postais a menos que essas informaes sejam relevantes para o documento.
Pargrafos
6 www.k19.com.br
7 HTML
Exerccios de Fixao
Exerccios Complementares
www.facebook.com/k19treinamentos 7
HTML 8
2 Crie um documento HTML e force uma quebra de linha em qualquer parte de um pargrafo.
Dica: utilize o site www.lipsum.com para gerar um texto fictcio.
Cabealhos
Assim como em um livro, uma pgina HTML pode conter uma hierarquia de ttulos para estabe-
lecer uma diviso de seu contedo. Para conseguirmos realizar essa tarefa devemos utilizar as tags
de cabealho h1, h2, h3, h4, h5 e h6.
8 www.k19.com.br
9 HTML
Perceba que cada nvel possui um tamanho diferente de fonte. Esse tamanho determinado pelo
navegador e pode ser alterado atravs de regras CSS que veremos posteriormente.
Devemos utilizar os cabealhos com cautela, pois eles so utilizados como parmetros de ran-
queamento da pgina por diversos buscadores como Google, Yahoo e Bing, por exemplo. O uso
correto das tags de cabealho faz parte das tcnicas de SEO (Search Engine Optimization) que, como
o prprio nome j indica, so tcnicas que ajudam a melhorar o ranqueamento de pginas dentro
dos buscadores.
De acordo com as tcnicas de SEO devemos tomar os seguintes cuidados ao utilizarmos as tags
de cabealhos:
Exerccios de Fixao
4 Crie um novo documento HTML chamado cabecalhos-1.html com o contedo abaixo na pasta
html. Em seguida, abra esse arquivo em um navegador.
www.facebook.com/k19treinamentos 9
HTML 10
5 Imagine que voc possua um site de culinria no qual voc disponibiliza algumas receitas. Crie
uma pgina com uma receita fictcia utilizando cabealhos para organizar contedo. Utilize quantos
nveis de ttulo achar necessrio.
10 www.k19.com.br
11 HTML
27 <p > Utilize um recipiente que permita o macarro ficar totalmente submerso
28 na gua . </ p >
29 <p > Quando ouvir o bip no saia correndo . O microondas no ir explodir ,
30 pois o bip significa que o macarro est pronto . </ p >
31
32 < h3 > No fogo </ h3 >
33
34 <p > Ferva a gua em uma panela . </ p >
35 <p > Insira o macarro e cozinhe - o por 3 minutos </ p >
36
37 < h4 > Ponto importante </ h4 >
38
39 <p > Utilize uma panela que permita o macarro ficar totalmente submerso
40 na gua . </ p >
41 <p > No se distraia com a televiso ou qualquer outra coisa . Voc poder
42 queimar a sua refeio </ p >
43 </ body >
44 </ html >
Exerccios Complementares
3 Utilizando as tags de cabealho, crie uma pgina HTML que exiba hierarquicamente o nome e
uma curiosidade de alguns continentes, pases, estados (provncias) e cidades.
4 Utilizando as tags de cabealho, crie uma pgina de um produto e suas especificaes, observa-
es e ou comentrios. Utilize quantos nveis de ttulo achar necessrio.
Links
Normalmente, um site formado por um conjunto de pginas que esto interligadas de alguma
forma. Para permitir que um usurio navegue de uma pgina para outra, devemos utilizar os links.
Um link pode fazer a ligao de uma pgina para outra do mesmo site (link interno) ou para uma
pgina de outro site (link externo).
Para criarmos um link, devemos utilizar a tag a. Porm, essa tag sem atributos no criar nenhum
link interno ou externo. Para que um link seja criado, devemos, no mnimo, utilizar o atributo href
com o caminho relativo ou absoluto de uma outra pgina. Veja o exemplo:
www.facebook.com/k19treinamentos 11
HTML 12
Alm do atributo href, podemos utilizar o atributo target para informar onde o documento
deve ser aberto. Os possveis valores para o atributo target so:
Ao testar os valores acima, logo percebemos que _self e _top possuem o mesmo comporta-
mento se a pgina que contm o link no estiver em um frame. Caso o link esteja em um frame e
com o valor _top no atributo target, o link ser aberto na janela na qual o frame se encontra. Se o
valor for _self, o link ser aberto no prprio frame.
Dentro de uma nica pgina podemos ter diversos frames e, s vezes, queremos que um link de
um determinado frame seja aberto em outro. Para realizarmos tal tarefa devemos inserir como o
valor do atributo target o nome do frame no qual o link ser aberto.
Importante
Ao longo da evoluo do HTML, a tag frame foi caindo em desuso at que no HTML5 foi
totalmente retirada da especificao. Contudo a grande maioria dos navegadores ainda
interpretam a tag corretamente mesmo dentro de um documento HTML5. Porm, devemos
nos lembrar que ainda estamos num momento de transio para o HTML5. Logo, para evitar
problemas no futuro, evite o uso da tag frame ao mximo.
Exerccios de Fixao
12 www.k19.com.br
13 HTML
Exerccios Complementares
5 Crie vrios links em uma pgina e para cada link escolha um target diferente. Crie tambm
quantas pginas de destino forem necessrias (caso seja necessrio).
6 Pesquise na internet como criar um iframe dentro de um documento HTML. Em seguida, crie
uma pgina com alguns links e um iframe. Crie tambm alguns links na pgina contida no iframe.
Para cada link em ambas as pginas, utilize valores diferentes para o atributo target e observe os
resultados.
ncoras
Alm de criar links para outras pginas, podemos criar links para uma determinada seo dentro
da prpria pgina na qual o link se encontra ou dentro de outra pgina. Esse recurso chama-se
ancoragem, pois as sees para as quais queremos criar um link devem possuir uma ncora.
Para criarmos uma ncora devemos utilizar novamente a tag a, porm sem o atributo href. Dessa
vez utilizaremos o atributo name para identificar a seo atravs de um nome.
O link tambm muda levemente, pois agora ao invs de passar somente o nome do arquivo da
pgina como valor do atributo href devemos passar o nome da seo prefixada com o caractere #.
www.facebook.com/k19treinamentos 13
HTML 14
4 < title > Exemplo de uso da tag a como ncora </ title >
5 </ head >
6 < body >
7 <p > <a href = " # mais_info " > Veja mais informaes </ a > </ p >
8 <p > <a href = " pagina2 . html # outra_ancora " > ncora em outra pgina </ a > </ p >
9 ...
10 ...
11 ...
12
13 <a name = " mais_info " > Mais informaes </ a >
14
15 <p >
16 ...
17 ...
18 ...
19 </ p >
20 </ body >
21 </ html >
Lembre-se
At a verso 4 do HTML e no XHTML, a especificao dizia para utilizarmos o atributo
name da tag a para criarmos as ncoras. Porm, no HTML5, a recomendao do W3C
que o atributo id seja utilizado para tal propsito. Desenvolvedores mais preocupados
em estar sempre atualizados podem ficar tranquilos e utilizar somente o atributo id ao invs do
name, pois os navegadores mais modernos conseguem interpretar o uso de ambos os atributos
em qualquer verso do HTML.
Exerccios de Fixao
14 www.k19.com.br
15 HTML
21 <a name = " sobre " > Sobre o texto dessa pgina </ a >
22 <p >O texto dessa pgina foi gerado atravs do site :
23 <a href = " http :// www . lipsum . com / " > http :// www . lipsum . com / </ a > </ p >
24 </ body >
25 </ html >
8 Crie um novo arquivo chamado ancora-pagina2.html na pasta html com um ncora chamada
outra_ancora. Dica: insira um contedo suficientemente grande para que a barra de rolagem verti-
cal do navegador aparea e coloque a ncora no final da pgina.
9 Crie um novo link no arquivo ancora-pagina1.html que aponte para ncora outra_ancora do
arquivo ancora-pagina2.html.
www.facebook.com/k19treinamentos 15
HTML 16
21
22 <a name = " sobre " > Sobre o texto dessa pgina </ a >
23 <p >O texto dessa pgina foi gerado atravs do site :
24 <a href = " http :// www . lipsum . com / " > http :// www . lipsum . com / </ a > </ p >
25 </ body >
26 </ html >
Exerccios Complementares
7 Crie dois documentos HTML. No primeiro crie um link que aponte para o site da K19 e tambm
coloque um texto qualquer. Em qualquer ponto deste texto, crie uma ncora. No segundo docu-
mento crie um link que aponte para a ncora criada no primeiro documento, coloque tambm um
link qualquer ou um texto.
8 Dentro de um documento HTML crie trs links. Dois devem apontar para ncoras de pginas
externas e o ltimo link deve aparecer no final da pgina e apontar para uma ncora no topo da
prpria pgina.
Imagens
Certamente, os sites na internet seriam muito entediantes se no fosse possvel adicionar ima-
gens ao contedo das pginas. Como no queremos que as nossas pginas fiquem muito monto-
nas, neste captulo, utilizaremos a tag img para melhorar um pouco a aparncia das pginas com
algumas imagens.
A tag img possui o atributo src que utilizaremos para informar qual imagem queremos carregar
dentro de um documento HTML. O valor do atributo pode ser o caminho absoluto ou relativo de
uma imagem.
16 www.k19.com.br
17 HTML
23 <p >
24 < img src = " http :// www . k19 . com . br / css / img / k11 - logo - large . png " / >
25 K11 - Orientao a Objetos em Java
26 </ p >
27 <p >
28 < img src = " http :// www . k19 . com . br / css / img / k12 - logo - large . png " / >
29 K12 - Desenvolvimento Web com JSF2 e JPA2
30 </ p >
31 ...
32 ...
33 ...
34 </ body >
35 </ html >
Exerccios de Fixao
10 Crie um documento HTML em um arquivo chamado imagem.html na pasta html que contenha
alguns elementos IMG.
www.facebook.com/k19treinamentos 17
HTML 18
Exerccios Complementares
Tabelas
Suponha que voc esteja desenvolvendo o site de uma empresa e precisa apresentar alguns rela-
trios em pginas HTML. Considere que os dados desses relatrios so obtidos de planilhas eletr-
nicas. Da surge a necessidade de definir dados de forma tabular em HTML.
Para resolver esse problema, podemos utilizar o elemento table do HTML. Esse elemento per-
mite apresentar um conjunto de dados na forma de tabelas. Veja o exemplo:
18 www.k19.com.br
19 HTML
24 </ tr >
25 < tr >
26 < td > Mitsubishi </ td >
27 < td > Lancer </ td >
28 < td > 2012 </ td >
29 </ tr >
30 < tr >
31 < td colspan = " 3 " > ltima atualizao : 06/2012 </ td >
32 </ tr >
33 </ table >
34 </ body >
35 </ html >
Perceba que a tag table no utilizada sozinha. Ela necessita de pelo menos um ou mais ele-
mentos tr que, por sua vez, necessitam de pelo menos um ou mais elementos th ou td.
www.facebook.com/k19treinamentos 19
HTML 20
20 www.k19.com.br
21 HTML
Repare que visualmente no mudou absolutamente nada. Alm disso, apareceram mais algumas
tags: thead, tfoot e tbody.
A tag thead, assim como a tfoot, servem para agrupar as linhas de cabealho e de rodap,
respectivamente.
O cdigo fica mais claro.
Facilita a aplicao de estilos CSS (atravs do seletor de elemento)
Pode permitir que o contedo do corpo da tabela possua rolagem*.
Ao imprimir a pgina com uma tabela muito extensa, pode permitir que o cabealho e rodap
sejam replicados em todas as pginas*.
* Esses recursos podem existir ou no, pois os desenvolvedores de navegadores podem decidir
no implement-los. Esses recursos so sugestes da especificao.
www.facebook.com/k19treinamentos 21
HTML 22
Outros dois atributos importantes para a construo de tabelas so colspan e rowspan que po-
dem ser aplicados nos elementos td e th.
Como podemos observar nos exemplos dados, o atributo colspan faz com que a clula ignore o
nmero de colunas definidas em seu valor. Analogamente, o atributo rowspan faz o mesmo, porm
com linhas.
Exerccios de Fixao
11 Crie uma pgina HTML em um arquivo chamado tabela.html na pasta html que contenha uma
tabela de acordo com a imagem abaixo:
As linhas vermelhas foram colocadas na imagem apenas para facilitar a visualizao do pro-
blema.
22 www.k19.com.br
23 HTML
Exerccios Complementares
Listas
Em um documento HTML podemos ter trs tipos de listas e cada uma delas deve ser utilizada de
acordo com a sua semntica, ou seja, voc deve escolher um tipo de lista para cada situao.
www.facebook.com/k19treinamentos 23
HTML 24
Lista de definio - utilizada para exibir definies de termos. Funciona como nos dicionrios,
no qual temos uma palavra e em seguida o seu significado.
Lista sem ordem - utilizada para exibir qualquer contedo sem ordenao.
Lista de definio
Para criarmos uma lista de definio devemos utilizar a tag dl. O elemento dl deve possuir pelo
menos um elemento filho dt seguido de um elemento dd. Um item em uma lista de definio
composto por um par de elementos dt e dd.
24 www.k19.com.br
25 HTML
Exerccios de Fixao
12 Crie um documento HTML em um arquivo chamado restaurante.html na pasta html que con-
tenha o cardpio de um restaurante com os nomes dos seus pratos e uma breve descrio sobre os
mesmos.
www.facebook.com/k19treinamentos 25
HTML 26
22 </ dl >
23 </ body >
24 </ html >
Exerccios Complementares
11 Crie um documento HTML que contenha uma lista de alguns pontos tursticos do Brasil de que
voc tenha conhecimento e cite algumas atraes do mesmo.
Lista ordenada
Para criarmos uma lista ordenada, devemos utilizar a tag ol. O elemento ol deve possuir pelo
menos um elemento filho li.
26 www.k19.com.br
27 HTML
Exerccios de Fixao
13 Crie um documento HTML em um arquivo chamado manual.html na pasta html que contenha
um manual que explica passo-a-passo o uso de um caixa eletrnico para a operao de saque.
www.facebook.com/k19treinamentos 27
HTML 28
Exerccios Complementares
12 Crie um documento HTML que contenha um manual que explique passo-a-passo a instalao,
manuteno ou manuseio de um aparelho eletrnico.
Para criarmos uma lista sem ordem, devemos utilizar a tag ul. O elemento ul deve possuir pelo
menos um elemento filho li.
28 www.k19.com.br
29 HTML
Exerccios de Fixao
14 Crie um documento HTML em um arquivo chamado lista-curso.html na pasta html que con-
tenha a lista dos cursos da Formao Bsica da K19.
www.facebook.com/k19treinamentos 29
HTML 30
Exerccios Complementares
13 Crie um documento HTML que contenha a lista dos cursos da Formao Desenvolvedor Java da
K19.
Formulrio
Para trazermos um pouco mais de interatividade para as nossas pginas, podemos utilizar os
elementos de formulrio. Esses elementos recebem algum tipo de entrada do usurio, seja atravs
de um clique ou digitando algum valor.
A tag input
A tag input permite que o elemento que a contenha assuma diversas formas dependendo do seu
atributo type. O atributo type pode receber os seguintes valores:
Existem outros valores possveis para o atributo type, porm eles fazem parte da especificao
do HTML5 e nem todos os navegadores suportam tais valores.
30 www.k19.com.br
31 HTML
7 < form action = " pagina . html " method = " get " >
8 <p >
9 text :
10 < input type = " text " / >
11 </ p >
12 <p >
13 password :
14 < input type = " password " / >
15 </ p >
16 <p >
17 checkboxes :
18 < input type = " checkbox " name = " checkgroup " / >
19 < input type = " checkbox " name = " checkgroup " / >
20 < input type = " checkbox " name = " checkgroup " / >
21 </ p >
22 <p >
23 radios :
24 < input type = " radio " name = " checkgroup " / >
25 < input type = " radio " name = " checkgroup " / >
26 < input type = " radio " name = " checkgroup " / >
27 </ p >
28 <p >
29 button :
30 < input type = " button " value = " Boto " / >
31 </ p >
32 <p >
33 submit :
34 < input type = " submit " value = " Enviar " / >
35 </ p >
36 <p >
37 file :
38 < input type = " file " / >
39 </ p >
40 <p >
41 reset :
42 < input type = " reset " value = " Descartar alteraes " / >
43 </ p >
44 <p >
45 image :
46 < input
47 type = " image " src = " http :// www . k19 . com . br / css / img / main - header - logo . png " / >
48 </ p >
49 <p >
50 hidden :
51 < input type = " hidden " value = " valor escondido " / >
52 </ p >
53 </ form >
54 </ body >
55 </ html >
www.facebook.com/k19treinamentos 31
HTML 32
A tag select
A tag select permite ao usurio escolher um ou mais itens de uma lista. O atributo multiple,
quando presente, informa ao navegador que mais de um item pode ser selecionado.
A lista de itens deve ser informada atravs de elementos option. Tais elementos devem ser filhos
diretos ou indiretos de elementos select. Alm disso, cada item pode conter o atributo chamado
value para informar o valor associado a uma determinada opo.
32 www.k19.com.br
33 HTML
23 < option value = " desktops " > Desktops </ option >
24 < option value = " notebooks " > Notebooks </ option >
25 < option value = " tablets " > Tablets </ option >
26 < option value = " celulares " > Celulares </ option >
27 </ select >
28 </ p >
29 </ form >
30 </ body >
31 </ html >
Caso exista a necessidade de agrupar as opes de um elemento select, podemos utilizar o ele-
mento optgroup em conjunto com o atributo label. Veja o exemplo:
www.facebook.com/k19treinamentos 33
HTML 34
17 < option value = " curitiba " > Curitiba </ option >
18 </ optgroup >
19 </ select >
20 </ p >
21
22 <p >
23 Selecione uma ou mais categorias de produtos ( mantenha a tecla
24 " control " ( ou " command " no Mac ) pressionada para escolher mais de uma
25 categoria ) :
26 < select multiple = " multiple " >
27 < optgroup label = " De mesa " >
28 < option value = " desktops " > Desktops </ option >
29 </ optgroup >
30 < optgroup label = " Portteis " >
31 < option value = " notebooks " > Notebooks </ option >
32 < option value = " tablets " > Tablets </ option >
33 < option value = " celulares " > Celulares </ option >
34 </ optgroup >
35 </ select >
36 </ p >
37 </ form >
38 </ body >
39 </ html >
A tag textarea
A tag textarea exibe uma caixa de texto na qual o usurio poder inserir um texto qualquer. A
diferena para a tag input com o atributo type com o valor text que a tag textarea permite a
insero de textos mais longos e com quebras de linha.
34 www.k19.com.br
35 HTML
A tag label
Em alguns dos exemplos anteriores foram inseridos textos ao lado dos elementos de formulrio
apresentados. Podemos pensar nesses textos como rtulos de cada elemento e exatamente para
esse fim que devemos utilizar a tag label do HTML.
Alm de servir como rtulo, a tag label auxilia o usurio a interagir com os elementos do formu-
lrio. Utilizando o atributo for podemos fazer com que um elemento do formulrio receba o foco.
Veja o exemplo:
www.facebook.com/k19treinamentos 35
HTML 36
Repare que o atributo for da tag label deve conter um valor igual ao do atributo id do elemento
que desejamos focar.
A tag form
Desde o momento em que comeamos a falar sobre os elementos de formulrio utilizamos a tag
form, porm no falamos nada sobre ela. A tag form ir definir, de fato, o nosso formulrio. Todos
os elementos de formulrio que vimos anteriormente devem ser filhos diretos ou indiretos de um
elemento com a tag form para que os dados vinculados a esses elementos sejam enviados.
O papel do formulrio enviar os dados contidos nele para algum lugar, mas para onde? O atri-
buto action quem diz para onde os dados de um formulrio deve ser enviado. Alm disso, devemos
36 www.k19.com.br
37 HTML
informar a maneira como queremos que esses dados sejam enviados, ou seja, se queremos que eles
sejam enviados atravs de uma requisio do tipo GET ou POST (mtodos de envio definidos no
protocolo HTTP).
Exerccios de Fixao
15 Crie um documento HTML em um arquivo chamado formulario.html na pasta html com diver-
sos elementos de formulrio e para cada elemento crie um rtulo. Cada rtulo deve focar o elemento
de formulrio correspondente.
Exerccios Complementares
14 Em um documento HTML, crie um formulrio que utilize as tags input, select, label e textarea.
Tente utilizar todos os tipos do elemento input vistos neste captulo.
www.facebook.com/k19treinamentos 37
HTML 38
38 www.k19.com.br
CAPTULO
CSS
3
At o momento, utilizamos os elementos HTML sem modificar a forma de exibio dos mesmos.
Nos exemplos mostrados no Captulo 2, os elementos foram exibidos com a formatao padro de-
finida pelo navegador utilizado.
A formatao padro pode variar de navegador para navegador. Em geral, os navegadores tentam
seguir as sugestes do W3C. Mas, algumas vezes, erros de interpretao da especificao ou erros de
implementao podem ocorrer. Alm disso, o W3C pode apenas sugerir, ele no possui o poder de
obrigar que todos os navegadores tenham o mesmo comportamento. Portanto, uma boa prtica
formatarmos cada elemento para que o efeito visual seja o mesmo em todos os navegadores. E esse
no o nico motivo, pois na grande maioria das vezes, desejamos aplicar em nossas pginas um
design nico, com a identidade visual da nossa empresa ou cliente.
Os elementos HTML possuem alguns atributos para formatarmos a sua aparncia. Porm, alm
de serem limitados, o uso desses atributos esto caindo em desuso. Inclusive, existem elementos
cuja nica funo alterar a aparncia de um texto, por exemplo. Contudo, esses elementos tambm
caram em desuso e provavelmente no estaro nas prximas especificaes do HTML.
Para alterarmos o aspecto visual dos elementos do HTML, o W3C recomenda que utilizemos o
CSS (Cascading Style Sheets - Folhas de Estilo em Cascata). Atualmente o CSS encontra-se em sua
terceira verso. Porm, nem todos os navegadores implementaram todos os novos recursos.
Definindo as propriedades CSS diretamente no elemento HTML atravs do seu atributo style.
Definindo as regras CSS dentro de um elemento com a tag style.
Definindo as regras CSS em arquivo parte do documento HTML.
Vamos ver um exemplo de aplicao das propriedades CSS diretamente em um elemento HTML:
www.facebook.com/k19treinamentos 39
CSS 40
Vamos ver agora a aplicao das regras CSS utilizando a tag style:
Cdigo HTML 3.2: Exemplo de aplicao das regras CSS atravs da tag style
40 www.k19.com.br
41 CSS
Figura 3.2: Exemplo de aplicao das regras CSS atravs da tag style
Como vimos anteriormente, tambm podemos definir as regras CSS em um arquivo parte. Com
esse arquivo em mos, dentro de um documento HTML, para indicarmos qual o arquivo que contm
as regras CSS, devemos utilizar a tag link. Veja o exemplo:
Cdigo HTML 3.3: Exemplo de aplicao das regras CSS atravs de um arquivo
1 p {
2 font - size : 40 px ;
3 color : # ff0000 ;
4 }
www.facebook.com/k19treinamentos 41
CSS 42
Perceba que o efeito foi o mesmo de quando aplicamos as regras CSS atravs da tag style. Isso
se deve ao fato de estarmos utilizando a mesma regra. O que mudamos foi apenas onde a definimos.
Exerccios de Fixao
1 Dentro da pasta com o seu nome utilizada no captulo anterior, crie uma subpasta chamada
css. Novamente para facilitar, utilize apenas letras minsculas em todas as pastas e arquivos que
criarmos durante esse captulo.
42 www.k19.com.br
43 CSS
3 Para organizar melhor o contedo e a formatao da pgina criada no exerccio anterior, crie um
1 p {
2 font - weight : bold ;
3 font - size : 20 px ;
4 color : #0000 FF ;
5 }
anterior.
www.facebook.com/k19treinamentos 43
CSS 44
Seletor Corpo
p {
}
Figura 3.4: Estrutura de uma regra CSS
Podemos ler a regra acima da seguinte forma: ser atribudo o valor 40px propriedade font-size
em todos os elementos que forem selecionados pelo seletor p.
No exemplo acima, utilizamos aquilo que chamamos de seletor de tipo. Todos os elementos
p recebero as propriedades definidas no corpo da regra.
Tipos de seletores
Seletor universal
Seletor de tipo
Seletor de descendentes
Seletor de filhos
Seletor de irmo adjacente
Seletor de atributos
Seletor de id
Seletor de classe
Seletor universal
O seletor universal seleciona todos os elementos de um documento HTML.
No exemplo a seguir, faremos com que todos os elementos tenham margem igual a 0px.
1 * {
2 margin : 0 px ;
3 }
44 www.k19.com.br
45 CSS
Seletor de tipo
O seletor de tipo seleciona todos os elementos com tag igual ao tipo indicado na declarao da
regra CSS.
1 textarea {
2 border : 1 px solid red ;
3 }
Seletor de descendentes
Chamamos de seletor de descendentes a seleo de um ou mais elementos fazendo o uso de ou-
tros seletores separados por espaos. Um espao indica que os elementos selecionados pelo seletor
sua direita so filhos diretos ou indiretos dos elementos selecionados pelo seletor sua esquerda.
No exemplo a seguir iremos selecionar todos os elementos que possuem a tag input e que sejam
filhos diretos ou indiretos de elementos com a tag p.
1 p input {
2 border : 1 px solid red ;
3 }
Seletor de filhos
Chamamos de seletor de filhos a seleo de um ou mais elementos fazendo o uso de outros sele-
tores separados pelo caractere >. Um caractere > indica que os elementos selecionados pelo seletor
sua direita so filhos diretos dos elementos selecionados pelo seletor sua esquerda.
No exemplo a seguir iremos selecionar todos os elementos que possuem a tag a e que sejam filhos
diretos de elementos com a tag p.
1 p > a {
2 color : green ;
3 }
No exemplo a seguir iremos selecionar todos os elementos que possuem a tag input e que sejam
irmos e imediatamente precedidos por elementos com a tag label.
1 label + input {
2 color : green ;
www.facebook.com/k19treinamentos 45
CSS 46
3 }
Seletor de atributos
O seletor de atributos seleciona um ou mais elementos que possuam o atributo ou o atributo
juntamente com o seu valor da mesma forma como indicada pelo seletor na declarao da regra
CSS. Os atributos so informados dentro de colchetes [].
No exemplo abaixo iremos selecionar todos os elementos que possuam o atributo name igual a
cidade.
1 *[ name = cidade ] {
2 font - weight : italic ;
3 }
Se desejarmos tambm podemos informar apenas o atributo. No exemplo a seguir iremos sele-
cionar todos os elementos com a tag img que possuam o atributo title.
1 img [ title ] {
2 width : 100 px ;
3 }
Seletor de id
O seletor de id seleciona um nico elemento cujo atributo id possui o valor indicado pelo seletor
na declarao da regra CSS.
No exemplo abaixo iremos selecionar o elemento cujo atributo id possui o valor cidade. Repare
que o seletor de id comea com o caractere #.
1 # cidade {
2 font - weight : bold ;
3 }
Seletor de classe
O seletor de classe seleciona todos os elementos cujo atributo class possui o valor indicado pelo
seletor na declarao da regra CSS.
No exemplo abaixo iremos selecionar todos os elementos cujo atributo class possui o valor
ttulos. Repare que o seletor de classe comea com o caractere . (ponto).
1 . titulos {
2 font - size : 40 px ;
3 }
46 www.k19.com.br
47 CSS
Exerccios de Fixao
5 Para testar o funcionamento de alguns seletores, crie um documento html em um arquivo cha-
mado seletores.html. Alm disso, defina algumas regras de formatao em um arquivo CSS chamado
seletores.css. Salve esses arquivos na pasta css.
1 * {
2 font - family : Monaco , DejaVu Sans Mono , monospace ;
3 }
4
5 h1 {
6 color : blue ;
7 }
8
9 h3 {
10 font - size : 20 px ;
11 }
12
13 p > a {
14 font - weight : bold ;
15 text - decoration : none ;
16 }
17
18 # main - menu {
19 font - size : 18 px ;
20 list - style : none ;
21 padding : 0 px ;
22 }
23
24 # main - menu li {
25 display : inline ;
26 margin : 0 50 px 0 0;
27 }
28
29 # main - menu li a {
www.facebook.com/k19treinamentos 47
CSS 48
Cores em CSS
Tradicionalmente, as cores podem ser definidas de trs formas diferentes: pelo nome da cor, pelo va-
lor hexadecimal associado cor ou atravs da funo rgb(). Nem todas as cores possuem um nome.
Por isso, normalmente, utilizamos a forma hexadecimal ou a funo rgb().
Uma cor definida em hexadecimal da seguinte forma: #RRGGBB. Onde RR, GG e BB podem variar
de 00 a FF e representam os componentes vermelho, verde e azul de uma cor.
Para definir uma cor utilizando a funo rgb(), necessrio passar como argumento as quan-
tidades de vermelho, verde e azul necessrias para formar a cor desejada. Essas quantidade podem
ser expressas na escala de 0 a 255 ou em porcentagem. Veja os exemplos abaixo:
Mais Sobre
Em CSS3, h mais trs funes para definir uma cor: rgba(), hsl() e hsla().
A funo hsl() define as cores atravs da matiz, saturao e luminosidade (hue, satu-
ration e lightness). Essa funo possui trs parmetros hsl(H, S, L). Onde H pode variar de
0 a 360, S e L de 0% a 100%.
As funes rgba(R, G, B, A) e hsla(H, S, L, A) possuem um ltimo parmetro que sig-
nifica a opacidade da cor (alpha). Esse valor varia de 0 a 1 com passo de 0.1.
Unidades de medida
Em CSS possumos diversas unidades de medida como podemos verificar na listagem abaixo:
in - polegada.
cm - centmetro.
mm - milmetro.
em - tamanho relativo ao tamanho de fonte atual no documento. 1em igual ao tamanho da
fonte atual, 2em o dobro do tamanho da fonte atual e assim por diante.
ex - essa unidade igual altura da letra "x"minscula da fonte atual do documento.
48 www.k19.com.br
49 CSS
Propriedades de background
1 body {
2 background - attachment : fixed ;
3 background - color : # dddddd ;
4 background - image : url ( http : // www . k19 . com . br / css / img / main - header - logo . png ) ;
5 background - position : left top ;
6 background - repeat : repeat ;
7 }
8
9 div {
10 background : # dddddd url ( http : // www . k19 . com . br / css / img / main - header - logo . png )
11 no - repeat center center fixed ;
12 }
Propriedades de texto
www.facebook.com/k19treinamentos 49
CSS 50
1 p {
2 color : green ;
3 direction : rtl ;
4 letter - spacing : 10 px ;
5 line - height : 30 px ;
6 text - align : right ;
7 text - decoration : blink ;
8 text - indent : 50 px ;
9 text - transform : uppercase ;
10 vertical - align : middle ;
11 white - space : nowrap ;
12 word - spacing : 30 px ;
13 }
Propriedades de fonte
1 p {
2 font - family : sans - serif , serif , monospace ;
3 font - size : 14 px ;
4 font - style : italic ;
5 font - variant : small - caps ;
6 font - weight : bold ;
7 }
8
9 a {
10 font : italic small - caps bold 14 px /20 px sans - serif , serif , monospace ;
11 }
Propriedades de lista
1 ul {
2 list - style - image : url ( http : // www . k19 . com . br / css / img / box - dot - orange . png ) ;
3 list - style - position : inside ;
4 list - style - type : disc ;
5 }
50 www.k19.com.br
51 CSS
6
7 ol {
8 list - style : square outside
9 url ( http : // www . k19 . com . br / css / img / box - dot - orange . png ) ;
10 }
Propriedades de tabela
border-collapse - faz com que as bordas das clulas no fiquem duplicadas quando estas pos-
surem bordas.
1 table {
2 border - collapse : collapse ;
3 }
4 table , th , td {
5 border : 1 px solid blue ;
6 }
Propriedades de dimenso
1 div {
2 width : 300 px ;
3 height : 300 px ;
4 }
5
6 h1 {
7 min - width : 10 px ;
8 max - width : 300 px ;
9 min - height : 10 px ;
10 max - height : 300 px ;
11 }
Exerccios de Fixao
6 A partir de agora, o nosso objetivo formatar a pgina principal do blog da K19. Ao trmino dos
exerccios, essa pgina deve ficar igual ilustrao abaixo.
www.facebook.com/k19treinamentos 51
CSS 52
O primeiro passo criar o documento HTML com o contedo desejado. Faa um arquivo cha-
mado index.html na pasta css com o seguinte contedo.
52 www.k19.com.br
53 CSS
www.facebook.com/k19treinamentos 53
CSS 54
8 Para definir a formatao da pgina que desejamos criar, faa um arquivo chamado blog.css na
pasta css com o seguinte contedo.
1 * {
54 www.k19.com.br
55 CSS
www.facebook.com/k19treinamentos 55
CSS 56
Linhas 5 a 7: Evitamos, atravs da propriedade white-space, que uma quebra de linha dentro
do corpo do documento HTML seja interpretada como espao em branco.
Linhas 9 a 11: Definimos, atravs da propriedade width, que o contedo do blog ter uma
largura de 980px.
56 www.k19.com.br
57 CSS
www.facebook.com/k19treinamentos 57
CSS 58
Linhas 109 a 115: Definimos, atravs das propriedades background, color, text-transform
e font-size, a cor do fundo, a cor da fonte, o tipo de letra, o tamanho da fonte e largura do
boto de envio do formulrio de contato.
Linhas 117 a 121: Definimos, atravs das propriedades font-size, color e text-align, que o
o texto do rodap ter fonte de tamanho 12px, cor #999999 e alinhamento centralizado.
Box model
O termo box model utilizado para explicar o comportamento visual dos elementos HTML, pois po-
demos imaginar que cada elemento em uma pgina est envolvido por uma caixa. Essa caixa possui
trs partes: uma margem interna (padding), uma borda (border) e uma margem externa (margin).
Borda (border)
Margem interna (padding)
contedo
Um erro muito comum quando estamos comeando a aprender CSS que nos esquecemos de
considerar as dimenses das margens internas e externas no clculo das dimenses de um elemento.
Vamos pensar no seguinte caso: suponha que voc possua um espao de 300px para encaixar
um contedo dentro da sua pgina. Voc poderia incluir no HTML um elemento com a tag div e a
seguinte regra CSS:
1 div {
2 width : 300 px ;
3 padding : 10 px ;
4 margin : 10 px ;
5 border : 1 px solid green ;
6 }
Num primeiro momento pode parecer que tudo est correto, porm ao abrir a pgina voc per-
ceber que seu elemento est ultrapassando o limite dos 300px. Isso ocorre porque devemos incluir
58 www.k19.com.br
59 CSS
1 div {
2 width : 258 px ;
3 padding : 10 px ;
4 margin : 10 px ;
5 border : 1 px solid green ;
6 }
www.facebook.com/k19treinamentos 59
CSS 60
A propriedade display
Todo elemento possui uma propriedade CSS chamada display que afeta a maneira como tal
elemento ser posicionado na tela. Essa propriedade pode assumir diversos valores, sendo os prin-
cipais:
block - o elemento que tiver a propriedade display: block far com que o prximo ele-
mento seja posicionado logo abaixo e ter a largura definida pelo atributo width ou herdar
a largura do elemento que o contm. Chamamos esse tipo de elemento de elemento de bloco.
Um elemento de bloco pode conter elementos de bloco, elementos inline e elementos inline-
block.
inline - o elemento que tiver a propriedade display: inline far com que outros elementos
inline (ou inline-block) ao seu redor sejam posicionados um do lado do outro, na ordem em
que foram criados em um documento HTML. Chamamos esse tipo de elemento de elemento
inline. Um elemento inline s pode conter outros elementos inline.
inline-block - o elemento que tiver a propriedade display: inline-block far com que ou-
tros elementos inline (ou inline-block) ao seu redor sejam posicionados um do lado do outro,
na ordem em que foram criados em um documento HTML. Chamamos esse tipo de elemento
de elemento inline-block. Um elemento inline-block pode conter elementos de bloco, elemen-
tos inline e outros elementos inline-block.
Durante a aplicao do CSS em uma pgina HTML muitas vezes temos a necessidade de inserir
ou remover alguns elementos HTML afim de obtermos o resultado desejado. Isso perfeitamente
normal. Contudo, em algumas situaes esse simples remanejamento dos elementos HTML no o
suficiente.
60 www.k19.com.br
61 CSS
1 div {
2 display : inline ;
3 }
1 span {
2 display : block ;
3 }
Num primeiro momento temos a falsa impresso de que podemos utilizar essa propriedade li-
vremente sem nos preocuparmos com os valores originais da propriedade display dos elementos
HTML.
Portanto, no primeiro exemplo, ao fazermos um div se comportar como um elemento inline, esse
div no poder conter elementos de bloco. Devemos prestar ateno nesse tipo de detalhe quando
estivermos alterando as propriedades CSS de um elemento HTML.
Por outro lado, no segundo exemplo, apesar de fazermos um span se comportar como um ele-
mento de bloco, no poderemos fazer com que ele contenha elementos de bloco ou inline-block.
Isso se deve ao fato de que antes de qualquer regra CSS ser aplicada o documento j teria um erro de
validao. Alterar a propriedade display de um elemento no significa que podemos desobedecer
as regras estabelecidas na especificao do HTML.
Exerccios de Fixao
9 Continuando o exerccio anterior, altere o arquivo blog.css conforme as linhas destacadas abaixo:
1 * {
2 margin : 0;
3 padding : 0;
4 font - family : arial , sans - serif ;
5 }
6
7 body {
8 white - space : nowrap ;
9 }
10
11 # blog {
12 width : 980 px ;
13 margin : 0 auto ;
14 }
15
16 # header {
17 border - bottom : 1 px solid #074 f83 ;
18 margin : 0 0 20 px 0;
19 }
20
21 # logo - link {
22 text - decoration : none ;
23 }
www.facebook.com/k19treinamentos 61
CSS 62
24
25 # logo - link img {
26 margin : 20 px 40 px 20 px 20 px ;
27 vertical - align : bottom ;
28 }
29
30 # main - menu {
31 list - style : none ;
32 display : inline - block ;
33 }
34
35 # main - menu li {
36 display : inline - block ;
37 margin : 0 10 px 0 0;
38 }
39
40 # main - menu li a {
41 display : block ;
42 padding : 8 px 10 px 5 px 10 px ;
43 background : # cecece ;
44 color : #333333;
45 text - decoration : none ;
46
47 border - top - left - radius : 5 px ; /* CSS3 */
48 border - top - right - radius : 5 px ; /* CSS3 */
49 }
50
51 # main - menu li a . selected {
52 background : #074 f83 ;
53 color : # ffffff ;
54 }
55
56 # main - content {
57 display : inline - block ;
58 vertical - align : top ;
59 width : 660 px ;
60 color : #666666;
61 white - space : normal ;
62 }
63
64 # main - content h1 {
65 padding : 10 px ;
66 background : #074 f83 ;
67 color : # ffffff ;
68 font - size : 24 px ;
69 }
70
71 # blog - content {
72 padding : 20 px ;
73 }
74
75 # blog - content > p {
76 margin : 0 0 20 px 0;
77 }
78
79 # blog - content > table {
80 border - collapse : collapse ;
81 border : 1 px solid #5 f5f5f ;
82 margin : 0 0 20 px 0;
83 width : 100%;
84 }
85
86 # blog - content > table th ,
87 # blog - content > table td {
88 border : 1 px solid #5 f5f5f ;
89 padding : 10 px 5 px ;
90 }
91
92 # blog - content > table th {
93 color : # ffffff ;
62 www.k19.com.br
63 CSS
94 background : #5 f5f5f ;
95 }
96
97 # blog - content > table td {
98 background : # dddddd ;
99 color : #333333;
100 }
101
102 # blog - content > table td . first - col {
103 background : # a9a9a9 ;
104 }
105
106 # blog - content ul {
107 list - style - image : url ( list - bullet . png ) ;
108 margin : 0 0 0 30 px ;
109 }
110
111 # side - content {
112 display : inline - block ;
113 margin : 0 0 0 20 px ;
114 vertical - align : top ;
115 }
116
117 # ad {
118 display : block ;
119 margin : 0 0 20 px 0;
120 }
121
122 # contact - form {
123 text - align : right ;
124 }
125
126 # contact - form h3 {
127 font - size : 18 px ;
128 color : #074 f83 ;
129 text - align : left ;
130 border - bottom : 1 px solid #999999;
131 margin : 0 0 10 px 0;
132 padding : 0 0 5 px 0;
133 }
134
135 # contact - form div {
136 margin : 0 0 10 px 0;
137 text - align : left ;
138 }
139
140 # contact - form label {
141 font - size : 14 px ;
142 vertical - align : middle ;
143 color : #666666;
144 }
145
146 # contact - form input ,
147 # contact - form textarea {
148 display : block ;
149 border : 1 px solid #999999;
150 padding : 5 px ;
151 margin : 4 px 0 0 0;
152 width : 288 px ;
153 font - size : 18 px ;
154 }
155
156 # contact - form textarea {
157 height : 100 px ;
158 }
159
160 # contact - form input [ type = checkbox ] {
161 display : inline ;
162 width : auto ;
163 }
www.facebook.com/k19treinamentos 63
CSS 64
164
165 # contact - form input [ type = submit ] {
166 margin : 10 px 0 0 0;
167 border : none ;
168 padding : 10 px 20 px ;
169 display : inline ;
170 background : #074 f83 ;
171 color : # ffffff ;
172 text - transform : uppercase ;
173 font - size : 14 px ;
174 width : auto ;
175 }
176
177 # footer {
178 margin : 40 px 0 0 0;
179 padding : 10 px 0 0 0;
180 border - top : 1 px solid #999999;
181 font - size : 12 px ;
182 color : #999999;
183 text - align : center ;
184 }
Linhas 2 a 3: Definimos para todos os elementos, atravs das propriedades margin e padding,
as margens externas e internas, respectivamente.
Linha 13: Definimos, atravs da propriedade margin, a margem externa do contedo do blog.
As margens da esquerda e direita sero calculadas automaticamente.
Linhas 16 a 19: Definimos, atravs das propriedades border-bottom e margin, a borda inferior
do cabealho, assim como suas margens externas.
Linha 26: Definimos, atravs da propriedade margin, as margens externas da imagem do logo.
Linha 32: Definimos, atravs da propriedade display, a forma de exibio do menu principal.
Linhas 35 a 38: Definimos, atravs das propriedades display e margin, a forma de exibio e
as margens externas dos itens menu principal.
Linhas 41 a 42: Definimos, atravs das propriedades display e padding, a forma de exibio e
as margens internas dos links do menu principal.
Linhas 47 a 48: Definimos, atravs das propriedades border-top-left e border-top-right,
bordas arredondadas na parte superior esquerda e direita, respectivamente dos links do menu
principal (propriedades do CSS3).
Linha 57: Definimos, atravs da propriedade display, a forma de exibio do contedo prin-
cipal.
Linha 65: Definimos, atravs da propriedade padding, a margem interna dos cabealhos nvel
1 do contedo principal.
Linha 72: Definimos, atravs da propriedade padding, a margem interna do contedo do blog.
Linha 76: Definimos, atravs da propriedade margin, a margem externa dos pargrafos filhos
do contedo do blog.
Linha 80: Definimos, atravs da propriedade border-collapse, a maneira como as bordas
adjacentes das tabelas filhas do contedo do blog devem se comportar.
Linhas 81 a 82: Definimos, atravs das propriedades border e margin, a borda e margem ex-
terna das tabelas filhas do contedo do blog.
64 www.k19.com.br
65 CSS
Linhas 86 a 90: Definimos, atravs das propriedades border e padding, a borda e margem
interna dos ttulos das colunas e clulas das tabelas filhas do contedo do blog.
Linha 108: Definimos, atravs da propriedade margin, as margens externas das listas do con-
tedo do blog.
Linhas 112 a 113: Definimos, atravs das propriedades display e margin, a forma de exibio
e as margens externas do contedo lateral.
Linhas 117 a 120: Definimos, atravs das propriedades display e margin, a forma de exibio
e as margens externas da publicidade.
Linhas 130 a 132: Definimos, atravs das propriedades border-bottom, margin e padding, a
borda inferior e as margens externa e interna dos cabealhos nvel 3 do formulrio de contato.
Linha 136: Definimos, atravs da propriedade margin, a margem externa dos elementos DIV
do formulrio de contato.
Linhas 148 a 151: Definimos, atravs das propriedades display, border, margin e padding, a
forma de exibio, as bordas e as margens externas e internas dos elementos input e textarea
do formulrio de contato.
Linha 161: Definimos, atravs da propriedade display, a forma de exibio dos checkboxes
do formulrio de contato.
Linhas 166 a 169: Definimos, atravs das propriedades display, border, margin e padding, a
forma de exibio, as bordas e as margens externas e internas do boto de envio do formulrio
de contato.
Linhas 178 a 180: Definimos, atravs das propriedades border-top, margin e padding, a borda
superior e as margens externa e interna do rodap.
Posicionando elementos
Para posicionar um elemento dentro de um documento HTML o CSS possui os seguintes atributos:
right - define a distncia do lado direito do elemento em relao a outro elemento ou em rela-
o a janela.
Ao posicionarmos um elemento utilizando os atributos acima devemos nos lembrar que o sis-
tema de coordenadas dentro de um documento HTML possui a coordenada (0,0) no canto supe-
rior esquerdo de um elemento ou da janela. Tambm devemos nos lembrar que se definirmos uma
distncia para o atributo left, no devemos utilizar o atributo right. A mesma ideia vale para os
atributos top e bottom.
www.facebook.com/k19treinamentos 65
CSS 66
Posicionamento esttico
Este tipo de posicionamento, em geral, no precisa ser definido, pois o tipo de posicionamento
padro de todos os elementos. O posicionamento esttico definido atravs do atributo position
com o valor static e no afetado pelos atributos top, bottom, left e right.
Posicionamento fixo
Um elemento com posicionamento fixo posicionado em relao janela do navegador. de-
finido atravs do atributo position com o valor fixed e sua posio definida pelos atributos top,
bottom, left e/ou right.
Todos os elementos posicionados fixamente no mudam de posio mesmo quando ocorrer uma
rolagem vertical ou horizontal.
Posicionamento relativo
Um elemento com posicionamento relativo posicionado em relao sua posio original.
definido atravs do atributo position com o valor relative e sua posio definida pelos atributos
top, bottom, left e/ou right.
Posicionamento absoluto
Um elemento com posicionamento absoluto posicionado em relao um elemento ances-
tral ou janela do navegador. definido atravs do atributo position com o valor absolute e sua
posio definida pelos atributos top, bottom, left e/ou right.
Exerccios de Fixao
10 Continuando o exerccio anterior, altere o arquivo blog.css conforme as linhas destacadas abaixo:
1 * {
2 margin : 0;
3 padding : 0;
4 font - family : arial , sans - serif ;
5 }
6
7 body {
8 white - space : nowrap ;
9 }
10
11 # blog {
12 width : 980 px ;
13 margin : 0 auto ;
14 }
15
16 # header {
17 position : relative ;
18 border - bottom : 1 px solid #074 f83 ;
66 www.k19.com.br
67 CSS
19 margin : 0 0 20 px 0;
20 }
21
22 # logo - link {
23 text - decoration : none ;
24 }
25
26 # logo - link img {
27 margin : 20 px 40 px 20 px 20 px ;
28 vertical - align : bottom ;
29 }
30
31 # main - menu {
32 list - style : none ;
33 display : inline - block ;
34 }
35
36 # main - menu li {
37 display : inline - block ;
38 margin : 0 10 px 0 0;
39 }
40
41 # main - menu li a {
42 display : block ;
43 padding : 8 px 10 px 5 px 10 px ;
44 background : # cecece ;
45 color : #333333;
46 text - decoration : none ;
47
48 border - top - left - radius : 5 px ; /* CSS3 */
49 border - top - right - radius : 5 px ; /* CSS3 */
50 }
51
52 # main - menu li a . selected {
53 background : #074 f83 ;
54 color : # ffffff ;
55 }
56
57 # main - content {
58 display : inline - block ;
59 vertical - align : top ;
60 width : 660 px ;
61 color : #666666;
62 white - space : normal ;
63 }
64
65 # main - content h1 {
66 padding : 10 px ;
67 background : #074 f83 ;
68 color : # ffffff ;
69 font - size : 24 px ;
70 }
71
72 # blog - content {
73 padding : 20 px ;
74 }
75
76 # blog - content > p {
77 margin : 0 0 20 px 0;
78 }
79
80 # blog - content > table {
81 border - collapse : collapse ;
82 border : 1 px solid #5 f5f5f ;
83 margin : 0 0 20 px 0;
84 width : 100%;
85 }
86
87 # blog - content > table th ,
88 # blog - content > table td {
www.facebook.com/k19treinamentos 67
CSS 68
68 www.k19.com.br
69 CSS
159 }
160
161 # contact - form input [ type = checkbox ] {
162 display : inline ;
163 width : auto ;
164 }
165
166 # contact - form input [ type = submit ] {
167 margin : 10 px 0 0 0;
168 border : none ;
169 padding : 10 px 20 px ;
170 display : inline ;
171 background : #074 f83 ;
172 color : # ffffff ;
173 text - transform : uppercase ;
174 font - size : 14 px ;
175 width : auto ;
176 }
177
178 # footer {
179 margin : 40 px 0 0 0;
180 padding : 10 px 0 0 0;
181 border - top : 1 px solid #999999;
182 font - size : 12 px ;
183 color : #999999;
184 text - align : center ;
185 }
186
187 # login - area {
188 position : absolute ;
189 top : 0 px ;
190 right : 0 px ;
191 padding : 4 px 0;
192 }
193
194 # login - area a {
195 color : #074 F83 ;
196 }
Linhas 187 a 192: Definimos, atravs das propriedades position, top, right e padding, o tipo
de posicionamento, a distncia em relao ao topo, a distncia em relao ao lado direito e a
margem interna da rea de login.
Linhas 194 a 196: Definimos, atravs da propriedade color, a cor do link da rea de login.
Desafios
1 Observe a pgina inicial da K19. Utilizando todos os seus conhecimentos em CSS, faa uma
pgina que siga a mesma estrutura da pgina inicial da K19. No se preocupe com as cores e imagens,
no lugar das imagens da K19 voc pode usar uma imagem qualquer e escolher livremente as cores
que desejar.
www.facebook.com/k19treinamentos 69
CSS 70
70 www.k19.com.br
CAPTULO
J AVA S CRIPT
4
Para que possamos criar uma pgina que possua um comportamento e oferecer aos nossos usu-
rios um site mais interativo e dinmico, com certeza trabalharemos com a linguagem JavaScript.
Um cdigo JavaScript pode ser inserido em um documento HTML de duas formas: colocando o
cdigo JavaScript como filho de um elemento com a tag script ou utilizando o atributo src de um
elemento com a tag script no qual devemos passar o caminho relativo ou absoluto para um arquivo
que contenha o cdigo JavaScript.
1 var numero = 0;
2 var numeroComCasasDecimais = 1.405;
3 var texto = Varivel com um texto ;
4 var outroTexto = " Outra varivel com um texto " ;
5 var valorBooleano = true ;
Operadores
Para manipular os valores das variveis de um programa, devemos utilizar os operadores ofere-
cidos pela linguagem de programao adotada. A linguagem JavaScript possui diversos operadores
e os principais so categorizados da seguinte forma:
Aritmtico (+, -, *, /, %)
www.facebook.com/k19treinamentos 71
J AVA S CRIPT 72
Aritmtico
Os operadores aritmticos funcionam de forma muito semelhante aos operadores na matem-
tica. Os operadores aritmticos so:
Soma +
Subtrao -
Multiplicao *
Diviso /
Mdulo %
Importante
O mdulo de um nmero x , na matemtica, o valor numrico de x desconsiderando
o seu sinal (valor absoluto). Na matemtica expressamos o mdulo da seguinte forma:
| 2| = 2.
Importante
As operaes aritmticas em JavaScript obedecem as mesmas regras da matemtica
com relao precedncia dos operadores e parnteses. Portanto, as operaes so
resolvidas a partir dos parnteses mais internos at os mais externos, primeiro resolvemos as
multiplicaes, divises e os mdulos. Em seguida, resolvemos as adies e subtraes.
Atribuio
Nas sees anteriores, j vimos um dos operadores de atribuio, o operador = (igual). Os opera-
dores de atribuio so:
Simples =
Incremental +=
72 www.k19.com.br
73 J AVA S CRIPT
Decremental -=
Multiplicativa *=
Divisria /=
Modular %=
Como podemos observar, os operadores de atribuio, com exceo do simples (=), reduzem a
quantidade de cdigo escrito. Podemos dizer que esses operadores funcionam como atalhos para
as operaes que utilizam os operadores aritmticos.
Relacional
Muitas vezes precisamos determinar a relao entre uma varivel ou valor e outra outra varivel
ou valor. Nessas situaes, utilizamos os operadores relacionais. As operaes realizadas com os
operadores relacionais devolvem valores booleanos. Os operadores relacionais so:
Igualdade ==
Diferena !=
Menor <
Menor ou igual <=
Maior >
Maior ou igual >=
1 var valor = 2;
2 var t = false ;
3 t = ( valor == 2) ; // t = true
4 t = ( valor != 2) ; // t = false
5 t = ( valor < 2) ; // t = false
6 t = ( valor <= 2) ; // t = true
7 t = ( valor > 1) ; // t = true
8 t = ( valor >= 1) ; // t = true
www.facebook.com/k19treinamentos 73
J AVA S CRIPT 74
Lgico
A linguagem JavaScript permite verificar duas ou mais condies atravs de operadores lgicos.
Os operadores lgicos devolvem valores booleanos. Os operadores lgicos so:
E lgico &&
OU lgico ||
Controle de fluxo
if e else
O comportamento de uma aplicao pode ser influenciado por valores definidos pelos usurios.
Por exemplo, considere um sistema de cadastro de produtos. Se um usurio tenta adicionar um
produto com preo negativo, a aplicao no deve cadastrar esse produto. Caso contrrio, se o preo
no for negativo, o cadastro pode ser realizado normalmente.
Outro exemplo, quando o pagamento de um boleto realizado em uma agncia bancria, o sis-
tema do banco deve verificar a data de vencimento do boleto para aplicar ou no uma multa por
atraso.
Para verificar uma determinada condio e decidir qual bloco de instrues deve ser executado,
devemos aplicar o comando if.
1 if ( preco < 0) {
2 alert ( O preo do produto no pode ser negativo ) ;
3 } else {
4 alert ( Produto cadastrado com sucesso ) ;
5 }
O comando if permite que valores booleanos sejam testados. Se o valor passado como par-
metro para o comando if for true, o bloco do if executado. Caso contrrio, o bloco do else
executado.
O parmetro passado para o comando if deve ser um valor booleano, caso contrrio o cdigo
no compila. O comando else e o seu bloco so opcionais.
while
Em alguns casos, necessrio repetir um trecho de cdigo diversas vezes. Suponha que seja ne-
cessrio imprimir 10 vezes na pgina a mensagem: Bom Dia. Isso poderia ser realizado colocando
74 www.k19.com.br
75 J AVA S CRIPT
Se ao invs de 10 vezes fosse necessrio imprimir 100 vezes, j seriam 100 linhas iguais no cdigo
fonte. muito trabalhoso utilizar essa abordagem para solucionar esse problema.
Atravs do comando while, possvel definir quantas vezes um determinado trecho de cdigo
deve ser executado pelo computador.
1 var contador = 0;
2
3 while ( contador < 100) {
4 document . writeln ( Bom Dia ) ;
5 contador ++;
6 }
A varivel contador indica o nmero de vezes que a mensagem Bom Dia foi impressa na tela.
O operador ++ incrementa a varivel contador a cada rodada.
O parmetro do comando while tem que ser um valor booleano. Caso contrrio, ocorrer um
erro na execuo do script.
for
O comando for anlogo ao while. A diferena entre esses dois comandos que o for recebe
trs argumentos.
Exerccios de Fixao
1 Crie uma pasta chamada javascript na sua pasta de exerccios. Crie uma pgina HTML vinculada
a um arquivo JavaScript, que imprima na pgina o seu nome 100 vezes. Salve os documentos na pasta
javascript e em seguida abra o arquivo HTML no navegador.
www.facebook.com/k19treinamentos 75
J AVA S CRIPT 76
2 Crie uma pgina HTML vinculada a um arquivo JavaScript que imprima na pgina os nmeros de
1 at 100. Salve esses arquivos na pasta javascript e em seguida abra o arquivo HTML no navegador.
3 Crie um documento HTML vinculado a um documento JavaScript que percorra todos os nme-
ros de 1 at 100. Para os nmeros mpares, deve ser impresso um *, e para os nmeros pares, deve
ser impresso dois **. Veja o exemplo abaixo:
*
**
*
**
*
**
76 www.k19.com.br
77 J AVA S CRIPT
3 if ( resto == 1) {
4 document . writeln ( * ) ;
5 } else {
6 document . writeln ( ** )
7 }
8
9 document . writeln ( < br / > )
10 }
4 Crie um documento HTML vinculado a um documento JavaScript que percorra todos os nmero
de 1 at 100. Para os nmeros mltiplos de 4, imprima a palavra PI, e para os outros, imprima o
prprio nmero. Veja o exemplo abaixo:
1
2
3
PI
5
6
7
PI
Exerccios Complementares
www.facebook.com/k19treinamentos 77
J AVA S CRIPT 78
3 Crie um documento HTML vinculado a um documento JavaScript que percorra todos os nme-
ros de 1 at 60. Para os nmeros multiplo de, 3 imprima "**"; Para o restante imprima "*".
4 Crie um documento HTML vinculado a um documento JavaScript que imprima todos os nme-
ros de 1 at 80 e imprimir * no lugar de todos os nmeros mltiplos de 4 e 7.
*
**
***
****
*****
6 Crie um documento HTML vinculado a um documento JavaScript que imprima na tela vrios
tringulos de *. Observe o padro abaixo.
*
**
***
****
*
**
***
****
78 www.k19.com.br
79 J AVA S CRIPT
Funes JavaScript
Uma funo JavaScript uma sequncia de instrues JavaScript que sero executadas quando
voc cham-la atravs do seu nome.
1 function imprimeOlaMundo () {
2 document . writeln ( Ol Mundo ! ) ;
3 document . writeln ( < br / > ) ;
4 }
1 imprimeOlaMundo () ;
www.facebook.com/k19treinamentos 79
J AVA S CRIPT 80
Objetos JavaScript
Qualquer desenvolvedor acostumado com linguagens orientadas a objetos como Java e C# pode
estranhar um pouco a forma como trabalhamos com objetos em JavaScript. Apesar do JavaScript
ser uma linguagem de script baseada em prottipos, ela oferece suporte programao orientada a
objetos. Portanto, muitos dos conhecimentos que um desenvolvedor tenha adquirido com Java ou
C# com relao a orientao a objetos pode ser reaproveitado ao se programar em JavaScript.
Criando um objeto
Existe mais de uma maneira de se criar um objeto em JavaScript. A maneira mais simples pode-
mos acompanhar no cdigo abaixo:
Outra maneira de se criar um objeto utilizando a notao literal mais conhecida como JSON
(JavaScript Object Notation):
1 var contaBancaria = {
2 numero : 1234 ,
3 saldo : 1000 ,
4 deposita : function ( valor ) {
5 if ( valor > 0) {
80 www.k19.com.br
81 J AVA S CRIPT
Arrays
Os arrays em JavaScript so objetos e, portanto, possuem atributos e mtodos para nos ajudar na
manipulao de seus dados.
Declarando um array
Podemos declarar um array de trs maneiras: atravs do prottipo Array sem parmetros, atra-
vs do prottipo Array com parmetros e atravs da forma literal.
Mtodos do array
Um array possui diversos mtodos para nos auxiliar nas tarefas mais comuns quando trabalha-
mos com arrays. Os m todos so:
concat() - concatena dois ou mais arrays e retorna uma cpia ro** resultado.
indexOf() - procura por um objeto dentro do array e retorna o ndice caso o encontre.
join() - concatena todos os elementos de um array em uma string.
lastIndexOf() - procura, de trs para frente, por um objeto dentro array e retorna o ndice caso
o encontre.
pop() - remove o ltimo objeto de um array e retorna o objeto removido.
push() - adiciona um objeto no final do array e retorno o novo tamanho do array.
reverse() - inverte a ordem dos objetos de um array.
shift() - remove o primeiro objeto de um array e retorna o objeto removido.
slice() - seleciona parte de um array e retorna um copia da parte selecionada.
sort() - ordena os objetos de um array.
splice() - adiciona e/ou remove objetos de um array.
toString() - converte um array em uma string e retorna o resultado.
www.facebook.com/k19treinamentos 81
J AVA S CRIPT 82
Exerccios de Fixao
82 www.k19.com.br
83 J AVA S CRIPT
Exerccios Complementares
8 Crie um documento HTML vinculado a um documento JavaScript que crie um array com 10
nmeros sequenciais do tipo int. Feito isso, escolha duas posies deste array e aleatoriamente
troque os valores dessas duas posies. Repita essa troca 15 vezes. No final, imprima esse array.
www.facebook.com/k19treinamentos 83
J AVA S CRIPT 84
84 www.k19.com.br
APNDICE
J AVASCRIPT AVANADO
A
Objetos
Criando Objetos
Um objeto pode ser criado de forma literal. Veja o exemplo a seguir.
Um objeto pode se relacionar com outros objetos atravs de propriedades. Observe o cdigo
abaixo.
1 var formacao_java = { sigla : " K10 " , nome : " Formao Desenvolvedor Java " ,
2 cursos : [
3 { sigla : " K11 " , nome : " Orientao a Objetos em Java " } ,
4 { sigla : " K12 " , nome : " Desenvolvimento Web com JSF2 e JPA2 " } ,
5 ]
6 };
1 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
2 console . log ( curso . sigla ) ;
3 console . log ( curso [ " sigla " ]) ;
4
5 var sigla = " sigla " ;
6 console . log ( curso [ sigla ]) ;
www.facebook.com/k19treinamentos 85
J AVASCRIPT AVANADO 86
1 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
2
3 curso . sigla = " K12 " ;
4 curso . nome = " Desenvolvimento Web com JSF2 e JPA2 " ;
5
6 console . log ( curso . sigla ) ;
7 console . log ( curso . nome ) ;
Referncias
Os objetos so acessados atravs de referncias
1 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
2
3 // copiando uma referncia
4 var x = curso ;
5
6 x . sigla = " K12 " ;
7 x . nome = " Desenvolvimento Web com JSF2 e JPA2 " ;
8
9 // imprime K12
10 console . log ( curso . sigla ) ;
11
12 // imprime Desenvolvimento Web com JSF2 e JPA2
13 console . log ( curso . nome ) ;
Prottipos
Podemos criar um objeto baseado em outro objeto existente (prottipo). Para isso, podemos
utilizar a propriedade especial __proto__. Observe o cdigo abaixo.
Tambm podemos utilizar o mtodo create de Object para criar objetos baseados em objetos
existentes. Veja o exemplo abaixo.
86 www.k19.com.br
87 J AVASCRIPT AVANADO
Se uma propriedade for adicionada a um objeto, ela tambm ser adicionada a todos os objetos
que o utilizam como prottipo.
1 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
2
3 var novo_curso = Object . create ( curso ) ;
4
5 curso . carga_horaria = 36;
6
7 // imprime K11
8 console . log ( novo_curso . sigla ) ;
9
10 // imprime Orientao a Objetos em Java
11 console . log ( novo_curso . nome ) ;
12
13 // imprime 36
14 console . log ( novo_curso . carga_horaria ) ;
Cdigo Javascript A.8: Adicionando uma propriedade em um objeto que utilizado como prottipo
Por outro lado, se uma propriedade for adicionada a um objeto, ela no ser adicionada no pro-
ttipo desse objeto.
1 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
2
3 var novo_curso = Object . create ( curso ) ;
4
5 novo_curso . carga_horaria = 36;
6
7 // imprime K11
8 console . log ( curso . sigla ) ;
9
10 // imprime Orientao a Objetos em Java
11 console . log ( curso . nome ) ;
12
13 // imprime undefined
14 console . log ( curso . carga_horaria ) ;
Se o valor de uma propriedade de um objeto for modificado, os objetos que o utilizam como
prottipo podem ser afetados.
1 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
2
3 var novo_curso = Object . create ( curso ) ;
4
5 curso . sigla = " K12 " ;
6 curso . nome = " Desenvolvimento Web com JSF2 e JPA2 " ;
7
8 // imprime K12
9 console . log ( novo_curso . sigla ) ;
10
11 // imprime Desenvolvimento Web com JSF2 e JPA2
www.facebook.com/k19treinamentos 87
J AVASCRIPT AVANADO 88
Cdigo Javascript A.10: Modificando o valor de uma propriedade de um objeto que utilizado como prottipo
Por outro lado, alteraes nos valores das propriedades de um objeto no afetam o prottipo
desse objeto.
1 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
2
3 var novo_curso = Object . create ( curso ) ;
4
5 novo_curso . sigla = " K12 " ;
6 novo_curso . nome = " Desenvolvimento Web com JSF2 e JPA2 " ;
7
8 // imprime K11
9 console . log ( curso . sigla ) ;
10
11 // imprime Orientao a Objetos em Java
12 console . log ( curso . nome ) ;
Considere um objeto que foi construdo a partir de um prottipo. Se o valor de uma propriedade
herdada do prottipo for alterada nesse objeto, ela se torna independente da propriedade no prot-
tipo. Dessa forma, alteraes no valor dessa propriedade no prottipo no afetam mais o valor dela
no objeto gerado a partir do prottipo.
1 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
2
3 var novo_curso = Object . create ( curso ) ;
4
5 novo_curso . sigla = " K12 " ;
6 novo_curso . nome = " Desenvolvimento Web com JSF2 e JPA2 " ;
7
8 curso . sigla = " K21 " ;
9 curso . nome = " Persistncia com JPA2 e Hibernate " ;
10
11 // imprime K12
12 console . log ( novo_curso . sigla ) ;
13
14 // imprime Desenvolvimento Web com JSF2 e JPA2
15 console . log ( novo_curso . nome ) ;
1 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
2
3 // imprime K11
4 console . log ( curso . sigla ) ;
5
6 delete curso . sigla ;
7
8 // imprime undefined
9 console . log ( curso . sigla ) ;
88 www.k19.com.br
89 J AVASCRIPT AVANADO
1 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
2
3 // imprime true
4 console . log ( " sigla " in curso ) ;
5
6 // imprime false
7 console . log ( " carga_horaria " in curso ) ;
Exerccios de Fixao
Para executar o cdigo Javascript, devemos habilitar o console atravs do link enable.
Aps o console ter sido habilitado, podemos executar o cdigo Javascript conforme a figura abaixo.
www.facebook.com/k19treinamentos 89
J AVASCRIPT AVANADO 90
2 Crie objetos com propriedades chamadas sigla e nome. Imprima o valor dessas propriedades
atravs do console.log do Firebug.
1 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
2 console . log ( curso . sigla ) ;
3 console . log ( curso . nome ) ;
4
5 var curso2 = { sigla : " K12 " , nome : " Desenvolvimento Web com JSF2 e JPA2 " };
6 console . log ( curso2 . sigla ) ;
7 console . log ( curso2 . nome ) ;
1 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
2
3 // imprime K11
4 console . log ( curso . sigla ) ;
5
6 // imprime Orientao a Objetos em Java
7 console . log ( curso . nome ) ;
8
9 var x = curso ;
10
11 x . sigla = " K12 " ;
12 x . nome = " Desenvolvimento Web com JSF2 e JPA2 " ;
13
14 // imprime K12
15 console . log ( curso . sigla ) ;
16
17 // imprime Desenvolvimento Web com JSF2 e JPA2
18 console . log ( curso . nome ) ;
1 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
2
3 var novo_curso = Object . create ( curso ) ;
4
5 // imprime K11
6 console . log ( novo_curso . sigla ) ;
7
8 // imprime Orientao a Objetos em Java
9 console . log ( novo_curso . nome ) ;
5 Adicione uma propriedade em um objeto utilizado como prottipo e verifique que essa propri-
edade ser adicionada nos objetos criados a partir desse prottipo.
1 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
2
3 var novo_curso = Object . create ( curso ) ;
4
5 curso . carga_horaria = 36;
6
7 // imprime K11
90 www.k19.com.br
91 J AVASCRIPT AVANADO
6 Adicione uma propriedade em um objeto e verifique que o prottipo desse objeto no afetado.
1 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
2
3 var novo_curso = Object . create ( curso ) ;
4
5 novo_curso . carga_horaria = 36;
6
7 // imprime K11
8 console . log ( curso . sigla ) ;
9
10 // imprime Orientao a Objetos em Java
11 console . log ( curso . nome ) ;
12
13 // imprime undefined
14 console . log ( curso . carga_horaria ) ;
7 Altere o valor de uma propriedade de um objeto utilizado como prottipo e verifique que essa
alterao afetar os objetos criados a partir desse prottipo.
1 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
2
3 var novo_curso = Object . create ( curso ) ;
4
5 // imprime K11
6 console . log ( novo_curso . sigla ) ;
7
8 // imprime Orientao a Objetos em Java
9 console . log ( novo_curso . nome ) ;
10
11 curso . sigla = " K12 " ;
12 curso . nome = " Desenvolvimento Web com JSF2 e JPA2 " ;
13
14 // imprime K12
15 console . log ( novo_curso . sigla ) ;
16
17 // imprime Desenvolvimento Web com JSF2 e JPA2
18 console . log ( novo_curso . nome ) ;
1 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
2
3 var novo_curso = Object . create ( curso ) ;
4
www.facebook.com/k19treinamentos 91
J AVASCRIPT AVANADO 92
Exerccios Complementares
1 Crie objetos para as formaes da K19 com as propriedades sigla e nome da formao. Atravs
do console .log do FireBug, depois imprima o valor.
3 Crie um objeto com algumas propriedades. Dentro desse objeto crie um outro objeto sendo ele
um prottipo. Crie tambm propriedades nesse novo objeto. Imprima todas as propriedades criadas
e faa alteraes nos valores das propriedades no prottipo para que afetem os valores delas.
Funes
As funes em JavaScript so objetos. Voc pode armazen-las em variveis, arrays e outros ob-
jetos. Elas podem ser passadas como argumento ou devolvidas por outra funo. Veja o exemplo
abaixo.
92 www.k19.com.br
93 J AVASCRIPT AVANADO
Mtodo
Quando uma funo faz parte de um objeto, ela chamada de mtodo. Para executar um mtodo,
devemos utilizar a referncia de um objeto e passar os parmetros necessrios. Observe o cdigo
abaixo.
1 var conta = {
2 saldo : 0 ,
3 deposita : function ( valor ) {
4 this . saldo += valor ;
5 }
6 }
7
8 conta . deposita (100) ;
9 console . log ( conta . saldo ) ;
Apply
Uma funo pode ser associada momentaneamente a um objeto e executada atravs do mtodo
apply.
Arguments
Os argumentos passados na chamada de uma funo podem ser recuperados atravs do array
Arguments. Inclusive, esse array permite que os argumentos excedentes sejam acessados.
Exceptions
Quando um erro identificado no processamento de uma funo, podemos lanar uma excep-
tion para avisar que chamou a funo que houve um problema.
www.facebook.com/k19treinamentos 93
J AVASCRIPT AVANADO 94
1 var conta = {
2 saldo : 0 ,
3 deposita : function ( valor ) {
4 if ( valor <= 0) {
5 throw {
6 name : " ValorInvalido " ,
7 message : " Valores menores ou iguais a 0 no podem ser depositados "
8 }
9 } else {
10 this . saldo += valor ;
11 }
12 }
13 }
Na chamada do mtodo deposita(), podemos capturar um possvel erro com o comando try-catch.
1 try {
2 conta . deposita (0) ;
3 } catch ( e ) {
4 console . log ( e . name ) ;
5 console . log ( e . message ) ;
6 }
Exerccios de Fixao
9 Crie uma funo que multiplicar dois nmeros recebidos como parmetro e devolve o resultado.
1 var conta = {
2 saldo : 0 ,
3 deposita : function ( valor ) {
4 this . saldo += valor ;
5 }
6 }
94 www.k19.com.br
95 J AVASCRIPT AVANADO
13 Crie uma funo que soma todos os argumentos passados como parmetro.
15 Altere a lgica do mtodo deposita() para evitar que valores incorretos sejam depositados.
1 var conta = {
2 saldo : 0 ,
3 deposita : function ( valor ) {
4 if ( valor <= 0) {
5 throw {
6 name : " ValorInvalido " ,
7 message : " Valores menores ou iguais a 0 no podem ser depositados "
8 }
9 } else {
10 this . saldo += valor ;
11 }
12 }
13 }
www.facebook.com/k19treinamentos 95
J AVASCRIPT AVANADO 96
1 try {
2 conta . deposita (0) ;
3 } catch ( e ) {
4 console . log ( e . name ) ;
5 console . log ( e . message ) ;
6 }
Exerccios Complementares
4 Crie uma funo que faa a operao de diviso e aps isso execute a funo divisao().
5 Crie uma funo para a operao saque em um caixa eletrnico. Fique atento com as excees.
Feito isso, execute o mtodo saque().
6 Crie uma funo que multiplique todos os argumentos passados como parmetro. Aps isso,
execute a funo com os seguintes nmeros: 3, 6, 2, 8.
Arrays
Javascript prov um objeto com caractersticas semelhantes a um array. Para criar o objeto array,
podemos cri-lo de forma literal.
Percorrendo um Array
Para percorrer um array, podemos utilizar o comando for.
1 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " , " K31 " , " K32 " ];
2 for ( var i = 0; i < cursos . length ; i ++) {
3 console . log ( cursos [ i ]) ;
4 }
Adicionando Elementos
Para adicionar um elemento ao final do array, podemos utilizar a propriedade length.
96 www.k19.com.br
97 J AVASCRIPT AVANADO
1 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " , " K31 " , " K32 " ];
2 cursos [ cursos . length ] = " K01 " ;
3 for ( var i = 0; i < cursos . length ; i ++) {
4 console . log ( cursos [ i ]) ;
5 }
1 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " , " K31 " , " K32 " ];
2 cursos . push ( " K01 " ) ;
3 for ( var i = 0; i < cursos . length ; i ++) {
4 console . log ( cursos [ i ]) ;
5 }
Removendo Elementos
O mtodo delete() permite remover elementos de um array.
1 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " , " K31 " , " K32 " ];
2
3 delete cursos [0];
4
5 for ( var i = 0; i < cursos . length ; i ++) {
6 console . log ( cursos [ i ]) ;
7 }
O mtodo delete() deixa uma posio indefinida no array. Para corrigir este problema, o array
tem o mtodo splice(). O primeiro parmetro desse mtodo indica qual o primeiro elemento que
desejamos remover. O segundo indica quantos elementos deve ser removidos a partir do primeiro.
1 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " , " K31 " , " K32 " ];
2
3 cursos . splice (0 ,2) ;
4
5 for ( var i = 0; i < cursos . length ; i ++) {
6 console . log ( cursos [ i ]) ;
7 }
Concatenando Arrays
O mtodo concat() permite concatenar dois arrays.
www.facebook.com/k19treinamentos 97
J AVASCRIPT AVANADO 98
1 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ];
2
3 var curso = cursos . pop () ;
4 console . log ( curso ) ;
1 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ];
2
3 cursos . push ( " K23 " ) ;
4
5 for ( var i = 0; i < cursos . length ; i ++) {
6 console . log ( cursos [ i ]) ;
7 }
1 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ];
2
3 cursos . reverse () ;
4
5 for ( var i = 0; i < cursos . length ; i ++) {
6 console . log ( cursos [ i ]) ;
7 }
1 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ];
2
3 var curso = cursos . shift () ;
4
5 console . log ( " Elemento removido : " + curso ) ;
98 www.k19.com.br
99 J AVASCRIPT AVANADO
6
7 for ( var i = 0; i < cursos . length ; i ++) {
8 console . log ( cursos [ i ]) ;
9 }
1 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ];
2
3 var formacao_java = cursos . slice (0 ,2) ;
4
5 for ( var i = 0; i < formacao_java . length ; i ++) {
6 console . log ( formacao_java [ i ]) ;
7 }
1 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ];
2
3 cursos . splice (2 ,3 , " K31 " ," K32 " ) ;
4
5 for ( var i = 0; i < cursos . length ; i ++) {
6 console . log ( cursos [ i ]) ;
7 }
1 var cursos = [ " K12 " ," K21 " ," K22 " ," K23 " ];
2
3 cursos . unshift ( " K11 " ) ;
4
5 for ( var i = 0; i < cursos . length ; i ++) {
6 console . log ( cursos [ i ]) ;
7 }
www.facebook.com/k19treinamentos 99
J AVASCRIPT AVANADO 100
1 var curso = " K12 - Desenvolvimento Web com JSF2 e JPA2 " ;
2
3 console . log ( curso . slice (0 ,3) ) ;
1 var curso = " K12 - Desenvolvimento Web com JSF2 e JPA2 " ;
2 var aux = curso . split ( " -" ) ;
3
4 console . log ( aux [0]) ;
5 console . log ( aux [1]) ;
Exerccios de Fixao
1 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " , " K31 " , " K32 " ];
2 for ( var i = 0; i < cursos . length ; i ++) {
3 console . log ( cursos [ i ]) ;
4 }
100 www.k19.com.br
101 J AVASCRIPT AVANADO
1 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " , " K31 " , " K32 " ];
2
3 cursos [ cursos . length ] = " K01 " ;
4
5 for ( var i = 0; i < cursos . length ; i ++) {
6 console . log ( cursos [ i ]) ;
7 }
1 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " , " K31 " , " K32 " ];
2 cursos . push ( " K01 " ) ;
3 for ( var i = 0; i < cursos . length ; i ++) {
4 console . log ( cursos [ i ]) ;
5 }
1 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ];
2
3 var curso = cursos . pop () ;
4 console . log ( curso ) ;
1 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ];
2
3 cursos . push ( " K23 " ) ;
4
5 for ( var i = 0; i < cursos . length ; i ++) {
6 console . log ( cursos [ i ]) ;
7 }
www.facebook.com/k19treinamentos 101
J AVASCRIPT AVANADO 102
1 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ];
2
3 cursos . reverse () ;
4
5 for ( var i = 0; i < cursos . length ; i ++) {
6 console . log ( cursos [ i ]) ;
7 }
1 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ];
2
3 var curso = cursos . shift () ;
4
5 console . log ( " Elemento removido : " + curso ) ;
6
7 for ( var i = 0; i < cursos . length ; i ++) {
8 console . log ( cursos [ i ]) ;
9 }
1 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ];
2
3 var formacao_java = cursos . slice (0 ,2) ;
4
5 for ( var i = 0; i < formacao_java . length ; i ++) {
6 console . log ( formacao_java [ i ]) ;
7 }
1 var cursos = [ " K12 " ," K21 " ," K22 " ," K23 " ];
2
3 cursos . unshift ( " K11 " ) ;
4
5 for ( var i = 0; i < cursos . length ; i ++) {
6 console . log ( cursos [ i ]) ;
7 }
1 var curso = " K12 - Desenvolvimento Web com JSF2 e JPA2 " ;
2 var aux = curso . split ( " -" ) ;
3
4 console . log ( aux [0]) ;
5 console . log ( aux [1]) ;
102 www.k19.com.br
103 J AVASCRIPT AVANADO
Exerccios Complementares
7 Crie dois arrays e imprima no console do Firebug o tamanho deles e tambm imprimir todos os
elementos deste array linha a linha.
8 Crie um array com alguns valores e depois faa com que adicione um elemento no final do array
utilizando a propriedade length.
9 Altere o arquivo do exerccio anterior para adicionar elemento no final do array utilizando o
mtodo push().
11 Crie um array contendo alguns elementos e remova o ltimo elemento atravs do mtodo
pop().
13 Crie um array com alguns elementos e inverta a ordem dos elementos com o mtodo reverse().
15 Utilizando o arquivo do exerccio anterior, adicione novamente o elemento removido que estava
na primeira posio do array atravs do mtodo unshift().
16 Crie um array contendo alguns elementos e faa uma cpia de um determinado trecho do desse
array utilizando o mtodo slice().
17 Crie uma varivel contendo uma string e divida o contedo utilizando o mtodo slipt().
www.facebook.com/k19treinamentos 103
J AVASCRIPT AVANADO 104
104 www.k19.com.br
APNDICE
J Q UERY
B
Introduo
jQuery uma biblioteca de funes JavaScript. Ela foi desenvolvida para simplificar e diminuir a
quantidade de cdigo JavaScript.
Manipulao de CSS
AJAX
Para utilizar a biblioteca JavaScript jQuery, basta adicionar a referncia para o arquivo js atravs
da tag <script>. O download do arquivo js do jQuery pode ser feito atravs do seguinte endereo
http://docs.jquery.com/Downloading_jQuery. H duas opes de arquivo para download, o Mi-
nified e Uncompressed, voc pode utilizar qualquer um.
Caso voc no queira fazer o download do arquivo js do jQuery, possvel utilizar a url de al-
guma empresa que hospede o arquivo jQuery e permita o uso pblico. Empresas como o Google e
Microsoft proveem endereos para a utilizao da biblioteca jQuery.
www.facebook.com/k19treinamentos 105
J Q UERY 106
Sintaxe
A sintaxe da biblioteca jQuery permite facilmente selecionar elementos HTML e executar alguma
ao sobre eles.
Mais Sobre
O mtodo de fabricao um padro de projeto de criao. Para saber
mais sobre padres de projeto, confira a apostila de Design Patterns da
K19 atravs do endereo http://www.k19.com.br/downloads/apostilas/java/
k19-k51-design-patterns-em-java.
Exemplos:
Seletores
O jQuery suporta os seletores CSS existentes mais os seus prprios seletores. Para conferir os
seletores CSS existentes, acesse: http://www.w3.org/community/webed/wiki/CSS/Selectors.
Para selecionar um conjunto ou apenas um elemento HTML, a sintaxe utilizada contm o prefixo
$ e os parnteses (): $().
106 www.k19.com.br
107 J Q UERY
Exemplo:
Exerccios de Fixao
www.facebook.com/k19treinamentos 107
J Q UERY 108
4 Altere o arquivo seletores.html para que os campos cuja classe curso tenha o valor igual a
K19.
5 Altere o exerccio anterior, para selecionar os elementos cujo atributo name comece com a pala-
vra formacao seguida de trao (-).
108 www.k19.com.br
109 J Q UERY
Exerccios Complementares
1 Crie um outro arquivo HTML chamado seletores-2.html na pasta seletores. Utilize a biblio-
teca JavaScript JQuery e adicione no mnimo 5 nomes com 5 classes.
2 Altere o arquivo seletores-2.html para que os campos cuja classe "Gerente"mude para um
valor igual a "Instrutor da K19".
3 Altere o arquivo seletores-2.html para selecionar os elementos cujo atributo name comece
com vogais.
Eventos
Para registrar os eventos, podemos utilizar os seletores do jQuery visto na seo anterior.
No exemplo acima, registramos todos os elementos <li> com o evento de clique. Quando o usu-
rio clicar no elemento <li>, devemos definir uma funo que ser chamada, a esta funo damos o
nome de funo de callback.
www.facebook.com/k19treinamentos 109
J Q UERY 110
1 function () {
2 alert ( " Elemento li clicado : " + $ ( this ) . text () ) ; $
3 }
Evento Descrio
$(document).ready(funo de A funo de callback chamada quando o DOM car-
callback...) regado por completo
$(seletor).click(funo de A funo de callback ser chamada quando o usurio
callback...) clicar no elementos selecionados
$(seletor).dblclick(funo A funo de callback ser chamada quando o usurio
de callback...) clicar 2X (duas) vezes nos elementos selecionados
$(seletor).focus(funo de A funo de callback ser chamada quando o foco es-
callback...) tiver nos elementos selecionados
$(seletor).change(funo de A funo de callback ser chamada quando o usurio
callback...) alterar o valor dos elementos selecionados
Exerccios de Fixao
7 Crie uma pasta eventos dentro da pasta com o seu nome que foi criada na rea de Trabalho.
110 www.k19.com.br
111 J Q UERY
9 Altere o arquivo eventos.html para adicionar o evento de clique aos elementos <li>. Quando
o usurio clicar dever ser mostrado uma mensagem de alerta com o contedo do elemento cli-
cado.
10 Altere o exerccio anterior para mostrar a mensagem de alerta aps o usurio efetuar um duplo
clique.
www.facebook.com/k19treinamentos 111
J Q UERY 112
11 Altere o exerccio anterior e altere o contedo de todos os elementos <li> aps o carregamento
completo do DOM.
12 Altere o arquivo eventos.html e adicione uma caixa de seleo de cursos. Caso o usurio escolha
um curso, mostre uma mensagem de alerta indicando o curso escolhido.
Exerccios Complementares
112 www.k19.com.br
113 J Q UERY
5 Crie um outro arquivo HTML chamado eventos-2.html na pasta eventos, utilizando a biblio-
teca JavaScript JQuery. Nesse arquivo, crie uma lista ordenada contendo o nome das formaes
da K19.
6 Altere o arquivo eventos-2.html para adicionar o evento de clique aos elementos <li>. Com
esse evento, mostre o alerta com a mensagem do contedo do elemento clicado.
7 Altere o arquivo eventos-2.html para adicionar o evento de alerta aps o duplo clique no ele-
mento selecionado.
8 No arquivo eventos-2.html, faa as alteraes necessrias para que contenha uma caixa de
seleo das formaes da K19. Quando uma formao for escolhida, mostre uma mensagem de
alerta indicando o nome da formao desejada.
Efeitos
A biblioteca jQuery contm vrios mtodos para adicionar animao para a pgina web.
Com o jQuery voc pode ocultar elementos da pgina ou torn-los visveis atravs dos mtodos
hide e show.
www.facebook.com/k19treinamentos 113
J Q UERY 114
jQuery Toggle
O mtodo jQuery Toggle altera a visibilidade dos elementos atravs dos mtodos show e hide.
jQuery Fade
O jQuery fade altera a opacidade dos elementos HTML. Os mtodos fade do jQuery so trs:
$(seletor).fadeIn(speed,callback)
$(seletor).fadeOut(speed,callback)
$(seletor).fadeTo(speed,opacidade,callback)
O primeiro parmetro speed aceita os seguintes valores: "slow", "fast", "normal"ou milissegun-
dos.
O parmetro callback define a funo que ser chamada aps o evento de slide terminar.
114 www.k19.com.br
115 J Q UERY
jQuery Slide
O jQuery Slide permite alterarmos a altura dos elementos HTML. O jQuery Slide tem 3 (trs)
mtodos:
$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)
O primeiro parmetro speed aceita os seguintes valores: "slow", "fast", "normal"ou milissegun-
dos.
O parmetro callback define a funo que ser chamada aps o evento de slide terminar.
Exerccios de Fixao
www.facebook.com/k19treinamentos 115
J Q UERY 116
15 Altere o arquivo efeitos.html e adicione botes para ocultar e mostrar os elementos <li> da
pgina.
16 Altere o exerccio anterior e adicione um boto que mostra os elementos <li> ocultos e oculta os
116 www.k19.com.br
117 J Q UERY
17 Altere o exerccio anterior para ocultar e mostrar os elementos <li> atravs dos mtodos do
jQuery que alteram a opacidade.
Exerccios Complementares
www.facebook.com/k19treinamentos 117
J Q UERY 118
9 Altere o exerccio anterior e acrescente um boto para diminuir a opacidade dos elementos <li>
para 0.2.
10 Altere o arquivo efeitos.html para ocultar e mostrar os elementos alterando a altura deles.
11 Altere o arquivo efeitos.html e adicione um boto que oculta os elementos <li> visveis e
mostra os elementos <li> ocultos. Para mostrar e ocultar, utilize o mtodo do jQuery que altera a
altura dos elementos.
12 Crie um outro arquivo HTML na pasta efeitos e crie uma lista ordenada com as formaes da
K19. Faa as alteraes necessrias para adicionar botes para ocultar e mostrar os elementos que
esto no <li>.
13 No arquivo criado anteriormente, altere os elementos <li> para ocultar e mostrar atravs do
mtodo de fade-in/fade-out.
HTML
A biblioteca jQuery contm mtodos para alterar e manipular os elementos HTML da pgina.
Para alterar o contedo dos elementos HTML da pgina, podemos usar o mtodo html().
118 www.k19.com.br
119 J Q UERY
Para adicionar o contedo antes ou depois dos elementos HTML, podemos utilizar os mtodos
after() e before().
Para uma lista completa de mtodos para manipular e alterar elementos HTML com o jQuery,
acesse http://api.jquery.com/category/manipulation/.
Exerccios de Fixao
www.facebook.com/k19treinamentos 119
J Q UERY 120
20 Altere o arquivo html.html e adicione um boto alterar o contedo do elemento <p> para Trei-
namentos da K19.
21 Altere o arquivo html.html e adicione botes para adicionar contedo antes e depois do con-
22 Altere o exerccio anterior para adicionar o contedo antes e depois do elemento <p>.
120 www.k19.com.br
121 J Q UERY
Exerccios Complementares
14 Crie um outro arquivo HTML chamado html-2.html na pasta html contendo a biblioteca
JavaScript JQuery. Nesse arquivo, coloque um elemento contendo uma frase qualquer. Aps isso,
adicione um boto para alterar o contedo desse elemento para "K19 Treinamentos."
15 Faa alteraes no arquivo do exerccio anterior para criar dois botes que quando clicados
adicionam um texto como contedo. Crie um antes e outro depois do elemento criado. Dica: no
necessrio apagar o boto criado anteriormente.
16 Altere no arquivo html-2.html para adicionar o contedo antes e depois do elemento <p>.
www.facebook.com/k19treinamentos 121
J Q UERY 122
122 www.k19.com.br
APNDICE
HTML5
C
O HTML5 uma linguagem utilizada para apresentar e estruturar o contedo de pginas web.
Trata-se da quinta verso da linguagem HTML e com ela vieram diversas mudanas como novas tags,
novos atributos e novas APIs. As diferenas com relao verso anterior no ficam presas apenas
quilo que novo, pois muito daquilo que j existia tambm foi alterado. Algumas tags tiveram sua
semntica alterada e algumas propriedades deixaram de existir, por exemplo.
Com relao a sintaxe do HTML5, podemos seguir o padro do HTML ou do XHTML, porm no
podemos mistur-los em um mesmo documento.
1 <? xml version = " 1.0 " encoding = " ISO -8859 -1 " ? >
2 <! DOCTYPE html >
3 < html xmlns = " http :// www . w3 . org /1999/ xhtml " >
4 < head >
5 < meta charset = " ISO -8859 -1 " / >
6 </ head >
7 < body >
8 ...
9 </ body >
10 </ html >
Lembre-se
A linha destacada no exemplo do uso da sintaxe XHTML necessria apenas quando
o encode do documento for diferente de UTF-8. Quando o encode for UTF-8 o W3C
recomenda que essa linha seja omitida.
Importante
Documentos HTML5 que utilizarem a sintaxe HTML devero ser transmitidos com o
Content-Type text/html enquanto que os que utilizarem a sintaxe XHTML devero
ser transmitidos com o Content-Type application/xhtml+xml.
www.facebook.com/k19treinamentos 123
HTML5 124
article
section
Representa uma seo genrica de um documento. Neste contexto, uma seo o agrupamento
de um contedo dentro de um tema que, normalmente, possui um cabealho.
124 www.k19.com.br
125 HTML5
header
footer
www.facebook.com/k19treinamentos 125
HTML5 126
20
21 < footer >© ;2013 K19 Treinamentos . </ footer >
22 </ body >
23 </ html >
nav
A tag nav representa uma seo da pgina que contm links para outras pginas ou para outras
partes do documento, ou seja, uma seo com links de navegao.
aside
O elemento aside representa uma seo que consiste em um contedo que esteja tangencial-
mente relacionado ao contedo que est sua volta. Essa seo frequentemente representada
como uma coluna lateral em relao ao contedo principal de uma pgina.
126 www.k19.com.br
127 HTML5
figure
Pode ser utilizado para exibir ilustraes, diagramas, fotos, vdeos, cdigos fonte, etc, que so re-
ferenciados no contedo principal do documento, porm podem, sem afetar o fluxo do documento,
ser removidas do contedo principal e colocadas, por exemplo, como anotaes no canto da pgina
ou em forma de apndice.
figcaption
A tag figcaption deve ser filha de um elemento figure e representa a legenda para o resto do
contedo do elemento pai. Alm disso, a tag figcaption deve aparecer como primeira ou ltima
filha de um elemento figure.
www.facebook.com/k19treinamentos 127
HTML5 128
22 Sed sed quam nisi , cursus sodales metus . Curabitur dapibus , massa sed -
sollicitudin viverra ,
23 odio justo dignissim metus , vel tempor turpis neque id erat . Aenean fermentum -
ultricies
24 ante a luctus . </ p >
25
26 < figure >
27 < img src = " # " title = " Aenean fermentum " alt = " Mauris convallis , leo sollicitudin " -
>
28 < figcaption > Figura 3 b . Curabitur dapibus , massa sed sollicitudin . </ figcaption >
29 </ figure >
30
31 <p > Mauris fermentum lorem nec nisi euismod elementum . Aenean nec magna dolor , -
vel fermentum
32 turpis . Mauris convallis , leo sollicitudin egestas malesuada , nunc est ultrices -
enim , eget
33 varius odio felis et velit . Sed ac lorem nibh , ut convallis ante . </ p >
34 </ section >
35
36 < footer >© ;2013 K19 Treinamentos . </ footer >
37 </ body >
38 </ html >
128 www.k19.com.br
APNDICE
CSS3
D
A terceira verso da especificao do CSS, normalmente referida como CSS3, traz novos recursos
que facilitar a vida dos desenvolvedores front-end.
Criar bordas arredondadas, aplicar sombra ou rotacionar elementos HTML e usar fontes dife-
rentes em textos sempre foi uma tarefa trabalhosa que, quando possvel resolver apenas em cdigo,
necessitava muito cdigo JavaScript ou gambiarras em CSS.
Neste captulo iremos abordar algumas das novas propriedades introduzidas pelo CSS3. Deve-
mos nos lembrar que, assim como o HTML5, a especificao do CSS3 ainda no foi concluda, por-
tanto qualquer recurso do CSS3 deve ser usado com cuidado para evitar resultados inesperados em
diferentes navegadores.
Bordas arredondadas
1 # main {
2 border - radius : 10 px ;
3 }
4
5 # menu {
6 border - radius : 10 px 20 px ;
7 }
8
9 # side {
10 border - radius : 40 px 30 px 20 px 10 px ;
11 }
No exemplo acima, o elemento #main ter bordas arredondadas com 10 pixels de raio nos quatro
cantos.
O elemento #menu ter bordas arredondadas com 10 pixels de raio no canto superior esquerdo,
assim como no canto inferior direito. No canto superior direito e no canto inferior esquerdo o ele-
mento ter bordas arredondadas com 20 pixels de raio.
O elemento #side ter bordas arredondadas com 40 pixels de raio no canto superior esquerdo,
30 pixels de raio no canto superior direito, 20 pixels de raio no canto inferior direito e 10 pixels no
canto inferior esquerdo.
Alm da propriedade border-radius, o CSS3 nos oferece as propriedades da lista abaixo para
ajustar o raio da borda de cada um dos cantos de um elemento de maineira independente:
www.facebook.com/k19treinamentos 129
CSS3 130
1 # content {
2 border - top - left - radius : 10 px ;
3 border - top - right - radius : 20 px 10 px ; /* 20 px na horizontal e 10 px na vertical */
4 }
10px 20px
10px
10px
#content
Sombras
No CSS3 existem dois tipos de sombras: a sombra que aplicada caixa do elemento e a sombra
que aplicada no texto de um elemento.
box-shadow
A propriedade box-shadow responsvel por aplicar uma sombra na parte externa ou interna
da caixa de um elemento. A caixa limitada pelo retngulo definido pela borda do elemento
de acordo com o box model. Alm disso, o valor da propriedade pode ser definido de diversas ma-
neiras. Confira a ilustrao abaixo na qual mostramos como atribuir um valor para a propriedade
box-shadow.
130 www.k19.com.br
131 CSS3
Deslocamento horizontal
#a {
box-shadow: 10px 10px #7f7f7f; #a
}
Deslocamento vertical
Deslocamento horizontal
Desfocamento
#b {
box-shadow: 10px 10px 10px #7f7f7f; #b
}
Deslocamento vertical
Deslocamento horizontal
Propagao
Desfocamento
#c {
box-shadow: 10px 10px 0 10px #7f7f7f; #c
}
Deslocamento vertical
Os valores para os deslocamentos vertical e horizontal podem assumir valores negativos fazendo
com que a sombra seja projetada para cima e para a esquerda.
1 #a {
2 box - shadow : 10 px 10 px #000000;
3 }
4
5 #b {
6 box - shadow : 10 px 10 px 10 px #000000;
7 }
8
9 #c {
10 box - shadow : 10 px 10 px 0 10 px #000000;
11 }
12
13 #d {
14 box - shadow : -10 px -10 px #000000;
15 }
16
www.facebook.com/k19treinamentos 131
CSS3 132
17 #e {
18 box - shadow : -10 px -10 px 10 px #000000;
19 }
20
21 #f {
22 box - shadow : -10 px -10 px 0 10 px #000000;
23 }
24
25 #g {
26 box - shadow : 0 0 10 px #000000;
27 }
28
29 #h {
30 box - shadow : 0 0 10 px 10 px #000000;
31 }
Cdigo CSS D.3: Exemplos de uso da propriedade box-shadow para sombra externa
As regras para a aplicao da sombra interna so as mesmas da sombra externa. A nica diferena
que devemos comear a atribuio do valor com a palavra inset.
132 www.k19.com.br
133 CSS3
Deslocamento horizontal
Deslocamento vertical
#a {
box-shadow: inset 10px 10px #000000;
} #a
Deslocamento horizontal
Deslocamento vertical
#b {
box-shadow: inset 10px 10px 10px #000000;
} #b
Desfocamento
Deslocamento horizontal
Deslocamento vertical
#c {
box-shadow: inset 10px 10px 0 10px #000000;
}
Desfocamento
#c
Propagao
Observe no cdigo CSS abaixo valores aplicados na propriedade box-shadow para criar sombras
internas.
1 #a {
2 box - shadow : inset 10 px 10 px #000000;
3 }
4
5 #b {
6 box - shadow : inset 10 px 10 px 10 px #000000;
7 }
8
9 #c {
10 box - shadow : inset 10 px 10 px 0 10 px #000000;
11 }
12
13 #d {
14 box - shadow : inset -10 px -10 px #000000;
15 }
16
17 #e {
18 box - shadow : inset -10 px -10 px 10 px #000000;
www.facebook.com/k19treinamentos 133
CSS3 134
19 }
20
21 #f {
22 box - shadow : inset -10 px -10 px 0 10 px #000000;
23 }
24
25 #g {
26 box - shadow : inset 0 0 10 px #000000;
27 }
28
29 #h {
30 box - shadow : inset 0 0 10 px 10 px #000000;
31 }
Cdigo CSS D.4: Exemplos de uso da propriedade box-shadow para sombra interna
text-shadow
Para aplicarmos uma sombra no texto de um elemento devemos utilizar a propriedade text-shadow.
O seu funcionamento muito semelhante ao da propriedade box-shadow, exceto pelo fato que no
podemos criar uma sombra interna e no existe o parmetro de propagao da sombra.
1 #a {
2 text - shadow : 10 px 10 px # ff0000 ;
3 }
4
134 www.k19.com.br
135 CSS3
5 #b {
6 text - shadow : 10 px 10 px 10 px # ff0000 ;
7 }
8
9 #c {
10 text - shadow : -10 px -10 px # ff0000 ;
11 }
12
13 #d {
14 text - shadow : -10 px -10 px 10 px # ff0000 ;
15 }
16
17 #e {
18 text - shadow : 0 0 10 px # ff0000 ;
19 }
Cdigo CSS D.5: Exemplos de uso da propriedade text-shadow para sombra de texto
Mais Sobre
As propriedades box-shadow e text-shadow podem receber valores para definir mais
de uma sombra. Para isso devemos separar os valores por vrgula. Observe o exemplo:
www.facebook.com/k19treinamentos 135
CSS3 136
Transformaes
No CSS3 foram introduzidas algumas funes para realizar as transformaes de translado, es-
calonamento, distoro e rotao nos elementos de uma pgina HTML. Essas funes so utilizadas
em conjunto com a propriedade transform do CSS3.
translate()
136 www.k19.com.br
137 CSS3
transform: translate( m , n );
Original
Transladado
scale()
transform: scale( m , n );
w* m Original
w Escalonado
h
h* n
rotate()
www.facebook.com/k19treinamentos 137
CSS3 138
transform: rotate( m );
Original
m Rotacionado
skew()
A funo skew(m, n) distorcer um elemento em relao aos eixos x e y. m e n definem as distor-
es aplicadas nos eixos x e y respectivamente. Os valores de m e n devem ser dados em graus, voltas
ou grado.
transform: skew( m , n );
Original
Destorcido
Fontes no CSS3
Antes do CSS3 os webdesigners estavam limitados a utilizarem apenas as fontes disponveis nos
computadores dos usurios. Quando era necessrio utilizar alguma fonte diferente o webdesigner
precisava recorrer a alguma tcnica como Cufn (Custom Font) ou sIFR (Scalable Inman Flash Re-
placement).
Durante muito tempo essas tcnicas foram amplamente utilizadas por trazerem uma liberdade
muito maior para os designers no momento da elaborao da parte artstica de uma pgina. Porm,
essa flexibilidade tinha o seu preo: exigiam um pouco mais de processamento e/ou o uso de plugins
de terceiros no momento da renderizao da pgina. Alm disso, tais tcnicas no apresentavam
138 www.k19.com.br
139 CSS3
resultados muito satisfatrios quando era necessrio exibir uma grande quantidade de texto com a
fonte escolhida.
@font-face
A regra @font-face nos permite ativar automaticamente uma fonte quando ela necessria. A
fonte pode estar um arquivo local (mquina do usurio) ou remoto (servidor). Veja o exemplo abaixo.
1 @font - face {
2 font - family : NomeDaFonte ;
3 src : url ( nome - da - fonte . eot ) ;
4 src : url ( nome - da - fonte . eot ?# iefix ) format ( embedded - opentype ) ,
5 url ( nome - da - fonte . woff ) format ( woff ) ,
6 url ( nome - da - fonte . ttf ) format ( truetype ) ,
7 url ( nome - da - fonte . svg # webfontregular ) format ( svg ) ;
8 }
Os formatos de fontes para os quais os navegadores oferecem suporte variam de navegador para
navegador. Por isso, o cdigo do exemplo acima possui diversas declaraes para a mesma fonte.
Cada declarao vlida para um grupo diferente de navegadores.
Linhas 3 4: Internet Explorer 6 9. ?#iefix um Hack CSS para que no Internet Explorer 6 o
restante do valor atribudo propriedade src seja ignorado. Alm disso, o charactere # desse
Hack CSS evita que falhas devido ao excesso de caracteres possam ocorrer.
Linha 5: formato utilizado por todas as verses dos navegadores mais modernos. o formato
recomendado pelo W3C.
Linha 6: formato aceito nos navegadores Firefox, Chrome, Safari e Opera. Usado tambm nos
navegadores padro dos sistemas Android e iOS.
Linha 7: formato aceito no navegador padro dos sistemas iOS mais antigos.
A funo url() deve ser utilizada quando queremos utilizar uma fonte que est armazenada
remotamente (no servidor). Caso queiramos carregar uma fonte disponvel na mquina do usurio,
devemos utilizar a funo local(), passando como parmetro o nome da fonte desejada.
1 @font - face {
2 font - family : NomeDaFonte ;
3 src : local ( nome - da - fonte ) ;
4 }
Para utilizarmos as fontes definidas na regra @font-face devemos utilizar a propriedade font-family
dentro de uma regra CSS.
1 @font - face {
2 font - family : MinhaFonteBacana ;
3 src : url ( minha - fonte - bacana . eot ) ;
4 src : url ( minha - fonte - bacana . eot ?# iefix ) format ( embedded - opentype ) ,
5 url ( minha - fonte - bacana . woff ) format ( woff ) ,
6 url ( minha - fonte - bacana . ttf ) format ( truetype ) ,
7 url ( minha - fonte - bacana . svg # webfontregular ) format ( svg ) ;
8 }
9
10 p {
www.facebook.com/k19treinamentos 139
CSS3 140
140 www.k19.com.br
APNDICE
M AIS P ROPRIEDADES CSS
E
Propriedades de tabela
border-spacing
A propriedade border-spacing define a distncia entre as bordas das clulas de uma tabela,
assim como a distncia entre a borda de uma clula e a borda da prpria tabela. Veja o exemplo
abaixo.
1 table {
2 border - collapse : separate ;
3 border - spacing : 10 px ;
4 }
Tambm podemos definir valores diferentes para o espaamento horizontal e vertical, como po-
demos verificar no exemlo a seguir.
1 table {
2 border - collapse : separate ;
3 border - spacing : 10 px 20 px ;
4 }
caption-side
A propriedade caption-side define em que posio a legenda de uma tabela dever aparecer.
Por padro, a propriedade caption-side possui o valor top, fazendo com que a legenda fique na
parte superior da tabela. O valor bottom faz com que a legenda fique na parte inferior da tabela. Veja
o exemplo abaixo.
1 caption {
2 caption - side : bottom ;
3 }
empty-cells
A propriedade empty-cells define se uma clula vazia da tabela deve ser exibida ou no. Por
padro, a propriedade empty-cells possui o valor show. Para que uma clula vazia no seja exibida
devemos atribuir o valor hide. Veja o exemplo abaixo.
www.facebook.com/k19treinamentos 141
M AIS P ROPRIEDADES CSS 142
1 ...
2 < table >
3 < tr >
4 < th > Nome </ th >
5 < th >E - mail </ th >
6 </ tr >
7 < tr >
8 < td > Jonas </ td >
9 < td > jonas@k19 . com . br </ td >
10 </ tr >
11 < tr >
12 < td > Jundy </ td >
13 < td > </ td >
14 </ tr >
15 </ table >
16 ...
1 table {
2 border : 1 px solid black ;
3 border - collapse : separate ;
4 empty - cells : hide ;
5 }
6
7 table th , table td {
8 border : 1 px solid black ;
9 }
Propriedades de borda
1 div {
2 border : 1 px solid red ;
3 }
4
5 p {
6 border - width : 1 px ;
7 border - style : solid ;
8 border - color : red ;
9 }
Ao utilizarmos as variantes podemos definir valores diferentes para cada um dos lados do ele-
mento. Veja o exemplo a seguir.
1 p {
2 border - width : 1 px 2 px 3 px 4 px ;
3 border - style : solid dotted double dashed ;
4 border - color : red blue green yellow ;
5 }
Cdigo CSS E.6: Variantes da propriedade border com valores diferentes para cada lado do elemento
142 www.k19.com.br
143 M AIS P ROPRIEDADES CSS
border-top
border-top-color
border-top-style
border-top-width
border-right
border-right-color
border-right-style
border-right-width
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-left
border-left-color
border-left-style
border-left-width
content
A propriedade content deve ser utilizada em conjunto com os pseudo-elementos :before ou
:after para inserir um contedo qualquer antes ou depois do contedo do elemento. Podemos
utilizar a propriedade da seguinte maneira:
1 ...
2 <a href = " http :// www . k19 . com . br " > K19 Treinamentos </ a >
3 ...
1 a : after
2 {
3 content : " ( clique para conhecer a empresa ) " ;
4 }
No exemplo acima, o texto do link aps a renderizao da pgina seria: K19 Treinamentos (cli-
que para conhecer a empresa).
www.facebook.com/k19treinamentos 143
M AIS P ROPRIEDADES CSS 144
counter-increment e counter-reset
A propriedade counter-increment incrementa um ou mais valores de um contador. Essa pro-
priedade normalmente trabalha em conjunto com as propriedades counter-reset e content. Veja
o exemplo abaixo:
1 body {
2 counter - reset : secao ;
3 }
4
5 h1 {
6 counter - reset : subsecao ;
7 }
8
9 h2 : before {
10 counter - increment : subsecao ;
11 content : counter ( secao ) " . " counter ( subsecao ) " " ;
12 }
Repare que no exemplo acima a funo counter() do CSS foi utilizada para obtermos os valores
dos contadores secao e subsecao. Alm disso, observe que temos uma regra para o elemento h1
que zera o contador subsecao atravs da propriedade counter-reset. Portanto, toda vez que um
elemento h1 aparecer no cdigo HTML o contador subsecao ser zerado.
Propriedades de posicionamento
float
A propriedade float faz com que um elemento tenha um posicionamento flutuante em relao
ao contedo ao seu redor. Essa propriedade pode assumir os valroes right, left e none. Veja o exemplo
abaixo.
1 img {
2 float : right ;
3 }
No exemplo acima, qualquer elemento que for definido no cdigo HTML aps um elemento img
ser posicionado esquerda da imagem. Isso se deve ao fato da imagem estar flutuando direita
do contedo.
clear
O elemento com a propriedade clear faz com que os elementos com a propriedade float de-
finidos anteriormente a ele no cdigo HTML percam o comportamento de elementos flutuantes.
Se a propriedade assumir o valor left, apenas os elementos com float: left perdero o com-
portamento flutuante. Se a propriedade assumir o valor right, apenas os elementos com float:
right perdero o comportamento flutuante.
Alm dos valores left e right, a propriedade clear pode assumir o valor both, o que far com
que os elementos anterirormente definidos com a propriedade float: left e/ou float: right
144 www.k19.com.br
145 M AIS P ROPRIEDADES CSS
A propriedade clear aceita e tem como padro o valor none, que no afeta o comportamento
flutuante dos elementos anteriormente definidos.
1 ...
2 < img src = " imagem . jpg " / >
3 <p > Texto de exemplo </ p >
4 <p class = " clear " > Outro texto </ p >
5 ...
1 img {
2 float : right ;
3 }
4
5 p . clear {
6 clear : both ;
7 }
cursor
A propriedade cursor, define o tipo do cursor que ser mostrado quando se passa o mouse por
cima de um elemento. A propriedade pode assumir os seguintes valores: auto, crosshair, default, e-
resize, help, move, n-resize, ne-resize, nw-resize, pointer, progress, s-resize, se-resize, sw-resize, text,
w-resize e wait. Veja o exemplo abaixo.
1 div {
2 cursor : text ;
3 }
overflow
A propriedade overflow define o que deve acontecer quando o contedo for maior que o limite
da caixa do elemento que o contm. Os valores que a propriedade pode assumir so:
visible (padro): o contedo do elemento exibido mesmo que ele ultrapasse os limites do
elemento no qual est contido.
hidden: a parte excedente do contedo no ficar visvel.
scroll: no elemento aparecero barras de rolagem.
auto: no elemento aparecero barras de rolagem para que seja possvel ver todo o contedo,
caso o contedo seja maior que o elemento.
1 div {
2 width :150 px ;
3 height :150 px ;
4 overflow : scroll ;
5 }
www.facebook.com/k19treinamentos 145
M AIS P ROPRIEDADES CSS 146
visibility
A propriedade visibility define se um elemento est visvel ou no, podendo assumir os valo-
res visible, hidden ou collapse, sendo o ltimo vlido apenas para elementos de tabela.
Ao utilizar a propriedade visibility com o valor hidden, repare que apesar do elemento no
ser exibido seu espao continua sendo ocupado.
1 h2 {
2 visibility : hidden ;
3 }
z-index
A propriedade z-index especifica a ordem de empilhamento de um elemento. O elemento com
um valor maior de empilhamento, sempre estar na frente de um elemento com menor valor. Essa
propriedade somente vlida para elementos posicionados atravs da propriedade position com
os valores absolute, relative ou fixed. Veja o exemplo abaixo.
1 img {
2 position : absolute ;
3 left :0 px ;
4 top :0 px ;
5 z - index : 1;
6 }
7
8 img . layer1 {
9 top : 2 px ;
10 left : 2 px ;
11 z - index : 2;
12 }
146 www.k19.com.br
APNDICE
Q UIZZES
F
Quiz 1
Considere uma pgina HTML contendo um <div> com largura (width) 200px, margem
interna (padding) 10px e borda de 3px. Visualmente, qual o espao horizontal ocupado por
esse elemento?
a) 200px
b) 203px
c) 210px
d) 213px
e) 226px
De acordo com o Box Model do CSS visto no Captulo 3, ao atribuirmos margens internas e bor-
das em um elemento com largura definida fazemos com que, visualmente, a largura ocupada por
esse elemento seja a soma das propriedades width, padding-left, padding-right, border-
left e border-right. Como utilizamos a propriedade padding com o valor 10px para definir
as margens internas, podemos considerar que temos 10px nas propriedades padding-left e
padding-right. A mesma idia se aplica propriedade border, portanto temos border-left
e border-right com 3px cada.
Fazendo a soma temos: 200px (width) + 10px (padding-left) + 10px (padding-right) + 3px (border-
left) + 3px (border-right) = 226px
www.facebook.com/k19treinamentos 147
QUIZZES 148
148 www.k19.com.br
APNDICE
R ESPOSTAS
G
Resposta do Exercise 2.1
www.facebook.com/k19treinamentos 149
R ESPOSTAS 150
150 www.k19.com.br
151 R ESPOSTAS
www.facebook.com/k19treinamentos 151
R ESPOSTAS 152
152 www.k19.com.br
153 R ESPOSTAS
8
9 <p > ... </ p >
10 <p > ... </ p >
11 <p > ... </ p >
12
13 <p > <a href = " http :// www . google . com " target = " _blank " > Site do Google </ a > </ p >
14
15 <a href = " exercicio - ancora . html # ancora " > Ir para o documento 1 </ a >
16 </ body >
17 </ html >
www.facebook.com/k19treinamentos 153
R ESPOSTAS 154
12 <p >
13 Logo K19
14 < img src = " http :// www . k19 . com . br / app / webroot / css / img / main - header - logo . png " / >
15 </ p >
16 </ body >
17 </ html >
154 www.k19.com.br
155 R ESPOSTAS
www.facebook.com/k19treinamentos 155
R ESPOSTAS 156
156 www.k19.com.br
157 R ESPOSTAS
32 < input type = " radio " name = " sexo " id = " sexo - m " / >
33 < label for = " sexo - m " > Masculino </ label >
34 < input type = " radio " name = " sexo " id = " sexo - f " / >
35 < label for = " sexo - f " > Feminino </ label >
36 </ div >
37
38 < div >
39 < label for = " estado " > Selecione um Estado : </ label >
40 < select id = " estado " name = " estado " >
41 < option value = " sp " > So Paulo </ option >
42 < option value = " rj " > Rio de Janeiro </ option >
43 < option value = " mg " > Minas Gerais </ option >
44 < option value = " es " > Esprito Santo </ option >
45 < option value = " pr " > Paran </ option >
46 </ select >
47 </ div >
48
49 < div >
50 Escolha um ou mais meios de comunicao :
51 < input type = " checkbox " name = " comunicacao [] " id = " comunicacao - musica " / >
52 < label for = " comunicacao - musica " > Msica </ label >
53 < input type = " checkbox " name = " comunicacao [] " id = " comunicacao - televisao " / >
54 < label for = " comunicacao - televisao " > Televiso </ label >
55 < input type = " checkbox " name = " comunicacao [] " id = " comunicacao - radio " / >
56 < label for = " comunicacao - radio " > Rdio </ label >
57 </ div >
58
59 < div >
60 < label for = " obs " > Observaes : </ label >
61 < textarea id = " obs " name = " observacoes " > </ textarea >
62 </ div >
63
64 < div >
65 < input type = " submit " value = " Enviar " / >
66 < input type = " reset " value = " Desfazer alteraes " / >
67 </ div >
68 </ form >
69 </ body >
70 </ html >
www.facebook.com/k19treinamentos 157
R ESPOSTAS 158
158 www.k19.com.br
159 R ESPOSTAS
1 var linha = * ;
2 for ( var contador = 1; contador <= 10; contador ++) {
3 document . writeln ( linha ) ;
4 document . writeln ( < br / > ) ;
5 linha += * ;
6 }
www.facebook.com/k19treinamentos 159
R ESPOSTAS 160
1 var linha = * ;
2 for ( var contador = 1; contador <= 8; contador ++) {
3 document . writeln ( linha ) ;
4 document . writeln ( < br / > ) ;
5 var resto = contador % 4;
6 if ( resto == 0) {
7 linha = * ;
8 } else {
9 linha += * ;
10 }
11 }
1 var penultimo = 0;
2 var ultimo = 1;
3
4 document . writeln ( penultimo ) ;
5 document . writeln ( < br / > ) ;
6 document . writeln ( ultimo ) ;
7 document . writeln ( < br / > ) ;
8
9 for ( var contador = 0; contador < 28; contador ++) {
10 var proximo = penultimo + ultimo ;
11 document . writeln ( proximo ) ;
12 document . writeln ( < br / > ) ;
13
14 penultimo = ultimo ;
15 ultimo = proximo ;
16 }
160 www.k19.com.br
161 R ESPOSTAS
www.facebook.com/k19treinamentos 161
R ESPOSTAS 162
1 var formacao = { sigla : " K00 " , nome : " Formao Bsica " };
2 console . log ( formacao . sigla ) ;
3 console . log ( formacao . nome ) ;
4
5 var formacao_2 = { sigla : " K10 " , nome : " Formao Desenvolvedor Java " };
6 console . log ( formacao_2 . sigla ) ;
7 console . log ( formacao_2 . nome ) ;
1 var formacao = { sigla : " K00 " , nome : " Formao Bsica " };
2 console . log ( formacao . sigla ) ;
3 console . log ( formacao . curso ) ;
4
5 var x = formacao ;
6
7 x . sigla = " K00 " ;
8 x . nome = " Formao Bsica " ;
9
10 console . log ( formacao . sigla ) ;
11 console . log ( formacao . nome ) ;
1 var formacao = { sigla : " K20 " , nome : " Formao Desenvolvedor Java Avanado " };
2
3 var nova_formacao = Object . create ( curso ) ;
4
5 nova_formacao . sigla = " K30 " ;
6 nova_formacao . nome = " Formao Desenvolvedor . NET " ;
7
8 console . log ( formacao . sigla ) ;
162 www.k19.com.br
163 R ESPOSTAS
1 var conta = {
2 saldo : 0 ,
3 saque : function ( valor ) {
4 if ( conta . saldo < 600) {
5 throw {
6 message : " Saldo insuficiente . "
7 }
8 } else if ( valor <= 0) {
9 throw {
10 message : " Valores menores ou iguais a 0 no podem ser sacados . "
11 }
12 } else {
13 this . saldo -= valor ;
14 }
15 try {
16 conta . saque (0) ;
17 } catch ( e ) {
18 console . log ( e . name ) ;
19 console . log ( e . message ) ;
20 }
21 }
22 }
23
24 conta . saque (600)
25 console . log ( conta . saque ) ;
www.facebook.com/k19treinamentos 163
R ESPOSTAS 164
5 multiplicacao *= arguments [ x ];
6 }
7
8 return multiplicacao ;
9 }
10
11 var resultado = multiplicacao (3 , 6 , 2 , 8) ;
12
13 console . log ( resultado ) ;
1 var formacoes = [ " K10 " , " K20 " , " K30 " , " K40 " ];
2
3 formacoes [ formacoes . length ] = " K00 " ;
4
5 for ( var x = 0; x < formacao . length ; x ++) {
6 console . log ( cursos [ x ]) ;
7 }
1 var formacoes = [ " K10 " , " K20 " , " K30 " , " K40 " ];
2
3 formacoes . push ( " K00 " ) ;
4
5 for ( var x = 0; x < formacao . length ; x ++) {
6 console . log ( cursos [ x ]) ;
7 }
164 www.k19.com.br
165 R ESPOSTAS
1 var formacoes = [ " K00 " , " K10 " , " K20 " , " K30 " , " K40 " ];
2
3 var formacoes = formacoes . pop () ;
4 console . log ( formacoes ) ;
1 var formacoes = [ " K00 " , " K10 " , " K20 " , " K30 " , " K40 " ];
2
3 var formacoes = formacoes . pop () ;
4 console . log ( formacoes ) ;
5
6 formacoes . push ( " K40 " ) ;
7
8 for ( var x = 0; formacoes . length ; x ++) { // highlights !!
9 console . log ( formacoes [ x ]) ;
10 }
1 var letras = [ " a " , " b " , " c " , " d " , " e " ];
2
3 letras . reverse () ;
4
5 for ( var x = 0; x < letras . length ; x ++) {
6 console . log ( letras [ x ]) ;
7 }
www.facebook.com/k19treinamentos 165
R ESPOSTAS 166
1 var letras = [ " a " , " b " , " c " , " d " , " e " ];
2
3 letras . reverse () ;
4
5 for ( var x = 0; x < letras . length ; x ++) {
6 console . log ( letras [ x ]) ;
7 }
8
9 var letras = letras . shift () ;
10
11 console . log ( " Elemento removido : " + letras ) ;
12
13 for ( var x = 0; x < letras . length ; x ++) {
14 console . log ( letras [ x ]) ;
15 }
1 var letras = [ " a " , " b " , " c " , " d " , " e " ];
2
3 letras . reverse () ;
4
5 for ( var x = 0; x < letras . length ; x ++) {
6 console . log ( letras [ x ]) ;
7 }
8
9 var letras = letras . shift () ;
10
11 console . log ( " Elemento removido : " + letras ) ;
12
13 for ( var x = 0; x < letras . length ; x ++) {
14 console . log ( letras [ x ]) ;
15 }
16
17 letras . unshift ( " e " ) ;
18
19 for ( var x = 0; x < letras . length ; x ++) {
20 console . log ( letras [ x ]) ;
21 }
1 var formacoes = [ " K00 " , " K10 " , " K20 " , " K30 " , " K40 " ];
2
3 var formacoes = cursos . slice (0 ,2) ;
4
5 for ( var x = 0; x < formacoes . length ; x ++) {
6 conosole . log ( formacao [ x ]) ;
166 www.k19.com.br
167 R ESPOSTAS
7 }
www.facebook.com/k19treinamentos 167
R ESPOSTAS 168
168 www.k19.com.br
169 R ESPOSTAS
www.facebook.com/k19treinamentos 169
R ESPOSTAS 170
170 www.k19.com.br
171 R ESPOSTAS
18 < button id = " mostrar " > Mostrar </ button >
19 < button id = " ocultar " > Ocultar </ button >
20 < button id = " fadeto " > FadeTo </ button >
21 </ div >
22 < script >
23 $ ( " # mostrar " ) . click ( function () { $ ( " li " ) . fadeIn ( " slow " ) ; }) ;
24 $ ( " # ocultar " ) . click ( function () { $ ( " li " ) . fadeOut ( " slow " ) ; }) ;
25 $ ( " # fadeto " ) . click ( function () { $ ( " li " ) . fadeTo ( " slow " , 0.2) ; }) ;
26 </ script >
27 </ body >
28 </ html >
www.facebook.com/k19treinamentos 171
R ESPOSTAS 172
12 < li > K32 - Desenvolvimento Web com ASP . NET MVC </ li >
13 < li > K11 - Java e Orientao a Objetos </ li >
14 < li > K12 - Desenvolvimento Web com JSF2 e JPA2 </ li >
15 </ ul >
16 </ div >
17 < div >
18 < button id = " mostrar - ocultar " > Mostrar / Ocultar </ button >
19 </ div >
20 < script >
21 $ ( " # mostrar - ocultar " ) . click ( function () { $ ( " li " ) . slideToggle ( " slow " ) ; }) ;
22 </ script >
23 </ body >
24 </ html >
172 www.k19.com.br
173 R ESPOSTAS
9 < ul >
10 < li > K00 - Formao Bsica </ li >
11 < li > K10 - Formao Desenvolvedor Java </ li >
12 < li > K20 - Formao Desenvolvedor Java Avanado </ li >
13 < li > K30 - Formao Desenvolvedor . NET </ li >
14 < li > K40 - Formao Desenvolvedor Android </ li >
15 </ ul >
16 </ div >
17 < div >
18 < button id = " mostrar - ocultar " > Mostrar / Ocultar </ button >
19 </ div >
20 < script >
21 $ ( " # mostrar - ocultar " ) . click ( function () {
22 $ ( " li " ) . toggle ( " slow " ) ;}) ;
23 </ script >
24 </ body >
25 </ html >
www.facebook.com/k19treinamentos 173
R ESPOSTAS 174
174 www.k19.com.br