Javascript

Aprendendo
JavaScript
Shelley Powers
Novatec
CAPTULO 1
Ol, JavaScript!
Um motivo pelo qual JavaScript to popular ser relativamente fcil de ser acrescentado a uma pgina web. Tudo que voc precisa fazer incluir pelo menos um elemento HTML script na pgina, especificar "text/javascript" para o atributo type e adicionar qualquer JavaScript que quiser:
<script type="text/javascript"> ... algum cdigo-fonte JavaScript </script>
No necessria instalao e voc tambm no precisa ter que lidar com configuraes estranhas de caminhos (paths) de alguma biblioteca. JavaScript funciona imediatamente e na maioria dos navegadores web, incluindo os quatro mais importantes: Firefox, Internet Explorer, Opera e Safari. Tudo o que voc tem que fazer adicionar um bloco de scripting e j est em ao. Tradicionalmente, voc adiciona blocos escritos em JavaScript ao elemento head (cabealho) do documento (delimitado por tags head de abertura e fechamento do cabealho), mas voc tambm pode inclu-los no elemento body ou at em ambas as sees. Todavia, adicionar um script ao corpo geralmente no considerada uma boa tcnica, j que dificulta encontrar esse script quando voc for modific-lo no futuro. A exceo a essa regra quando o desempenho for uma preocupao, o que ser visto no captulo 6. Todos os exemplos neste livro adicionam blocos de scripting apenas seo head (cabealho) da pgina web.
Hello World!
Tambm comum que o primeiro exemplo ao se aprender uma nova linguagem de programao seja conhecido como Hello World uma aplicao muito simples que imprima essa mensagem na interface do usurio, seja qual esta for. No caso de JavaScript, a interface do usurio a pgina web. O exemplo 1.1 mostra uma pgina web com um bloco em JavaScript que, usando apenas uma linha escrita nessa linguagem, abre uma pequena janela normalmente chamada de caixa de alerta com as palavras Hello World!
19
20
Aprendendo JavaScript
Exemplo 1.1 A menor aplicao em JavaScript: Hello World!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Hello, World!</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> alert("Hello, World!"); </script> </head> <body> </body> </html>
Copiar o exemplo 1.1 para um arquivo e abri-lo em navegadores web que suportem JavaScript deve resultar em uma caixa de alerta onde se l Hello World! . Caso isso no acontea, voc deve se assegurar de que JavaScript esteja habilitado.
Verses mais antigas do Internet Explorer tambm desabilitam scripts se voc abrir a pgina pelo menu File Open em vez de usar um endereo de pgina web como http://<algum_domnio.com>/index.html.
Essa aplicao, embora muito limitada em funcionalidade, demonstra um pouco os componentes mnimos de uma aplicao JavaScript: voc tem uma pgina web, um elemento script e uma linha em JavaScript. Experimente voc mesmo, exceto editar a string substituindo a palavra World por seu nome. claro que, se voc quiser fazer mais do que simplesmente imprimir uma mensagem no navegador, precisar estender de alguma forma esse exemplo.
Hello World! novamente

