Caderno INFO (Web Design Avançado 2017.1)

Web Design Avanado
Ewerton Mendona
Curso Tcnico em Informtica

Educao a Distncia
2017
EXPEDIENTE
Professor Autor
Ewerton Mendona
Design Instrucional
Deyvid Souza Nascimento
Maria de Ftima Duarte Angeiras
Renata Marques de Otero
Terezinha Mnica Sincio Beltro
Reviso de Lngua Portuguesa

Letcia Garcia
Diagramao
Izabela Cavalcanti
Coordenao
Anderson Elias
Coordenao Executiva
George Bento Catunda
Coordenao Geral
Paulo Fernando de Vasconcelos Dutra
Contedo produzido para os Cursos Tcnicos da Secretaria Executiva de Educao

Profissional de Pernambuco, em convnio com o Ministrio da Educao
(Rede e-Tec Brasil).
Junho, 2017
Catalogao na fonte
Bibliotecrio Hugo Carlos Cavalcanti, CRB4-2129
M539w
Mendona, Ewerton.
Web Design Avanado: Curso Tcnico em Informtica:
Educao a distncia / Ewerton Mendona. Recife:
Secretaria Executiva de Educao Profissional de
Pernambuco, 2017.
74 p.: il.
Inclui referncias bibliogrficas.
1. Web Design. 2. Engenharia Web. 3. Javascript. 4.

Jquery. I. Mendona, Ewerton. II. Ttulo.
CDU 004.5
Sumrio
Introduo ........................................................................................................................................ 8
1.Competncia 01 | Conhecer os Fundamentos do Javascript ......................................................... 10
1.1 Internet ...............................................................................................................................................10
1.2 Modelo Cliente/Servidor......................................................................................................................12
1.3 Padres Web .......................................................................................................................................13
1.4 O que Programao ..........................................................................................................................14
1.5 Javascript.............................................................................................................................................15
1.6 Document Object Model......................................................................................................................16
1.7 IDE.......................................................................................................................................................17
1.8 Testando .............................................................................................................................................18
1.9 Primeiro cdigo ...................................................................................................................................19
1.10 O que pode ser feito em Javascript ....................................................................................................20
1.11 Onde escrever o cdigo Javascript .....................................................................................................20
1.12 Sada de resultado JavaScript .............................................................................................................21
2.Competncia 2 | Conhecer as Tcnicas de Programao Procedural com o Javascript ................. 23
2.1 Sintaxe ................................................................................................................................................23
2.2 Literais e variveis ...............................................................................................................................23
2.3 Declarao de variveis e atribuio de valores ...................................................................................24
2.4 Operadores e expresses.....................................................................................................................24
2.5 Identificadores ....................................................................................................................................25
2.6 Operadores comparativos ...................................................................................................................26
2.7 Operadores lgicos ..............................................................................................................................27
2.8 Precedncia .........................................................................................................................................28
2.9 Estruturas condicionais ........................................................................................................................28
2.9.1 If...else ..............................................................................................................................................29
5
2.9.2 Switch...case .....................................................................................................................................31
2.10 Estruturas de repetio......................................................................................................................34
2.10.1 For ..................................................................................................................................................34
2.10.2 While ..............................................................................................................................................37
2.10.3 Do...while .......................................................................................................................................38
2.11 Endentando o cdigo .........................................................................................................................39
3.Competncia 03 | Conhecer as Tcnicas de Programao Orientada a Objetos com o Javascript . 40
3.1 Primitivas Javascript ............................................................................................................................40
3.2 Objetos Javascript................................................................................................................................41
3.3 Propriedades de um objeto .................................................................................................................41
3.4 Mtodos de um objeto ........................................................................................................................41
3.5 Criando um objeto ...............................................................................................................................42
3.5.1 Criando um objeto literal ..................................................................................................................42
3.5.2 Criando com o comando new ...........................................................................................................42
3.5.3 Criando com o construtor do objeto .................................................................................................43
3.6 A palavra-chave this ............................................................................................................................43
3.7 Manipulando propriedades de um objeto ............................................................................................44
3.8 Manipulando mtodos de um objeto ...................................................................................................45
3.9 Prototype ............................................................................................................................................45
4. Competncia 04 | Conhecer os Fundamentos de Jquery ............................................................. 46
4.1 Adicionando a biblioteca em sua pgina ..............................................................................................47
4.1.1 Fazendo o download do JQuery ........................................................................................................47
4.1.2 Utilizando um repositrio .................................................................................................................49
4.2 sintaxe JQuery .....................................................................................................................................50
4.3 Evento ready .......................................................................................................................................50
4.4 Seletores .............................................................................................................................................51
6
4.4.1 Selecionando Tag ..............................................................................................................................51
4.4.2 Selecionando pelo atributo ID ...........................................................................................................52
4.4.3 Selecionando pelo atributo class .......................................................................................................53
4.4.4 Exemplos de seletores ......................................................................................................................53
4.5 Eventos JQuery ....................................................................................................................................54
4.6 Obtendo a tag, o texto e o valor de um campo ....................................................................................56
4.7 Obtendo o valor de um atributo ..........................................................................................................57
4.8 Definindo contedo .............................................................................................................................58
5.Competncia 05 | Utilizar os Efeitos do JQuery ............................................................................ 60
5.1 Esconder (hide) e mostrar (show) ........................................................................................................60
5.1.1 Efeito toggle .....................................................................................................................................61
5.2 Efeito de desaparecimento gradual (fade) ...........................................................................................61
5.3 Efeito de deslizar .................................................................................................................................63
5.4 Efeito de animao ..............................................................................................................................64
5.5 Encadeamento de mtodos .................................................................................................................65
6. Competncia 06 | Utilizar o Bootstrap Framework ...................................................................... 66
Concluso ........................................................................................................................................ 72
Referncias ..................................................................................................................................... 73
Minicurrculo do Professor .............................................................................................................. 74
7
Introduo
Bem-vindo ao curso de Web Design Avanado. Nele vamos aprender do comeo como programar
utilizando uma linguagem muito simples chamada JavaScript. Mas, no porque ela muito
simples que fcil aprender a programar. Algumas pessoas levam mais tempo que outras e pessoas
organizadas, meticulosas e regradas levam vantagens. Caso voc tenha se esforado, mas no foi
suficiente para aprender, no se desespere, apenas voc precisa de mais tempo para aprender.
Ento, seja paciente, v no seu ritmo e nunca desista. Temos milhes de exemplos, tutoriais e
videoaulas na internet que podem lhe ajudar. S tome o cuidado de coletar material novo, dos
ltimos dois anos pelo menos.
Como falei, aprender programao no fcil e voc precisa compreender um conceito antes de
seguir para o prximo. Coloque em mente que o aprendizado como se fosse uma escada. Para
atingir os degraus superiores, voc tem que subir no mais prximo. Caso tente pular degraus pode
cair e voltar para o cho, de uma forma bem dolorida. Ento, suba um degrau de cada vez.
Aprender programao tambm pode ser comparado com aprender qualquer coisa nesta vida, mas
vamos comparar com tocar violo ou dirigir. Primeiro, algumas pessoas aprendem mais rpido que
outras, normal, e no significa que h pessoa que no aprenda. S vai ter que se esforar mais.
Outro ponto em comum que no d para aprender a tocar violo ou dirigir um carro, sem um
violo ou sem um carro. No basta ler este caderno de estudo, voc precisa fazer os exemplos e ver
o resultado. Se acostumar com a tecnologia. Por ltimo e mais importante, para se aprender a tocar
violo voc precisa tocar o violo muito. Tem de praticar. De preferncia todos os dias. A
linguagem, ou seja, o que significa os comandos, d para ensinar, mas ensinar a pensar, isso
ningum consegue. Cada um raciocina de uma forma diferente, encontrando solues de seu jeito,
e cada aluno aprende a pensar da sua forma pessoal. Mas como se aprende a raciocinar? Com
certeza no assistindo aula. fazendo, e fazendo, e fazendo, e fazendo exerccios. Mais uma dica.
Voc no pode ver a resposta do exerccio. Se ver, perdeu o exerccio, ele no serve mais. Voc
precisa descobrir a resposta. Cada questo como uma charada.
8
Ufa! Realmente trabalhoso esse processo, mas o melhor. No se engane que assistindo a
videoaula na internet voc vai aprender. Seria como aprender a tocar violo apenas assistindo o
outro tocar violo, ou aprender a dirigir sem ligar um carro, ou ficar forte na academia apenas
assistindo algum fazer exerccio. Ridculo n? Com programao igual.
9
Competncia 01
1.Competncia 01 | Conhecer os Fundamentos do Javascript
A linguagem JavaScript faz parte do mundo da web. Ela foi criada para que pginas web
respondessem a eventos. Este seu mundo. Nesta competncia vamos conhecer este mundo. Alm
disso, vamos conhecer alguns conceitos iniciais sobre o universo das linguagens de programao,
para poder comparar e saber onde o JavaScript se encontra nesta babel da programao.
Como o JavaScript afeta os elementos das pginas HTML, extremamente necessrio saber HTML e
CSS. Neste curso focamos apenas no JavaScript, ento voc no vai encontrar material que te
ensine sobre o HTML e CSS. O curso Introduo a Web Design que tem esse foco e voc
encontrar nele todo o material necessrio para aprender HTML e CSS de forma introdutria.
Avisos dados, vamos comear o trabalho.
1.1 Internet
A internet a rede global de computadores. Ela no possui um centro ou uma empresa que a
controla. So bilhes de dispositivos interligados, e quando falo em dispositivos falo de
computadores de mesa, smartphones, impressoras, roteadores, carros, relgios, geladeiras, enfim,
qualquer coisa que se conecte com a internet.
Ela foi criada a pedido dos militares dos Estados Unidos na poca da Guerra Fria como um sistema
de comunicao com suporte forte a falhas. A ideia era que, caso uma bomba atmica atingisse o
solo americano, o pas no ficaria sem comunicao.
As bombas atmicas so um grande medo da humanidade. Assista ao vdeo no link abaixo e

veja a quantidade de bombas atmicas disparadas no mundo desde que elas foram
inventadas. Muitas delas so testes, mas, de qualquer forma, foram disparadas no planeta
desde 1945. www.youtube.com/watch?v=dGFkw0hzW1c
Das instalaes militares a internet ganhou os centros de pesquisa e universidades, depois invadiu o
setor privado, as empresas e a casa das pessoas. Hoje est no nosso bolso. Ser que no futuro a
10
Competncia 01
internet estar dentro de ns?
A internet uma rede de redes. Ela no uma unidade, um conjunto. Temos as redes das
universidades e de empresas ligadas umas s outras formando a internet. Quando voc compra um
roteador para distribuir a internet pela sua casa, voc est criando mais uma rede e conectando ela
a internet. A juno de todas as redes conectadas forma a internet.
Figura 1 - Mapa parcial da Internet em 15 de janeiro de 2005, baseado em dados da opte.org.

