Anda di halaman 1dari 45

JavaScript

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

Internacionais de Catalogao na Publicao (Cmara Brasileira do Livro, SP, Brasil)


Silva, Maurcio Samy JavaScript : guia do programador / Maurcio Samy Silva. -- So Paulo : Novatec Editora, 2010. Bibliografia. ISBN 978-85-7522-248-5 1. JavaScript (Linguagem de programao) I. Ttulo.

(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.

1.1 Viso geral


A linguagem de marcao HTML destina-se a estruturar uma pgina web, no se devendo empreg-la para adicionar estilos ou apresentao visual aos elementos que constituem a pgina, sendo tais tarefas funo das folhas de estilo em cascata. A HTML, em sua verso atual _ HTML 4.01 _, tambm no possui funcionalidades que permitam adicionar interatividade avanada pgina, sendo tal tarefa funo das linguagens de programao.
22

Captulo 1 Introduo JavaScript

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

JavaScript Guia do Programador

1.2 Funcionalidades gerais da JavaScript


1.2.1 Manipular contedo e apresentao
Com JavaScript, podemos escrever marcao HTML e inseri-la na marcao de um documento existente. Por exemplo: insero de data/hora no documento, insero de uma mensagem de boas-vindas ou, ainda, insero de contedos diferenciados e escolhidos de acordo com o navegador do usurio. Podemos, at mesmo, gerar o HTML completo de uma pgina web. Na verdade, esse poder da JavaScript em gerar marcao HTML foi um dos fatores responsveis pela m fama da linguagem. Desenvolvedores, maravilhados com as possibilidades dessa linguagem, comearam a gerar, indiscriminadamente, HTML, tornando os contedos completamente inacessveis. Antigamente, tal prtica era comum, aceitvel e amplamente empregada, porm com a chegada dos Padres Web, no admissvel gerar indiscriminadamente HTML com JavaScript. preciso uma anlise criteriosa para determinar que HTML pode ou no ser gerado com JavaScript.
Usar JavaScript em conformidade com os Padres Web implica, entre outras prticas, que, na ausncia de um interpretador JavaScript, no se comprometa o acesso ao contedo.

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.

1.2.2 Manipular o navegador


Com JavaScript, podemos controlar o comportamento do navegador em diversos aspectos, como criar janelas pop-up, apresentar mensagens ao usurio, alterar as dimenses do navegador, interferir na barra de status, retirar menus, fechar e abrir janelas. muito provvel que voc j tenha passado pela desagradvel experincia de entrar em um site e, surpreendentemente, constatar que toda a parte superior do navegador simplesmente desapareceu, impedindo-o de fechar a janela. Ou, ainda,

Captulo 1 Introduo JavaScript

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.

1.2.3 Interagir com formulrios


JavaScript capaz de acessar os campos e valores digitados em um formulrio HTML e proceder validao dos dados, realizar clculos e fornecer dicas de preenchimento dos campos.

1.2.4 Interagir com outras linguagens dinmicas


JavaScript pode ser usada em conjunto com outras linguagens para cumprir tarefas complementares relacionadas ao uxo da programao.

1.3 JavaScript em conformidade com os Padres Web


O conceito de desenvolvimento em conformidade com os Padres Web trouxe como consequncia imediata para a linguagem JavaScript a necessidade de se rever os seus critrios de uso. Da surgiram dois princpios bsicos que norteiam seu uso: o princpio de Javascript no obstrutivo e o da melhoria progressiva. No h uma clara diviso entre eles, na verdade se completam e so interdependentes. Escrever JavaScript no obstrutivo implica:

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

JavaScript Guia do Programador

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).

1.4 Camadas de desenvolvimento


Com a chegada dos Padres Web, o conceito de desenvolvimento em camadas tornou-se um importante ponto a ser considerado na construo de aplicaes Web. Tal conceito preconiza a separao dos cdigos de desenvolvimento em trs camadas separadas: a camada de estruturao de contedos constituda pela marcao HTML, a camada de apresentao constituda pelas folhas de estilos e a camada de comportamento constituda pelos scripts que determinam comportamentos como scripts desenvolvidos com JavaScript. Desenvolver segundo o princpio da separao das camadas de desenvolvimento implica escrever os cdigos especcos de cada camada em arquivos separados e