Outra variao da aplicao Hello World! escreve a mensagem realmente na pgina web, em vez de em uma caixa de alerta. Para fazer isso, usa quatro componentes importantes de JavaScript: o objeto interno document do navegador, variveis JavaScript, uma funo JavaScript e um manipulador de eventos. Por incrvel que parea, voc ainda pode codificar a aplicao em sete linhas de JavaScript, conforme mostra o exemplo 1.2.
Exemplo 1.2 Hello World! exibido na pgina web

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Captulo 1 Ol, JavaScript!

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Hello, World!</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> function hello() { // diz al para o mundo var msg = "Hello, World!"; document.open(); document.write(msg); document.close(); } </script> </head> <body onload="hello()"> <p>Hi</p> </body> </html>
21
Embora o exemplo 1.2 seja uma aplicao muito pequena, expe diversos componentes bsicos da maioria das aplicaes em JavaScript em uso atualmente, cada um dos quais merecendo um exame mais detalhado. No resto deste captulo, faremos esse exame mais de perto, um componente de cada vez.
Ainda no coberto neste captulo a Document Type Declaration (DOC-TYPE) usada nos exemplos 1.1 e 1.2, que pode influenciar como diferentes navegadores processam JavaScript. Abordarei o impacto de um DOCTYPE no captulo 6.
A tag script
JavaScript frequentemente usado dentro do contexto de outra linguagem, como as linguagens de marcao HTML e XHTML. Entretanto, voc no pode simplesmente colocar JavaScript na marcao onde e como quiser. No exemplo 1.2, o elemento script contm o cdigo JavaScript. Isso informa o navegador o que, quando encontrar a tag de abertura do elemento de script, no deve processar seu contedo como HTML ou XHTML. Nesse momento, o controle sobre o contedo passado para o mecanismo de scripting do navegador. Nem todos os scripts existentes dentro de pginas web so JavaScript, e a tag de abertura do elemento script contm um atributo definindo o tipo do script. Nesse exemplo, este apresentado como text/javascript. Entre outros valores permitidos para o atributo type esto:
22
text/ecmascript text/jscript text/vbscript text/vbs O primeiro valor type listado especifica que o script interpretado como ECMAScript, baseado no padro de scripting ECMA-262. O valor a seguir faz com que o script seja interpretado como JScript, uma variao de ECMAScript que a Microsoft implementa no Internet Explorer. Os dois ltimos valores so para o VBScript da Microsoft, uma linguagem de scripting completamente diferente. Todos esses valores de type descrevem o tipo MIME do contedo. MIME, ou Multipurpose Internet Mail Extension, uma forma de identificar como o contedo est codificado (p. ex., text) e seu formato especfico (javascript). Fornecendo um tipo MIME, os navegadores capazes de processar o tipo o fazem, enquanto outros navegadores pulam a seo. Isso garante que apenas aplicaes que possam processar o script realmente o acessem. Verses anteriores da tag script recebiam um atributo language, que era usado para designar a verso da linguagem, assim como o tipo: javascript1.2 em comparao a javascript 1.1. Entretanto, o uso de language ficou obsoleto em HTML 4.01, embora ainda aparea em muitos exemplos de JavaScript. A est uma das primeiras tcnicas multinavegadores.
Uso o termo multinavegadores para denotar JavaScript que funciona em todos os navegadores-alvo, ou que usa funcionalidades para gerenciar quaisquer diferenas de modo que a aplicao funcione em mltiplos navegadores .
Anos atrs, ao trabalhar com problemas relacionados a compatibilidade de mltiplos navegadores, no era incomum que se criasse um script especfico para cada navegador em uma seo ou arquivo separado e depois se usasse o atributo language para assegurar que apenas um navegador compatvel pudesse acessar o cdigo. Examinando alguns de meus exemplos antigos (por volta de 1997), encontrei o seguinte:
<script src="ns4_obj.js" language="javascript1.2"> </script> <script src="ie4_obj.js" language="jscript"> </script>
A filosofia dessa abordagem era que apenas um navegador capaz de processar JavaScript 1.2 poderia pegar o primeiro arquivo (principalmente o Netscape Navigator 4.x na poca) e apenas um navegador capaz de processar JScript poderia pegar o
23
segundo arquivo (Internet Explorer 4). Pouco prtico? Claro, mas tambm funcionou nos primeiros anos de tentativas de se lidar com efeitos de pginas dinmicas frequentemente falhados em mltiplos navegadores. Outros atributos de scripts vlidos so src, defer e charset. O atributo charset define a codificao de caracteres usada com o script. Geralmente no estabelecido a menos que voc precise de uma codificao diferente de caracteres da que estiver definida para o documento. Um atributo que pode ser bastante til defer. Se voc configurar defer com um valor de "defer", isso indica ao navegador que o script no ir gerar qualquer contedo de documento e que o navegador pode continuar processando o resto do contedo da pgina, retornando para o script quando a pgina tiver sido processada e exibida:
<script type="text/javascript" defer="defer"> ... nenhum contedo sendo gerado </script>
O atributo defer pode ajudar a acelerar o carregamento da pgina quando voc tiver um bloco maior de JavaScript ou incluir uma biblioteca maior de JavaScript. O ltimo atributo, src, tem a ver com o carregamento de arquivos JavaScript externos, o que voc ver mais adiante. Primeiro, porm, examinaremos mais de perto o atributo de tipo text/javascript e o que isso significa para cada navegador.
Adio de script ao corpo do documento

Mencionei anteriormente que o elemento script geralmente adicionado ao elemento head de uma pgina web porque mais fcil realizar a manuteno de pginas web quando os elementos script esto organizados em um s local. Todavia, h um motivo vlido para incluir scripts dentro do elemento body: o desempenho. Quando scripts so adicionados ao elemento head, o resto do documento no precisa ser trazido at que o script tenha terminado de ser carregado porque os navegadores carregam muitos recursos em paralelo do mesmo domnio. Alm disso, o navegador pode ter que esperar para exibir o resto da pgina porque pode haver um elemento document.write dentro do script. Se os arquivos JavaScript forem grandes, as imagens da pgina web e outras informaes importantes podem demorar, talvez alm do vivel. Mesmo o uso do atributo defer no elemento script no ter impacto nos problemas de carregamento paralelo ou renderizao da pgina. No livro High Performance Web Sites (OReilly), Steve Souders recomenda a colocao dos elementos script na parte de baixo de um documento, para permitir que o resto da pgina web seja carregada primeiro, antes do script. Os desenvolvedores de aplicaes web mais complexas priorizam essa abordagem. A desvantagem de se colocar o script no final da pgina que o script fica mais difcil de ser encontrado, e a manuteno das pginas, mais difcil.
24
Aprendendo JavaScript Qual a melhor abordagem? Descobri que a maioria dos websites no incorpora bibliotecas JavaScript que sejam to grandes que a colocao de scripts se torne um problema, no em comparao importncia de ser capaz de garantir que as pginas sejam mais fceis de manter. Ainda assim, se voc desenvolver bibliotecas JavaScript mais complexas, talvez deva considerar uma mudana para scripts baseados em rodaps. Independentemente da abordagem que voc usar, seja consistente: coloque seus scripts sempre no elemento head ou sempre na parte de baixo do elemento body.
JavaScript versus ECMAScript versus JScript

O exemplo 1.2 usava o tipo text/javascript com o elemento script, e a aplicao funciona no Firefox, IE, Opera e Safari. Entretanto, nem todos os navegadores implementam JavaScript. Embora o nome JavaScript tenha se tornado onipresente para scripting baseados em navegadores no lado cliente, apenas Mozilla e seu popular navegador, o Firefox, implementam JavaScript, que o nome real de uma instncia de uma especificao de scripting mais ampla, a ECMAScript. ECMAScript , na verdade, uma especificao de scripting no lado cliente que abrange todo o mercado. A verso mais recente de ECMAScript ECMA-262, Edio 3. Contudo, a maioria dos navegadores reverencia o tipo text/javascript, alm do mais apropriado (embora muito menos comum) text/ecmascript, embora possam existir diferenas, at mesmo significativas, em exatamente o que cada navegador ou outra aplicao suporta.
ECMAScript no se restringe apenas a navegadores: o suporte ActionScript da Adobe em Flash baseado em ECMA-262, Edio 3.
Todos os navegadores usados para testar as aplicaes deste livro Firefox 3.x, Safari 3.x, Opera 9.x e IE8 suportam a maioria, seno toda, ECMA-262, Edio 3, e at uma parte da prxima gerao de ECMAScript, ECMAScript 3.1 (e posteriores). Neste livro, farei observaes sempre que houver diferenas nos navegadores ou fornecerei formas para contornar problemas relacionados ao uso em mais de um navegador. Tambm usarei o text/javascript mais familiar para o atributo de tipo do elemento script, conforme mostrado no exemplo 1.2.
25
Definio de funes em JavaScript

No exemplo 1.2, a parte de JavaScript que realmente cria a mensagem Hello, World! existe dentro de uma funo chamada hello. Funes so formas de modularizar uma ou mais linhas de script de forma que possam ser executadas uma ou mais vezes. Voc tambm pode usar funes para controlar quando o script modularizado executado. Por exemplo, no exemplo 1.2, a funo chamada apenas aps a pgina web ser carregada. Aqui est a sintaxe tpica para a criao de uma funo:
function nomeFuno(parmetros) { ... }
A palavra-chave function seguida pelo nome da funo e por parnteses contendo zero ou mais parmetros (argumentos da funo). No exemplo 1.2, no h parmetros, mas veremos muitos exemplos com parmetros por todo o livro. O script que constitui a funo fica entre as chaves. Eu digo tpica quando forneo a sintaxe da funo porque essa no a nica sintaxe que voc pode usar para criar uma funo. Entretanto, veremos outras variaes comeando pelo captulo 5, que cobre funes JavaScript em detalhes. claro que, assim que voc tiver uma funo, tem que cham-la para executar o script que ela contm, o que nos leva aos manipuladores de eventos.
Manipuladores de eventos
Na tag body de abertura do exemplo 1.2, um atributo HTML chamado onload atribudo funo hello. O atributo onload o que conhecido como manipulador de eventos. Esse manipulador de eventos, e outros, parte do modelo de objetos associado que cada navegador fornece. Voc usa manipuladores de eventos para mapear uma funo para um evento especfico de modo que, quando o evento ocorrer, o script da funo seja processado. Um dos manipuladores de eventos mais usados o recm-demonstrado, o evento onload anexado ao elemento body. Quando a pgina web tiver sido carregada, o evento disparado, e o manipulador chama a funo mapeada. Veja alguns mapeadores de eventos normalmente usados:
onclick
Disparado quando o elemento recebe um clique do mouse.

onmouseover
Disparado quando o cursor do mouse est sobre o elemento.
26
onmouseout
Disparado quando o cursor do mouse no est mais sobre o elemento.

onfocus
Disparado quando o elemento recebe o foco (por meio do mouse ou do teclado).

onblur
Disparado quando o elemento no tem mais o foco. Estes so apenas alguns dos manipuladores de eventos, e nem todos os elementos suportam todos os manipuladores. O manipulador de eventos onload suportado por apenas alguns elementos, como os elementos body e img o que no surpresa, j que o evento est associado ao carregamento de algo. Acrescentar um manipulador de eventos diretamente tag de abertura uma forma de anex-lo. Uma segunda tcnica ocorre diretamente dentro de JavaScript usando uma sintaxe como a seguinte:
<script type="text/javascript"> window.onload=hello; function hello(??) { // diz al para o mundo var msg = "Hello, World!"; document.open(); document.writeln(msg); document.close(); } </script>
O manipulador de eventos onload uma propriedade de outro objeto interno de navegador, o window. A primeira linha do script atribui a funo hello diretamente ao manipulador de eventos onload da janela.
Funes em JavaScript tambm so objetos em JavaScript, de modo que voc pode atribuir uma funo, por nome ou diretamente, a uma varivel ou outra propriedade do objeto.
Usando a abordagem da propriedade do objeto, voc no tem que adicionar manipuladores de eventos como atributos em tags de elementos, mas pode em vez disso adicion-los ao prprio JavaScript. Entraremos em maiores detalhes sobre manipuladores de eventos e formas mais avanadas de manipulao de eventos no incio do captulo 7. Enquanto isso, examinaremos mais de perto o objeto document.
27
Objeto document de navegador

O exemplo 1.2, embora pequeno, usou um dos objetos mais poderosos disponveis em seu navegador: o objeto document. Esse objeto , para todas as intenes e propsitos, uma representao da pgina, incluindo todos os elementos dentro dela. por meio do document que podemos acessar o contedo da pgina e, como voc acabou de ver, por meio dele que tambm podemos modificar os contedos da mesma. O document contm colees mapeadas a elementos da pgina, como todas as imagens ou elementos de formulrio da pgina. Tambm contm mtodos que voc pode usar tanto para acessar quanto para alterar a pgina web, incluindo os mtodos open, writeln e close usados no exemplo 1.2. O mtodo open abre o documento para gravao. No exemplo 1.2, o documento aberto era o mesmo no qual o script estava. O mtodo writeln uma variao do mtodo write, que imprime uma string de texto no documento. A nica diferena entre eles que writeln tambm insere um caractere de nova linha aps o texto. O mtodo close fecha o documento e tambm fora a exibio imediata do contedo do mesmo.
Uma consequncia negativa de se gravar sobre documentos existentes que, com o IE, pelo menos com a verso beta do IE8, voc perder a funcionalidade de seu boto de retorno.
Os mtodos open e close no so necessrios para o exemplo 1.2, j que os navegadores abriro e fecharo automaticamente o documento quando o mtodo writeln for chamado depois de ele j ter sido carregado. Se voc usasse o script no corpo da pgina, precisaria chamar explicitamente o mtodo open. O document, assim como o mtodo window mencionado anteriormente, faz parte de uma hierarquia de objetos conhecida como Browser Object Model (BOM). Esse modelo um conjunto bsico de objetos implementados na maioria dos navegadores modernos. Abordarei o document e outros objetos BOM no captulo 9.
BOM a verso mais antiga do Document Object Model (DOM), mais formal, e s vezes chamado de DOM Nvel 0.
Operador property
No exemplo 1.2, voc acessou os mtodos do objeto document por meio de um dos muitos operadores suportados em JavaScript: o operador property, representado por um operador de ponto simples (.). Diversos operadores esto disponveis em JavaScript: os aritmticos (+, -), os de expresses condicionais (>, <) e outros que detalharei mais adiante neste livro. Um dos
28
mais importantes, todavia, o operador property. Elementos de dados, manipuladores de eventos e mtodos de objetos so todos considerados propriedades de objetos dentro de JavaScript, e possvel acessar todos eles por meio do operador property. Voc tambm usa esse operador em um processo chamado de encadeamento de mtodos, ou s vezes apenas encadeamento, por meio do qual voc pode aplicar chamadas a mltiplos mtodos, uma aps a outra, sendo todas dentro da mesma instruo. Veremos o exemplo a seguir no livro:
var tstValue = document.getElementById("test").style.backgroundColor="#ffffff";
Neste exemplo, um elemento page acessado usando o mtodo getElementById do documento, e seu objeto style acessado para configurar a cor de fundo desse elemento. A propriedade backgroundColor pertence ao objeto style, que uma propriedade do objeto document. Cobrirei todos esses mtodos e objetos em captulos posteriores, mas queria apresentar o encadeamento de mtodos agora, j que voc o ver com bastante frequncia. Voc no pode encadear todas as propriedades de todos os objetos apenas aquelas que retornam um objeto.
Uma das bibliotecas Ajax mais populares, JQuery, faz uso intenso de encadeamento de mtodos. Cobrirei a JQuery rapidamente no captulo 14.
Palavra-chave var e o escopo

A string Hello World! que usei no exemplo 1.2 atribuda a um objeto chamado msg, que um exemplo de uma varivel JavaScript. Uma varivel nada mais que uma referncia nomeada a determinados dados. Os dados podem ser uma string, como no exemplo 1.2, um nmero, ou o valor booleano true ou false. Eles tambm podem ser uma referncia a uma funo, a um array ou a outro objeto. No exemplo, defini a varivel com a palavra-chave var. Quando voc usa var com uma varivel, est definindo essa varivel com escopo local, o que significa que voc pode acess-la apenas dentro da funo na qual a definiu. Se eu no usasse var, a varivel msg seria global e teria escopo dentro e fora da funo. Usar uma varivel global em um contexto local no uma coisa ruim e pode ser necessrio s vezes mas no uma boa prtica e deve ser evitada, se possvel. O motivo pelo qual voc deve querer evitar variveis globais porque, se a aplicao fizer parte de uma aplicao JavaScript maior, msg pode estar em uso em outra parte do cdigo em outro arquivo e voc ter sobrescrito os dados que ela continha originalmente. Ou, se voc criar uma varivel global chamada msg, o script de alguma
29
outra biblioteca poderia sobrescrev-la no usando de forma correta a palavra-chave var, e os dados que voc estava registrando sero perdidos. Estabelecer o escopo de uma varivel importante se voc tiver variveis globais e locais com o mesmo nome. O exemplo 1.2 no tem variveis globais com algum nome, mas importante que se desenvolvam boas prticas de codificao JavaScript desde o incio. Aqui esto as regras quanto ao escopo: Se voc declarar uma varivel com a palavra-chave var em uma funo ou em um bloco de cdigo, seu uso local quela funo. Se voc usar uma varivel sem declar-la com a palavra-chave var, e existir uma varivel global com o mesmo nome, a varivel local assumida como sendo a global j existente. Se voc declarar uma varivel localmente com uma palavra-chave var, mas no a inicializar (i.e., atribuir um valor a ela), ela ser local e ficar acessvel, mas no definida. Se voc declarar uma varivel localmente sem a palavra-chave var, ou se declar-la explicitamente como global mas no a inicializar, ela ser acessvel globalmente, mas tambm no estar definida. Usando var dentro de uma funo, voc pode evitar problemas ao usar variveis globais e locais com o mesmo nome. Isso particularmente importante ao se usar bibliotecas JavaScript como Dojo, jQuery e Prototype porque voc no saber que nomes de variveis o outro cdigo JavaScript est usando.
Instrues (statements)
JavaScript tambm suporta diferentes tipos de instrues de processamento, conhecidos como instrues. O exemplo 1.2 demonstrou um tipo bsico de instruo em JavaScript: a atribuio, na qual um valor atribudo em uma varivel. Outros tipos de instruo so laos for, que processam um bloco de script um determinado nmero de iteraes; a instruo condicional if...else, que verifica uma condio para ver se um bloco de script executado; a instruo switch, que verifica um valor dentro de um determinado conjunto e a seguir executa o bloco de script associado a esse valor; e assim por diante. Cada tipo de instruo contm determinados requisitos sintticos. No exemplo 1.2, a instruo de atribuio terminava com um ponto-e-vrgula. Usar um ponto-e-vrgula para terminar uma instruo no um requisito em JavaScript, a menos que voc queira digitar muitas instrues na mesma linha. Se for faz-lo, ter que inserir um ponto-e-vrgula para separar as instrues individuais.
30
Quando voc digita uma instruo completa em uma linha, usa uma quebra de linha para termin-lo. Todavia, da mesma forma que com o uso de var, uma boa prtica usar ponto-e-vrgulas para terminar todas as instrues, seno para tornar o cdigo mais fcil de ler. Veja mais sobre o ponto-e-vrgula, outros operadores e instrues no captulo 3.
Comentrios
Como espero que este captulo demonstre, h muita coisa em JavaScript, mesmo em uma aplicao pequena como a do exemplo 1.2. Espere um pouco, porm, j que ainda no terminamos. Por fim, mas certamente no menos importante, vamos ver um pouco mais sobre comentrios em JavaScript. Os comentrios fornecem um resumo ou explicao do cdigo que se segue. Comentrios em JavaScript so uma forma extremamente til de fazer observaes rapidamente sobre o que um bloco de cdigo faz ou quais dependncias ele tem. Eles tornam o cdigo mais legvel e mais fcil de manter. Voc pode usar dois tipos diferentes de comentrios em suas aplicaes. O primeiro, usando as barras duplas (//), comenta o que estiver a seguir na mesma linha:
// Esta uma linha comentada var i = 1; // este um comentrio de linha
O segundo faz uso dos delimitadores de abertura e fechamento de comentrios em JavaScript, /* e */, para marcar um bloco de comentrios que pode se estender por uma ou mais linhas:
/* Este um comentrio multilinhas que se estende por trs linhas. Comentrios multilinhas so especialmente teis para comentar uma funo*/
Comentrios de apenas uma linha so relativamente seguros de usar, mas os de vrias linhas podem gerar problemas se o caractere inicial ou final for apagado acidentalmente. Em geral, usamos comentrios de linha nica antes de um bloco de script executando um determinado processo ou criando um objeto especfico; usamos comentrios de blocos de vrias linhas no incio de um arquivo JavaScript. Uma boa prtica a adotar com JavaScript comear cada bloco, funo ou definio de objeto em JavaScript com pelo menos uma linha de comentrio. Alm disso, fornea um bloco de comentrios mais detalhados no incio de todos os arquivos de bibliotecas em JavaScript; inclua informaes sobre autor, data e dependncias, assim como um objetivo detalhado do script. J exploramos o que voc viu no exemplo 1.2. Agora examinaremos o que voc no viu.
31
O que voc no viu: sees CDATA e comentrios em HTML

H dez anos, quando a maioria dos navegadores estava em sua primeira ou segunda verso, o suporte a JavaScript era vago, com cada navegador implementando uma verso diferente. Quando os navegadores, como o Lynx baseado em texto, encontravam a tag script, geralmente apenas imprimiam a sada na pgina. Para evitar isso, o contedo do script ficava dentro de comentrios HTML: . Quando comentrios em HTML eram usados, navegadores que no suportavam
JavaScript ignoravam o script dentro desses comentrios, mas os navegadores mais novos sabiam execut-lo. Era algo no muito sofisticado, porm, muito usado. A maioria das pginas web com JavaScript atualmente apresenta comentrios HTML acrescentados porque mais comum que o script seja copiado do que no. Infelizmente, alguns navegadores novos hoje podem processar a pgina web como XHTML, e estritamente como XML, o que significa que o cdigo comentado descartado. Como consequncia, o uso de comentrios em HTML para esconder o script desencorajado. Outra forma de esconder script, porm, encorajada: por meio do uso da seo XML CDATA, especialmente se o script for ser usado em XHTML. O exemplo 1.3 uma modificao do exemplo 1.2 com a adio de uma seo CDATA, mostrada em negrito.
Exemplo 1.3 Modificao do exemplo 1.2 para acrescentar uma seo CDATA para esconder o script
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Hello, World!</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> //<![CDATA[ function hello() { // diz al para o mundo var msg = "Hello, <em>World!</em>"; document.open(); document.write(msg); document.close(); } //]]> </script> </head> <body onload="hello()"> <p>Hi</p> </body> </html>
32
O motivo para a seo CDATA que processadores XHTML interpretam marcao, como as tags de abertura e fechamento em nesse novo exemplo, mesmo quando eles esto dentro de strings JavaScript. Embora o script possa ser processado corretamente e tambm exibir a pgina de forma correta, se voc tentar valid-lo sem a seo CDATA obter erros de validao, conforme mostra a figura 1.1.
Figura 1.1 Erro de validao sem o uso da seo CDATA.
Supe-se que o JavaScript que importado para a pgina usando o atributo src do elemento script seja compatvel com XHTML e no requeira a seo CDATA. Voc deve, contudo, delimitar JavaScript in-line ou embutido com CDATA, especialmente se estiver dentro do elemento body. Para a maioria dos navegadores, voc tambm precisar esconder as tags de abertura e fechamento da seo CDATA com comentrios (//), conforme mostrado anteriormente no exemplo 1.3, ou obter um erro JavaScript. claro que a melhor forma de manter suas pginas web organizadas remover inteiramente JavaScript das mesmas, por meio do uso de arquivos JavaScript. A maioria dos exemplos deste livro inserida nas pginas principalmente para tornlas mais fceis de serem lidas e seguidas. Todavia, a Mozilla Foundation recomenda (e eu concordo) que todo JavaScript in-line ou embutido seja removido de uma pgina e colocado em arquivos JavaScript separados. Usar um arquivo separado, o que coberto na prxima seo, evita problemas com validao e interpretao incorreta de texto, independentemente de a pgina ser processada como HTML ou XHTML.
Arquivos JavaScript tambm so mais eficientes, j que o navegador os coloca em cache na primeira vez em que so carregados. Referncias adicionais ao mesmo arquivo so trazidas da cache.
33
Arquivos JavaScript
O uso de JavaScript est se tornando mais orientado a objetos e complexo. Para simplificar seu trabalho, assim como para compartilh-lo, desenvolvedores JavaScript esto criando objetos JavaScript reutilizveis que podem ser incorporados em muitas aplicaes, incluindo aquelas criadas por outros desenvolvedores. A nica forma eficiente de se compartilhar esses objetos cri-los em arquivos separados e fornecer um link para cada arquivo na pgina web. Agora com o cdigo em arquivos, tudo o que o desenvolvedor precisa fazer conectar o cdigo s pginas web. Se o cdigo precisar ser alterado posteriormente, ele o em apenas um lugar. Atualmente, mesmo o JavaScript mais simples criado em arquivos de script separados. Qualquer overhead que seja criado pelo uso de vrios arquivos compensado pelos benefcios gerados. Para incluir uma biblioteca JavaScript ou arquivo de script em sua pgina web, use esta sintaxe:
<script type="text/javascript" src="algumjavascript.js"></script>
O elemento script no contm contedo, mas a tag de fechamento ainda assim necessria. O navegador carrega os arquivos de script para a pgina na ordem na qual eles aparecem na mesma e os processa em ordem a menos que defer seja usado. Um arquivo de script deve ser tratado como se o cdigo estivesse realmente inserido na pgina: o comportamento no diferente entre arquivos de script e blocos de JavaScript embutido. O exemplo 1.4 outra modificao de nossa aplicao Hello, World! , exceto que, dessa vez, o script movido para um arquivo separado, chamado helloworld.js. A extenso .js necessria, a menos que voc direcione o servidor web para usar alguma outra extenso para representar o tipo MIME JavaScript. Entretanto, pelo fato de a .js ser usada como padro h anos, melhor no inventar moda.
Toda regra sempre tem excees, e o uso de .js uma delas. Se o JavaScript for gerado dinamicamente usando uma aplicao no lado servidor construda em uma linguagem como PHP, o arquivo ter uma extenso diferente.
O exemplo 1.4 contm o script, e o exemplo 1.5 mostra a pgina web agora alterada.
Exemplo 1.4 O script Hello World em um arquivo separado

/* funo: hello autoria: Shelley hello imprime a mensagem "Hello, World!" */
34
function hello() { } // diz al para o mundo var msg = "Hello, <em>World!</em>"; document.open(); document.write(msg); document.close();
Exemplo 1.5 A pgina web, agora chamando um arquivo de script externo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Hello, World!</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="helloworld.js"> </script> </head> <body onload="hello()"> <p>Hi</p> </body> </html>
Como voc pode ver, a pgina fica muito mais limpa, e a aplicao mais eficiente a partir de uma perspectiva de manuteno. Alm disso, outras aplicaes agora podem reutilizar o cdigo. Embora seja improvvel que voc reutilizasse algo to simples quanto o script Hello, World! , criar exemplos mais adiante neste livro nos quais a reutilizao se torna mais importante. Temos uma ltima seo de material a cobrir neste captulo antes de passar para variveis e tipos de dados no captulo 2.
Acessibilidade e melhores prticas em JavaScript

Em um mundo ideal, todos aqueles que visitam seu website usariam o mesmo tipo de sistema operacional e navegador e teriam JavaScript habilitado. Seu site nunca seria acessado por meio de um telefone celular ou algum outro dispositivo diferente, pessoas com deficincias visuais no precisariam de leitores de telas e as com problemas de paralisia no precisariam de navegao ativada por voz. Este no um mundo ideal, mas muitos desenvolvedores JavaScript codificam como se fosse. Ficamos to envolvidos com as maravilhas que podem criar que esquecemos que nem todo mundo pode compartilh-las.
35
Muitas das melhores prticas esto associadas a JavaScript mas, se houver uma para se usar deste livro, a seguinte: seja qual for a funcionalidade JavaScript que voc crie, ela no deve atrapalhar o uso de seu site pelos visitantes. O que quero dizer por atrapalhar o uso do seu site pelos visitantes? Quero dizer que voc deve evitar o uso de JavaScript de uma forma em que aqueles que no podem, ou no iro, habilitar JavaScript, fiquem impedidos de acessar recursos essenciais do site. Se voc criar um menu drop-down usando JavaScript, tambm precisa fornecer uma alternativa que no use script. Se seus visitantes tiverem deficincias visuais, JavaScript no deve interferir em navegadores de udio, o que acontece quando instrues so adicionadas a uma pgina dinamicamente. Muitos desenvolvedores no seguem esses princpios porque supem que as prticas requerem trabalho adicional e, em sua maior parte, requerem. Entretanto, o trabalho no precisa ser um fardo no quando os resultados podem aumentar a acessibilidade de seu site. Alm disso, muitas empresas agora exigem que seus websites satisfaam a um determinado nvel de acessibilidade. melhor desenvolver o hbito de criar pginas acessveis no incio do que tentar consert-las, ou seus hbitos, posteriormente.
Diretrizes de acessibilidade
O site WebAIM (http://www.webaim.org) contm um timo tutorial sobre a criao de JavaScript acessvel (disponvel em http://www.webaim.org/techniques/javascrip/). Ele cobre as maneiras como voc no deve usar JavaScript, como o uso de JavaScript para menus e outros tipos de navegao. Todavia, o site fornece formas para voc usar JavaScript para tornar um site mais acessvel. Uma sugesto basear a resposta em eventos que possam ser disparados quer voc use um mouse ou no. Por exemplo, em vez de capturar cliques do mouse, voc deve capturar eventos que sejam disparados se voc usar um teclado ou um mouse, como onfocus e onblur. Se voc tiver um menu drop-down, adicione um link para uma pgina separada e fornea um menu esttico nessa segunda pgina. Depois de revisar o tutorial na WebAIM, voc talvez queira dedicar algum tempo Web Accessibility Initiative do World Wide Consortium (W3C) (em http://www. w3.orh/WAI/). A partir da, voc tambm pode acessar o website da Seo 508 do governo norte-americano (http://www.section508.gov/), que discute o que conhecido como compatibilidade 508 . Sites que sejam compatveis com a Seo 508 so acessveis independentemente de restries fsicas. Nesse website, voc pode acessar diversas ferramentas que avaliam seu site quanto acessibilidade, como Cynthia Says (em http://www.cynthiasays.com/).
36
Esteja seu site localizado dentro dos Estados Unidos ou no, voc desejar que ele seja acessvel. Assim, uma visita Seo 508 til independentemente de sua localizao. claro que nem todos os problemas de acessibilidade esto relacionados queles navegadores nos quais JavaScript est limitado ou desabilitado como padro, como com leitores de tela. Muitas pessoas no confiam em JavaScript, ou no ligam para a linguagem e preferem desabilit-la. Para ambos os grupos de pessoas aquelas que preferem no usar JavaScript e as que no tm escolha importante que se forneam alternativas quando nenhum script estiver presente. Uma alternativa noscript.
noscript
Alguns navegadores ou outras aplicaes no esto preparados para processar JavaScript ou esto limitados no modo de interpretao do script. Se JavaScript no for essencial para a navegao ou interao, e o navegador ignorar o script, no h prejuzo. Entretanto, se JavaScript for essencial para o acesso de recursos do site e voc no fornecer alternativas, est basicamente mandando essas pessoas embora. Anos atrs, quando JavaScript era razoavelmente uma novidade, uma abordagem popular era fornecer uma pgina simples ou apenas de texto acessvel por meio de um link, geralmente colocado no topo da pgina. Contudo, a quantidade de trabalho para realizar a manuteno dos dois sites poderia ser proibitiva e os desenvolvedores tinham que se preocupar constantemente em manter os sites sincronizados. Uma tcnica melhor fornecer alternativas estticas ao contedo dinmico gerado por script. Quando voc usa JavaScript para criar um menu drop-down, tambm fornece um menu com links hierrquicos padro; quando voc usa script para mostrar elementos de formulrio para edio baseados em interao com o usurio, fornece os links mais tradicionais para uma segunda pgina fazer o mesmo. O elemento que permite tudo isso noscript. Onde quer que voc precise de contedo esttico, adicione um elegante noscript com o contedo dentro das tags de abertura e fechamento. Assim, se um navegador ou outra aplicao no puder processar o script (devido a JavaScript no estar habilitado por algum motivo), o contedo noscript processado; caso contrrio, ele ignorado. O exemplo 1.6 uma ltima variao de Hello, World! mostrando o exemplo protegido por CDATA modificado com a adio de noscript. Acessar a pgina com um navegador habilitado com JavaScript deve exibir uma pgina com Hello, World! impresso. Entretanto, se voc acessar essa pgina com um navegador com scripts desabilitados, uma mensagem diferente ser exibida.
37
Exemplo 1.6 O uso de noscript para navegadores sem JavaScript habilitado

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Hello, World!</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> //<![CDATA[ function hello() { // diz al para o mundo var msg = "Hello, <em>World!</em>"; document.open(); document.write(msg); document.close(); } //]]> </script> </head> <body onload="hello()"> <noscript> <p>I'm still here, World!</p> </noscript> </body> </html>
claro que o exemplo 1.6 apenas um uso simplificado de noscript; voc ver usos mais sofisticados mais adiante no livro, assim como mtodos alternativos com proteo para scripts. Para testar o exemplo 1.6, usei uma extenso Firefox chamada de Web Developer Toolbar. Nessa barra fica uma opo para desabilitar o suporte a JavaScript. Quando JavaScript estiver ativo, a mensagem original Hello, World! exibida. Contudo, quando uso a ferramenta para desativar o suporte a JavaScript, outra mensagem exibe: I'm still here, world! Embora voc possa desativar o scripting diretamente no navegador, descobri que ferramentas de desenvolvimento como a Web Developer Toolbar tornam o teste muito mais fcil. Quais ferramentas voc usa depende do navegador com o qual voc prefere desenvolver. Prefiro desenvolver com o Firefox e fazer uso extensivo da Web Developer Toolbar e do Firebug, uma ferramenta sofisticada de depurao. Mais adiante, no captulo 6, que cobre a deteco e soluo de problemas e a depurao, examinaremos mais de perto esses tpicos, assim como outras ferramentas e opes disponveis para outros navegadores.

Javascript

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Javascript

Uploaded by

Copyright:

Available Formats

Aprendendo

Exemplo 1.1 A menor aplicao em JavaScript: Hello World!

Hello World! novamente

Exemplo 1.2 Hello World! exibido na pgina web

Captulo 1 Ol, JavaScript!

Captulo 1 Ol, JavaScript!

Adio de script ao corpo do documento

JavaScript versus ECMAScript versus JScript

Captulo 1 Ol, JavaScript!

Definio de funes em JavaScript

Disparado quando o elemento recebe um clique do mouse.

Disparado quando o cursor do mouse est sobre o elemento.

Disparado quando o cursor do mouse no est mais sobre o elemento.

Disparado quando o elemento recebe o foco (por meio do mouse ou do teclado).

Captulo 1 Ol, JavaScript!

Objeto document de navegador

Palavra-chave var e o escopo

Captulo 1 Ol, JavaScript!

Captulo 1 Ol, JavaScript!

O que voc no viu: sees CDATA e comentrios em HTML

Figura 1.1 Erro de validao sem o uso da seo CDATA.

Captulo 1 Ol, JavaScript!

Exemplo 1.4 O script Hello World em um arquivo separado

Exemplo 1.5 A pgina web, agora chamando um arquivo de script externo

Acessibilidade e melhores prticas em JavaScript

Captulo 1 Ol, JavaScript!

Captulo 1 Ol, JavaScript!

Exemplo 1.6 O uso de noscript para navegadores sem JavaScript habilitado

You might also like