Escolar Documentos
Profissional Documentos
Cultura Documentos
Era uma vez... Um rei! meus pequenos leitores diriam imediatamente. No,
crianas, vocs esto errados. Era uma vez um pedao de madeira...
As Aventuras de Pinquio
Voc pode fazer muita coisa sem JavaScript. Usando HTML (Hypertext Markup
1
Language) , possvel produzir documentos complexos que descrevem de maneira complicada o contedo de uma pgina e o significado desse contedo
nos mnimos detalhes. Usando CSS (Cascading Style Sheets), voc pode apresentar esse contedo de muitas maneiras, com variaes to sutis quanto uma
nica cor ou to notveis quanto substituir texto por uma imagem.
Contudo, independentemente de quanto voc melhore o aspecto, HTML e CSS
s podem chegar beleza esttica de um manequim de loja de departamentos
ou, na melhor das hipteses, a uma monstruosidade animada eletronicamente
que cambaleia quando algo se move nas proximidades. Com JavaScript, voc
pode dar vida a esse boneco desajeitado, elevando-se, como seu criador, de um
humilde vendedor a mestre em Web design!
Neste livro, vamos nos referir a HTML e a XHTML apenas como HTML. O que voc escolhe ca
por sua conta e no tem muito a ver com JavaScript. O cdigo HTML que apresentaremos neste
livro ser XHTML 1.0 Strict vlido.
26 S JavaScript
Mas o fato de sua nova criao ter o caminhar gracioso de uma modelo ou o
andar arrastado do monstro do Dr. Frankenstein depende tanto da qualidade de
suas origens HTML e CSS quanto do cdigo JavaScript que deu vida a ela.
Portanto, antes de aprendermos a operar milagres, vamos examinar como construmos sites de boa aparncia por dentro e por fora e ver como JavaScript se
encaixa nesse quadro.
Separe-os
No faz muito tempo, Web designers profissionais empilhavam alegremente
cdigo HTML, CSS e JavaScript em um nico arquivo, davam a ele o nome de
2
index.html e chamavam isso de pgina Web. Ainda possvel fazer isso, mas
esteja preparado para ouvir xingamentos dos seus colegas.
27
Apresentao
Contedo
Comportamento
Mas perceber isso uma coisa, fazer outra especialmente se voc no viciado em computador. Eu sou viciado em computador e fico tentado a fazer a coisa
errada o tempo todo.
Estou editando alegremente o cdigo HTML que descreve o contedo de uma
pgina Web, quando subitamente comeo a pensar em como aquele texto ficaria
bem se tivesse um sombreado cinza diferente, se fosse deslocado um pouco para
a esquerda e se tivesse no fundo aquela fotocpia hilria de meu rosto que fiz
na ltima festa do escritrio da SitePoint. Distrado que sou, quero fazer essas
alteraes imediatamente.
28 S JavaScript
Agora, o que mais fcil: abrir um arquivo CSS separado para modificar a folha
de estilos da pgina ou apenas digitar essas propriedades de estilo no cdigo
HTML que j estou editando?
Assim como se comportar nas funes do trabalho, manter os tipos de cdigo
que voc escreve separados exige disciplina. Uma vez que voc entenda as vantagens disso, poder aplicar a fora de vontade necessria para se manter no modo
correto e apropriado de fazer as coisas.
Trs camadas
Manter diferentes tipos de cdigo o mais separado possvel recomendvel em
qualquer tipo de programao. Isso torna mais fcil reutilizar partes desse cdigo
em projetos futuros, reduz a quantidade de cdigo duplicado que voc acaba escrevendo e facilitar encontrar e corrigir problemas meses e anos mais tarde.
No que diz respeito Web, h mais um motivo para manter o cdigo separado:
isso permite satisfazer as muitas maneiras diferentes pelas quais as pessoas acessam as pginas Web.
Dependendo do seu pblico, a maioria de seus visitantes pode utilizar navegadores desktop bem equipados, com suporte de ponta para CSS e JavaScript, mas
muitos podem estar sujeitos a polticas de TI corporativas que os obrigue a utilizar navegadores mais antigos ou a navegar com certos recursos (como JavaScript)
desativados.
Os usurios deficientes visuais frequentemente navegam usando software leitor
ou ampliador de tela e, para eles, seu projeto visual refinado pode mais atrapalhar do que ajudar.
Alguns usurios nem mesmo visitaro seu site, preferindo ler feeds de contedo
em RSS ou formatos semelhantes, se voc os oferecer. Na hora de construir esses
feeds, voc desejar enviar o contedo HTML para esses usurios sem qualquer
lixo JavaScript ou CSS.
O segredo para favorecer a maior gama possvel de visitantes de seu site pensar
na Web em termos de trs camadas, que convenientemente correspondem aos
trs tipos de cdigo mencionados anteriormente. Essas camadas esto ilustradas
na Figura 1.2.
29
nto)
e
m
a
t
por Script
Com ( Java
ta) o
n
e
s
e
Apr (CSS
Riqueza da
experincia
do usurio
dMoL)
e
t
n
o
C (HT
Figura 1.2 As trs camadas da Web.
30 S JavaScript
Isso pode assumir a forma de cdigo CSS em linha aplicado com o atributo
style:
<p>Faa o que for, <a href="666.html" style="color: red;">mas no
clique neste link</a>!</p>
Isso tambm pode incluir a vergonha secreta de muitos Web designers bem-intencionados estilos CSS aplicados com nomes de classe de apresentao:
<p>Faa o que for, <a href="666.html" class="red">mas no clique
neste link</a>!</p>
Simplique, Estpido.
31
O link um aviso? HTML no tem uma tag para descrever um aviso (warning),
mas voc poderia escolher um nome de classe CSS que transmitisse essa informao:
<p>Faa o que for, <a href="evil.html" class="warning">mas no clique
neste link</a>!</p>
Evidentemente, voc pode levar essa estratgia longe demais. Alguns designers
confundem tags com <h1> como se fosse de apresentao e tentam remover esse
cdigo de apresentao do cdigo HTML:
<p class="heading"> Um cabealho com crise de identidade</p>
Na verdade, a informao de apresentao que voc deve manter fora do documento a fonte, o tamanho e a cor com que um cabealho (heading) deve ser
exibido. O fato de um texto ser um cabealho faz parte do contedo e, como tal,
deve ser refletido no cdigo HTML. Assim, o cdigo a seguir est perfeitamente
correto:
<h1>Um cabealho em paz consigo mesmo</h1>
32 S JavaScript
Os estilos em linha so tentadores pelos motivos que explicamos anteriormente: voc pode aplic-los no contedo medida que o cria, sem precisar
trocar de mecanismo e editar uma folha de estilos separada. Porm, como
vimos na seo anterior, voc desejar evitar os estilos em linha se quiser
manter seu cdigo HTML significativo para aqueles que no podem v-los.
Estilos incorporados
<style type="text/css">
.warning {
color: red;
}
</style>
Os estilos incorporados mantm sua marcao limpa, mas vinculam seus estilos a um nico documento. Na maioria dos casos, voc desejar compartilhar
seus estilos por vrias pginas de seu site; portanto, melhor evitar essa estratgia tambm.
33
Estilos externos
<link rel="stylesheet" href="styles.css" />
styles.css
.warning {
color: red;
}
Os estilos externos so os melhores, pois permitem que voc compartilhe estilos entre vrios documentos, reduzem o volume de cdigo que os navegadores precisam baixar e tambm permitem modificar a aparncia de seu site sem
o trabalho de editar HTML.
Mas voc sabia de tudo isso, certo? Afinal, este um livro sobre JavaScript;
portanto, vamos falar sobre o cdigo JavaScript que est em suas pginas.
34 S JavaScript
CDATA?
Se voc estiver se perguntando que geringona essa depois da tag <script> e que precede a tag </script>, isso o que necessrio para incorporar legitimamente cdigo
JavaScript em um documento XHTML sem confundir os navegadores Web que no entendem XHTML (como o Internet Explorer).
Se voc escrever sua pgina com HTML em vez de XHTML, poder se dar bem com esta
sintaxe muito mais simples:
<script type="text/javascript">
Cdigo JavaScript aqui
</script>
script.js (excerto)
cdigo JavaScript aqui
35
A maneira certa
Ento, qual a verdadeira importncia de tudo isso? Afinal, as pessoas tm construdo sites com HTML, CSS e JavaScript misturadas h anos, e, para a maioria
das pessoas que navegam na Web, esses sites tm funcionado.
Quando voc aprende JavaScript, mais do que nunca importante saber fazer da
maneira correta, com certeza. De longe, JavaScript a mais poderosa das trs linguagens que voc usar para projetar sites e, como tal, ela oferece uma liberdade
sem precedentes, de modo que possvel fazer uma baguna completa.
Como exemplo, se voc gostar muito, muito de JavaScript, poder chegar a ponto
de colocar tudo contedo, apresentao e comportamento no cdigo JavaScript. J vimos isso e no nada bonito especialmente quando aparece um
navegador com JavaScript desativado.
Ainda mais importante o fato de que JavaScript a nica dessas trs linguagens que tem a capacidade de travar o navegador, tornando-o sem resposta para
4
o usurio.
Portanto, no restante deste livro, faremos o mximo para mostrar a voc a maneira certa de usar JavaScript, no apenas porque isso mantm seu cdigo organizado, mas porque ajuda a manter a Web funcionando da maneira que foi pensada
tornando o contedo acessvel para o mximo de pessoas possvel, independentemente do navegador que utilizem.
Bibliotecas JavaScript
Conforme mencionamos, uma das vantagens de manter os diferentes tipos de
cdigo separados que isso torna mais fcil pegar cdigo escrito para um site e
reutiliz-lo em outro. Certos manacos por JavaScript (que sero chamados daqui
em diante de pessoas) montaram vastas bibliotecas de cdigo JavaScript til e
no invasivo que voc pode baixar gratuitamente e usar em seus sites.
Ao longo deste livro, construiremos cada um dos exemplos a partir do zero
todo o cdigo JavaScript necessrio pode ser encontrado aqui, nestas pginas.
Entretanto, como nem sempre h tempo de fazer isso no mundo real e como as
bibliotecas esto se tornando rapidamente uma parte importante no cenrio Ja-
36 S JavaScript
vaScript, veremos tambm como as bibliotecas JavaScript populares so eficientes em determinados casos.
Eis as bibliotecas que usaremos neste livro:
Prototype
http://www.prototypejs.org/
script.aculo.us
http://script.aculo.us/
http://developer.yahoo.com/yui/
Dojo
http://dojotoolkit.org/
jQuery
http://jquery.com/
Mootools
http://mootools.net/
Vamos comear!
Chega de conversa voc comprou este livro para aprender JavaScript, certo? (Se
no foi por isso, ficar um pouco desapontado.) HTML e CSS puras so legais,
mas hora de mergulhar na terceira camada da Web: o comportamento.
Vire a pgina e se prepare para comear a usar cdigo JavaScript interessante (e
no invasivo).
http://www.sitepoint.com/forums/