k19 k02 Desenvolvimento Web Com HTML Css e Javascript

TREINAMENTOS
Desenvolvimento Web com HTML, CSS e Javascript
Desenvolvimento Web com HTML, CSS e Javascript
1 de agosto de 2012
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 Estrtutura Bsica . . . . . . . 2.2 Exerccios de Fixao . . . . 2.3 Semntica HTML . . . . . . 2.4 Pargrafos . . . . . . . . . . . 2.5 Exerccios de Fixao . . . . 2.6 Cabealhos . . . . . . . . . . 2.7 Exerccios de Fixao . . . . 2.8 Links . . . . . . . . . . . . . . 2.9 Exerccios de Fixao . . . . 2.10 Exerccios Complementares 2.11 ncoras . . . . . . . . . . . . 2.12 Exerccios de Fixao . . . . 2.13 Imagens . . . . . . . . . . . . 2.14 Exerccios de Fixao . . . . 2.15 Tabelas . . . . . . . . . . . . 2.16 Exerccios de Fixao . . . . 2.17 Listas . . . . . . . . . . . . . 2.18 Exerccios de Fixao . . . . 2.19 Exerccios de Fixao . . . .
www.k19.com.br
i 1 2 3 4 1 1 1 3 3 4 5 6 7 7 8 9 10 11 11 12 12 13 13 17 17 19 20
i
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . .
S UMRIO
ii
2.20 2.21 2.22 2.23 3 CSS 3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 3.9
Exerccios de Fixao Formulrio . . . . . . Exerccios de Fixao Exerccios de Fixao
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
21 21 27 28 31 34 35 37 38 40 41 43 43 43 45 45 45 48 49 51 52 53 54 55 57 57 61 64 66 68 71 72 75 75 76 76 77 78 79 82 84 86 86 87 91
Estrutura de uma regra CSS Tipos de seletores . . . . . . Exerccios de Fixao . . . . Principais propiedades CSS Box model . . . . . . . . . . Posicionando elementos . . Cores em CSS . . . . . . . . . Unidades de medida . . . . 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 . . . . . . . . . . . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
A Javascript Avanado A.1 Objetos . . . . . . . . A.2 Exerccios de Fixao A.3 Funes . . . . . . . . A.4 Exerccios de Fixao A.5 Arrays . . . . . . . . . A.6 Mtodos das Strings . A.7 Exerccios de Fixao
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
B JQuery B.1 Introduo . . . . . . . . . . B.2 Sintaxe . . . . . . . . . . . . . B.3 Seletores . . . . . . . . . . . B.4 Exerccios de Fixao . . . . B.5 Eventos . . . . . . . . . . . . B.6 Exerccios de Fixao . . . . B.7 Efeitos . . . . . . . . . . . . . B.8 Exerccios de Fixao . . . . B.9 Exerccios Complementares B.10 HTML . . . . . . . . . . . . . B.11 Exerccios de Fixao . . . . C Respostas
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
ii
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.k19.com.br
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.k19.com.br
S UMRIO
TR
S TO EN AM EIN TREINAMENTOS TR EIN AM EN TO S
Conhea os nossos cursos

K01- Lgica de Programao
K11 - Orientao a Objetos em Java
K12 - Desenvolvimento Web com JSF2 e JPA2
K21 - Persistncia com JPA2 e Hibernate
K22 - Desenvolvimento Web Avanado com JFS2, EJB3.1 e CDI
K23 - Integrao de Sistemas com Webservices, JMS e EJB
K31 - C# e Orientao a Objetos
K32 - Desenvolvimento Web com ASP.NET MVC
www.k19.com.br/cursos
www.k19.com.br
CAPTULO
I NTRODUO
Durante muito tempo a idia de desenvolvimento web cou associada apenas construo de pginas cuja funo era simplesmente levar ao usurio um determinado contedo. Porm, com a popularizao da internet, novas necessidades foram surgindo em diversas reas como a do entretenimento, assim como a dos negcios. Cada vez mais jogos online foram aparecendo, redes sociais ganharam foras graas grande interatividade permitida entre os usurios, gravadoras de msica passaram a vender seus ttulos atravs de canais especializados e ferramentas de produtividade comearam a rodar na tal da "nuvem". Enm, necessidades antes inexistentes surgiram numa velocidade muito grande e 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 o responsvel por produzir o cgido HTML, CSS, Javascript, PHP, SQL e de qualquer outra tecnologia que fosse necessrio. Essa pessoa era chamada de webmaster. Com a evoluo dos sites a gura do webmaster como era conhecida foi desaparecendo, pois a complexidade e volume de trabalho para o desenvolvimento de uma aplicao web foi cando muito grande para apenas uma pessoa, ou para um grupo muito pequeno de desenvolvedores (webmasters). Hoje a gura do webmaster ainda existe, mas seu papel mudou um pouco, pois esse prossional atua mais como um gerente que possui bom conhecimento das diversas tecnologias empregadas nos desenvolvimento de uma aplicao web. Ele pode ou no participar diretamente do desenvolvimento, ou seja, pode ou no "botar a mo na massa". J que as tarefas antes de responsabilidade do webmaster foram delegadas a outros desenvolvedores, naturalmente foram aparecendo algumas especializaes que podemos separar basicamente em dois grupos: desenvolvedores front-end e back-end. Em geral os desenvolvedores front-end so responsveis pela interface com a qual o usurio ir interagir enquanto que os desenvolvedores backend so responsveis pela implantao das regras de negcio na aplicao.
Client side e server side

Com a diferenciao entre desenvolvedor front-end e back-end em mente, podemos dizer que o front-end de uma aplicao web ir trabalhar com as linguagens categorizadas como client side, ou seja, aquelas que so executadas no lado do cliente (navegador). Atualmente as principais linguagens/tecnologias client side so HTML, CSS, Javascript, Adobe Flash, Microsoft Silverlight e VBScript. J o desenvolvedor back-end ir trabalhar com linguagens como Java, C#, VB.NET, PHP, Ruby, Python, SQL entre outras que so categorizadas como server side, ou seja, sero executadas no lado do servidor. Isso no signica que os desenvolvedores front-end no precisam conhecer as linguagens utilizadas pelo back-end e vice-versa. O que ocorre na prtica a especializao do prossional em determinadas tecnologias que podem tender mais para o front-end ou para o back-end.
HTML, CSS e Javascript

www.k19.com.br
I NTRODUO
Como acabamos de ver, as principais linguagens/tecnologias client side so HTML, CSS, Javascript, Adobe Flash, Microsoft Silverlight e VBScript. De todas elas as trs primeiras so as mais importantes e atualmente esto em maior evidncia. Cada uma das trs linguagens possui um papel bem especco que podemos resumir da seguinte maneira: o cdigo HTML ser responsvel por prover o contedo de uma pgina, o cdigo CSS ir cuidar da formatao visual do contedo apresentado e o cdigo Javascript permitir que a pgina possua algum tipo de comportamento ("inteligncia") e que alguma interao possa ser feita com o usurio. Nos prximos captulos iremos abordar mais a fundo cada uma dessas trs tecnologias.
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, seja ela na forma de texto, imagem ou vdeo. O contedo de uma pgina web , em geral, escrito na linguagem HTML (HyperText Markup Language), que uma linguagem de marcao originalmente proposta por Tim Berners-Lee no nal da dcada de 1980. Sua idia era disseminar documentos cientcos de uma maneira simples e com uma sintaxe exvel o suciente para que mesmo aqueles sem muita familiaridade com a linguagem pudessem fazer o mesmo. Desde sua proposta at os dias de hoje a linguagem sofreu diversas alteraes em sua especicao de uma verso para outra, sendo a mais atual a especicao do HTML5 que est na fase de "trabalho em progresso"(working draft), ou seja, sua especicao ainda no foi concluda, porm j existem navegadores implementando alguns dos novos recursos denidos no HTML5. As especicaes do 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.
Estrtutura 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 estar 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.k19.com.br
HTML
Figura 2.1: Exemplo da estrutura bsica de um documento HTML
No exemplo acima temos um elemento HTML representado por sua tag "p"e um lho de texto simples "Ol Mundo!".
Exerccios de Fixao
Na pasta Desktop do seu usurio crie uma nova pasta com o seu primeiro nome. Dentro dessa pasta crie outra pasta com o nome 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 com o nome ola-mundo.html e salve 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
Abra o arquivo ola-mundo.html em um navegador e veja o resultado.