Captulo 1 Introduo JavaScript

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.

1.5 Introduo linguagem


A linguagem JavaScript foi inventada por Brendan Eich, da Netscape, e a primeira verso da linguagem denominada JavaScript 1.0 foi introduzida no navegador Netscape 2.0 em 1996. Nesse mesmo ano, a Microsoft lanou sua verso com o nome JScript 1.0 e introduziu-a no ento Internet Explorer 3.0. quela poca, em plena guerra dos navegadores, as diferentes implementaes das funcionalidades da linguagem nos dois navegadores no seguiam um padro unicado, causando um verdadeiro martrio para o desenvolvedor implantar scripts para servir ambos os navegadores. No iremos entrar em detalhes histricos com relao s implementaes proprietrias, mas convm ressaltar que at os dias atuais ainda sentimos os efeitos nefastos daquela era, conforme veremos no decorrer dos captulos deste livro. Atualmente, o nome ocial da JavaScript ECMAScript e a verso da linguagem a ECMA-262 v5. Na tabela 1.1, h um resumo da evoluo da JavaScript em suas diferentes verses e implementaes.

28 Tabela 1.1 Verses da JavaScript


Verso
JavaScript 1.0 JavaScript 1.1 JavaScript 1.2 JavaScript 1.3 JavaScript 1.4 JavaScript 1.5 JavaScript 1.6 JavaScript 1.7 JavaScript 1.8 JavaScript 1.8.1 JavaScript 1.9 JavaScript 1.0 JavaScript 2.0 JavaScript 3.0 JavaScript 4.0 JavaScript 5.0 JavaScript 5.1 JavaScript 5.5 JavaScript 5.6 JavaScript 5.7 JavaScript 5.8 ECMA-262 v1 ECMA-262 v2 ECMA-262 v3 ECMA-262 v4 ECMA-262 v5 Netscape 2.0 Netscape 3.0 Netscape 4.0 e 4.05 Netscape 4.06 e 4.07x Servidores Netscape Firefox 1.5 Safari 3.0 e 3.1 Firefox 2.0 Safari 3.2 e 4.0 Chrome 1.0 Firefox 3.0 Firefox 3.5 Firefox 4.0 Internet Explorer 3 Internet Explorer 3 Windows IIS 3 Internet Explorer 4 Visual Studio 6.0 Internet Explorer 5 Internet Explorer 5.01 Internet Explorer 5.5 Internet Explorer 6 Internet Explorer 7 Internet Explorer 8 Navegadores verso 4 Verso de testes Navegadores verso 6 Navegadores verso 6+ Verso atual

JavaScript Guia do Programador

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

Netscape 6.0 Firefox 1.0 Opera 6.0 a 9.0 Novembro 2000

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

Captulo 1 Introduo JavaScript

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

JavaScript Guia do Programador

Cada navegador ou servidor que suporta ECMAScript fornece seu ambiente prprio de hospedagem que completa o ambiente de execuo ECMAScript.

1.6 Criando uma base para estudos


Antes de prosseguirmos com a apresentao dos fundamentos da linguagem, vamos apresentar alguns conceitos e funcionalidades da JavaScript que serviro de base para desenvolver nossos estudos e exemplos prticos disponveis no site do livro. O que iremos estudar a seguir so temas bsicos da JavaScript e se o leitor j tem alguma intimidade com essa linguagem, sinta-se vontade para ler o captulo seguinte. Contudo, convido-o a ler o que se segue com o propsito de fazer uma reviso de conceitos.

1.6.1 Orientao a objetos


