Escolar Documentos
Profissional Documentos
Cultura Documentos
Ewerton Mendona
Professor Autor
Ewerton Mendona
Design Instrucional
Deyvid Souza Nascimento
Maria de Ftima Duarte Angeiras
Renata Marques de Otero
Terezinha Mnica Sincio Beltro
Diagramao
Izabela Cavalcanti
Coordenao
Anderson Elias
Coordenao Executiva
George Bento Catunda
Coordenao Geral
Paulo Fernando de Vasconcelos Dutra
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.
CDU 004.5
Sumrio
Introduo ........................................................................................................................................ 8
1.5 Javascript.............................................................................................................................................15
1.7 IDE.......................................................................................................................................................17
5
2.9.2 Switch...case .....................................................................................................................................31
6
4.4.1 Selecionando Tag ..............................................................................................................................51
Concluso ........................................................................................................................................ 72
Referncias ..................................................................................................................................... 73
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
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.
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.
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
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.
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
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.
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
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
Fonte: Ewerton Mendona.
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.
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.
1.7 IDE
Agora que voc j conhece um pouco sobre a web, vamos colocar a mo na massa. Mas que
17
Competncia 01
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.
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
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
O JavaScript manipula o navegador e a pgina web. Ele tambm possui algumas caractersticas a
mais.
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.
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.
21
Competncia 01
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
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.
2.1 Sintaxe
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
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.
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
(=).
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
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.
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.
2.5 Identificadores
Identificadores so nomes. Utilizamos identificadores para nomear variveis, funes e rtulos. Mas
devemos seguir algumas regras para nomear identificadores.
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.
26
Competncia 02
Operador Descrio
> Maior que
< Menor que
>= Maior que ou igual
<= Menor que ou igual
== Igual
!= Diferente
Tabela 1 Tabela com os operadores comparativos.
Fonte: Ewerton Mendona.
Descrio: tabela que relaciona os operadores comparativos e sua descrio.
Operador Descrio
&& Operador lgico e
|| Operador lgico ou
! Operador lgico no, inverte o valor lgico.
Tabela 2 Tabela com os operadores lgico.
Fonte: Ewerton Mendona.
Descrio: tabela que relaciona os operadores lgicos e sua descrio.
! (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.
Fonte: Ewerton Mendona.
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.
Fonte: Ewerton Mendona.
Descrio: Tabela de precedncia de operadores com os respectivos itens
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
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.
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 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.
30
Competncia 02
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.
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
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.
Fonte: Ewerton Mendona.
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..
33
Competncia 02
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.
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
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
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.
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.
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 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
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.
38
Competncia 02
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
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
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:
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.
Propriedade Valor
primeiroNome Fulano
ultimoNome de Tal
idade 30
matriculado true
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.
41
Competncia 03
Com o JavaScript, voc pode definir e criar seus prprios objetos. Existem diferentes maneiras de
criar objetos:
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:
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.
Fonte: Ewerton Mendona.
Descrio: cdigo da declarao e criao de um objeto pelo comando new no Notepad++.
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.
Fonte: Ewerton Mendona.
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.
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
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.
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.
44
Competncia 03
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.
Fonte: Ewerton Mendona.
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
45
Competncia 04
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.
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.
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.
47
Competncia 04
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
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
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.
Figura 31 Exemplo de cdigo de acesso a elementos HTML e executando sobre eles a ao de esconder.
Fonte: Ewerton Mendona.
Descrio: cdigo demonstrando a seleo de elementos no HTML e a execuo de ao sobre eles.
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:
4.4 Seletores
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
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.
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
A seleo pelo atributo class realizada colocando na frente do valor um ponto. Observe no
exemplo da Figura 35.
53
Competncia 04
$("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.
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.
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:
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.
Fonte: Ewerton Mendona.
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.
55
Competncia 04
O mtodo on() atribui um ou mais manipuladores de eventos para os elementos selecionados. Veja
o exemplo na Figura 36.
Trs mtodos simples da jQuery, mas teis, para manipulao DOM so:
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
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().
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
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.
58
Competncia 04
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
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.
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 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
Quando os quadrados coloridos so clicados eles desaparecem. Quando o boto clicado, todos
aparecem. Observe o tempo de desaparecimento configurado para cada um.
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.
Com jQuery voc pode fazer desaparecer ou aparecer um elemento de forma gradual. JQuery tem
61
Competncia 05
Assim como o efeito de hide/show, o fade tambm tem os mesmos parmetros de velocidade e
callback.
O parmetro de callback opcional e uma funo que ser executada aps o mtodo hide() ou
show() ser concludo.
62
Competncia 05
Atente que, para demonstrar o efeito de fadeIn() o elemento deveria estar escondido e para isso foi
colocada a linha 2.
Com jQuery voc pode criar um efeito deslizante em elementos. JQuery tem os seguintes mtodos
de slide:
Assim como o efeito de hide/show, o fade tambm tem os mesmos parmetros de velocidade e
callback.
63
Competncia 05
O mtodo da biblioteca jQuery animate() usada para criar animaes personalizadas. Sua sintaxe
:
Sendo:
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!
64
Competncia 05
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.
65
Competncia 06
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
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.
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.
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
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
Na Figura 51 temos a exibio da pgina no navegador. Observe como a pgina j aparece estilizada
corretamente.
70
Competncia 06
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.
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:
Novatec Editora, 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