4
www.k19.com.br
HTML
Semntica HTML
De acordo com a especicao, cada tag possui um signicado, isto , o que o contedo de um determinado elemento representa. Muitos autores utilizam o termo semntica HTML ao se referirem ao uso correto dos signicados de cada tag. 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.3: Exemplo de uso correto da semntica HTML
Neste exemplo utilizamos novamente a tag p e de acordo com a especicao o elemento p representa um pargrafo. Neste caso, o elemento de tag p foi utilizado de maneira correta. 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 </ 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.4: Exemplo de uso incorreto da semntica HTML
Dessa vez utilizamos a tag address e, de acordo com a especicao, "O elemento address deve ser utilizada pelos autores para fornecer informaes de contato de um documento ou para a maior parte de um documento. Este elemento normalmente aparece no incio ou no nal de um documento". Se observarmos o exemplo mais atentamente, trata-se de uma pgina do site do Jonas (repare no ttulo da pgina), portanto provavelmente o autor da pgina o Jonas e no o Rafael nem o Marcelo. Alm disso, devemos evitar o uso da tag address para informar endereos postais a menos que ele seja relevante ao documento no qual ela foi inserida.
www.k19.com.br
HTML
Pargrafos
Os pargrafos dentro de um documento HTML, em geral, so representados atravs da tag p. Uma das caractersticas da tag p que ela ocupa horizontalmente todo o espao denido pelo elemento pai. Esse o comportamento dos elementos de bloco que discutiremos com mais detalhes no tpico sobre CSS. Por enquanto o importante termos em mente que, pelo fato da tag p se um elemento de bloco, o navegador ir ajustar o texto largura do elemento pai realizando todas as quebras de linha necessrias. Caso seja necessrio forar uma quebra de linha no meio de um texto, podemos utilizar a tag 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 comportameto da quebra de linha automtica , ou seja , sem utilizar nenhum recurso para que a quebra ocorra . </ p > <p > J este pargrafo demonstra a qubra de linha forada . < br / > Percebeu ? </ p > </ body > </ html >
Cdigo HTML 2.5: Exemplo de quebra de linha em um pargrafo
Figura 2.2: Exemplo de quebra de linha em um pargrafo
www.k19.com.br
HTML
Exerccios de Fixao
Crie um novo documento HTML, insira o cdigo abaixo e salve-o com o nome p-quebra-delinha.html na pasta html. Em seguida abra o 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 comportameto da quebra de linha automtica , ou seja , sem utilizar nenhum recurso para que a quebra ocorra . </ p > <p > J este pargrafo demonstra a qubra de linha forada . < br / > Percebeu ? </ p > </ body > </ html >
Cdigo HTML 2.6: p-quebra-de-linha.html
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 >
Cdigo HTML 2.7: Exemplo de cabealhos
www.k19.com.br
HTML
Figura 2.3: Exemplo de cabealhos
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 mais adiante. 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
Crie um novo documento HTML, insira o cdigo abaixo e salve-o com o nome cabecalhos-1.html na pasta html. Em seguida abra o arquivo em um navegador.
4
1 2 3
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " >
www.k19.com.br
9
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 < 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 >
HTML
Cdigo HTML 2.8: cabecalhos-1.html
5 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 o seu documento. Utilize quantos nveis de ttulo achar necessrio.
Links
Normalmente um site formado por um conjunto de pginas que esto interligadas de alguma forma. Para permitir que um usurio navegue de uma pgina para outra devemos utilizar os links. Um link pode fazer a ligao de uma pgina para outra do mesmo site (link interno) ou para uma pgina de outro site (link externo). Para criarmos um link devemos utilizar a tag a. Porm, a tag a sem atributos no ir 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 >
www.k19.com.br
HTML
10
Cdigo HTML 2.10: Exemplo de uso da tag a
Alm do atributo href podemos utilizar atributo target no qual informamos onde iremos abrir o documento. 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.11: Exemplo de uso da tag a com o atributo target
Importante
Ao longo da evoluo do HTML as tags frame e iframe foram caindo em desuso at que no HTML5 foram totalmente retiradas da especicao. Contudo a grande maioria dos navegadores ainda interpretam as duas tags 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 das tags frame e iframe ao mximo.
Exerccios de Fixao
Crie um documento 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
10
www.k19.com.br
11
HTML
Exerccios Complementares
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 pelo iframe. Para cada link em ambas as pginas utilize valores diferentes para o atributo target e observe os resultados.
1
ncoras
Alm de criar links para outras pginas o HTML nos permite 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 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 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.14: Exemplo de uso da tag a como ncora
Lembre-se
At a verso 4 do HTML e no XHTML a especicao dizia para utilizarmos o atributo name para criarmos as ncoras. Porm, no HTML5, a recomendao do W3C que se utilize o atributo id. 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.
www.k19.com.br
11
HTML
12
Exerccios de Fixao
Crie um documento 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
Continuando o exerccio anterior, crie um novo link que aponte para uma ncora localizada em outra pgina. Crie uma pgina com uma ncora para a qual o link que voc acabou de criar ir apontar.
8
Imagens
Provavelmente os sites na internet seriam muito mais entediantes se no fosse possvel adicionar algumas imagens ao contedo das pginas. Como no queremos que as nossas pginas quem muito montonas, neste captulo iremos utilizar a tag img e 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 23 24 25 26 27 28 29 3 31 32 33 34 35 < 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 1 - logo - large . png " K 1 - Lgica de Programao </ p > <p > < img src = " http :// www . k19 . com . br / css / img / k 2 - logo - large . png " K 2 - Desenvolvimento Web com HTML , CSS e JavaScript </ p > <p > < img src = " http :// www . k19 . com . br / css / img / k 3 - logo - large . png " K 3 - SQL e Modelo Relacional </ p > <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.18: Exemplo de uso da tag img
/>
/>
/>
/>
/>
12
www.k19.com.br
13
HTML
Figura 2.4: Exemplo de uso da tag img
Exerccios de Fixao
9 Escolha uma ou mais imagens quaisquer no computador ou na internet. Crie um documento HTML que contenha um ou mais elementos com a tag img para exibir as imagens escolhidas.
Tabelas
Suponha que voc esteja desenvolvendo o site de uma empresa que necessita divulgar alguns relatrios em uma de suas pginas. Existe uma grande chance que os dados dos relatrios venham de planilhas eletrnicas. Como os navegadores interpretam apenas cdigo HTML, voc car encarregado de tranferir para o formato HTML as informaes dos relatrios que esto no formato da planilha eletrnica. Surge a uma necessidade: exibir no navegador um conjunto de informaes de forma organizada. Para resolver esse problema temos a tag table do HTML que nos premite apresentar um conjunto de dados em forma de tabelas. Veja o exemplo:
1 2 3 4 5 < html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exemplo de uso da tag table </ title > </ head >
www.k19.com.br
13
HTML
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 < 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 > </ tr > < tr > < td > Mitsubishi </ td > < td > Lancer </ td > < td > 2 12 </ td > </ tr > < tr > < td colspan = " 3 " > ltima atualizao : </ tr > </ table > </ body > </ html >
14
6/2 12 </ td >
Cdigo HTML 2.20: Exemplo de uso da tag table
Figura 2.5: Exemplo de uso da tag table
14
www.k19.com.br
15
HTML
Perceba que a tag table no utilizada sozinha. Ela necessita pelo menos um ou mais elementos com a tag tr que, por sua vez, necessita de pelo menos um ou mais elementos com a tag 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 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 < 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 > < 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 >
6/2 12 </ td >
Cdigo HTML 2.21: Exemplo de uso da tag table
www.k19.com.br
15
HTML
16
Figura 2.6: Exemplo de uso da tag table
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.
16
www.k19.com.br
17
HTML
Outros dois atributos importantes para a construo de tabelas so colspan e rowspan que podem ser aplicados nos elementos com a tag 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
10
Crie uma pgina que contenha uma tabela de acordo com a imagem abaixo:
Figura 2.7: Exerccio para a tag table
As linhas vermelhas foram colocadas na imagem apenas para facilitar a visualizao do problema.
Listas
Em um documeno 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: Lista de denio - utilizada para exibir denies de termos. Funciona como nos dicionrios,
www.k19.com.br
17
HTML
18
no qual temos uma palavra e em seguida o seu signicado.
Lista ordenada - utilizada para exibir qualquer contedo de forma ordenada.
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 com a tag dl deve possuir pelo menos um lho com a tag dt seguido de um elemento com a tag dd, isto , um item na lista de denio composto por um par de elementos com as tags 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 28 < html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exemplo de uso da tag dl </ title > </ head > < body > < h1 > K19 Treinamentos </ h1 > < h2 > Cursos </ h2 > < 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 >
Cdigo HTML 2.23: Exemplo de uso da tag dl
18
www.k19.com.br
19
HTML
Figura 2.8: Exemplo de uso da tag dl
Exerccios de Fixao
11 Crie um documento HTML que contenha o cardpio de um restaurante com os nomes dos seus pratos e uma breve descrio sobre os mesmos.
Lista ordenada
Para criarmos uma lista ordenada devemos utilizar a tag ol. O elemento com a tag ol deve possuir pelo menos um lho com a tag 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 ol </ title > </ head > < body > < h1 > K19 Receitas </ h1 > < h2 > Macarro instantneo </ h2 > < h3 > Modo de preparo </ h3 > < 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 >
www.k19.com.br
19
HTML
16 17 18 19 < li > Temperar a gosto . </ li > </ ol > </ body > </ html >
Cdigo HTML 2.25: Exemplo de uso da tag ol
20
Figura 2.9: Exemplo de uso da tag ol
Exerccios de Fixao
12 Crie um documento HTML que contenha um manual que explica passo-a-passo o uso de um caixa eletrnico para a operao de saque.
Lista sem ordem