Fonte: www.opte.org/maps/
Descrio: a imagem mostra um grfico de linhas coloridas conectadas.
O JavaScript uma linguagem criada neste mundo.
Este um brevssimo resumo sobre o assunto. Tem muito mais coisa. Acesse o link abaixo
para ter acesso a mais informaes.
https://pt.wikipedia.org/wiki/Internet
11
Competncia 01
1.2 Modelo Cliente/Servidor
A internet foi construda de uma forma. A esta forma chamamos arquitetura. A arquitetura da
internet segue o modelo cliente/servidor. Neste modelo os pontos finais da rede internet so
computadores que fornecem algum servio. Podemos ter tanto um computador muito poderoso,
que fornece o servio de pginas web, como uma impressora que fornece o servio de impresso
em rede. Temos vrios programas que fornecem diversos servios, como o j citado servidor de
pginas web. Temos tambm o servidor de e-mail, o servidor de arquivos, o servidor de impresso e
muitos outros. Observe que classificamos esses programas como servidores.
Os programas que solicitam um servio so chamados de clientes. Assim, voc utiliza um navegador
web, como o Chrome ou Firefox, para solicitar uma pgina web. O navegador um programa
cliente. O servidor de pginas web recebe sua solicitao e envia a pgina para seu navegador.
Sempre ser assim, com programas clientes solicitando recursos de programas servidores.
Figura 2 - passos simplificados da solicitao de uma pgina web para uma aplicao.
Fonte: Ewerton Mendona.
Descrio: a ilustrao dividida em trs fases: a requisio do usurio para o servidor, o
processamento do servidor e a entrega do resultado do processamento ao usurio.
12
Competncia 01
Vamos aprender como utilizar o JavaScript no lado do cliente. Isso significa que ele vai funcionar nos
navegadores web, seja ele Chrome, Firefox, Opera ou Edge. Mas tenha em mente que navegadores
antigos podem no executar o JavaScript adequadamente. Voc pode escrever seu cdigo perfeito,
mas seu navegador, por ser antigo, pode no rodar o programa adequadamente.
Programadores utilizam o termo rodar o programa para dizer que ele trabalhar, ou seja, o
sistema operacional executar o programa. Com o advento dos smartphones, os programas
passaram a ser chamados de aplicativos ou pela sua abreviao: app.
1.3 Padres Web
Internet e web so duas coisas diferentes. A internet o meio, por onde trafegam os dados. Ela d
suporte aos servios. Em uma comparao simples, seria como a rede de estradas de nosso pas.
Vrios servios so realizados atravs das estradas do Brasil, como o turismo e a entrega de
mercadorias. A web um desses servios, que usa a internet para entregar pginas web.
No comeo da web ela era bem simples e os fabricantes de navegadores ampliavam suas
caractersticas para oferecer um servio melhor. Para voc ter uma ideia, quando a internet surgiu
ela s possua texto preto em um fundo branco, e s. Muita coisa mudou de l para c, no foi?
O problema era que, quando um fabricante de navegador modificava o HTML, os outros no faziam,
ou faziam de modo diferente. A uma pgina que funcionava no Internet Explorer, no funcionava
no Netscape Navigator, e vice-versa. Um pesadelo para desenvolvedores web. Essa situao
continuou por um longo tempo, at que algumas das maiores empresas com interesse no
crescimento da web se juntaram para estabelecer um consrcio e definir padres. Com isso nasceu
a W3C.
A W3C estuda e fornece um padro para as tecnologias ligadas web. Sua ltima definio foi o
HTML 5, que uma marca que rene as verses mais novas do HTML, CSS e JavaScript. A W3C no
implementa navegador nenhum, ela apenas escreve um documento que diz como os navegadores
13
Competncia 01
devem realizar uma determinada ao, cada fabricante que fica encarregado de fazer seu
navegador seguindo o padro. Como todos seguem o padro, hoje em dia temos a garantia de que
uma pgina ser exibida de forma igual em todos os navegadores modernos.
Padres web vo muito alm do HTML e do CSS. Descubra mais sobre ele no link abaixo.
www.princiweb.com.br/blog/front-end/html/padroes-web-o-que-sao-e-porque-usa-los.html
1.4 O que Programao
O HTML uma linguagem de marcao e o CSS uma configurao de exibio dos elementos. Nem
uma nem outra so linguagem de programao, mas o JavaScript , e por isso ele mais difcil de
ser aprendido, significando que voc deve se dedicar mais para aprend-lo.
Existem diversas linguagens de programao, como o PHP, Java, Python, C, ASP.NET etc. Cada uma
forte em algum aspecto e serve para um contexto. Algumas delas so concorrentes como o PHP,
Java para web e o ASP.NET. O JavaScript no possui um concorrente, ela um padro web. Foi
desenvolvido inicialmente para que o navegador o executasse, ao invs do sistema operacional.
Mas o que uma linguagem de programao?
Pense no computador como seu servo. Ele far qualquer coisa que voc disser. Mas ele tem a
linguagem dele, ento voc tem que aprender a falar no idioma dele para dar-lhe ordens. Ele
tambm extremamente obediente e no importa o que voc acha que ele deveria saber, ele far
exatamente o que voc disser. Mesmo que esteja errado. Assim, se voc dissesse para ele:
1. Tire o lixo;
2. Varra a casa;
3. Limpe a cozinha.
Ele primeiro tiraria o lixo, depois varreria a casa e, por fim, limparia a cozinha. Seria mais inteligente
14
Competncia 01
fazer ao contrrio. Mas ele no discutir com voc. Apenas far, estando certo ou errado. Ento,
suas ordens devem estar na ordem correta.
Outra coisa que se voc escrever qualquer palavra errada, ou na sintaxe errada, ele vai ignorar o
comando, e as coisas vo dar erradas.
Ento, assim que trabalharemos, escrevendo uma lista ordenada de ordens escritas em JavaScript
e pedindo para o navegador executar aquelas ordens.
Figura 3 cdigo de uma pgina HTML com o cdigo JavaScript est escrito
Descrio: exibio do cdigo de uma pgina HTML onde o cdigo JavaScript est escrito nela. As linhas 12, 13
e 14 so escritas em JavaScript. O restante est em HTML.
1.5 Javascript
Brendan Eich trabalhava na empresa Netscape quando desenvolveu o JavaScript. Na poca, seu
nome era Mocha, o nome de um tipo de caf. Posteriormente passou a se chamar LiveScript, antes
de, finalmente, ganhar o nome JavaScript. LiveScript foi o nome oficial da linguagem quando foi
lanada pela primeira vez na verso beta do navegador Netscape 2.0 em setembro de 1995, mas
teve seu nome mudado em um anncio conjunto com a Sun Microsystems em dezembro de 1995
quando foi implementado no navegador Netscape verso 2.0B3.
15
Competncia 01
Quando a Netscape, que criou o navegador Netscape Navigator, adicionou suporte tecnologia
Java em seu navegador, atravs dos Applets Java, eles decidiram aproveitar a popularidade da
marca e substituir de LiveScript para JavaScript. Isto causou uma grande confuso, dando a
impresso de que Java e JavaScript eram a mesma coisa.
JavaScript rapidamente adquiriu ampla aceitao como linguagem de script do lado do cliente de
pginas web. Como consequncia, a Microsoft desenvolveu um dialeto compatvel com a linguagem
de nome JScript. JScript adicionou novos mtodos para consertar mtodos do JavaScript
relacionados data que apresentavam problemas. JScript foi includo no Internet Explorer 3.0,
liberado em agosto de 1996. JavaScript e JScript so to similares que os dois termos so
comumente usados como sinnimos. A Microsoft, entretanto, declara muitas caractersticas nas
quais JScript no conforma com a especificao do JavaScript.
Em novembro de 1996 a Netscape anunciou que tinha submetido JavaScript para ECMA
Internacional como candidato a padro industrial e o trabalho subsequente resultou na verso
padronizada chamada ECMAScript.
JavaScript tem se transformado na linguagem de programao mais popular da web. Inicialmente,

no entanto, muitos profissionais denegriram a linguagem, pois ela tinha como alvo principal o
pblico leigo. Com o advento do Ajax, JavaScript teve sua popularidade de volta e recebeu mais
ateno profissional. O resultado foi a proliferao de frameworks e bibliotecas, como o JQuery e o
Bootstrap, prticas de programao melhoradas.
Conhea mais sobre o JavaScript no link abaixo:

https://pt.wikipedia.org/wiki/JavaScript
1.6 Document Object Model
Um arquivo HTML um arquivo de texto simples. Nesse texto, temos as tags e o texto que o
16
Competncia 01
contedo do documento. As tags HTML esto umas dentro das outras, como se fossem caixas
dentro de caixas, o que chamamos de Modelo de Caixa, ou Box Model. Quando o navegador l o
documento HTML ele cria na memria uma estrutura de dados parecido com uma rvore de cabea
para baixo, contendo todo o contedo dos elementos. Essa preparao necessria para poder
criar a representao visual da pgina. A criao dessa representao visual chamada de Render
Tree. O JavaScript tem o poder de manipular esta rvore alterando como o documento exibido. O
Document Object Model, ou DOM, era criado de formas diferentes pelos diversos navegadores, o
que gerava todos os problemas que existiam no JavaScript. Com a definio de um padro para
criao da rvore, este problema foi resolvido e atravs do DOM que acessamos todos os
elementos da pgina e at de componentes do navegador.
Figura 4 exibio 3D da rvore DOM do cdigo de exemplo.

Descrio: O plug-in Tilt do Firefox mostra de forma 3D a rvore DOM atravs de camadas, onde uma caixa
dentro de outra vista como uma camada acima.
1.7 IDE
Agora que voc j conhece um pouco sobre a web, vamos colocar a mo na massa. Mas que
17
Competncia 01
programa podemos utilizar para construir pginas web?
Voc pode fazer um site web completo utilizando apenas o Bloco de Notas, Notepad do Windows
ou qualquer editor de texto. No utilize o Word. Nesse caso, melhor utilizar o Bloco de Notas por
ser um editor mais simples. Como sugesto, mas ele no necessrio, temos o Notepad++.
Um arquivo HTML um texto que o navegador interpreta e monta para voc visualizar. Como uma
receita, so as instrues para preparar um bolo, por exemplo.
Figura 5 Notepad++ com o cdigo HTML e CSS.

