Escolar Documentos
Profissional Documentos
Cultura Documentos
000090
000090
7 de janeiro de 2013
Sumrio Sobre a K19 Seguro Treinamento Termo de Uso Cursos 1 Introduo 1.1 Client Side e Server Side . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1.2 HTML, CSS e Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . HTML 2.1 Estrutura Bsica . . . . . . . 2.2 Exerccios de Fixao . . . . 2.3 Exerccios Complementares 2.4 Semntica HTML . . . . . . 2.5 Pargrafos . . . . . . . . . . . 2.6 Exerccios de Fixao . . . . 2.7 Exerccios Complementares 2.8 Cabealhos . . . . . . . . . . 2.9 Exerccios de Fixao . . . . 2.10 Exerccios Complementares 2.11 Links . . . . . . . . . . . . . . 2.12 Exerccios de Fixao . . . . 2.13 Exerccios Complementares 2.14 ncoras . . . . . . . . . . . . 2.15 Exerccios de Fixao . . . . 2.16 Exerccios Complementares 2.17 Imagens . . . . . . . . . . . . 2.18 Exerccios de Fixao . . . . 2.19 Exerccios Complementares
i 1 2 3 4 1 1 2 3 3 4 5 5 6 7 7 8 9 11 11 12 13 13 14 16 16 17 18
i
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
www.facebook.com/k19treinamentos
S UMRIO
ii
2.20 2.21 2.22 2.23 2.24 2.25 2.26 2.27 2.28 2.29 2.30 2.31 2.32 3 CSS 3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9 3.10 3.11 3.12 3.13 3.14
Tabelas . . . . . . . . . . . . Exerccios de Fixao . . . . Exerccios Complementares Listas . . . . . . . . . . . . . Exerccios de Fixao . . . . Exerccios Complementares Exerccios de Fixao . . . . Exerccios Complementares Exerccios de Fixao . . . . Exerccios Complementares Formulrio . . . . . . . . . . Exerccios de Fixao . . . . Exerccios Complementares
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
18 22 23 23 25 26 27 28 29 30 30 37 37 39 42 43 44 47 48 48 49 51 58 60 61 65 66 69 71 71 71 74 75 77 79 80 81 82 83 85 85 89 92 92 94 96 96
Exerccios de Fixao . . . . Estrutura de uma regra CSS Tipos de seletores . . . . . . Exerccios de Fixao . . . . Cores em CSS . . . . . . . . . Unidades de medida . . . . Principais propriedades CSS Exerccios de Fixao . . . . Box model . . . . . . . . . . A propriedade display . . . . Exerccios de Fixao . . . . Posicionando elementos . . Exerccios de Fixao . . . . Desaos . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
JavaScript 4.1 Declarando e inicializando variveis em JavaScript 4.2 Operadores . . . . . . . . . . . . . . . . . . . . . . . . 4.3 Controle de uxo . . . . . . . . . . . . . . . . . . . . 4.4 Exerccios de Fixao . . . . . . . . . . . . . . . . . . 4.5 Exerccios Complementares . . . . . . . . . . . . . . 4.6 Funes JavaScript . . . . . . . . . . . . . . . . . . . 4.7 Objetos JavaScript . . . . . . . . . . . . . . . . . . . . 4.8 Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . 4.9 Exerccios de Fixao . . . . . . . . . . . . . . . . . . 4.10 Exerccios Complementares . . . . . . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
A Javascript Avanado A.1 Objetos . . . . . . . . . . . . A.2 Exerccios de Fixao . . . . A.3 Exerccios Complementares A.4 Funes . . . . . . . . . . . . A.5 Exerccios de Fixao . . . . A.6 Exerccios Complementares A.7 Arrays . . . . . . . . . . . . .
ii
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
www.k19.com.br
iii
S UMRIO
A.8 Mtodos das Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 A.9 Exerccios de Fixao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 A.10 Exerccios Complementares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 B jQuery B.1 Introduo . . . . . . . . . . B.2 Sintaxe . . . . . . . . . . . . . B.3 Seletores . . . . . . . . . . . B.4 Exerccios de Fixao . . . . B.5 Exerccios Complementares B.6 Eventos . . . . . . . . . . . . B.7 Exerccios de Fixao . . . . B.8 Exerccios Complementares B.9 Efeitos . . . . . . . . . . . . . B.10 Exerccios de Fixao . . . . B.11 Exerccios Complementares B.12 HTML . . . . . . . . . . . . . B.13 Exerccios de Fixao . . . . B.14 Exerccios Complementares C HTML5 C.1 article . . C.2 section . . C.3 header . . C.4 footer . . C.5 nav . . . . C.6 aside . . . C.7 gure . . C.8 gcaption D Respostas 105 105 106 106 107 109 109 110 112 113 115 117 118 119 121 123 124 124 125 125 126 126 127 127 129
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
www.facebook.com/k19treinamentos
iii
S UMRIO
iv
iv
www.k19.com.br
S UMRIO
Sobre a K19
A K19 uma empresa especializada na capacitao de desenvolvedores de software. Sua equipe composta por prossionais formados em Cincia da Computao pela Universidade de So Paulo (USP) e que possuem vasta experincia em treinamento de prossionais para rea de TI. O principal objetivo da K19 oferecer treinamentos de mxima qualidade e relacionados s principais tecnologias utilizadas pelas empresas. Atravs desses treinamentos, seus alunos se tornam capacitados para atuar no mercado de trabalho. Visando a mxima qualidade, a K19 mantm as suas apostilas em constante renovao e melhoria, oferece instalaes fsicas apropriadas para o ensino e seus instrutores esto sempre atualizados didtica e tecnicamente.
www.facebook.com/k19treinamentos
S UMRIO
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 possui 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 Treinamento 10% do valor total do curso.
www.k19.com.br
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
S UMRIO
TR
www.k19.com.br/cursos
www.k19.com.br
CAPTULO
I NTRODUO
Durante muito tempo, a ideia de desenvolvimento web cou associada apenas a construo de pginas que possuam somente o intuito de oferecer aos usurios o acesso a um determinado contedo. 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. Enm, 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 prossional apesar de possuir bons conhecimentos nas diversas tecnologias utilizadas apenas gerencia o desenvolvimento que realizado por outros prossionais. Como as tarefas antes de responsabilidade do webmaster foram delegadas a outros prossionais, naturalmente, apareceram algumas especializaes. Essas especializaes podem ser classicadas em dois grupos: desenvolvedores front-end e back-end. Em geral os desenvolvedores front-end so responsveis pela interface com a qual os usurios interagem enquanto os desenvolvedores backend so responsveis pelo funcionamento interno das aplicaes.
I NTRODUO
back-end.
www.k19.com.br
CAPTULO
Cdigo HTML 2.1: Exemplo da estrutura bsica de um documento HTML
HTML
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 pgina web denido com a linguagem HTML (HyperText Markup Language). HTML uma linguagem de marcao originalmente proposta por Tim Berners-Lee no nal 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 cientcos. 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 especicao da linguagem HTML a 5. Essa verso ainda no foi nalizada, ela est na fase de trabalho em progresso (working draft). Porm, j existem navegadores implementando alguns dos novos recursos do HTML5. As especicaes 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 lhos que podem ser um texto simples ou outros elementos. Cada elemento deve obrigatoriamente possuir uma tag e ela deve ser denida entre parnteses angulares (< e >). Veja o exemplo:
1 2 3 4 5 6 7 8 9 < html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exemplo da estrutura bsica de um documento HTML </ title > </ head > < body > <p > Ol mundo ! </ p > </ body > </ html >
www.facebook.com/k19treinamentos
HTML
No exemplo acima, temos um elemento HTML representado pela tag p e um texto simples Ol Mundo! lho desse elemento.
Exerccios de Fixao
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.
1
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:
2
1 2 3 4 5 6 7 8 9
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exemplo da estrutura bsica de um documento HTML </ title > </ head > < body > <p > Ol mundo ! </ p > </ body > </ html >
Cdigo HTML 2.2: ola-mundo.html
www.k19.com.br
HTML
Exerccios Complementares
Crie uma pgina HTML que exiba o nome deste curso duas vezes.
Semntica HTML
De acordo com a especicao da linguagem HTML, cada elemento possui um propsito bem denido. 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:
1 2 3 4 5 6 7 8 9 < html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exemplo de uso correto da semntica HTML </ title > </ head > < body > <p > Este um texto para mostrar o significado da tag p . </ p > </ body > </ html >
Cdigo HTML 2.4: Exemplo de uso correto da semntica HTML
No exemplo acima, utilizamos o elemento p para denir um pargrafo. De acordo com a especicao da linguagem HTML, esse elemento deve ser utilizado justamente para denir pargrafos. Portanto, ele foi aplicado corretamente. Agora, vejamos outro exemplo:
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 < html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Meus amigos - Site do Jonas - Criado pelo Jonas </ title > </ head > < body > < address > Rafael Cosentino rafael . cosentino@k19 . com . br Scio fundador da K19 Treinamentos Av . Brigadeiro Faria Lima , 1571 - Jardim Paulistano - So Paulo , SP CEP 1452 - 1 </ address > < address > Marcelo Martins marcelo . martins@k19 . com . br Scio fundador da K19 Treinamentos Av . Brigadeiro Faria Lima , 1571 - Jardim Paulistano - So Paulo , SP CEP 1452 - 1 </ address > </ body > </ html >
Cdigo HTML 2.5: Exemplo de uso incorreto da semntica HTML
Dessa vez, utilizamos o elemento address. De acordo com a especicao, o elemento address
www.facebook.com/k19treinamentos
HTML
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 nal 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 informar endereos postais a menos que essas informaes sejam relevantes para o documento.
Pargrafos
Os pargrafos dentro de um documento HTML, em geral, so denidos atravs do elemento p. Uma das principais caractersticas desse elemento que ele ocupa horizontalmente todo o espao denido pelo elemento pai. Esse o comportamento dos elementos de bloco que discutiremos com mais detalhes posteriormente. Por enquanto, o importante sabermos que, devido ao comportamento de bloco do elemento p, o navegador ajustar o texto do pargrafo largura do elemento pai realizando todas as quebras de linha necessrias. Caso seja necessrio forar uma quebra de linha, podemos utilizar a elemento br. Conra o exemplo:
1 2 3 4 5 6 7 8 9 1 11 12 13 < html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exemplo de quebra de linha em um pargrafo </ title > </ head > < body > <p > Um texto bem longo . Longo mesmo ! Este pargrafo serve para demonstrar o comportamento da quebra de linha automtica , ou seja , sem utilizar nenhum recurso para que a quebra ocorra . </ p > <p > J este pargrafo demonstra a quebra de linha forada . < br / > Percebeu ? </ p > </ body > </ html >
www.k19.com.br
HTML
Exerccios de Fixao
Crie um novo documento HTML chamado p-quebra-de-linha.html na pasta html. Em seguida, abra esse arquivo em um navegador (se necessrio, redimensione a janela do navegador para vericar o comportamento da quebra de linha).
3
1 2 3 4 5 6 7 8 9 1 11 12 13
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exemplo de quebra de linha em um pargrafo </ title > </ head > < body > <p > Um texto bem longo . Longo mesmo ! Este pargrafo serve para demonstrar o comportamento da quebra de linha automtica , ou seja , sem utilizar nenhum recurso para que a quebra ocorra . </ p > <p > J este pargrafo demonstra a quebra de linha forada . < br / > Percebeu ? </ p > </ body > </ html >
Cdigo HTML 2.7: p-quebra-de-linha.html
Exerccios Complementares
www.facebook.com/k19treinamentos
HTML
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 ctcio.
Cabealhos
Assim como em um livro, uma pgina HTML pode conter uma hierarquia de ttulos para estabelecer uma diviso de seu contedo. Para conseguirmos realizar essa tarefa devemos utilizar as tags de cabealho h1, h2, h3, h4, h5 e h6. Os suxos numricos de 1 a 6 indicam o nvel do ttulo dentro da hierarquia de ttulos do documento. Veja o exemplo:
1 2 3 4 5 6 7 8 9 1 11 12 13 14 < html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exemplo de cabealhos </ title > </ head > < body > < h1 > Ttulo 1 </ h1 > < h2 > Ttulo 2 </ h2 > < h3 > Ttulo 3 </ h3 > < h4 > Ttulo 4 </ h4 > < h5 > Ttulo 5 </ h5 > < h6 > Ttulo 6 </ h6 > </ body > </ html >
www.k19.com.br
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 ranqueamento 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: Utilizar apenas uma tag <h1> por pgina. Utilizar no mximo duas tags <h2> por pgina.
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
HTML
2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 3 31 32 33 34 < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > K 2 - Desenvolvimento Web com HTML , CSS e Javascript </ title > </ head > < body > < h1 > K 2 - Desenvolvimento Web com HTML , CSS e Javascript </ h1 > <p > Atualmente , praticamente todos os sistemas corporativos possuem interfaces web . Para quem deseja atuar no mercado de desenvolvimento de software , obrigatrio o conhecimento das linguagens : HTML , CSS e JavaScript . </ p > <p > Essas linguagens so utilizadas para o desenvolvimento da camada de apresentao das aplicaes web . </ p > < h2 >Pr - requisitos </ h2 > <p > Familiaridade com algum sistema operacional ( Windows / Linux / Mac OS X ) </ p > <p > Lgica de programao </ p > < h2 > Agenda </ h2 > < h3 > Aos domingos </ h3 > <p > xx / xx / xxxx das 8: <p > xx / xx / xxxx das 14: < h3 > Aos sbados </ h3 > <p > xx / xx / xxxx das 8: <p > xx / xx / xxxx das 14: </ body > </ html > s 14: s 2 : </ p > </ p > s 14: s 2 : </ p > </ p >
10
Imagine que voc possua um site de culinria no qual voc disponibiliza algumas receitas. Crie uma pgina com uma receita ctcia utilizando cabealhos para organizar contedo. Utilize quantos nveis de ttulo achar necessrio.
5
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Como preparar um delicioso macarro instantneo em 6 min . </ title > </ head > < body > < h1 > Como preparar um delicioso macarro instantneo em 6 min . </ h1 > <p > Com esta receita voc se tornar um profissional na arte de preparar um macarro instantneo . </ p > < h2 > Ingredientes </ h2 > <p > Macarro instantneo de sua marca favorita </ p > <p > 6 ml de gua </ p > < h2 > Modo de preparo </ h2 > < h3 > No microondas </ h3 > <p > Insira o macarro instantneo em um recipiente com 6 ml de gua e programe o microondas por 6 minutos . Aperto o boto iniciar ou equivalente . </ p > < h4 > Ponto importante </ h4 >
10
www.k19.com.br
11
27 28 29 3 31 32 33 34 35 36 37 38 39 4 41 42 43 44 <p > Utilize um recipiente que permita o macarro ficar totalmente submerso na gua . </ p > <p > Quando ouvir o bip no saia correndo . O microondas no ir explodir , pois o bip significa que o macarro est pronto . </ p > < h3 > No fogo </ h3 > <p > Ferva a gua em uma panela . </ p > <p > Insira o macarro e cozinhe - o por 3 minutos </ p > < h4 > Ponto importante </ h4 > <p > Utilize uma panela que permita o macarro ficar totalmente submerso na gua . </ p > <p > No se distraia com a televiso ou qualquer outra coisa . Voc poder queimar a sua refeio </ p > </ body > </ html >
Cdigo HTML 2.11: receita.html
HTML
Exerccios Complementares
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.
3
Utilizando as tags de cabealho, crie uma pgina de um produto e suas especicaes, observaes e ou comentrios. Utilize quantos nveis de ttulo achar necessrio.
4
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:
1 2 3 4 5 6 7 8 9 1 11 < html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exemplo de uso da tag a </ title > </ head > < body > <p > <a href = " pagina2 . html " > Exemplo de link relativo </ a > </ p > <p > <a href = " outros / pagina3 . html " > Outro exemplo de link relativo </ a > </ p > <p > <a href = " http :// www . k19 . com . br " > Exemplo de link absoluto </ a > </ p > </ body > </ html >
Cdigo HTML 2.14: Exemplo de uso da tag a
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: _blank - em uma nova janela ou aba _self - na mesma janela ou frame do documento que contm o link _parent - em um frame que seja o pai do frame no qual o link se encontra _top - na mesma janela do documento que contm o link Ao testar os valores acima, logo percebemos que _self e _top possuem o mesmo comportamento 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. O comportamento padro de um link abrir o documento na mesma pgina ou frame caso o atributo target no seja utilizado.
1 2 3 4 5 6 7 8 9 1 11 < html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exemplo de uso da tag a com o atributo target </ title > </ head > < body > <p > <a href = " pagina1 . html " target = " _blank " > Abre em outra janela / aba </ a > </ p > <p > <a href = " pagina2 . html " target = " _self " > Abre na mesma janela </ a > </ p > <p > <a href = " pagina3 . html " > Abre na mesma janela </ a > </ p > </ body > </ html >
Cdigo HTML 2.15: Exemplo de uso da tag a com o atributo target
Importante
Ao longo da evoluo do HTML, a tag frame foi caindo em desuso at que no HTML5 foi totalmente retirada da especicao. 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
Crie dois documentos HTML em arquivos chamados pagina1.html e pagina2.html dentro da pasta html e em seu corpo crie quatro links: um que aponte para uma pgina externa e outros trs que apontem para uma pgina interna de maneiras diferentes. Lembre-se de criar tambm a pgina para a qual o seu link interno ir apontar.
6
12
www.k19.com.br
13
1 2 3 4 5 6 7 8 9 1 11 12 < html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exemplo de uso da tag a com o atributo target </ title > </ head > < body > <p > <a href = " http :// www . k19 . com . br " target = " _blank " > Link externo </ a > </ p > <p > <a href = " pagina2 . html " target = " _self " > Link interno </ a > </ p > <p > <a href = " pagina2 . html " target = " _top " > Link interno </ a > </ p > <p > <a href = " pagina2 . html " > Link interno </ a > </ p > </ body > </ html >
Cdigo HTML 2.16: pagina1.html
HTML
1 2 3 4 5 6 7 8 9
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exemplo de uso da tag a com o atributo target </ title > </ head > < body > < h1 > Pgina 2 </ h1 > </ body > </ html >
Cdigo HTML 2.17: pagina2.html
Exerccios Complementares
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).
5
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.
6
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 identicar 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 prexada com o caractere #.
1 2 3 < html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
www.facebook.com/k19treinamentos
13
HTML
4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 < title > Exemplo de uso da tag a como ncora </ title > </ head > < body > <p > <a href = " # mais_info " > Veja mais informaes </ a > </ p > <p > <a href = " pagina2 . html # outra_ancora " > ncora em outra pgina </ a > </ p > ... ... ... <a name = " mais_info " > Mais informaes </ a > <p > ... ... ... </ p > </ body > </ html >
Cdigo HTML 2.22: Exemplo de uso da tag a como ncora
14
Lembre-se
At a verso 4 do HTML e no XHTML, a especicao 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 car 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
Crie um documento HTML em um arquivo chamado ancora-pagina1.html na pasta html que contenha um link que aponta para uma ncora dentro da prpria pgina. Dica: insira um contedo sucientemente grande para que a barra de rolagem vertical do navegador aparea e coloque a ncora no nal da pgina.
7
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exerccio sobre ncoras </ title > </ head > < body > <p > <a href = " # sobre " > Sobre o texto dessa pgina </ a > </ p > <p > Lorem ipsum dolor sit amet , consectetur adipiscing elit . Donec justo massa , sodales sit amet eleifend a , elementum eu nibh . Donec egestas dolor quis turpis dictum tincidunt . Donec blandit tempus velit , sit amet adipiscing velit consequat placerat . Curabitur id mauris . </ p > <p > ... </ p > <p > ... </ p > <p > ... </ p > <p > At nisi imperdiet lacinia . Ut quis arcu at nisl ornare viverra . Duis vel tristique tellus . Maecenas ultrices placerat tortor . Pellentesque feugiat accumsan commodo . Proin non urna justo , id pulvinar lacus . </ p >
14
www.k19.com.br
15
21 22 23 24 25 <a name = " sobre " > Sobre o texto dessa pgina </ a > <p >O texto dessa pgina foi gerado atravs do site : <a href = " http :// www . lipsum . com / " > http :// www . lipsum . com / </ a > </ p > </ body > </ html >
Cdigo HTML 2.23: ancora-pagina1.html
HTML
Crie um novo arquivo chamado ancora-pagina2.html na pasta html com um ncora chamada outra_ancora. Dica: insira um contedo sucientemente grande para que a barra de rolagem vertical do navegador aparea e coloque a ncora no nal da pgina.
8
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exerccio sobre ncoras </ title > </ head > < body > < h1 > Ancora pgina 2 </ h1 > <p > Lorem ipsum dolor sit amet , consectetur adipiscing elit . Donec justo massa , sodales sit amet eleifend a , elementum eu nibh . Donec egestas dolor quis turpis dictum tincidunt . Donec blandit tempus velit , sit amet adipiscing velit consequat placerat . Curabitur id mauris </ p > <p > ... </ p > <p > ... </ p > <p > ... </ p > <p > at nisi imperdiet lacinia . Ut quis arcu at nisl ornare viverra . Duis vel tristique tellus . Maecenas ultrices placerat tortor . Pellentesque feugiat accumsan commodo . Proin non urna justo , id pulvinar lacus . </ p > <a name = " outra_ancora " > Mais uma ncora </ a > <p > Se voc chegou aqui deu tudo certo ! :) </ p > </ body > </ html >
Cdigo HTML 2.24: ancora-pagina2.html
Crie um novo link no arquivo ancora-pagina1.html que aponte para ncora outra_ancora do arquivo ancora-pagina2.html.
9
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exerccio sobre ncoras </ title > </ head > < body > <p > <a href = " # sobre " > Sobre o texto dessa pgina </ a > </ p > <p > <a href = " ancora - pagina2 . html # outra_ancora " > ncora em outra pgina </ a > </ p > <p > Lorem ipsum dolor sit amet , consectetur adipiscing elit . Donec justo massa , sodales sit amet eleifend a , elementum eu nibh . Donec egestas dolor quis turpis dictum tincidunt . Donec blandit tempus velit , sit amet adipiscing velit consequat placerat . Curabitur id mauris . </ p > <p > ... </ p > <p > ... </ p > <p > ... </ p > <p > At nisi imperdiet lacinia . Ut quis arcu at nisl ornare viverra . Duis vel tristique tellus . Maecenas ultrices placerat tortor . Pellentesque feugiat accumsan commodo . Proin non urna justo , id pulvinar lacus . </ p >
www.facebook.com/k19treinamentos
15
HTML
21 22 23 24 25 26
16
<a name = " sobre " > Sobre o texto dessa pgina </ a > <p >O texto dessa pgina foi gerado atravs do site : <a href = " http :// www . lipsum . com / " > http :// www . lipsum . com / </ a > </ p > </ body > </ html >
Cdigo HTML 2.25: ancora-pagina1.html
Exerccios Complementares
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 documento crie um link que aponte para a ncora criada no primeiro documento, coloque tambm um link qualquer ou um texto.
7
8 Dentro de um documento HTML crie trs links. Dois devem apontar para ncoras de pginas externas e o ltimo link deve aparecer no nal 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 imagens ao contedo das pginas. Como no queremos que as nossas pginas quem muito montonas, 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.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 < html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exemplo de uso da tag img </ title > </ head > < body > < h1 > K19 Treinamentos </ h1 > < img src = " http :// www . k19 . com . br / css / img / main - header - logo . png " / > < h2 > Cursos </ h2 > <p > < img src = " http :// www . k19 . com . br / css / img / k K 1 - Lgica de Programao </ p > <p > < img src = " http :// www . k19 . com . br / css / img / k K 2 - Desenvolvimento Web com HTML , CSS e </ p > <p > < img src = " http :// www . k19 . com . br / css / img / k K 3 - SQL e Modelo Relacional </ p >
16
www.k19.com.br
17
23 24 25 26 27 28 29 3 31 32 33 34 35 <p > < img src = " http :// www . k19 . com . br / css / img / k11 - logo - large . png " / > K11 - Orientao a Objetos em Java </ p > <p > < img src = " http :// www . k19 . com . br / css / img / k12 - logo - large . png " / > K12 - Desenvolvimento Web com JSF2 e JPA2 </ p > ... ... ... </ body > </ html >
Cdigo HTML 2.29: Exemplo de uso da tag img
HTML
Exerccios de Fixao
Crie um documento HTML em um arquivo chamado imagem.html na pasta html que contenha alguns elementos IMG.
10
1 2 3 4 5
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exemplo de uso da tag img </ title > </ head >
www.facebook.com/k19treinamentos
17
HTML
6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 < body > < h1 > K19 Treinamentos </ h1 > < img src = " http :// www . k19 . com . br / css / img / main - header - logo . png " / > < h2 > Cursos </ h2 > <p > < img src = " http :// www . k19 . com . br / css / img / k K 1 - Lgica de Programao </ p > <p > < img src = " http :// www . k19 . com . br / css / img / k K 2 - Desenvolvimento Web com HTML , CSS e </ p > <p > < img src = " http :// www . k19 . com . br / css / img / k K 3 - SQL e Modelo Relacional </ p > </ body > </ html >
18
Exerccios Complementares
Tabelas
Suponha que voc esteja desenvolvendo o site de uma empresa e precisa apresentar alguns relatrios em pginas HTML. Considere que os dados desses relatrios so obtidos de planilhas eletrnicas. Da surge a necessidade de denir dados de forma tabular em HTML. Para resolver esse problema, podemos utilizar o elemento table do HTML. Esse elemento permite apresentar um conjunto de dados na forma de tabelas. Veja o exemplo:
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 < html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exemplo de uso da tag table </ title > </ head > < body > < h1 > Carros </ h1 > < table > < tr > < th > Marca </ th > < th > Modelo </ th > < th > Ano </ th > </ tr > < tr > < td > Toyota </ td > < td > Corolla </ td > < td > 2 1 </ td > </ tr > < tr > < td > Honda </ td > < td > Civic </ td > < td > 2 11 </ td >
18
www.k19.com.br
19
24 25 26 27 28 29 3 31 32 33 34 35 </ tr > < tr > < td > Mitsubishi </ td > < td > Lancer </ td > < td > 2 12 </ td > </ tr > < tr > < td colspan = " 3 " > ltima atualizao : </ tr > </ table > </ body > </ html >
HTML
Perceba que a tag table no utilizada sozinha. Ela necessita de pelo menos um ou mais elementos tr que, por sua vez, necessitam de pelo menos um ou mais elementos th ou td. O que signicam essas tags? tr - dene uma linha da tabela th - dene uma clula de cabealho td - dene uma clula Existe uma outra forma de criar a mesma tabela:
1 < html >
www.facebook.com/k19treinamentos
19
HTML
2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 3 31 32 33 34 35 36 37 38 39 4 41 < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exemplo de uso da tag table </ title > </ head > < body > < h1 > Carros </ h1 > < table > < thead > < tr > < th > Marca </ th > < th > Modelo </ th > < th > Ano </ th > </ tr > </ thead > < tfoot > < tr > < td colspan = " 3 " > ltima atualizao : </ tr > </ tfoot > < tbody > < tr > < td > Toyota </ td > < td > Corolla </ td > < td > 2 1 </ td > </ tr > < tr > < td > Honda </ td > < td > Civic </ td > < td > 2 11 </ td > </ tr > < tr > < td > Mitsubishi </ td > < td > Lancer </ td > < td > 2 12 </ td > </ tr > </ tbody > </ table > </ body > </ 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. O que signicam essas tags? thead - dene o cabealho da tabela tfoot - dene o rodap da tabela tbody - dene o corpo da tabela Por que complicar? Qual o motivo da existncia dessas tags? A tag thead, assim como a tfoot, servem para agrupar as linhas de cabealho e de rodap, respectivamente. O cdigo ca 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 especicao.
www.facebook.com/k19treinamentos
21
HTML
22
Outros dois atributos importantes para a construo de tabelas so colspan e rowspan que podem 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 denidas em seu valor. Analogamente, o atributo rowspan faz o mesmo, porm com linhas.
Exerccios de Fixao
Crie uma pgina HTML em um arquivo chamado tabela.html na pasta html que contenha uma tabela de acordo com a imagem abaixo:
11
As linhas vermelhas foram colocadas na imagem apenas para facilitar a visualizao do problema.
1 2 3 4 5 6 7 8 9 < html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exerccio para a tag table </ title > </ head > < body > < table > < thead > < tr >
22
www.k19.com.br
23
1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 3 31 32 33 34 35 36 37 38 39 4 41 42 43 44 45 46 47 48 49 5 51 52 53 < th > Marca </ th > < th > Modelo </ th > < th > Ano </ th > </ tr > </ thead > < tfoot > < tr > < td colspan = " 3 " > ltima atualizao : </ tr > </ tfoot > < tbody > < tr > < td rowspan = " 2 " > Toyota </ td > < td > Corolla </ td > < td > 2 1 </ td > </ tr > < tr > < td > Camry </ td > < td > 2 11 </ td > </ tr > < tr > < td rowspan = " 3 " > Honda </ td > < td > Civic </ td > < td > 2 4 </ td > </ tr > < tr > < td > Fit </ td > < td > 2 12 </ td > </ tr > < tr > < td > City </ td > < td > 2 11 </ td > </ tr > < tr > < td > Mitsubishi </ td > < td > Lancer </ td > < td > 2 12 </ td > </ tr > </ tbody > </ table > </ body > </ html >
Cdigo HTML 2.34: tabela.html
HTML
Exerccios Complementares
Crie em um documento HTML uma tabela que contenha o continente/subcontinente, o nome e o idioma de algumas cidades do mundo.
10
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. Os trs tipos possveis de listas so:
www.facebook.com/k19treinamentos
23
HTML
24
Lista de denio - utilizada para exibir denies de termos. Funciona como nos dicionrios, no qual temos uma palavra e em seguida o seu signicado.
Lista sem ordem - utilizada para exibir qualquer contedo sem ordenao.
Lista de denio
Para criarmos uma lista de denio devemos utilizar a tag dl. O elemento dl deve possuir pelo menos um elemento lho dt seguido de um elemento dd. Um item em uma lista de denio composto por um par de elementos dt e dd.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 < html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exemplo de uso da tag dl </ title > </ head > < body > < h1 > Cursos - K19 Treinamentos </ h1 > < dl > < dt > K 1 - Lgica de Programao </ dt > < dd > Conhecimentos em Lgica de Programao o pr - requisito fundamental para que uma pessoa consiga aprender qualquer Linguagem de Programao ... </ dd > < dt > K 2 - Desenvolvimento Web com HTML , CSS e JavaScript </ dt > < dd > Atualmente , praticamente todos os sistemas corporativos possuem interfaces web . Para quem deseja atuar no mercado de desenvolvimento ... </ dd > < dt > K 3 - SQL e Modelo Relacional </ dt > < dd > Como as aplicaes corporativas necessitam armazenar dados fundamental que os desenvolvedores possuam conhecimentos sobre persistncia de dados . </ dd > </ dl > </ body > </ html >
24
www.k19.com.br
25
HTML
Exerccios de Fixao
Crie um documento HTML em um arquivo chamado restaurante.html na pasta html que contenha o cardpio de um restaurante com os nomes dos seus pratos e uma breve descrio sobre os mesmos.
12
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Menu - K19 Pizzaria </ title > </ head > < body > < h1 > Menu - K19 Pizzaria </ h1 > < dl > < dt > moda da casa </ dt > < dd > Presunto coberto com mussarela , ovos e palmito . </ dd > < dt > moda do pizzaiolo </ dt > < dd > Mussarela , presunto , ovos e bacon . </ dd > < dt > Aliche </ dt > < dd > Aliche , parmeso e rodelas de tomate . </ dd >
www.facebook.com/k19treinamentos
25
HTML
22 23 24 </ dl > </ body > </ html >
26
Exerccios Complementares
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.
11
Lista ordenada
Para criarmos uma lista ordenada, devemos utilizar a tag ol. O elemento ol deve possuir pelo menos um elemento lho li.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 < html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exemplo de uso da tag ol </ title > </ head > < body > < h1 > Macarro instantneo - K19 Receitas </ h1 > < h2 > Modo de preparo </ h2 > < ol > < li > Ferver 6 ml de gua em uma panela . </ li > < li > Retirar o macarro do pacote . </ li > < li > Colocar o macarro na panela no fogo baixo . </ li > < li > Cozinhar o macarro por 3 min . </ li > < li > Temperar a gosto . </ li > </ ol > </ body > </ html >
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.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Operao de saque - Manual do caixa eletrnico - K19 Bank </ title > </ head > < body > < h1 > Operao de saque - Manual do caixa eletrnico - K19 Bank </ h1 > < ol > < li > Insira o carto </ li > < li > Digite a senha </ li > < li > Escolha a opo de saque </ li > < li > Informe o valor que deseja sacar </ li > < li > Insira o carto novamente </ li > < li > Aguarde at a liberao do dinheiro </ li > </ ol > </ body > </ html >
Cdigo HTML 2.40: manual.html
www.facebook.com/k19treinamentos
27
HTML
28
Exerccios Complementares
Crie um documento HTML que contenha um manual que explique passo-a-passo a instalao, manuteno ou manuseio de um aparelho eletrnico.
12
Para criarmos uma lista sem ordem, devemos utilizar a tag ul. O elemento ul deve possuir pelo menos um elemento lho li.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 < html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exemplo de uso da tag dl </ title > </ head > < body > < h1 > K 2 - Desenvolvimento Web com HTML , CSS e JavaScript </ h1 > < h2 >Pr - requisitos </ h2 > < ul > < li > Conhecimento de algum sistema operacional ( Windows / Linux / MacOS X ) </ li > < li > Lgica de programao </ li > </ ul > </ body > </ html >
28
www.k19.com.br
29
HTML
Exerccios de Fixao
Crie um documento HTML em um arquivo chamado lista-curso.html na pasta html que contenha a lista dos cursos da Formao Bsica da K19.
14
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > K - Formao Bsica - K19 Treinamentos </ title > </ head > < body > < dl > < h1 > K - Formao Bsica </ h1 > < ul > < li > K 1 - Lgica de Programao </ li > < li > K 2 - Desenvolvimento Web com HTML , CSS e JavaScript </ li > < li > K 3 - SQL e Modelo Relacional </ li > </ ul > </ dl > </ body > </ html >
Cdigo HTML 2.43: lista-cursos.html
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: text - cria uma caixa de texto de uma linha. password - cria uma caixa de texto de uma linha escondendo os caracteres digitados. checkbox - cria uma caixa que assume dois estados: checado e "deschecado". Em conjunto com o atributo name possvel que se crie um grupo de checkboxes no qual um ou mais checkboxes seja "checado". radio - cria uma caixa que assume dois estados: checado e "deschecado". Em conjunto com o atributo name possvel que se crie um grupo de radios no qual apenas um radio seja "checado". button - cria um boto. Atravs do atributo value denimos o texto do boto. submit - cria um boto para o envio do formulrio. Atravs do atributo value denimos o texto do boto. le - cria um boto que, ao ser clicado, abre uma caixa de dilogo para a escolha de um arquivo no computador do usurio. reset - cria um boto que descarta todas as alteraes feitas dentro de um formulrio. Atravs do atributo value denimos o texto do boto. image - cria um boto para o envio do formulrio. Dese ser utilizado em conjunto com o atributo src para que uma imagem de fundo seja utilizada no boto. hidden - cria um elemento que no ca visvel para o usurio, porm pode conter um valor que ser enviado pelo formulrio. Existem outros valores possveis para o atributo type, porm eles fazem parte da especicao do HTML5 e nem todos os navegadores suportam tais valores.
1 2 3 4 5 6 < html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exemplo de uso da tag input </ title > </ head > < body >
30
www.k19.com.br
31
7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 3 31 32 33 34 35 36 37 38 39 4 41 42 43 44 45 46 47 48 49 5 51 52 53 54 55 < form action = " pagina . html " method = " get " > <p > text : < input type = " text " / > </ p > <p > password : < input type = " password " / > </ p > <p > checkboxes : < input type = " checkbox " name = " checkgroup " / > < input type = " checkbox " name = " checkgroup " / > < input type = " checkbox " name = " checkgroup " / > </ p > <p > radios : < input type = " radio " name = " checkgroup " / > < input type = " radio " name = " checkgroup " / > < input type = " radio " name = " checkgroup " / > </ p > <p > button : < input type = " button " value = " Boto " / > </ p > <p > submit : < input type = " submit " value = " Enviar " / > </ p > <p > file : < input type = " file " / > </ p > <p > reset : < input type = " reset " value = " Descartar alteraes " / > </ p > <p > image : < input type = " image " src = " http :// www . k19 . com . br / css / img / main - header - logo . png " / > </ p > <p > hidden : < input type = " hidden " value = " valor escondido " / > </ p > </ form > </ body > </ html >
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 lhos 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.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 < html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exemplo de uso da tag select </ title > </ head > < body > < form action = " pagina . html " method = " get " > <p > Selecione uma cidade : < select > < option value = " sao - paulo " > So Paulo </ option > < option value = " rio - de - janeiro " > Rio de Janeiro </ option > < option value = " porto - alegre " > Porto Alegre </ option > < option value = " curitiba " > Curitiba </ option > </ select > </ p > <p > Selecione uma ou mais categorias de produtos ( mantenha a tecla " control " ( ou " command " no Mac ) pressionada para escolher mais de uma categoria ) : < select multiple = " multiple " >
32
www.k19.com.br
33
23 24 25 26 27 28 29 3 31 < option < option < option < option </ select > </ p > </ form > </ body > </ html > value = " desktops " > Desktops </ option > value = " notebooks " > Notebooks </ option > value = " tablets " > Tablets </ option > value = " celulares " > Celulares </ option >
HTML
Caso exista a necessidade de agrupar as opes de um elemento select, podemos utilizar o elemento optgroup em conjunto com o atributo label. Veja o exemplo:
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 < html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exemplo de uso da tag select </ title > </ head > < body > < form action = " pagina . html " method = " get " > <p > Selecione uma cidade : < select > < optgroup label = " Regio Sudeste " > < option value = " sao - paulo " > So Paulo </ option > < option value = " rio - de - janeiro " > Rio de Janeiro </ option > </ optgroup > < optgroup label = " Regio Sul " > < option value = " porto - alegre " > Porto Alegre </ option >
www.facebook.com/k19treinamentos
33
HTML
17 18 19 2 21 22 23 24 25 26 27 28 29 3 31 32 33 34 35 36 37 38 39 < option value = " curitiba " > Curitiba </ option > </ optgroup > </ select > </ p > <p > Selecione uma ou mais categorias de produtos ( mantenha a tecla " control " ( ou " command " no Mac ) pressionada para escolher mais de uma categoria ) : < select multiple = " multiple " > < optgroup label = " De mesa " > < option value = " desktops " > Desktops </ option > </ optgroup > < optgroup label = " Portteis " > < option value = " notebooks " > Notebooks </ option > < option value = " tablets " > Tablets </ option > < option value = " celulares " > Celulares </ option > </ optgroup > </ select > </ p > </ form > </ body > </ html >
Cdigo HTML 2.47: Exemplo de uso da tag select
34
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
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 < html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exemplo de uso da tag textarea </ title > </ head > < body > < form action = " pagina . html " method = " get " > <p > textarea : < textarea > </ textarea > </ p > </ form > </ body > </ html >
Cdigo HTML 2.48: Exemplo de uso da tag textarea
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 m 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 formulrio. Utilizando o atributo for podemos fazer com que um elemento do formulrio receba o foco. Veja o exemplo:
1 < html >
www.facebook.com/k19treinamentos
35
HTML
2 3 4 5 6 7 8 9 1 11 12 13 14 < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exemplo de uso da tag label </ title > </ head > < body > < form action = " pagina . html " method = " get " > <p > < label for = " nome " > Nome : </ label > < input type = " text " id = " nome " / > </ p > </ form > </ body > </ html >
Cdigo HTML 2.49: Exemplo de uso da tag label
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 denir, de fato, o nosso formulrio. Todos
os elementos de formulrio que vimos anteriormente devem ser lhos 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 atributo 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 denidos no protocolo HTTP).
Exerccios de Fixao
Crie um documento HTML em um arquivo chamado formulario.html na pasta html com diversos elementos de formulrio e para cada elemento crie um rtulo. Cada rtulo deve focar o elemento de formulrio correspondente.
15
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title >A tag label e os elementos de formulrio </ title > </ head > < body > < form action = " pagina . html " method = " get " > <p > < label for = " nome " > Nome : </ label > < input type = " text " id = " nome " / > </ p > <p > < label for = " senha " > Senha : </ label > < input type = " password " id = " senha " / > </ p > <p > Sexo : < input type = " radio " name = " sexo " id = " masculino " / > < label for = " masculino " > Masculino </ label > < input type = " radio " name = " sexo " id = " feminino " / > < label for = " feminino " > Feminino </ label > </ p > <p > < label for = " mensagem " > Mensagem : </ label > < textarea id = " mensagem " > </ textarea > </ p > </ form > </ body > </ html >
Cdigo HTML 2.50: formulario.html
Exerccios Complementares
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.
14
www.facebook.com/k19treinamentos
37
HTML
38
38
www.k19.com.br
CAPTULO
Cdigo HTML 3.1: Exemplo de aplicao das propriedades CSS inline
CSS
At o momento, utilizamos os elementos HTML sem modicar a forma de exibio dos mesmos. Nos exemplos mostrados no Captulo 2, os elementos foram exibidos com a formatao padro denida 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 especicao 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 especicaes 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. Podemos aplicar o CSS de trs formas em um documento HTML: Denindo as propriedades CSS diretamente no elemento HTML atravs do seu atributo style. Denindo as regras CSS dentro de um elemento com a tag style. Denindo as regras CSS em arquivo parte do documento HTML. Mas o que so essas regras e propriedades? Como elas so denidas? Propriedade CSS uma caracterstica visual de um elemento HTML. J a regra um conjunto de propriedades denidas para um elemento ou para um grupo de elementos HTML. Vamos ver um exemplo de aplicao das propriedades CSS diretamente em um elemento HTML:
1 2 3 4 5 6 7 8 9 1 < html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exemplo de CSS diretamente em um elemento </ title > </ head > < body > <p style = " font - size : 4 px ; color : # ff " > Ol mundo ! </ p > <p > Ol mundo novamente ! </ p > </ body > </ html >
www.facebook.com/k19treinamentos
39
CSS
40
style, estamos utilizando a abordagem CSS inline. Essa prtica no recomendada, pois dessa
forma no possvel reaproveitar o cdigo CSS, alm de dicultar a leitura do cdigo HTML. Vamos ver agora a aplicao das regras CSS utilizando a tag style:
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 < html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exemplo de aplicao das regras CSS atravs da tag style </ title > < style type = " text / css " > p { font - size : 4 px ; color : # ff ; } </ style > </ head > < body > <p > Ol mundo ! </ p > <p > Ol mundo novamente ! </ p > </ body > </ html >
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 denir 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:
1 2 3 4 5 6 7 8 9 1 11 < html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exemplo de aplicao das regras CSS atravs de um arquivo </ title > < link rel = " stylesheet " type = " text / css " href = " estilo . css " / > </ head > < body > <p > Ol mundo ! </ p > <p > Ol mundo novamente ! </ p > </ body > </ html >
Cdigo HTML 3.3: Exemplo de aplicao das regras CSS atravs de um arquivo
1 2 3 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 denimos.
Exerccios de Fixao
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.
1
Crie um documento HTML em um arquivo chamado testando-css.html dentro da pasta css. Todos os pargrafos desse documento devem ser exibidos em negrito, com cor azul e com fonte 20px. Dena uma regra CSS para formatar os pargrafos.
2
1 2 3 4 5 6 7 8 9 1
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Testando CSS </ title > < style type = " text / css " > p { font - weight : bold ; font - size : 2 px ; color : # FF ; }
42
www.k19.com.br
43
11 12 13 14 15 16 17 </ style > </ head > < body > <p > Um pargrafo formatado </ p > <p > Outro pargrafo formatado </ p > </ body > </ html >
CSS
Para organizar melhor o contedo e a formatao da pgina criada no exerccio anterior, crie um arquivo CSS chamado regras-de-formatacao.css na pasta css.
3
1 2 3 4 5
Modique o arquivo testando-css.html para aplicar as regras de formatao criadas no exerccio anterior.
4
1 2 3 4 5 6 7 8 9 1 11
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Testando CSS </ title > < link rel = " stylesheet " type = " text / css " href = " regras - de - formatacao . css " / > </ head > < body > <p > Testando o pargrafo com o CSS </ p > <p > Testando novamente o pargrafo com o CSS </ p > </ body > </ html >
43
CSS
44
Seletor
Corpo
p }
{ font-size: 40px;
Figura 3.4: Estrutura de uma regra CSS
Propriedade
Podemos ler a regra acima da seguinte forma: ser atribudo o valor 4 px 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 denidas no corpo da regra.
Tipos de seletores
Na linguagem CSS existem diversos tipos de seletores, sendo os principais: Seletor universal Seletor de tipo Seletor de descendentes Seletor de lhos 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 px.
1 2 3 * { margin : } px ;
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. No exemplo a seguir, selecionaremos todos os elementos que possuem a tag textarea.
1 2 3 textarea { border : 1 px solid red ; }
Cdigo CSS 3.4: Usando o seletor de tipo
Seletor de descendentes
Chamamos de seletor de descendentes a seleo de um ou mais elementos fazendo o uso de outros seletores separados por espaos. Um espao indica que os elementos selecionados pelo seletor sua direita so lhos 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 lhos diretos ou indiretos de elementos com a tag p.
1 2 3 p input { border : 1 px solid red ; }
Cdigo CSS 3.5: Usando o seletor de descendentes
Seletor de lhos
Chamamos de seletor de lhos a seleo de um ou mais elementos fazendo o uso de outros seletores separados pelo caractere >. Um caractere > indica que os elementos selecionados pelo seletor sua direita so lhos 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 lhos diretos de elementos com a tag p.
1 2 3 p > a { color : green ; }
Cdigo CSS 3.6: Usando o seletor de lhos
www.facebook.com/k19treinamentos
45
CSS
3 }
Cdigo CSS 3.7: Usando o seletor de irmo adjacente
46
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 2 3 *[ name = cidade ] { font - weight : italic ; }
Cdigo CSS 3.8: Usando o seletor de atributos
Se desejarmos tambm podemos informar apenas o atributo. No exemplo a seguir iremos selecionar todos os elementos com a tag img que possuam o atributo title.
1 2 3 img [ title ] { width : 1 px ; }
Cdigo CSS 3.9: Usando o seletor de atributos
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 2 3 # cidade { font - weight : bold ; }
Cdigo CSS 3.10: Usando o seletor de id
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
46
www.k19.com.br
47
CSS
Exerccios de Fixao
Para testar o funcionamento de alguns seletores, crie um documento html em um arquivo chamado seletores.html. Alm disso, dena algumas regras de formatao em um arquivo CSS chamado seletores.css. Salve esses arquivos na pasta css.
5
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25
<! DOCTYPE html > < html > < head > < title > </ title > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < link rel = " stylesheet " type = " text / css " href = " seletores . css " / > </ head > < body > < ul id = " main - menu " > < li > <a class = " selected " href = " http :// www . k19 . com . br / cursos " > Cursos </ a > </ li > < li > <a href = " http :// www . k19 . com . br / downloads / apostilas " > Apostilas </ a > </ li > < li > <a href = " http :// www . k19 . com . br / artigos / " > Artigos </ a > </ li > < li > <a href = " http :// www . k19 . com . br / sobre -a - k19 " > Sobre </ a > </ li > </ ul > < h1 > K19 - Treinamentos </ h1 > < h3 > Curso Java , C # e ASP . NET MVC ? Conhea os Cursos da K19 </ h3 > <p > Para saber mais informaes acesse <a href = " http :// www . k19 . com . br " > www . k19 . com . br </ a > </ p > </ body > </ html >
Cdigo HTML 3.6: seletores.html
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29
* { font - family : Monaco , DejaVu Sans Mono , monospace ; } h1 { color : blue ; } h3 { font - size : 2 px ; } p > a { font - weight : bold ; text - decoration : none ; } # main - menu { font - size : 18 px ; list - style : none ; padding : px ; } # main - menu li { display : inline ; margin : 5 px } # main - menu li a {
www.facebook.com/k19treinamentos
47
CSS
3 31 32 33 34 35 36 37 border : 2 px solid # ff ; text - decoration : none ; } . selected { background - color : blue ; color : white ; }
Cdigo CSS 3.12: formatando-pagina.css
48
Cores em CSS
Tradicionalmente, as cores podem ser denidas de trs formas diferentes: pelo nome da cor, pelo valor 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 denida em hexadecimal da seguinte forma: #RRGGBB. Onde RR, GG e BB podem variar de a FF e representam os componentes vermelho, verde e azul de uma cor. Para denir uma cor utilizando a funo rgb(), necessrio passar como argumento as quantidades 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:
1 2 color : rgb (2 , 255 , 4 ) ; background - color : rgb (1 %, 8 %, 4 %) ;
Mais Sobre
Em CSS3, h mais trs funes para denir uma cor: rgba(), hsl() e hsla(). A funo hsl() dene as cores atravs da matiz, saturao e luminosidade (hue, saturation e lightness). Essa funo possui trs parmetros hsl(H, S, L). Onde H pode variar de a 36 , S e L de % a 1 %. As funes rgba(R, G, B, A) e hsla(H, S, L, A) possuem um ltimo parmetro que signica a opacidade da cor (alpha). Esse valor varia de a 1 com passo de .1.
Unidades de medida
Em CSS possumos diversas unidades de medida como podemos vericar 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
pt - ponto (1pt o mesmo que 1/72 polegadas). px - pixels (um ponto na tela do computador). Da lista acima, as unidades mais utilizadas so px e em.
Propriedades de texto
color - dene a cor do texto. direction - dene a direo do texto. letter-spacing - dene o espaamento entre as letras do texto. line-height - dene a altura das linhas de um texto. text-align - dene o alinhamento horizontal do texto. text-decoration - dene uma "decorao"ou efeito para um texto. text-indent - dene a identao da primeira linha de um bloco de texto. text-transform - dene a capitalizao do texto. vertical-align - dene o alinhamento vertical do texto. white-space - dene como os espaos do texto sero tratados.
www.facebook.com/k19treinamentos
49
CSS
50
Propriedades de fonte
font-family - dene a famlia de fontes a ser utilizada. font-size - dene o tamanho da fonte. font-style - dene o estilo de fonte. font-variant - dene se a fonte ser utilizada no formato small-caps ou no. font-weight - dene a espessura dos traos de uma fonte. font - dene todas as propriedades de fonte em uma nica linha.
1 2 3 4 5 6 7 8 9 1 11 p { font - family : sans - serif , serif , monospace ; font - size : 14 px ; font - style : italic ; font - variant : small - caps ; font - weight : bold ; } a { font : italic small - caps bold 14 px /2 px sans - serif , serif , monospace ; }
Cdigo CSS 3.16: Propriedades de fonte
Propriedades de lista
list-style-image - dene qual ser o indicador de item da lista. list-style-position - dene se o indicador de item da lista ser exibido do lado de dentro ou de fora do elemento do item. list-style-type - dene qual o tipo de indicador de item ser usado na lista. list-style: dene todas as propriedades de lista em uma nica linha.
1 2 3 4 5 ul { list - style - image : url ( http : // www . k19 . com . br / css / img / box - dot - orange . png ) ; list - style - position : inside ; list - style - type : disc ; }
50
www.k19.com.br
51
6 7 8 9 1
CSS
ol { list - style : square outside url ( http : // www . k19 . com . br / css / img / box - dot - orange . png ) ; }
Cdigo CSS 3.17: Propriedades de lista
Propriedades de tabela
border-collapse - faz com que as bordas das clulas no quem duplicadas quando estas possurem bordas.
1 2 3 4 5 6 table { border - collapse : collapse ; } table , th , td { border : 1 px solid blue ; }
Cdigo CSS 3.18: Propriedades de tabela
Propriedades de dimenso
width - dene a largura de um elemento. min-width - dene a largura mnima de um elemento. max-width - dene a largura mxima de um elemento. height - dene a altura de um elemento. min-height - dene a altura mnima de um elemento. max-height - dene a altura mxima de um elemento.
1 2 3 4 5 6 7 8 9 1 11 div { width : 3 px ; height : 3 px ; } h1 { min - width : 1 px ; max - width : 3 px ; min - height : 1 px ; max - height : 3 px ; }
Cdigo CSS 3.19: Propriedades de dimenso
Exerccios de Fixao
A partir de agora, o nosso objetivo formatar a pgina principal do blog da K19. Ao trmino dos exerccios, essa pgina deve car igual ilustrao abaixo.
6
www.facebook.com/k19treinamentos
51
CSS
52
O primeiro passo criar o documento HTML com o contedo desejado. Faa um arquivo chamado index.html na pasta css com o seguinte contedo.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 <! DOCTYPE html > < html > < head > < title > </ title > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < link rel = " stylesheet " type = " text / css " href = " blog . css " / > </ head > < body > < div id = " blog " > < div id = " header " > <a id = " logo - link " href = " # " > < img src = " logo . png " alt = " Tangram representando o logo do blog da K19 " title = " K19 Blog " / > </ a > < ul id = " main - menu " > < li > <a class = " selected " href = " # " > Home </ a > </ li > < li > <a href = " # " > Arquivo </ a > </ li > < li > <a href = " # " > Site da K19 </ a > </ li > </ ul > < div id = " login - area " > <a href = " # " > Efetuar login </ a > </ div >
52
www.k19.com.br
53
26 27 28 29 3 31 32 33 34 35 36 37 38 39 4 41 42 43 44 45 46 47 48 49 5 51 52 53 54 55 56 57 58 59 6 61 62 63 64 65 66 67 68 69 7 71 72 73 74 75 76 77 78 79 8 81 82 83 84 85 86 87 88 89 9 91 92 93 94 95 </ div > < div id = " main - content " > < h1 > Primeiro post no Blog da K19 ! </ h1 > < div id = " blog - content " > <p > Lorem ipsum dolor sit amet , consectetur adipiscing elit . Integer convallis pharetra nibh , in rhoncus dolor convallis eu . Mauris iaculis odio ut nunc scelerisque luctus sit amet quis purus . Morbi venenatis cursus tellus , non ultricies libero interdum nec . Etiam in imperdiet velit . Pellentesque feugiat felis ac mi tempor et semper lacus luctus . Morbi eu nunc dui , ac ullamcorper lorem . Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae ; </ p > < table > < thead > < tr > < th > Integer </ th > < th > Proint </ th > < th > Nunc </ th > </ tr > </ thead > < tbody > < tr > < td class = " first - col " > Donec id massa </ td > < td > Vestibulum eget </ td > < td > Quisque venenatis magna vitae </ td > </ tr > < tr > < td class = " first - col " > Etiam a sollicitudin </ td > < td > Quisque venenatis </ td > < td > Nam tempus tincidunt posuere </ td > </ tr > < tr > < td class = " first - col " > Etiam sit </ td > < td > Praesent felis </ td > < td > Vestibulum nunc magna </ td > </ tr > < tr > < td class = " first - col " > Cras eros est </ td > < td > Mauris rhoncus </ td > < td > Donec eget porttitor ipsum </ td > </ tr > < tr > < td class = " first - col " > Morbi vel erat </ td > < td > Pellentesque feugiat </ td > < td > Praesent aliquam , nunc nec placerat </ td > </ tr > </ tbody > </ table > <p > Nunc in risus odio , mollis sollicitudin sem . Vivamus hendrerit eros sed mauris bibendum elementum . Nullam cursus dictum sem , ut semper dolor cursus eu . Donec id massa quis libero mattis iaculis . Cras in luctus velit . Quisque id nisi nunc , sed mollis mi . Mauris sit amet purus libero , ut dignissim tellus . Aenean ac risus massa . Mauris lacinia tempus orci , nec pellentesque metus fringilla quis . </ p > < ul > < li > Integer vitae aliquet ligula . Etiam a sollicitudin orci . Nam tempus tincidunt posuere . </ li > < li >
CSS
www.facebook.com/k19treinamentos
53
CSS
96 97 98 99 1 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 11 111 112 113 114 115 116 117 118 119 12 121 122 123 124 125 126 127 128 129 13 131 132 133 134 135 136 137 138 139 14 141 142 143 144 145 146 147 148 149 Proin consectetur justo nisl , nec scelerisque est . Morbi nec urna sit amet arcu tincidunt pretium eu id libero . Ut quis ligula velit . Praesent aliquam , nunc nec placerat vestibulum , nisi eros rutrum erat , vel imperdiet nisi dui at metus . Nam mollis magna quis ligula dignissim . </ li > < li > Duis augue diam , iaculis quis egestas id , placerat vitae turpis . </ li > </ ul > </ div > </ div > < div id = " side - content " > <a id = " ad " href = " # " > < img src = " publicidade . png " alt = " Propaganda da Pizzaria K19 com a imagem de uma pizza ao fundo " title = " Pizzaria K19 " / > </ a > < form id = " contact - form " action = " # " > < h3 > Contato </ h3 > < div > < label for = " contact - form - name " > Nome </ label > < input id = " contact - form - name " type = " text " name = " nome " / > </ div > < div > < label for = " contact - form - email " >E - mail </ label > < input id = " contact - form - email " type = " text " name = " nome " / > </ div > < div > < label for = " contact - form - message " > Mensagem </ label > < textarea id = " contact - form - message " > </ textarea > </ div > < div > < input id = " contact - form - newsletter " type = " checkbox " name = " newsletter " / > < label for = " contact - form - newsletter " > Deseja receber a nossa newsletter ? </ label > </ div > < input type = " submit " value = " Enviar " / > </ form > </ div > < div id = " footer " > & copy ; Copyright 2 13. K19 Treinamentos . </ div > </ div > </ body > </ html >
Cdigo HTML 3.7: k19-blog.html
54
Copie os arquivos logo.png, publicidade.png e list-bullet.png da pasta K19-Arquivos/imagens/k02 da sua rea de trabalho para a pasta css.
7
8 Para denir a formatao da pgina que desejamos criar, faa um arquivo chamado blog.css na pasta css com o seguinte contedo.
* {
54
www.k19.com.br
55
2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 3 31 32 33 34 35 36 37 38 39 4 41 42 43 44 45 46 47 48 49 5 51 52 53 54 55 56 57 58 59 6 61 62 63 64 65 66 67 68 69 7 71 font - family : arial , sans - serif ; } body { white - space : nowrap ; } # blog { width : 98 px ; } # logo - link { text - decoration : none ; } # logo - link img { vertical - align : bottom ; } # main - menu { list - style : none ; } # main - menu li a { background : # cecece ; color : #333333; text - decoration : none ; } # main - menu li a . selected { background : # 74 f83 ; color : # ffffff ; } # main - content { vertical - align : top ; width : 66 px ; color : #666666; white - space : normal ; } # main - content h1 { background : # 74 f83 ; color : # ffffff ; font - size : 24 px ; } # blog - content > table { width : 1 %; } # blog - content > table th { color : # ffffff ; background : #5 f5f5f ; } # blog - content > table td { background : # dddddd ; color : #333333; } # blog - content > table td . first - col { background : # a9a9a9 ; } # blog - content ul { list - style - image : url ( list - bullet . png ) ; } # side - content {
CSS
www.facebook.com/k19treinamentos
55
CSS
72 73 74 75 76 77 78 79 8 81 82 83 84 85 86 87 88 89 9 91 92 93 94 95 96 97 98 99 1 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 11 111 112 113 114 115 116 117 118 119 12 121 vertical - align : top ; } # contact - form { text - align : right ; } # contact - form h3 { font - size : 18 px ; color : # 74 f83 ; text - align : left ; } # contact - form div { text - align : left ; } # contact - form label { font - size : 14 px ; vertical - align : middle ; color : #666666; } # contact - form input , # contact - form textarea { width : 288 px ; font - size : 18 px ; } # contact - form textarea { height : 1 px ; } # contact - form input [ type = checkbox ] { width : auto ; } # contact - form input [ type = submit ] { background : # 74 f83 ; color : # ffffff ; text - transform : uppercase ; font - size : 14 px ; width : auto ; } # footer { font - size : 12 px ; color : #999999; text - align : center ; }
Cdigo CSS 3.20: blog.css
56
Linhas 1 a 3: Selecionamos, atravs da propriedade font-family e do seletor universal (*), as famlias de fontes que devem ser utilizadas para todos os elementos HTML. No caso, as famlias selecionadas foram arial e sans-serif. 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: Denimos, atravs da propriedade width, que o contedo do blog ter uma largura de 980px. Linhas 13 a 15: Denimos, atravs da propriedade text-decoration, que o texto do logo no deve receber nenhum tipo de decorao.
56
www.k19.com.br
57
CSS
Linhas 17 a 19: Denimos, atravs da propriedade vertical-align, que a imagem do logo deve ser alinhada inferiormente aos elementos da mesma linha. Linhas 21 a 23: Denimos, atravs da propriedade list-style, que nenhum smbolo deve ser utilizado nos itens do menu principal. Linhas 25 a 29: Denimos, atravs das propriedades background e color, as cores #cecece e #333333 para o fundo e para o texto dos links do menu principal respectivamente. Alm disso, retiramos as decoraes desses links atravs da propriedade text-decoration. Linhas 31 a 33: Denimos, atravs das propriedades background e color, as cores #074f83 e #ffffff para o fundo e para o texto do link selecionado do menu principal respectivamente Linhas 36 a 41: Denimos que o contedo principal ser alinhado verticalmente na parte de cima, ter largura de 660px e a cor do texto ser #666666. Linhas 43 a 47: Denimos, atravs das propriedades background, color e font-size, que os elementos H1 do contedo principal tero cor de fundo #074f83 e fonte de cor #ffffff com tamanho 24px. Linhas 49 a 51: Denimos, atravs da propriedade width, que toda tabela lha de contedo do blog ter largura de 100 Linhas 53 a 56: Denimos, atravs da propriedade background e color, as cores #ffffff e #5f5f5f para o texto e fundo dos ttulos das colunas das tabelas lhas do contedo do blog respectivamente. Linhas 58 a 61: Denimos, atravs da propriedade background e color, as cores #333333 e #dddddd para o texto e fundo das clulas das tabelas lhas do contedo do blog respectivamente. Linhas 63 a 65: Denimos, atravs da propriedade background, a cor #a9a9a9 para o fundo das clulas da primeira coluna das tabelas lhas do contedo do blog. Linhas 67 a 69: Denimos, atravs da propriedade list-style-image, a imagem que deve ser utilizada como smbolo dos itens de todas as listas sem ordem do contedo do blog. Linhas 71 a 73: Denimos, atravs da propriedade vertical-align, que o contedo lateral ser alinhado verticalmente na parte de cima. Linhas 75 a 77: Denimos, atravs da propriedade text-align, que o texto do formulrio de contato ser alinhado direita. Linhas 79 a 83: Denimos, atravs das propriedades font-size color e text-align, que todo ttulo nvel 3 dentro do formulrio de contato ter fonte com tamanho 18px e cor #074f83 e o texto ser alinhado esquerda. Linhas 85 a 87: Denimos, atravs da propriedade text-align, que todo elemento DIV dentro do formulrio de contato ter o texto alinhado esquerda Linhas 89 a 93: Denimos, atravs das propriedades font-size, vertical-align e color, que todo rtulo dentro do formulrio de contato ter fonte com tamanho 14px e cor #666666 e o alinhamento vertical do texto ser no centro. Linhas 95 a 99: Denimos, atravs das propriedades width e font-size, a largura e o tamanho da fonte dos elementos INPUT e TEXTAREA do formulrio de contato. Linhas 101 a 103: Denimos, atravs da propriedade height, a altura dos elementos TEXTAREA do formulrio de contato. Linhas 105 a 107: Denimos, atravs da propriedade width, a largura dos checkboxes do formulrio de contato.
www.facebook.com/k19treinamentos
57
CSS
58
Linhas 109 a 115: Denimos, 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: Denimos, 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 podemos 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).
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 3 px 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 2 3 4 5 6 div { width : 3 px ; padding : 1 px ; margin : 1 px ; border : 1 px solid green ; }
Cdigo CSS 3.21: Exemplo de uso incorreto das dimenses de um elemento
Num primeiro momento pode parecer que tudo est correto, porm ao abrir a pgina voc perceber que seu elemento est ultrapassando o limite dos 3 px. Isso ocorre porque devemos incluir
58
www.k19.com.br
59
CSS
as margens internas, as margens externas e a borda na hora de calcular as dimenses nais de um elemento. No exemplo acima, o correto seria:
1 2 3 4 5 6 div { width : 258 px ; padding : 1 px ; margin : 1 px ; border : 1 px solid green ; }
O comportamento do box model facilmente observado em elementos de bloco. Em elementos inline o box model continua valendo, porm sempre devemos nos lembrar que eles no sofrem os efeitos das propriedades width e height. Alm disso, as propriedades margin-top, margin-bottom, padding-top e padding-bottom no afetam o posicionamento do contedo ao redor do elemento inline com tais propriedades. Observe o exemplo:
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 < html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < style type = " text / css " > span { border : 1 px solid red ; padding : 2 px ; margin : 4 px ; } </ style > </ head > < body > <p > Lorem ipsum dolor sit amet , consectetur adipiscing elit . Donec justo massa , sodales sit amet eleifend a , elementum eu nibh . Lorem ipsum dolor sit amet , consectetur adipiscing elit . Donec justo massa , sodales sit amet eleifend a , elementum eu nibh . < span > Donec </ span > egestas dolor quis turpis dictum tincidunt . Donec blandit tempus velit , sit amet adipiscing velit consequat placerat . Curabitur id mauris . Lorem ipsum dolor sit amet , consectetur adipiscing elit . Donec justo massa , sodales sit amet eleifend a , elementum eu nibh . Lorem ipsum dolor sit amet , consectetur adipiscing elit . Donec justo massa , sodales sit amet eleifend a , elementum eu nibh . </ p > </ body > </ html >
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 principais: block - o elemento que tiver a propriedade display: block far com que o prximo elemento seja posicionado logo abaixo e ter a largura denida 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 inlineblock. 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 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-block. Um elemento inline-block pode conter elementos de bloco, elementos 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 am de obtermos o resultado desejado. Isso perfeitamente normal. Contudo, em algumas situaes esse simples remanejamento dos elementos HTML no o suciente. Em alguns momentos temos a necessidade de que um elemento de bloco se comporte como um elemento inline e vice-versa. Para atingirmos esse objetivo devemos utilizar a propriedade display, como nos exemplos a seguir:
60
www.k19.com.br
61
1 2 3 div { display : inline ; }
Cdigo CSS 3.23: Elemento de bloco se comportando como inline
CSS
1 2 3
Num primeiro momento temos a falsa impresso de que podemos utilizar essa propriedade livremente sem nos preocuparmos com os valores originais da propriedade display dos elementos HTML. De acordo com a especicao do HTML, elementos inline no podem conter elementos de bloco. J elementos de bloco podem conter tanto elementos inline assim como elementos de bloco. 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, ao fazermos um span se comportar como um elemento de bloco, esse span no poder conter elementos de bloco, pois originalmente, antes da aplicao de qualquer regra CSS, o HTML produzido j continha um erro de validao e a propriedade display no deve ser aplicada nesses casos numa tentativa de tentar corrigir o comportamento de um elemento.
Exerccios de Fixao
Continuando o exerccio anterior, altere o arquivo blog.css conforme as linhas destacadas abaixo:
* { margin : ; padding : ; font - family : arial , sans - serif ; } body { white - space : nowrap ; } # blog { width : 98 px ; margin : auto ; } # header { border - bottom : 1 px solid # 74 f83 ; margin : 2 px ; } # logo - link { text - decoration : none ; }
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23
www.facebook.com/k19treinamentos
61
CSS
24 25 26 27 28 29 3 31 32 33 34 35 36 37 38 39 4 41 42 43 44 45 46 47 48 49 5 51 52 53 54 55 56 57 58 59 6 61 62 63 64 65 66 67 68 69 7 71 72 73 74 75 76 77 78 79 8 81 82 83 84 85 86 87 88 89 9 91 92 93
62
# logo - link img { margin : 2 px 4 px 2 px 2 px ; vertical - align : bottom ; } # main - menu { list - style : none ; display : inline - block ; } # main - menu li { display : inline - block ; margin : 1 px ; } # main - menu li a { display : block ; padding : 8 px 1 px 5 px 1 px ; background : # cecece ; color : #333333; text - decoration : none ; border - top - left - radius : 5 px ; /* CSS3 */ border - top - right - radius : 5 px ; /* CSS3 */ } # main - menu li a . selected { background : # 74 f83 ; color : # ffffff ; } # main - content { display : inline - block ; vertical - align : top ; width : 66 px ; color : #666666; white - space : normal ; } # main - content h1 { padding : 1 px ; background : # 74 f83 ; color : # ffffff ; font - size : 24 px ; } # blog - content { padding : 2 px ; } # blog - content > p { margin : 2 px ; } # blog - content > table { border - collapse : collapse ; border : 1 px solid #5 f5f5f ; margin : 2 px ; width : 1 %; } # blog - content > table th , # blog - content > table td { border : 1 px solid #5 f5f5f ; padding : 1 px 5 px ; } # blog - content > table th { color : # ffffff ;
62
www.k19.com.br
63
94 95 96 97 98 99 1 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 11 111 112 113 114 115 116 117 118 119 12 121 122 123 124 125 126 127 128 129 13 131 132 133 134 135 136 137 138 139 14 141 142 143 144 145 146 147 148 149 15 151 152 153 154 155 156 157 158 159 16 161 162 163 background : #5 f5f5f ; } # blog - content > table td { background : # dddddd ; color : #333333; } # blog - content > table td . first - col { background : # a9a9a9 ; } # blog - content ul { list - style - image : url ( list - bullet . png ) ; margin : 3 px ; } # side - content { display : inline - block ; margin : 2 px ; vertical - align : top ; } # ad { display : block ; margin : 2 px } # contact - form { text - align : right ; } # contact - form h3 { font - size : 18 px ; color : # 74 f83 ; text - align : left ; border - bottom : 1 px solid #999999; margin : 1 px ; padding : 5 px ; } # contact - form div { margin : 1 px ; text - align : left ; } # contact - form label { font - size : 14 px ; vertical - align : middle ; color : #666666; } # contact - form input , # contact - form textarea { display : block ; border : 1 px solid #999999; padding : 5 px ; margin : 4 px ; width : 288 px ; font - size : 18 px ; } # contact - form textarea { height : 1 px ; } # contact - form input [ type = checkbox ] { display : inline ; width : auto ; }
CSS
www.facebook.com/k19treinamentos
63
CSS
164 165 166 167 168 169 17 171 172 173 174 175 176 177 178 179 18 181 182 183 184
64
# contact - form input [ type = submit ] { margin : 1 px ; border : none ; padding : 1 px 2 px ; display : inline ; background : # 74 f83 ; color : # ffffff ; text - transform : uppercase ; font - size : 14 px ; width : auto ; } # footer { margin : 4 px ; padding : 1 px ; border - top : 1 px solid #999999; font - size : 12 px ; color : #999999; text - align : center ; }
Cdigo CSS 3.25: blog.css
Linhas 2 a 3: Denimos para todos os elementos, atravs das propriedades margin e padding, as margens externas e internas, respectivamente. Linha 13: Denimos, atravs da propriedade margin, a margem externa do contedo do blog. As margens da esquerda e direita sero calculadas automaticamente. Linhas 16 a 19: Denimos, atravs das propriedades border-bottom e margin, a borda inferior do cabealho, assim como suas margens externas. Linha 26: Denimos, atravs da propriedade margin, as margens externas da imagem do logo. Linha 32: Denimos, atravs da propriedade display, a forma de exibio do menu principal. Linhas 35 a 38: Denimos, atravs das propriedades display e margin, a forma de exibio e as margens externas dos itens menu principal. Linhas 41 a 42: Denimos, atravs das propriedades display e padding, a forma de exibio e as margens internas dos links do menu principal. Linhas 47 a 48: Denimos, 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: Denimos, atravs da propriedade display, a forma de exibio do contedo principal. Linha 65: Denimos, atravs da propriedade padding, a margem interna dos cabealhos nvel 1 do contedo principal. Linha 72: Denimos, atravs da propriedade padding, a margem interna do contedo do blog. Linha 76: Denimos, atravs da propriedade margin, a margem externa dos pargrafos lhos do contedo do blog. Linha 80: Denimos, atravs da propriedade border-collapse, a maneira como as bordas adjacentes das tabelas lhas do contedo do blog devem se comportar. Linhas 81 a 82: Denimos, atravs das propriedades border e margin, a borda e margem externa das tabelas lhas do contedo do blog.
64
www.k19.com.br
65
CSS
Linhas 86 a 90: Denimos, atravs das propriedades border e padding, a borda e margem interna dos ttulos das colunas e clulas das tabelas lhas do contedo do blog. Linha 108: Denimos, atravs da propriedade margin, as margens externas das listas do contedo do blog. Linhas 112 a 113: Denimos, atravs das propriedades display e margin, a forma de exibio e as margens externas do contedo lateral. Linhas 117 a 120: Denimos, atravs das propriedades display e margin, a forma de exibio e as margens externas da publicidade. Linhas 130 a 132: Denimos, 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: Denimos, atravs da propriedade margin, a margem externa dos elementos DIV do formulrio de contato. Linhas 148 a 151: Denimos, 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: Denimos, atravs da propriedade display, a forma de exibio dos checkboxes do formulrio de contato. Linhas 166 a 169: Denimos, 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: Denimos, 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: position - dene o tipo de posicionamento. top - dene a distncia do topo do elemento em relao a outro elemento ou em relao a janela. left - dene a distncia do lado esquerdo do elemento em relao a outro elemento ou em relao a janela. bottom - dene a distncia da base do elemento em relao a outro elemento ou em relao a janela. right - dene a distncia do lado direito do elemento em relao a outro elemento ou em relao a janela. Ao posicionarmos um elemento utilizando os atributos acima devemos nos lembrar que o sistema de coordenadas dentro de um documento HTML possui a coordenada (0,0) no canto superior esquerdo de um elemento ou da janela. Tambm devemos nos lembrar que se denirmos 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 denido, pois o tipo de posicionamento padro de todos os elementos. O posicionamento esttico denido atravs do atributo position com o valor static e no afetado pelos atributos top, bottom, left e right.
Posicionamento xo
Um elemento com posicionamento xo posicionado em relao janela do navegador. denido atravs do atributo position com o valor fixed e sua posio denida pelos atributos top, bottom, left e/ou right. Todos os elementos posicionados xamente 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. denido atravs do atributo position com o valor relative e sua posio denida pelos atributos top, bottom, left e/ou right.
Posicionamento absoluto
Um elemento com posicionamento absoluto posicionado em relao um elemento ancestral ou janela do navegador. denido atravs do atributo position com o valor absolute e sua posio denida pelos atributos top, bottom, left e/ou right. Quando nenhum dos ancestrais de um elemento posicionado absolutamente dene um tipo de posicionamento, o posicionamento absoluto ocorre em relao janela do navegador. Para que ele ocorra em relao a um ancestral, o elemento ancestral deve denir um posicionamento relativo, por exemplo.
Exerccios de Fixao
10
Continuando o exerccio anterior, altere o arquivo blog.css conforme as linhas destacadas abaixo:
* { margin : ; padding : ; font - family : arial , sans - serif ; } body { white - space : nowrap ; } # blog { width : 98 px ; margin : auto ; } # header { position : relative ; border - bottom : 1 px solid # 74 f83 ;
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18
66
www.k19.com.br
67
19 2 21 22 23 24 25 26 27 28 29 3 31 32 33 34 35 36 37 38 39 4 41 42 43 44 45 46 47 48 49 5 51 52 53 54 55 56 57 58 59 6 61 62 63 64 65 66 67 68 69 7 71 72 73 74 75 76 77 78 79 8 81 82 83 84 85 86 87 88 margin : } # logo - link { text - decoration : none ; } # logo - link img { margin : 2 px 4 px 2 px 2 px ; vertical - align : bottom ; } # main - menu { list - style : none ; display : inline - block ; } # main - menu li { display : inline - block ; margin : 1 px ; } # main - menu li a { display : block ; padding : 8 px 1 px 5 px 1 px ; background : # cecece ; color : #333333; text - decoration : none ; border - top - left - radius : 5 px ; /* CSS3 */ border - top - right - radius : 5 px ; /* CSS3 */ } # main - menu li a . selected { background : # 74 f83 ; color : # ffffff ; } # main - content { display : inline - block ; vertical - align : top ; width : 66 px ; color : #666666; white - space : normal ; } # main - content h1 { padding : 1 px ; background : # 74 f83 ; color : # ffffff ; font - size : 24 px ; } # blog - content { padding : 2 px ; } # blog - content > p { margin : 2 px ; } # blog - content > table { border - collapse : collapse ; border : 1 px solid #5 f5f5f ; margin : 2 px ; width : 1 %; } # blog - content > table th , # blog - content > table td { 2 px ;
CSS
www.facebook.com/k19treinamentos
67
CSS
89 9 91 92 93 94 95 96 97 98 99 1 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 8 1 9 11 111 112 113 114 115 116 117 118 119 12 121 122 123 124 125 126 127 128 129 13 131 132 133 134 135 136 137 138 139 14 141 142 143 144 145 146 147 148 149 15 151 152 153 154 155 156 157 158 border : 1 px solid #5 f5f5f ; padding : 1 px 5 px ; } # blog - content > table th { color : # ffffff ; background : #5 f5f5f ; } # blog - content > table td { background : # dddddd ; color : #333333; } # blog - content > table td . first - col { background : # a9a9a9 ; } # blog - content ul { list - style - image : url ( list - bullet . png ) ; margin : 3 px ; } # side - content { display : inline - block ; margin : 2 px ; vertical - align : top ; } # ad { display : block ; margin : 2 px } # contact - form { text - align : right ; } # contact - form h3 { font - size : 18 px ; color : # 74 f83 ; text - align : left ; border - bottom : 1 px solid #999999; margin : 1 px ; padding : 5 px ; } # contact - form div { margin : 1 px ; text - align : left ; } # contact - form label { font - size : 14 px ; vertical - align : middle ; color : #666666; } # contact - form input , # contact - form textarea { display : block ; border : 1 px solid #999999; padding : 5 px ; margin : 4 px ; width : 288 px ; font - size : 18 px ; } # contact - form textarea { height : 1 px ;
68
68
www.k19.com.br
69
159 16 161 162 163 164 165 166 167 168 169 17 171 172 173 174 175 176 177 178 179 18 181 182 183 184 185 186 187 188 189 19 191 192 193 194 195 196 } # contact - form input [ type = checkbox ] { display : inline ; width : auto ; } # contact - form input [ type = submit ] { margin : 1 px ; border : none ; padding : 1 px 2 px ; display : inline ; background : # 74 f83 ; color : # ffffff ; text - transform : uppercase ; font - size : 14 px ; width : auto ; } # footer { margin : 4 px ; padding : 1 px ; border - top : 1 px solid #999999; font - size : 12 px ; color : #999999; text - align : center ; } # login - area { position : absolute ; top : px ; right : px ; padding : 4 px ; } # login - area a { color : # 74 F83 ; }
Cdigo CSS 3.26: blog.css
CSS
Linha 17: Denimos, atravs da propriedade position, o tipo de posicionamento do cabealho. Linhas 187 a 192: Denimos, 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: Denimos, atravs da propriedade color, a cor do link da rea de login.
Desaos
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
Para que possamos criar uma pgina que possua um comportamento e oferecer aos nossos usurios 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 lho 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 2 3 4 5 6 7 8 9 1 11 12 13 14 15 < html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Inserindo cdigo JavaScript em um documento HTML </ title > < script type = " text / javascript " src = " codigo . js " > </ script > < script type = " text / javascript " > window . onload = function () { document . getElementById ( ola - mundo ) . innerHTML = Ol Mundo ! ; } </ script > </ head > < body > <p id = " ola - mundo " > </ p > </ body > </ html >
Cdigo HTML 4.1: Inserindo cdigo JavaScript em um documento HTML
Operadores
Para manipular os valores das variveis de um programa, devemos utilizar os operadores oferecidos 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
Atribuio (=, +=, -=, *=, /=, %=) Relacional (==, !=, <, <=, >, >=) Lgico (&&, ||)
Aritmtico
Os operadores aritmticos funcionam de forma muito semelhante aos operadores na matemtica. Os operadores aritmticos so: Soma + Subtrao Multiplicao * Diviso / Mdulo %
1 2 3 4 5 6 7 8 var var var var var x = x = x = umMaisUm = 1 + 1; tresVezesDois = 3 * 2; quatroDivididoPor2 = 4 / 2; seisModuloCinco = 6 % 5; x = 7; x + 1 * 2; x - 4; x / (6 - 2 + (3*5) /(16 -1) ) ; // // // // umMaisUm = 2 tresVezesDois = 6 quatroDivididoPor2 = 2 seisModuloCinco = 1
// x = 9 // x = 1 // x = 2
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. Em linguagens de programao, o mdulo de um nmero o resto da diviso desse nmero por outro. No exemplo acima, o resto da diviso de 6 por 5 igual a 1. Alm disso, lemos a expresso 6%5 da seguinte forma: seis mdulo cinco.
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 operadores de atribuio so: Simples = Incremental +=
72
www.k19.com.br
73
J AVA S CRIPT
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 2 3 4 5 6 7 8 var var t = t = t = t = t = t = valor = 2; t = false ; ( valor == 2) ; ( valor != 2) ; ( valor < 2) ; ( valor <= 2) ; ( valor > 1) ; ( valor >= 1) ;
// // // // // //
t t t t t t
= = = = = =
www.facebook.com/k19treinamentos
73
J AVA S CRIPT
74
Lgico
A linguagem JavaScript permite vericar duas ou mais condies atravs de operadores lgicos. Os operadores lgicos devolvem valores booleanos. Os operadores lgicos so: E lgico && OU lgico ||
1 2 3 4 5 6 7 var valor = 3 ; var teste = false ; teste = valor < 4 teste = valor < 4 teste = valor > 3 teste = valor > 3 teste = valor < 5
// // // // //
= = = = =
Controle de uxo
if e else
O comportamento de uma aplicao pode ser inuenciado por valores denidos 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 sistema do banco deve vericar a data de vencimento do boleto para aplicar ou no uma multa por atraso. Para vericar uma determinada condio e decidir qual bloco de instrues deve ser executado, devemos aplicar o comando if.
1 2 3 4 5 if ( preco < ) { alert ( O preo do produto no pode ser negativo ) ; } else { alert ( Produto cadastrado com sucesso ) ; }
Cdigo Javascript 4.7: Comando if
O comando if permite que valores booleanos sejam testados. Se o valor passado como parmetro 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 necessrio 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 denir quantas vezes um determinado trecho de cdigo deve ser executado pelo computador.
1 2 3 4 5 6 var contador = ;
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.
1 2 3 for ( var contador = ; contador < 1 document . writeln ( Bom Dia ) ; } ; contador ++) {
Exerccios de Fixao
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.
1
1 2 3 4 5 6 7 8
< html > < head > < title > Imprime nome </ title > < script type = " text / javascript " src = " imprime - nome . js " > </ script > </ head > < body > </ body > </ html >
Cdigo HTML 4.2: imprime-nome.html
www.facebook.com/k19treinamentos
75
J AVA S CRIPT
1 2 3 4 for ( var contador = ; contador < 1 ; contador ++) { document . writeln ( Rafael Cosentino ) ; document . writeln ( < br / > ) ; }
Cdigo Javascript 4.11: imprime-nome.js
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.
1 2 3 4 5 6 7 8
< html > < head > < title > Imprime ate 1 </ title > < script type = " text / javascript " src = " imprime - ate -1 </ head > < body > </ body > </ html >
Cdigo HTML 4.3: imprime-ate-100.html
1 2 3 4
for ( var contador = 1; contador <= 1 document . writeln ( contador ) ; document . writeln ( < br / > ) ; }
; contador ++) {
Crie um documento HTML vinculado a um documento JavaScript que percorra todos os nmeros 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:
3
* ** * ** * **
Salve os documentos na pasta javascript e em seguida abra o arquivo html no navegador.
1 2 3 4 5 6 7 8 < html > < head > < title > Imprime padro 1 </ title > < script type = " text / javascript " src = " imprime - padrao -1. js " > </ script > </ head > < body > </ body > </ html >
Cdigo HTML 4.4: imprime-padrao-1.html
1 2
; contador ++) {
76
www.k19.com.br
77
3 4 5 6 7 8 9 1 if ( resto == 1) { document . writeln ( * ) ; } else { document . writeln ( ** ) } document . writeln ( < br / > ) }
Cdigo Javascript 4.13: imprime-padrao-1.js
J AVA S CRIPT
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
1 2 3 4 5 6 7 8 9 1
for ( var contador = 1; contador <= 1 var resto = contador % 4; if ( resto == ) { document . writeln ( PI ) ; } else { document . writeln ( contador ) ; } document . writeln ( < br / > ) ; }
; contador ++) {
Exerccios Complementares
www.facebook.com/k19treinamentos
77
J AVA S CRIPT
1
78
Crie um documento HTML vinculado a um documento JavaScript que imprima os nmeros de 1 at 50 duas vezes. Crie um documento HTML vinculado a um documento JavaScript que imprima na pgina o nome da formao bsica da K19, 5 vezes. E entre cada impresso o nome deste curso 3 vezes.
2
Crie um documento HTML vinculado a um documento JavaScript que percorra todos os nmeros de 1 at 60. Para os nmeros multiplo de, 3 imprima "**"; Para o restante imprima "*".
3
Crie um documento HTML vinculado a um documento JavaScript que imprima todos os nmeros de 1 at 80 e imprimir * no lugar de todos os nmeros mltiplos de 4 e 7.
4
Crie um documento HTML vinculado a um documento JavaScript que imprima na pgina um tringulo de *. Veja o exemplo abaixo:
5
6 Crie um documento HTML vinculado a um documento JavaScript que imprima na tela vrios tringulos de *. Observe o padro abaixo.
Os nmeros de Fibonacci so uma sequncia de nmeros denida recursivamente. O primeiro elemento da sequncia 0 e o segundo 1. Os outros elementos so calculados somando os dois antecessores.
7
Crie um documento HTML vinculado a um documento JavaScript para imprimir os 30 primeiros nmeros da sequncia de Fibonacci.
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.
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 podemos acompanhar no cdigo abaixo:
1 2 3 4 5 6 7 8 9 1 11 12 13 var contaBancaria = new Object () ; contaBancaria . numero = 1234; contaBancaria . saldo = 1 ; contaBancaria . deposita = function ( valor ) { if ( valor > ) { this . saldo += valor ; } else { alert ( Valor invlido ! ) ; } };
Cdigo Javascript 4.28: Criando um objeto
Outra maneira de se criar um objeto utilizando a notao literal mais conhecida como JSON (JavaScript Object Notation):
1 2 3 4 5 var contaBancaria = { numero : 1234 , saldo : 1 , deposita : function ( valor ) { if ( valor > ) {
80
www.k19.com.br
81
6 7 8 9 1 11 12 this . saldo += valor ; } else { alert ( Valor invlido ! ) ; } } }
Cdigo Javascript 4.29: Criando um objeto utilizando a notao literal
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, atravs do prottipo Array com parmetros e atravs da forma literal.
1 2 3 4 5 6 7 8 var numeros = new Array () ; numeros [ ] = 34; numeros [1] = 52; numeros [2] = 83; var nomes = new Array ( Jonas , Rafael , Marcelo ) ; var cidades = [ So Paulo , Rio de Janeiro , Curitiba ];
Cdigo Javascript 4.30: Criando um array
Mtodos do array
Um array possui diversos mtodos para nos auxiliar nas tarefas mais comuns quando trabalhamos 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 nal 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
unshift() - adiciona um objeto no comeo do array e retorna o novo tamanho do array. valueOf() - retorna o valor primitivo de um array.
Exerccios de Fixao
5 Crie um documento HTML vinculado a um documento JavaScript que armazene 10 nmeros inteiros em um array. Preencha todas as posies do array com valores sequenciais e em seguida imprima-os na tela. Em seguida, escolha duas posies aleatoriamente e troque os valores de uma posio pelo da outra. Repita essa operao 10 vezes. Ao nal, imprima o array novamente.
1 2 3 4 5 6 7 8
< html > < head > < title > Arrays </ title > < script type = " text / javascript " src = " arrays . js " > </ script > </ head > < body > </ body > </ html >
Cdigo HTML 4.14: arrays.html
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27
var array = new Array (1 ) ; for ( var i = ; i < array . length ; i ++) { array [ i ] = i ; } for ( var i = ; i < array . length ; i ++) { document . writeln ( array [ i ]) ; document . writeln ( < br / > ) ; } for ( var i = ; var posicao1 var posicao2 var auxiliar i = = = < 1 ; i ++) { Math . floor ( Math . random () *1 ) ; Math . floor ( Math . random () *1 ) ; array [ posicao1 ];
array [ posicao1 ] = array [ posicao2 ]; array [ posicao2 ] = auxiliar ; } document . writeln ( " --------------------" ) ; document . writeln ( < br / > ) ; for ( var i = ; i < array . length ; i ++) { document . writeln ( array [ i ]) ; document . writeln ( < br / > ) ; }
Cdigo Javascript 4.31: arrays.js
Crie um documento HTML vinculado a um documento JavaScript que armazene 10 nmeros inteiros em um array. Preencha todas as posies do array com valores aleatrios e em seguida imprima-os na tela. Aps imprimir o array, ordene o array do menor valor para o maior. Ao nal, imprima o array ordenado.
6
82
www.k19.com.br
83
1 2 3 4 5 6 7 8 < html > < head > < title > Ordena do nmero menor para o maior </ title > < script type = " text / javascript " src = " ordena . js " > </ script > </ head > < body > </ body > </ html >
Cdigo HTML 4.15: ordena.html
J AVA S CRIPT
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17
var array = new Array (1 ) ; for ( var i = ; i < array . length ; i ++) { array [ i ] = Math . floor ( Math . random () *1 ) ; } for ( var i = ; i < array . length ; i ++) { document . writeln ( array [ i ]) ; } array . sort () ; document . writeln ( " --------------------" ) ; for ( var i = ; i < array . length ; i ++) { document . writeln ( array [ i ]) ; }
Cdigo Javascript 4.32: ordena.js
Exerccios Complementares
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 nal, imprima esse array.
8
Crie um documento HTML vinculado a um documento JavaScript que preencha um array do tipo int com 15 nmeros aleatrios. Imprima esse array. Aps isso, ordene o array do menor valor para o maior valor. Em seguida, imprima esse array novamente com os nmeros ordenados.
9
www.facebook.com/k19treinamentos
83
J AVA S CRIPT
84
84
www.k19.com.br
APNDICE
J AVASCRIPT AVANADO
Objetos
Um objeto um conjunto de propriedades. Toda propriedade possui nome e valor. O nome de uma propriedade pode ser qualquer sequncia de caracteres. O valor de uma propriedade pode ser qualquer valor exceto undefined. Podemos adicionar uma nova propriedade a um objeto que j existe. Um objeto pode herdar propriedades de outro objeto utilizando a ideia de prototype.
Criando Objetos
Um objeto pode ser criado de forma literal. Veja o exemplo a seguir.
1 2 var objeto_vazio = {}; var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " };
Cdigo Javascript A.1: Criando um objeto de forma literal
Um objeto pode se relacionar com outros objetos atravs de propriedades. Observe o cdigo abaixo.
1 2 3 4 5 6 var formacao_java = { sigla : " K1 " , nome : " Formao Desenvolvedor Java " , cursos : [ { sigla : " K11 " , nome : " Orientao a Objetos em Java " } , { sigla : " K12 " , nome : " Desenvolvimento Web com JSF2 e JPA2 " } , ] };
Cdigo Javascript A.2: Criando um objeto associado a outro
85
J AVASCRIPT AVANADO
1 2 3 4 5 6 7 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; curso . sigla = " K12 " ; curso . nome = " Desenvolvimento Web com JSF2 e JPA2 " ; console . log ( curso . sigla ) ; console . log ( curso . nome ) ;
Cdigo Javascript A.4: Alterando o valor de uma propriedade
86
Referncias
Os objetos so acessados atravs de referncias
1 2 3 4 5 6 7 8 9 1 11 12 13 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; // copiando uma referncia var x = curso ; x . sigla = " K12 " ; x . nome = " Desenvolvimento Web com JSF2 e JPA2 " ; // imprime K12 console . log ( curso . sigla ) ; // imprime Desenvolvimento Web com JSF2 e JPA2 console . log ( curso . nome ) ;
Cdigo Javascript A.5: Referncia
Prottipos
Podemos criar um objeto baseado em outro objeto existente (prottipo). Para isso, podemos utilizar a propriedade especial __proto__. Observe o cdigo abaixo.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 // criando um objeto com duas propriedades var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; // criando um objeto sem propriedades var novo_curso = {}; // definindo o primeiro objeto como prottipo do segundo novo_curso . __proto__ = curso ; // imprime K11 console . log ( novo_curso . sigla ) ; // imprime Orientao a Objetos em Java console . log ( novo_curso . nome ) ;
Cdigo Javascript A.6: Criando objeto com __proto__
Tambm podemos utilizar o mtodo create de Object para criar objetos baseados em objetos existentes. Veja o exemplo abaixo.
1 2 3 4 5 6 7 // criando um objeto com duas propriedades var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; // criando um objeto sem propriedades var novo_curso = {}; // definindo o primeiro objeto como prottipo do segundo
86
www.k19.com.br
87
8 9 1 11 12 13 14 novo_curso = Object . create ( curso ) ; // imprime K11 console . log ( novo_curso . sigla ) ; // imprime Orientao a Objetos em Java console . log ( novo_curso . nome ) ;
Cdigo Javascript A.7: Criando objetos com Object.create()
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 2 3 4 5 6 7 8 9 1 11 12 13 14 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; var novo_curso = Object . create ( curso ) ; curso . carga_horaria = 36; // imprime K11 console . log ( novo_curso . sigla ) ; // imprime Orientao a Objetos em Java console . log ( novo_curso . nome ) ; // imprime 36 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 prottipo desse objeto.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; var novo_curso = Object . create ( curso ) ; novo_curso . carga_horaria = 36; // imprime K11 console . log ( curso . sigla ) ; // imprime Orientao a Objetos em Java console . log ( curso . nome ) ; // imprime undefined console . log ( curso . carga_horaria ) ;
Cdigo Javascript A.9: Adicionando uma propriedade em um objeto
Se o valor de uma propriedade de um objeto for modicado, os objetos que o utilizam como prottipo podem ser afetados.
1 2 3 4 5 6 7 8 9 1 11 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; var novo_curso = Object . create ( curso ) ; curso . sigla = " K12 " ; curso . nome = " Desenvolvimento Web com JSF2 e JPA2 " ; // imprime K12 console . log ( novo_curso . sigla ) ; // imprime Desenvolvimento Web com JSF2 e JPA2
www.facebook.com/k19treinamentos
87
J AVASCRIPT AVANADO
12 console . log ( novo_curso . nome ) ;
Cdigo Javascript A.10: Modicando o valor de uma propriedade de um objeto que utilizado como prottipo
88
Por outro lado, alteraes nos valores das propriedades de um objeto no afetam o prottipo desse objeto.
1 2 3 4 5 6 7 8 9 1 11 12 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; var novo_curso = Object . create ( curso ) ; novo_curso . sigla = " K12 " ; novo_curso . nome = " Desenvolvimento Web com JSF2 e JPA2 " ; // imprime K11 console . log ( curso . sigla ) ; // imprime Orientao a Objetos em Java console . log ( curso . nome ) ;
Cdigo Javascript A.11: Modicando o valor de uma propriedade de um objeto
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 prottipo. Dessa forma, alteraes no valor dessa propriedade no prottipo no afetam mais o valor dela no objeto gerado a partir do prottipo.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; var novo_curso = Object . create ( curso ) ; novo_curso . sigla = " K12 " ; novo_curso . nome = " Desenvolvimento Web com JSF2 e JPA2 " ; curso . sigla = " K21 " ; curso . nome = " Persistncia com JPA2 e Hibernate " ; // imprime K12 console . log ( novo_curso . sigla ) ; // imprime Desenvolvimento Web com JSF2 e JPA2 console . log ( novo_curso . nome ) ;
Cdigo Javascript A.12: Sobrescrevendo uma propriedade
88
www.k19.com.br
89
J AVASCRIPT AVANADO
Exerccios de Fixao
Para fazer o exerccio vamos utilizar o add-on Firebug do Firefox. 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 gura abaixo.
www.facebook.com/k19treinamentos
89
J AVASCRIPT AVANADO
2
90
Crie objetos com propriedades chamadas sigla e nome. Imprima o valor dessas propriedades atravs do console.log do Firebug.
1 2 3 4 5 6 7 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; console . log ( curso . sigla ) ; console . log ( curso . nome ) ; var curso2 = { sigla : " K12 " , nome : " Desenvolvimento Web com JSF2 e JPA2 " }; console . log ( curso2 . sigla ) ; console . log ( curso2 . nome ) ;
Cdigo Javascript A.15: Criando dois objetos
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18
1 2 3 4 5 6 7 8 9
Adicione uma propriedade em um objeto utilizado como prottipo e verique que essa propriedade ser adicionada nos objetos criados a partir desse prottipo.
5
1 2 3 4 5 6 7
var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; var novo_curso = Object . create ( curso ) ; curso . carga_horaria = 36; // imprime K11
90
www.k19.com.br
91
8 9 1 11 12 13 14 console . log ( novo_curso . sigla ) ; // imprime Orientao a Objetos em Java console . log ( novo_curso . nome ) ; // imprime 36 console . log ( novo_curso . carga_horaria ) ;
Cdigo Javascript A.18: Prottipo
J AVASCRIPT AVANADO
Adicione uma propriedade em um objeto e verique que o prottipo desse objeto no afetado.
var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; var novo_curso = Object . create ( curso ) ; novo_curso . carga_horaria = 36; // imprime K11 console . log ( curso . sigla ) ; // imprime Orientao a Objetos em Java console . log ( curso . nome ) ; // imprime undefined console . log ( curso . carga_horaria ) ;
Cdigo Javascript A.19: Prottipo
1 2 3 4 5 6 7 8 9 1 11 12 13 14
Altere o valor de uma propriedade de um objeto utilizado como prottipo e verique que essa alterao afetar os objetos criados a partir desse prottipo.
7
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18
var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; var novo_curso = Object . create ( curso ) ; // imprime K11 console . log ( novo_curso . sigla ) ; // imprime Orientao a Objetos em Java console . log ( novo_curso . nome ) ; curso . sigla = " K12 " ; curso . nome = " Desenvolvimento Web com JSF2 e JPA2 " ; // imprime K12 console . log ( novo_curso . sigla ) ; // imprime Desenvolvimento Web com JSF2 e JPA2 console . log ( novo_curso . nome ) ;
Cdigo Javascript A.20: Prottipo
8 Reescreva em um objeto as propriedades herdadas de um prottipo e verique que alteraes nos valores dessas propriedades no prottipo no afetam mais os valores delas nesse objeto.
1 2 3 4
var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; var novo_curso = Object . create ( curso ) ;
www.facebook.com/k19treinamentos
91
J AVASCRIPT AVANADO
5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 novo_curso . sigla = " K12 " ; novo_curso . nome = " Desenvolvimento Web com JSF2 e JPA2 " ; // imprime K12 console . log ( novo_curso . sigla ) ; // imprime Desenvolvimento Web com JSF2 e JPA2 console . log ( novo_curso . nome ) ; curso . sigla = " K21 " ; curso . nome = " Persistncia com JPA2 e Hibernate " ; // imprime K12 console . log ( novo_curso . sigla ) ; // imprime Desenvolvimento Web com JSF2 e JPA2 console . log ( novo_curso . nome ) ;
Cdigo Javascript A.21: Prottipo
92
Exerccios Complementares
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.
1
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.
3
Funes
As funes em JavaScript so objetos. Voc pode armazen-las em variveis, arrays e outros objetos. Elas podem ser passadas como argumento ou devolvidas por outra funo. Veja o exemplo abaixo.
1 2 3 var multiplicacao = function (x , y ) { return x * y ; }
Cdigo Javascript A.25: Criando uma funo
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 2 3 4 5 6 7 8 9 var conta = { saldo : , deposita : function ( valor ) { this . saldo += valor ; } } conta . deposita (1 ) ; console . log ( conta . saldo ) ;
Cdigo Javascript A.27: Mtodo
Apply
Uma funo pode ser associada momentaneamente a um objeto e executada atravs do mtodo
apply.
1 2 3 4 5 6 7 8 9 1 var deposita = function ( valor ) { this . saldo += valor ; } var conta = { saldo : } deposita . apply ( conta , [2 ]) ; console . log ( conta . saldo ) ;
Cdigo Javascript A.28: 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.
1 2 3 4 5 6 7 8 9 1 11 12 13 var soma = function () { var soma = ; for ( var i = ; i < arguments . length ; i ++) { soma += arguments [ i ]; } return soma ; } var resultado = soma (2 ,4 ,5 ,6 ,1) ; console . log ( resultado ) ;
Cdigo Javascript A.29: Arguments
Exceptions
Quando um erro identicado no processamento de uma funo, podemos lanar uma exception para avisar que chamou a funo que houve um problema.
www.facebook.com/k19treinamentos
93
J AVASCRIPT AVANADO
1 2 3 4 5 6 7 8 9 1 11 12 13 var conta = { saldo : , deposita : function ( valor ) { if ( valor <= ) { throw { name : " ValorInvalido " , message : " Valores menores ou iguais a } } else { this . saldo += valor ; } } }
94
Na chamada do mtodo deposita(), podemos capturar um possvel erro com o comando try-catch.
1 2 3 4 5 6 try { conta . deposita ( ) ; } catch ( e ) { console . log ( e . name ) ; console . log ( e . message ) ; }
Cdigo Javascript A.31: Exceptions
Exerccios de Fixao
Crie uma funo que multiplicar dois nmeros recebidos como parmetro e devolve o resultado.
var multiplicacao = function (x , y ) { return x * y ; }
Cdigo Javascript A.32: multiplicacao()
1 2 3
10
1 2
11
1 2 3 4 5 6
94
www.k19.com.br
95
12
J AVASCRIPT AVANADO
1 2
13
Crie uma funo que soma todos os argumentos passados como parmetro.
var soma = function () { var soma = ; for ( var i = ; i < arguments . length ; i ++) { soma += arguments [ i ]; } return soma ; }
Cdigo Javascript A.36: soma()
1 2 3 4 5 6 7 8 9
14
1 2 3
15
Altere a lgica do mtodo deposita() para evitar que valores incorretos sejam depositados.
var conta = { saldo : , deposita : function ( valor ) { if ( valor <= ) { throw { name : " ValorInvalido " , message : " Valores menores ou iguais a } } else { this . saldo += valor ; } } }
1 2 3 4 5 6 7 8 9 1 11 12 13
16
17
95
J AVASCRIPT AVANADO
1 2 3 4 5 6 try { conta . deposita ( ) ; } catch ( e ) { console . log ( e . name ) ; console . log ( e . message ) ; }
Cdigo Javascript A.40: Capturando excees com try-catch
96
Exerccios Complementares
Crie uma funo que faa a operao de diviso e aps isso execute a funo divisao().
Crie uma funo para a operao saque em um caixa eletrnico. Fique atento com as excees. Feito isso, execute o mtodo saque().
5
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.
1 2 3 4 5 6 7 8 var vazio = []; var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " , " K31 " , " K32 " ]; console . log ( vazio [ ]) ; console . log ( cursos [ ]) ; console . log ( vazio . length ) ; console . log ( cursos . length ) ;
Cdigo Javascript A.44: Criando um array
Percorrendo um Array
Para percorrer um array, podemos utilizar o comando for.
1 2 3 4 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " , " K31 " , " K32 " ]; for ( var i = ; i < cursos . length ; i ++) { console . log ( cursos [ i ]) ; }
Cdigo Javascript A.45: for
Adicionando Elementos
Para adicionar um elemento ao nal do array, podemos utilizar a propriedade length.
96
www.k19.com.br
97
1 2 3 4 5 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " , " K31 " , " K32 " ]; cursos [ cursos . length ] = " K 1 " ; for ( var i = ; i < cursos . length ; i ++) { console . log ( cursos [ i ]) ; }
Cdigo Javascript A.46: Adicionando elementos ao nal do array com length
J AVASCRIPT AVANADO
Removendo Elementos
O mtodo delete() permite remover elementos de um array.
1 2 3 4 5 6 7 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " , " K31 " , " K32 " ]; delete cursos [ ]; for ( var i = ; i < cursos . length ; i ++) { console . log ( cursos [ i ]) ; }
Cdigo Javascript A.48: Delete
O mtodo delete() deixa uma posio indenida 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 2 3 4 5 6 7 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " , " K31 " , " K32 " ]; cursos . splice ( ,2) ; for ( var i = ; i < cursos . length ; i ++) { console . log ( cursos [ i ]) ; }
Cdigo Javascript A.49: Utilizando o mtodo splice()
Concatenando Arrays
O mtodo concat() permite concatenar dois arrays.
1 2 3 4 5 6 7 8 var formacao_java = [ " K11 " ," K12 " ]; var formacao_java_avancado = [ " K21 " ," K22 " ," K23 " ]; var formacao_completa = formacao_java . concat ( formacao_java_avancado ) ; for ( var i = ; i < formacao_completa . length ; i ++) { console . log ( formacao_completa [ i ]) ; }
Cdigo Javascript A.50: Concatenando
www.facebook.com/k19treinamentos
97
J AVASCRIPT AVANADO
98
98
www.k19.com.br
99
6 7 8 9
J AVASCRIPT AVANADO
Copiando um Trecho de um Array O mtodo slice() cria uma cpia de uma poro de um array.
1 2 3 4 5 6 7 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ]; var formacao_java = cursos . slice ( ,2) ; for ( var i = ; i < formacao_java . length ; i ++) { console . log ( formacao_java [ i ]) ; }
Cdigo Javascript A.56: Copiando um trecho de um array
Removendo e Adicionando Elementos em um Array O mtodo splice() permite remover elementos do array e adicionar novos elementos.
1 2 3 4 5 6 7 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ]; cursos . splice (2 ,3 , " K31 " ," K32 " ) ; for ( var i = ; i < cursos . length ; i ++) { console . log ( cursos [ i ]) ; }
Cdigo Javascript A.57: Substituindo elementos de uma array
Adicionando um Elemento na Primeira Posio O mtodo unshift() adiciona elementos na primeira posio de um array.
1 2 3 4 5 6 7 var cursos = [ " K12 " ," K21 " ," K22 " ," K23 " ]; cursos . unshift ( " K11 " ) ; for ( var i = ; i < cursos . length ; i ++) { console . log ( cursos [ i ]) ; }
Cdigo Javascript A.58: Adicionando um elemento na primeira posio
www.facebook.com/k19treinamentos
99
J AVASCRIPT AVANADO
3 console . log ( curso . charAt ( ) ) ;
Cdigo Javascript A.59: Acessando os caracteres de uma string por posio
100
Recuperando um Trecho de uma String O mtodo slice() retorna uma poro de uma string.
1 2 3 var curso = " K12 - Desenvolvimento Web com JSF2 e JPA2 " ; console . log ( curso . slice ( ,3) ) ;
Cdigo Javascript A.60: Recuperando um Trecho de uma String
Dividindo uma String O mtodo split() cria uma array de strings a partir de um separador.
1 2 3 4 5 var curso = " K12 - Desenvolvimento Web com JSF2 e JPA2 " ; var aux = curso . split ( " -" ) ; console . log ( aux [ ]) ; console . log ( aux [1]) ;
Cdigo Javascript A.61: Dividindo uma string
Exerccios de Fixao
18
1 2 3 4 5 6 7 8
19
1 2 3 4
20
100
www.k19.com.br
101
1 2 3 4 5 6 7 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " , " K31 " , " K32 " ]; cursos [ cursos . length ] = " K 1 " ; for ( var i = ; i < cursos . length ; i ++) { console . log ( cursos [ i ]) ; }
Cdigo Javascript A.64: Adicionando elementos ao nal do array com length
J AVASCRIPT AVANADO
21
1 2 3 4 5
22
1 2 3 4 5 6 7 8
23
1 2 3 4
24
1 2 3 4 5 6 7
25
101
J AVASCRIPT AVANADO
1 2 3 4 5 6 7 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ]; cursos . reverse () ; for ( var i = ; i < cursos . length ; i ++) { console . log ( cursos [ i ]) ; }
Cdigo Javascript A.69: Invertendo os elementos de um array
102
26
1 2 3 4 5 6 7 8 9
27
1 2 3 4 5 6 7
28
1 2 3 4 5 6 7
29
1 2 3 4 5
102
www.k19.com.br
103
J AVASCRIPT AVANADO
Exerccios Complementares
Crie dois arrays e imprima no console do Firebug o tamanho deles e tambm imprimir todos os elementos deste array linha a linha.
7
Crie um array com alguns valores e depois faa com que adicione um elemento no nal do array utilizando a propriedade length.
8
Altere o arquivo do exerccio anterior para adicionar elemento no nal do array utilizando o mtodo push().
9
10
11
Crie um array contendo alguns elementos e remova o ltimo elemento atravs do mtodo
pop().
12 Utilizando o arquivo do exerccio anterior, adicione um elemento no nal do array atravs do mtodo push().
13
Crie um array com alguns elementos e inverta a ordem dos elementos com o mtodo reverse().
Utilizando o arquivo do exerccio anterior, remova o primeiro elemento do array utilizando o mtodo shift().
14
Utilizando o arquivo do exerccio anterior, adicione novamente o elemento removido que estava na primeira posio do array atravs do mtodo unshift().
15
Crie um array contendo alguns elementos e faa uma cpia de um determinado trecho do desse array utilizando o mtodo slice().
16
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
Cdigo HTML B.1: Referncia pro jQuery Cdigo HTML B.2: Referncia pro jQuery atravs da url do Google
J Q UERY
Introduo
jQuery uma biblioteca de funes JavaScript. Ela foi desenvolvida para simplicar e diminuir a quantidade de cdigo JavaScript. As principais funcionalidades da biblioteca JavaScript jQuery so:
Seletores de elementos HTML Manipulao de elementos HTML Manipulao de CSS Funes de eventos HTML Efeitos e animaes JavaScript AJAX
Para a lista completa de funcionalidades, acesse: http://docs.jquery.com/. 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 Minied e Uncompressed, voc pode utilizar qualquer um.
1 2 3 < head > < script type = " text / javascript " src = " jquery . js " > </ script > </ head >
Caso voc no queira fazer o download do arquivo js do jQuery, possvel utilizar a url de alguma 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.
1 2 3 4 < head > < script type = " text / javascript " src = " https :// ajax . googleapis . com / ajax / libs / jquery /1.7.2/ jquery . min . js " > </ script > </ head >
www.facebook.com/k19treinamentos
105
J Q UERY
106
1 2 3 4
< head > < script type = " text / javascript " src = " http :// ajax . aspnetcdn . com / ajax / jQuery / jquery -1.7.2. min . js " > </ script > </ head >
Cdigo HTML B.3: Referncia pro jQuery atravs da url da Microsoft
Sintaxe
A sintaxe da biblioteca jQuery permite facilmente selecionar elementos HTML e executar alguma ao sobre eles. A sintaxe bsica para executar uma ao sobre determinados elementos : $(seletor).acao(). O smbolo $ um mtodo de fabricao para criar o objeto jQuery; O (seletor) serve para consultar e encontrar os elementos HTML; A acao() dene a operao jQuery que ser executada nos elementos.
Mais Sobre
O mtodo de fabricao um padro de projeto de criao. Para saber mais sobre padres de projeto, conra 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:
1 2 3 4 5 6 7 $ ( this ) . hide () // esconde o elemento que o this faz referncia $ ( " p " ) . hide () // esconde todos os elementos <p > $ ( " p . curso " ) . hide () // esconde todos os elementos <p > que tem a classe " curso " $ ( " # cursok31 " ) . hide () // esconde o elemento de id " cursok31 "
Cdigo Javascript B.1: Exemplos jQuery
Seletores
Os seletores do jQuery permitem manipular um conjunto de elementos ou um apenas elemento HTML. 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 prexo
107
J Q UERY
Exemplo:
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 3 31 $ ( this ) // seleciona o elemento que o this referencia$ $ ( " * " ) // seleciona todos elementos do documento HTML$ $ ( " div " ) // seleciona todos os elementos <div > $ $ ( " . curso " ) // seleciona todos os elementos cuja classe " curso " $ $ ( " # cursok31 " ) // seleciona um nico elemento de id " cursok31 " $ $ ( input [ name |=" curso "] ) $ // seleciona todos os elementos < input > que contm o // atributo name igual a " curso " ou o prefixo " curso " seguido de trao ( -) . $ ( input [ name *=" curso "] ) $ // seleciona todos os elementos < input > nas quais a // palavra " curso " faz parte do atributo name . $ ( input [ name ~=" curso "] ) $ // seleciona todos os elementos < input > nas quais a // palavra " curso " faz parte do atributo name delimitado por espao . $ ( input [ name =" k32 "] ) $ // seleciona todos os elementos < input > cujo atributo // name termina com a palavra k32 $ ( input [ name =" Curso K32 "] ) $ // seleciona todos os elementos < input > que o // atributo name tenha exatamente a palavra " Curso K32 ". $ ( input [ name !=" curso "] ) $ // seleciona todos os elementos < input > que o atributo // name tenha valor diferente de " curso " $ ( input [ name ^=" curso "] ) $ // seleciona todos os elementos < input > que o atributo // name comece exatamente com a palavra " curso "
Cdigo Javascript B.2: Seletores CSS
Exerccios de Fixao
1 2 3 4 5 6 7 8 9 1 11 12
www.facebook.com/k19treinamentos
107
J Q UERY
108
13
Altere o arquivo seletores.html para que os campos cuja classe curso tenha o valor igual a K19.
4
1 2 3 4 5 6 7 8 9 1 11 12 13 14
<! DOCTYPE html > < html > < head > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > < input name = " curso - k31 " class = " curso " / > < input name = " curso - k32 " class = " curso " / > < input name = " formacao - net " class = " formacao " / > < input name = " formacao - java " class = " formacao " / > < script >$ ( . curso ) . val ( K19 ) ; </ script >$ </ body > </ html >
Cdigo HTML B.5: curso.html
Altere o exerccio anterior, para selecionar os elementos cujo atributo name comece com a palavra formacao seguida de trao (-).
5
1 2 3 4 5 6 7 8 9 1 11 12 13 14
<! DOCTYPE html > < html > < head > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > < input name = " curso - k31 " class = " curso " / > < input name = " curso - k32 " class = " curso " / > < input name = " formacao - net " class = " formacao " / > < input name = " formacao - java " class = " formacao " / > < script >$ ( input [ name |= " formacao " ] ) . val ( K19 ) ; </ script >$ </ body > </ html >
Cdigo HTML B.6: curso.html
1 2 3 4 5 6 7 8 9 1 11 12 13 14
108
www.k19.com.br
109
J Q UERY
Exerccios Complementares
Crie um outro arquivo HTML chamado seletores-2.html na pasta seletores. Utilize a biblioteca JavaScript JQuery e adicione no mnimo 5 nomes com 5 classes.
1
Altere o arquivo seletores-2.html para que os campos cuja classe "Gerente"mude para um valor igual a "Instrutor da K19".
2
Altere o arquivo seletores-2.html para selecionar os elementos cujo atributo name comece com vogais.
3
4 Altere o arquivo seletores-2.html para selecionar todos os elementos <input> e atribua o valor "K19".
Eventos
Os eventos so mtodos que so chamados quando o usurio interage com o navegador. Para registrar os eventos, podemos utilizar os seletores do jQuery visto na seo anterior.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 <! DOCTYPE html > < html > < head > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > < h2 > Formao . NET K19 : </ h2 > < ul > < li > Curso K31 - C # e Orientao a Objetos </ li > < li > Curso K32 - Desenvolvimento Web com ASP . NET MVC </ li > </ ul > < script >$ ( " li " ) . click ( function () { alert ( " Elemento li clicado : " + $ ( this ) . text () ) ; }) ; </ script > </ body > </ html >
Cdigo HTML B.12: Eventos jQuery
No exemplo acima, registramos todos os elementos <li> com o evento de clique. Quando o usurio clicar no elemento <li>, devemos denir uma funo que ser chamada, a esta funo damos o nome de funo de callback.
1 $ ( " li " ) . click ( funo de callback ... ) $
www.facebook.com/k19treinamentos
109
J Q UERY
110
Evento
$(document).ready(funo de callback...) $(seletor).click(funo de callback...) $(seletor).dblclick(funo de callback...) $(seletor).focus(funo de callback...) $(seletor).change(funo de callback...)
Descrio A funo de callback chamada quando o DOM carregado por completo A funo de callback ser chamada quando o usurio clicar no elementos selecionados A funo de callback ser chamada quando o usurio clicar 2X (duas) vezes nos elementos selecionados A funo de callback ser chamada quando o foco estiver nos elementos selecionados A funo de callback ser chamada quando o usurio alterar o valor dos elementos selecionados
Exerccios de Fixao
Crie uma pasta eventos dentro da pasta com o seu nome que foi criada na rea de Trabalho.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18
110
www.k19.com.br
111
J Q UERY
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 clicado.
9
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22
<! DOCTYPE html > < html > < head > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > < h1 > Cursos K19 </ h1 > < div > < ul > < li > K31 - C # e Orientao a Objetos </ li > < li > K32 - Desenvolvimento Web com ASP . NET MVC </ li > < li > K11 - Java e Orientao a Objetos </ li > < li > K12 - Desenvolvimento Web com JSF2 e JPA2 </ li > </ ul > </ div > < script > $ ( li ) . click ( function () { alert ( " Elemento li clicado : " + $ ( this ) . text () ) ;}) ; </ script > </ body > </ html >
Cdigo HTML B.14: eventos.html
Altere o exerccio anterior para mostrar a mensagem de alerta aps o usurio efetuar um duplo clique.
10
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22
<! DOCTYPE html > < html > < head > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > < h1 > Cursos K19 </ h1 > < div > < ul > < li > K31 - C # e Orientao a Objetos </ li > < li > K32 - Desenvolvimento Web com ASP . NET MVC </ li > < li > K11 - Java e Orientao a Objetos </ li > < li > K12 - Desenvolvimento Web com JSF2 e JPA2 </ li > </ ul > </ div > < script > $ ( li ) . dblclick ( function () { alert ( " Elemento clicado 2 X : " + $ ( this ) . text () ) ;}) ; </ script > </ body > </ html >
Cdigo HTML B.15: eventos.html
www.facebook.com/k19treinamentos
111
J Q UERY 11
112
Altere o exerccio anterior e altere o contedo de todos os elementos <li> aps o carregamento completo do DOM.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 <! DOCTYPE html > < html > < head > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > < script > $ ( document ) . ready ( function () { $ ( li ) . text ( DOM carregado por completo . ) ; }) ; </ script > </ head > < body > < h1 > Cursos K19 </ h1 > < div > < ul > < li > K31 - C # e Orientao a Objetos </ li > < li > K32 - Desenvolvimento Web com ASP . NET MVC </ li > < li > K11 - Java e Orientao a Objetos </ li > < li > K12 - Desenvolvimento Web com JSF2 e JPA2 </ li > </ ul > </ div > </ body > </ html >
Cdigo HTML B.16: eventos.html
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.
12
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26
<! DOCTYPE html > < html > < head > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > < h1 > Cursos K19 </ h1 > < div > < label for = " cursos " > Selecione um curso : </ label > < select name = " cursos " id = " cursos " > < option > ---- </ option > < option value = " K31 " > K31 - C # e Orientao a Objetos </ option > *** < option value = " K32 " > K32 - Desenvolvimento Web com ASP . NET MVC </ option > < option value = " K11 " > K11 - Java e Orientao a Objetos </ option > *** < option value = " K12 " > K12 - Desenvolvimento Web com JSF2 e JPA2 </ option > </ select > </ div > < script > $ ( # cursos ) . change ( function () { alert ( " Curso selecionado : " + $ ( " # cursos option : selected " ) . text () ) ; }) ; </ script > </ body > </ html >
Cdigo HTML B.17: eventos.html
Exerccios Complementares
112
www.k19.com.br
113
J Q UERY
Crie um outro arquivo HTML chamado eventos-2.html na pasta eventos, utilizando a biblioteca JavaScript JQuery. Nesse arquivo, crie uma lista ordenada contendo o nome das formaes da K19.
5
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.
6
Altere o arquivo eventos-2.html para adicionar o evento de alerta aps o duplo clique no elemento selecionado.
7
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.
8
Efeitos
A biblioteca jQuery contm vrios mtodos para adicionar animao para a pgina web.
hide e show.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 <! DOCTYPE html > < html > < head > < style > p { background : green ; } </ style > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > < button id = " mostrar " > Mostrar </ button > < button id = " ocultar " > Ocultar </ button > <p style = " display : none " > Cursos K19 </ p > < script > $ ( " # mostrar " ) . click ( function () { $ ( " p " ) . show ( " slow " ) ; }) ; $ ( " # ocultar " ) . click ( function () { $ ( " p " ) . hide ( " slow " ) ; }) ; </ script > </ body > </ html >
Cdigo HTML B.22: Mtodos show e hide do jQuery
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. Elementos visveis so ocultados e elementos ocultados tornam-se visveis.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 <! DOCTYPE html > < html > < head > < style > p { background : green ; } </ style > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > < button > Mostrar / Ocultar </ button > <p style = " display : none " > Cursos K19 </ p > < script > $ ( " button " ) . click ( function () { $ ( " p " ) . toggle ( " slow " ) ; }) ; </ script > </ body > </ html >
Cdigo HTML B.23: jQuery Toggle
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 milissegundos. O parmetro callback dene a funo que ser chamada aps o evento de slide terminar. O parmetro de opacidade do mtodo fadeTo dene em porcentagem a opacidade do elemento HTML.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 <! DOCTYPE html > < html > < head > < style > p { background : green ; } </ style > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > < button id = " fadein " > Fade in </ button > < button id = " fadeout " > Fade out </ button > < button id = " fadeto " > Fade to </ button > <p > Cursos K19 </ p > < script > $ ( " # fadein " ) . click ( function () { $ ( " p " ) . fadeIn () ; }) ;
114
www.k19.com.br
115
18 19 2 21 22 23 24 25 26 $ ( " # fadeout " ) . click ( function () { $ ( " p " ) . fadeOut () ; }) ; $ ( " # fadeto " ) . click ( function () { $ ( " p " ) . fadeTo ( " normal " , .3 ) ; }) ; </ script > </ body > </ html >
Cdigo HTML B.24: jQuery fade
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 milissegundos. O parmetro callback dene a funo que ser chamada aps o evento de slide terminar.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 <! DOCTYPE html > < html > < head > < style > p { background : green ; } </ style > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > < button id = " slidedown " > Slide Down </ button > < button id = " slideup " > Slide Up </ button > < button id = " slidetoggle " > Slide Toggle </ button > <p > Cursos K19 </ p > < script > $ ( " # slidedown " ) . click ( function () { $ ( " p " ) . slideDown () ; }) ; $ ( " # slideup " ) . click ( function () { $ ( " p " ) . slideUp () ; }) ; $ ( " # slidetoggle " ) . click ( function () { $ ( " p " ) . slideToggle ( " slow " ) ; }) ; </ script > </ body > </ html >
Cdigo HTML B.25: jQuery Slide
Exerccios de Fixao
www.facebook.com/k19treinamentos
115
J Q UERY
116
13
14
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18
Altere o arquivo efeitos.html e adicione botes para ocultar e mostrar os elementos <li> da pgina.
15
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26
<! DOCTYPE html > < html > < head > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > < h1 > Cursos K19 </ h1 > < div > < ul > < li > K31 - C # e Orientao a Objetos </ li > < li > K32 - Desenvolvimento Web com ASP . NET MVC </ li > < li > K11 - Java e Orientao a Objetos </ li > < li > K12 - Desenvolvimento Web com JSF2 e JPA2 </ li > </ ul > </ div > < div > < button id = " mostrar " > Mostrar </ button > < button id = " ocultar " > Ocultar </ button > </ div > < script > $ ( " # mostrar " ) . click ( function () { $ ( " li " ) . show ( " slow " ) ;}) ; $ ( " # ocultar " ) . click ( function () { $ ( " li " ) . hide ( " slow " ) ;}) ; </ script > </ body > </ html >
Cdigo HTML B.27: efeitos.html
16
Altere o exerccio anterior e adicione um boto que mostra os elementos <li> ocultos e oculta os
www.k19.com.br
116
117
J Q UERY
Altere o exerccio anterior para ocultar e mostrar os elementos <li> atravs dos mtodos do jQuery que alteram a opacidade.
17
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26
<! DOCTYPE html > < html > < head > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > < h1 > Cursos K19 </ h1 > < div > < ul > < li > K31 - C # e Orientao a Objetos </ li > < li > K32 - Desenvolvimento Web com ASP . NET MVC </ li > < li > K11 - Java e Orientao a Objetos </ li > < li > K12 - Desenvolvimento Web com JSF2 e JPA2 </ li > </ ul > </ div > < div > < button id = " mostrar " > Mostrar </ button > < button id = " ocultar " > Ocultar </ button > </ div > < script > $ ( " # mostrar " ) . click ( function () { $ ( " li " ) . fadeIn ( " slow " ) ; }) ; $ ( " # ocultar " ) . click ( function () { $ ( " li " ) . fadeOut ( " slow " ) ; }) ; </ script > </ body > </ html >
Cdigo HTML B.29: efeitos.html
Exerccios Complementares
www.facebook.com/k19treinamentos
117
J Q UERY
118
Altere o exerccio anterior e acrescente um boto para diminuir a opacidade dos elementos <li> para 0.2.
9
10
Altere o arquivo efeitos.html para ocultar e mostrar os elementos alterando a altura deles.
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.
11 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>.
No arquivo criado anteriormente, altere os elementos <li> para ocultar e mostrar atravs do mtodo de fade-in/fade-out.
13
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().
1 $ ( " p " ) . html ( " K19 Treinamentos " ) ; $
Cdigo Javascript B.5: 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().
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 <! DOCTYPE html > < html > < head > < style > p { background : green ; } </ style > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > < button id = " before " > Before </ button > < button id = " after " > After </ button > <p > Cursos K19 </ p > < script > $ ( " # before " ) . click ( function () { $ ( " p " ) . before ( " K19 Treinamentos - " ) ; }) ; $ ( " # after " ) . click ( function () { $ ( " p " ) . after ( " - K31 " ) ; }) ; </ script > </ body > </ html >
Cdigo HTML B.36: 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
18
19
1 2 3 4 5 6 7 8 9 1 11 12 13
www.facebook.com/k19treinamentos
119
J Q UERY 20
120
Altere o arquivo html.html e adicione um boto alterar o contedo do elemento <p> para Treinamentos da K19.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 <! DOCTYPE html > < html > < head > < style > p { background : green ; } </ style > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > <p > Cursos K19 </ p > < div > < button id = " alterar " > Alterar contedo </ button > </ div > < script > $ ( " # alterar " ) . click ( function () { $ ( " p " ) . html ( " Treinamentos da K19 " ) ;}) ; </ script > </ body > </ html >
Cdigo HTML B.38: html.html
21 Altere o arquivo html.html e adicione botes para adicionar contedo antes e depois do contedo do elemento <p>.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2
<! DOCTYPE html > < html > < head > < style > p { background : green ; } </ style > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > <p > Cursos K19 </ p > < div > < button id = " prepend " > Prepend </ button > < button id = " append " > Append </ button > </ div > < script > $ ( " # prepend " ) . click ( function () { $ ( " p " ) . prepend ( " Formao Desenvolvedor Java - " ) ;}) ; $ ( " # append " ) . click ( function () { $ ( " p " ) . append ( " - Formao Desenvolvedor . NET " ) ;}) ; </ script > </ body > </ html >
Cdigo HTML B.39: html.html
22
Altere o exerccio anterior para adicionar o contedo antes e depois do elemento <p>.
<! DOCTYPE html > < html > < head > < style > p { background : green ; } </ style > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > <p > Cursos K19 </ p >
1 2 3 4 5 6 7 8 9 1
120
www.k19.com.br
121
11 12 13 14 15 16 17 18 19 2 < div > < button id = " before " > Before </ button > < button id = " after " > After </ button > </ div > < script > $ ( " # before " ) . click ( function () { $ ( " p " ) . before ( " Formao Desenvolvedor Java - " ) ;}) ; $ ( " # after " ) . click ( function () { $ ( " p " ) . after ( " - Formao Desenvolvedor . NET " ) ;}) ; </ script > </ body > </ html >
Cdigo HTML B.40: html.html
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."
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.
15
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
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 cam 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 2 3 4 5 6 7 8 9 <! DOCTYPE html > < html > < head > < meta charset = " UTF -8 " > </ head > < body > ... </ body > </ html >
Cdigo HTML C.1: Exemplo de um documento HTML5 utilizando a sintaxe HTML
1 2 3 4 5 6 7 8 9 1
<? xml version = " 1. " encoding = " ISO -8859 -1 " ? > <! DOCTYPE html > < html xmlns = " http :// www . w3 . org /1999/ xhtml " > < head > < meta charset = " ISO -8859 -1 " / > </ head > < body > ... </ body > </ html >
Cdigo HTML C.2: Exemplo de um documento HTML5 utilizando a sintaxe XHTML
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
Representa uma composio independente em um documento, pgina ou aplicao e que , a princpio, independentemente distribuvel ou reutilizvel. Pode ser um post de um frum, artigo de uma revista ou jornal, post de um blog, comentrio enviado por um usurio, widget interativo ou qualquer item independente de contedo. Quando encontramos elementos article aninhados, os elementos article internos representam um contedo que esteja relacionado ao contedo do ancestral article mais prximo. Por exemplo, elementos article internos podem representar os comentrios de um post de um blog Neste caso o post do blog seria o elemento article ancestral mais prximo.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 <! DOCTYPE html > < html > < head > < meta charset = " UTF -8 " > </ head > < body > < article > < h1 > Primeiro post do blog </ h1 > <p > Loren ipsum...</ p > < h2 > Comentrios </ h2 > < article > Legal este post ! </ article > < article > Bacana este post ! </ article > < article > Da hora este post ! </ article > </ article > </ body > </ html >
Cdigo HTML C.3: article.html
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.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 <! DOCTYPE html > < html > < head > < meta charset = " UTF -8 " > </ head > < body > < section > < h1 > ltimos Posts </ h1 > < article > < h1 > Primeiro post do blog </ h1 > <p > Loren ipsum...</ p > </ article > < article > < h1 > Segundo post do blog </ h1 > <p > Loren ipsum...</ p > </ article > < article > < h1 > Terceiro post do blog </ h1 > <p > Loren ipsum...</ p >
124
www.k19.com.br
125
22 23 24 25 </ article > </ section > </ body > </ html >
Cdigo HTML C.4: section.html
HTML5
header
O elemento header utilizado para denir um contedo de introduo ou de navegao. Normalmente encontramos elementos de cabealho (h1 h6), em seu contedo. importante lembrar que, apesar de geralmente ser empregado no comeo da pgina, seu uso pode ser feito tambm em diferentes sees do mesmo documento.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 <! DOCTYPE html > < html > < head > < meta charset = " UTF -8 " > </ head > < body > < header > < h1 > Blog da K19 </ h1 > </ header > < section > < h1 > Meus Posts </ h1 > ... </ section > </ body > </ html >
Cdigo HTML C.5: header.html
footer
Representa o rodap do ancestral de seccionamento mais prximo. muito comum encontrarmos em seu contedo informaes sobre a seo a qual ele pertence como quem a escreveu, links relacionados ao contedo da seo e informaes legais, por exemplo.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 <! DOCTYPE html > < html > < head > < meta charset = " UTF -8 " > </ head > < body > < header > < h1 > Blog da K19 </ h1 > </ header > < article > < header > < h1 > Primeiro post </ h1 > </ header > <p > Loren ipsum...</ p > < footer > Postado por : Jonas Hirata </ footer > </ article >
www.facebook.com/k19treinamentos
125
HTML5
2 21 22 23
126
< footer >© ;2 13 K19 Treinamentos . </ footer > </ body > </ html >
Cdigo HTML C.6: footer.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.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 <! DOCTYPE html > < html > < head > < meta charset = " UTF -8 " > </ head > < body > < header > < h1 > Blog da K19 </ h1 > < nav > <a href = " # " > Home </ a > <a href = " # " > ltimos posts </ a > <a href = " # " > Arquivo </ a > </ nav > </ header > < section > < h1 > Meus Posts </ h1 > ... </ section > < footer >© ;2 13 K19 Treinamentos . </ footer > </ body > </ html >
Cdigo HTML C.7: nav.html
aside
O elemento aside representa uma seo que consiste em um contedo que esteja tangencialmente relacionado ao contedo que est sua volta. Essa seo frequentemente representada como uma coluna lateral em relao ao contedo principal de uma pgina.
1 2 3 4 5 6 7 8 9 1 11 12 13 <! DOCTYPE html > < html > < head > < meta charset = " UTF -8 " > </ head > < body > < header > < h1 > Blog da K19 </ h1 > < nav > <a href = " # " > Home </ a > <a href = " # " > ltimos posts </ a > <a href = " # " > Arquivo </ a >
126
www.k19.com.br
127
14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 3 </ nav > </ header > < section > < h1 > Meus Posts </ h1 > ... </ section > < aside > < h1 > Posts relacionados </ h1 > ... </ aside > < footer >© ;2 13 K19 Treinamentos . </ footer > </ body > </ html >
Cdigo HTML C.8: aside.html
HTML5
gure
Representa um contedo que auto-suciente e tipicamente referenciado como uma unidade singular do uxo principal do documento. Opcionalmente o contedo pode possuir uma legenda. Pode ser utilizado para exibir ilustraes, diagramas, fotos, vdeos, cdigos fonte, etc, que so referenciados no contedo principal do documento, porm podem, sem afetar o uxo do documento, ser removidas do contedo principal e colocadas, por exemplo, como anotaes no canto da pgina ou em forma de apndice.
gcaption
A tag figcaption deve ser lha 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 lha de um elemento figure.
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 <! DOCTYPE html > < html > < head > < meta charset = " UTF -8 " > </ head > < body > < header > < h1 > Blog da K19 </ h1 > < nav > <a href = " # " > Home </ a > <a href = " # " > ltimos posts </ a > <a href = " # " > Arquivo </ a > </ nav > </ header > < section > < h1 > Meus Posts </ h1 > <p > Lorem ipsum dolor sit amet , consectetur adipiscing elit . Vestibulum enim est , ultrices ac vehicula vitae , pharetra id mauris . Quisque sit amet nisl mollis sem fermentum accumsan .
www.facebook.com/k19treinamentos
127
HTML5
22 23 24 25 26 27 28 29 3 31 32 33 34 35 36 37 38 Sed sed quam nisi , cursus sodales metus . Curabitur dapibus , massa sed sollicitudin viverra , odio justo dignissim metus , vel tempor turpis neque id erat . Aenean fermentum ultricies ante a luctus . </ p >
128
< figure > < img src = " # " title = " Aenean fermentum " alt = " Mauris convallis , leo sollicitudin " > < figcaption > Figura 3 b . Curabitur dapibus , massa sed sollicitudin . </ figcaption > </ figure > <p > Mauris fermentum lorem nec nisi euismod elementum . Aenean nec magna dolor , vel fermentum turpis . Mauris convallis , leo sollicitudin egestas malesuada , nunc est ultrices enim , eget varius odio felis et velit . Sed ac lorem nibh , ut convallis ante . </ p > </ section > < footer >© ;2 13 K19 Treinamentos . </ footer > </ body > </ html >
Cdigo HTML C.9: gure-e-gcaption.html
128
www.k19.com.br
APNDICE
Cdigo HTML 2.3: imprime-2x-curso.html Cdigo HTML 2.8: quebra-de-linha-forcada.html
R ESPOSTAS
1 2 3 4 5 6 7 8 9 1 11 12 13 14
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exerccio de quebra de linha forcada . </ title > </ head > < body > <p > Lorem ipsum dolor sit amet , consectetur adipiscing elit . Nam tempor ante non sem euismod at pharetra leo bibendum . Nunc quis scelerisque risus . Fusce tristique tortor sit < br / > amet metus mattis vitae imperdiet arcu porta . Maecenas tempor placerat est non tincidunt . < br / > In dignissim adipiscing iaculis . </ p > </ body > </ html >
1 2 3 4 5
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Curiosidades do Mundo </ title > </ head >
www.facebook.com/k19treinamentos
129
R ESPOSTAS
6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 3 31 32 33 34 35 36 37 38 39 4 41 42 43 44 45 46 47 48 49 5 51 52 53 54 55 56 57 58 59 6 < body > < h1 > Curiosidades do Mundo </ h1 > < h2 > 1. Europa </ h2 > <p >A Europa o segundo menor continente em superfcie do mundo , cobrindo cerca de 1 18 quilmetros quadrados ou 2% da superfcie da Terra e cerca de 6 ,8% da rea acima do nvel do mar . </ p > < h3 > 1.1 Alemanha </ h3 > <p > Com 81 ,8 milhes de habitantes em janeiro de 2 1 , o pas tem a maior populao entre os Estados membros da Unio Europeia e tambm o lar da terceira maior populao de migrantes internacionais em todo o mundo . </ p > < h4 > 1.1.1 Hesse </ h4 > <p >A capital Wiesbaden e a maior cidade Francoforte do Meno ( Frankfurt am Main ) , onde est localizado um dos maiores aeroportos do mundo e um centro financeiro de grande importncia . </ p > < h5 > 1.1.1.1 Frankfurt </ h5 > <p > Frankfurt am Main ou Francoforte do Meno , mais conhecida simplesmente como Frankfurt , a maior cidade do estado alemo de Hesse e a quinta maior cidade da Alemanha , com uma populao 7 . habitantes em 2 12. </ p > < h3 > 1.2 Frana </ h3 > <p > o pas mais visitado no mundo , recebendo 82 milhes de turistas estrangeiros por ano . </ p > < h4 > 1.2.1 le - de - France </ h4 > <p > Ilha de Frana ( em francs : le - de - France ) uma das 26 regies administrativas da Frana . </ p > < h5 > 1.2.1.1 Paris </ h5 > <p > Paris a capital e a mais populosa cidade da Frana , bem como a capital da regio administrativa de le - de - France . </ p > < h2 > 2. sia </ h2 > <p >A sia o maior dos continentes , tanto em rea como em populao . </ p > < h3 > 2.1 Japo </ h3 > <p >O pas um arquiplago de 6 852 ilhas , cujas quatro maiores so Honshu , Hokkaido , Kyushu e Shikoku , representando em conjunto 97% da rea terrestre nacional . </ p > < h4 > 2.1.1 Okinawa </ h4 > <p > Antigamente , Okinawa fazia parte de um reino independente , o reino Ryukyu , o que foi decisivo para o desenvolvimento de uma cultura prpria do desenrolar de uma histria particular e significativamente diferenciada do resto do Japo . </ p > < h5 > 2.1.1.1 Nago </ h5 > <p > De 21 de julho at 23 de julho de 2
130
<p > < small > Fonte : wikipedia . org </ small > </ p > </ body > </ html >
Cdigo HTML 2.12: geograa.html
1 2 3 4
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exerccio produto K19 </ title >
130
www.k19.com.br
131
5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 </ head > < body > < h1 > Cafeteira - K19 </ h1 > < h2 > Gosto Doce </ h2 > < h3 > Recursos </ h3 > <p > Prtico , uso de capsulas </ p > <p > Dois tipos : quente e frio </ p > <p > Faz seu expresso em poucos segundos </ p > <p > Mais de 1 sabores </ p > <p > Silencioso </ p > < h3 > Observaes </ h3 > <p > Verificar a quantidade de gua no reservatrio </ p > <p > Verificar o led para a inicializao </ p > <p > Desligar aparelho aps uso </ p > <p > Sempre limpar corretamente o suporte para a capsula </ p > < h4 > Itens relacionados </ h4 > <p > Capuccino - 16 capsulas </ p > <p > Expresso - 16 capsulas </ p > <p > Expresso Intenso - 8 capsulas </ p > <p > Caneca K19 - 3 ml </ p > </ body > </ html >
Cdigo HTML 2.13: produto.html
R ESPOSTAS
1 2 3 4 5 6 7 8 9 1 11 12
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exerccio com links e target </ title > </ head > < body > <p > <a href = " http :// www . amazon . com / " target = " _blank " > Site Amazon </ a > </ p > <p > <a href = " http :// www . google . com . br / " target = " _top " > Site Google </ a > </ p > <p > <a href = " https :// www . facebook . com / " target = " _self " > Site FaceBook </ a > </ p > <p > <a href = " https :// www . orkut . com / " target = " _parent " > Site Orkut </ a > </ p > </ body > </ html >
Cdigo HTML 2.18: links-target.html
1 2 3 4 5 6 7 8 9 1 11
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exerccios com iframe - p1 </ title > </ head > < body > <p > <a href = " http :// www . k19 . com . br " > K19 </ a > </ p > < div > < iframe src = " p2 . html " > </ iframe > </ div > </ body >
www.facebook.com/k19treinamentos
131
R ESPOSTAS
12 </ html >
Cdigo HTML 2.19: p1.html
132
1 2 3 4 5 6 7 8 9 1 11 12
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exerccios com iframe - p2 </ title > </ head > < body > <p > <a href = " http :// www . k19 . com . br " target = " _parent " > K19 </ a > </ p > < div > < iframe src = " p3 . html " > </ iframe > </ div > </ body > </ html >
Cdigo HTML 2.20: p2.html
1 2 3 4 5 6 7 8 9
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exerccios com iframe - p3 </ title > </ head > < body > <p > <a href = " http :// www . k19 . com . br / " > K19 </ a > </ p > </ body > </ html >
Cdigo HTML 2.21: p3.html
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exerccio de ncora </ title > </ head > < body > < h1 > Documento 1 </ h1 > <p > <a href = " http :// www . k19 . com . br " > Site K19 </ a > </ p > <p > ... </ p > <p > ... </ p > <a name = " ancora " > </ a > <p > ncora </ p > <p > ... </ p > </ body > </ html >
Cdigo HTML 2.26: exercicio-ancora.html
1 2 3 4 5 6 7
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exerccio de ncora 2 </ title > </ head > < body > < h1 > Documento 2 </ h1 >
132
www.k19.com.br
133
8 9 1 11 12 13 14 15 16 17
R ESPOSTAS
<p > ... </ p > <p > ... </ p > <p > ... </ p > <p > <a href = " http :// www . google . com " target = " _blank " > Site do Google </ a > </ p > <a href = " exercicio - ancora . html # ancora " > Ir para o documento 1 </ a > </ body > </ html >
Cdigo HTML 2.27: exercicio-ancora-2.html
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exerccio de links </ title > </ head > < body > < h1 id = " title - info " > Informaes sobre a Europa </ h1 > <p > <a href = " http :// pt . wikipedia . org / wiki / Europa # Geografia " target = " _blank " > Geografia da Europa </ a > </ p > <p > <a href = " http :// pt . wikipedia . org / wiki / Europa # Economia " target = " _blank " > Economia da Europa </ a > </ p > <p > ... </ p > <p > ... </ p > <p > ... </ p > <p > <a href = " exercicio - ancora -3. html # title - info " > Ir para o topo da pgina </ a > </ p > </ body > </ html >
Cdigo HTML 2.28: exercicio-ancora-3.html
1 2 3 4 5 6 7 8 9 1 11
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exerccio - Imagens </ title > </ head > < body > < h1 > Imagens : </ h1 > <p > Apostilas K19 < img src = " http :// www . k19 . com . br / app / webroot / css / img / books - entry - point . png " / > </ p >
www.facebook.com/k19treinamentos
133
R ESPOSTAS
12 13 14 15 16 17 <p > Logo K19 < img src = " http :// www . k19 . com . br / app / webroot / css / img / main - header - logo . png " / > </ p > </ body > </ html >
Cdigo HTML 2.31: exercicio-imagens.html
134
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 3 31 32 33 34 35 36 37 38 39 4 41 42 43 44 45 46 47 48 49 5 51 52 53
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exerccio - Tabela </ title > < style type = " text / css " > table , th , td { border : 1 px solid red ; } </ style > </ head > < body > < table > < thead > < tr > < th > Continente / Subcontinente </ th > < th > Cidade </ th > < th > Idioma </ th > </ tr > </ thead > < tfoot > < tr > < td colspan = " 3 " > ltima atualizao : 11/2 12 </ td > </ tr > </ tfoot > < tbody > < tr > < td rowspan = " 2 " > Amrica do Sul </ td > < td > So Paulo </ td > < td > Portugus </ td > </ tr > < tr > < td > Cidade do Mxico </ td > < td > Espanhol </ td > </ tr > < tr > < td rowspan = " 3 " > sia </ td > < td > Tquio </ td > < td > Japons </ td > </ tr > < tr > < td > Xangai </ td > < td > Mandarim </ td > </ tr > < tr > < td > Nova Dlhi </ td > < td > Hindi </ td > </ tr > < tr > < td > Amrica do Norte </ td > < td > Nova Iorque </ td > < td > Ingls </ td > </ tr >
134
www.k19.com.br
135
54 55 56 57 </ tbody > </ table > </ body > </ html >
Cdigo HTML 2.35: exercicio-tabela.html
R ESPOSTAS
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exerccio Complementar - Pontos Tursticos </ title > </ head > < body > < h1 > Pontos Tursticos do Brasil </ h1 > < h2 > Lista dos pontos </ h2 > < dl > < dt > Ilha Bela - SP </ dt > < dd > Praias , Trilhas e Mergulho em Nufrago . </ dd > < dt > Bonito - MS </ dt > < dd > Mergulho em rios de guas transparentes , cachoeiras , grutas e cavernas . </ dd > < dt > Museu de Arte de So Paulo - SP </ dt > < dd > Grande acervo com diversas obras de artistas consagrados . </ dd > </ dl > </ body > </ html >
Cdigo HTML 2.38: exercicio-pontos-turisticos.html
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exerccio Complementar - Como instalar o seu XPTO ? </ title > </ head > < body > < h1 > Como instalar o seu XPTO ? - K19 Eletronics </ h1 > < ol > < li > Verifique se todos os acessrios listados <a href = " # " > nesta pgina </ a > esto presentes . </ li > < li > Coloque o aparelho na horizontal sobre uma superfcie estvel . </ li > < li > Conectar o aparelho ao computador ou notebook utilizando o cabo USB . </ li > < li > Usar o CD - ROM para instalao do software . </ li > < li > Conectar o aparelho fonte de energia com o adaptador AC . </ li > < li > Ligar o aparelho e esperar o reconhecimento no computador . </ li > </ ol > </ body > </ html >
www.facebook.com/k19treinamentos
135
R ESPOSTAS
136
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exerccio - Formao Desenvolvedor Java K19 </ title > </ head > < body > < dl > < h1 > K1 - Formao Desenvolvedor Java </ h1 > < ul > < li > K11 - Orientao a Objetos em Java </ li > < li > K12 - Desenvolvimento Web com JSF2 e JPA2 </ li > </ ul > </ dl > </ body > </ html >
Cdigo HTML 2.44: exercicio-formacao-k19.html
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27 28 29 3 31
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exerccio - Formulrio </ title > </ head > < body > < form action = " teste . html " method = " get " > < input type = " hidden " name = " hash " value = " 4 w587nt3 " / > < div > < label for = " nome " > Nome : </ label > < input type = " text " id = " nome " name = " nome " / > </ div > < div > < label for = " sobrenome " > Sobrenome : </ label > < input type = " text " id = " sobrenome " name = " sobrenome " / > </ div > < div > < label for = " senha " > Senha : </ label > < input type = " password " id = " senha " name = " senha " / > </ div > < div > < label for = " foto " > Escolha uma foto : </ label > < input type = " file " id = " foto " name = " foto " / > </ div > < div > Sexo :
136
www.k19.com.br
137
32 33 34 35 36 37 38 39 4 41 42 43 44 45 46 47 48 49 5 51 52 53 54 55 56 57 58 59 6 61 62 63 64 65 66 67 68 69 7 < input < label < input < label </ div > type = " radio " name = " sexo " id = " sexo - m " / > for = " sexo - m " > Masculino </ label > type = " radio " name = " sexo " id = " sexo - f " / > for = " sexo - f " > Feminino </ label >
R ESPOSTAS
< div > < label for = " estado " > Selecione um Estado : </ label > < select id = " estado " name = " estado " > < option value = " sp " > So Paulo </ option > < option value = " rj " > Rio de Janeiro </ option > < option value = " mg " > Minas Gerais </ option > < option value = " es " > Esprito Santo </ option > < option value = " pr " > Paran </ option > </ select > </ div > < div > Escolha um ou mais meios de comunicao : < input type = " checkbox " name = " comunicacao [] " id = " comunicacao - musica " / > < label for = " comunicacao - musica " > Msica </ label > < input type = " checkbox " name = " comunicacao [] " id = " comunicacao - televisao " / > < label for = " comunicacao - televisao " > Televiso </ label > < input type = " checkbox " name = " comunicacao [] " id = " comunicacao - radio " / > < label for = " comunicacao - radio " > Rdio </ label > </ div > < div > < label for = " obs " > Observaes : </ label > < textarea id = " obs " name = " observacoes " > </ textarea > </ div > < div > < input type = " submit " value = " Enviar " / > < input type = " reset " value = " Desfazer alteraes " / > </ div > </ form > </ body > </ html >
Cdigo HTML 2.51: exercicio-formulario.html
1 2 3 4 5 6 7 8
< html > < head > < title > Imprime numeros de 1 ate 5 - 2 x </ title > < script type = " text / javascript " src = " imprime - numeros -1 -5 -2 x . js " > </ script > </ head > < body > </ body > </ html >
Cdigo HTML 4.6: imprime-numeros-1-50-2x.html
1 2 3 4 5 6
for ( var x = ; x < 2; x ++) { for ( var y = 1; y <= 5 ; y ++) { document . writeln ( y ) ; document . writeln ( < br / > ) ; } }
Cdigo Javascript 4.15: imprime-numeros-1-50-2x.js
www.facebook.com/k19treinamentos
137
R ESPOSTAS
138
1 2 3 4 5 6 7 8
< html > < head > < title > Imprime formacao e curso </ title > < script type = " text / javascript " src = " imprime - formacao - curso . js " > </ script > </ head > < body > </ body > </ html >
Cdigo HTML 4.7: imprime-formacao-curso.html
1 2 3 4 5 6 7 8 9
for ( var x = ; x < 5; x ++) { document . writeln ( K - Formao Bsica ) ; document . writeln ( < br / > ) ; for ( var y = ; y < 3; y ++) { document . writeln ( K 2 - Desenvolvimento Web com HTML , CSS e JavaScript ) ; document . writeln ( < br / > ) ; } }
Cdigo Javascript 4.16: imprime-formacao-curso.js
1 2 3 4 5 6 7 8
< html > < head > < title > Imprima *** para multiplos de 3 </ title > < script type = " text / javascript " src = " imprime -*** - multiplo3 . js " > </ script > </ head > < body > </ body > </ html >
Cdigo HTML 4.8: imprime-***-multiplo3.html
1 2 3 4 5 6 7 8
for ( var x = 1; x <= 6 ; x ++) { if ( x % 3 != ) { document . writeln ( * ) ; } else { document . writeln ( *** ) } document . writeln ( < br / > ) ; }
Cdigo Javascript 4.17: imprime-***-multiplo3.js
138
www.k19.com.br
139
1 2 3 4 5 6 7
R ESPOSTAS
< html > < head > < title > Imprimir * entre os numeros multiplos de 4 e 7 </ title > < script type = " text / javascript " src = " imprime -* - no - lugar - multiplo4e7 . js " > </ script > < / head > < body > </ body > </ html >
Cdigo HTML 4.9: imprime-*-no-lugar-multiplo4e7.html
1 2 3 4 5 6 7 8 9 1 11 12 13
for ( var x = 1; x <= 8 ; x ++) { var resto = x%4; var resto2 = x%7; if ( resto == ) { document . writeln ( " * " ) ; } else if ( resto2 == ) { document . writeln ( " * " ) ; } else { document . writeln ( x ) ; } document . writeln ( < br / > ) ; }
Cdigo Javascript 4.18: imprime-*-no-lugar-multiplo4e7.js
1 2 3 4 5 6 7 8
< html > < head > < title > Imprime padro 3 </ title > < script type = " text / javascript " src = " imprime - padrao -3. js " > </ script > < head > < body > </ body > </ html >
Cdigo HTML 4.10: imprime-padrao-3.html
1 2 3 4 5 6
var linha = * ; for ( var contador = 1; contador <= 1 ; contador ++) { document . writeln ( linha ) ; document . writeln ( < br / > ) ; linha += * ; }
Cdigo Javascript 4.19: imprime-padrao-3.js
1 2 3 4
< html > < head > < title > Imprime padro 4 </ title > < script type = " text / javascript " src = " imprime - padrao -4. js " > </ script >
www.facebook.com/k19treinamentos
139
R ESPOSTAS
5 6 7 8 </ head > < body > </ body > </ html >
Cdigo HTML 4.11: imprime-padrao-4.html
140
1 2 3 4 5 6 7 8 9 1 11
var linha = * ; for ( var contador = 1; contador <= 8; contador ++) { document . writeln ( linha ) ; document . writeln ( < br / > ) ; var resto = contador % 4; if ( resto == ) { linha = * ; } else { linha += * ; } }
Cdigo Javascript 4.20: imprime-padrao-4.js
1 2 3 4 5 6 7 8
< html > < head > < title > Imprime padro 5 </ title > < script type = " text / javascript " src = " imprime - padrao -5. js " > </ script > </ head > < body > </ body > </ html >
Cdigo HTML 4.12: imprime-padrao-5.html
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16
document . writeln ( penultimo ) ; document . writeln ( < br / > ) ; document . writeln ( ultimo ) ; document . writeln ( < br / > ) ; for ( var contador = ; contador < 28; contador ++) { var proximo = penultimo + ultimo ; document . writeln ( proximo ) ; document . writeln ( < br / > ) ; penultimo = ultimo ; ultimo = proximo ; }
Cdigo Javascript 4.21: imprime-padrao-5.js
140
www.k19.com.br
141
1 2 3 4 5 6 7 8 < html > < head > < title > Embaralhando Array </ title > < script type = " text / javascript " src = " embaralha - array . js " > </ script > </ head > < body > </ body > </ html >
Cdigo HTML 4.16: embaralha-array.html
R ESPOSTAS
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26
var array = new Array (1 ) ; for ( var x = ; x < array . length ; x ++) { array [ x ] = x ; } for ( var y = ; y < array . length ; y ++) { document . writeln ( array [ y ]) ; document . writeln ( < br / > ) ; } for ( var z = ; var posicao1 var posicao2 var auxiliar z = = = < 15; z ++) { Math . floor ( Math . random () *1 ) ; Math . floor ( Math . random () *1 ) ; array [ posicao1 ];
array [ posicao1 ] = array [ posicao2 ]; array [ posicao2 ] = auxiliar ; } document . writeln ( " ------------------" ) ; document . writeln ( < br / > ) ; for ( var w = ; w < array . length ; w ++) { document . writeln ( array [ w ]) ; document . writeln ( < br / > ) ; }
Cdigo Javascript 4.33: embaralha-array.js
1 2 3 4 5 6 7 8
< html > < head > < title > Ordenando Array </ title > < script type = " text / javascript " src = " ordenando - array . js " > </ script > </ head > < body > </ body > </ html >
Cdigo HTML 4.17: ordenando-array.html
1 2 3 4 5 6 7 8 9
var array = new Array (15) ; for ( var x = ; x < array . length ; x ++) { array [ x ] = Math . floor ( Math . random () *1 ) ; } for ( var y = ; y < array . length ; y ++) { document . writeln ( array [ y ]) ; }
www.facebook.com/k19treinamentos
141
R ESPOSTAS
1 11 12 13 14 15 16 17 18 19 document . writeln ( < br / > ) ; array . sort () ; document . writeln ( " -----------------------------------------" ) ; document . writeln ( < br / > ) ; for ( var z = ; z < array . length ; z ++) { document . writeln ( array [ z ]) ; }
Cdigo Javascript 4.34: ordenando-array.js
142
1 2 3 4 5 6 7
var formacao = { sigla : " K " , nome : " Formao Bsica " }; console . log ( formacao . sigla ) ; console . log ( formacao . nome ) ; var formacao_2 = { sigla : " K1 " , nome : " Formao Desenvolvedor Java " }; console . log ( formacao_2 . sigla ) ; console . log ( formacao_2 . nome ) ;
Cdigo Javascript A.22: formacao
1 2 3 4 5 6 7 8 9 1 11
var formacao = { sigla : " K " , nome : " Formao Bsica " }; console . log ( formacao . sigla ) ; console . log ( formacao . curso ) ; var x = formacao ; x . sigla = " K " ; x . nome = " Formao Bsica " ; console . log ( formacao . sigla ) ; console . log ( formacao . nome ) ;
Cdigo Javascript A.23: formacao
1 2 3 4 5 6 7 8
var formacao = { sigla : " K2 " , nome : " Formao Desenvolvedor Java Avanado " }; var nova_formacao = Object . create ( curso ) ; nova_formacao . sigla = " K3 " ; nova_formacao . nome = " Formao Desenvolvedor . NET " ; console . log ( formacao . sigla ) ;
142
www.k19.com.br
143
9 console . log ( formacao . nome ) ;
Cdigo Javascript A.24: prototipo
R ESPOSTAS
1 2 3 4 5 6
var divisao = function (a , b ) { return a / b ; } var resultado = divisao (1 , 2) ; console . log ( resultado ) ;
Cdigo Javascript A.41: diviso()
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25
var conta = { saldo : , saque : function ( valor ) { if ( conta . saldo < 6 ) { throw { message : " Saldo insuficiente . " } } else if ( valor <= ) { throw { message : " Valores menores ou iguais a } } else { this . saldo -= valor ; } try { conta . saque ( ) ; } catch ( e ) { console . log ( e . name ) ; console . log ( e . message ) ; } } } conta . saque (6 ) console . log ( conta . saque ) ;
1 2 3 4
var multiplicacao = function () { var multiplicacao = ; for ( var x = ; x < arguments . length ; x ++) {
www.facebook.com/k19treinamentos
143
R ESPOSTAS
5 6 7 8 9 1 11 12 13 multiplicacao *= arguments [ x ]; } return multiplicacao ; } var resultado = multiplicacao (3 , 6 , 2 , 8) ; console . log ( resultado ) ;
Cdigo Javascript A.43: mutiplicacao-2()
144
1 2 3 4 5 6 7 8 9 1 11 12
console . log ( vazio [ ]) ; console . log ( formacoes [ ]) ; console . log ( vazio . length ) ; console . log ( formacoes . length ) ; for ( var x = , x < formacoes . length ; x ++) { console . log ( formacoes [ x ]) ; }
Cdigo Javascript A.74: imprime-array
1 2 3 4 5 6 7
var formacoes = [ " K1 " , " K2 " , " K3 " , " K4 " ]; formacoes [ formacoes . length ] = " K ";
1 2 3 4 5 6 7
var formacoes = [ " K1 " , " K2 " , " K3 " , " K4 " ]; formacoes . push ( " K ");
144
www.k19.com.br
145
R ESPOSTAS
1 2 3 4 5 6 7 8
var letras = [ " a " , " b " , " c " ]; var numeros = [ " 1 " , " 2 " , " 3 " ]; var letras_numeros = letras . concat ( numeros ) ; for ( var x = ; x < letras_numeros . length ; x ++) { console . log ( letras_numeros [ x ]) ; }
Cdigo Javascript A.77: metodo-concat()
1 2 3 4
1 2 3 4 5 6 7 8 9 1
var formacoes = formacoes . pop () ; console . log ( formacoes ) ; formacoes . push ( " K4 " ) ; for ( var x = ; formacoes . length ; x ++) { console . log ( formacoes [ x ]) ; } // highlights !!
1 2 3 4 5 6 7
var letras = [ " a " , " b " , " c " , " d " , " e " ]; letras . reverse () ; for ( var x = ; x < letras . length ; x ++) { console . log ( letras [ x ]) ; }
Cdigo Javascript A.80: metodo-reverse()
www.facebook.com/k19treinamentos
145
R ESPOSTAS
146
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15
var letras = [ " a " , " b " , " c " , " d " , " e " ]; letras . reverse () ; for ( var x = ; x < letras . length ; x ++) { console . log ( letras [ x ]) ; } var letras = letras . shift () ; console . log ( " Elemento removido : " + letras ) ; for ( var x = ; x < letras . length ; x ++) { console . log ( letras [ x ]) ; }
Cdigo Javascript A.81: metodo-shift()
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21
var letras = [ " a " , " b " , " c " , " d " , " e " ]; letras . reverse () ; for ( var x = ; x < letras . length ; x ++) { console . log ( letras [ x ]) ; } var letras = letras . shift () ; console . log ( " Elemento removido : " + letras ) ; for ( var x = ; x < letras . length ; x ++) { console . log ( letras [ x ]) ; } letras . unshift ( " e " ) ; for ( var x = ; x < letras . length ; x ++) { console . log ( letras [ x ]) ; }
Cdigo Javascript A.82: metodo-unshift()
1 2 3 4 5 6
146
www.k19.com.br
147
7 }
Cdigo Javascript A.83: metodo-slice()
R ESPOSTAS
1 2 3 4 5
var formacao = " K1 - Formao Desenvolvedor Java " ; var aux = formacao . split ( " -" ) ; console . log ( aux [ ]) ; console . log ( aux [1]) ;
Cdigo Javascript A.84: metodo-split()
1 2 3 4 5 6 7 8 9 1 11 12 13
< DOCTYPE html > < html > < head > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > < input name = " Carlos Alberto " class = " Funcionario " / > < input name = " Ana Maria " class = " Funcionario " / > < input name = " Paulo Soares " class = " Supervisor " / > < input name = " Oscar Schneider " class = " Gerente " / > < input name = " Iris Okamoto " class = " Gerente " / > </ body > </ html >
Cdigo HTML B.8: seletores-2.html
1 2 3 4 5 6 7 8 9 1 11 12 13 14
< DOCTYPE html > < html > < head > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > < input name = " Carlos Alberto " class = " Funcionario " / > < input name = " Ana Maria " class = " Funcionario " / > < input name = " Paulo Soares " class = " Supervisor " / > < input name = " Oscar Schneider " class = " Gerente " / > < input name = " Iris Okamoto " class = " Gerente " / > < script >$ ( . Gerente ) . val ( Instrutor da K19 ) ; </ script >$ </ body > </ html >
Cdigo HTML B.9: seletores-2.html
www.facebook.com/k19treinamentos
147
R ESPOSTAS
148
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16
< DOCTYPE html > < html > < head > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > < input name = " Carlos Alberto " class = " Funcionario " / > < input name = " Ana Maria " class = " Funcionario " / > < input name = " Paulo Soares " class = " Supervisor " / > < input name = " Oscar Schneider " class = " Gerente " / > < input name = " Iris Okamoto " class = " Gerente " / > < script >$ ( input [ name |= " a " ," e " , " i " , " o " , " u " ] ) . val ( K19 ) ; </ script > $ </ body > </ html >
Cdigo HTML B.10: seletores-2.html
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15
< DOCTYPE html > < html > < head > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > < input name = " Carlos Alberto " class = " Funcionario " / > < input name = " Ana Maria " class = " Funcionario " / > < input name = " Paulo Soares " class = " Supervisor " / > < input name = " Oscar Schneider " class = " Gerente " / > < input name = " Iris Okamoto " class = " Gerente " / > < script >$ ( input ) . val ( K19 ) ; </ script >$ </ body > </ html >
Cdigo HTML B.11: seletores-2.html
1 2 3 4 5 6 7 8 9 1 11
<! DOCTYPE html > < html > < head > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > < h1 > Formaes K19 </ h1 > < div > < ul > < li > K - Formao Bsica </ li >
148
www.k19.com.br
149
12 13 14 15 16 17 18 19 < li > < li > < li > < li > </ ul > </ div > </ body > </ html > K1 K2 K3 K4 Formao Formao Formao Formao Desenvolvedor Desenvolvedor Desenvolvedor Desenvolvedor Java </ li > Java Avanado </ li > . NET </ li > Android </ li >
R ESPOSTAS
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22
<! DOCTYPE html > < html > < head > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > < h1 > Formaes K19 </ h1 > < div > < ul > < li > K - Formao Bsica </ li > < li > K1 - Formao Desenvolvedor Java </ li > < li > K2 - Formao Desenvolvedor Java Avanado </ li > < li > K3 - Formao Desenvolvedor . NET </ li > < li > K4 - Formao Desenvolvedor Android </ li > </ ul > </ div > < script > $ ( li ) . click ( function () { alert ( " Elemento li clicado : " + $ ( this ) . text () ) ;}) ; </ script > </ body > </ html >
Cdigo HTML B.19: eventos-2.html
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18
<! DOCTYPE html > < html > < head > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > < h1 > Formaes < div > < ul > < li > K < li > K1 < li > K2 < li > K3 < li > K4 </ ul > </ div > < script > K19 </ h1 >
Java </ li > Java Avanado </ li > . NET </ li > Android </ li >
www.facebook.com/k19treinamentos
149
R ESPOSTAS
19 2 21 22 23 $ ( li ) . dbclick ( function () { alert ( " Elemento clicado 2 x : " + $ ( this ) . text () ) ;}) ; </ script > </ body > </ html >
Cdigo HTML B.20: eventos-2.html
150
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26
<! DOCTYPE html > < html > < head > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > < h1 > Formaes K19 </ h1 > < div > < label for = " formacoes " > Selecione uma formao : </ label > < select name = " formacoes " id = " formacoes " > < option > ---- </ option > < option value = " K " > K - Formao Bsica </ option > < option value = " K1 " > K1 - Formao Desenvolvedor Java </ option > *** < option value = " K2 " > K2 - Formao Desenvolvedor Java Avanado </ option > < option value = " K3 " > K3 - Formao Desenvolvedor . NET </ option > < option value = " K4 " > K4 - Formao Desenvolvedor Android </ option > </ select > </ div > < script > $ ( # formacoes ) . change ( function () { alert ( " Formao selecionado : " + $ ( " # formacoes option : selected " ) . text () ) ; }) ; </ script > </ body > </ html >
Cdigo HTML B.21: eventos-2.html
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17
<! DOCTYPE html > < html > < head > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > < h1 > Cursos K19 </ h1 > < div > < ul > < li > K31 - C # e Orientao a Objetos </ li > < li > K32 - Desenvolvimento Web com ASP . NET MVC </ li > < li > K11 - Java e Orientao a Objetos </ li > < li > K12 - Desenvolvimento Web com JSF2 e JPA2 </ li > </ ul > </ div > < div >
150
www.k19.com.br
151
18 19 2 21 22 23 24 25 26 27 28 < button id = " mostrar " > Mostrar </ button > < button id = " ocultar " > Ocultar </ button > < button id = " fadeto " > FadeTo </ button > </ div > < script > $ ( " # mostrar " ) . click ( function () { $ ( " li " ) . fadeIn ( " slow " ) ; }) ; $ ( " # ocultar " ) . click ( function () { $ ( " li " ) . fadeOut ( " slow " ) ; }) ; $ ( " # fadeto " ) . click ( function () { $ ( " li " ) . fadeTo ( " slow " , .2) ; }) ; </ script > </ body > </ html >
Cdigo HTML B.30: efeitos.html
R ESPOSTAS
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26
<! DOCTYPE html > < html > < head > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > < h1 > Cursos K19 </ h1 > < div > < ul > < li > K31 - C # e Orientao a Objetos </ li > < li > K32 - Desenvolvimento Web com ASP . NET MVC </ li > < li > K11 - Java e Orientao a Objetos </ li > < li > K12 - Desenvolvimento Web com JSF2 e JPA2 </ li > </ ul > </ div > < div > < button id = " mostrar " > Mostrar </ button > < button id = " ocultar " > Ocultar </ button > </ div > < script > $ ( " # mostrar " ) . click ( function () { $ ( " li " ) . slideDown ( " slow " ) ; }) ; $ ( " # ocultar " ) . click ( function () { $ ( " li " ) . slideUp ( " slow " ) ; }) ; </ script > </ body > </ html >
Cdigo HTML B.31: efeitos.html
1 2 3 4 5 6 7 8 9 1 11
<! DOCTYPE html > < html > < head > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > < h1 > Cursos K19 </ h1 > < div > < ul > < li > K31 - C # e Orientao a Objetos </ li >
www.facebook.com/k19treinamentos
151
R ESPOSTAS
12 13 14 15 16 17 18 19 2 21 22 23 24 < li > K32 - Desenvolvimento Web com ASP . NET MVC </ li > < li > K11 - Java e Orientao a Objetos </ li > < li > K12 - Desenvolvimento Web com JSF2 e JPA2 </ li > </ ul > </ div > < div > < button id = " mostrar - ocultar " > Mostrar / Ocultar </ button > </ div > < script > $ ( " # mostrar - ocultar " ) . click ( function () { $ ( " li " ) . slideToggle ( " slow " ) ; }) ; </ script > </ body > </ html >
Cdigo HTML B.32: efeitos.html
152
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 26 27
<! DOCTYPE html > < html > < head > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > < h1 > K19 treinamentos </ h1 > < div > < ul > < li > K - Formao Bsica </ li > < li > K1 - Formao Desenvolvedor Java </ li > < li > K2 - Formao Desenvolvedor Java Avanado </ li > < li > K3 - Formao Desenvolvedor . NET </ li > < li > K4 - Formao Desenvolvedor Android </ li > </ ul > </ div > < div > < button id = " mostrar " Mostrar </ button > < button id = " ocultar " > Ocultar </ button > </ div > < script > $ ( " # mostrar " ) . click ( function () { $ ( " li " ) . show ( " slow " ) ;}) ; $ ( " # ocultar " ) . click ( function () { $ ( " li " ) . hide ( " slow " ) ;}) ; </ script > </ body > </ html >
Cdigo HTML B.33: eventos-2.html
1 2 3 4 5 6 7 8
<! DOCTYPE html > < html > < head > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > < h1 > K19 treinamentos </ h1 > < div >
152
www.k19.com.br
153
9 1 11 12 13 14 15 16 17 18 19 2 21 22 23 24 25 < ul > < li > K - Formao Bsica </ li > < li > K1 - Formao Desenvolvedor Java </ li > < li > K2 - Formao Desenvolvedor Java Avanado </ li > < li > K3 - Formao Desenvolvedor . NET </ li > < li > K4 - Formao Desenvolvedor Android </ li > </ ul > </ div > < div > < button id = " mostrar - ocultar " > Mostrar / Ocultar </ button > </ div > < script > $ ( " # mostrar - ocultar " ) . click ( function () { $ ( " li " ) . toggle ( " slow " ) ;}) ; </ script > </ body > </ html >
Cdigo HTML B.34: efeitos-2.html
R ESPOSTAS
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15
<! DOCTYPE html > < html > < head > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > <p > Lorem Ipsum Dolor </ p > < div > < button id = " Alterar contedo </ button > </ div > < script > $ ( " alterar " ) . click ( function () { $ ( " p " ) . html ( " K19 - Treinamentos ) ;}) ; </ script > </ body > </ html >
Cdigo HTML B.41: html-2.html
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16
<! DOCTYPE html > < html > < head > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > <p > Lorem Ipsum Dolor </ p > < div > < button id = " Alterar contedo </ button > </ div > < script > $ ( " alterar " ) . click ( function () { $ ( " p " ) . html ( " K19 - Treinamentos " ) ;}) ; </ script > <div > < button id = " prepend " > Prepend </ button > < button id = " append " > Append </ button >
www.facebook.com/k19treinamentos
153
R ESPOSTAS
17 18 19 2 21 22 23 </ div > < script > $ ( " # prepend " ) . click ( function () { $ ( " p " ) . prepend ( " " ) ;}) ; $ ( " # append " ) . click ( function () { $ ( " p " ) . append ( " " ) ;}) ; </ script > </ body > </ html >
Cdigo HTML B.42: html-2.html
154
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17
<! DOCTYPE html > < html > < head > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > <p > Lorem Ipsum Dolor </ p > < div > < button id = " before " > Before </ button > < button id = " after " > After </ button > </ div > < script > $ ( " # before " ) . click ( function () { $ ( " p " ) . before ( " " ) ;}) ; $ ( " # after " ) . click ( function () { $ ( " p " ) . after ( " " ) ;}) ; </ script > </ body > </ html >
Cdigo HTML B.43: html-2.html
154
www.k19.com.br