Para criarmos uma lista sem ordem devemos utilizar a tag ul. O elemento com a tag ul deve possuir pelo menos um lho com a tag li.
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 dl </ title > </ head > < body >
20
www.k19.com.br
21
7 8 9 1 11 12 13 14 15 16 < h1 > K19 Treinamentos </ h1 > < h2 > K 2 - Desenvolvimento Web com HTML , CSS e JavaScript </ h2 > < h3 >Pr - requisitos </ h3 > < ul > < li > Conhecimento de algum sistema operacional ( Windows / Linux / MacOS X ) </ li > < li > Lgica de programao </ li > </ ul > </ body > </ html >
Cdigo HTML 2.27: Exemplo de uso da tag ul
HTML
Figura 2.10: Exemplo de uso da tag ul
Exerccios de Fixao
13
Crie um documento HTML que contenha a lista dos cursos da Formao Bsica 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.
www.k19.com.br
21
HTML
22
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 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 > Exemplo de uso da tag input </ title > </ head > < body > < 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 " / >
22
www.k19.com.br
23
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 </ 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 >
Cdigo HTML 2.29: Exemplo de uso da tag input
HTML
Figura 2.11: Exemplo de uso da tag input
www.k19.com.br
23
HTML
24
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 com a tag option. Tais elementos devem ser lhos diretos ou indiretos do elemento com a tag select. Alm disso, cada item pode conter o atributo 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 23 24 25 26 27 28 29 3 31 < 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 " > < option value = " desktops " > Desktops </ option > < option value = " notebooks " > Notebooks </ option > < option value = " tablets " > Tablets </ option > < option value = " celulares " > Celulares </ option > </ select > </ p > </ form > </ body > </ html >
Cdigo HTML 2.30: Exemplo de uso da tag select
24
www.k19.com.br
25
HTML
Figura 2.12: Exemplo de uso da tag select
Caso exista a necessidade de agrupar as opes de um elemento com a tag select, podemos utilizar utilizar a tag 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 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 > 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 > < 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 >
www.k19.com.br
25
HTML
3 31 32 33 34 35 36 37 38 39 < 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.31: Exemplo de uso da tag select
26
Figura 2.13: Exemplo de uso da tag select
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.
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 uso da tag textarea </ title > </ head > < body > < form action = " pagina . html " method = " get " > <p > textarea : < textarea >
26
www.k19.com.br
27
11 12 13 14 15 </ textarea > </ p > </ form > </ body > </ html >
Cdigo HTML 2.32: Exemplo de uso da tag textarea
HTML
Figura 2.14: Exemplo de uso da tag textarea
Exerccios de Fixao
Crie um documento HTML com formulrio que contenha uma caixa de texto que aceite mais de uma linha.
14
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:
www.k19.com.br
27
HTML
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 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.34: Exemplo de uso da tag label
28
Figura 2.15: Exemplo de uso da tag label
Repare que o atributo for da tag label deve conter um valor igual ao do atributo id do elemento que desejamos focar.
Exerccios de Fixao
Crie um documento HTML com diversos elementos de formulrio e para cada elemento crie um rtulo. Cada rtulo deve focar o elemento de formulrio correspondente.
15
28
www.k19.com.br
29
HTML
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 indideros 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 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).
www.k19.com.br
29
HTML
30
30
www.k19.com.br
CAPTULO
Cdigo HTML 3.1: Exemplo de aplicao das propriedades CSS inline
CSS
At o momento trabalhamos apenas com os elementos HTML sem nos preocuparmos com a questo visual dos mesmos. Durante os exemplos mostrados no captulo anterior, cada elemento estava utilizando a formatao padro fornecida pelo navegador. A formatao padro pode variar de navegador para navegador, pois apesar de todos os navegadores tentarem seguir as sugestes do W3C, s vezes ocorrem erros de interpretao da especicao ou erros de implementao. Alm disso, o W3C sugere, ou seja, no obriga. Portanto, seria 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 cairam 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.k19.com.br
31
CSS
32
Figura 3.1: Exemplo de aplicao das propriedades CSS inline
Quando utilizamos as propriedades CSS diretamente em um elemento, dizemos que aplicando o 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
32
www.k19.com.br
33
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
p { font - size : 4 px ; color : # ff ; }
Cdigo CSS 3.1: estilo.css
www.k19.com.br
33
CSS
34
Figura 3.3: Exemplo de aplicao das regras CSS atravs de um arquivo
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.
Estrutura de uma regra CSS

Uma regra CSS composta por trs partes como podemos observar na imagem abaixo:
Seletor
Corpo
p }
{ font-size: 40px;
Figura 3.4: Estrutura de uma regra CSS
Propriedade
34
www.k19.com.br
35
CSS
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. Como no exemplo acima utilizamos aquilo que chamamos de seletor de tipo, todos os elementos com a tag p recebero as propriedades denidas no corpo da regra.
Tipos de seletores
No CSS temos denidos sete tipos de seletores que podem ser utilizados sozinhos ou em conjunto: 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 iremos fazer com que todos os elementos tenham margem igual a px.
1 2 3 * { margin : } px ;
Cdigo CSS 3.2: Usando o seletor universal
Seletor de tipo
O seletor de tipo seleciona todos os elementos cuja tag seja igual ao tipo indicado pelo seletor na declarao da regra CSS. No exemplo a seguir iremos selecionar todos os elementos que possuem a tag textarea.
1 2 3 textarea { border : 1 px solid red ; }
Cdigo CSS 3.3: Usando o seletor de tipo
www.k19.com.br
35
CSS
36
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.4: 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.5: Usando o seletor de lhos
Seletor de irmo adjacente

Chamamos de seletor de irmo adjacente 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 sejam irmos e imediatamente precedidos pelos elementos selecionados pelo seletor sua esquerda. No exemplo a seguir iremos selecionar todos os elementos que possuem a tag input e que sejam irmos e imediatamente precedidos por elementos com a tag label.
1 2 3 label + input { color : green ; }
Cdigo CSS 3.6: Usando o seletor de irmo adjacente
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
36
www.k19.com.br
37
CSS
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.7: 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.8: 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.9: 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
titulos. Repare que o seletor de classe comea com o caractere . (ponto).

1 2 3 . titulos { font - size : 4 px ; }
Cdigo CSS 3.10: Usando o seletor de classe
Exerccios de Fixao
www.k19.com.br
37
CSS
38
Crie uma nova pgina com diversos elementos HTML. Altere a formatao dos elementos utilizando os seletores que voc acabou de aprender. Tente usar todos os seletores.
1
Principais propiedades CSS
Propriedades de background
background-attachment - dene se a imagem de background deve se mover com a rolagem de um elemento ou no. background-color - dene a cor do background de um elemento. background-image - dene a imagem de background de um elemento. background-position - dene a posio do background de um elemento. background-repeat - dene se o background de um elemento de se repetir caso este seja menor que a parte visvel do elemento. background - dene todas as propriedades de background em uma nica linha.
1 2 3 4 5 6 7 8 9 1 11 12 body { background - attachment : fixed ; background - color : # dddddd ; background - image : url ( http : // www . k19 . com . br / css / img / main - header - logo . png ) ; background - position : left top ; background - repeat : repeat ; } div { background : # dddddd url ( http : // www . k19 . com . br / css / img / main - header - logo . png ) no - repeat center center fixed ; }
Cdigo CSS 3.11: Propriedades de background
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. word-spacing - dene o espaamento entre as palavras do texto.
38
www.k19.com.br
39
1 2 3 4 5 6 7 8 9 1 11 12 13 p { color : green ; direction : rtl ; letter - spacing : 1 px ; line - height : 3 px ; text - align : right ; text - decoration : blink ; text - indent : 5 px ; text - transform : uppercase ; vertical - align : middle ; white - space : nowrap ; word - spacing : 3 px ; }
Cdigo CSS 3.12: Propriedades de texto
CSS
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.13: 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 prorpiedades de lista em uma nica linha.
1 2 3 4 5 6 7 ul { list - style - image : url ( http : // www . k19 . com . br / css / img / box - dot - orange . png ) ; list - style - position : inside ; list - style - type : disc ; } ol {
www.k19.com.br
39
CSS
8 9 1 list - style : square outside url ( http : // www . k19 . com . br / css / img / box - dot - orange . png ) ; }
Cdigo CSS 3.14: Propriedades de lista
40
Propriedades de tabela
border-collapse - faz com que as bordas das clulas no quem duplicadas quando estas possuirem bordas.
1 2 3 4 5 6 table { border - collapse : collapse ; } table , th , td { border : 1 px solid blue ; }
Cdigo CSS 3.15: 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.16: Propriedades de dimenso
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).
40
www.k19.com.br
41
CSS
Margem externa (margin) Borda (border) Margem interna (padding)
contedo
Figura 3.5: Box model
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.17: 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 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 ; }
Cdigo CSS 3.18: Exemplo de uso correto das dimenses de um elemento
Posicionando elementos
www.k19.com.br
41
CSS
42
Para posicionar um elemento dentro de um documento HTML o CSS possui os seguintes atibutos: 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 idia vale para os atributos top e bottom.
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
42
www.k19.com.br
43
CSS
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.
Cores em CSS
Em uma propriedade CSS na qual que devemos atribuir uma cor, podemos utilizar trs formas diferentes de se escrever esse valor: nome da cor, valor hexadecinal ou RGB. Nem todas as cores possuem um nome e por esse motivo que normalmente utilizamos a forma hexadecimal ou RGB na grande maioria das vezes. Uma cor heaxadecimal denida da seguinte forma: #RRGGBB, na qual RR, GG e BB devem variar a FF e representam os componentes vermelho, verde e azul de uma cor.
de
Para denirmos uma cor utilizando a notao RGB devemos utilizar a funo rgb(R, G, B) substituindo as letras R, G e B por valores de a 255 ou por uma porcentagem de % a 1 %. Em CSS3 ainda possuimos mais trs formas: RGBA, HSL e HSLA. O HSL dene as cores atravs da matiz, saturao e luminosidade (hue, saturation e lightness). Devemos utilizar a funo hsl(H, S, L), na qual H pode variar de a 36 e S e L de % a 1 %. As formas RGBA e HSLA utilizam as funes rgba(R, G, B, A) e hsla(H, S, L, A), respectivamente. Ambas as funes possuem um ltimo parmetro que signica a opacidade da cor (alpha). Esse valor varia de a 1 ao passo de .1.
Unidades de medida
Em CSS possumos diversas unidades de medida como podemos vericar na listagem abaixo: in - polegada. cm - centrmentro. 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. 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.
Desaos
www.k19.com.br
43
CSS
44
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.
1
Figura 3.6: Box model
44
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
Declarando e inicializando variveis em JavaScript

Em JavaScript podemos declarar e inicializar uma varivel da seguinte maneira:
1 2 3 4 5 var var var var var numero = ; numeroComCasasDecimais = 1.4 5; texto = Varivel com um texto ; outroTexto = " Outra varivel com um texto " ; valorBooleano = true ;
Cdigo Javascript 4.1: Declarando e inicializando variveis em JavaScript
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.k19.com.br
45
J AVA S CRIPT
46
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
Cdigo Javascript 4.2: Exemplo de uso dos operadores aritmticos.
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:
46
www.k19.com.br
47
J AVA S CRIPT
Simples = Incremental += Decremental -= Multiplicativa *= Divisria /= Modular %=

1 2 3 4 5 6 var valor = 1; valor += 2; valor -= 1; valor *= 6; valor /= 3; valor %= 3; // // // // // // valor valor valor valor valor valor = = = = = = 1 3 2 12 4 1
Cdigo Javascript 4.3: Exemplo de uso dos operadores de atribuio.
As instrues acima poderiam ser escritas de outra forma:

1 2 3 4 5 6 var valor = 1; valor = valor + valor = valor valor = valor * valor = valor / valor = valor % 2; 1; 6; 3; 3; // // // // // // valor valor valor valor valor valor = = = = = = 1 3 2 12 4 1
Cdigo Javascript 4.4: O mesmo exemplo anterior, usando os operadores aritmticos.
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 var var t = t = t = t = t = valor = 2; t = false ; ( valor == 2) ; ( valor != 2) ; ( valor < 2) ; ( valor <= 2) ; ( valor > 1) ;
// // // // //
t t t t t
= = = = =
true false false true true
www.k19.com.br
47
J AVA S CRIPT
8 t = ( valor >= 1) ; // t = true
48
Cdigo Javascript 4.5: Exemplo de uso dos operadores relacionais em JavaScript.
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 int valor = 3 boolean teste teste = valor teste = valor teste = valor teste = valor teste = valor ; = < < > > <
false ; 4 && valor 4 && valor 3 || valor 3 || valor 5 && valor
> 2 ; > 3 ; > 2 ; < 2 ; == 3 ;
// // // // //
teste teste teste teste teste
= = = = =
true false true false true
Cdigo Javascript 4.6: Exemplo de uso dos operadores lgicos em JavaScript.
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.
48
www.k19.com.br
49
J AVA S CRIPT
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 10 linhas iguais a essa no cdigo fonte:
1 document . writeln ( Bom Dia ) ;
Cdigo Javascript 4.8: Bom Dia
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 = ;
while ( contador < 1 ) { document . writeln ( Bom Dia ) ; contador ++; }

Cdigo Javascript 4.9: Comando while
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 ++) {
Cdigo Javascript 4.10: Comando for
Exerccios de Fixao
Crie uma pasta com o nome javascript. Crie um documento HTML com um cdigo JavaScript que imprima na pgina o seu nome 100 vezes. Salve o documento na pasta javascript e em seguida abra o arquivo no navegador.
1
www.k19.com.br
49
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
50
Crie um documento HTML com um cdigo JavaScript que imprima na pgina os nmeros de 1 at 100. Salve o documento na pasta javascript e em seguida abra o arquivo no navegador.
2
1 2 3 4
for ( var contador = 1; contador <= 1 document . writeln ( contador ) ; document . writeln ( < br / > ) ; }
; contador ++) {
Cdigo Javascript 4.12: imprime-ate-100.js
Crie um documento HTML com um cdigo JavaScript que percorra todos os nmero 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 o documento na pasta javascript e em seguida abra o arquivo no navegador.
1 2 3 4 5 6 7 8 9 1 for ( var contador = 1; contador <= 1 var resto = contador % 2; if ( resto == 1) { document . writeln ( * ) ; } else { document . writeln ( ** ) ; } document . writeln ( < br / > ) ; }
Cdigo Javascript 4.13: imprime-padrao-1.js
; contador ++) {
Crie um documento HTML com um cdigo 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:
4
1 2 3 PI 5 6
50
www.k19.com.br
51
J AVA S CRIPT
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 ++) {
Crie um documento HTML com um cdigo JavaScript que imprima na pgina um tringulo de *. Veja o exemplo abaixo:
1
* ** *** **** *****

Crie um documento HTML com um cdigo JavaScript que imprima na tela vrios tringulos de *. Observe o padro abaixo.
2
* ** *** **** * ** *** ****

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.
3
, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233...

www.k19.com.br
51
J AVA S CRIPT
52
Crie um documento HTML com um cdigo JavaScript para imprimir os 30 primeiros nmeros da sequncia de Fibonacci.
Funes JavaScript
Uma funo JavaScript uma sequncia de instrues JavaScript que sero executadas quando voc cham-la atravs do seu nome.
Denindo uma funo

Denindo uma funo simples em JavaScript:
1 2 3 4 function imprimeOlaMundo () { document . writeln ( Ol Mundo ! ) ; document . writeln ( < br / > ) ; }
Cdigo Javascript 4.18: Denindo uma funo
Denindo uma funo que recebe parmetros:

1 2 3 4 function imprimeMensagem ( mensagem ) { document . writeln ( mensagem ) ; document . writeln ( < br / > ) ; }
Cdigo Javascript 4.19: Denindo uma funo que recebe parmetros
Denindo uma funo que retorna um valor:

1 2 3 function criaSaudacaoPersonalizada ( nome ) { return Ol , + nome + ! ; }
Cdigo Javascript 4.20: Denindo uma funo que retorna um valor
Chamando uma funo dentro do cdigo JavaScript

Chamando uma funo dentro do cdigo JavaScript:
1 imprimeOlaMundo () ;
Cdigo Javascript 4.21: Chamando uma funo
Chamando uma funo que recebe parmetros:

1 imprimeMensagem ( 123 testando !! ) ;
Cdigo Javascript 4.22: Chamando uma funo que recebe parmetros
Chamando uma funo que retorna um valor:

52
www.k19.com.br
53
1 var saudacao = criaSaudacaoPersonalizada ( Jonas ) ;
Cdigo Javascript 4.23: Chamando uma funo que retorna um valor
J AVA S CRIPT
Chamando uma funo JavaScript pelo HTML

Os elementos HTML possuem alguns eventos que podem ser associados a funes JavaScript atravs de alguns atributos especiais cujos nomes comeam com o prexo on.
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 > Chamando uma funo JavaScript pelo HTML </ title > < script type = " text / javascript " > function exibeOlaMundo () { alert ( Ol Mundo ! ) ; } </ script > </ head > < body > < input type = " button " value = " Exibe saudao " onclick = " exibeOlaMundo () " / > </ body > </ html >
Cdigo HTML 4.2: Chamando uma funo JavaScript pelo HTML
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.24: Criando um objeto
www.k19.com.br
53
J AVA S CRIPT
54
Outra maneira de se criar um objeto utilizando a notao literal mais conhecida como JSON (JavaScript Object Notation):
1 2 3 4 5 6 7 8 9 1 11 12 var contaBancaria = { numero : 1234 , saldo : 1 , deposita : function ( valor ) { if ( valor > ) { this . saldo += valor ; } else { alert ( Valor invlido ! ) ; } } }
Cdigo Javascript 4.25: Criando um objeto utilizando a notao literal
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.26: 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.
54
www.k19.com.br
55
J AVA S CRIPT
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. 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
Crie um documento HTML com um cdigo 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.
5
Crie um documento HTML com um cdigo 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
www.k19.com.br
55
J AVA S CRIPT
56
56
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 idia 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
Recuperando o Valor de uma Propriedade

Para recuperar os valores das propriedades de um objeto, podemos utilizar o operador . ou []. Veja o exemplo a seguir.
1 2 3 4 5 6 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; console . log ( curso . sigla ) ; console . log ( curso [ " sigla " ]) ; var sigla = " sigla " ; console . log ( curso [ sigla ]) ;
Cdigo Javascript A.3: Recuperando o valor de uma propriedade
www.k19.com.br
57
J AVASCRIPT AVANADO
58
Alterando o Valor de uma Propriedade

Para alterar o valor de uma propriedade, basta atribuir um novo valor a propriedade do objeto.
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
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 prtotipo 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.
58
www.k19.com.br
59
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 prtotipo do segundo 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 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; var novo_curso = Object . create ( curso ) ;
www.k19.com.br
59
J AVASCRIPT AVANADO
4 5 6 7 8 9 1 11 12
60
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.10: Modicando o valor de uma propriedade de um objeto que utilizado como prottipo
Por outro lado, alteraes nos valores das propriedades de um objeto no afetam o prottipo desse objeto.
1 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
Removendo uma Propriedade

Podemos remover uma propriedade de um objeto com a funo delete.
1 2 3 4 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; // imprime K11 console . log ( curso . sigla ) ;
60
www.k19.com.br
61
5 6 7 8 9
J AVASCRIPT AVANADO
delete curso . sigla ; // imprime undefined console . log ( curso . sigla ) ;

Cdigo Javascript A.13: Removendo uma propriedade
Vericando a Existncia de uma Propriedade

Podemos vericar se uma propriedade existe, podemos utilizar a funo in.
1 2 3 4 5 6 7 var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; // imprime true console . log ( " sigla " in curso ) ; // imprime false console . log ( " carga_horaria " in curso ) ;
Cdigo Javascript A.14: Vericando a existncia de uma propriedade
Exerccios de Fixao
1
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.
Figura A.1: Habilitando o console
Aps o console ter sido habilitado, podemos executar o cdigo Javascript conforme a gura abaixo.
www.k19.com.br
61
J AVASCRIPT AVANADO
62
Figura A.2: Executando cdigo JavaScript
Crie objetos com propriedades chamadas sigla e nome. Imprima o valor dessas propriedades atravs do console.log do Firebug.
2
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
Verique o funcionamento das referncias em JavaScript.

var curso = { sigla : " K11 " , nome : " Orientao a Objetos em Java " }; // imprime K11 console . log ( curso . sigla ) ; // imprime Orientao a Objetos em Java console . log ( curso . nome ) ; 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.16: Referncias
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18
Crie um objeto a partir de outro objeto existente.

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 ) ;
1 2 3 4 5 6 7 8 9
62
www.k19.com.br
63
J AVASCRIPT AVANADO
Cdigo Javascript A.17: Prottipo
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 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 ) ;
Adicione uma propriedade em um objeto e verique que o prottipo desse objeto no afetato.
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 ) ;
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 ) ;
www.k19.com.br
63
J AVASCRIPT AVANADO
64
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.
8
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2 21
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 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 ) ;
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.22: Criando uma funo
Utilizando uma Funo

