Documente Academic
Documente Profesional
Documente Cultură
Guia do Programador
Maurcio Samy Silva
Novatec
Copyright Novatec Editora Ltda. 2010. Todos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998. proibida a reproduo desta obra, mesmo parcial, por qualquer processo, sem prvia autorizao, por escrito, do autor e da Editora. Editor: Rubens Prates Reviso gramatical: Patrizia Zagni Editorao eletrnica: Camila Kuwabata e Carolina Kuwabata Capa: Victor Bittow ISBN: 978-85-7522-248-5 Histrico de impresses: Setembro/2010 Primeira edio
Novatec Editora Ltda. Rua Lus Antnio dos Santos 110 02460-000 So Paulo, SP Brasil Tel.: +55 11 2959-6529 Fax: +55 11 2950-8869 E-mail: novatec@novatec.com.br Site: www.novatec.com.br Twitter: twitter.com/novateceditora Facebook: facebook.com/novatec LinkedIn: linkedin.com/in/novatec
Dados
(CIP)
10-10573
CDD-005.133 ndices para catlogo sistemtico: 1. JavaScript : Linguagem de programao : Computadores : Processamentos de dados 005.133
CRM20100922
CAPTULO 1
Introduo JavaScript
Neste captulo, ser apresentada a linguagem JavaScript, relatando-se suas origens, nalidades e destinao. Ser feito um breve relato histrico de sua evoluo, examinando as diferentes verses por que passou e desmisticando alguns conceitos malformados que acabaram por estigmatizar a linguagem como uma tcnica inferior e em desacordo com as boas prticas de programao para web. Com a nalidade de criar uma base de estudos para os tpicos e captulos que se seguem, sero apresentados os mtodos para criar caixas de alerta, escrever e atrelar um evento na marcao HTML. Estudaremos, ainda, os conceitos bsicos de objetos da linguagem JavaScript e aprofundaremos o estudo de variveis mostrando como, onde e quando as declarar. Ao nal do estudo deste captulo, o leitor ter uma slida viso dos princpios e da losoa de emprego de programao JavaScript em conformidade com os Padres Web, bem como adquirido os conhecimentos necessrios para criar caixas de alerta, escrever HTML com o uso de JavaScript e atrelar, ainda que em carter precrio, um evento a um boto HTML. Esses conhecimentos auxiliaro o leitor a criar visualizao para os resultados de seus primeiros scripts.
23
JavaScript foi criada pela Netscape em parceria com a Sun Microsystems, com a nalidade de fornecer um meio de adicionar interatividade a uma pgina web. A primeira verso, denominada JavaScript 1.0, foi lanada em 1995 e implementada em maro de 1996 no navegador Netscape Navigator 2.0 quando o mercado era dominado pela Netscape. Logo a seguir, veio a poca da chamada guerra dos browsers, cujos efeitos nocivos se fazem sentir at os dias atuais. Para no fugir regra, a Microsoft, em resposta Netscape, criou a linguagem JScript baseada em Visual Basic cuja primeira verso denominada JScript 1.0 foi lanada com o navegador Internet Explorer 3.0. No h como fazer funcionar um formulrio HTML com o uso de elementos HTML. A HTML limita-se a criar os rtulos e campos de um formulrio para serem preenchidos pelo usurio e nada mais. Com HTML, no conseguimos processar os dados nem mesmo envi-los ao servidor ou a outra mquina qualquer. Para cumprir essas tarefas, necessrio utilizar um programa que consiga manipular e processar os dados. Entre as vrias linguagens de programao destinadas a adicionar e processar dados em pginas web, destacam-se PHP, ASP, Java, Ruby, Phyton e ColdFusion, entre outras. As linguagens de programao como as citadas anteriormente foram desenvolvidas para rodar no lado do servidor, isto , dependem de uma mquina remota onde esto hospedadas as funcionalidades capazes de interpretar e fazer funcionar os programas. JavaScript uma linguagem desenvolvida para rodar no lado do cliente, isto , a interpretao e o funcionamento da linguagem dependem de funcionalidades hospedadas no navegador do usurio. Isso possvel porque existe um interpretador JavaScript hospedado no navegador. Tanto a Netscape como a Microsoft desenvolveram interpretadores JavaScript para serem hospedados no servidor, tornando possvel rodar JavaScript no lado do servidor. Esses interpretadores foram disponibilizados para uso pblico e podem ser usados pelos desenvolvedores para serem embutidos em aplicaes gerais. A organizao Mozilla lanou, sob a bandeira de cdigo aberto e livre, duas verses do interpretador: Spider Monkey escrita em C e Rhino escrita em Java.
Neste livro, trataremos exclusivamente de JavaScript para rodar no lado do cliente. Assim sendo, fica subentendido que daqui para frente a palavra JavaScript se refere JavaScript a ser interpretada pelo navegador.
Em tese, precisamos apenas de um navegador para fazer funcionar scripts desenvolvidos com a linguagem JavaScript. Ao contrrio, programas escritos em PHP, por exemplo, precisam ser hospedados em um servidor remoto congurado para rodar PHP ou visualizados localmente em uma mquina na qual tenha sido instalado um servidor local com suporte para PHP.
24
Como regra geral, evite gerar marcao HTML com JavaScript. Ao longo deste livro, sempre que for o caso, ressaltaremos as excees a essa recomendao. JavaScript capaz de denir, alterar e controlar de forma dinmica a apresentao de um documento HTML, como os aspectos relacionados cor de fundo, de textos e de links, ou mesmo interferir no posicionamento dos elementos HTML de um documento. possvel manipular a folha de estilos associada ao documento criando novas regras CSS ou anulando regras existentes.
25
a cada clique em um link, ver abrir uma janela pop-up com propaganda de um produto que em nada se relaciona a seus desejos consumistas, ou, ao sair de um site ou fechar uma janela, descobrir uma outra janela no solicitada. Esses comportamentos, inesperados e no solicitados pelo usurio, inseridos por JavaScript tambm contriburam para a m fama da linguagem. Portanto, no perpetue essa prtica nociva e ultrapassada, desenvolvendo seus scripts em conformidade com os Padres Web e voltando-se exclusivamente para enriquecer a experincia do usurio sem criar barreiras para a acessibilidade e a usabilidade. Adote como regra geral no manipular a janela do navegador do usurio, pois ele quem decide se quer abrir, fechar, redimensionar, voltar, sair e fazer o que bem entender com o navegador.
que o contedo da pgina deve estar presente e funcional, ainda que se perca em usabilidade, caso o usurio esteja visualizando o documento em um dispositivo (por exemplo, navegador) sem suporte para JavaScript;
26
usar a linguagem com vistas a unicamente incrementar a usabilidade da pgina; escrever scripts em arquivos externos para serem linkados ao documento e no inserir script na marcao HTML.
O primeiro conceito traz a grande novidade e separa denitivamente os princpios de uso da JavaScript maneira ultrapassada e maneira moderna, em conformidade com os Padres Web. At o advento dos Padres Web, a premissa em vigor era a de que JavaScript e acessibilidade eram incompatveis. No havia como se pensar em desenvolvimento JavaScript contemplando a acessibilidade. Se desabilitarmos JavaScript em nosso navegador e passarmos algum tempo navegando por sites na Web, certamente teremos uma boa ideia da incompatibilidade de JavaScript mal desenvolvido com acessibilidade. Assim, no exagero armar que o primeiro conceito da listagem anterior revolucionou a forma de escrever JavaScript. O segundo conceito agrega um valor eminentemente prtico linguagem, acabando denitivamente com a prtica de criar scripts voltados unicamente a acrescentar efeitos espetaculares na pgina, mas sem qualquer utilidade, como guras acompanhando o cursor, objetos voando pela pgina, luzes piscando e uma parafernlia de efeitos to prprios do desenvolvimento em anos passados. O terceiro conceito alinha-se com o moderno conceito de separao de camadas de desenvolvimento. JavaScript deve ser mantido na camada de comportamento, no invadindo a camada de estruturao do contedo (marcao HTML) nem a camada de apresentao (CSS).
27
estabelecer a conexo entre eles com o uso de links. As principais vantagens de adotar a prtica de separao das camadas so:
elimina a necessidade de repetio de cdigos em diferentes pginas; facilita o reaproveitamento de trechos de cdigos em outros projetos; facilita a busca e correo de eventuais bugs nos cdigos; facilita a manuteno e o entendimento dos cdigos.
Outro conceito intimamente relacionado ao princpio de separao das camadas de desenvolvimento o moderno conceito, introduzido com a chegada dos Padres Web, conhecido como melhoria progressiva (progressive enhancement). Segundo esse princpio, o desenvolvimento de uma pgina Web deve ser feito em trs etapas:
Na primeira etapa, estruturar os contedos usando a linguagem HTML. Ao nal dessa etapa, todos os contedos devem estar disponveis para qualquer visitante que esteja utilizando qualquer dispositivo de usurio. Na segunda etapa, incrementar a apresentao da pgina com o uso das CSS. Essa etapa visa a melhorar a experincia dos usurios aptos a visualizar folhas de estilos. Finalmente, na terceira etapa, introduzir JavaScript com a nalidade de acrescentar interatividade pgina, melhorando ainda mais a experincia do usurio.
Implementao
Ms/ano
Maro 1996 Agosto 1996 Junho 1997 Outubro 1998 Novembro 2005 Outubro 2006 Junho 2008 2008 2009 Agosto 1996 Janeiro 1997 Outubro 1997 Maro 1999 Julho 2000 Outubro 2001 Novembro 2006 Maro 2009 1998 1998 1999 2002 2009
1.5.1 Definies
ECMA
Abreviatura para European Computer Manufacturers Association, trata-se de uma associao fundada em 1961 dedicada padronizao de sistemas de informao. Desde 1994, passou a se denominar ECMA International para reetir suas atividades internacionais. A associao aberta a companhias que produzem, comercializam ou desenvolvem sistemas de computao ou de comunicao na Europa. Em 1996, a
29
ECMA Internacional comeou a desenvolver a ECMA-262 que vem a ser a norma para JavaScript. Em 1997, foi lanada a primeira edio da norma e, em 1998, a norma foi reconhecida ocialmente pela International Organization for Standardization (ISO).
ECMAScript
uma linguagem de programao orientada a objetos que se destina a realizar clculos e manipular objetos computacionais de um ambiente de hospedagem. ECMAScript no se destina a ser computacionalmente autossuciente, visto que no existem disposies nas especicaes que normatizem entrada de dados externos ou sada de resultados calculados. Em vez disso, espera-se que o ambiente computacional de um programa ECMAScript proporcione no apenas os objetos e outras funcionalidades descritas nas especicaes, mas tambm objetos especcos a um ambiente de hospedagem, cuja descrio e cujo comportamento esto alm do escopo da especicao.
Linguagem de script
uma linguagem de programao usada para manipular, personalizar e automatizar as funcionalidades de um sistema existente. Em tais sistemas, as funcionalidades j se encontram disponveis por meio de uma interface de usurio e a linguagem de script prov um mecanismo para acess-las. Dessa forma, o sistema existente oferece um ambiente de hospedagem para objetos e funcionalidades que complementa os recursos da linguagem de script. A linguagem de script destina-se a programadores prossionais e no prossionais.
Ambiente de hospedagem
Um navegador web um exemplo de ambiente de hospedagem para ECMAScript que funciona no lado do cliente. Ele hospeda objetos que representam janelas, menus pop-ups, caixas de dilogo, reas de texto, ncoras, quadros, histrico e cookies. Alm disso, o ambiente fornece funcionalidades para que o script manipule eventos como mudana de foco, carregamento e fechamento de documentos, erros, seleo, apresentao de formulrios e variadas aes do mouse. Um servidor web outro exemplo de ambiente de hospedagem para ECMAScript que funciona no lado do servidor. Hospeda objetos que representam as requisies ao servidor, clientes, arquivos e mecanismos de bloqueio e compartilhamento de dados. Ao desenvolver scripts, em conjunto, no lado do cliente e no lado do servidor, possvel estabelecer interao entre o cliente e o servidor, proporcionando uma interface de usurio personalizada para um aplicativo baseado na web.
30
Cada navegador ou servidor que suporta ECMAScript fornece seu ambiente prprio de hospedagem que completa o ambiente de execuo ECMAScript.
31
objetos internos da linguagem, como, strings, arrays e datas; objetos do ambiente de hospedagem (por exemplo, o navegador), como, window e document; objetos personalizados criados pelo desenvolvedor.
Programao orientada a objetos e consequente criao de objetos no so o foco deste livro, contudo abordaremos esse assunto com maiores detalhes nos captulos subsequentes, quando for necessrio. No momento, suciente que se entenda que objetos possuem propriedades e mtodos acessados com o uso de sintaxe apropriada e saber tambm que a linguagem JavaScript possui objetos nativos com suas propriedades e mtodos.
de boa prtica escrever o nome de objetos comeando com letra maiscula para diferenci-los de outros tipos de dados da linguagem, como das variveis. Isso permite localizar, com maior facilidade, objetos no script, facilitando a manuteno do cdigo.
32
Vamos apresentar esses mtodos, examinando como criar cada uma dessas caixas de dilogo que serviro de apoio para demonstrar o funcionamento dos exemplos que iremos desenvolver nos primeiros captulos do livro.
Caixa de alerta
Alert Box, ou caixa de alerta, destina-se a colocar na interface do usurio uma caixa de dilogo contendo uma mensagem a ele. Conforme vimos anteriormente, a sintaxe para se chamar um mtodo de um objeto JavaScript consiste em escrever o objeto e o mtodo separados por um ponto. Quando se trata de uma propriedade ou mtodo do objeto Window, podemos abreviar a sintaxe omitindo o objeto. Isso porque Window o objeto JavaScript global ou raiz que contm todos os demais objetos do navegador. A seguir, veja a sintaxe para criar uma caixa de alerta:
window.alert("arg");
ou simplesmente:
alert("arg");
Esse mtodo ou funo admite um argumento arg que uma string contendo a mensagem a ser apresentada ao usurio. Observe o cdigo mostrado a seguir:
<!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" lang="pt-br"> <head> <title>Livro JavaScript do Maujor</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript"> alert("Al Mundo!"); </script> </head> <body> </body> </html>
[c1-alertbox.html] Na gura 1.1, observe a caixa de alerta renderizada em diferentes navegadores. As caixas de dilogo criadas com JavaScript tm sua apresentao determinada pelo fabricante do navegador, conforme podemos observar na gura 1.1.
33
Note no script anterior que para inserir JavaScript diretamente em uma pgina HTML usamos o elemento script e seu atributo type. A sintaxe para o elemento script prev uma tag de abertura <script> e uma tag de fechamento </script> dentro das quais dever ser inserido o cdigo JavaScript.
script
Encontramos muitos cdigos fazendo uso do atributo language para o elemento como mostrado a seguir:
<script language="javascript1.2">
Esse atributo visa a identicar a linguagem em que foi escrito o script. Contudo, por no haver uma normatizao dos identicadores de linguagens, o atributo est em desuso segundo as recomendaes do W3C e no dever ser empregado. Use o atributo type como mostrado anteriormente.
Nos rascunhos de trabalho para a especificao da HTML 5 est previsto o uso do elemento script sem necessidade de atributos.
O script mostrado anteriormente consta de uma linha contendo um mtodo (ou funo) nativo da linguagem JavaScript e pertencente ao objeto Window, denominado alert(), que admite uma string como parmetro. A string o texto a ser apresentado na caixa de alerta e dever ser escrita entre aspas duplas (" ") ou aspas simples (' '). A linha de declarao da funo termina com ponto-e-vrgula.
34
Abra o arquivo [c1-alertbox.html], substitua a string por outra qualquer e veja o efeito no navegador. Note que inserimos nosso script para a caixa de alerta na seo head do documento. Se retirarmos o script dessa seo e o inserirmos na seo body, ir funcionar normalmente. Experimente fazer isso alterando o arquivo e visualizando no navegador. Mas, de acordo com o que vimos anteriormente, misturar scripts com a marcao HTML contraria os Padres Web, ferindo os conceitos de JavaScript no obstrutivo e de separao das camadas de desenvolvimento. Assim, o script inserido na seo body no apropriado e deve ser evitado. Para a visualizao imediata do funcionamento dos nossos scripts, iremos adotar inicialmente a prtica de inseri-los diretamente na marcao HTML. To logo tenhamos passado uma base slida que permita entender os princpios de funcionamento da linguagem, mostraremos a maneira correta de separar nossos scripts em um arquivo independente da marcao. Mas, desde j, esteja consciente de que script misturado com HTML no uma prtica recomendvel. Suponha que pretendemos apresentar ao usurio uma caixa de alerta com uma mensagem em duas linhas, como mostra a gura 1.2.
Isso no vai funcionar, pois <br /> ser interpretado como uma string e no como um elemento HTML. Experimente fazer isso e visualize no navegador.
35
Felizmente, para resolver esse e outros problemas de formatao de strings, a linguagem JavaScript, tal como outras linguagens de programao, aceita os chamados caracteres de controle ASCII. Um deles \n, que causa uma quebra de linha na string. Assim, para pular uma linha na mensagem ao usurio passada com o uso de uma caixa de alerta, o cdigo utilizado o seguinte:
<head> ... <script type="text/javascript"> alert("Al Mundo!\nCheguei."); </script> </head> ...
No item [1.8.5.] apresentamos uma tabela com os caracteres de controle ASCII para JavaScript.
[c1-confirm.html] Na gura 1.3, observe a renderizao da caixa de dilogo do tipo confirm() criada com o uso do script mostrado.
36
Em uma situao real, o script mostrado deveria ser complementado, cando em condies de receber a resposta do usurio e tomar uma deciso baseado na resposta. Apenas quando um dos botes clicado, a linguagem fornece mecanismos internos capazes de identicar o boto clicado e manipular a resposta.
Os argumentos devem estar entre aspas duplas ou simples e separados por vrgula, sendo o segundo argumento facultativo. O primeiro argumento, arg1, uma instruo ao usurio para o que se espera que ele digite no campo de texto e o segundo argumento, arg2, um valor default, facultativo, inserido no campo de texto, normalmente para fornecer uma dica da forma de preenchimento do campo.
<!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" lang="pt-br"> <head> <title>Livro JavaScript do Maujor</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type="text/javascript"> prompt("Ol visitante\nInforme a data do seu nascimento.", "dd/mm/aaaa"); </script> </head> <body> </body> </html>
[c1-prompt.html] Na gura 1.4, observe a renderizao da caixa de dilogo do tipo prompt() criada com o uso do script mostrado.
37
Em uma situao real, o script mostrado deveria ser complementado, cando em condies de receber a resposta do usurio e manipul-la. Apenas quando um dos botes clicado, a linguagem fornece mecanismos internos capazes de identicar a string entrada pelo usurio.
ou simplesmente:
document.write("arg1");
Esse mtodo admite um argumento que a marcao HTML a ser inserida no documento. Ao contrrio do mtodo alert(), aceita como argumento marcao HTML e no somente strings. Assim, veja o script a seguir:
document.write("<p>Al mundo<br />Cheguei.</p>");
Causa a renderizao de um pargrafo com uma quebra de linha. Esse mtodo escreve diretamente na pgina, tal como se tivssemos inserido a marcao no arquivo HTML. Cria contedo completamente inacessvel para dispositivos no visuais, como um leitor de tela. Por essa razo, de acordo com os Padres Web, usar esse mtodo em scripts requer uma anlise acurada e deve se restringir a casos muito especcos. Como regra geral, evite utiliz-lo. Veja uma demonstrao prtica da inacessibilidade desse mtodo. Considere o script a seguir:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
38
[c1-write.html] Na gura 1.5, veja a renderizao da marcao HTML criada com o script e mostrada em arquivo disponvel no site do livro.
O mtodo writeln() semelhante ao mtodo write(), com a diferena que acrescenta um caractere de nova linha ao nal do contedo inserido. Em marcao HTML, pular uma linha no causa renderizao em nova linha (sabemos que para pular uma linha, devemos usar o elemento br). Assim, o efeito prtico de writeln() o mesmo de write().
39
[c1-onclick.html]
40
Observe que atrelamos o evento onclick a trs botes que, ao serem clicados, criaro, cada um deles, uma caixa de dilogo. Note que os eventos previstos na linguagem JavaScript so atributos da HTML cujo valor determina a ao a ser disparada. Ao usarmos eventos como atributos de um elemento HTML, estamos misturando as camadas de comportamento com a camada de estruturao e esta no uma prtica em conformidade com os Padres Web. Em captulos posteriores, iremos mostrar como fazer a separao. No exemplo a seguir, vamos demonstrar o uso do mtodo write() sendo chamado a partir de um evento, aps a pgina ter sido carregada, para ilustrar o que dissemos no nal do item [1.6.3]:
<!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" lang="pt-br"> <head> <title>Livro JavaScript do Maujor</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <div id="tudo"> <h1>Captulo 1</h1> <p class="xpto" id="teste">document.write() - Aps carregamento da pgina.</p> <p class="nav-arq" id="referencia">Arquivos exemplo: <a href="c1-onclick.html"> « anterior</a> | <a href="c1-onclick.html">prximo »</a></p> <button type="button" onclick="document.write('Contedo inserido aps carregamento da pgina')"> Inserir contedo</button> </div> </body> </html>
[c1-write-apos-carregamento.html] Note que ao clicar o boto para executar o mtodo write() todo o contedo da pgina substitudo pelo contedo inserido.
41
Ento, scripts devem ser atrelados a documentos HTML. Existem trs maneiras de se inserir JavaScript em um documento HTML:
Inline: inserir o script diretamente na seo body do documento. Trata-se de prtica no recomendada de acordo com o princpio da separao das camadas de desenvolvimento. Incorporado: inserir o script na seo head do documento. Externo: escrever o script em um arquivo externo e inserir com um link na seo head do documento.
Inserir script inline uma prtica que pertence ao passado e deve ser evitada pelo desenvolvedor comprometido com os Padres Web. Ao escrevermos scripts dentro da marcao HTML, estaremos misturando as camadas de marcao e comportamento, dicultando a manuteno e o entendimento dos cdigos.
Todos os scripts que mostramos anteriormente foram inseridos na marcao HTML. Fizemos assim para facilitar a demonstrao das funcionalidades bsicas da linguagem e o entendimento dos exemplos ilustrativos. Com a sequncia de estudos, iremos mostrar como fazer a separao.
Incorporar script ao documento pode ser uma prtica tolervel em situaes muito particulares, como quando se trata de um s documento utilizando um script exclusivo. Exemplo de script incorporado:
... <head> ... <script type="text/javascript"> // script vai aqui </script> </head> ...
As modernas prticas de desenvolvimento preconizam o uso de scripts externos a serem linkados ao documento. Cria-se um ou mais arquivos contendo os scripts e gravados com a extenso .js e usa-se o elemento script na seo head do documento para link-lo pgina. Essa tcnica permite linkar o script a vrias pginas do site, facilitando a manuteno.
42
Note o uso do atributo src para indicar o caminho para o arquivo que contm o script.
Estamos atrelando o evento onclick, que, na sintaxe JavaScript, deve ser grafado em minsculas, a um boto HTML. Mas, na marcao, a graa onClick e no causar erro no script. Na marcao, estamos escrevendo HTML (onClick um atributo HTML) e sabemos que HTML no sensvel ao tamanho da caixa, portanto vlida a graa apresentada. Contudo, no script, deveremos usar onclick, caso contrrio causaremos um erro. Isso pode parecer um pouco confuso, mas estamos escrevendo em linguagens diferentes, uma case insensitive HTML e outra case sensitive JavaScript. Convm notar que se a marcao for XHTML e no HTML, ento o atributo onclick ter que ser escrito tambm em minscula, pois a linguagem XHTML, por ser compatvel com XML, adota a sintaxe desta, na qual a marcao deve ser escrita em minsculas.
43
1.8.2 Comentrios
Comentrios so pequenos textos que o desenvolvedor insere ao longo do script com a nalidade de facilitar o entendimento e a manuteno do cdigo. A linguagem JavaScript admite trs tipos de marcadores para comentrios:
<script type="text/javascript"> // caixas de dilogo da JavaScript alert("Al Mundo!"); // caixa de alerta confirm("Voc tem certeza?"); // caixa de confirmao prompt("Entre seu CPF"); // caixa de dados </script>
<script type="text/javascript"> <!-- caixas de dilogo da JavaScript alert("Al Mundo!"); <!-- caixa de alerta confirm("Voc tem certeza?"); <!-- caixa de confirmao prompt("Entre seu CPF"); <!-- caixa de dados </script>
<script type="text/javascript"> /* Caixas de dilogo da JavaScript - caixa de alerta - caixa de confirmao - caixa de dados */ alert("Al Mundo!"); confirm("Voc tem certeza?"); prompt("Entre seu CPF"); </script>
Use duas barras // para iniciar um comentrio em linha nica ou coloque as mltiplas linhas de comentrio entre os sinais /* e */. Note que a variante 2, para marcar comentrios em uma linha, usa uma sintaxe semelhante adotada para comentrios na marcao HTML, com a diferena de que no necessrio o sinal de fechamento como mostrado a seguir:
<!-- Aqui comentrio para a marcao HTML --> <!-- Aqui comentrio para JavaScript
Essa variante normalmente no usada e consta aqui apenas como informao. Use a variante 1 para comentrios em uma linha.
44
1.8.3 Declaraes
Um script consiste em uma srie de instrues escritas segundo uma sintaxe prpria e rgida. As instrues, escritas em uma sequncia lgica, determinam a realizao de tarefas com a nalidade de obter um resultado nal. Cada uma das instrues de um script constitui uma declarao independente e existem duas sintaxes para separar uma declarao da outra. Separe-as com pontoe-vrgula ou coloque cada declarao em uma linha separada. Observe a seguir:
// declaraes na mesma linha a = 5; b = 8; alert("Al Mundo!"); // declaraes em linhas separadas a = 5 b = 8 alert("Al Mundo!")
A sintaxe determina que o ponto-e-vrgula seja obrigatrio para separar declaraes em uma mesma linha e facultativo para separar declaraes em linhas diferentes, contudo uma boa prtica usar ponto-e-vrgula para separar declaraes em linhas diferentes.
// declaraes em linhas separadas recomendado usar ponto-e-vrgula para separar a = 5; b = 8; alert("Al Mundo!");
45
1.8.5 Literais
Na terminologia JavaScript, a palavra literal designa qualquer dado valor xo (no varivel) que se insere no script. Nos exemplos a seguir, os valores 45 e Al Mundo! so literais:
a = 45; mensagem = "Al Mundo!";
Inteiros
Os literais inteiros, na sintaxe JavaScript, so os nmeros inteiros escritos em base decimal (base 10), hexadecimal (base 16) ou octal (base 8). A base octal est em desuso segundo a especicao ECMA-262, embora seja vlida na verso JavaScript 1.5. A base 10 o nosso conhecido sistema de numerao e os nmeros inteiros nela so aqueles do conjunto Z da matemtica que aprendemos no Ensino Mdio: Z = {... -2, -1, 0, 1, 2...} ou conjunto dos nmeros inteiros positivos e negativos mais o nmero zero.
46
A base hexadecimal utiliza 16 smbolos (base 16) para representar os nmeros. Nela, os smbolos so os dez nmeros de 0 a 9 mais as seis primeiras letras do alfabeto A a F. Aqueles familiarizados com CSS certamente conhecem a declarao de cores com o uso do sistema hexadecimal cuja sintaxe mostrada a seguir:
div { background: #FFD38A; }
Outros exemplos de nmero hexadecimal: F2, b43, EC65D1. Na sintaxe CSS, nmeros hexadecimais devero ser precedidos do sinal # (tralha). Na sintaxe JavaScript, nmeros hexadecimais devero ser precedidos de 0x (zero xis) e os exemplos anteriores, em sintaxe JavaScript, sero escritos: 0xF2, 0xb43, 0xEC65D1. Exemplo de declaraes usando o literal inteiro:
c d e f = = = = 32; -119; 0x110B6; 0xf56a2; // // // // base base base base 10 10 hexadecimal hexadecimal
Note que quando se trata de sintaxe na base hexadecimal, as letras A a F podem ser escritas tanto em maisculas quanto em minsculas.
Decimais
Os literais decimais, na sintaxe JavaScript, so os nmeros constitudos por um nmero inteiro e um nmero fracionrio. As casas decimais so separadas por um ponto (.), como mostrado nos exemplos a seguir:
a = 3.1416; b = -76.89; c = .33333;
A sintaxe JavaScript admite a notao cientca (ou notao exponencial) para escrever tanto literais inteiros como literais fracionrios. Notao cientca uma maneira alternativa de representar nmeros compostos por muitos algarismos e consiste em acrescentar a letra E (maiscula) ou e (minscula) a um nmero para indicar expoentes de 10. Observe os exemplos a seguir;
a = 3E5; b = -47.78965432E10; // equivale a 3x10**5 = 300000 // equivale a -47.78965432x10**10 = 477896543200
47
Booleanos
Os literais booleanos, na sintaxe JavaScript, so as palavras-chave true e false (minsculas) destinadas a denir as condies de verdadeiro e falso, respectivamente, para uma varivel ou equivalente, como mostrado a seguir:
a = true; b = false;
Booleanos so amplamente usados em estruturas de controle com a nalidade de testar a veracidade (ou validade) de uma determinada condio, permitindo ao script tomar uma deciso baseado na condio de falso ou verdadeiro da condio. O exemplo a seguir esclarece em linguagem corrente o uso mais comum dos booleanos em programao:
a = 10; se a < 10 faa isto se no faa aquilo;
Quando transformamos a lgica mostrada em sintaxe JavaScript, a condio de teste da varivel a retorna true sempre que a for menor que 10 e false, caso contrrio. Em captulos posteriores, teremos oportunidade de usar com frequncia os booleanos e eventuais dvidas sobre eles sero esclarecidas.
Strings
Os literais strings, na sintaxe JavaScript, so os conjuntos de zero ou mais caracteres envolvidos por aspas duplas (" ") ou aspas simples (' '). Strings so sequncias de caracteres. Observe os exemplos a seguir:
nome = "Maurcio Samy Silva"; // string com aspas duplas outroNome = 'Pedro Nascimento Jnior'; // string com aspas simples
Podemos obter alguma formatao bsica ao escrevermos strings com o uso de caracteres especiais para a linguagem JavaScript. No exemplo a seguir:
mensagem = "Obrigado pela visita.\nVolte em breve.";
Inserimos o caractere \n na string. Ele faz com que haja o pulo de uma linha quando renderizada a string no navegador, resultando em algo como:
Obrigado pela visita. Volte em breve.
Na tabela 1.2, observe alguns dos caracteres especiais da linguagem e a sintaxe geral para caracteres Latin-1 e Unicode.
48
Nas trs ltimas linhas da tabela 1.2, consta a sintaxe geral para a representao de caracteres em strings nos sistemas octal e hexadecimal. O sistema octal est em desuso e, assim, deve ser evitado. O sistema hexadecimal admite uma sintaxe para Latin-1 e uma sintaxe para Unicode. Para consultar as tabelas de caracteres, visite o site http://www.unicode.org/. L, voc encontrar toda a codicao Unicode nos seus variados formatos. Para demonstrar o funcionamento da codicao, mostramos a seguir trs caracteres e seus respectivos cdigos e exemplos de uso na sintaxe JavaScript (Tabela 1.3).
Tabela 1.3 Caracteres Unicode na sintaxe JavaScript
Caractere
(Copyright) (Pargrafo) \251 \247 (Marca registrada) \256
Octal
Observe no script a seguir que utilizamos as trs sintaxes mostradas na tabela 1.3 para obter a renderizao dos caracteres em uma caixa de alerta:
<!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" lang="pt-br"> <head> <title>Livro JavaScript do Maujor</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="../main.css" rel="stylesheet" type="text/css" />
49
[c1-caracteres.html] No arquivo [c1-caracteres.html], no site do livro, ao clicar o boto para mostrar os caracteres, ser apresentada uma caixa de alerta conforme mostra a gura 1.6.
Na tabela 1.2, note que os caracteres ali mostrados tm seus equivalentes Unicode hexadecimal. Por exemplo, \u000A equivale a \n.
Caractere de escape
Na sintaxe para a codicao de caracteres que acabamos de estudar, podemos notar a presena de uma barra invertida \ no incio de cada caractere, tal como \n, \t, \251, \xAE, \u00AE etc.
50
A barra invertida tem um emprego especco na escrita de strings da JavaScript. conhecida como caractere de escape e usada para representar caracteres especiais como mostrado e tambm para escapar caracteres normalmente no permitidos dentro de uma string. O caractere de escape, barra invertida, ignorado dentro da string. Se escrevermos uma string contendo um caminho no diretrio C do HD como mostrado a seguir:
alert("C:\\localhost\index.php");
Iremos obter um resultado conforme o mostrado na gura 1.7, o que obviamente no o que estamos esperando.
Isso porque o primeiro caractere de escape foi ignorado e escapou, o segundo que aparece depois de C: e o terceiro caractere de escape entre localhost e index. php tambm foram ignorados. Para resolver isso, devemos escapar todas as barras invertidas que aparecem na string como mostrado a seguir:
alert("C:\\\\localhost\\index.php");
Sabemos que strings devem ser marcadas com aspas duplas (" ") ou aspas simples (' '). Mas o que ocorre quando uma string contm um texto entre aspas ou apstrofo? Considere as strings a seguir:
Os livros da editora OReilly so muito bons. MacNeil disse: Vim para car .
Como regra geral, aspas que envolvem a string e esto contidas na string devem ser de natureza (simples e dupla) oposta. Se forem de mesma natureza, deveremos usar o caractere de escape nas internas.
51
Arrays
Os literais arrays, na sintaxe JavaScript, so os conjuntos de zero ou mais valores, separados por vrgula e envolvidos por colchetes ([ ]). Os valores contidos em um array recebem um ndice sequencial comeando com zero. A sintaxe para criar um array literal mostrada a seguir:
frutas = ["laranja", "pera", "goiaba", "morango"];
Para recuperarmos os valores de um array, usamos a sintaxe composta pelo nome do array seguida de um ndice, entre colchetes, como mostra o exemplo a seguir:
frutas[0] frutas[3]
Os valores do array que mostramos so strings e devem ser escritos entre aspas como estudamos anteriormente. Um array pode conter qualquer tipo de dado da JavaScript, incluindo expresses, objetos e outras arrays. Por exemplo:
ArrayMisto = ["laranja", 34, "casa", true, [1,3,5], a+b];
Veja no site do livro o exemplo a seguir, que mostra a extrao de dados de um array:
<!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" lang="pt-br"> <head> <title>Livro JavaScript do Maujor</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="../main.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> a = 4; b = 12; ArrayMisto = [ "laranja", 34, "casa", true, [1,3,5], a+b ]; var executar = function() { alert(ArrayMisto[0]); alert(ArrayMisto[1]); alert(ArrayMisto[3]); alert(ArrayMisto[4][1]); alert(ArrayMisto[5]); } </script> </head> <body> <div id="tudo">
52
[c1-arrays.html]
Objetos
Os literais objetos, na sintaxe JavaScript, so os conjuntos de pares nome/valor separados por vrgula e envolvidos por chaves ({ }). O par nome/valor pode ser uma propriedade do objeto e seu respectivo valor, um mtodo do objeto e seu valor (normalmente uma funo) ou mesmo outro objeto. A sintaxe para criar um objeto literal mostrada a seguir:
Carro = { marca: "Renault", modelo: "Logan", ipva: "valor('rb15')", dimensoes: { c: "4.250mm", l: "1.735mm", h: "1.525mm" } };
// // // //
O objeto Carro mostrado possui as propriedades marca, modelo e dimensoes. A propriedade dimensoes um objeto com as propriedades c, l e h que expressam o comprimento, a largura e a altura do carro. O objeto possui ainda um mtodo de nome ipva, que uma funo denominada valor(), que admite um argumento de clculo rb15 destinado a calcular o valor do IPVA. Para extrair os dados de um objeto, usa-se a sintaxe propriedade.valor. Observe o exemplo a seguir disponvel para consulta no site do livro:
<!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" lang="pt-br"> <head>
53
[c1-objetos.html]
54
Parseador XML um processador nativo do navegador (Internet Explorer no tem) cuja finalidade transformar uma marcao XML em um objeto DOM.
Na sintaxe XML caracteres tais como &, " e ' devem ser codicados para & " e ' respectivamente. O mesmo ocorre com o caractere < quando usado de outra maneira que no para indicar abertura de tag, caso em que dever ser codicado para <. Considere que a marcao a seguir est inserida em um documento XML ou XHTML.
<p>O sinal matemtico < indica menor que</p>
Essa marcao ilegal segundo a sintaxe XML, pois o parseador ao encontrar o caractere < inserido no meio do pargrafo o interpretar como uma abertura de tag e no encontrando o respectivo caractere de fechamento da tag gerar um erro. A soluo usar codicao como mostrado a seguir.
<p>O sinal matemtico < indica menor que</p>
Scripts JavaScript podem conter, e normalmente contm, caracteres ilegais segundo a sintaxe XML. Se tais scripts forem inseridos diretamente no documento (no linkados), sero parseados e geraro erro XML. Observe a seguir.
<script type="text/javascript"> if (a<8) { alert("a menor do que 8"); } </script>
A presena do sinal <, menor que, no script causa um erro XML. Se o documento for servido com DOCTYPE XML simplesmente ele no funcionar. Se for servido com DOCTYPE XHTML ele no ser validado. O uso de sees CDATA em JavaScript resolvem o problema tornando o cdigo invisvel para o parser XML e portanto vlido. Observe a seguir um exemplo demonstrando a sintaxe e uso de sees CDATA em JavaScript.
<script type="text/javascript"> // <![CDATA[ if (a < 8) { alert("a menor do que 8"); } // ]]> </script>
55
Se o documento usar um DOCTYPE para HTML no necessrio o uso de sees CDATA pelo fato de que HTML no segue a sintaxe XML. Por mais estranho que possa parecer a graa para a seo CDATA deve ser em maiscula embora a sintaxe XML imponha minsculas.
1.9 Variveis
Varivel um nome qualquer ao qual se atribui um valor ou dado. Uma varivel pode conter uma string, um nmero inteiro, um nmero fracionrio, um array, um booleano, uma funo, um objeto etc. Variveis so tambm chamadas de identicadores. O nome da varivel de livre escolha do programador, ressalvadas as seguintes restries sintticas: o nome da varivel deve comear com um dos trs seguintes caracteres: uma letra, um caractere underscore (_) ou um caractere cifro ($). Os caracteres que se seguem podem ser letras maisculas ou minsculas (A-Z ou a-z), nmeros (0-9), underscores (_) ou caractere cifro ($). interessante no utilizar o caractere cifro ($) para no haver confuso com cdigos especcos de bibliotecas JavaScript, pois amplamente empregado na sintaxes desses frameworks. A partir da verso JavaScript 1.5, permite-se o uso de letras acentuadas, dgitos, caracteres escapados e demais caracteres Unicode em nome de variveis. Exemplos de nomes de variveis:
a _xpto minha_variavel minhaVariavel minha-variavel cd456
Embora a sintaxe para escrever variveis permita uma innidade de combinaes, e o programador livre para escolher aquela que bem entender, algumas regras prticas consagradas pelo uso devem ser seguidas no em carter obrigatrio, mas como uma tcnica de boas prticas de programao. Procure adotar as seguintes regras ao escolher nomes para variveis:
Escolha nomes que transmitam uma dica do contedo da varivel. Por exemplo: qdeLivros para uma varivel destinada a armazenar uma quantidade de livros.
56
Evite nomes de variveis como a, f34, variavelParaArmazenarUmObjeto, pois so muito sucintas ou verbosas. Use as letras i, j, k,... para nomear variveis contadoras. Variveis nomeadas com um nome composto podem ser escritas de vrias formas. Por exemplo: nomevendedor, nome-vendedor, nome_vendedor e nomeVendedor so todos nomes vlidos e podemos escolher qualquer um deles. As formas mais usadas so nome_vendedor e nomeVendedor, e essa ltima usa a graa conhecida como CamelCase. O importante que o desenvolvedor escolha uma das formas mostradas ou mesmo outra forma vlida por ele inventada e adote-a para desenvolver todos os seus projetos, mantendo a consistncia de escrita. H, ainda, restrio nal para escolher nomes de variveis. Algumas palavras fazem parte da sintaxe da linguagem JavaScript e no podem ser usadas para nomear variveis. Tais palavras esto agrupadas em trs categorias distintas, a saber: palavras prprias e internas da JavaScript (Tabela 1.4), palavras reservadas pelas especicaes ECMA-262 para uso em futuras verses da JavaScript (Tabela 1.5) e palavras que fazem parte da implementao JavaScript nos dispositivos que hospedam a linguagem, como um navegador, por exemplo (Tabela 1.6).
Tabela 1.4 Palavras-chave JavaScript
break case catch continue default delete do else finally for function if in instanceof new return switch this throw try typeof var void while with
Captulo 1 Introduo JavaScript Tabela 1.6 Palavras reservadas dos dispositivos de hospedagem
alert array blur boolean date document escape eval focus function history image isNaN length location math name navigator number object onLoad open outerHeight parent parseFloat regExp status string
57
Lembre-se de que JavaScript sensvel ao tamanho da caixa (case sensitive). Assim, as variveis nomevendedor, nome-vendedor, nome_vendedor e nomeVendedor so diferentes.
Note que a varivel minhaVariavel comea com um valor do tipo string e, em um ponto posterior no script, a mesma varivel assume um valor tipo numrico. Tal fato legal em JavaScript, pois a linguagem reconhece o tipo de dado quando a varivel declarada. Na maioria das linguagens de programao, isso ilegal, pois uma determinada varivel dever ser declarada para um tipo de dado e conter sempre esse tipo. Um conceito importante ao declararmos uma varivel o chamado escopo da varivel, que o ambiente ou, mais precisamente, o trecho ou regio do script no qual a varivel assume o valor que foi para ela declarado. Uma varivel pertence ao escopo global e denomina-se varivel global quando seu valor reconhecido em qualquer trecho do script. Por outro lado, diz-se que uma varivel local e pertence ao escopo local quando seu valor reconhecido somente no trecho do script no qual ela foi declarada.
58
chave var implica que a varivel pertena ao escopo global. Observe a seguir:
var a = 30; b = 25; // a varivel a pertence ao escopo local // a varivel b pertence ao escopo global
Vamos xar a noo de escopo de uma varivel com o uso do script mostrado a seguir. Caso voc no esteja familiarizado com o funcionamento de funes na JavaScript, no se preocupe em entend-lo agora. No captulo 6, trataremos de funes com mais detalhes.
<script type="text/javascript"> a = 10; funcaoUm = function() { var a = 20; alert(a); // alerta o valor 20 }; funcaoUm(); // executa a funcaoUm funcaoDois = function() { alert(a); // alerta o valor 10 }; funcaoDois(); // executa a funcaoDois // mais script ... alert(a); // alerta o valor 10 </script>
Podemos identicar trs regies distintas no script mostrado. A regio da funcaoUm, a regio da funcaoDois e a regio compreendendo todo o script (dentro e fora das duas funes). Para a funcaoUm, o valor da varivel a 20, pois a declaramos no corpo da funo com o uso da palavra-chave var. Trata-se de uma varivel local cujo valor vale somente para a funo. Para a funcaoDois, no foi declarado um valor local para a varivel a, portanto a funo procura o valor da varivel no escopo global e encontra o valor 10. Se no existisse uma varivel a = 10 no escopo global, o valor retornado para ela seria considerado indenido (undened), causando um erro no script. Alm das duas funes, o ltimo alerta usa a varivel do escopo global com valor 10.
59
Vamos introduzir uma modicao no exemplo anterior com a nalidade de esclarecer melhor o escopo de uma varivel. A modicao consiste em declarar um novo valor para a varivel a dentro da funcaoDois, mas sem uso da palavra-chave var, ou seja, trata-se de uma varivel do escopo global denida no corpo de uma funo.
<script type="text/javascript"> a = 10; funcaoUm = function() { var a = 20; alert(a); // alerta o valor 20 }; funcaoUm(); // executa a funcaoUm funcaoDois = function() { a = 40; alert(a); // alerta o valor 40 }; funcaoDois(); // executa a funcaoDois // mais script ... alert(a); // alerta o valor 40 </script>
A declarao do valor global 40 para a varivel a dentro da funcaoDois sobrescreve o valor global 10 declarado anteriormente e, em consequncia, neste caso, o alerta seguinte e o ltimo alerta retornaro 40 e no mais 10. A seguir, mais alguns exemplos esclarecendo o escopo de variveis. Estude-os com ateno para entend-los, pois os conceitos so os mesmos mostrados nos exemplos anteriores.
Exemplo 1:
<script type="text/javascript"> funcaoUm = function() { a = 20; alert(a); // alerta o valor 20 }; funcaoUm(); // executa a funcaoUm alert(a); // alerta o valor 20 </script>
Exemplo 2:
<script type="text/javascript"> funcaoUm = function() { var a = 20; alert(a); // alerta o valor 20
60
}; funcaoUm(); alert(a); </script>
Exemplo 3:
<script type="text/javascript"> funcaoUm = function() { var a = 20; alert(a); // alerta o valor 20 function funcaoAninhada() { var a = 40; // alerta o valor 40 alert(a); }; funcaoAninhada(); // executa a funcaoAninhada }; funcaoUm(); // executa a funcaoUm </script>
Exemplo 4:
<script type="text/javascript"> a = 40; funcaoUm = function() { alert(a); // alerta undifined var a = 10; alert(a); // alerta o valor 10 }; funcaoUm(); // executa a funcaoUm </script>
O exemplo 4 expressa um conceito de escopo de variveis que diz o seguinte: uma varivel local cria, na regio onde for declarada, um contexto para sua validade, independentemente de onde estiver posicionada na regio. No exemplo 4, era de se esperar que o primeiro alerta resultasse no valor 40, pois existe uma varivel a do escopo global denida anteriormente com esse valor. Contudo, como existe uma varivel a local de valor 10, denida dentro da funo, ela vlida dentro de toda a funo e o primeiro alerta por estar antes da declarao da varivel local sabe que foi criado um contexto de validade para a, mas no conhece seu valor, retornando indenido. Para evitar resultados inesperados como o mostrado no exemplo 4, importante declarar as variveis logo no incio da funo.
61
Em um script muito extenso desenvolvido individualmente ou em equipe, muito difcil manter o controle sobre o nome das variveis dele e a possibilidade de se escolher um mesmo nome para uma varivel em diferentes locais dele deve ser considerada. Isso poder ocasionar sobrescrio de variveis anteriormente declaradas, causando resultados inesperados e, dependendo do contexto, difceis de serem detectados pelo desenvolvedor. interessante usar sempre a palavra-chave var ao se declarar variveis, tornando-as todas variveis locais. Tal prtica no mandatria, mas sim altamente recomendada, ressalvados os casos em que declarar variveis globais tenha sido uma deciso fundamentada em propsitos consistentes para o script e que garanta o pleno controle de tais variveis ao longo de todo o processo de desenvolvimento.
A terceira forma a mais simplicada e tem sido preferida pela maioria dos desenvolvedores, contudo voc livre para escolher a que lhe parea mais apropriada e seguir com ela por todos os scripts que venha a desenvolver. Excluam-se os casos especcos nos quais talvez fosse melhor escolher outra forma com a nalidade, por exemplo, de tornar o cdigo mais claro ou legvel. Note que na forma mais simplicada a palavra-chave var aparece somente na declarao da primeira varivel e as declaraes seguintes so separadas por vrgula. Nessa sintaxe, a palavra-chave var vlida para todas as variveis da lista e, em consequncia, todas elas so variveis locais.
62
Para representar um valor indenido, a sintaxe JavaScript usa uma propriedade do objeto global denominada undefined (indenido). Diz-se que uma varivel assume o valor undefined quando declarada e no inicializada, ou seja, no se atribui um valor a ela. No exemplo a seguir, a varivel a indenida:
var a;
Para representar um valor que no seja um nmero, a sintaxe JavaScript usa uma propriedade do objeto global denominada NaN. No exemplo a seguir, a varivel a representada por NaN:
var a = 3 * "Ol";
Para representar um valor innito positivo, a sintaxe JavaScript usa uma propriedade do objeto global denominada Infinity. No exemplo a seguir, a varivel a tem valor innito. A faixa de nmeros manipulveis pelo interpretador JavaScript est compreendida entre:
-1.7976931348623157e+308 e 1.7976931348623157e+308
Os nmeros mostrados esto escritos em notao cientca. A notao cientca da forma ae+b e ae-b e usada para representar nmeros muito grandes ou muito pequenos. Observe um exemplo mostrando a equivalncia de nmeros na notao decimal e cientca:
3.2e+4 = 3.2x104 = 32000 347e-5 = 347x10-5 = 0,00345
Valores abaixo desses nmeros so considerados -Infinity e acima, +Infinity. Estudaremos com mais detalhes essas propriedades do objeto Number no captulo 9.
var a = 12 + Infinity;
63
Pode-se fazer referncia ao objeto global window com o uso de uma palavra-chave prpria da linguagem JavaScript denominada this. Assim, as sintaxes a seguir so equivalentes s mostradas anteriormente e perfeitamente vlidas:
this.alert("Ol Mundo"); this.confirm("Voc tem certeza?"); this.prompt("Informe seu nome", " ");
A palavra-chave this refere-se ao objeto Window quando usada fora do corpo de uma funo. Quando utilizada no corpo de uma funo, refere-se a um objeto que no window. um objeto prprio da funo denominado genericamente de call object. Trataremos desse objeto em captulos posteriores deste livro.
64
Quando declaramos, em nossos scripts, variveis globais, estas so automaticamente declaradas como propriedades do objeto global window. Assim, de acordo com os conceitos j estudados, as seguintes sintaxes so vlidas:
a = 50; alert(window.a); // alerta 50 ... funcaoUm = function() { var b = 30; }; funcaoUm(); alert(window.b); // alerta undefined, pois b local e no global
Os exemplos anteriores podem ser escritos com a palavra-chave this como mostrado a seguir:
a = 50; alert(this.a); // alerta 50 ... funcaoUm = function() { var b = 30; }; funcaoUm(); alert(this.b); // alerta undefined, pois b local e no global