Descrio: a imagem mostra o Notepad++ com o cdigo HTML e CSS que utilizaremos nos exemplos. Voc pode
copiar esse cdigo para utiliz-lo no Bloco de Notas do Windows. Voc no precisa de uma IDE para fazer o
cdigo JavaScript.
1.8 Testando
Para testar o cdigo JavaScript voc precisar de um navegador. Sugerimos o Chrome, Firefox ou
Edge. Evite utilizar o Internet Explorer da Microsoft.
Para ver a pgina de exemplo da Figura 5 basta arrastar o arquivo para o navegador. Ele renderizar
18
Competncia 01
a pgina, exibindo o documento. Observe o Resultado na Figura 6.
Figura 6 Cdigo HTML com CSS embutido e exibio do resultado no navegador.

Descrio: exibio do cdigo HTML no Notepad++ e sua renderizao no Navegador Chrome.
1.9 Primeiro cdigo
Agora que voc j sabe onde escrever seu cdigo, que precisa de um HTML para seu JavaScript
manipular e onde testar, vamos escrever um cdigo bem simples e verificar se ele est
funcionando.
Um aviso! O computador muito rgido com o que voc escreve. Se algo no funcionar, procure
algum erro de digitao. Maisculas e minsculas so diferentes, ento, respeite. Copie o cdigo da
Figura 7, as partes que foram modificadas no cdigo esto destacadas em vermelho. Atualize o
navegador com o novo cdigo e clique no boto [Ao!] para fazer o navegador aparecer uma caixa
de alerta com seu nome. Para aparecer seu nome, substitua o texto entre aspas duplas no cdigo,
onde est escrito Coloque seu nome aqui..
19
Competncia 01
Figura 7 cdigo de exemplo no Notepad++ e navegador Chrome exibindo o resultado.

Descrio: Cdigo HTML de exemplo com o cdigo JavaScript destacado em vermelho e exibio do resultado no
navegador com a caixa de dilogo circundada em vermelho.
1.10 O que pode ser feito em Javascript
O JavaScript manipula o navegador e a pgina web. Ele tambm possui algumas caractersticas a
mais.
JavaScript pode mudar o contedo dos elementos HTML;

JavaScript pode mudar o valor dos atributos dos elementos HTML;
JavaScript pode mudar o CSS de um elemento HTML;
JavaScript pode esconder e mostrar elementos HTML;
JavaScript pode reagir a eventos;
JavaScript pode se comunicar com o servidor web.
1.11 Onde escrever o cdigo Javascript
Podemos inserir o cdigo JavaScript no documento HTML utilizando a tag <script>. Fizemos dessa
forma no cdigo da Figura 7. Podemos escrever a tag <script> na tag <head> ou na <body>. Caso
voc precise utilizar essa forma, prefira escrever no final da tag <body>, assim todos os elementos
20
Competncia 01
so carregados antes do JavaScript. Essa no uma boa estratgia porque o JavaScript fica
misturado com o HTML e, quando ele cresce, fica muito confuso.
A melhor opo escrever seu cdigo JavaScript em um arquivo separado com a extenso .js e
fazer seu HTML pux-lo. Para associar o arquivo JavaScript com o documento HTML utilize a tag
<script> com o atributo src com o endereo do arquivo .js onde est seu cdigo JavaScript.
Observe um exemplo na Figura 8, temos dois arquivos: o index.html e o script.js.

Descrio: arquivo HTML com a tag <script> destacada em vermelho e o JavaScript no arquivo script.js, com o
navegador exibindo o resultado.
Lembre-se de que a melhor forma de fazer em um arquivo separado, mas, por uma questo de
espao no caderno de estudo, podemos colocar o cdigo JavaScript junto ao HTML.
1.12 Sada de resultado JavaScript
As exibies de resultado de computao, como o clculo de operaes matemticas, por exemplo,

so realizadas de quatro maneiras em JavaScript.
Voc pode exibir resultados escrevendo em um elemento HTML com innerHTML;
21
Competncia 01
Voc pode utilizar todo o documento HTML com document.write();

Como fizemos no cdigo da Figura 7, utilizando uma caixa de alerta com window.alert();
Escrevendo no console do navegador com console.log().
Vamos utilizar nos exemplos as formas mais simples.
Figura 9 cdigo HTML e JavaScript no Notepad++ e Exibio do resultado no navegador.

Descrio: Exemplo de exibio de resultado atravs da inscrio de texto em um elemento HTML. Ao apertar no
boto [Ao!] o resultado da soma de 2 + 2 mostrado no elemento com a identificao ret2, em amarelo.
Observe o cdigo JavaScript acima da janela do navegador.
Com isso, finalizamos a primeira competncia e voc deve entender absolutamente tudo para
seguir adiante. Caso ainda no tenha compreendido, faa uma pesquisa na internet. Voc
encontrar muito material escrito e em videoaula, apenas tenha o cuidado de ler somente o
material atualizado. Voc ainda pode utilizar o frum do AVA colocando a sua dvida no ttulo do
post para que os tutores possam identificar mais rpido sua necessidade.
Repita os exemplos e modifique-os para entender melhor. Ainda no explicamos muita coisa.
Deixamos para a prxima competncia para no o sobrecarregar, ento foque apenas no que foi
explicado.
22
Competncia 02
2.Competncia 2 | Conhecer as Tcnicas de Programao Procedural com

o Javascript
A programao procedural o estilo usado na maioria das linguagens de programao. Quando se

aprende uma linguagem procedural as outras ficam mais fceis porque a estrutura no muda, o que
muda so detalhes de escrita ou alguma especificao, como atalhos.
Nesta competncia vamos aprender o bsico sobre programao. Este conhecimento ser til no
aprendizado de qualquer linguagem, pois as estruturas bsicas so praticamente as mesmas em
todas as linguagens classificadas como procedurais.
A sintaxe de uma linguagem so as regras utilizadas para organizar as palavras-chaves.

Comearemos com as regras bsicas da sintaxe JavaScript.
2.1 Sintaxe
Um programa de computador um conjunto - instrues que so executadas por um

computador. Em uma linguagem de programao as instrues so comandos. Os comandos em
JavaScript so separados por ponto e vrgula (;). Os comandos podem ser valores, operadores,
expresses, palavras-chaves e comentrios.
2.2 Literais e variveis
Em JavaScript temos definidos dois tipos de valores: valores constantes e valores variveis. Os
valores constantes so chamados de literais e os valores variveis so chamados de variveis. Os
valores literais de nmeros fracionrios so escritos utilizando ponto ao invs da vrgula e os valores
de texto so escritos entre aspas duplas ou simples. Tanto faz.
23
Competncia 02
Figura 10 Valores literais em JavaScript.

Descrio: exibio de valores literais inteiro, fracionrio e texto em JavaScript.
Com os valores literais podemos realizar qualquer operao matemtica. Voc pode calcular a
mdia de notas, a rea de um quadrado, seu imposto de renda etc.
2.3 Declarao de variveis e atribuio de valores
Em uma linguagem de programao, variveis so usadas para armazenar valores. JavaScript usa a
palavra-chave var para ordenar a criao de uma varivel ao computador. Para criar uma varivel
utilizamos a palavra-chave var seguida de um nome que identifique ela. Esse identificador deve ser
nico em todo o programa. Um sinal de igual (=) utilizado para definir um valor para aquela
varivel. Assim, no exemplo da Figura 11, temos duas variveis, x com o valor de 2 e y com o valor
de 3. Podemos mudar o valor da varivel quantas vezes precisarmos com o operador de atribuio
(=).
Figura 11 Declarao de varivel e atribuio de valores em JavaScript.

Descrio: cdigo de exemplo que cria a varivel x e atribui o valor 2 a ela, e cria a varivel y com o valor de 3 no
mesmo comando.
2.4 Operadores e expresses
Da mesma forma que matemtica, podemos crias expresses com os operadores matemticos
soma (+), subtrao ( - ), multiplicao ( * ) e diviso ( / ). Uma expresso um conjunto que pode
ser composto por valores e operadores que do um resultado. Por exemplo 2 + 10 / 2, que vai dar 7.
24
Competncia 02
Primeiro so calculados os operadores multiplicativos ( * e / ) e depois os aditivos ( + e - ).
Concatenar unir dois pedaos. Podemos concatenar dois literais de texto com o operador de soma
( + ). Por exemplo: Fulano + de + Tal, tem o resultado Fulano de Tal.
A linguagem JavaScript tem um conjunto de palavras-chaves limitado. Uma palavra-chave um