Para utilizar a funco multiplicacao, podemos cham-la da seguinte forma.
1 var resultado = multiplicao (3 ,2) ;
Cdigo Javascript A.23: Utilizando a funo
64
www.k19.com.br
65
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.24: 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.25: 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.26: Arguments
www.k19.com.br
65
J AVASCRIPT AVANADO
66
Exceptions
Quando um erro identicado no processamento de uma funo, podemos lanar uma exception para avisar que chamou a funo que houve um problema.
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 ; } } }
no podem ser depositados "
Cdigo Javascript A.27: Exceptions
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 ) ; }
Exerccios de Fixao
9
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.29: multiplicacao()
1 2 3
10
Execute a funo multiplicacao()

var resultado = multiplicacao (5 , 3) ; console . log ( resultado ) ;
Cdigo Javascript A.30: Executando a funo multiplicacao()
1 2
11
Crie um mtodo para implementar a operao de depsito em contas bancrias.

var conta = { saldo : , deposita : function ( valor ) { this . saldo += valor ; } }
1 2 3 4 5 6
66
www.k19.com.br
67
J AVASCRIPT AVANADO
Cdigo Javascript A.31: deposita()
12
Execute o mtodo deposita().

conta . deposita (5 ) ; console . log ( conta . saldo ) ;
Cdigo Javascript A.32: Executando o mtodo deposita()
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.33: soma()
1 2 3 4 5 6 7 8 9
14
1 2 3
var resultado = soma (2 ,4 ,5 ,6 ,1) ; console . log ( resultado ) ;