A linguagem JavaScript suporta programao orientada a objetos Object-Oriented Programming (OOP). mais apropriado dizer que JavaScript uma linguagem capaz de simular muitos dos fundamentos de OOP, embora no plenamente alinhada com todos os conceitos de orientao a objetos. Veremos a seguir os fundamentos da OOP para JavaScript, sem, contudo, entrar em consideraes ou diferenciaes com OOP para outras linguagens de programao, pois este no o escopo deste livro. OOP um paradigma (estilo) de programao que usa analogia com objetos do mundo real e suas caractersticas para denir estruturas de dados agrupados em campos ou mtodos, bem como a interao entre esses dados, com a nalidade de desenvolver aplicaes e escrever programas de computador. A melhor maneira de entender o paradigma da programao OOP mostrar a analogia com objetos do mundo real. Para nosso exemplo, vamos considerar o objeto: pessoa. Objetos possuem propriedades e mtodos. Propriedades so valores associados ao objeto. Algumas propriedades do nosso objeto pessoa so altura, peso, sexo, cor da pele, naturalidade, prosso etc. Mtodos (ou funes) so aes que podem ser executadas pelo objeto. Alguns mtodos do objeto pessoa so andar(), dormir(), comer(), trabalhar(), divertir() etc.

Captulo 1 Introduo JavaScript

31

Para acessar as propriedades de um objeto, usamos a sintaxe mostrada a seguir:


altura = Pessoa.altura; sexo = Pessoa.sexo; profissao = Pessoa.profissao; ...

Para acessar os mtodos de um objeto, a sintaxe conforme mostrada a seguir:


Pessoa.andar(); Pessoa.dormir(); Pessoa.trabalhar(); ...

Os objetos da linguagem JavaScript podem ser agrupados em trs categorias distintas:


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.

1.6.2 Caixas de dilogo


Caixa de dilogo uma janela do tipo pop-up que se destina a fornecer informaes ou coletar dados do usurio. A linguagem JavaScript possui trs mtodos (ou funes), para o objeto Window, destinadas a criar trs tipos de caixa de dilogo.

32

JavaScript Guia do Programador

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.

Captulo 1 Introduo JavaScript

33

Figura 1.1 Alert Box em diferentes navegadores.

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

JavaScript Guia do Programador

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.

Figura 1.2 Alert Box com mensagem em duas linhas.

Talvez voc seja tentado a escrever o seguinte script:


<head> ... <script type="text/javascript"> alert("Al Mundo!<br />Cheguei."); </script> </head> ...

Isso no vai funcionar, pois <br /> ser interpretado como uma string e no como um elemento HTML. Experimente fazer isso e visualize no navegador.

Captulo 1 Introduo JavaScript

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.

Caixa de dilogo de confirmao


O mtodo confirm() do objeto Window destina-se a colocar na interface do usurio uma caixa de dilogo contendo dois botes, normalmente denominados OK e Cancelar, e, ao clicar um deles, ele conrma ou cancela uma determinada ao. 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"> confirm("Voc tem certeza que quer apagar o arquivo?\n Esta operao no poder ser desfeita."); </script> </head> <body> </body> </html>