comando. Observe na Figura 11 que var uma palavra-chave usada para ordenar a criao de
variveis.
Observe tambm que na Figura 10 e 11 escrevemos um texto explicativo. Ele ignorado pelo
navegador por ser um comentrio. Um texto entendido como um comentrio quando iniciado
por duas barras ( // ). Caso o comentrio seja de vrias linhas, utilizamos no comeo ( /* ) e no final
( */ ). Veja o exemplo na Figura 12.
Figura 12 Exemplo de comentrios.

Descrio: exemplo de cdigo JavaScript com comentrios de uma e vrias linhas.
2.5 Identificadores
Identificadores so nomes. Utilizamos identificadores para nomear variveis, funes e rtulos. Mas
devemos seguir algumas regras para nomear identificadores.
O primeiro caractere deve ser uma letra, sublinhado ( _ ) ou o cifro ( $ ).

Os caracteres subsequentes podem ser letras, nmeros, sublinhado e cifro.
25
Competncia 02
JavaScript sensvel maisculas e minsculas, ento identificadores como amor, Amor, aMoR e
AMOR so todos diferentes. A maioria dos erros dos iniciantes so de digitao.

Descrio: cdigo de exemplo no Notepad++ e navegador Chrome exibindo o resultado. Agora quando o boto
apertado, ele calcula a mdia dos valores das variveis x e y.
2.6 Operadores comparativos
Os operadores comparativos comparam duas expresses e resultam em verdadeiro ou falso. Por

exemplo: 3 > 2 igual a verdadeiro, e 50 20 < 10 + 2 falso. Alm de maior que e menor que
26
Competncia 02
temos outros operadores.
Operador Descrio
> Maior que
< Menor que
>= Maior que ou igual
<= Menor que ou igual
== Igual
!= Diferente
Tabela 1 Tabela com os operadores comparativos.
Descrio: tabela que relaciona os operadores comparativos e sua descrio.
2.7 Operadores lgicos
Os operadores lgicos comparam dois valores lgicos e resultam em um valor lgico.
Operador Descrio
&& Operador lgico e
|| Operador lgico ou
! Operador lgico no, inverte o valor lgico.
Tabela 2 Tabela com os operadores lgico.
Descrio: tabela que relaciona os operadores lgicos e sua descrio.
Tabela com os valores possveis dos operadores lgicos.
! (no lgico)
&& (e lgico) || (ou lgico)
Baseado na expresso 1
V V F
F V F
F V V
F F V
Tabela 3 Tabela verdade com os operadores lgico.
Descrio: tabela verdade com os resultados possveis em operaes lgicas.
27
Competncia 02
2.8 Precedncia
Podemos ter uma grande sequncia de operadores em uma expresso. No entanto, o computador
s pode calcular uma operao de cada vez e ainda deve seguir as regras matemticas. Assim, ele
tem uma ordem de precedncia a seguir. A tabela 4 lista os operadores em JavaScript e informa
quem realizado primeiro do que o outro.
Descrio Exemplo
As expresses em parnteses internos so (1+(4/2))-3
resolvidas primeiro.
Multiplicativos 2*3+1
Aditivos 21>3
Comparativos 3 > 2 == 1
Igualdades 3 == 2 && true
Lgicos X = true || false
Atribuio X=3
Tabela 4 Tabela de precedncia de operadores.
Descrio: Tabela de precedncia de operadores com os respectivos itens
2.9 Estruturas condicionais
O fluxo normal de leitura dos comandos de cima para baixo, da mesma forma que lemos um texto
aqui no ocidente. No entanto, por vezes, na programao, precisamos desviar o fluxo, seja para
evit-lo em certas condies, como para repeti-lo.
So certos momentos da programao que, se for de um jeito faa algo, seno for faa outro. Esse
tipo de fluxo muito comum e depende de um teste. JavaScript como a maioria das linguagens de
programao procedurais, temos dois tipos de estruturas com esta caracterstica:
IF...ELSE;
SWITCH...CASE.
28
Competncia 02
Vamos conhecer cada uma delas com exemplos.
2.9.1 If...else
Uma das estruturas procedurais mais antigas e teis a estrutura condicional IF. Em portugus ela
quer dizer se. Ela tem o poder de desviar o fluxo normal de leitura das linhas na dependncia de
um teste. Se o teste resultar em verdadeiro, a linha processa, seno, o bloco de cdigo evitado.
Observe o exemplo da Figura 14.
Figura 14 Cdigo de exemplo da estrutura if.

Descrio: cdigo de exemplo no Notepad++ e navegador Chrome exibindo o resultado.
Atente que houve pequenas mudanas no arquivo HTML. No arquivo script.js temos as seguintes
linhas e suas explicaes:
Linha 1 A primeira linha cria uma funo que executada quando o boto pressionado.
Veremos o que funo mais adiante.
Linha 2 Precisamos de algo que nos d a hora do sistema. Essa linha pega o tempo do computador
e guarda na varivel tempo.
29
Competncia 02
Linha 3 O tempo do sistema possui data, hora, segundo e outros valores. Nesta linha pegamos
apenas o valor da hora. Esse valor vai de 0 at 23 horas.
Linha 5 Fazemos um teste hora > 18. Dependendo da hora esse teste pode ser verdadeiro ou
falso. Se o teste resultar em verdade, o bloco de comandos delimitado por chaves { } executado,
seno, ele ser pulado, ou seja, ignorado.
Linha 6 Esta e a prxima linha sero executadas apenas se o teste resultar em verdade. Ento,
pegamos no HTML um elemento com a id de valor texto.
Linha 7 Nesta linha substitumos seu contedo por Boa noite!.
Linha 8 Final do bloco do if. Se o teste resultar em falso, o fluxo ser desviado para esta linha.
claro que voc tem que testar esse cdigo a noite para ver seu resultado. Isso no seria to
conveniente. Gostaramos que, se o teste resultasse em falso, ele desse um Bom dia!, o que
muito possvel.
A instruo if possui um complemento opcional, o else. O else significa seno. Se for verdade
faa isso, seno faa aquilo. Vou mudar o cdigo para que se o teste resultar em falso passarmos
outra mensagem.
Figura 15 Cdigo da estrutura if com o else.

Descrio: Cdigo de exemplo da estrutura if com o else exibido no Notepad++.
Linha 8 Marca o incio do bloco else.
30
Competncia 02
As outras linhas so cpias e j foram explicadas.
Podemos colocar estruturas dentro de estruturas porque, afinal, todos so comandos. Observe a
Figura 16 com o cdigo para Bom dia!, Boa tarde! e Boa noite!. Fiz ele diferente para te fazer
pensar um pouquinho. Tenha bastante ateno nas linhas e procure entender o que acontece.
Figura 16 Cdigo com estrutura if aninhadas.

Descrio: cdigo de exemplo com estrutura if aninhadasno Notepad++.
2.9.2 Switch...case
Outra estrutura condicional a switch...case. Ela tambm funciona desviando o fluxo, mas de uma
forma bem diferente. No switch...case temos um bloco de cdigo com linhas marcadas com case. O
teste do switch compara um valor com cada um dos cases do bloco de cdigo e quando acha um
que bata, ou seja, que seja igual, ele prossegue daquele ponto em diante. Vamos ver um exemplo
na Figura 17.
31
Competncia 02
Figura 17 cdigo da estrutura switch...case no Notepad++ e navegador Chrome exibindo o resultado.

Descrio: Cdigo de exemplo da estrutura switch...case. Como o teste foi realizado no sbado, ento, o nmero
comparado foi 6, apenas um quadrado. Se fosse o domingo, que o zero, teria sido criado 7 quadrados vermelhos.
Abaixo, temos a explicao das linhas que so diferentes do exemplo anterior:
Linha 3 Declaramos a varivel semana que guarda o dia da semana que vai de 0 at 6, comeando
pelo domingo, o zero.
Linha 6 Declaramos uma varivel quadrado que vai acumulado o texto com as tags <div> para na
linha 24 colocar dentro da tag com a id ret0.
Linha 7 Incio da estrutura switch onde fica a varivel que ser testada.
Linha 8 Esta a primeira marcao. Se a varivel tiver o valor 0, o fluxo comea desta linha e vai
at o final. Acontece da mesma forma com as linhas 10, 12, 14, 16, 18 e 20. Se no for nenhum dos
valores, o fluxo vai para a linha 22.
Pode parecer estranho que o fluxo comece em uma linha e siga adiante sem parar. Mas caso voc
queira que ele pare, podemos incluir o comando break que encerra o fluxo, direcionando para o
final. O exemplo da Figura 18 funciona da mesma forma, mas o break interrompe o fluxo contnuo
quando lido. Assim, apenas o nome do dia da semana escrito.
32
Competncia 02
Figura 18 cdigo estrutura switch...case com o uso do comando break no Notepad++ e navegador Chrome
exibindo o resultado.
Descrio: Cdigo de exemplo da estrutura switch...case com o uso do comando break. O teste foi feito em um
sbado. O break desvia o fluxo para o final do switch, na linha 27.
Ainda temos a clusula opcional default. Caso no bata com nenhum case a clusula default
executada. No exemplo da Figura 19, se no for sbado nem domingo, ser escrito Dia de
trabalho..
Figura 19 Cdigo da estrutura switch...case com a clusula default

Descrio: Cdigo de exemplo no Notepad++ da estrutura switch...case com a clusula default.
33
Competncia 02
2.10 Estruturas de repetio
As estruturas de repetio so como as estruturas de condicionais, elas servem para desviar o fluxo,
mas com outra inteno. No caso delas, o fluxo desviado para repetir um bloco de comandos.
Tambm realizado um teste para saber at quando ser repetido. Se voc errar o momento de
parar, pode ser que ele nunca chegue a parar e a sensao de que tudo est travado, mas o
problema que nunca chega a condio de parada.
Outro nome para esse estilo de fluxo loop, ou lao. Loop o termo em ingls para aquelas voltas
que o avio d. Pesquise vdeos na internet sobre loop para ter uma ideia melhor.
Veremos trs estruturas de repetio:
FOR;
WHILE;
DO...WHILE.
Elas fazem a mesma coisa e podemos utilizar qualquer uma delas em todos os momentos, s que
cada uma possui caractersticas prprias que facilitam a vida em um determinado momento. Vamos
conhecer essas estruturas e suas caractersticas para podermos decidir sabiamente em quais
momentos devemos utiliz-las.
2.10.1 For
O lao for a mais antiga das estruturas de repetio. Ela possui trs parmetros que determinam
sua condio de parada. Ela tambm utiliza, em sua composio, uma varivel de controle que pode
ser criada na estrutura ou podemos utilizar qualquer outra varivel numrica criada anteriormente.
Vamos ver um exemplo e a explicao das linhas.
34
Competncia 02
Figura 20 Cdigo de exemplo da estrutura de repetio for.

Descrio: cdigo de exemplo no Notepad++ da estrutura de repetio for e navegador Chrome exibindo o resultado.
As estruturas de repetio so excelentes para se fazer um trabalho repetitivo. No caso do for,

quando sabemos exatamente quantas repeties tm de ser feitas. Agora vamos s explicaes das
linhas.
Linha 2 Criamos uma varivel texto para guardar as linhas que sero adicionadas no HTML.
Linha 3 Essa a estrutura for. Comea pela palavra-chave for e depois criamos uma varivel i
para ser nosso contador, que comea a contar de 1. Depois do ponto e vrgula colocamos um teste i
< 10, enquanto esse teste for verdadeiro, ser executado o bloco seguinte. A, temos outro ponto e
vrgula e como ser adicionado os valores na varivel de controle, que, nesse caso, somando 1 ao
que j est na varivel. Poderamos ter utilizado o atalho i++ que adiciona 1 ou i-- que subtrai 1 da
varivel, mas essa situao se comearmos de um valor alto e formos diminuindo.
Linha 4 Guarda em texto o que j estiver em texto junto com Texto , o valor de i e <br /> para
pular a linha no HTML.
35
Competncia 02
O restante do cdigo j explicamos anteriormente.
Podemos colocar estruturas dentro de estruturas para fazer aplicaes mais complexas. Observe o
exemplo da Figura 21 que utiliza o lao for do maior para o menor e um if para filtrar o que ser
exibido.
Figura 21 Cdigo de exemplo no Notepad++ e navegador Chrome exibindo o resultado

Descrio: Cdigo de exemplo com um lao for que conta do maior para o menor, faz um teste para saber se mpar
o valor de i, e, se for, adiciona um quadrado com o valor de i no seu interior.
Vamos a explicao das linhas:
Linha 2 Criamos uma varivel quadrados para guardar a tag do quadrado verde.
Linha 3 Temos o lao for que comea de 10, testa se i maior que 0 e vai diminuindo de 1 em 1
atravs do i--.
Linha 4 Utilizamos um if que far o bloco, se o resto da diviso de i por 2 for 1. Essa expresso diz
se o valor mpar ou par. Se for mpar, o bloco executado.
Linha 5 Adicionamos a varivel quadrado ao que ela j tem com mais uma tag do quadrado
verde.
36
Competncia 02
2.10.2 While
A estrutura while tambm serve para repetir. Ela faz seu teste, mas no possui, em sua estrutura,
uma varivel de controle. Ela utilizada quando no sabemos quando a repetio deve parar.
Figura 22 Exemplo da estrutura while.

Descrio: cdigo de exemplo da estrutura while no Notepad++ e navegador Chrome exibindo o resultado.
Vamos explicao das linhas:
Linha 2 Pegamos o elemento HTML com o id ret0 para colocarmos os quadrados. Na Figura 26
o retngulo cinza na pgina.
Linha 3 Vamos utilizar a varivel mais como o controle da repetio. Ela comea verdadeira,
ento, sempre teremos ao menos um quadrado amarelo. Definimos seu valor para verdadeiro com
true.
Linha 5 Apagamos o contedo do elemento ret0.
Linha 6 Temos o incio da estrutura while que testa a varivel mais para saber se ela
verdadeira. O lao vai se repetir enquanto ela for verdadeira.
Linha 7 O comando confirm abre uma caixa de dilogo que pergunta ok ou cancel. Se o usurio
apertar o boto de cancelar, a caixa retorna falso. Depois que o usurio decidir e apertar o boto
37
Competncia 02
que quer, colocamos o valor (verdadeiro ou falso) na varivel mais.
Linha 8 Adicionamos ao que j estiver como contedo do elemento ret0 uma tag de quadrado
amarelo.
Linha 9 Retornamos para a Linha 6 e fazemos o teste da varivel mais novamente. Se for falso, se
encerra a repetio.
Gaste algum tempo analisando esse cdigo para entender bem direitinho. At agora ele o mais
importante para ns.
2.10.3 Do...while
Observe no exemplo da Figura 22 que se o valor da varivel mais for falso, no ser repetido
nenhuma vez. Isso acontece porque o teste realizado no comeo da estrutura, ento, pode no
ser realizado nenhuma vez. A estrutura do...while uma variao do while onde seu teste no final.
Utilizando ela, sabemos que, ao menos uma vez, ser realizado o trabalho. a mesma estrutura
utilizada no final de um jogo onde se pergunta ao jogador se ele quer jogar novamente. Veja o
exemplo da Figura 23 que o mesmo da Figura 22 mudando a estrutura. Observe que no
precisamos definir um valor inicial para a varivel mais.
Figura 23 Exemplo da estrutura do...while.

Descrio: cdigo de exemplo da estrutura do...while no Notepad++ e navegador Chrome exibindo o resultado.
38
Competncia 02
2.11 Endentando o cdigo
Observe que as estruturas podem ser utilizadas em conjunto para fazer programas mais complexos,
e esse o caso normal. Ou seja, normalmente, estamos programando estruturas dentro de
estruturas, laos dentro de laos com estruturas condicionais dentro de estruturas condicionais e
dentro delas outros laos. Como isso pode ficar muito complicado, utilizamos tabulaes dentro dos
nveis. Observe no exemplo da Figura 24 que as linhas 7 e 8 ficam mais afastadas por estarem em
um bloco de cdigo dentro de um bloco de cdigo. Faa dessa forma que vai ajudar todo mundo
que observar o seu cdigo. Endentar o cdigo uma boa prtica de programao que todos os
profissionais utilizam.
39
Competncia 03
3.Competncia 03 | Conhecer as Tcnicas de Programao Orientada a

Objetos com o Javascript
Em JavaScript os objetos so os elementos mais poderosos. Se voc entender o paradigma

orientado a objeto, voc entende de JavaScript.
Em JavaScript, quase tudo um objeto:
Booleanos (verdadeiro ou falso) podem ser objetos (se definidos com o comando new)
Os nmeros podem ser objetos (se definidos com o comando new)
As Strings (texto) podem ser objetos (se definidos com o comando new)
As datas so sempre objetos
As matemticas so sempre objetos
Expresses regulares so sempre objetos
Matrizes so sempre objetos
As funes so sempre objetos
Objetos so sempre objetos
Todos os valores JavaScript, exceto primitivos, so objetos.
3.1 Primitivas Javascript
Um valor primitivo apenas um valor simples, por exemplo, 3 , 4.25 e Fulano de Tal. Os tipos
primitivos so tipos que guardam um valor primitivo. Em JavaScript temos cinco tipos de dados
primitivos:
String Que so textos literais. Por exemplo, Fulano de Tal;

Nmero Que so valores numricos. Por exemplo, 3;
Booleano Que pode ser verdadeiro ou falso;
Nulo Que indica que no existe um objeto associado;
40
Competncia 03
Indefinido Que indica que no existe nada, nem valor nem objeto.
Valores primitivos so literais e no podem ser alterados. O valor 3 sempre ser 3. diferente de
uma varivel que pode guardar um valor e mudar durante o programa.
3.2 Objetos Javascript
Objetos JavaScript so variveis que guardam variveis, ou seja, um conjunto de valores

identificados. Os valores so escritos como pares nome: valor (nome e valor separados por dois
pontos). Observe o exemplo:
var aluno = { primeiroNome:Fulano, ultimoNome:de Tal, idade:30, matriculado:true };
3.3 Propriedades de um objeto
Propriedades de um objeto so os valores identificados desse objeto. Utilizando o exemplo anterior

temos.
Propriedade Valor
primeiroNome Fulano
ultimoNome de Tal
idade 30
matriculado true
3.4 Mtodos de um objeto
Mtodos so aes que os objetos podem realizar. As propriedades dos objetos podem guardar
valores, objetos e funes. Um mtodo de um objeto JavaScript uma propriedade cujo valor
uma funo.
A propriedade nomeCompleto pode retornar juno dos nomes. Assim,
41
Competncia 03
nomeCompleto = function() { return this.primeiroNome + " " + this.ultimoNome; }
3.5 Criando um objeto
Com o JavaScript, voc pode definir e criar seus prprios objetos. Existem diferentes maneiras de
criar objetos:
Defina e crie um nico objeto, usando um objeto literal.

Defina e crie um nico objeto, com o comando new.
Defina um construtor de objeto e crie objetos do tipo utilizando o construtor.
3.5.1 Criando um objeto literal
Esta a maneira mais fcil de criar um objeto JavaScript. Usando um objeto literal, definimos e
criamos ao mesmo tempo um objeto em um comando. Um objeto literal uma lista de pares nome:
valor (como idade: 30) dentro de chaves { }. O exemplo a seguir cria um novo objeto JavaScript com
quatro propriedades:
Figura 24 Declarao e criao de um objeto literal.

Descrio: cdigo da declarao e criao de um objeto literal no Notepad++.
3.5.2 Criando com o comando new
O exemplo a seguir tambm cria um novo objeto JavaScript com quatro propriedades.
42
Competncia 03
Figura 25 Utilizando o comando new para criar um objeto e depois adicionar suas propriedades.
Descrio: cdigo da declarao e criao de um objeto pelo comando new no Notepad++.
Os objetos criados com o cdigo da Figura 24 e 25 so exatamente iguais, mas o da Figura 24

executa mais rpido.
3.5.3 Criando com o construtor do objeto
Os exemplos anteriores so limitados em muitas situaes. Eles s criam um nico objeto. Mas, s
vezes ns precisamos de ter um tipo de objeto que pode ser usado para criar muitos objetos
daquele mesmo tipo. A maneira padro de criar um tipo de objeto usando uma funo de
construo de objeto:
Figura 26 Criando uma funo de construo de objeto e criando dois objetos do tipo aluno.
Descrio: cdigo de criao da funo de construo e criao de dois objetos pelo construtor.
A funo aluno um construtor de objetos. Uma vez criado um construtor, podemos criar quantos
objetos precisarmos daquele tipo.
3.6 A palavra-chave this
Em JavaScript a palavra-chave this refere-se ao objeto que possui o cdigo. O valor de this, quando
usado em uma funo, o objeto onde a funo foi originalmente escrita. O valor de this, quando
usado em um objeto, o prprio objeto. Ela no uma varivel e por isso voc no pode definir um
43
Competncia 03
valor para ela.
Na Figura 26 a palavra this na funo se refere ao objeto que criado no momento. Assim, cada
objeto criado com new guardar dados diferentes, mesmo que utilize a mesma funo de
construo.
3.7 Manipulando propriedades de um objeto
Para acessar o valor guardado em uma propriedade, coloque o nome da varivel com o objeto
seguido de um ponto e o nome da propriedade. Onde voc colocar essa sequncia o navegador
substituir pelo valor. Exemplo na Figura 27.
Para modificar o valor de uma propriedade, ou criar uma propriedade, coloque o nome da varivel
com o objeto seguido de um ponto, o nome da propriedade, o smbolo de atribuio ( = ) e o valor.
Exemplo na Figura 27.
Para remover uma propriedade de um objeto basta utilizar a palavra-chave, delete, seguida pelo
nome do objeto, um ponto, e o nome da propriedade. Exemplo na Figura 27.
Figura 27 Manipulando propriedades de um objeto.

Descrio: cdigo que utiliza e modifica propriedades de um objeto e apaga uma propriedade de um tipo de objeto.
44
Competncia 03
3.8 Manipulando mtodos de um objeto
Um mtodo uma funo guardada em uma propriedade. Para solicitar a execuo de um mtodo
de um objeto, coloque o nome do objeto seguido de um ponto e o nome da propriedade que
guarda a funo seguido do abre e fecha parnteses e seus argumentos, se houver. Veja o exemplo
na Figura 28.
Novos mtodos devem ser includos na funo construtora para serem utilizados. Voc ainda pode
atribuir uma nova funo a uma propriedade para transform-la em um mtodo ou trocar a funo
de um mtodo.
Figura 28 Contedo dos arquivos index.html e script.js, alm da exibio do resultado no navegador.
Descrio: Cdigo HTML com uma alterao na linha 29 e cdigo do script.js com a utilizao do mtodo
nomeCompleto() em uma funo que nome() que coloca o nome completo em um elemento HTML.
3.9 Prototype
Um prototype o tipo de um objeto e sua funo construtora a forma de definir um prototype.

Suas propriedades e mtodos so manipulados da mesma forma que mostramos anteriormente. A
nica solicitao que h que o identificador de prototypes comece por letra maiscula. No
obrigatrio, apenas uma boa prtica de programao.
45
Competncia 04
4. Competncia 04 | Conhecer os Fundamentos de Jquery
JQuery uma biblioteca de JavaScript, lanada em dezembro de 2006 no BarCamp de Nova York
por John Resig. A sintaxe do jQuery foi desenvolvida para tornar mais simples a navegao do
documento HTML, a seleo de elementos DOM, criar animaes, manipular eventos, desenvolver
aplicaes AJAX e criao de plug-ins sobre ela. Seu objetivo o de simplificar a programao de
cdigo JavaScript.
Uma biblioteca uma coleo de funes prontas que foram testadas e pensadas para serem
utilizadas em uma grande variedade de situaes. Com o jQuery, conseguir fazer efeitos
mirabolantes em sua pgina muito fcil. A filosofia do jQuery escrever menos e fazer mais.
A biblioteca jQuery contm os seguintes recursos:
Manipulao HTML/DOM;
Manipulao CSS;
Mtodos sobre eventos HTML;
Efeitos e animaes;
AJAX;
Funes de utilidade comuns.
Alm disso, jQuery tem plug-ins para quase qualquer coisa, basta procurar na internet.
H muitas outras bibliotecas JavaScript na internet, mas jQuery parece ser a mais popular, e
tambm a mais extensvel. Muitas das maiores empresas da web usam jQuery, como:
Google;
Microsoft;
IBM;
Netflix.
46
Competncia 04
No entanto, para aprender jQuery corretamente voc precisa saber HTML, CSS e JavaScript. D uma
revisada nos assuntos passados se voc esqueceu ou teve dificuldade em algum conceito.
Leia mais sobre o jQuery no link abaixo:

https://pt.wikipedia.org/wiki/JQuery
4.1 Adicionando a biblioteca em sua pgina
Voc pode adicionar a biblioteca jQuery em suas pginas de duas formas:
Fazendo o download da biblioteca;

Fazendo uma referncia a um repositrio.
4.1.1 Fazendo o download do JQuery
Existem duas verses do jQuery, que so iguais, mas formatadas de formas diferentes:
Verso de produo: a verso que voc usa quando disponibiliza seu site na web. Ela
comprimida para ser carregada mais rpido pelo navegador.
Verso de desenvolvimento: no possui compresso e, por isso, legvel, caso voc precise
abrir os arquivos por algum motivo.
Ambas as verses podem ser baixadas do site jQuery.com. Figura 29.
47
Competncia 04
Figura 29 Pgina de download do site da jQuery.com.

Descrio: navegador exibindo a pgina de download do site da jQuery.com.
A biblioteca jQuery um nico arquivo JavaScript e voc faz referncia a ele com a tag <script>
HTML. Observe que a tag <script> deve estar dentro da seo <head>. Coloque o arquivo baixado
no mesmo diretrio que as pginas onde voc deseja us-lo.
48
Competncia 04
Figura 30 Pgina de exemplo com a linha 22 que adiciona a biblioteca pgina.

Descrio: cdigo que adiciona a biblioteca pgina na tag <head>.
4.1.2 Utilizando um repositrio
Se voc no quiser fazer o download e hospedar jQuery voc mesmo, voc pode inclu-la por um
CDN (Content Delivery Network), um repositrio que guarda a biblioteca. Tanto o Google quanto o
Microsoft hospedam a jQuery. Para usar o link da jQuery disponibilizado pelo Google ou pela
Microsoft:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
49
Competncia 04
4.2 sintaxe JQuery
A utilizao do jQuery muito fcil. Basicamente voc seleciona um elemento no HTML e executa
aes sobre ele, ou sobre eles, no caso de mais de um elemento.
A sintaxe bsica : $(seletor).ao()
O sinal de cifro $ usado para acessar a biblioteca;

Seletor a maneira para encontrar o elemento na pgina HTML;
Ao uma funo do jQuery que ser executada sobre o elemento.
Observe a Figura 31 que possui alguns exemplos de utilizao.
Figura 31 Exemplo de cdigo de acesso a elementos HTML e executando sobre eles a ao de esconder.
Descrio: cdigo demonstrando a seleo de elementos no HTML e a execuo de ao sobre eles.
4.3 Evento ready
O evento ready um evento especial que espera todo o carregamento da pgina antes de executar
o cdigo do jQuery. Isso serve para evitar que qualquer cdigo jQuery seja executado antes que o
documento HTML esteja carregado.
uma boa prtica esperar que o documento seja carregado completamente e esteja pronto antes
de trabalharmos com ele. Isso tambm evita que voc coloque o seu cdigo JavaScript antes do
corpo do seu documento, na tag <head>.
50
Competncia 04
Eis alguns exemplos de aes que podem falhar se os mtodos forem executados antes que o
documento esteja carregado completamente:
Tentando ocultar um elemento que ainda no foi criado;

Tentando obter o tamanho de uma imagem que ainda no est carregada.
Figura 32 cdigo do evento ready().

Descrio: Exemplo de utilizao do evento ready().
4.4 Seletores
Os seletores so uma parte importante da maneira como o jQuery manipulado. Os seletores

permitem selecionar e manipular elementos em uma pgina HTML. Os seletores jQuery so usados
para achar, ou selecionar, elementos HTML baseados em seu nome, id, classes, tipos, atributos,
valores de atributos e muito mais. baseado nos seletores CSS existentes e, alm disso, tem alguns
prprios seletores personalizados. Todos os seletores no jQuery comeam com o sinal de dlar e
parnteses: $ ().
4.4.1 Selecionando Tag
O seletor de elemento jQuery pode selecionar tags com base no nome da tag. Voc pode selecionar
todos os <p> elementos em uma pgina, veja o exemplo na Figura 33, quando o usurio clica no
boto, todos os quadrados desaparecem.
51
Competncia 04
Figura 33 exibio do cdigo de exemplo em HTML e do cdigo JavaScript

Descrio: exibio do cdigo de exemplo em HTML e do cdigo JavaScript para selecionar elementos baseados em
tag. Houve alteraes no HTML, observe na linha 30.
Atente que no HTML no precisamos do atributo onClick. A prpria jQuery cuida de atribuir o
efeito do boto. Atente, tambm, que ainda separamos nosso cdigo JavaScript em outro arquivo,
para ficar organizado e mais legvel. J em nosso cdigo JavaScript usamos o seletor baseado em
tags para selecionar todas as tags <button> na linha 2 e todas as tags <p> na linha 3.
4.4.2 Selecionando pelo atributo ID
A forma como selecionamos pelo atributo id quase igual seleo de tags, mas como o id deve ser
nico, o retorno de elementos pelo id deve ser de apenas um elemento. A diferena est que, na
seleo pelo atributo id, utilizamos o smbolo de jogo da velha ( # ) antes do nome. Observe no
exemplo da Figura 34.
52
Competncia 04
Figura 34 Exemplo de seleo pelo id de ret1 na linha 3.

Descrio: cdigo de exemplo de seleo pelo id e resultado no navegador.
4.4.3 Selecionando pelo atributo class
A seleo pelo atributo class realizada colocando na frente do valor um ponto. Observe no
exemplo da Figura 35.
Figura 35 Exemplo de seleo pelo atributo class de retangulo na linha 3.

Descrio: cdigo de exemplo de seleo pelo atributo class e resultado no navegador.
4.4.4 Exemplos de seletores
Estude estes exemplos mais complexos para compreender o poder do jQuery:
$("*") Seleciona todos os elementos.
$(this) Seleciona o elemento corrente.
53
Competncia 04
$("p.intro") Seleciona todos as tags <p> com o class="intro".
$("p:first") Seleciona a primeira tag <p>.
$("ul li:first") Seleciona a primeira tag <li> da primeira <ul>.
$("ul li:first-child") Seleciona a primeira tag <li> de cada <ul>.
$("[href]") Seleciona todas as tags que possuam um atributo href.
$("a[target='_blank']") Seleciona todas as tags <a> em que o atributo target possua o valor
_blank.
$("a[target!='_blank']") Seleciona todas as tags <a> que o atributo target NO possua o valor
_blank.
$(":button") Seleciona todas as tags <button> e tags <input> que possua o atributo type com o
valor button.
$("tr:even") Seleciona todas as tags at a tag <tr>.
$("tr:odd") Seleciona todas as linhas mpares das tags <tr>.
Estude esses exemplos de seleo de tags e experimente para entender o que eles realizam. Em
caso de dvida, faa uma pesquisa na web para entender melhor.
4.5 Eventos JQuery
Todas as diferentes aes do visitante que uma pgina da Web pode responder so chamadas de
eventos. JQuery feito sob medida para responder a eventos em uma pgina HTML. Um evento
representa o momento preciso em que algo acontece. Por exemplo:
Movendo um mouse sobre um elemento;

Selecionando um boto;
Clicando em um elemento.
Na Tabela 5 temos alguns dos eventos mais utilizados:
54
Competncia 04
Eventos com o mouse Eventos com o teclado Eventos de formulrio Eventos do documento
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload
Tabela 5 Tabela com os eventos mais utilizados classificados por tipo.
Descrio: tabela que classifica os eventos mais utilizados.
Para atribuir um evento voc faz uma seleo, coloca um ponto e chama a funo relacionada ao
evento. Depois voc precisa definir uma funo que ser executada quando o evento ocorrer. Veja
o exemplo nas Figuras 33, 34 e 35.
$(document).ready(); Permite-nos executar uma funo quando o documento est carregado

completamente.
$(p).click(); A funo executada quando o usurio clica no elemento HTML.
$(p).dblclick(); A funo executada quando o usurio clica duas vezes no elemento.
$(p).mouseenter(); A funo executada quando o ponteiro do mouse entra no elemento

HTML.
$(p).mouseleave(); A funo executada quando o ponteiro do mouse deixa o elemento.
$("p").mousedown(); A funo executada quando qualquer boto pressionado para baixo,

enquanto o mouse est sobre o elemento HTML.
$("p").mouseup(); A funo executada quando qualquer boto liberado, enquanto o mouse

est sobre o elemento HTML.
$("p").hover(); A primeira funo executada quando o mouse entra no elemento HTML e a

segunda funo executada quando o mouse sai do elemento HTML.
$("input").focus(); A funo executada quando o campo de formulrio obtm foco.
$("input").blur(); A funo executada quando o campo de formulrio perde o foco.
55
Competncia 04
O mtodo on() atribui um ou mais manipuladores de eventos para os elementos selecionados. Veja
o exemplo na Figura 36.
Figura 36 Exemplo de utilizao do mtodo on().

Descrio: cdigo de exemplo do mtodo on() e exibio do resultado no navegador.
4.6 Obtendo a tag, o texto e o valor de um campo
Trs mtodos simples da jQuery, mas teis, para manipulao DOM so:
text() - Define ou retorna o contedo de texto dos elementos selecionados;

html() - Define ou retorna o contedo dos elementos selecionados (incluindo marcao
HTML);
val() - Define ou retorna o valor de campos de formulrio.
O exemplo da Figura 37 demonstra como obter contedo com os mtodos jQuery text() e html(). O
mtodo val() funciona da mesma forma, mas precisa de um campo de formulrio para pegar o
valor.
56
Competncia 04
Figura 37 utilizao das funes text() e html().

Descrio: Exemplo do cdigo no Notepad++ das funes text() e html() e navegador mostrando o resultado.
Observe na exibio do navegador da Figura 43 que o texto pego com text() das tags <p> foi
modificado com p:last, ou seja, a ltima tag <p>. Perceba a diferena entre text() e html(). Como a
ltima tag <p> possui uma tag <em>, ela exibida quando usamos html() e no quando usamos
text().
4.7 Obtendo o valor de um atributo
O mtodo jQuery attr() usado para obter valores de atributos. O exemplo da Figura 38 demonstra
como obter o valor do atributo type em uma tag <button>.
57
Competncia 04
Figura 38 Exemplo de utilizao da funo attr().

Descrio: cdigo HTML e JavaScript no Notepad++ da funo attr() e o navegador com o resultado. Em destaque o
valor capturado.
4.8 Definindo contedo
A definio de contedo em modo texto com text(), em modo HTML com html() e colocando
valores em campos de formulrio com val() funciona da mesma forma para pegar os valores, no
entanto colocamos o valor que queremos definir entre os parnteses.
A troca de valores de atributo necessita definir qual atributo ser modificado.
Analise o exemplo da Figura 39.
58
Competncia 04
Figura 39 cdigo text() e html() no Notepad++ e navegador mostrando o resultado.

Descrio: Exemplo onde utilizamos text() e html() para colocar contedo no HTML. No caso do atributo,
modificamos o atributo id do terceiro retngulo, por isso ele renderizado com as configuraes de CSS do
primeiro quadrado.
Observe que no quadrado amarelo utilizamos html() para inserir a tag <b> que deixa o texto em
negrito. A tag <b> no deve ser utilizada, o negrito colocado com CSS, mas nesse caso foi apenas
para demostrar o exemplo.
No caso do atributo, modificamos o atributo id do terceiro retngulo, por isso ele renderizado
com as configuraes de CSS do primeiro quadrado.
59
Competncia 05
5.Competncia 05 | Utilizar os Efeitos do JQuery
Os efeitos da biblioteca jQuery so um show parte. Ela contm animaes prontas utilizando
funes matemticas. Esses feitos podem ser associados a vrios elementos e combinados.
Veremos alguns deles:
hide();
show();
fade();
slide();
animate().
O limite a criatividade, mas tem muitos exemplos prontos na web que podem ser copiados,
aplicados, combinados e estudados.
5.1 Esconder (hide) e mostrar (show)
Com jQuery, voc pode ocultar e mostrar elementos HTML com os mtodos hide () e show ().
Sua sintaxe :
$(selector).hide(velocidade , callback);
$(selector).show(velocidade, callback);
O parmetro de velocidade opcional e especifica a velocidade da ocultao/exibio. Pode ter os

seguintes valores: slow (devagar), fast (rpido) ou a definio do tempo em milissegundos, um
segundo equivale a 1000.
O parmetro de callback opcional e uma funo que ser executada aps o mtodo hide() ou
show() ser concludo.
Veja o exemplo na Figura 40. Como o efeito animado, voc ter que copiar e executar em seu
navegador para ver a experincia de uso. Copie com bastante ateno, uma letrinha ou smbolo
60
Competncia 05
errado e nada funcionar.
Figura 40 Exemplo dos efeitos hide() e show().

Descrio: cdigo com o exemplo dos efeitos de hide() e show() no Notepad++.
Quando os quadrados coloridos so clicados eles desaparecem. Quando o boto clicado, todos
aparecem. Observe o tempo de desaparecimento configurado para cada um.
5.1.1 Efeito toggle
Podemos alternar entre mostrar e esconder com apenas uma funo, toggle(). Ela funciona como
um liga-desliga. Replique o cdigo da Figura 41 e execute para experimentar.
Figura 41 cdigo de exemplo do efeito toggle().

Descrio: Exemplo do efeito toggle(). Quando aperta o boto o quadrado vermelho
desaparece, se apertar novamente, ele aparece.
5.2 Efeito de desaparecimento gradual (fade)
Com jQuery voc pode fazer desaparecer ou aparecer um elemento de forma gradual. JQuery tem
61
Competncia 05
os seguintes mtodos fade:
fadeIn() - Faz o elemento desaparecer gradativamente;

fadeOut() - Faz o elemento aparecer gradativamente;
fadeToggle() - Alterna entre desaparecer e aparecer;
fadeTo() - Faz o elemento aparecer ou desaparecer at um certo ponto determinado entre 0
e 1, sendo 0 totalmente invisvel e 1 totalmente visvel.
Assim como o efeito de hide/show, o fade tambm tem os mesmos parmetros de velocidade e
callback.
O parmetro de velocidade opcional e especifica a velocidade da ocultao/exibio. Pode ter os

seguintes valores: slow (devagar), fast (rpido) ou a definio do tempo em milissegundos, um
segundo equivale a 1000.
O parmetro de callback opcional e uma funo que ser executada aps o mtodo hide() ou
show() ser concludo.
Figura 42 Cdigo de exemplo no Notepad++.

Descrio: Neste exemplo do fade o quadrado vermelho inicia escondido, o quadrado amarelo quando clicado
faz o fadeIn() do quadrado vermelho e o fadeOut() do quadrado amarelo. O quadrado verde quando clicado
desaparece at metade da transparncia, 0.5, e o boto faz a assinatura da pgina apagar e quando clicado de
novo aparece em 3 segundos.
62
Competncia 05
Atente que, para demonstrar o efeito de fadeIn() o elemento deveria estar escondido e para isso foi
colocada a linha 2.
5.3 Efeito de deslizar
Com jQuery voc pode criar um efeito deslizante em elementos. JQuery tem os seguintes mtodos
de slide:
slideDown() - Faz o elemento deslizar para baixo at aparecer completamente.

SlideUp() - Faz o elemento deslizar para cima at desaparecer completamente.
SlideToggle() - Alterna entre o deslizar para cima e para baixo o elemento.
Assim como o efeito de hide/show, o fade tambm tem os mesmos parmetros de velocidade e
callback.
Veja o exemplo na Figura 43.
Figura 43 cdigo de exemplo do efeito de slide.

Descrio: Os quadrados vermelho e amarelo quando clicados deslizam para cima at desaparecer. O quadrado
verde faz os quadrados vermelho e amarelo deslizarem para baixo at aparecer totalmente. A assinatura da
pgina faz o quadrado cinza desaparecer e quando clicado novamente faz aparecer.
63
Competncia 05
5.4 Efeito de animao
O mtodo da biblioteca jQuery animate() usada para criar animaes personalizadas. Sua sintaxe
:
$(selector).animate({parmetros}, velocidade, callback);
Sendo:
Parmetros a propriedade CSS que ser animada;

Velocidade opcional e dita a durao da animao, igual ao que j foi explicado
anteriormente;
Callback opcional e contm uma funo que ser executada quando o efeito terminar.
OBSERVAO: por padro, todos os elementos HTML tm uma posio esttica e no podem ser
movidos. Para manipular a posio, lembre-se de primeiro definir a propriedade de posio CSS do
elemento para relative, fixed ou absolute!
Figura 44 cdigo HTML e JavaScript com a demonstrao do efeito de animate().

Descrio: Quando o boto clicado, o quadrado vermelho deslocado para a esquerda, fica metade transparente
com a altura e largura em 150px. Observe que, para poder realizar o efeito de mover, precisamos definir a
propriedade position para relative no CSS, sublinhado em vermelho.
64
Competncia 05
5.5 Encadeamento de mtodos
At agora, temos escrito comandos jQuery um de cada vez (um aps a outro). No entanto, existe
uma tcnica chamada encadeamento, que nos permite executar vrios comandos jQuery, um aps
o outro, no(s) mesmo(s) elemento(s). Usando encadeamento, os navegadores no precisam
encontrar o(s) mesmo(s) elemento(s) mais de uma vez, sendo bem mais rpido.
Para encadear uma ao, basta anexar um efeito ao efeito anterior. O exemplo da Figura 49
encadeia os mtodos css(), slideUp() e slideDown(). O elemento "#ret0" muda para vermelho,
depois desliza para cima e, em seguida, desliza para baixo quando voc clica na assinatura da
pgina.
Figura 45 cdigo de exemplo de mtodos encadeados e resultado final no navegador.

Descrio: Ao clicar na assinatura da pgina, o quadrado cinza muda para vermelho, desliza para cima e depois para
baixo.
65
Competncia 06
6. Competncia 06 | Utilizar o Bootstrap Framework
Para finalizar, nesta competncia vamos conhecer um framework chamado Bootstrap. Um

framework uma ferramenta que ajuda no desenvolvimento de forma rpida de uma camada da
aplicao. No caso do Bootstrap, a camada de front-end. Ela j nos d algo pronto de HTML, CSS e
jQuery, s faltando colocarmos nosso contedo.
O Bootstrap foi desenvolvido na empresa Twitter por Mark Otto e Jacob Thornton utilizando os
padres abertos da W3C. Eles queriam padronizar os diversos componentes, tanto em
comportamento como estilo nas aplicaes da empresa. O projeto foi disponibilizado como cdigo
aberto e pode ser copiado e utilizado at em projetos comerciais.
No Bootstrap j temos vrios comportamentos bem definidos atravs da jQuery, ento, tambm
precisamos da jQuery para o Bootstrap funcionar. Ele tambm tem um estilo predefinido de bom
gosto, mas que voc pode modificar apenas acrescentando seu estilo CSS depois de todos os
arquivos.
Vamos fazer um exemplo do zero, mas caso voc queira aprender mais sobre este framework
pode acessar a pgina do Bootstrap traduzida pela Globo.com, que utiliza muito em seus
sites. O endereo est abaixo e a Figura 50 mostra o site em portugus do Brasil.
http://getbootstrap.com.br/
66
Competncia 06
Figura 46 Site do Bootstrap em portugus do Brasil.

Fonte: http://getbootstrap.com.br/
Descrio: navegador exibindo a pgina principal do site do Bootstrap do Brasil.
Aps baixarmos o framework, temos a rvore de arquivos da Figura 47. Ela contm trs pastas: a
pasta css tem os arquivos de estilo compactado e descompactado, como na jQuery; a pasta img
contm os cones utilizados pelo framework; e a pasta js contm os arquivos JavaScript que utilizam
a jQuery. Observe que a biblioteca jQuery no est entre eles. Devemos fazer o download e colocar.
O melhor lugar na pasta js. Assim, faa o download da jQuery, se no a tiver, e coloque na pasta
js.
Figura 47 rvore de arquivo do framework Bootstrap.

Descrio: Explorer do Windows exibindo a rvore de arquivos do projeto.
67
Competncia 06
Agora crie um arquivo HTML com a estrutura bsica que mostramos em competncia anterior.
Relacione esta pgina com a biblioteca jQuery, depois com o CSS e o JavaScript do BootStrap. O
cdigo para isso est na Figura 48.
Figura 48 contedo HTML da pgina de modelo.

Descrio: Arquivo index.html com a incluso do CSS e arquivos JavaScript do Bootstrap e da biblioteca jQuery.
O Bootstrap j possui diversos componentes com CSS e JavaScript prontos. Para utiliz-los, apenas
devemos saber suas estruturas HTML e nomes de classes. Toda a documentao do Bootstrap est
em portugus e pode ser consultada no link abaixo. Nele voc pode ver como o componente
funciona, sua aparncia e o cdigo para acrescent-lo em sua pgina. Uma vez que relacionamos
corretamente o arquivo HTML com os arquivos necessrios do framework, podemos copiar e colar
em nossa pgina qualquer componente. Tenha curiosidade e experimente. A Figura 49 possui uma
captura de tela da pgina explicativa dos componentes.
http://getbootstrap.com.br/components/
68
Competncia 06
Figura 49 navegador exibindo a pgina de componentes do site do Bootstrap do Brasil.

Fonte: http://getbootstrap.com.br/components/
Descrio: Pgina dos componentes do Bootstrap da Globo.com toda em portugus do Brasil, com explicao
dos componentes, exemplos e cdigo.
Vamos utilizar alguns desses componentes. Por exemplo, um formulrio de login. A Figura 50
mostra o cdigo HTML do formulrio de login, com <imput> para digitar o e-mail e a senha, um
elemento checkbox e um boto para enviar os dados. Seguindo os cdigos de exemplo da pgina
explicativa dos componentes, inclumos os atributos class com os valores apropriados. So esses
valores de class que adicionam o poder do framework.
69
Competncia 06
Figura 50 cdigo HTML com o formulrio da pgina de exemplo.

Descrio: Cdigo do formulrio, com os atributos class com os valores que adicionam o poder do bootstrap.
Na Figura 51 temos a exibio da pgina no navegador. Observe como a pgina j aparece estilizada
corretamente.
Figura 51 Resultado no navegador j formatado pelo Bootstrap.

Fonte: Prprio autor.
Descrio: navegador exibindo o resultado da formatao do Bootstrap.
70
Competncia 06
Vimos rapidamente um exemplo de como utilizar o Bootstrap para acelerar a construo de um

site. Mas para utiliz-lo adequadamente voc deve conhecer bem o framework, ento, leia,
pesquise. Voc ser um profissional melhor quanto maior for o tempo investido em aprendizado.
71
Concluso
Chegamos ao final da segunda parte de nosso caderno de estudos. Foi um excelente investimento
de tempo que voc fez ao se dedicar a este curso, mas para se tornar um profissional ser
necessrio mais pesquisa e investimento, afinal esta rea de criao para web gigantesca.
O autor do livro Fora de Srie Outliers, Malcoln Gladwell, cita uma pesquisa sobre pessoas que so
consideradas profissionais em suas reas. Na pesquisa ele explica que para chegar a um nvel
profissional so necessrias 10.000 horas dedicadas de forma apaixonada naquilo que se faz.
Gostando do que faz, voc presta mais ateno e entende bem melhor do que pessoas que
estudam por obrigao. Dessa forma, fcil chegar s 10.000 horas. Pois . Sei que so muitas
horas estudando, testando cdigo, fuando e pesquisando sobre os assuntos vistos, mas se voc se
apaixonar pelo tema, no ser um martrio, ser sim, bem divertido.
Espero que voc tenha gostado, tanto quanto eu, de fazer este curso.
Boa sorte ao entrar nesta maravilhosa rea da profisso de web designer.
72
Referncias
ROBBINS, Jeninifer Niederst. Aprendendo Web Design: Guia para iniciantes, 3 edio Porto
Alegre: Bookman, 2010.
KALBACH, James. Design de Navegao Web: Otimizando a experincia do usurio, Porto Alegre:
Bookman, 2009.
ZEMEL, Tcio. Web design responsivo: pginas adaptveis para todos os dispositivos, So Paulo:
Casa do Cdigo, 2012.
SILVA, Mauricio Samy. HTML 5: A linguagem de marcao que revolucionou a WEB, So Paulo:
Novatec Editora, 2011.
SILVA, Mauricio Samy. CSS3: Desenvolva aplicaes web profissionais com o uso dos poderosos
recursos de estilizao das CSS3, So Paulo: Novatec Editora, 2012.
SILVA, Mauricio Samy. Construindo sites com CSS e (X)HTML: Sites controlados por folhas de estilo
em cascata, So Paulo: Novatec Editora, 2008.
SILVA, Mauricio Samy. Criando sites com HTML: Sites de alta qualidade com HTML e CSS, So Paulo:
SILVA, Mauricio Samy. JQuery - A Biblioteca do Programador Javascript, 2 Edio So Paulo:

GLADWELL, Malcolm. Fora de srie: outliers. Rio de Janeiro: Sextante, 2008.
73
Minicurrculo do Professor
Ewerton Mendona formado em Sistemas de Informao pela UPE e Design pela UFPE, com
mestrado em Cincia da Computao pela UFPE. Atualmente, professor da Faculdade de Cincias
e Letras de Caruaru FAFICA e Unifavip Devry Brasil. Possui experincia na rea de
desenvolvimento WEB e design grfico desde 1998.
74

Caderno INFO (Web Design Avançado 2017.1)

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Caderno INFO (Web Design Avançado 2017.1)

Caricato da

Copyright:

Formati disponibili

Web Design Avanado

Curso Tcnico em Informtica

Reviso de Lngua Portuguesa

Contedo produzido para os Cursos Tcnicos da Secretaria Executiva de Educao

Inclui referncias bibliogrficas.

1. Web Design. 2. Engenharia Web. 3. Javascript. 4.

1.Competncia 01 | Conhecer os Fundamentos do Javascript ......................................................... 10

1.1 Internet ...............................................................................................................................................10

1.2 Modelo Cliente/Servidor......................................................................................................................12

1.3 Padres Web .......................................................................................................................................13

1.4 O que Programao ..........................................................................................................................14

1.6 Document Object Model......................................................................................................................16

1.8 Testando .............................................................................................................................................18

1.9 Primeiro cdigo ...................................................................................................................................19

1.10 O que pode ser feito em Javascript ....................................................................................................20

1.11 Onde escrever o cdigo Javascript .....................................................................................................20

1.12 Sada de resultado JavaScript .............................................................................................................21

2.Competncia 2 | Conhecer as Tcnicas de Programao Procedural com o Javascript ................. 23

2.1 Sintaxe ................................................................................................................................................23

2.2 Literais e variveis ...............................................................................................................................23

2.3 Declarao de variveis e atribuio de valores ...................................................................................24

2.4 Operadores e expresses.....................................................................................................................24

2.5 Identificadores ....................................................................................................................................25

2.6 Operadores comparativos ...................................................................................................................26

2.7 Operadores lgicos ..............................................................................................................................27

2.8 Precedncia .........................................................................................................................................28

2.9 Estruturas condicionais ........................................................................................................................28

2.9.1 If...else ..............................................................................................................................................29

2.10 Estruturas de repetio......................................................................................................................34

2.10.1 For ..................................................................................................................................................34

2.10.2 While ..............................................................................................................................................37

2.10.3 Do...while .......................................................................................................................................38

2.11 Endentando o cdigo .........................................................................................................................39

3.Competncia 03 | Conhecer as Tcnicas de Programao Orientada a Objetos com o Javascript . 40

3.1 Primitivas Javascript ............................................................................................................................40

3.2 Objetos Javascript................................................................................................................................41

3.3 Propriedades de um objeto .................................................................................................................41

3.4 Mtodos de um objeto ........................................................................................................................41

3.5 Criando um objeto ...............................................................................................................................42

3.5.1 Criando um objeto literal ..................................................................................................................42

3.5.2 Criando com o comando new ...........................................................................................................42

3.5.3 Criando com o construtor do objeto .................................................................................................43

3.6 A palavra-chave this ............................................................................................................................43

3.7 Manipulando propriedades de um objeto ............................................................................................44

3.8 Manipulando mtodos de um objeto ...................................................................................................45

3.9 Prototype ............................................................................................................................................45

4. Competncia 04 | Conhecer os Fundamentos de Jquery ............................................................. 46

4.1 Adicionando a biblioteca em sua pgina ..............................................................................................47

4.1.1 Fazendo o download do JQuery ........................................................................................................47

4.1.2 Utilizando um repositrio .................................................................................................................49

4.2 sintaxe JQuery .....................................................................................................................................50

4.3 Evento ready .......................................................................................................................................50

4.4 Seletores .............................................................................................................................................51

4.4.2 Selecionando pelo atributo ID ...........................................................................................................52

4.4.3 Selecionando pelo atributo class .......................................................................................................53

4.4.4 Exemplos de seletores ......................................................................................................................53

4.5 Eventos JQuery ....................................................................................................................................54

4.6 Obtendo a tag, o texto e o valor de um campo ....................................................................................56

4.7 Obtendo o valor de um atributo ..........................................................................................................57

4.8 Definindo contedo .............................................................................................................................58

5.Competncia 05 | Utilizar os Efeitos do JQuery ............................................................................ 60

5.1 Esconder (hide) e mostrar (show) ........................................................................................................60

5.1.1 Efeito toggle .....................................................................................................................................61