Cdigo Javascript A.34: Executando o mtodo soma()
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
no podem ser depositados "
16
Execute o mtodo deposita() com valores incorretos e veja o resultado.

conta . deposita ( ) ;
Cdigo Javascript A.36: Executando o mtodo deposita()
17
Adicione o comando try-catch para capturar a exceo gerada.

try {
www.k19.com.br
67
J AVASCRIPT AVANADO
2 3 4 5 6 conta . deposita ( ) ; } catch ( e ) { console . log ( e . name ) ; console . log ( e . message ) ; }
Cdigo Javascript A.37: Capturanto excees com try-catch
68
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.38: 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.39: for
Adicionando Elementos
Para adicionar um elemento ao nal do array, podemos utilizar a propriedade length.
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.40: Adicionando elementos ao nal do array com length
Ou voc pode adicionar os elementos ao nal do array utilizando o mtodo push().

1 2 3 4 5 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " , " K31 " , " K32 " ]; cursos . push ( " K 1 " ) ; for ( var i = ; i < cursos . length ; i ++) { console . log ( cursos [ i ]) ; }
68
www.k19.com.br
69
J AVASCRIPT AVANADO
Cdigo Javascript A.41: Adicionando elementos atravs do mtodo push
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.42: 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.43: 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.44: Concatenando
Gerando uma String com os Elementos de um Array

O mtodo join() cria uma string a partir de um array.
1 2 3 var formacao_java = [ " K11 " ," K12 " ]; var resultado = formacao_java . join ( " ," ) ;
www.k19.com.br
69
J AVASCRIPT AVANADO
4 console . log ( resultado ) ;
Cdigo Javascript A.45: Gerando uma string com os elementos de um array
70
Removendo o ltimo Elemento

O mtodo pop() remove e retorna o ltimo elemento.
1 2 3 4 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ]; var curso = cursos . pop () ; console . log ( curso ) ;
Cdigo Javascript A.46: Removendo o ltimo elemento
Adicionando um Elemento na ltima Posio

O mtodo push() adiciona um elemento ao nal do array.
1 2 3 4 5 6 7 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ]; cursos . push ( " K23 " ) ; for ( var i = ; i < cursos . length ; i ++) { console . log ( cursos [ i ]) ; }
Cdigo Javascript A.47: Adicionando um elemento na ltima posio
Invertendo os Elementos de um Array

O mtodo reverse() inverte a ordem dos elementos de um array.
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.48: Invertendo os elementos de um array
Removendo o Primeiro Elemento

O mtodo shift() remove e retorna o primeiro elemento de um array.
1 2 3 4 5 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ]; var curso = cursos . shift () ; console . log ( " Elemento removido : " + curso ) ;
70
www.k19.com.br
71
6 7 8 9
J AVASCRIPT AVANADO
for ( var i = ; i < cursos . length ; i ++) { console . log ( cursos [ i ]) ; }