[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

JavaScript Guia do Programador

Figura 1.3 Caixa de dilogo conrm.

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.

Caixa de dilogo para entrada de string


O mtodo prompt() do objeto Window destinada-se a colocar na interface do usurio uma caixa de dilogo contendo um campo para que ele digite uma string. Essa funo admite dois argumentos conforme mostrado a seguir:
prompt ("arg1", ["arg2"]);

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.

Captulo 1 Introduo JavaScript

37

Figura 1.4 Caixa de dilogo prompt.

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.

1.6.3 Escrever HTML com JavaScript


Vimos os trs mtodos do objeto Window destinados a criar caixas de dilogo. Vamos examinar a seguir o mtodo write() do objeto Document cuja nalidade escrever marcao HTML em um documento. Uma vez que Document um objeto de Window, a sintaxe para esse mtodo mostrada a seguir:
window.document.write("arg1");

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

JavaScript Guia do Programador


<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> ... <script type="text/javascript"> document.write("<h2>O mtodo <code>write()</code></h2>"); document.write("<p>O mtodo <code>write()</code> do objeto <code>document</code> destina-se a escrever marcao HTML com uso da JavaScript</p>"); </script> ... </body> </html>

[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.

Figura 1.5 Mtodo write().


O mtodo write() s funciona como mostrado no exemplo anterior, quando inserido no fluxo do documento que est sendo processado. Se chamarmos esse mtodo com o uso de link na seo head ou de um evento como veremos a seguir, em um documento j carregado, ele ir sobrescrever todo o HTML carregado.

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().

Captulo 1 Introduo JavaScript

39

1.6.4 Atrelar um evento com JavaScript


Outra funcionalidade da linguagem que usaremos para servir de apoio aos exemplos diz respeito a eventos. Apresentaremos sumariamente o objeto evento mostrando os princpios bsicos do seu uso e, em captulos posteriores, iremos aprofundar os conceitos. Genericamente falando, podemos dizer que eventos so aes capazes de disparar uma reao. Veja este exemplo: clicar um link ou colocar o ponteiro do mouse sobre um elemento so eventos. Ao clicar um link, desencadeamos uma reao que poder ser a de abrir uma nova pgina. Ao colocar o ponteiro do mouse sobre um elemento, podemos, por exemplo, alterar a opacidade dele. Eventos so muito usados em JavaScript e viabilizam a interatividade em uma pgina Web. Na verdade, eventos viabilizam a prpria existncia da JavaScript. Sem eles, no teramos como fazer funcionar os scripts. Neste captulo, no iremos aprofundar o estudo de eventos. Mostraremos apenas os eventos denominados onclick e onload que ocorrem respectivamente quando o usurio clica um elemento qualquer da pgina (no necessariamente um link) e quando um documento carregado. Eventos podem ser disparados pelo usurio, como o caso de onclick, ou ocorrer independentemente da interferncia do usurio, como o caso de onload. Observe o script a seguir e, antes de visualizar o seu funcionamento no site do livro, tente entend-lo:
<!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> <button type="button" onclick="alert('Caixa de alerta');">Alert</button> <button type="button" onclick="confirm('Caixa de confirmao');">Confirm</button> <button type="button" onclick="prompt('Caixa de dados');">Prompt</button> </body> </html

[c1-onclick.html]

40

JavaScript Guia do Programador

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"> &laquo; anterior</a> | <a href="c1-onclick.html">prximo &raquo;</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.

1.7 Inserir JavaScript na HTML


Para escrever cdigo JavaScript, no h necessidade de instalar um software especial. Escrevemos JavaScript com um editor de textos simples e visualizamos o resultado em um navegador. Arquivos escritos com o uso dessa linguagem devem ser gravados com a extenso .js e so criados para serem executados dentro de um arquivo HTML.

Captulo 1 Introduo JavaScript

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.

Exemplo de script inline:


<button type="button" onclick="alert(Ol visitante!')">

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

JavaScript Guia do Programador

Exemplo de script externo:


... <head> ... <script type="text/javascript" src="scripts/meu_script.js"></script> </head> ...

Note o uso do atributo src para indicar o caminho para o arquivo que contm o script.

1.8 Sistema lxico da JavaScript


Entende-se por sistema lxico de uma linguagem o conjunto de palavras que compem a linguagem. Neste item, iremos estudar a estrutura lxica da JavaScript, bem como as regras gramaticais e sintticas para escrever scripts.

1.8.1 Tamanho de caixa


A linguagem JavaScript sensvel ao tamanho de caixa (case sensitive). Isso signica que nomes de variveis, funes e demais identicadores so diferenciados quando escritos com letras maisculas ou minsculas. Por exemplo: as variveis total, Total, toTal e TOTAL so diferentes. O mtodo write() deve ser escrito em minscula, pois escrever Write() ou WRITE() causar um erro no script. Observe a marcao HTML a seguir:
<button type="button" onClick="alert('Ol visitante!')">

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.

Captulo 1 Introduo JavaScript

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:

Comentrio em linha nica (variante 1):

<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>

Comentrio em linha nica (variante 2):

<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>

Comentrio em mltiplas linhas:

<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

JavaScript Guia do Programador

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!");

1.8.4 Espaos em branco e quebras de linha


Quebras de linhas e espaos em branco, quando inseridos entre nomes de variveis, nomes de funes, nmeros e entidades similares da linguagem, so ignorados na sintaxe JavaScript. Contudo, para strings e expresses regulares, tais espaamentos so considerados. Vejamos alguns exemplos que esclarecem o uso desses espaos:

As duas sintaxes a seguir so vlidas:


a=27; e a = 27; alert("Ol") e alert ( "Ol" ) function(){...} e function () {...}

As sintaxes a seguir causam um erro no script:


a = 2 7; // espao entre os algarismos de um nmero no permitido document.write("<p> Eu sou uma string</p>") // quebra de linha em uma string

Captulo 1 Introduo JavaScript


45

A sintaxe a seguir vlida:


document.write("<p> Eu sou \ uma string</p>") // uso de \ para quebrar linha em string

A sintaxe a seguir causa um erro no script:


document.write \ ("<p> Eu sou uma string</p>") // uso de \ para quebrar linha fora de string

A sintaxe a seguir vlida:


document.write ("<p> Eu sou uma string</p>") // quebra de linha entre nome de funes

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!";

Existem seis tipos de dados literais conforme descritos a seguir:


inteiros; decimais; booleanos; strings; arrays; objetos.

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

JavaScript Guia do Programador

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

Captulo 1 Introduo JavaScript

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

JavaScript Guia do Programador Tabela 1.2 Tabela de caracteres especiais da JavaScript


Caractere
\b \f \n \r \v \t \ \" \\ \XXX \xXX \uXXXX

Descrio Caractere Unicode hexadecimal


Backspace \u0008 Form feed \u000C Nova linha \u000A Retorno do carro \u000D Tabulao vertical \u000B Tabulao horizontal \u0009 Apstrofo ou aspas simples \u0027 Aspas duplas \u0022 Barra invertida \u005C Caractere Latin-1 expresso por dgitos octais de 1 a 377 Caractere Latin-1 expresso por dois dgitos hexadecimais de 00 a FF Caractere Unicode expresso por quatro dgitos hexadecimais

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

Latin-1 hexadecimal Unicode hexadecimal


\xA9 \xAE \xA7 \u00A9 \u00AE \u00A7

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" />

Captulo 1 Introduo JavaScript


<script type="text/javascript"> var executar = function() { var caractere = "\ Octal:..................\251, \256, \266 \n\ Latin 1 Hexadecimal:....\xA9, \xAE, \xB6 \n\ Latin 1 Unicode:........\u00A9, \u00AE, \u00B6" alert(caractere); } </script> </head> <body> <div id="tudo"> <h1>Captulo 1</h1> <p class="xpto" id="teste">Caracteres especiais.</p> <p class="nav-arq" id="referencia">Arquivos exemplo: <a href="c1-write-apos-carregamento.html">&laquo; anterior</a> | <a href="c1-#.html">prximo &raquo;</a></p> <button type="button" onclick="executar()">Mostrar caracteres</button> </div> </body> </html>

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.

Figura 1.6 Renderizao de caracteres.

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

JavaScript Guia do Programador

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.

Figura 1.7 Caractere de escape.

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 .

As seguintes sintaxes so vlidas para escrever as strings mostradas:


"Os livros da editora O'Reilly so muito bons." // aspas duplas fora e simples dentro 'Os livros da editora O'Reilly so muito bons.' // aspas simples fora e simples escapadas dentro 'Mac\'Neil disse: "Vim para ficar".'' // aspas simples fora, duplas e simples escapadas dentro "Mac'Neil disse: \"Vim para ficar\"." // aspas duplas fora, duplas escapadas e simples dentro

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.

Captulo 1 Introduo JavaScript

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]

contm o valor laranja. contm o valor morango.

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

JavaScript Guia do Programador


<h1>Captulo 1</h1> <p class="xpto" id="teste">Literais arrays.</p> <p class="nav-arq" id="referencia">Arquivos exemplo: <a href="c1-caracteres.html">&laquo; anterior</a> | <a href="c1-objetos.html">prximo &raquo;</a></p> <button type="button" onclick="executar()">Mostrar array</button> </div> </body> </html>

[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" } };

// // // //

propriedade/valor propriedade/valor propriedade/mtodo propriedade/objeto

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>

Captulo 1 Introduo JavaScript


<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"> Carro = { marca: "Renault", modelo: "Logan", ipva: "valor('rb15')", dimensoes: { c: "4.250mm", l: "1.735mm", h:"1.525mm" } } marca = Carro.marca; modelo = Carro.modelo; comprimento = Carro.dimensoes.c; executar = function() { alert(marca); alert(modelo); alert(comprimento); } </script> </head> <body> <div id="tudo"> <h1>Captulo 1</h1> <p class="xpto" id="teste">Literais objetos.</p> <p class="nav-arq" id="referencia">Arquivos exemplo: <a href="c1-caracteres.html">&laquo; anterior</a> | <a href="c1-#.html">prximo &raquo;</a></p> <button type="button" onclick="executar()">Mostrar propriedades</button> </div> </body> </html>

53

[c1-objetos.html]

1.8.6 Seo CDATA


Sees CDATA se destinam a esconder do parseador XML blocos de texto que contenham caracteres de dados ou marcao.

54

JavaScript Guia do Programador

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 &amp; &quot; e &apos; 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 &lt;. 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 &lt; 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>

Captulo 1 Introduo JavaScript

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

JavaScript Guia do Programador

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

Tabela 1.5 Palavras reservadas pela especicao ECMA-262


abstract boolean byte char class const debugger double enum export extends final float goto implements import int interface long native package private protected public short static super synchronized throws transient volatile public

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.

1.9.1 Declarar variveis


JavaScript uma linguagem de programao no tipicada, pois, ao contrrio da maioria das linguagens de programao, as variveis da JavaScript podem conter qualquer tipo de dado. Observe o exemplo a seguir:
... minhaVariavel = "Al Mundo"; // aqui script minhaVariavel = 235; // aqui mais script ...

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

JavaScript Guia do Programador

Para declarar uma varivel pertencente ao escopo local, usa-se a palavra-chave


var, que prpria da sintaxe JavaScript. Declarar uma varivel sem uso da palavra-

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.

Captulo 1 Introduo JavaScript

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>

JavaScript Guia do Programador


// executa a funcaoUm // retorna undifined

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.

Captulo 1 Introduo JavaScript

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.

Sintaxe para declarar variveis


importante declarar as variveis na primeira linha de cdigo da regio para a qual ela ser vlida, mas no h uma sintaxe rgida para a forma de declar-las. Observe nos exemplos a seguir trs formas diferentes de se declarar variveis.
... var a = 40; var b = 60; var c = "Al Mundo!"; var a = 40; var b = 60; var c = "Al Mundo!"; var a = 40, b = 60, c = "Al Mundo!"; ...

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

JavaScript Guia do Programador

null, undefined, NaN, Infinity


Faremos uma introduo sumria ao signicado de um valor e trs propriedades da linguagem JavaScript com a nalidade de fornecer uma base mnima para compreender alguns exemplos que desenvolveremos na sequncia deste captulo e no captulo 2. Posteriormente, detalharemos com mais preciso os conceitos estudados a seguir. Na sintaxe JavaScript, null uma palavra-chave que indica ausncia de valor, ou um objeto sem um valor que o represente. Se uma varivel declarada null, no existe um objeto, um array, uma string, um literal ou qualquer outro valor a ela associado. No exemplo a seguir, a varivel a foi declarada null:
var a = null;

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;

Captulo 1 Introduo JavaScript

63

1.10 Variveis e propriedades dos objetos


Fizemos uma introduo sintaxe JavaScript para objetos no item [1.8.5]. Vimos que propriedades de um objeto nada mais so do que valores de uma varivel do objeto. Nesse sentido, no h diferenas entre variveis e propriedades dos objetos. Ambas so conceitualmente idnticas. O item a seguir esclarece melhor esse conceito.

1.11 Objeto global


Um ambiente de hospedagem da JavaScript possui, nativamente instalado, um interpretador da linguagem. Toda vez que se inicia um desses ambientes, ele cria um objeto global contendo todas as propriedades e mtodos da linguagem e do ambiente de hospedagem. Para esclarecer e identicar o objeto global, tomemos como exemplo um navegador web que um ambiente de hospedagem para JavaScript. Quando abrimos o navegador, cria-se um objeto global que, na sintaxe JavaScript, se denomina window. Esse objeto contm todas as propriedades e mtodos da linguagem e do respectivo navegador. Os mtodos para criar caixas de dilogo que estudamos anteriormente so do objeto Window e, assim sendo, as sintaxes a seguir so perfeitamente vlidas:
window.alert("Ol Mundo"); window.confirm("Voc tem certeza?"); window.prompt("Informe seu nome", " ");

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

JavaScript Guia do Programador

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