Cdigo Javascript A.49: Removendo o primeiro elemento
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.50: 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.51: 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.52: Adicionando um elemento na primeira posio
Mtodos das Strings

www.k19.com.br
71
J AVASCRIPT AVANADO
72
Acessando os Caracteres de uma String por Posio O mtodo charAt() retorna o caracter na posio especicada.
1 2 3 var curso = " K12 " ; console . log ( curso . charAt ( ) ) ;
Cdigo Javascript A.53: Acessando os caracteres de uma string por posio
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.54: 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.55: Dividindo uma string
Exerccios de Fixao
18
Crie dois arrays e imprima no console do Firebug o tamanho deles.

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.56: Criando dois arrays e imprimindo o tamanho
1 2 3 4 5 6 7 8
Imprima os elementos de um array linha a linha.

1 2 3 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " , " K31 " , " K32 " ]; for ( var i = ; i < cursos . length ; i ++) { console . log ( cursos [ i ]) ;
72
www.k19.com.br
73
4 }
Cdigo Javascript A.57: for
J AVASCRIPT AVANADO
19
Adicione elementos no nal de um array utilizando a propriedade length.

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.58: Adicionando elementos ao nal do array com length
1 2 3 4 5 6 7
20
Adicione elementos no nal de um array utilizando o mtodo push().

var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " , " K31 " , " K32 " ]; cursos . push ( " K 1 " ) ; for ( var i = ; i < cursos . length ; i ++) { console . log ( cursos [ i ]) ; }
Cdigo Javascript A.59: Adicionando elementos atravs do mtodo push
1 2 3 4 5
Concatene dois arrays atravs do mtodo concat().

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.60: Concatenando
21
Remove o ltimo elemento de um array com o mtodo pop().

var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ]; var curso = cursos . pop () ; console . log ( curso ) ;
Cdigo Javascript A.61: Removendo o ltimo elemento
1 2 3 4
Adicione um elemento no nal de um array. Para isso, aplique o mtodo push().

1 2 3 4 5 6 7 var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ]; cursos . push ( " K23 " ) ; for ( var i = ; i < cursos . length ; i ++) { console . log ( cursos [ i ]) ; }
Cdigo Javascript A.62: Adicionando um elemento na ltima posio
22
www.k19.com.br
73
J AVASCRIPT AVANADO
74
Inverta a ordem dos elementos de um array com o mtodo reverse().

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.63: Invertendo os elementos de um array
23
Remova o primeiro elemento de um array atravs do mtodo shift().

var cursos = [ " K11 " ," K12 " ," K21 " ," K22 " ," K23 " ]; var curso = cursos . shift () ; console . log ( " Elemento removido : " + curso ) ; for ( var i = ; i < cursos . length ; i ++) { console . log ( cursos [ i ]) ; }
Cdigo Javascript A.64: Removendo o primeiro elemento
1 2 3 4 5 6 7 8 9
Faa uma cpia de um determinado trecho 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.65: Copiando um trecho de um array
24
Adicione um elemento na primeira posio de um array. Utilize o mtodo unshift().

var cursos = [ " K12 " ," K21 " ," K22 " ," K23 " ]; cursos . unshift ( " K11 " ) ; for ( var i = ; i < cursos . length ; i ++) { console . log ( cursos [ i ]) ; }
Cdigo Javascript A.66: Adicionando um elemento na primeira posio
1 2 3 4 5 6 7
25
Divida o contedo de uma string aplicando o mtodo split().

var curso = " K12 - Desenvolvimento Web com JSF2 e JPA2 " ; var aux = curso . split ( " -" ) ; console . log ( aux [ ]) ; console . log ( aux [1]) ;
Cdigo Javascript A.67: Dividindo uma string
1 2 3 4 5
74
www.k19.com.br
APNDICE
Cdigo HTML B.1: Referncia pro jQuery Cdigo HTML B.2: Referncia pro jQuery atravs da url do Google
JQ 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 provem 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.k19.com.br
75
JQUERY
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
76
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
$ e os parnteses (): $().

76
www.k19.com.br
77
JQUERY
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 $ ( 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
Para uma lista completa de seletores do jQuery, acesse: http://api.jquery.com/category/
selectors/.
Exerccios de Fixao
1 2 3
Crie uma pasta na rea de Trabalho de trabalho com o seu nome. Na pasta com o seu nome, crie uma pasta chamada seletores. Crie um arquivo chamado seletores.html conforme o cdigo abaixo.
<! 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 " / > </ body > </ html >
Cdigo HTML B.4: seletores.html
1 2 3 4 5 6 7 8 9 1 11 12 13
Altere o arquivo seletores.html para que os campos cuja classe curso tenha o valor igual a K19.
4
www.k19.com.br
77
JQUERY
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
78
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 >
Selecione todos os elementos <input> e atribua o valor K19.

<! 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 ) . val ( K19 ) ; </ script > </ body > </ html >
1 2 3 4 5 6 7 8 9 1 11 12 13 14
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.
78
www.k19.com.br
79
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 <! 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.8: Eventos jQuery
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 ... )
Cdigo Javascript B.3: Evento de clique
A funo de callback denida foi:

1 2 3 function () { alert ( " Elemento li clicado : " + $ ( this ) . text () ) ; }
Cdigo Javascript B.4: Funo de callback
Segue abaixo exemplos de eventos do jQuery: Evento 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 chamda 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
$(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. . . )
Para uma lista completa de eventos do jQuery, acesse http://api.jquery.com/category/events/.
Exerccios de Fixao
www.k19.com.br
79
JQUERY
80
7 8
Crie uma pasta eventos dentro da pasta com o seu nome que foi criada na rea de Trabalho. Crie um arquivo eventos.html conforme o cdigo abaixo.
<! 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 > </ body > </ html >
Cdigo HTML B.9: eventos.html
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17
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
<! 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 >
10 Altere o exerccio anterior para mostrar a mensagem de alerta aps o usurio efetuar um duplo clique.
1 2 3 4 5 6 7 8 9
<! DOCTYPE html > < html > < head > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > < h1 > Cursos K19 </ h1 > < div > < ul >
80
www.k19.com.br
81
1 11 12 13 14 15 16 17 18 19 2 < 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 >
JQUERY
Altere o exerccio anterior e altere o contedo de todos os elementos <li> aps o carregamento completo do DOM.
11
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 > < 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 >
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
<! 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 () ) ; }) ;
www.k19.com.br
81
JQUERY
22 23 24 </ script > </ body > </ html >
82
Efeitos
A biblioteca jQuery contm vrios mtodos para adicionar animao para a pgina web.
jQuery Hide e Show

Com o jQuery voc pode ocultar elementos da pgina ou torn-los visveis atravs dos mtodos 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.14: Mtodos show e hide do jQuery
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 <! DOCTYPE html > < html > < head > < style > p { background : green ; } </ style > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body >
82
www.k19.com.br
83
1 11 12 13 14 15 16 17 18 19 < button > Mostrar / Ocultar </ button > <p style = " display : none " > Cursos K19 </ p > < script > $ ( " button " ) . click ( function () { $ ( " p " ) . toggle ( " slow " ) ; }) ; </ script > </ body > </ html >
Cdigo HTML B.15: jQuery Toggle
JQUERY
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 milisegundos. 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 18 19 2 21 22 23 24 25 26 <! 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 () ; }) ; $ ( " # fadeout " ) . click ( function () { $ ( " p " ) . fadeOut () ; }) ; $ ( " # fadeto " ) . click ( function () { $ ( " p " ) . fadeTo ( " normal " , .3 ) ; }) ; </ script > </ body > </ html >
Cdigo HTML B.16: jQuery fade
www.k19.com.br
83
JQUERY
84
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 milisegundos. 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 <! 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.17: jQuery Slide
Para uma lista completa de efeitos do jQuery, acesse http://api.jquery.com/category/effects/.
Exerccios de Fixao
13 14
Crie uma pasta efeitos dentro da pasta com o seu nome. Crie um arquivo efeitos.html dentro da pasta efeitos conforme o cdigo abaixo.
<! DOCTYPE html > < html > < head > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body >
1 2 3 4 5 6
84
www.k19.com.br
85
7 8 9 1 11 12 13 14 15 16 17 < 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.18: efeitos.html
JQUERY
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
<! 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 >
Altere o exerccio anterior e adicione um boto que mostra os elementos <li> ocultos e oculta os elementos <li> visveis.
16
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 > 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 - ocultar " > Mostrar / Ocultar </ button > </ div >
www.k19.com.br
85
JQUERY
19 2 21 22 23 < script > $ ( " # mostrar - ocultar " ) . click ( function () { $ ( " li " ) . toggle ( " slow " ) ; }) ; </ script > </ body > </ html >
86
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
<! 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 >
1 Altere o exerccio anterior e acrescente um boto para diminuir a opacidade dos elementos <li> para 0.2. 2 3
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.
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 " ) ;
86
www.k19.com.br
87
JQUERY
Cdigo Javascript B.5: Mtodo html()
Para adicionar contedo HTML, podemos usar os mtodos append() e prepend().

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 > < style > p { background : green ; } </ style > < script src = " http :// code . jquery . com / jquery - latest . js " > </ script > </ head > < body > < button id = " prepend " > Prepend </ button > < button id = " append " > Append </ button > <p > Cursos K19 </ p > < script > $ ( " # prepend " ) . click ( function () { $ ( " p " ) . prepend ( " K19 Treinamentos - " ) ; }) ; $ ( " # append " ) . click ( function () { $ ( " p " ) . append ( " - K31 " ) ; }) ; </ script > </ body > </ html >
Cdigo HTML B.25: Mtodo append() e prepend()
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 <! 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.26: Mtodos after() e before()
Para uma lista completa de mtodos para manipular e alterar elementos HTML com o jQuery, acesse http://api.jquery.com/category/manipulation/.
Exerccios de Fixao
www.k19.com.br
87
JQUERY
88
18 19
Crie uma pasta html dentro da pasta com o seu nome. Crie um arquivo html.html dentro da pasta html conforme o cdigo abaixo.
<! 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 > </ body > </ html >
Cdigo HTML B.27: html.html
1 2 3 4 5 6 7 8 9 1 11 12
20 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
<! 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 >
Altere o arquivo html.html e adicione botes para adicionar contedo antes e depois do contedo do elemento <p>.
21
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 > <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 " ) ;}) ;
88
www.k19.com.br
89
18 19 2 </ script > </ body > </ html >
JQUERY
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 > < 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 >
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17 18 19 2
www.k19.com.br
89
JQUERY
90
90
www.k19.com.br
APNDICE
Cdigo HTML 2.9: Resposta do exerccio
R ESPOSTAS
Resposta do Exerccio 2.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 27 28 29 3 31 32 33 34 35 36 37 38 39 4 41 42 43 44 < 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 > <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 >
< html >
www.k19.com.br
91
R ESPOSTAS
2 3 4 5 6 7 8 9 1 11 12 < 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.12: Resposta do exerccio - pagina1.html
92
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.13: Resposta do exerccio - pagina2.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 32 33
< 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 facilisis dui iaculis auctor quis vel lacus . Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae ; Ut auctor diam in magna feugiat in varius ligula faucibus . Suspendisse tempor mi nec sem fermentum malesuada . In sit amet enim vel leo bibendum cursus . Curabitur nec velit 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 > <p > Donec dictum sem ut orci ornare ultrices . Cras blandit nibh sed eros suscipit in feugiat nunc tincidunt . Praesent semper lorem sed ipsum placerat porta . In arcu massa , dignissim ut elementum nec , luctus nec sem . Nam ut purus urna . Class aptent taciti sociosqu ad litora torquent per conubia nostra , per inceptos himenaeos . Curabitur fermentum dapibus ullamcorper . Vivamus ante tellus , facilisis vitae interdum eget , mollis eget ipsum . </ p > <p > Praesent dapibus risus eu quam egestas ultricies . Nunc sed arcu purus . Integer vehicula , nisl sit amet tincidunt accumsan , nisi felis venenatis ante , non auctor felis tellus tempor quam . Pellentesque laoreet feugiat lacus ac convallis . Vestibulum quis elementum eros . Quisque convallis , justo nec congue consequat , nisl felis dapibus mi , vel facilisis risus enim ut turpis . Nam rhoncus turpis at nibh vulputate nec placerat nibh aliquam . </ p >
92
www.k19.com.br
93
34 35 36 37 38 39 4 41 42 43 44 45 46 47 48 49 5 51 52 53 54
R ESPOSTAS
<p > Aenean vestibulum purus eget nunc varius tempor . Nulla placerat suscipit mi fermentum mattis . Aenean id feugiat eros . Donec tristique libero nec sapien eleifend vel vulputate nibh facilisis . Pellentesque dolor massa , convallis eu lobortis sed , fermentum eu lectus . Maecenas eget metus tellus , non dictum erat . Sed aliquam lobortis nunc , in consectetur risus aliquet et . Fusce quam arcu , tincidunt quis pellentesque sit amet , tempus eu nulla . Pellentesque ante diam , t ristique a dictum nec , rutrum sed mauris . Cum sociis natoque penatibus et magnis dis parturient montes , nascetur ridiculus mus . Integer nunc sapien , bibendum et mattis sit amet , pulvinar ut mi . Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas . Nunc aliquet libero sed dui euismod sodales . </ p > <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.15: Resposta do exercicio
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
< 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 = " 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 facilisis dui iaculis auctor quis vel lacus . Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae ; Ut auctor diam in magna feugiat in varius ligula faucibus . Suspendisse tempor mi nec sem fermentum malesuada . In sit amet enim vel leo bibendum cursus . Curabitur nec velit 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 > <p > Donec dictum sem ut orci ornare ultrices . Cras blandit nibh sed eros suscipit in feugiat nunc tincidunt . Praesent semper lorem sed ipsum placerat porta . In arcu massa , dignissim ut elementum nec , luctus nec sem . Nam ut purus urna . Class aptent taciti sociosqu ad litora torquent per conubia nostra , per inceptos himenaeos . Curabitur fermentum dapibus ullamcorper . Vivamus ante tellus , facilisis vitae interdum eget , mollis eget ipsum . </ p > <p > Praesent dapibus risus eu quam egestas ultricies . Nunc sed arcu purus . Integer vehicula , nisl sit amet tincidunt accumsan , nisi felis venenatis ante , non auctor felis tellus tempor quam . Pellentesque laoreet feugiat lacus ac convallis . Vestibulum quis elementum eros . Quisque convallis , justo nec congue consequat , nisl felis dapibus mi , vel facilisis risus enim ut turpis .
www.k19.com.br
93
R ESPOSTAS
34 35 36 37 38 39 4 41 42 43 44 45 46 47 48 49 5 51 52 53 54 55 Nam rhoncus turpis at nibh vulputate nec placerat nibh aliquam . </ p > <p > Aenean vestibulum purus eget nunc varius tempor . Nulla placerat suscipit mi fermentum mattis . Aenean id feugiat eros . Donec tristique libero nec sapien eleifend vel vulputate nibh facilisis . Pellentesque dolor massa , convallis eu lobortis sed , fermentum eu lectus . Maecenas eget metus tellus , non dictum erat . Sed aliquam lobortis nunc , in consectetur risus aliquet et . Fusce quam arcu , tincidunt quis pellentesque sit amet , tempus eu nulla . Pellentesque ante diam , t ristique a dictum nec , rutrum sed mauris . Cum sociis natoque penatibus et magnis dis parturient montes , nascetur ridiculus mus . Integer nunc sapien , bibendum et mattis sit amet , pulvinar ut mi . Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas . Nunc aliquet libero sed dui euismod sodales . </ p > <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.16: Resposta do exercicio
94
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
< html > < head > < meta http - equiv = " Content - Type " content = " text / html ; charset = UTF -8 " > < title > Exerccio sobre ncoras </ title > </ head > < body > < h1 > 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 facilisis dui iaculis auctor quis vel lacus . Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae ; Ut auctor diam in magna feugiat in varius ligula faucibus . Suspendisse tempor mi nec sem fermentum malesuada . In sit amet enim vel leo bibendum cursus . Curabitur nec velit 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 > <p > Donec dictum sem ut orci ornare ultrices . Cras blandit nibh sed eros suscipit in feugiat nunc tincidunt . Praesent semper lorem sed ipsum placerat porta . In arcu massa , dignissim ut elementum nec , luctus nec sem . Nam ut purus urna . Class aptent taciti sociosqu ad litora torquent per conubia nostra , per inceptos himenaeos . Curabitur fermentum dapibus ullamcorper . Vivamus ante tellus , facilisis vitae interdum eget , mollis eget ipsum . </ p > <p > Praesent dapibus risus eu quam egestas ultricies . Nunc sed arcu purus . Integer vehicula , nisl sit amet tincidunt accumsan , nisi felis venenatis ante , non auctor felis tellus tempor quam . Pellentesque laoreet feugiat lacus ac convallis . Vestibulum quis elementum eros . Quisque convallis , justo nec congue consequat , nisl felis dapibus mi , vel facilisis risus enim ut turpis . Nam rhoncus turpis at nibh vulputate nec placerat nibh aliquam . </ p > <p > Aenean vestibulum purus eget nunc varius tempor . Nulla placerat suscipit mi fermentum mattis . Aenean id feugiat eros . Donec tristique libero nec sapien eleifend vel vulputate nibh facilisis . Pellentesque dolor massa , www.k19.com.br
94
95
R ESPOSTAS
convallis eu lobortis sed , fermentum eu lectus . Maecenas eget metus tellus , non dictum erat . Sed aliquam lobortis nunc , in consectetur risus aliquet et . Fusce quam arcu , tincidunt quis pellentesque sit amet , tempus eu nulla . Pellentesque ante diam , t ristique a dictum nec , rutrum sed mauris . Cum sociis natoque penatibus et magnis dis parturient montes , nascetur ridiculus mus . Integer nunc sapien , bibendum et mattis sit amet , pulvinar ut mi . Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas . Nunc aliquet libero sed dui euismod sodales . </ p > <a name = " outra_ancora " > Mais uma ncora </ a > <p > Se voc chegou aqui deu tudo certo ! :) </ p > </ body > </ html >
Cdigo HTML 2.17: Resposta do exercicio - pagina2.html
38 39 4 41 42 43 44 45 46 47 48 49 5 51
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
< 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 1 - logo - large . png " K 1 - Lgica de Programao </ p > <p > < img src = " http :// www . k19 . com . br / css / img / k 2 - logo - large . png " K 2 - Desenvolvimento Web com HTML , CSS e JavaScript </ p > <p > < img src = " http :// www . k19 . com . br / css / img / k 3 - logo - large . png " K 3 - SQL e Modelo Relacional </ p > <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 > <p > < img src = " http :// www . k19 . com . br / css / img / k21 - logo - large . png " K21 - Persistncia com JPA2 e Hibernate </ p > <p > < img src = " http :// www . k19 . com . br / css / img / k22 - logo - large . png " K22 - Desenvolvimento Web Avanado com JSF2 , EJB3 .1 e CDI </ p > <p > < img src = " http :// www . k19 . com . br / css / img / k23 - logo - large . png " K23 - Integrao de Sistemas com Webservices , JMS e EJB </ p > </ body > </ html >
/>
/>
/>
/>
/>
/>
/>
/>
www.k19.com.br
95
R ESPOSTAS
96
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 para a tag table </ title > </ head > < body > < table > < thead > < tr > < th > Marca </ th > < th > Modelo </ th > < th > Ano </ th > </ tr > </ thead > < tfoot > < tr > < td colspan = " 3 " > ltima atualizao : 6/2 12 </ td > </ 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 >

96
www.k19.com.br
97
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 > Menu - K19 Pizzaria </ title > </ head > < body > < dl > < h1 > K19 Pizzaria </ h1 > < h2 > Menu </ h2 > < 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 > </ dl > </ body > </ html >
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 > Operao de saque - K19 Bank </ title > </ head > < body > < dl > < h1 > K19 Bank </ h1 > < h2 > Manual do caixa eletrnico </ h2 > < h3 > Operao de saque </ h3 > < 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 > </ dl > </ body > </ html >
www.k19.com.br
97
R ESPOSTAS
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 > K - Formao Bsica - K19 Treinamentos </ title > </ head > < body > < dl > < h1 > K19 Treinamentos </ h1 > < h2 > K - Formao Bsica </ h2 > < 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 >
98
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 >
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 >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 :
98
www.k19.com.br
99
18 19 2 21 22 23 24 25 26 27 28 29 < 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 >
R ESPOSTAS
Resposta do Complementar 4.1
1 2 3 4 5 6
var linha = * ; for ( var contador = 1; contador <= 1 ; contador ++) { document . writeln ( linha ) ; document . writeln ( < br / > ) ; linha += * ; }
1 2 3 4 5 6 7 8 9 1 11
var linha = * ; for ( var contador = 1; contador <= 1 ; contador ++) { document . writeln ( linha ) ; document . writeln ( < br / > ) ; var resto = contador % 4; if ( resto == ) { linha = * ; } else { linha += * ; } }
1 2 3 4 5 6 7 8 9 1 11
var penultimo = var ultimo = 1;
document . writeln ( penultimo ) ; document . writeln ( ultimo ) ; for ( var contador = ; contador < 28; contador ++) { var proximo = penultimo + ultimo ; document . writeln ( proximo ) ; document . writeln ( < br / > ) ;
www.k19.com.br
99
R ESPOSTAS
12 13 14 penultimo = ultimo ; ultimo = proximo ; }
100
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 () ; 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 () *11) ; Math . floor ( Math . random () *11) ; 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.27: Resposta do exerccio
1 2 3 4 5 6 7 8 9 1 11 12 13 14 15 16 17
var array = new Array () ; for ( var i = ; i < array . length ; i ++) { array [ i ] = Math . floor ( Math . random () *1 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.28: Resposta do exerccio
100
www.k19.com.br
101
R ESPOSTAS
Resposta do Complementar B.1
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 > 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 > < 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 >
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 > < 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 >
www.k19.com.br
101
R ESPOSTAS
102
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 > </ 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 - ocultar " > Mostrar / Ocultar </ button > </ div > < script > $ ( " # mostrar - ocultar " ) . click ( function () { $ ( " li " ) . slideToggle ( " slow " ) ; }) ; </ script > </ body > </ html >
102
www.k19.com.br

k19 k02 Desenvolvimento Web Com HTML Css e Javascript

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

k19 k02 Desenvolvimento Web Com HTML Css e Javascript

Diunggah oleh

Hak Cipta:

Format Tersedia

TREINAMENTOS

Desenvolvimento Web com HTML, CSS e Javascript

Desenvolvimento Web com HTML, CSS e Javascript

Exerccios de Fixao Formulrio . . . . . . Exerccios de Fixao Exerccios de Fixao

S TO EN AM EIN TREINAMENTOS TR EIN AM EN TO S

Conhea os nossos cursos

K11 - Orientao a Objetos em Java

K12 - Desenvolvimento Web com JSF2 e JPA2

K21 - Persistncia com JPA2 e Hibernate

K22 - Desenvolvimento Web Avanado com JFS2, EJB3.1 e CDI

K23 - Integrao de Sistemas com Webservices, JMS e EJB

K31 - C# e Orientao a Objetos

K32 - Desenvolvimento Web com ASP.NET MVC

Client side e server side

HTML, CSS e Javascript

Figura 2.1: Exemplo da estrutura bsica de um documento HTML

Abra o arquivo ola-mundo.html em um navegador e veja o resultado.

Figura 2.2: Exemplo de quebra de linha em um pargrafo

Cdigo HTML 2.6: p-quebra-de-linha.html

Cdigo HTML 2.7: Exemplo de cabealhos

Figura 2.3: Exemplo de cabealhos

Cdigo HTML 2.8: cabecalhos-1.html

Cdigo HTML 2.10: Exemplo de uso da tag a

Figura 2.4: Exemplo de uso da tag img

6/2 12 </ td >

Cdigo HTML 2.20: Exemplo de uso da tag table

Figura 2.5: Exemplo de uso da tag table

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:

6/2 12 </ td >

Cdigo HTML 2.21: Exemplo de uso da tag table

Figura 2.6: Exemplo de uso da tag table

Figura 2.7: Exerccio para a tag table

no qual temos uma palavra e em seguida o seu signicado.

Lista ordenada - utilizada para exibir qualquer contedo de forma ordenada.

Cdigo HTML 2.23: Exemplo de uso da tag dl

Figura 2.8: Exemplo de uso da tag dl

Figura 2.9: Exemplo de uso da tag ol

Lista sem ordem

Figura 2.10: Exemplo de uso da tag ul

Figura 2.11: Exemplo de uso da tag input

Cdigo HTML 2.30: Exemplo de uso da tag select

Figura 2.12: Exemplo de uso da tag select

Figura 2.13: Exemplo de uso da tag select

Figura 2.14: Exemplo de uso da tag textarea

Figura 2.15: Exemplo de uso da tag label

Figura 3.1: Exemplo de aplicao das propriedades CSS inline

p { font - size : 4 px ; color : # ff ; }

Cdigo CSS 3.1: estilo.css

Figura 3.3: Exemplo de aplicao das regras CSS atravs de um arquivo

Estrutura de uma regra CSS

Cdigo CSS 3.2: Usando o seletor universal

Seletor de irmo adjacente

titulos. Repare que o seletor de classe comea com o caractere . (ponto).

Principais propiedades CSS

Margem externa (margin) Borda (border) Margem interna (padding)

Figura 3.5: Box model

Figura 3.6: Box model

Declarando e inicializando variveis em JavaScript

Cdigo Javascript 4.2: Exemplo de uso dos operadores aritmticos.

Simples = Incremental += Decremental -= Multiplicativa *= Divisria /= Modular %=

Cdigo Javascript 4.3: Exemplo de uso dos operadores de atribuio.

* * *

* * **** * * ****